diff --git a/constants/routes.ts b/constants/routes.ts index 2df0e60..7ca9e24 100644 --- a/constants/routes.ts +++ b/constants/routes.ts @@ -3,6 +3,7 @@ import { RouteType } from '@/interfaces/RouteType'; const routeKeys = [ 'HOME', 'COC', + 'COC_REPORT', 'SPONSOR_INFO', 'SPONSOR_JOIN', 'CFP_APPLY', @@ -30,6 +31,10 @@ export const Routes: { [key in (typeof routeKeys)[number]]: RouteType } = { title: '행동 강령', route: '/coc', }, + COC_REPORT: { + title: '행동 강령 위반 신고', + route: '/coc-report', + }, SPONSOR_INFO: { title: '후원 안내', route: '/sponsor/information', @@ -116,10 +121,14 @@ export const SectionMenu: { label: '후원 안내', items: [Routes.SPONSOR_INFO], }, + { + label: '행동 강령 (CoC)', + items: [Routes.COC, Routes.COC_REPORT], + }, ]; -export const LinkMenu = [ - Routes.COC, +export const LinkMenu: RouteType[] = [ + // Routes.COC, // Routes.CFP_APPLY, // Routes.SPONSOR_JOIN, ]; diff --git a/pages/coc-report/index.tsx b/pages/coc-report/index.tsx new file mode 100644 index 0000000..1b1271e --- /dev/null +++ b/pages/coc-report/index.tsx @@ -0,0 +1,153 @@ +import { H1, H2 } from '@/components/heading'; +import SeoHeader from '@/components/layout/SeoHeader'; +import { Routes } from '@/constants/routes'; +import React, { useState } from 'react'; +import { styled } from '@/stitches.config'; +import Button from '@/components/common/Button'; +import Link from 'next/link'; + +const Page = styled('div', { + position: 'relative', +}); + +const LanguageButtonContainer = styled('div', { + position: 'absolute', + '@bp1': { + right: '12.5vw', + top: '1vh', + }, + '@bp2': { + right: '22.5vw', + top: '1vh', + }, + '@bp3': { + right: '27.5vw', + top: '1vh', + }, +}); + +const H1Container = styled('div', { + '@bp1': { + margin: '0 10vw', + }, + '@bp2': { + margin: '0 20vw', + }, + '@bp3': { + margin: '0 25vw', + }, +}); + +const H2Container = styled('div', { + padding: '2rem 0', +}); + +const H2P = styled('p', { + bodyText: 1, + '&+&': { + marginTop: '1vh', + }, +}); + +const P = styled('div', { + bodyText: 1, +}); + +const PIndent = styled('div', { + bodyText: 1, + textIndent: '30px', +}); + +const ApplyContainer = styled('div', { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', +}); + +const KoreanContent = ( + <> + +

CoC 위반 사례 신고

+ +

오프라인 신고

+ + 행사 현장에 계시다면 가까운 파이콘 한국 준비위원회에게 위반 사례를 + 신고해 주세요. +
+ 보다 더 많은 정보를 수집하여 도움을 드릴 수 있습니다. +
+
+ +

온라인 신고

+ 방법1) 아래 CoC 신고 양식을 작성하여 신고해주세요. + 방법2) coc@pycon.kr 를 통해 메일을 보내주세요. +

- 파일 첨부가 필요하신 경우 메일을 통해 접수해 주세요.

+
+
+ + + + + + +); + +const EnglishContent = ( + <> + +

Report CoC Violation

+ +

Offline

+ + If you're on-site at the event, please report case to your + nearest PyCon Korea Organizing Team. +
+ They will be able to collect more information to help you. +
+
+ +

Online

+ + Method 1) Fill out the CoC report form below to report a violation. + + Method 2) Send an email to coc@pycon.kr. +

- If you need to attach files, please do so via email.

+
+
+ + + + + + +); + +const CoCreportPage = () => { + const [language, setLanguage] = useState<'KOR' | 'ENG'>('KOR'); + + const getLanguageButtonConfig = (lang: typeof language) => { + return lang === 'KOR' + ? { text: 'English', onClick: () => setLanguage('ENG') } + : { text: '한국어', onClick: () => setLanguage('KOR') }; + }; + + const { text, onClick } = getLanguageButtonConfig(language); + + return ( + + + + + + {language === 'KOR' && KoreanContent} + {language === 'ENG' && EnglishContent} + + ); +}; + +export default CoCreportPage; diff --git a/pages/sponsor/list/[id].tsx b/pages/sponsor/list/[id].tsx index 9be0a7c..7a5ebf3 100644 --- a/pages/sponsor/list/[id].tsx +++ b/pages/sponsor/list/[id].tsx @@ -62,6 +62,11 @@ const Description = styled('div', { '@bp2': { marginTop: '48px', }, + + '*': { + color: '$textPrimary !important', + backgroundColor: '$backgroundPrimary !important', + }, }); const SponsorDetailPage = () => {