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

This reverts commit fd1fda0.

src/pages/about.tsx

@@ -12,10 +12,7 @@ import {
 
 const MemberSection = lazy(() => import('@src/views/AboutPage/components/Member/Section'));
 
-const AboutPage = ({
-  aboutInfo,
-  memberInfo,
-}: InferGetServerSidePropsType<typeof getStaticProps>) => {
+const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
       <Root>
@@ -25,7 +22,7 @@ const AboutPage = ({
           coreValues={aboutInfo.aboutInfo.coreValue.eachValues}
         />
         <CurriculumSection curriculums={aboutInfo.aboutInfo.curriculums} />
-        <MemberSection members={memberInfo.members} generation={aboutInfo.aboutInfo.generation} />
+        <MemberSection generation={aboutInfo.aboutInfo.generation} />
         <RecordSection
           generation={aboutInfo.aboutInfo.generation}
           records={aboutInfo.aboutInfo.records}
@@ -37,12 +34,10 @@ const AboutPage = ({
 
 export const getStaticProps = async () => {
   const aboutInfo = await api.aboutAPI.getAboutInfo();
-  const memberInfo = await api.aboutAPI.getMemberInfo();
 
   return {
     props: {
       aboutInfo,
-      memberInfo,
     },
   };
 };

src/views/AboutPage/components/Member/Content/index.tsx

@@ -1,49 +1,52 @@
+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 } = useGetMember();
+  const { data, isLoading } = 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
@@ -52,33 +55,7 @@ const MemberContent = () => {
       style={{ alignItems: 'center' }}
     >
       {/* {errorContent} */}
-      <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>
+      <St.CardContainer>{cardContent}</St.CardContainer>
     </Flex>
   );
 };

src/views/AboutPage/components/Member/Section/index.tsx

@@ -1,17 +1,13 @@
-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, members }: MemberSectionProps) => {
+const MemberSection = ({ generation }: MemberSectionProps) => {
   return (
     <Flex
       dir="column"
@@ -25,48 +21,7 @@ const MemberSection = ({ generation, members }: MemberSectionProps) => {
         description="200명의 활동 회원들이 열정을 외칠 수 있도록, 35기 AND SOPT를 이끄는 임원진들이에요."
       />
       {/* TODO : 서버에서 description을 받아오도록 수정 */}
-      <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>
+      <MemberContent />
     </Flex>
   );
 };

src/views/AboutPage/components/Member/Section/style.ts

@@ -10,43 +10,3 @@ 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;
-`;