refactor(member): 커뮤니티 페이지 UI 개선 (#86)

kgu-clab · Apr 8, 2024 · ef24c09 · ef24c09
1 parent 036d1f0
commit ef24c09
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 33 deletions.
diff --git a/...ain/CommunitySection/CommunitySection.tsx → ...s/community/BoardSection/BoardSection.tsx b/...ain/CommunitySection/CommunitySection.tsx → ...s/community/BoardSection/BoardSection.tsx
@@ -1,41 +1,34 @@
-import Section from '@components/common/Section/Section';
 import ListButton from '@components/common/ListButton/ListButton';
 import MoreButton from '@components/common/MoreButton/MoreButton';
-import { toYYMMDD } from '@utils/date';
-import { CommunityPostItem } from '@type/community';
-import { HireItem } from '@type/hire';
-import { NewsItem } from '@type/news';
-import { createPath } from '@utils/api';
+import Section from '@components/common/Section/Section';
 import { COMMUNITY_MESSAGE } from '@constants/message';
-import { toDecodeHTMLEntities } from '@utils/string';
-import classNames from 'classnames';
-
-interface CommunitySectionProps {
-  children: React.ReactNode;
-}
+import { createPath } from '@utils/api';
+import { toYYMMDD } from '@utils/date';
+import { cn, toDecodeHTMLEntities } from '@utils/string';
+import type { HireItem } from '@type/hire';
+import type { NewsItem } from '@type/news';
+import type { CommunityPostItem } from '@type/community';
+import type { StrictPropsWithChildren } from '@type/component';
 
-interface CommunitySectionListProps {
+interface BoardSectionItemProps {
   title: string;
   to: string;
   data: Array<CommunityPostItem | HireItem | NewsItem>;
 }
 
-const CommunitySection = ({ children }: CommunitySectionProps) => {
-  return (
-    <div className="flex flex-col gap-4 text-sm xl:grid xl:grid-cols-2">
-      {children}
-    </div>
-  );
+const BoardSection = ({ children }: StrictPropsWithChildren) => {
+  return <div className="grid gap-4 text-sm xl:grid-cols-2">{children}</div>;
 };
+BoardSection.displayName = 'BoardSection';
 
-CommunitySection.List = ({ title, to, data }: CommunitySectionListProps) => {
+const BoardSectionItem = ({ title, to, data }: BoardSectionItemProps) => {
   return (
     <Section>
       <Section.Header title={title}>
         <MoreButton to={to} />
       </Section.Header>
       <Section.Body
-        className={classNames({
+        className={cn({
           'grow flex flex-col justify-center text-center': data.length === 0,
         })}
       >
@@ -55,5 +48,6 @@ CommunitySection.List = ({ title, to, data }: CommunitySectionListProps) => {
     </Section>
   );
 };
+BoardSectionItem.displayName = 'BoardSectionItem';
 
-export default CommunitySection;
+export { BoardSection, BoardSectionItem };
diff --git a/apps/member/src/components/community/BoardSection/index.ts b/apps/member/src/components/community/BoardSection/index.ts
@@ -0,0 +1 @@
+export { BoardSection, BoardSectionItem } from './BoardSection';
diff --git a/apps/member/src/pages/CommunityPage/CommunityPage.tsx b/apps/member/src/pages/CommunityPage/CommunityPage.tsx
@@ -3,9 +3,12 @@ import { Button } from '@clab/design-system';
 import { PATH } from '@constants/path';
 import Content from '@components/common/Content/Content';
 import Header from '@components/common/Header/Header';
-import CommunitySection from '@components/main/CommunitySection/CommunitySection';
 import CommunityBoardCollectSection from '@components/community/CommunityBoardCollectSection/CommunityBoardCollectSection';
 import { useHire, useNews, useBoardsList, useBoards } from '@hooks/queries';
+import {
+  BoardSection,
+  BoardSectionItem,
+} from '@components/community/BoardSection';
 
 const CommunityPage = () => {
   const navigate = useNavigate();
@@ -16,7 +19,7 @@ const CommunityPage = () => {
   const { data: graduatedData } = useBoardsList({ category: 'graduated' });
   const { data: newsData } = useNews();
   const { data: hireData } = useHire();
-  const { data: allBoardsData } = useBoards({ page: 0, size: 6 });
+  const { data: collectData } = useBoards({ page: 0, size: 6 });
 
   return (
     <Content>
@@ -25,39 +28,39 @@ const CommunityPage = () => {
           글쓰기
         </Button>
       </Header>
-      <CommunitySection>
-        <CommunitySection.List
+      <BoardSection>
+        <BoardSectionItem
           title="공지사항"
           data={noticeData.items}
           to={PATH.COMMUNITY_NOTICE}
         />
-        <CommunitySection.List
+        <BoardSectionItem
           title="자유"
           data={freeData.items}
           to={PATH.COMMUNITY_FREE}
         />
-        <CommunitySection.List
+        <BoardSectionItem
           title="QnA"
           data={QnAData.items}
           to={PATH.COMMUNITY_QNA}
         />
-        <CommunitySection.List
+        <BoardSectionItem
           title="졸업생"
           data={graduatedData.items}
           to={PATH.COMMUNITY_GRADUATED}
         />
-        <CommunitySection.List
+        <BoardSectionItem
           title="IT 뉴스"
           data={newsData.items}
           to={PATH.COMMUNITY_NEWS}
         />
-        <CommunitySection.List
+        <BoardSectionItem
           title="채용 정보"
           data={hireData.items}
           to={PATH.COMMUNITY_HIRE}
         />
-      </CommunitySection>
-      <CommunityBoardCollectSection data={allBoardsData.items} />
+      </BoardSection>
+      <CommunityBoardCollectSection data={collectData.items} />
     </Content>
   );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { BoardSection, BoardSectionItem } from './BoardSection';