Skip to content

Commit cfe7992

Browse files
jiwon234jiwon234
authored
Merge pull request #135 from MUIT-UMC/134-fix
[FIX] 게시판 레이아웃 수정, 데이터 의존성 추가
2 parents 43a18eb + c96a3c3 commit cfe7992

13 files changed

Lines changed: 78 additions & 32 deletions

File tree

‎src/components/board/PageNavigator.jsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,42 @@ import ChevronLeft from "../../assets/icons/ChevronLeft.svg";
44
import ChevronRight from "../../assets/icons/ChevronRight.svg";
55

66
const PageNavigator = ({ currentPage, totalPages, onPageChange }) => {
7+
const pagesPerGroup = 5; // 5개씩 끊어서 표시
8+
const currentGroup = Math.floor(currentPage / pagesPerGroup);
9+
const startPage = currentGroup * pagesPerGroup;
10+
const endPage = Math.min(startPage + pagesPerGroup, totalPages);
11+
712
const handlePageClick = (page) => {
8-
if (page >= 0 && page <= totalPages) {
13+
if (page >= 0 && page < totalPages) {
914
onPageChange(page);
1015
}
1116
};
1217

1318
return (
1419
<PageNavigatorWrapper>
20+
{/* 이전 5개 이동 */}
1521
<Img
1622
src={ChevronLeft}
17-
visibility={currentPage === 0 ? "hidden" : "visible"}
18-
onClick={() => handlePageClick(currentPage - 1)}
23+
visibility={currentGroup === 0 ? "hidden" : "visible"}
24+
onClick={() => handlePageClick(startPage - pagesPerGroup)}
1925
/>
20-
{Array.from({ length: totalPages }, (_, index) => (
26+
27+
{/* 현재 그룹의 페이지 번호 표시 */}
28+
{Array.from({ length: endPage - startPage }, (_, index) => (
2129
<PageNumber
22-
key={index}
23-
color={currentPage === index ? "#A00000" : undefined}
24-
onClick={() => handlePageClick(index)}
30+
key={startPage + index}
31+
color={currentPage === startPage + index ? "#A00000" : undefined}
32+
onClick={() => handlePageClick(startPage + index)}
2533
>
26-
{index + 1}
34+
{startPage + index + 1}
2735
</PageNumber>
2836
))}
37+
38+
{/* 다음 5개 이동 */}
2939
<Img
3040
src={ChevronRight}
31-
visibility={currentPage === totalPages-1 ? "hidden" : "visible"}
32-
onClick={() => handlePageClick(currentPage + 1)}
41+
visibility={endPage >= totalPages ? "hidden" : "visible"}
42+
onClick={() => handlePageClick(startPage + pagesPerGroup)}
3343
/>
3444
</PageNavigatorWrapper>
3545
);

‎src/components/board/PostList.jsx‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,7 @@ const PostListWrapper = styled.table`
9292
margin-top: 32px;
9393
font-family: Pretendard, sans-serif;
9494
text-align: center;
95-
96-
95+
table-layout: fixed; /* 고정된 레이아웃 */
9796
9897
th, td {
9998
@@ -118,24 +117,56 @@ const PostListWrapper = styled.table`
118117
td:nth-child(1) {
119118
text-align: left;
120119
padding-left: 50px;
120+
min-width: 40%;
121+
max-width: 50%;
122+
}
123+
td:nth-child(2) {
124+
text-align: left;
125+
padding-left: 50px;
126+
width: 20%;
127+
max-width: 190px;
128+
}
129+
td:nth-child(3) {
130+
text-align: left;
131+
padding-left: 50px;
132+
width: 20%;
133+
}
134+
td:nth-child(4) {
135+
text-align: left;
136+
padding-left: 50px;
137+
width: 20%;
121138
}
122139
th:nth-child(1) {
123140
text-align: left;
124141
padding-left: 94px;
142+
min-width: 40%;
143+
max-width: 50%;
144+
}
145+
th:nth-child(2) {
146+
width:20%;
147+
}
148+
th:nth-child(3) {
149+
width:20%;
150+
} th:nth-child(4) {
151+
width:20%;
125152
}
126153
127154
td {
128155
color: #000;
129156
border-bottom: 1px solid #E6E6E6;
130157
padding-top: 18px;
131158
padding-bottom: 18px;
132-
159+
padding-right: 20px;
133160
/* Body-tiny-md */
134161
font-family: Pretendard;
135162
font-size: 14px;
136163
font-style: normal;
137164
font-weight: 500;
138165
line-height: normal;
166+
167+
overflow: hidden; /* 넘치는 내용 숨김 */
168+
white-space: nowrap; /* 줄바꿈 방지 */
169+
text-overflow: ellipsis; /* ... 처리 */
139170
}
140171
141172
tbody tr:hover {

‎src/components/board/PostList2.jsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,15 +113,20 @@ const NavWrapper = styled.div`
113113
`
114114

115115
const Text = styled.div`
116-
color: ${(props) => props.color ? props.color: '#000'};
117-
118-
/* Body-me */
116+
color: ${(props) => props.color || "#000"};
119117
font-family: Pretendard;
120118
font-size: 16px;
121119
font-style: normal;
122120
font-weight: 500;
123121
line-height: 25px; /* 156.25% */
124-
`
122+
text-align:left;
123+
display: -webkit-box;
124+
-webkit-line-clamp: 2;
125+
-webkit-box-orient: vertical;
126+
overflow: hidden;
127+
text-overflow: ellipsis;
128+
word-break: break-word;
129+
`;
125130
const Img = styled.img`
126131
height: 88px;
127132
width: 88px;

‎src/pages/Home.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function Home() {
3737
fetchHotNow();
3838
fetchTicketOpen();
3939
fetchRanking();
40-
}, []);
40+
}, [token]);
4141

4242
//Hot Now
4343
const fetchHotNow = async () => {

‎src/pages/board/post/AnonymousPost.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function AnonymousPost() {
3838
headers: {
3939
Authorization: token ? `Bearer ${token}` : "",
4040
},
41-
});
41+
}, [token]);
4242
console.log('데이터', data);
4343
const [isButtonLiked, setIsButtonLiked] = useState(data?.result?.isLiked);
4444
const [likeCount, setLikeCount] = useState(data?.result?.likeCount);
@@ -58,7 +58,7 @@ function AnonymousPost() {
5858
headers: {
5959
Authorization: token ? `Bearer ${token}` : "",
6060
},
61-
});
61+
}, [token]);
6262
console.log("코멘트 데이터:", comment);
6363
console.log("에러:", commentError);
6464
console.log("로딩:", commentLoading);

‎src/pages/board/post/FoundPost.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function FoundPost() {
2525
headers: {
2626
Authorization: token ? `Bearer ${token}` : "",
2727
},
28-
});
28+
}, [token]);
2929
console.log('데이터', data);
3030

3131
// 🔹 댓글 데이터 (commentTrigger 변경 시 재요청)
@@ -35,7 +35,7 @@ function FoundPost() {
3535
headers: {
3636
Authorization: token ? `Bearer ${token}` : "",
3737
},
38-
});
38+
}, [token]);
3939
console.log("코멘트 데이터:", comment);
4040
console.log("에러:", commentError);
4141
console.log("로딩:", commentLoading);

‎src/pages/board/post/ItemPost.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function ItemPost() {
3636
headers: {
3737
Authorization: token ? `Bearer ${token}` : "",
3838
},
39-
});
39+
}, [token]);
4040
console.log('데이터', data);
4141

4242
// 🔹 댓글 데이터 (commentTrigger 변경 시 재요청)
@@ -46,7 +46,7 @@ function ItemPost() {
4646
headers: {
4747
Authorization: token ? `Bearer ${token}` : "",
4848
},
49-
});
49+
}, [token]);
5050
console.log("코멘트 데이터:", comment);
5151
console.log("에러:", commentError);
5252
console.log("로딩:", commentLoading);

‎src/pages/board/post/ReviewPost.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function ReviewPost() {
2222
headers: {
2323
Authorization: token ? `Bearer ${token}` : "",
2424
},
25-
});
25+
}, [token]);
2626
console.log('데이터', data);
2727

2828
// 🔹 댓글 데이터 (commentTrigger 변경 시 재요청)
@@ -32,7 +32,7 @@ function ReviewPost() {
3232
headers: {
3333
Authorization: token ? `Bearer ${token}` : "",
3434
},
35-
});
35+
}, [token]);
3636
console.log("코멘트 데이터:", comment);
3737
console.log("에러:", commentError);
3838
console.log("로딩:", commentLoading);

‎src/pages/board/post/SeatsPost.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function ReviewPost() {
2121
headers: {
2222
Authorization: token ? `Bearer ${token}` : "",
2323
},
24-
});
24+
}, [token]);
2525
console.log('데이터', data);
2626

2727
// 🔹 댓글 데이터 (commentTrigger 변경 시 재요청)
@@ -31,7 +31,7 @@ function ReviewPost() {
3131
headers: {
3232
Authorization: token ? `Bearer ${token}` : "",
3333
},
34-
});
34+
}, [token]);
3535
console.log("코멘트 데이터:", comment);
3636
console.log("에러:", commentError);
3737
console.log("로딩:", commentLoading);

‎src/pages/mypage/my/LikedMusical.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function LikedMusical() {
1616
headers: {
1717
Authorization: token ? `Bearer ${token}` : "",
1818
},
19-
},);
19+
},[token]);
2020
console.log(data);
2121

2222

0 commit comments

Comments
 (0)