diff --git a/.github/workflows/teaser.yml b/.github/workflows/teaser.yml index 11dca83..4b51659 100644 --- a/.github/workflows/teaser.yml +++ b/.github/workflows/teaser.yml @@ -4,41 +4,40 @@ name: CD # Controls when the workflow will run on: - # Triggers the workflow on push or pull request events but only for the main branch - push: - branches: [ teaser-develop ] + # Triggers the workflow on push or pull request events but only for the main branch + push: + branches: [teaser-develop] - - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: - # This workflow contains a single job called "build" - build: - # The type of runner that the job will run on - runs-on: ubuntu-latest - defaults: - run: - working-directory: ./teaser-front + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + defaults: + run: + working-directory: ./teaser-front - env: - ENV: DEV + env: + ENV: DEV + NEXT_PUBLIC_DOMAIN_NAME: ${{ secrets.NEXT_PUBLIC_DEV_DOMAIN_NAME }} + NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_DEV_API_URL }} - # Steps represent a sequence of tasks that will be executed as part of the job - steps: - # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 - with: - node-version: 14 - - run: npm install -g yarn - - run: yarn install --frozen-lockfile - - run: yarn build - - uses: aws-actions/configure-aws-credentials@v1 - with: - aws-access-key-id: ${{ secrets.AWS_IAM_MANAGER_KEY_ID }} - aws-secret-access-key: ${{ secrets.AWS_IAM_MANAGER_SECRET_ACCESS_KEY }} - aws-region: ap-northeast-2 - - run: aws s3 sync ./out s3://pyconkr-2021-devdev --acl public-read - - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_TEASER_DEVELOP_ID }} --paths "/*" + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 14 + - run: npm install -g yarn + - run: yarn install --frozen-lockfile + - uses: aws-actions/configure-aws-credentials@v1 + with: + aws-access-key-id: ${{ secrets.AWS_IAM_MANAGER_KEY_ID }} + aws-secret-access-key: ${{ secrets.AWS_IAM_MANAGER_SECRET_ACCESS_KEY }} + aws-region: ap-northeast-2 + - run: npx serverless diff --git a/.github/workflows/teaser_main.yml b/.github/workflows/teaser_main.yml index 1adf657..45a13df 100644 --- a/.github/workflows/teaser_main.yml +++ b/.github/workflows/teaser_main.yml @@ -4,41 +4,41 @@ name: CD-teaser-main # Controls when the workflow will run on: - # Triggers the workflow on push or pull request events but only for the main branch - push: - branches: [ teaser-main ] + # Triggers the workflow on push or pull request events but only for the main branch + push: + branches: [teaser-main] - - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: - # This workflow contains a single job called "build" - build: - # The type of runner that the job will run on - runs-on: ubuntu-latest - defaults: - run: - working-directory: ./teaser-front + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + defaults: + run: + working-directory: ./teaser-front - env: - ENV: PROD + env: + ENV: PROD + NEXT_PUBLIC_DOMAIN_NAME: ${{ secrets.NEXT_PUBLIC_PROD_DOMAIN_NAME }} + NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_PROD_API_URL }} - # Steps represent a sequence of tasks that will be executed as part of the job - steps: - # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 - with: - node-version: 14 - - run: npm install -g yarn - - run: yarn install --frozen-lockfile - - run: yarn build - - uses: aws-actions/configure-aws-credentials@v1 - with: - aws-access-key-id: ${{ secrets.AWS_IAM_MANAGER_KEY_ID }} - aws-secret-access-key: ${{ secrets.AWS_IAM_MANAGER_SECRET_ACCESS_KEY }} - aws-region: ap-northeast-2 - - run: aws s3 sync ./out s3://pyconkr-2021 --acl public-read - - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_TEASER_MAIN_ID }} --paths "/*" + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 14 + - run: npm install -g yarn + - run: yarn install --frozen-lockfile + - run: sh script/generate-sitemap.sh + - uses: aws-actions/configure-aws-credentials@v1 + with: + aws-access-key-id: ${{ secrets.AWS_IAM_MANAGER_KEY_ID }} + aws-secret-access-key: ${{ secrets.AWS_IAM_MANAGER_SECRET_ACCESS_KEY }} + aws-region: ap-northeast-2 + - run: npx serverless diff --git a/README.md b/README.md index 6c69c1d..640a305 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,13 @@ -pyconkr2021dev --------------- +# 파이콘 한국 2021 홈페이지 + +``` +# run +$ yarn dev + +# build +$ yarn build + +# deploy(serverless) +$ yarn deploy +``` -PyconKR 2021 teaser page. diff --git a/teaser-front/.eslintrc b/teaser-front/.eslintrc index 29d9429..97a2bb8 100644 --- a/teaser-front/.eslintrc +++ b/teaser-front/.eslintrc @@ -1,33 +1,3 @@ { - "extends": ["next", "next/core-web-vitals"], - "overrides": [ - { - "files": ["*.ts", "*.tsx"], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 2018, - "project": "./tsconfig.json", - "sourceType": "module" - }, - "rules": { - "no-console": 0, - "import/extensions": 0, - "import/no-unresolved": 0, - "react/jsx-filename-extension": 0, - "indent": 0, - "quotes": [2, "single"] - } - } - ], - "settings": { - "import/resolver": { - "node": { - "paths": ["./src"], - "extensions": [".js", ".jsx", ".ts", ".tsx"] - } - } - } + "extends": ["next", "next/core-web-vitals"] } diff --git a/teaser-front/.prettierrc.js b/teaser-front/.prettierrc.js new file mode 100644 index 0000000..7bae59f --- /dev/null +++ b/teaser-front/.prettierrc.js @@ -0,0 +1,6 @@ +module.exports = { + printWidth: 80, + singleQuote: true, + jsxBracketSameLine: true, + noSemi: false, +}; diff --git a/teaser-front/components/ContentBackground.tsx b/teaser-front/components/ContentBackground.tsx index 05c40ac..954b67d 100644 --- a/teaser-front/components/ContentBackground.tsx +++ b/teaser-front/components/ContentBackground.tsx @@ -1,22 +1,15 @@ import styled from '@emotion/styled'; export const ContentBackgroundBlock = styled.div` - padding: 0 15rem; padding-top: 5rem; flex: 1; display: flex; flex-direction: column; justify-content: center; - + padding: 0 5rem; @media (max-width: 768px) { width: 100vh; - padding: 5rem 2rem; + padding: 3rem; } - @media (min-width: 768px) and (max-width: 1199px) { - padding: 5rem 2rem; - } - @media (min-width: 1200px) and (max-width: 1539px) { - padding: 0 5rem; - } -`; \ No newline at end of file +`; diff --git a/teaser-front/components/Footer.tsx b/teaser-front/components/Footer.tsx index f1abb88..c35859b 100644 --- a/teaser-front/components/Footer.tsx +++ b/teaser-front/components/Footer.tsx @@ -2,15 +2,32 @@ import styled from '@emotion/styled'; import Image from 'next/image'; import { Slogan } from './main/MainView'; import { ContentBackgroundBlock } from './ContentBackground'; +import { useRouter } from 'next/router'; +import PyconLogo from './PyconLogo'; function Footer() { - return ( - - dot1 - - dot1 - - ) + const router = useRouter(); + + return ( + + dot1 + {router.pathname === '/' && } + {router.pathname !== '/' && } + dot2 + + ); } -export default Footer; \ No newline at end of file +export default Footer; diff --git a/teaser-front/components/Header.tsx b/teaser-front/components/Header.tsx index 57307d0..90d7e1b 100644 --- a/teaser-front/components/Header.tsx +++ b/teaser-front/components/Header.tsx @@ -1,191 +1,242 @@ import Link from 'next/link'; import styled from '@emotion/styled'; -import {useState, useCallback} from 'react'; +import { useState } from 'react'; import { css } from '@emotion/react'; -import {useRouter} from 'next/router'; +import { useRouter } from 'next/router'; +import useMobileDetect from '../hooks/useMobileDetect'; +import MobileHeader from './MobileHeader'; - -type CategoriesType = CategoryType[] +type CategoriesType = CategoryType[]; type CategoryType = { - name: string; - text: string; -} - -const categories:CategoriesType = [ - { - name: 'about', - text: 'ABOUT' - }, - { - name: 'contribute', - text: '기여하기' - }, - { - name: 'support', - text: '후원하기' - }, - { - name: 'coc', - text: '행동 강령' - } -] - - + name: string; + text: string; +}; + +const categories: CategoriesType = [ + { + name: 'about', + text: 'ABOUT', + }, + { + name: 'contribute', + text: '기여하기', + }, + { + name: 'support', + text: '후원하기', + }, + { + name: 'coc', + text: '행동 강령', + }, +]; const Positionier = styled.div` - display: flex; - justify-content: center; - position: fixed; - z-index: 990; - top: 0px; - left: 0; - right: 0; - background-color: #121212; + display: flex; + justify-content: center; + position: fixed; + z-index: 990; + top: 0px; + left: 0; + right: 0; + background-color: #121212; `; const HeaderContents = styled.div` - width: 1280px; - display: flex; - justify-content: space-between; - flex-direction: row; - - @media (min-width: 768px) and (max-width: 1280px) { - width: 768px; - } - @media (max-width: 768px) { - width: 100vh; - justify-content: center; - } + width: 1280px; + display: flex; + justify-content: space-between; + flex-direction: row; + + @media (min-width: 768px) and (max-width: 1280px) { + width: 100%; + } + @media (max-width: 768px) { + width: 100vh; + justify-content: center; + } `; const SupportToggle = styled.div` - background-color: #121212; - z-index: 995; - color: white; - max-width: 100%; + background-color: #121212; + z-index: 995; + color: white; + position: absolute; + top: 75%; + left: 0; + right: 0; + padding: 0 0.8rem; + font-size: 1rem; + word-break: keep-all; + + @media (max-width: 1280px) { + width: 150%; + left: 50%; + transform: translateX(-50%); + } `; const RightCategoryBlock = styled.div` - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; `; -const Category = styled.div<{active?: boolean}>` - font-size: 1.25rem; - letter-spacing: 2px; - font-weight: 700; - margin: 3rem; - text-align: center; - - span { - cursor: pointer; - } - - ${(props) => props.active && css`color: #F5DF4D;` - } - - @media (min-width: 768px) and (max-width: 1280px) { - margin-left: 1rem; - margin-right: 1rem; - font-size: 1rem; - } - @media (max-width: 768px) { - font-size: 0.75rem; - margin-left: 1.25rem; - margin-right: 1.25rem; - } +const Category = styled.div<{ active?: boolean }>` + font-size: 1.25rem; + letter-spacing: 2px; + font-weight: 700; + padding: 3rem; + text-align: center; + position: relative; + cursor: pointer; + + ${(props) => + props.active && + css` + color: #f5df4d; + `} + + @media (min-width: 768px) and (max-width: 1280px) { + font-size: 1rem; + padding: 3rem 1rem; + } + @media (max-width: 768px) { + font-size: 0.75rem; + margin-left: 1.25rem; + margin-right: 1.25rem; + padding: 2rem 0.5rem; + } `; const SupportCategory = styled(Category)` + margin: 0; + padding: 1.5rem 0; + font-size: 1.1rem; + line-height: 1.5; + + a { + display: block; + } + @media (min-width: 768px) and (max-width: 1280px) { + margin: 0; + font-size: 1rem; + padding: 1.3rem 0; + } + @media (max-width: 768px) { + font-size: 0.75rem; margin: 0; - margin-top: 3rem; + } `; - - -function Header () { - - const router = useRouter(); - const [navsupport, SetNavSupport] = useState(false); - - const onToggle = () => SetNavSupport(!navsupport) - - return( - -
- - - - PYCON.KR 2021 - - - - - - - - - ABOUT - - - - - 기여하기 - - - - 프로그램 - - onToggle()}> - {navsupport ? '후원하기▴' : '후원하기▾'} - {navsupport && - - - - 후원사 - - - - - 개인후원 - - - - - 후원사 모집 - - - - - 후원사로 참여하기 - - - - - 후원사의 가치 - - - - - 후원사 혜택 안내 - - - - } - - - - - - 행동 강령 - - - - -
-
- ); +function Header() { + const router = useRouter(); + const [navSupport, setNavSupport] = useState(false); + const [isProgramOpen, setIsProgramOpen] = useState(false); + const isMobile = useMobileDetect(); + + return !isMobile ? ( + +
+ + + + PYCON.KR 2021 + + + + + + ABOUT + + + + + 기여하기 + + + setIsProgramOpen(!isProgramOpen)} + active={router.pathname === '/session'} + aria-expanded={isProgramOpen}> + + {isProgramOpen ? '프로그램▴' : '프로그램▾'} + + {isProgramOpen && ( + + + + 발표 시간표 + + + + + 발표 목록 + + + + + 문자통역 안내 + + + + )} + + setNavSupport(!navSupport)} + aria-expanded={navSupport}> + + {navSupport ? '후원하기▴' : '후원하기▾'} + + {navSupport && ( + + + + 후원사 + + + + + 개인후원 + + + + + 후원사 모집 + + + + + 후원사로 참여하기 + + + + + 후원사의 가치 + + + + + 후원사 혜택 안내 + + + + )} + + + + 행동 강령 + + + + +
+
+ ) : ( + + ); } export default Header; diff --git a/teaser-front/components/Layout.tsx b/teaser-front/components/Layout.tsx deleted file mode 100644 index 89a3863..0000000 --- a/teaser-front/components/Layout.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Header from './Header'; -import PyconLogo from './PyconLogo'; -import Footer from './Footer'; - -const Layout: React.FC = ({ children }) => { - return ( - <> -
- - {children} -