Merge pull request #83 from prgrms-fe-devcourse/feat/#2

Feat/#2
prgrms-fe-devcourse · Nov 4, 2024 · 8ea5f78 · 8ea5f78
2 parents f19f609 + a81ba77
commit 8ea5f78
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 32 deletions.
diff --git a/frontend/src/components/CategoryButton.tsx b/frontend/src/components/CategoryButton.tsx
@@ -27,7 +27,6 @@ const Button = styled.button<{ $isSelected: boolean }>`
   }
   padding: 0;
   margin-right: -1px;
-  //겹치는 보더라인 제거
   &:not(:last-child) {
     margin-bottom: -1px;
   }
@@ -53,23 +52,6 @@ const PostsContainer = styled.div`
   flex-direction: column;
   align-items: center;
 `
-const PageNav = styled(Pagination)`
-  color: #1c1c1c !important;
-
-  &.ant-pagination .ant-pagination-item-active,
-  :where(.css-dev-only-do-not-override-1hpnbz2).ant-pagination
-    .ant-pagination-item-active {
-    background-color: white !important;
-    border-color: #1c1c1c !important;
-    border-width: 2px !important;
-  }
-
-  :where(.css-dev-only-do-not-override-1hpnbz2).ant-pagination
-    .ant-pagination-item-active:hover
-    a {
-    color: #1c1c1c !important;
-  }
-`
 
 const CategoryButton: React.FC<CategoryButtonProps> = ({
   label,
@@ -98,7 +80,7 @@ const categories = [
   '채식 요리',
   '해산물 요리',
   '바베큐 요리',
-  '디저트',
+  '디저트 요리',
 ]
 
 const CategoryButtons: React.FC = () => {
@@ -116,14 +98,12 @@ const CategoryButtons: React.FC = () => {
   })
 
   const handleClick = (category: string) => {
-    setSelectedCategory(category)
+    setSelectedCategory((prevCategory) =>
+      prevCategory === category ? null : category
+    )
     setPageNumber(1)
   }
 
-  const handlePageChange = (page: number) => {
-    setPageNumber(page)
-  }
-
   const filteredPosts = posts.posts.filter((post: Post) =>
     selectedCategory ? post.category === selectedCategory : true,
   )
@@ -153,14 +133,30 @@ const CategoryButtons: React.FC = () => {
         ))}
       </PostsContainer>
 
-      <PageNav
-        current={pageNumber}
-        pageSize={pageSize}
+      <PaginationControl
+        currentPage={pageNumber}
         total={posts.totalCount}
-        onChange={handlePageChange}
+        onPageChange={setPageNumber}
       />
     </CenteredContainer>
   )
 }
 
+// 페이지네이션 컴포넌트 분리
+const PaginationControl: React.FC<{
+  currentPage: number
+  total: number
+  onPageChange: (page: number) => void
+}> = ({ currentPage, total, onPageChange }) => {
+  return (
+    <Pagination
+      current={currentPage}
+      pageSize={10}
+      total={total}
+      onChange={onPageChange}
+      style={{ marginTop: '20px' }}
+    />
+  )
+}
+
 export default CategoryButtons
diff --git a/frontend/src/components/PostCard.tsx b/frontend/src/components/PostCard.tsx
@@ -71,12 +71,12 @@ function PostCard({
   }
 
   return (
-    <Card>
+    <Card onClick={handleOpenPost}>
       <PostImage
         src={image_url}
         alt='Post Thumbnail'
       />
-      <PostContent onClick={handleOpenPost}>
+      <PostContent>
         <PostCategory>{category}</PostCategory>
         <PostTitle>{title}</PostTitle>
         <PostAuthor>

diff --git a/frontend/src/components/TopPost.tsx b/frontend/src/components/TopPost.tsx
@@ -8,11 +8,13 @@ const TopPostContainer = styled.div<{ $imgUrl: string }>`
   position: relative;
   background-image: url(${(props) => props.$imgUrl});
   background-size: cover;
+  background-repeat: no-repeat;
   background-position: center;
-  width: 100%;
+  width: 100vw;
   height: 600px;
   display: flex;
   align-items: flex-start;
+  overflow: hidden;
 `
 
 const ContentContainer = styled.div`
@@ -24,6 +26,7 @@ const ContentContainer = styled.div`
   margin: 0 30px;
   width: 500px;
   height: 500px;
+  cursor: pointer;
 `
 
 const PostCategory = styled.p`
@@ -76,7 +79,7 @@ const TopPost: React.FC<Post> = ({
         <PostAuthor>
           {user ? user.nickname : 'Anonymous'} | {formatDate(createdAt)}
         </PostAuthor>
-        <PostText dangerouslySetInnerHTML={{ __html: content }}></PostText>
+        <PostText dangerouslySetInnerHTML={{ __html: content }}/>
       </ContentContainer>
     </TopPostContainer>
   )