Merge pull request #137 from NaGyeong-Park/feature/pycon-people

파준위 페이지 : 목데이터 버전

@types/about.ts

@@ -0,0 +1,5 @@
+export interface CommitteeInfo {
+  name: string;
+  image?: string;
+  description: string;
+}

constants/about.ts

@@ -0,0 +1,21 @@
+import { CommitteeInfo } from '@/@types/about';
+
+export const CommitteePageInfo = {
+  title: '파이콘 한국 준비위원회',
+  description:
+    '파이콘 한국 준비위원회는 2014년 조직되어, 올해 열 번째 한국에서의 파이콘 행사를 준비하고 있습니다. \n준비위원회는 매년 신규 멤버를 모집하는 파이콘을 사랑하는 사람들의 열린 모임입니다.',
+};
+export const CommitteeList: CommitteeInfo[] = [
+  {
+    name: '테스트',
+    image:
+      'https://mblogthumb-phinf.pstatic.net/MjAxOTA3MTVfMjA0/MDAxNTYzMTc2Mzc5NTAy.lh9RRCYZCuuD_nYPyNdbhiJzdd7_YuUxfyzTWHX1flEg.sL2fBPI0Iglgm1lILEORTWRyb66n6PXgBLf2c2eyuiYg.JPEG.petgeek/cici.toto.mametchi_55864983_674522579671640_592800947380049308_n.jpg?type=w800',
+    description:
+      '안녕하세요? 귀여운 고양이입니다. 파이콘 자원봉사자로 활동하고 있습니다. 파이콘 사랑해요!',
+  },
+  {
+    name: '이미지 없는 테스트2',
+    description:
+      '안녕하세요? 테스트입니다.. 파이콘 자원봉사자로 활동하고 있습니다. 파이콘 사랑해요!',
+  },
+];

constants/routes.ts

@@ -21,6 +21,7 @@ const routeKeys = [
   'TIMETABLE',
   'CHILDCARE',
   'SPONSOR_EDIT',
+  'ORGANISING_COMMITTEE',
 ] as const;
 
 export const Routes: { [key in (typeof routeKeys)[number]]: RouteType } = {
@@ -104,13 +105,20 @@ export const Routes: { [key in (typeof routeKeys)[number]]: RouteType } = {
     title: '후원사 정보 수정',
     route: '/sponsor/edit',
   },
+  ORGANISING_COMMITTEE: {
+    title: '파이콘 한국 준비위원회',
+    route: '/about/organising-committee',
+  },
 };
 
 export const SectionMenu: {
   label: string;
   items: RouteType[];
 }[] = [
-  { label: '파이콘 한국', items: [Routes.TICKET] },
+  {
+    label: '파이콘 한국',
+    items: [Routes.TICKET, Routes.ORGANISING_COMMITTEE],
+  },
   {
     label: '프로그램',
     items: [

pages/about/organising-committee.tsx

@@ -0,0 +1,91 @@
+import Image from 'next/image';
+import { styled } from '@stitches/react';
+
+import { H2 } from '@/components/heading';
+import SeoHeader from '@/components/layout/SeoHeader';
+
+import { CommitteeList, CommitteePageInfo } from '@/constants/about';
+import { Routes } from '@/constants/routes';
+
+export const Container = styled('div', {
+  maxWidth: '900px',
+  margin: '0 auto',
+  paddingTop: '1rem',
+  marginTop: '2rem',
+});
+export const TitleWrapper = styled('div', {
+  borderBottom: '4px solid $textPrimary',
+  paddingBottom: '20px',
+});
+export const PageDescription = styled('p', {
+  fontSize: '16px',
+  marginTop: '1.5vh',
+  whiteSpace: 'pre-wrap',
+  lineHeight: '1.5rem',
+});
+
+const CommitteeWrapper = styled('div', {
+  display: 'flex',
+  alignItems: 'flex-start',
+  margin: '1.5rem 0',
+});
+const ImageBox = styled('div', {
+  width: '6rem',
+  height: '6rem',
+  borderRadius: 100,
+  flexShrink: 0,
+  marginRight: '1rem',
+  overflow: 'hidden',
+});
+const Content = styled('div', {
+  width: 'calc(100% - 7rem)',
+});
+const Title = styled('div', {
+  fontWeight: 600,
+  bodyText: 1,
+  padding: '0.2rem',
+});
+const Text = styled('div', {
+  bodyText: 2,
+  padding: '0.2rem',
+  whiteSpace: 'pre-wrap',
+});
+const CommitteeInfoWrapper = styled('div', {
+  padding: '2rem 0',
+});
+const OrganisingCommittee = () => {
+  return (
+    <>
+      <SeoHeader
+        title={Routes.ORGANISING_COMMITTEE.title}
+        description="파이콘 한국 2023: 8월 11~13일 코엑스"
+      />
+      <Container>
+        <TitleWrapper>
+          <H2>{CommitteePageInfo.title}</H2>
+        </TitleWrapper>
+        <PageDescription>{CommitteePageInfo.description}</PageDescription>
+        <CommitteeInfoWrapper>
+          {CommitteeList.map((committee) => (
+            <CommitteeWrapper key={committee.name}>
+              <ImageBox>
+                <Image
+                  src={committee.image || '/images/Logo.png'}
+                  width={100}
+                  height={100}
+                  alt="profile image"
+                />
+              </ImageBox>
+              <Content>
+                <Title>{committee.name}</Title>
+                <Text>{committee.description}</Text>
+              </Content>
+            </CommitteeWrapper>
+          ))}
+        </CommitteeInfoWrapper>
+      </Container>
+    </>
+  );
+};
+
+export default OrganisingCommittee;