[Feat] memberInfo RQ에서 SSG fetching으로 수정 (#416)

* feat: getStaticProps에 getMemberInfo data fetching 추가 * feat: Section 컴포넌트에서 members data render (Content 컴포넌트 미사용)
sopt-makers · Sep 6, 2024 · fd1fda0 · fd1fda0
1 parent db400c6
commit fd1fda0
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 43 deletions.
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -12,7 +12,10 @@ import {
 
 const MemberSection = lazy(() => import('@src/views/AboutPage/components/Member/Section'));
 
-const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticProps>) => {
+const AboutPage = ({
+  aboutInfo,
+  memberInfo,
+}: InferGetServerSidePropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
       <Root>
@@ -22,7 +25,7 @@ const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticPr
           coreValues={aboutInfo.aboutInfo.coreValue.eachValues}
         />
         <CurriculumSection curriculums={aboutInfo.aboutInfo.curriculums} />
-        <MemberSection generation={aboutInfo.aboutInfo.generation} />
+        <MemberSection members={memberInfo.members} generation={aboutInfo.aboutInfo.generation} />
         <RecordSection
           generation={aboutInfo.aboutInfo.generation}
           records={aboutInfo.aboutInfo.records}
@@ -34,10 +37,12 @@ const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticPr
 
 export const getStaticProps = async () => {
   const aboutInfo = await api.aboutAPI.getAboutInfo();
+  const memberInfo = await api.aboutAPI.getMemberInfo();
 
   return {
     props: {
       aboutInfo,
+      memberInfo,
     },
   };
 };

diff --git a/src/views/AboutPage/components/Member/Content/index.tsx b/src/views/AboutPage/components/Member/Content/index.tsx
@@ -1,52 +1,49 @@
-import { useMemo } from 'react';
 import Flex from '@src/components/common/Flex';
-import OvalSpinner from '@src/components/common/OvalSpinner';
-import { emptyMembers } from '@src/views/AboutPage/constant/emptyMembers';
 import useGetMember from '@src/views/AboutPage/hooks/queries/useGetMemeber';
 import MemberCard from '../Card';
 import * as St from './style';
 
 const MemberContent = () => {
-  const { data, isLoading } = useGetMember();
+  const { data } = useGetMember();
 
   //불필요해진 DataErrorBanner 컴포넌트 삭제
   //useQuery로 마이그레이션 하면 state에 따른 조건부 렌더링 코드가 모두 바뀔 것으로 예상되어 관련 코드는 일단 주석처리했습니다
   //const errorContent = state._TAG === 'ERROR' && <DataErrorBanner />;
 
-  const cardContent = useMemo(() => {
-    if (!isLoading)
-      return (data ? data.members : emptyMembers(6)).map(
-        ({
-          id,
-          name,
-          position,
-          description,
-          currentProject,
-          imageSrc,
-          gmail,
-          linkedin,
-          github,
-        }) => (
-          <MemberCard
-            key={id}
-            name={name}
-            position={position}
-            description={description}
-            currentProject={currentProject}
-            imageSrc={imageSrc}
-            gmail={gmail}
-            linkedin={linkedin}
-            github={github}
-          />
-        ),
-      );
+  // const cardContent = useMemo(() => {
+  //   if (!isLoading)
+  //     return (data ? data.members : emptyMembers(6)).map(
+  //       ({
+  //         id,
+  //         name,
+  //         position,
+  //         description,
+  //         currentProject,
+  //         imageSrc,
+  //         gmail,
+  //         linkedin,
+  //         github,
+  //       }) => (
+  //         <MemberCard
+  //           key={id}
+  //           name={name}
+  //           position={position}
+  //           description={description}
+  //           currentProject={currentProject}
+  //           imageSrc={imageSrc}
+  //           gmail={gmail}
+  //           linkedin={linkedin}
+  //           github={github}
+  //         />
+  //       ),
+  //     );
 
-    return (
-      <St.OvalSpinnerWrapper>
-        <OvalSpinner />
-      </St.OvalSpinnerWrapper>
-    );
-  }, [data, isLoading]);
+  //   return (
+  //     <St.OvalSpinnerWrapper>
+  //       <OvalSpinner />
+  //     </St.OvalSpinnerWrapper>
+  //   );
+  // }, [data, isLoading]);
 
   return (
     <Flex
@@ -55,7 +52,33 @@ const MemberContent = () => {
       style={{ alignItems: 'center' }}
     >
       {/* {errorContent} */}
-      <St.CardContainer>{cardContent}</St.CardContainer>
+      <St.CardContainer>
+        {data?.members.map(
+          ({
+            id,
+            name,
+            position,
+            description,
+            currentProject,
+            imageSrc,
+            gmail,
+            linkedin,
+            github,
+          }) => (
+            <MemberCard
+              key={id}
+              name={name}
+              position={position}
+              description={description}
+              currentProject={currentProject}
+              imageSrc={imageSrc}
+              gmail={gmail}
+              linkedin={linkedin}
+              github={github}
+            />
+          ),
+        )}
+      </St.CardContainer>
     </Flex>
   );
 };

diff --git a/src/views/AboutPage/components/Member/Section/index.tsx b/src/views/AboutPage/components/Member/Section/index.tsx
@@ -1,13 +1,17 @@
+import { Suspense } from 'react';
 import Flex from '@src/components/common/Flex';
+import OvalSpinner from '@src/components/common/OvalSpinner';
+import { MemberType } from '@src/lib/types/about';
+import MemberCard from '@src/views/AboutPage/components/Member/Card';
 import SectionTop from '../../@common/SectionTop';
-import MemberContent from '../Content';
 import * as St from './style';
 
 type MemberSectionProps = {
   generation: number;
+  members: MemberType[];
 };
 
-const MemberSection = ({ generation }: MemberSectionProps) => {
+const MemberSection = ({ generation, members }: MemberSectionProps) => {
   return (
     <Flex
       dir="column"
@@ -21,7 +25,48 @@ const MemberSection = ({ generation }: MemberSectionProps) => {
         description="200명의 활동 회원들이 열정을 외칠 수 있도록, 35기 AND SOPT를 이끄는 임원진들이에요."
       />
       {/* TODO : 서버에서 description을 받아오도록 수정 */}
-      <MemberContent />
+      <Flex
+        dir="column"
+        gap={{ mobile: 18, tablet: 24, desktop: 48 }}
+        style={{ alignItems: 'center' }}
+      >
+        <Suspense
+          fallback={
+            <St.OvalSpinnerWrapper>
+              <OvalSpinner />
+            </St.OvalSpinnerWrapper>
+          }
+        >
+          {/* {errorContent} */}
+          <St.CardContainer>
+            {members.map(
+              ({
+                id,
+                name,
+                position,
+                description,
+                currentProject,
+                imageSrc,
+                gmail,
+                linkedin,
+                github,
+              }) => (
+                <MemberCard
+                  key={id}
+                  name={name}
+                  position={position}
+                  description={description}
+                  currentProject={currentProject}
+                  imageSrc={imageSrc}
+                  gmail={gmail}
+                  linkedin={linkedin}
+                  github={github}
+                />
+              ),
+            )}
+          </St.CardContainer>
+        </Suspense>
+      </Flex>
     </Flex>
   );
 };

diff --git a/src/views/AboutPage/components/Member/Section/style.ts b/src/views/AboutPage/components/Member/Section/style.ts
@@ -10,3 +10,43 @@ export const MarginTop = styled.div`
     height: 120px;
   }
 `;
+
+export const CardContainer = styled.div`
+  display: grid;
+
+  grid-template-columns: repeat(3, 1fr);
+  gap: 34px;
+  width: 1200px;
+
+  @media (max-width: 80rem) and (min-width: 73.125rem) {
+    width: calc(100% - 40px);
+  }
+
+  @media (max-width: 73.125rem) and (min-width: 48rem) {
+    grid-template-columns: repeat(2, 1fr);
+    width: 752px;
+  }
+
+  @media (max-width: 48rem) and (min-width: 36.5rem) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+    width: 576px;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 36.5rem) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+    width: max(350px, 100% - 40px);
+  }
+`;
+
+export const OvalSpinnerWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+
+  padding-top: 200px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;