refactor(member): MainPage 새로운 프로젝트 구조 적용 (#238)

kgu-clab · Sep 20, 2024 · f50a123 · f50a123
1 parent d81233d
commit f50a123
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 93 deletions.
diff --git a/...components/main/MainBanner/MainBanner.tsx → ...tivityPhotoBanner/ActivityPhotoBanner.tsx b/...components/main/MainBanner/MainBanner.tsx → ...tivityPhotoBanner/ActivityPhotoBanner.tsx
@@ -3,7 +3,7 @@ import Image from '@components/common/Image/Image';
 import { useActivityPhoto } from '@hooks/queries';
 import { createImageUrl } from '@utils/api';
 
-const MainBanner = () => {
+const ActivityPhotoBanner = () => {
   const { data } = useActivityPhoto();
 
   if (data.totalItems === 0) {
@@ -30,4 +30,4 @@ const MainBanner = () => {
   );
 };
 
-export default MainBanner;
+export default ActivityPhotoBanner;
diff --git a/apps/member/src/components/common/ErrorSection/ErrorSection.tsx b/apps/member/src/components/common/ErrorSection/ErrorSection.tsx
@@ -0,0 +1,26 @@
+import { Button } from '@clab-platforms/design-system';
+import { HighPriorityColor } from '@clab-platforms/icon';
+
+interface Props {
+  reset: () => void;
+}
+
+const ErrorSection = ({ reset }: Props) => {
+  return (
+    <div className="m-auto flex flex-col items-center justify-center gap-4">
+      <HighPriorityColor width={64} height={64} />
+      <div className="text-clab-main text-center font-semibold">
+        <h1 className="text-2xl">
+          불편을 드려 죄송합니다. 오류가 발생했어요. 😭
+        </h1>
+      </div>
+      <div className="break-keep text-center text-gray-500">
+        <p>만약 같은 문제가 지속적으로 발생할 경우 문의 해주시기 바랍니다.</p>
+        <p>감사합니다.</p>
+      </div>
+      <Button onClick={reset}>재시도</Button>
+    </div>
+  );
+};
+
+export default ErrorSection;
diff --git a/apps/member/src/components/common/Image/Image.tsx b/apps/member/src/components/common/Image/Image.tsx
@@ -45,7 +45,7 @@ const Image = ({
       <img
         className={cn(
           {
-            'animate-pulse bg-gray-200': status === 'loading',
+            'animate-pulse bg-gray-200/50': status === 'loading',
             'bg-gray-50': status === 'error',
           },
           _width,

diff --git a/apps/member/src/components/manage/ManageBannerSection/ManageBannerSection.tsx b/apps/member/src/components/manage/ManageBannerSection/ManageBannerSection.tsx
@@ -2,10 +2,10 @@ import { useState } from 'react';
 
 import { Button, Input } from '@clab-platforms/design-system';
 
+import ActivityPhotoBanner from '@components/common/ActivityPhotoBanner/ActivityPhotoBanner';
 import Hr from '@components/common/Hr/Hr';
 import { Section } from '@components/common/Section';
 import Uploader from '@components/common/Uploader/Uploader';
-import MainBanner from '@components/main/MainBanner/MainBanner';
 
 import { PostActivityPhotoParams } from '@api/activity';
 import { ERROR_MESSAGE } from '@constants/message';
@@ -89,7 +89,7 @@ const ManageBannerSection = () => {
           <Button className="w-full">활동 사진 변경하기</Button>
         </form>
         <Hr>현재 활동 사진</Hr>
-        <MainBanner />
+        <ActivityPhotoBanner />
       </Section.Body>
     </Section>
   );

diff --git a/apps/member/src/pages/MainPage/MainPage.tsx b/apps/member/src/pages/MainPage/MainPage.tsx
diff --git a/.../main/BirthdaySection/BirthdaySection.tsx → ...s/MainPage/components/BirthdaySection.tsx b/.../main/BirthdaySection/BirthdaySection.tsx → ...s/MainPage/components/BirthdaySection.tsx
@@ -6,14 +6,7 @@ import { createImageUrl } from '@utils/api';
 import { formatMemberName } from '@utils/string';
 import dayjs from 'dayjs';
 
-interface BirthdayCardProps {
-  id: string;
-  name: string;
-  imageUrl: string | null;
-  birth: string;
-}
-
-const BirthdaySection = () => {
+export function BirthdaySection() {
   const { data } = useBirthday();
 
   return (
@@ -26,15 +19,22 @@ const BirthdaySection = () => {
           </p>
         ) : (
           data.items.map(({ id, ...props }) => (
-            <BirthdayCard key={id} id={id} {...props} />
+            <Card key={id} id={id} {...props} />
           ))
         )}
       </Section.Body>
     </Section>
   );
-};
+}
 
-const BirthdayCard = ({ id, name, imageUrl, birth }: BirthdayCardProps) => {
+interface CardProps {
+  id: string;
+  name: string;
+  imageUrl: string | null;
+  birth: string;
+}
+
+const Card = ({ id, name, imageUrl, birth }: CardProps) => {
   return (
     <div className="flex flex-col items-center gap-4 rounded-lg px-4 pt-2">
       <Image
@@ -53,5 +53,3 @@ const BirthdayCard = ({ id, name, imageUrl, birth }: BirthdayCardProps) => {
     </div>
   );
 };
-
-export default BirthdaySection;
diff --git a/...mponents/main/BlogSection/BlogSection.tsx → ...pages/MainPage/components/BlogSection.tsx b/...mponents/main/BlogSection/BlogSection.tsx → ...pages/MainPage/components/BlogSection.tsx
@@ -6,7 +6,7 @@ import { COMMUNITY_MESSAGE } from '@constants/message';
 import { PATH_FINDER } from '@constants/path';
 import { useBlog } from '@hooks/queries';
 
-const BlogSection = () => {
+export function BlogSection() {
   const { data } = useBlog();
 
   return (
@@ -29,6 +29,4 @@ const BlogSection = () => {
       </Section.Body>
     </Section>
   );
-};
-
-export default BlogSection;
+}
diff --git a/...n/MainNoticeSection/MainNoticeSection.tsx → ...ges/MainPage/components/NoticeSection.tsx b/...n/MainNoticeSection/MainNoticeSection.tsx → ...ges/MainPage/components/NoticeSection.tsx
@@ -10,16 +10,15 @@ import { DATE_FORMAT } from '@constants/state';
 import { useSchedule } from '@hooks/queries';
 import { now } from '@utils/date';
 
-const MainNoticeSection = () => {
+export function NoticeSection() {
+  const [open, setOpen] = useState(false);
+
   const { data } = useSchedule({
     startDate: now().format(DATE_FORMAT.WITH_TIME),
   });
 
-  const [open, setOpen] = useState(false);
-  /**
-   * 일정이 없을 경우 렌더링하지 않습니다.
-   */
   if (data.items.length === 0) {
+    // 일정이 없을 경우 렌더링하지 않습니다.
     return null;
   }
 
@@ -63,6 +62,4 @@ const MainNoticeSection = () => {
       </div>
     </Section>
   );
-};
-
-export default MainNoticeSection;
+}
diff --git a/...onNewsSection/OrganizationNewsSection.tsx → ...ge/components/OrganizationNewsSection.tsx b/...onNewsSection/OrganizationNewsSection.tsx → ...ge/components/OrganizationNewsSection.tsx
@@ -6,7 +6,7 @@ import { COMMUNITY_MESSAGE } from '@constants/message';
 import { PATH_FINDER } from '@constants/path';
 import { useBoardByCategory } from '@hooks/queries';
 
-const OrganizationNewsSection = () => {
+export function OrganizationNewsSection() {
   const { data } = useBoardByCategory({ category: 'organization' });
 
   return (
@@ -29,6 +29,4 @@ const OrganizationNewsSection = () => {
       </Section.Body>
     </Section>
   );
-};
-
-export default OrganizationNewsSection;
+}
diff --git a/apps/member/src/pages/MainPage/index.tsx b/apps/member/src/pages/MainPage/index.tsx
@@ -0,0 +1,70 @@
+import { Suspense } from 'react';
+
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+
+import ActivityPhotoBanner from '@components/common/ActivityPhotoBanner/ActivityPhotoBanner';
+import Content from '@components/common/Content/Content';
+import ErrorSection from '@components/common/ErrorSection/ErrorSection';
+import {
+  HireBoard,
+  NewsBoard,
+  NoticeBoard,
+  QnABoard,
+} from '@components/community/Board';
+import { BoardSection } from '@components/community/BoardSection';
+
+import { ErrorBoundary } from '@suspensive/react';
+
+import { BirthdaySection } from './components/BirthdaySection';
+import { BlogSection } from './components/BlogSection';
+import { NoticeSection } from './components/NoticeSection';
+import { OrganizationNewsSection } from './components/OrganizationNewsSection';
+
+export default function MainPage() {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallback={({ reset }) => <ErrorSection reset={reset} />}
+        >
+          <Content>
+            <Suspense>
+              <NoticeSection />
+            </Suspense>
+
+            <Suspense>
+              <ActivityPhotoBanner />
+            </Suspense>
+
+            <Suspense>
+              <OrganizationNewsSection />
+            </Suspense>
+
+            <Suspense>
+              <BoardSection>
+                <NoticeBoard />
+                <QnABoard />
+              </BoardSection>
+            </Suspense>
+
+            <Suspense>
+              <BirthdaySection />
+            </Suspense>
+
+            <Suspense>
+              <BlogSection />
+            </Suspense>
+
+            <Suspense>
+              <BoardSection>
+                <NewsBoard />
+                <HireBoard />
+              </BoardSection>
+            </Suspense>
+          </Content>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+}
diff --git a/apps/member/src/pages/MyPage/index.tsx b/apps/member/src/pages/MyPage/index.tsx
@@ -5,6 +5,7 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { Grid } from '@clab-platforms/design-system';
 
 import Content from '@components/common/Content/Content';
+import ErrorSection from '@components/common/ErrorSection/ErrorSection';
 import { Section } from '@components/common/Section';
 
 import { ErrorBoundary } from '@suspensive/react';
@@ -18,7 +19,10 @@ export default function MyPage() {
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
-        <ErrorBoundary onReset={reset} fallback={<></>}>
+        <ErrorBoundary
+          onReset={reset}
+          fallback={({ reset }) => <ErrorSection reset={reset} />}
+        >
           <Suspense fallback={<Skeleton />}>
             <Content>
               <Suspense>

diff --git a/apps/member/src/pages/Routes.tsx b/apps/member/src/pages/Routes.tsx
@@ -5,7 +5,7 @@ import { SectionSkeleton } from '@components/common/Section';
 import ProtectAuth from '@components/router/ProtectAuth';
 
 import { PATH } from '@constants/path';
-import MainPage from '@pages/MainPage/MainPage';
+import MainPage from '@pages/MainPage';
 
 import { GlobalErrorPage } from './GlobalErrorPage';
 import { PageLayout } from './PageLayout';

diff --git a/apps/member/src/pages/SupportPage/index.tsx b/apps/member/src/pages/SupportPage/index.tsx
@@ -3,13 +3,13 @@ import { Suspense } from 'react';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 
 import Content from '@components/common/Content/Content';
+import ErrorSection from '@components/common/ErrorSection/ErrorSection';
 import Header from '@components/common/Header/Header';
 import {
   SupportHistorySection,
   SupportHistorySectionSkeleton,
 } from '@components/support/SupportHistorySection';
 
-import { GlobalErrorPage } from '@pages/GlobalErrorPage';
 import { ErrorBoundary } from '@suspensive/react';
 
 import { IntroduceSection } from './components/IntroduceSection';
@@ -19,7 +19,10 @@ export default function SupportPage() {
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
-        <ErrorBoundary onReset={reset} fallback={<GlobalErrorPage />}>
+        <ErrorBoundary
+          onReset={reset}
+          fallback={({ reset }) => <ErrorSection reset={reset} />}
+        >
           <Content>
             <Header title="회비" />
             <IntroduceSection />