-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #137 from NaGyeong-Park/feature/pycon-people
파준위 페이지 : 목데이터 버전
- Loading branch information
Showing
4 changed files
with
126 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export interface CommitteeInfo { | ||
name: string; | ||
image?: string; | ||
description: string; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: | ||
'안녕하세요? 테스트입니다.. 파이콘 자원봉사자로 활동하고 있습니다. 파이콘 사랑해요!', | ||
}, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |