From cfd41f274a87e72034b4ac16dd7ca1b254597578 Mon Sep 17 00:00:00 2001 From: wuzoo Date: Fri, 6 Sep 2024 21:42:33 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20getStaticProps=EC=97=90=20getMember?= =?UTF-8?q?Info=20data=20fetching=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/about.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 872c03b0..bd55ac17 100644 --- 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) => { +const AboutPage = ({ + aboutInfo, + memberInfo, +}: InferGetServerSidePropsType) => { return ( @@ -22,7 +25,7 @@ const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType - + { const aboutInfo = await api.aboutAPI.getAboutInfo(); + const memberInfo = await api.aboutAPI.getMemberInfo(); return { props: { aboutInfo, + memberInfo, }, }; }; From 637e8c0aa2f1be014278bd57e84d01690daaed21 Mon Sep 17 00:00:00 2001 From: wuzoo Date: Fri, 6 Sep 2024 21:43:21 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20Section=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20members=20data=20render?= =?UTF-8?q?=20(Content=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=AF=B8?= =?UTF-8?q?=EC=82=AC=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Member/Content/index.tsx | 99 ++++++++++++------- .../components/Member/Section/index.tsx | 51 +++++++++- .../components/Member/Section/style.ts | 40 ++++++++ 3 files changed, 149 insertions(+), 41 deletions(-) diff --git a/src/views/AboutPage/components/Member/Content/index.tsx b/src/views/AboutPage/components/Member/Content/index.tsx index f7c3494c..ed0db0d9 100644 --- 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' && ; - const cardContent = useMemo(() => { - if (!isLoading) - return (data ? data.members : emptyMembers(6)).map( - ({ - id, - name, - position, - description, - currentProject, - imageSrc, - gmail, - linkedin, - github, - }) => ( - - ), - ); + // const cardContent = useMemo(() => { + // if (!isLoading) + // return (data ? data.members : emptyMembers(6)).map( + // ({ + // id, + // name, + // position, + // description, + // currentProject, + // imageSrc, + // gmail, + // linkedin, + // github, + // }) => ( + // + // ), + // ); - return ( - - - - ); - }, [data, isLoading]); + // return ( + // + // + // + // ); + // }, [data, isLoading]); return ( { style={{ alignItems: 'center' }} > {/* {errorContent} */} - {cardContent} + + {data?.members.map( + ({ + id, + name, + position, + description, + currentProject, + imageSrc, + gmail, + linkedin, + github, + }) => ( + + ), + )} + ); }; diff --git a/src/views/AboutPage/components/Member/Section/index.tsx b/src/views/AboutPage/components/Member/Section/index.tsx index 94e20694..5af98556 100644 --- 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 ( { description="200명의 활동 회원들이 열정을 외칠 수 있도록, 35기 AND SOPT를 이끄는 임원진들이에요." /> {/* TODO : 서버에서 description을 받아오도록 수정 */} - + + + + + } + > + {/* {errorContent} */} + + {members.map( + ({ + id, + name, + position, + description, + currentProject, + imageSrc, + gmail, + linkedin, + github, + }) => ( + + ), + )} + + + ); }; diff --git a/src/views/AboutPage/components/Member/Section/style.ts b/src/views/AboutPage/components/Member/Section/style.ts index b6e697cb..a222c3e2 100644 --- 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; +`; From 9cb9a8bf868db71618cff3bdd28138e6064e0ea3 Mon Sep 17 00:00:00 2001 From: wuzoo Date: Fri, 6 Sep 2024 23:48:03 +0900 Subject: [PATCH 3/6] feat: lazy -> Server component dynamic import --- src/pages/about.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/about.tsx b/src/pages/about.tsx index bd55ac17..1c484b95 100644 --- 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,7 +10,7 @@ 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, From afbeded08f6b33dd0fddb118070db0771aa2afad Mon Sep 17 00:00:00 2001 From: wuzoo Date: Fri, 6 Sep 2024 23:48:19 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20sizes=20prop=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AboutPage/components/Member/Card/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/views/AboutPage/components/Member/Card/index.tsx b/src/views/AboutPage/components/Member/Card/index.tsx index 16a5f2bc..64f6ae36 100644 --- 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 ( - + {position} From 5bab28e77cf6b431df248e12063045113a132749 Mon Sep 17 00:00:00 2001 From: wuzoo Date: Sat, 7 Sep 2024 14:18:19 +0900 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20ssg=20suspense=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Member/Section/index.tsx | 66 ++++++++----------- 1 file changed, 28 insertions(+), 38 deletions(-) diff --git a/src/views/AboutPage/components/Member/Section/index.tsx b/src/views/AboutPage/components/Member/Section/index.tsx index 5af98556..41a9e625 100644 --- a/src/views/AboutPage/components/Member/Section/index.tsx +++ b/src/views/AboutPage/components/Member/Section/index.tsx @@ -1,6 +1,4 @@ -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'; @@ -30,42 +28,34 @@ const MemberSection = ({ generation, members }: MemberSectionProps) => { gap={{ mobile: 18, tablet: 24, desktop: 48 }} style={{ alignItems: 'center' }} > - - - - } - > - {/* {errorContent} */} - - {members.map( - ({ - id, - name, - position, - description, - currentProject, - imageSrc, - gmail, - linkedin, - github, - }) => ( - - ), - )} - - + {/* {errorContent} */} + + {members.map( + ({ + id, + name, + position, + description, + currentProject, + imageSrc, + gmail, + linkedin, + github, + }) => ( + + ), + )} + ); From 36665c23d9354861122e8af820d4f1cfad6ad5f5 Mon Sep 17 00:00:00 2001 From: wuzoo Date: Sat, 7 Sep 2024 14:28:26 +0900 Subject: [PATCH 6/6] =?UTF-8?q?chore:=20Content=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Member/Content/index.tsx | 86 ------------------- .../components/Member/Content/style.ts | 41 --------- 2 files changed, 127 deletions(-) delete mode 100644 src/views/AboutPage/components/Member/Content/index.tsx delete mode 100644 src/views/AboutPage/components/Member/Content/style.ts diff --git a/src/views/AboutPage/components/Member/Content/index.tsx b/src/views/AboutPage/components/Member/Content/index.tsx deleted file mode 100644 index ed0db0d9..00000000 --- a/src/views/AboutPage/components/Member/Content/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import Flex from '@src/components/common/Flex'; -import useGetMember from '@src/views/AboutPage/hooks/queries/useGetMemeber'; -import MemberCard from '../Card'; -import * as St from './style'; - -const MemberContent = () => { - const { data } = useGetMember(); - - //불필요해진 DataErrorBanner 컴포넌트 삭제 - //useQuery로 마이그레이션 하면 state에 따른 조건부 렌더링 코드가 모두 바뀔 것으로 예상되어 관련 코드는 일단 주석처리했습니다 - //const errorContent = state._TAG === 'ERROR' && ; - - // const cardContent = useMemo(() => { - // if (!isLoading) - // return (data ? data.members : emptyMembers(6)).map( - // ({ - // id, - // name, - // position, - // description, - // currentProject, - // imageSrc, - // gmail, - // linkedin, - // github, - // }) => ( - // - // ), - // ); - - // return ( - // - // - // - // ); - // }, [data, isLoading]); - - return ( - - {/* {errorContent} */} - - {data?.members.map( - ({ - id, - name, - position, - description, - currentProject, - imageSrc, - gmail, - linkedin, - github, - }) => ( - - ), - )} - - - ); -}; - -export default MemberContent; diff --git a/src/views/AboutPage/components/Member/Content/style.ts b/src/views/AboutPage/components/Member/Content/style.ts deleted file mode 100644 index acfe58aa..00000000 --- a/src/views/AboutPage/components/Member/Content/style.ts +++ /dev/null @@ -1,41 +0,0 @@ -import styled from '@emotion/styled'; - -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; -`;