[Refactor] memberInfo RQ에서 SSG fetching으로 수정 (#419)

* feat: getStaticProps에 getMemberInfo data fetching 추가 * feat: Section 컴포넌트에서 members data render (Content 컴포넌트 미사용) * feat: lazy -> Server component dynamic import * feat: sizes prop 추가 * refactor: ssg suspense 제거 * chore: Content 폴더 삭제 --------- Co-authored-by: wuzoo <[email protected]>
sopt-makers · Sep 7, 2024 · 979b209 · 979b209
1 parent 6c40a65
commit 979b209
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 112 deletions.
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { InferGetServerSidePropsType } from 'next';
-import { lazy } from 'react';
+import dynamic from 'next/dynamic';
 import PageLayout from '@src/components/common/PageLayout';
 import { api } from '@src/lib/api';
 import {
@@ -10,9 +10,12 @@ import {
   RecordSection,
 } from '@src/views/AboutPage/components';
 
-const MemberSection = lazy(() => import('@src/views/AboutPage/components/Member/Section'));
+const MemberSection = dynamic(() => 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/Card/index.tsx b/src/views/AboutPage/components/Member/Card/index.tsx
@@ -29,7 +29,12 @@ const MemberCard = ({
   return (
     <St.Card>
       <St.ImageWrapper>
-        <St.ProfileImage src={imageSrc || NullImage.src} alt={`${name}의 프로필`} fill />
+        <St.ProfileImage
+          src={imageSrc || NullImage.src}
+          alt={`${name}의 프로필`}
+          fill
+          sizes="100%"
+        />
       </St.ImageWrapper>
       <St.NameWrapper>
         <St.Position>{position}</St.Position>

diff --git a/src/views/AboutPage/components/Member/Content/index.tsx b/src/views/AboutPage/components/Member/Content/index.tsx
diff --git a/src/views/AboutPage/components/Member/Content/style.ts b/src/views/AboutPage/components/Member/Content/style.ts
diff --git a/src/views/AboutPage/components/Member/Section/index.tsx b/src/views/AboutPage/components/Member/Section/index.tsx
@@ -1,13 +1,15 @@
 import Flex from '@src/components/common/Flex';
+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 +23,40 @@ 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' }}
+      >
+        {/* {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>
+      </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;
+`;