From 36441024d09b72f1ed0765edbda0157b79bab6dc Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 15:03:15 +0900 Subject: [PATCH 01/33] feat: set global style --- src/pages/_app.tsx | 1 + src/pages/globals.css | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 src/pages/globals.css diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index da826ed..09e0882 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,4 +1,5 @@ import type { AppProps } from 'next/app'; +import './globals.css'; export default function App({ Component, pageProps }: AppProps) { return ; diff --git a/src/pages/globals.css b/src/pages/globals.css new file mode 100644 index 0000000..ac79c2a --- /dev/null +++ b/src/pages/globals.css @@ -0,0 +1,26 @@ +html, +body { + padding: 0; + margin: 0; + font-family: 'SUIT Variable', sans-serif; + background-color: #0a0a0a; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } + body { + color: white; + background: black; + } +} From cf387222ddd15b2f77b4a9c990a768d6ce331159 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 15:03:34 +0900 Subject: [PATCH 02/33] feat: add _document file --- src/pages/_document.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/pages/_document.tsx diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 0000000..966d332 --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,23 @@ +import Document, { Html, Head, Main, NextScript } from "next/document"; + +class MyDocument extends Document { + render() { + return ( + + + + + +
+ + + + ); + } +} + +export default MyDocument; From 4e43b67802b938f42bcf90840e25c2f3ee335620 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 15:20:03 +0900 Subject: [PATCH 03/33] feat: add Page-Wrapper for mobile viewport --- .../comuunity/playground/Wrapper.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/components/comuunity/playground/Wrapper.tsx diff --git a/src/components/comuunity/playground/Wrapper.tsx b/src/components/comuunity/playground/Wrapper.tsx new file mode 100644 index 0000000..98cf6a6 --- /dev/null +++ b/src/components/comuunity/playground/Wrapper.tsx @@ -0,0 +1,27 @@ +/** + * 모바일 중심형 페이지 Wrapper Component + */ +const Wrapper = (props: { children: React.ReactNode }) => { + return ( +
+ {props.children} + +
+ ); +}; + +export default Wrapper; From 544c64c2c8a3335739d6b176fe9133db9f7e71a6 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 15:20:32 +0900 Subject: [PATCH 04/33] feat: set DevTest empty Page --- src/components/comuunity/index.ts | 3 +++ .../comuunity/playground/DevTest/index.tsx | 26 +++++++++++++++++++ src/pages/community/playground/devtest.tsx | 10 +++++++ src/resources/communityRes.tsx | 7 +++++ 4 files changed, 46 insertions(+) create mode 100644 src/components/comuunity/index.ts create mode 100644 src/components/comuunity/playground/DevTest/index.tsx create mode 100644 src/pages/community/playground/devtest.tsx create mode 100644 src/resources/communityRes.tsx diff --git a/src/components/comuunity/index.ts b/src/components/comuunity/index.ts new file mode 100644 index 0000000..de09f87 --- /dev/null +++ b/src/components/comuunity/index.ts @@ -0,0 +1,3 @@ +import DevTestPage from './playground/DevTest'; + +export { DevTestPage }; diff --git a/src/components/comuunity/playground/DevTest/index.tsx b/src/components/comuunity/playground/DevTest/index.tsx new file mode 100644 index 0000000..93e9abd --- /dev/null +++ b/src/components/comuunity/playground/DevTest/index.tsx @@ -0,0 +1,26 @@ +import Wrapper from '../Wrapper'; + +/** + * 개발자 성향테스트 페이지 최상위 Wrapper + */ +const DevTestPage = () => { + return ( +
+ + <> + + +
+ ); +}; + +export default DevTestPage; diff --git a/src/pages/community/playground/devtest.tsx b/src/pages/community/playground/devtest.tsx new file mode 100644 index 0000000..cad7483 --- /dev/null +++ b/src/pages/community/playground/devtest.tsx @@ -0,0 +1,10 @@ +import { DevTestPage } from '@/components/comuunity'; + +/** + * 개발자 성향 테스트 페이지 + */ +const DevTest = () => { + return ; +}; + +export default DevTest; diff --git a/src/resources/communityRes.tsx b/src/resources/communityRes.tsx new file mode 100644 index 0000000..4c21353 --- /dev/null +++ b/src/resources/communityRes.tsx @@ -0,0 +1,7 @@ +/** 임시 이미지 리소스 -- 커뮤니티팀 + * 임시로 제(이준규) S3버킷에 업로드해서 사용하고 있어요. + * 이미지 업로드 필요하면 말씀해주세요! + */ + +export const devTestLogo = + 'https://horosocular.s3.ap-northeast-1.amazonaws.com/res1.svg'; From ff072082badcbbba7cd030eb11d8113785fe2f0f Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 15:58:36 +0900 Subject: [PATCH 05/33] feat: add community-StartButton Component --- .../comuunity/playground/DevTest/index.tsx | 5 ++- .../common/StartButton/StartButton.tsx | 44 +++++++++++++++++++ 2 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 src/components/comuunity/playground/common/StartButton/StartButton.tsx diff --git a/src/components/comuunity/playground/DevTest/index.tsx b/src/components/comuunity/playground/DevTest/index.tsx index 93e9abd..e20d69e 100644 --- a/src/components/comuunity/playground/DevTest/index.tsx +++ b/src/components/comuunity/playground/DevTest/index.tsx @@ -1,4 +1,5 @@ import Wrapper from '../Wrapper'; +import StartPage from './StartPage'; /** * 개발자 성향테스트 페이지 최상위 Wrapper @@ -6,8 +7,8 @@ import Wrapper from '../Wrapper'; const DevTestPage = () => { return (
- - <> + + + + ); +}; + +export default StartButton; From 64f6196a49a4c412e40b7b251f2951986c78117d Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 15:59:37 +0900 Subject: [PATCH 06/33] feat: add community-Button Component --- .../playground/common/Button/Button.tsx | 45 +++++++++++++++++++ .../comuunity/playground/common/index.ts | 4 ++ 2 files changed, 49 insertions(+) create mode 100644 src/components/comuunity/playground/common/Button/Button.tsx create mode 100644 src/components/comuunity/playground/common/index.ts diff --git a/src/components/comuunity/playground/common/Button/Button.tsx b/src/components/comuunity/playground/common/Button/Button.tsx new file mode 100644 index 0000000..b79dc6e --- /dev/null +++ b/src/components/comuunity/playground/common/Button/Button.tsx @@ -0,0 +1,45 @@ +interface Props { + backgroundColor: string; + color: string; + title: string; + onClickHandler: () => void; +} +/** + * 테스트 중 사용될 일반 버튼 + * @param backgroundColor 배경색 + * @param color 글자색 + * @param title 버튼 텍스트 + * @param onClickHandler 클릭 이벤트핸들러 + */ +const Button = (props: Props) => { + return ( + + ); +}; + +export default Button; diff --git a/src/components/comuunity/playground/common/index.ts b/src/components/comuunity/playground/common/index.ts new file mode 100644 index 0000000..3e64fd9 --- /dev/null +++ b/src/components/comuunity/playground/common/index.ts @@ -0,0 +1,4 @@ +import StartButton from './StartButton/StartButton'; +import Button from './Button/Button'; + +export { StartButton, Button }; From 5092f7cb9b00c7723f51e964d4aedc1fe6d2c556 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 16:25:21 +0900 Subject: [PATCH 07/33] feat: add community-Title Box Component --- .../playground/common/TitleBox/TitleBox.tsx | 40 +++++++++++++++++++ .../comuunity/playground/common/index.ts | 3 +- 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/components/comuunity/playground/common/TitleBox/TitleBox.tsx diff --git a/src/components/comuunity/playground/common/TitleBox/TitleBox.tsx b/src/components/comuunity/playground/common/TitleBox/TitleBox.tsx new file mode 100644 index 0000000..acbd36f --- /dev/null +++ b/src/components/comuunity/playground/common/TitleBox/TitleBox.tsx @@ -0,0 +1,40 @@ +interface Props { + title: string; + subtitle: string; +} + +/** + * 플레이그라운드 전용 타이틀 박스 + * @param title 타이틀 첫 줄 (eg. 개발자 성향테스트) + * @param subtitle 타이틀 두 번째 줄 + */ +const TitleBox = (props: Props) => { + return ( +
+ {props.title} + {props.subtitle} + +
+ ); +}; + +export default TitleBox; diff --git a/src/components/comuunity/playground/common/index.ts b/src/components/comuunity/playground/common/index.ts index 3e64fd9..2a10390 100644 --- a/src/components/comuunity/playground/common/index.ts +++ b/src/components/comuunity/playground/common/index.ts @@ -1,4 +1,5 @@ import StartButton from './StartButton/StartButton'; import Button from './Button/Button'; +import TitleBox from './TitleBox/TitleBox'; -export { StartButton, Button }; +export { StartButton, Button, TitleBox }; From 8e79f75145bc718b1850a7b64d56b69d80bbbb42 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 16:33:01 +0900 Subject: [PATCH 08/33] feat: add community-Visitor Component --- .../common/VisitorBox/VisitorBox.tsx | 44 +++++++++++++++++++ .../comuunity/playground/common/index.ts | 3 +- 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/components/comuunity/playground/common/VisitorBox/VisitorBox.tsx diff --git a/src/components/comuunity/playground/common/VisitorBox/VisitorBox.tsx b/src/components/comuunity/playground/common/VisitorBox/VisitorBox.tsx new file mode 100644 index 0000000..e7bbbc5 --- /dev/null +++ b/src/components/comuunity/playground/common/VisitorBox/VisitorBox.tsx @@ -0,0 +1,44 @@ +interface Props { + today: number; + sum: number; +} + +/** + * 방문자 수를 보여주는 컴포넌트 + * @param today 오늘 방문자 + * @param sum 총 방문자 + */ +const VisitorBox = (props: Props) => { + return ( +
+ {`${props.today} / ${props.sum}`} + 명이 참여 중! + +
+ ); +}; + +export default VisitorBox; diff --git a/src/components/comuunity/playground/common/index.ts b/src/components/comuunity/playground/common/index.ts index 2a10390..75d3c2b 100644 --- a/src/components/comuunity/playground/common/index.ts +++ b/src/components/comuunity/playground/common/index.ts @@ -1,5 +1,6 @@ import StartButton from './StartButton/StartButton'; import Button from './Button/Button'; import TitleBox from './TitleBox/TitleBox'; +import VisitorBox from './VisitorBox/VisitorBox'; -export { StartButton, Button, TitleBox }; +export { StartButton, Button, TitleBox, VisitorBox }; From 7b4f980581097dcb556f51a3c630d38c5f27e6e3 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 17:51:40 +0900 Subject: [PATCH 09/33] feat: add design token for community spec --- .../comuunity/playground/common/token.ts | 194 ++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 src/components/comuunity/playground/common/token.ts diff --git a/src/components/comuunity/playground/common/token.ts b/src/components/comuunity/playground/common/token.ts new file mode 100644 index 0000000..701f755 --- /dev/null +++ b/src/components/comuunity/playground/common/token.ts @@ -0,0 +1,194 @@ +/** + * 색상 토큰 + */ +export const COLORS = { + GDSC: { + Red: '#EA4235', + Yellow: '#FABC05', + Green: '#34A853', + Blue: '#4286F5', + }, + SSU: { + DeepBlue: '#00688F', + Blue: '#00A4CA', + SkyBlue: '#58C4C4', + }, + grayscale: { + white: '#FFFFFF', + Gray1: '#F3F5F7', + Gray2: '#ECEEF0', + Gray3: '#E2E5E8', + Gray4: '#D4D8DC', + Gray5: '#B5B9BD', + Gray6: '#8E9398', + Gray7: '#505458', + Gray8: '#3A3D40', + Gray9: '#252729', + Black: '#101112', + }, + background: '#0A0A0A', +}; + +/** + * PC Title 텍스트 스타일 + */ +export const TEXT_STYLE_TITLE_PC = { + title: { + fontSize: 36, + fontWeight: 900, + }, + subtitle1: { + fontSize: 30, + fontWeight: 800, + }, + subtitle2B: { + fontSize: 22, + fontWeight: 700, + }, + subtitle2R: { + fontSize: 22, + fontWeight: 500, + }, + subtitle3: { + fontSize: 20, + fontWeight: 700, + }, +}; + +/** + * Mobile Title 텍스트 스타일 + */ +export const TEXT_STYLE_TITLE_MOBILE = { + title: { + fontSize: 30, + fontWeight: 900, + }, + subtitle1: { + fontSize: 22, + fontWeight: 800, + }, + subtitle2B: { + fontSize: 20, + fontWeight: 700, + }, + subtitle2R: { + fontSize: 20, + fontWeight: 500, + }, + subtitle3: { + fontSize: 18, + fontWeight: 700, + }, +}; + +/** + * PC Body 텍스트 스타일 + */ +export const TEXT_STYLE_BODY_PC = { + body1B: { + fontSize: 20, + fontWeight: 700, + }, + body1R: { + fontSize: 20, + fontWeight: 400, + }, + body2B: { + fontSize: 18, + fontWeight: 700, + }, + body2R: { + fontSize: 18, + fontWeight: 400, + }, + body3: { + fontSize: 16, + fontWeight: 400, + }, + caption: { + fontSize: 14, + fontWeight: 400, + }, +}; + +/** + * Mobile Body 텍스트 스타일 + */ +export const TEXT_STYLE_BODY_MOBILE = { + body1B: { + fontSize: 18, + fontWeight: 700, + }, + body1R: { + fontSize: 18, + fontWeight: 400, + }, + body2B: { + fontSize: 16, + fontWeight: 700, + }, + body2R: { + fontSize: 16, + fontWeight: 400, + }, + body3: { + fontSize: 14, + fontWeight: 400, + }, + caption: { + fontSize: 12, + fontWeight: 400, + }, +}; + +/** + * PC BUTTON 텍스트 스타일 + */ +export const TEXT_STYLE_BUTTON_PC = { + button1B: { + fontSize: 20, + fontWeight: 700, + }, + button1R: { + fontSize: 20, + fontWeight: 400, + }, + button2B: { + fontSize: 18, + fontWeight: 700, + }, + button2R: { + fontSize: 18, + fontWeight: 400, + }, + button3: { + fontSize: 16, + fontWeight: 400, + }, +}; + +/** + * MOBILE BUTTON 텍스트 스타일 + */ +export const TEXT_STYLE_BUTTON_MOBILE = { + button1B: { + fontSize: 18, + fontWeight: 700, + }, + button1R: { + fontSize: 18, + fontWeight: 400, + }, + button2B: { + fontSize: 16, + fontWeight: 700, + }, + button2R: { + fontSize: 16, + fontWeight: 400, + }, + button3: { + fontSize: 14, + fontWeight: 400, + }, +}; From a4a553424741c01429c9ca93eff3aa905eaa2bb8 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 17:52:14 +0900 Subject: [PATCH 10/33] fix: apply design token --- .../playground/DevTest/StartPage.tsx | 24 +++++++++++++++++++ .../playground/common/Button/Button.tsx | 13 ++++++++-- .../common/StartButton/StartButton.tsx | 11 ++++++++- .../playground/common/TitleBox/TitleBox.tsx | 22 +++++++++++++---- 4 files changed, 63 insertions(+), 7 deletions(-) create mode 100644 src/components/comuunity/playground/DevTest/StartPage.tsx diff --git a/src/components/comuunity/playground/DevTest/StartPage.tsx b/src/components/comuunity/playground/DevTest/StartPage.tsx new file mode 100644 index 0000000..767499d --- /dev/null +++ b/src/components/comuunity/playground/DevTest/StartPage.tsx @@ -0,0 +1,24 @@ +import { StartButton, Button, TitleBox, VisitorBox } from '../common'; +/** + * 시작하기 버튼이 있는 테스트 시작 페이지 + */ +const StartPage = () => { + return ( + <> + + + null} /> + ); diff --git a/src/components/comuunity/playground/common/StartButton/StartButton.tsx b/src/components/comuunity/playground/common/StartButton/StartButton.tsx index 0ae9dc0..fdc0413 100644 --- a/src/components/comuunity/playground/common/StartButton/StartButton.tsx +++ b/src/components/comuunity/playground/common/StartButton/StartButton.tsx @@ -1,3 +1,5 @@ +import { TEXT_STYLE_BUTTON_PC, TEXT_STYLE_BUTTON_MOBILE } from '../token'; + interface Props { color: string; //글자색 title: string; //버튼 텍스트 @@ -28,7 +30,7 @@ const StartButton = (props: Props) => { justify-content: center; box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 50px; - font-size: 20px; + font-size: ${TEXT_STYLE_BUTTON_PC.button1B.fontSize}px; font-weight: 800; font-family: 'SUIT Variable', sans-serif; white-space: pre-line; @@ -36,6 +38,13 @@ const StartButton = (props: Props) => { text-align: center; color: ${props.color}; } + + @media screen and (max-width: 500px) { + button { + font-size: ${TEXT_STYLE_BUTTON_MOBILE.button1B.fontSize}px; + font-weight: 800; + } + } `} ); diff --git a/src/components/comuunity/playground/common/TitleBox/TitleBox.tsx b/src/components/comuunity/playground/common/TitleBox/TitleBox.tsx index acbd36f..a6304cf 100644 --- a/src/components/comuunity/playground/common/TitleBox/TitleBox.tsx +++ b/src/components/comuunity/playground/common/TitleBox/TitleBox.tsx @@ -1,3 +1,5 @@ +import { TEXT_STYLE_TITLE_PC, TEXT_STYLE_TITLE_MOBILE } from '../token'; + interface Props { title: string; subtitle: string; @@ -24,13 +26,25 @@ const TitleBox = (props: Props) => { } div > span:nth-child(1) { - font-size: 30px; - font-weight: 800; + font-size: ${TEXT_STYLE_TITLE_PC.title.fontSize}px; + font-weight: ${TEXT_STYLE_TITLE_PC.title.fontWeight}; } div > span:nth-child(2) { - font-size: 18px; - font-weight: 500; + font-size: ${TEXT_STYLE_TITLE_PC.subtitle3.fontSize}px; + font-weight: ${TEXT_STYLE_TITLE_PC.subtitle3.fontWeight}; + } + + @media screen and (max-width: 500px) { + div > span:nth-child(1) { + font-size: ${TEXT_STYLE_TITLE_MOBILE.title.fontSize}px; + font-weight: ${TEXT_STYLE_TITLE_MOBILE.title.fontWeight}; + } + + div > span:nth-child(2) { + font-size: ${TEXT_STYLE_TITLE_MOBILE.subtitle3.fontSize}px; + font-weight: ${TEXT_STYLE_TITLE_MOBILE.subtitle3.fontWeight}; + } } `}
From 9029cd167575a2971b73d40edf47db5cb2058a0d Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 17:52:38 +0900 Subject: [PATCH 11/33] fix: fix Page Wrapper --- .../comuunity/playground/Wrapper.tsx | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/comuunity/playground/Wrapper.tsx b/src/components/comuunity/playground/Wrapper.tsx index 98cf6a6..b997cd8 100644 --- a/src/components/comuunity/playground/Wrapper.tsx +++ b/src/components/comuunity/playground/Wrapper.tsx @@ -1,7 +1,15 @@ +interface Props { + children: React.ReactNode; + topColor: string; + bottomColor: string; +} + /** * 모바일 중심형 페이지 Wrapper Component + * @param topColor 왼쪽 상단 색상 헥사코드(eg. #00A4CA) + * @param bottomColor 우측 하단 색상 헥사코드 */ -const Wrapper = (props: { children: React.ReactNode }) => { +const Wrapper = (props: Props) => { return (
{props.children} @@ -9,13 +17,21 @@ const Wrapper = (props: { children: React.ReactNode }) => { .container { width: 31.2vw; min-height: 100vh; - background-color: white; + background: linear-gradient( + 135deg, + ${props.topColor}, + ${props.bottomColor} + ); + } - @media screen and (min-width: 500px) { + @media screen and (min-width: 500px) { + .container { min-width: 500px; } + } - @media screen and (max-width: 500px) { + @media screen and (max-width: 500px) { + .container { width: 100vw; } } From dc97fccf0d188c6e39dc3e288e1b255bc85622b8 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 18:26:03 +0900 Subject: [PATCH 12/33] feat: add absolute path --- tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index b14e1e7..c176233 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,7 +21,8 @@ "@/logics/*": ["src/logics/*"], "@/constants/*": ["src/constants/*"], "@/assets/*": ["src/assets/*"], - "@/lib/*": ["lib/*"] + "@/lib/*": ["lib/*"], + "@/resources/*": ["src/resources/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], From b7aa0f8db88733a2e70908e01e0bfea207c2b1ba Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 18:26:51 +0900 Subject: [PATCH 13/33] fix: fix mobile web vh-bug --- .../playground/DevTest/StartPage.tsx | 21 +++++++++++++++++-- .../comuunity/playground/Wrapper.tsx | 3 +++ src/pages/globals.css | 4 ++++ 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/components/comuunity/playground/DevTest/StartPage.tsx b/src/components/comuunity/playground/DevTest/StartPage.tsx index 767499d..a94b859 100644 --- a/src/components/comuunity/playground/DevTest/StartPage.tsx +++ b/src/components/comuunity/playground/DevTest/StartPage.tsx @@ -1,10 +1,11 @@ import { StartButton, Button, TitleBox, VisitorBox } from '../common'; +import { devTestLogo } from '@/resources/communityRes'; /** * 시작하기 버튼이 있는 테스트 시작 페이지 */ const StartPage = () => { return ( - <> +
{ title="나문희의 첫사랑" onClickHandler={() => null} /> - + devtest-logo + +
); }; diff --git a/src/components/comuunity/playground/Wrapper.tsx b/src/components/comuunity/playground/Wrapper.tsx index b997cd8..c2d0f9b 100644 --- a/src/components/comuunity/playground/Wrapper.tsx +++ b/src/components/comuunity/playground/Wrapper.tsx @@ -17,11 +17,13 @@ const Wrapper = (props: Props) => { .container { width: 31.2vw; min-height: 100vh; + height: 100vh; background: linear-gradient( 135deg, ${props.topColor}, ${props.bottomColor} ); + overflow-x: hidden; } @media screen and (min-width: 500px) { @@ -33,6 +35,7 @@ const Wrapper = (props: Props) => { @media screen and (max-width: 500px) { .container { width: 100vw; + height: calc(var(--var, 1vh) * 100); } } `} diff --git a/src/pages/globals.css b/src/pages/globals.css index ac79c2a..02aa436 100644 --- a/src/pages/globals.css +++ b/src/pages/globals.css @@ -1,3 +1,7 @@ +:root { + --vh: 100%; +} + html, body { padding: 0; From db6204553590b2a06d9f46cbeddc829841a99038 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 18:42:57 +0900 Subject: [PATCH 14/33] feat: add devtest inner content changing --- .../playground/DevTest/StartPage.tsx | 53 +++++++++++++++---- .../comuunity/playground/DevTest/index.tsx | 5 +- 2 files changed, 48 insertions(+), 10 deletions(-) diff --git a/src/components/comuunity/playground/DevTest/StartPage.tsx b/src/components/comuunity/playground/DevTest/StartPage.tsx index a94b859..a9c18b7 100644 --- a/src/components/comuunity/playground/DevTest/StartPage.tsx +++ b/src/components/comuunity/playground/DevTest/StartPage.tsx @@ -1,9 +1,20 @@ -import { StartButton, Button, TitleBox, VisitorBox } from '../common'; +import { StartButton, TitleBox, VisitorBox } from '../common'; +import { + COLORS, + TEXT_STYLE_BODY_PC, + TEXT_STYLE_BODY_MOBILE, +} from '../common/token'; import { devTestLogo } from '@/resources/communityRes'; +import { Dispatch, SetStateAction } from 'react'; + +interface Props { + setStage: Dispatch>; +} + /** * 시작하기 버튼이 있는 테스트 시작 페이지 */ -const StartPage = () => { +const StartPage = (props: Props) => { return (
{ subtitle="과연 나는 어떤 개발자일까? " /> - null} /> -
); diff --git a/src/components/comuunity/playground/DevTest/index.tsx b/src/components/comuunity/playground/DevTest/index.tsx index e20d69e..cdb0600 100644 --- a/src/components/comuunity/playground/DevTest/index.tsx +++ b/src/components/comuunity/playground/DevTest/index.tsx @@ -1,14 +1,17 @@ import Wrapper from '../Wrapper'; import StartPage from './StartPage'; +import { useState } from 'react'; /** * 개발자 성향테스트 페이지 최상위 Wrapper */ const DevTestPage = () => { + const [stage, setStage] = useState(0); + return (
- + {stage === 0 ? : <>} From 6b6cbd8996d597bdbef50033af43d69c4c5df536 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 5 Feb 2023 19:31:13 +0900 Subject: [PATCH 17/33] feat: add questions content page --- .../comuunity/playground/DevTest/PlayPage.tsx | 76 ++++++++++++++++ .../comuunity/playground/DevTest/index.tsx | 7 +- .../comuunity/playground/common/token.ts | 8 ++ src/resources/devTestQustions.tsx | 89 +++++++++++++++++++ 4 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 src/components/comuunity/playground/DevTest/PlayPage.tsx create mode 100644 src/resources/devTestQustions.tsx diff --git a/src/components/comuunity/playground/DevTest/PlayPage.tsx b/src/components/comuunity/playground/DevTest/PlayPage.tsx new file mode 100644 index 0000000..ea229b4 --- /dev/null +++ b/src/components/comuunity/playground/DevTest/PlayPage.tsx @@ -0,0 +1,76 @@ +import { questions } from '@/resources/devTestQustions'; +import { Dispatch, SetStateAction, useState } from 'react'; +import { Button, TitleBox } from '../common'; +import { COLORS } from '../common/token'; + +interface Props { + setStage: Dispatch>; +} + +const PlayPage = (props: Props) => { + const [idx, setIdx] = useState(0); + const [answers, setAnswers] = useState>( + Array(questions.length).fill(0), + ); + + return ( +
+
+ +
+
+ {questions[idx].select.map((s, aIdx) => ( +
+
+ ); +}; + +export default PlayPage; diff --git a/src/components/comuunity/playground/DevTest/index.tsx b/src/components/comuunity/playground/DevTest/index.tsx index cdb0600..4fe7ff0 100644 --- a/src/components/comuunity/playground/DevTest/index.tsx +++ b/src/components/comuunity/playground/DevTest/index.tsx @@ -1,5 +1,6 @@ import Wrapper from '../Wrapper'; import StartPage from './StartPage'; +import PlayPage from './PlayPage'; import { useState } from 'react'; /** @@ -11,7 +12,11 @@ const DevTestPage = () => { return (
- {stage === 0 ? : <>} + {stage === 0 ? ( + + ) : ( + + )} -
- ); -}; - -export default DevTestPage; diff --git a/src/pages/community/playground/devtest.tsx b/src/pages/community/playground/devtest.tsx index 4a2beac..49daf66 100644 --- a/src/pages/community/playground/devtest.tsx +++ b/src/pages/community/playground/devtest.tsx @@ -1,10 +1,37 @@ -import { DevTestPage } from '@/components/community'; +import { Wrapper, PlayPage, StartPage } from '@/components/community/index'; +import { useState } from 'react'; +import { COLORS } from '@/components/community/playground/common/token'; + +const STAGES = [StartPage, PlayPage] as const; /** - * 개발자 성향 테스트 페이지 + * 개발자 성향테스트 페이지 최상위 Wrapper */ -const DevTest = () => { - return ; +const DevTestPage = () => { + const [stage, setStage] = useState(0); + const CurrentPage = STAGES[stage]; + + const goToNextStep = () => { + setStage((prev) => prev + 1); + }; + + return ( +
+ + + + +
+ ); }; -export default DevTest; +export default DevTestPage; From 45572712b62a7e4d75d6aabb9e35083cbbecc9c6 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Mon, 13 Feb 2023 00:45:42 +0900 Subject: [PATCH 21/33] fix : styling by vanilla-extract --- src/components/community/index.ts | 3 +- .../community/playground/DevTest/PlayPage.tsx | 41 +--- .../playground/DevTest/StartPage.tsx | 58 +---- .../playground/DevTest/devtest.css.ts | 65 ++++++ .../community/playground/Wrapper.tsx | 46 ---- .../playground/common/Button/Button.css.ts | 47 ++++ .../playground/common/Button/Button.tsx | 47 +--- .../common/StartButton/StartButton.css.ts | 40 ++++ .../common/StartButton/StartButton.tsx | 55 ++--- .../common/TitleBox/TitleBox.css.ts | 32 +++ .../playground/common/TitleBox/TitleBox.tsx | 46 +--- .../common/VisitorBox/VisitorBox.css.ts | 30 +++ .../common/VisitorBox/VisitorBox.tsx | 34 +-- .../community/playground/common/colorToken.ts | 30 +++ .../playground/common/textToken.css.ts | 205 ++++++++++++++++++ .../community/playground/common/token.ts | 202 ----------------- .../community/playground/playground.css.ts | 72 ++++++ src/pages/community/playground/devtest.tsx | 20 +- 18 files changed, 575 insertions(+), 498 deletions(-) create mode 100644 src/components/community/playground/DevTest/devtest.css.ts delete mode 100644 src/components/community/playground/Wrapper.tsx create mode 100644 src/components/community/playground/common/Button/Button.css.ts create mode 100644 src/components/community/playground/common/StartButton/StartButton.css.ts create mode 100644 src/components/community/playground/common/TitleBox/TitleBox.css.ts create mode 100644 src/components/community/playground/common/VisitorBox/VisitorBox.css.ts create mode 100644 src/components/community/playground/common/colorToken.ts create mode 100644 src/components/community/playground/common/textToken.css.ts delete mode 100644 src/components/community/playground/common/token.ts create mode 100644 src/components/community/playground/playground.css.ts diff --git a/src/components/community/index.ts b/src/components/community/index.ts index 1d08dce..7bc779a 100644 --- a/src/components/community/index.ts +++ b/src/components/community/index.ts @@ -1,5 +1,4 @@ -import Wrapper from './playground/Wrapper'; import StartPage from './playground/DevTest/StartPage'; import PlayPage from './playground/DevTest/PlayPage'; -export { Wrapper, StartPage, PlayPage }; +export { StartPage, PlayPage }; diff --git a/src/components/community/playground/DevTest/PlayPage.tsx b/src/components/community/playground/DevTest/PlayPage.tsx index 080c869..f21a2d4 100644 --- a/src/components/community/playground/DevTest/PlayPage.tsx +++ b/src/components/community/playground/DevTest/PlayPage.tsx @@ -1,8 +1,8 @@ import { questions } from '@/resources/devTestQustions'; import { useState } from 'react'; import { Button, TitleBox } from '../common'; -import { COLORS } from '../common/token'; import type { StepProps } from './types'; +import * as styles from './devtest.css'; interface Props extends StepProps {} @@ -14,23 +14,14 @@ const PlayPage = (props: Props) => { ); return ( -
-
+
+
-
+
{questions[idx].select.map((s, aIdx) => (
); }; diff --git a/src/components/community/playground/DevTest/StartPage.tsx b/src/components/community/playground/DevTest/StartPage.tsx index c51b173..bdc6615 100644 --- a/src/components/community/playground/DevTest/StartPage.tsx +++ b/src/components/community/playground/DevTest/StartPage.tsx @@ -1,9 +1,5 @@ import { StartButton, TitleBox, VisitorBox } from '../common'; -import { - COLORS, - TEXT_STYLE_BODY_PC, - TEXT_STYLE_BODY_MOBILE, -} from '../common/token'; +import * as styles from './devtest.css'; import { devTestLogo } from '@/resources/communityRes'; import type { StepProps } from './types'; @@ -15,59 +11,15 @@ interface Props extends StepProps {} const StartPage = (props: Props) => { const { onEnd } = props; return ( -
+
- onEnd()} - /> - GDSC Soongsil Univ. - devtest-logo - + onEnd()} /> + GDSC Soongsil Univ. + devtest-logo
); }; diff --git a/src/components/community/playground/DevTest/devtest.css.ts b/src/components/community/playground/DevTest/devtest.css.ts new file mode 100644 index 0000000..7754cff --- /dev/null +++ b/src/components/community/playground/DevTest/devtest.css.ts @@ -0,0 +1,65 @@ +import { style, styleVariants } from '@vanilla-extract/css'; +import { bodyText } from '../common/textToken.css'; + +const BREAKPOINTS = [500, 800] as const; +const MEDIA_QUERY = { + pc: `screen and (min-width: ${BREAKPOINTS[1]}px)`, + mobile: `screen and (max-width: ${BREAKPOINTS[0]}px)`, +} as const; + +/** + * start-page의 container + */ +export const firstPage = style({ + width: '100%', + height: '100%', + position: 'relative', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'flex-start', + gap: '30px', + paddingTop: '80px', + '@media': { + [MEDIA_QUERY.pc]: { + paddingTop: '120px', + }, + }, +}); + +/** + * play-page의 container + */ +export const playPage = style({ + width: '100%', + height: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: '50px', +}); + +/** + * 질문, 선택지가 담긴 영역 + */ +export const questionArea = style({ + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '15px', +}); + +export const text = styleVariants({ + title: [bodyText['body2B'], { color: 'white' }], +}); + +export const decoImg = style({ + width: '65%', + height: 'auto', + position: 'absolute', + bottom: '0px', + left: '50%', + transform: 'translateX(-50%)', +}); diff --git a/src/components/community/playground/Wrapper.tsx b/src/components/community/playground/Wrapper.tsx deleted file mode 100644 index 2586b50..0000000 --- a/src/components/community/playground/Wrapper.tsx +++ /dev/null @@ -1,46 +0,0 @@ -interface Props { - children: React.ReactNode; - /** 왼쪽 상단 색상 색상 코드(eg. #00A4CA) */ - topColor: string; - /** 우측 하단 색상 색상 코드 */ - bottomColor: string; -} - -/** - * 모바일 중심형 페이지 Wrapper Component - */ -const Wrapper = (props: Props) => { - return ( -
- {props.children} - -
- ); -}; - -export default Wrapper; diff --git a/src/components/community/playground/common/Button/Button.css.ts b/src/components/community/playground/common/Button/Button.css.ts new file mode 100644 index 0000000..55380d9 --- /dev/null +++ b/src/components/community/playground/common/Button/Button.css.ts @@ -0,0 +1,47 @@ +import { style, styleVariants } from '@vanilla-extract/css'; +import { COLORS } from '../colorToken'; +import { btnText } from '../textToken.css'; + +const btnBase = style({ + border: 'none', + width: '90%', + minWidth: '270px', + minHeight: '50px', + borderRadius: '500px', + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + boxShadow: 'rgba(0, 0, 0, 0.05) 0px 10px 50px', + fontFamily: `'SUIT Variable', sans-serif`, + whiteSpace: 'pre-line', + wordBreak: 'keep-all', + textAlign: 'center', +}); + +export const button = styleVariants({ + black: [ + btnBase, + btnText.button4B, + { + backgroundColor: `black`, + color: `white`, + }, + ], + white: [ + btnBase, + btnText.button4B, + { + backgroundColor: `white`, + color: `black`, + }, + ], + blue: [ + btnBase, + btnText.button4B, + { + backgroundColor: `white`, + color: `${COLORS.SSU.DeepBlue}`, + }, + ], +}); diff --git a/src/components/community/playground/common/Button/Button.tsx b/src/components/community/playground/common/Button/Button.tsx index eec6d6f..a1e7b5a 100644 --- a/src/components/community/playground/common/Button/Button.tsx +++ b/src/components/community/playground/common/Button/Button.tsx @@ -1,48 +1,25 @@ -import { TEXT_STYLE_BUTTON_PC, TEXT_STYLE_BUTTON_MOBILE } from '../token'; +import * as styles from './Button.css'; + +const Themes = ['black', 'white', 'blue'] as const; interface Props extends React.ComponentProps<'button'> { - backgroundColor: string; - color: string; + /**0번 : 블랙 테마 + * 1번 : 화이트 테마 + * 2번 : 블루 테마 + */ + selected: number; title: string; } /** * 테스트 중 사용될 일반 버튼 */ -const Button = ({ backgroundColor, color, title, ...buttonProps }: Props) => { +const Button = ({ selected, title, ...buttonProps }: Props) => { + const Theme = Themes[selected]; + return ( - ); }; diff --git a/src/components/community/playground/common/StartButton/StartButton.css.ts b/src/components/community/playground/common/StartButton/StartButton.css.ts new file mode 100644 index 0000000..410dab1 --- /dev/null +++ b/src/components/community/playground/common/StartButton/StartButton.css.ts @@ -0,0 +1,40 @@ +import { style, styleVariants } from '@vanilla-extract/css'; +import { COLORS } from '../colorToken'; +import { btnText } from '../textToken.css'; + +const btnBase = style({ + border: 'none', + width: '65%', + minWidth: '220px', + minHeight: '55px', + borderRadius: '20px', + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + boxShadow: 'rgba(0, 0, 0, 0.05) 0px 10px 50px', + fontFamily: `'SUIT Variable', sans-serif`, + whiteSpace: 'pre-line', + wordBreak: 'keep-all', + textAlign: 'center', + backgroundColor: 'white', +}); + +export const startBtn = styleVariants({ + devTest: [ + btnBase, + btnText.border, + { + color: `${COLORS.SSU.DeepBlue}`, + fontWeight: '800', + }, + ], + fortune: [ + btnBase, + btnText.border, + { + color: `${COLORS.SSU.DeepBlue}`, + fontWeight: '800', + }, + ], +}); diff --git a/src/components/community/playground/common/StartButton/StartButton.tsx b/src/components/community/playground/common/StartButton/StartButton.tsx index fdc0413..b3ed9e4 100644 --- a/src/components/community/playground/common/StartButton/StartButton.tsx +++ b/src/components/community/playground/common/StartButton/StartButton.tsx @@ -1,51 +1,24 @@ -import { TEXT_STYLE_BUTTON_PC, TEXT_STYLE_BUTTON_MOBILE } from '../token'; +import * as styles from './StartButton.css'; -interface Props { - color: string; //글자색 - title: string; //버튼 텍스트 - onClickHandler: () => void; +const Themes = ['devTest', 'fortune'] as const; + +interface Props extends React.ComponentProps<'button'> { + /** 0 : devTest + * 1 : fortune + * 둘 중 하나 */ + theme: number; + title: string; } /** * 플레이그라운드에서 사용하는 시작버튼 - * @param color 글자색 - * @param title 버튼 텍스트 - * @param onClickHandler 클릭 이벤트핸들러 + * */ -const StartButton = (props: Props) => { +const StartButton = ({ theme, title, ...buttonProps }: Props) => { + const Theme = Themes[theme]; return ( - ); }; diff --git a/src/components/community/playground/common/TitleBox/TitleBox.css.ts b/src/components/community/playground/common/TitleBox/TitleBox.css.ts new file mode 100644 index 0000000..bd224f2 --- /dev/null +++ b/src/components/community/playground/common/TitleBox/TitleBox.css.ts @@ -0,0 +1,32 @@ +import { styleVariants } from '@vanilla-extract/css'; +import { COLORS } from '../colorToken'; +import { titleText } from '../textToken.css'; + +export const titleBox = styleVariants({ + box: [ + { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: '5px', + color: 'white', + }, + ], + title: [ + titleText.title, + { + textAlign: 'center', + textShadow: `0.5px 0.5px 1.5px ${COLORS.grayscale.Gray8}`, + }, + ], + subtitle: [ + titleText.subtitle3, + { + whiteSpace: 'pre-line', + wordBreak: 'keep-all', + textAlign: 'center', + textShadow: `0.5px 0.5px 1.5px ${COLORS.grayscale.Gray8}`, + }, + ], +}); diff --git a/src/components/community/playground/common/TitleBox/TitleBox.tsx b/src/components/community/playground/common/TitleBox/TitleBox.tsx index 79c1b3b..f7f76fd 100644 --- a/src/components/community/playground/common/TitleBox/TitleBox.tsx +++ b/src/components/community/playground/common/TitleBox/TitleBox.tsx @@ -1,4 +1,4 @@ -import { TEXT_STYLE_TITLE_PC, TEXT_STYLE_TITLE_MOBILE, COLORS } from '../token'; +import * as styles from './TitleBox.css'; interface Props { title: string; @@ -12,47 +12,9 @@ interface Props { */ const TitleBox = (props: Props) => { return ( -
- {props.title} - {props.subtitle} - +
+ {props.title} + {props.subtitle}
); }; diff --git a/src/components/community/playground/common/VisitorBox/VisitorBox.css.ts b/src/components/community/playground/common/VisitorBox/VisitorBox.css.ts new file mode 100644 index 0000000..dcb0dc5 --- /dev/null +++ b/src/components/community/playground/common/VisitorBox/VisitorBox.css.ts @@ -0,0 +1,30 @@ +import { styleVariants } from '@vanilla-extract/css'; + +export const visitor = styleVariants({ + box: [ + { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: '5px', + color: 'white', + }, + ], + title: [ + { + padding: '5px 10px', + backgroundColor: 'black', + fontSize: '10px', + fontWeight: '400', + borderRadius: '5px', + cursor: 'default', + }, + ], + subtitle: [ + { + fontSize: '12px', + fontWeight: '5600', + }, + ], +}); diff --git a/src/components/community/playground/common/VisitorBox/VisitorBox.tsx b/src/components/community/playground/common/VisitorBox/VisitorBox.tsx index e7bbbc5..0c423f0 100644 --- a/src/components/community/playground/common/VisitorBox/VisitorBox.tsx +++ b/src/components/community/playground/common/VisitorBox/VisitorBox.tsx @@ -1,3 +1,5 @@ +import * as styles from './VisitorBox.css'; + interface Props { today: number; sum: number; @@ -10,33 +12,11 @@ interface Props { */ const VisitorBox = (props: Props) => { return ( -
- {`${props.today} / ${props.sum}`} - 명이 참여 중! - +
+ {`${props.today} / ${props.sum}`} + 명이 참여 중!
); }; diff --git a/src/components/community/playground/common/colorToken.ts b/src/components/community/playground/common/colorToken.ts new file mode 100644 index 0000000..138c5f5 --- /dev/null +++ b/src/components/community/playground/common/colorToken.ts @@ -0,0 +1,30 @@ +/** + * 색상 토큰 + */ +export const COLORS = { + GDSC: { + Red: '#EA4235', + Yellow: '#FABC05', + Green: '#34A853', + Blue: '#4286F5', + }, + SSU: { + DeepBlue: '#00688F', + Blue: '#00A4CA', + SkyBlue: '#58C4C4', + }, + grayscale: { + white: '#FFFFFF', + Gray1: '#F3F5F7', + Gray2: '#ECEEF0', + Gray3: '#E2E5E8', + Gray4: '#D4D8DC', + Gray5: '#B5B9BD', + Gray6: '#8E9398', + Gray7: '#505458', + Gray8: '#3A3D40', + Gray9: '#252729', + Black: '#101112', + }, + background: '#0A0A0A', +}; diff --git a/src/components/community/playground/common/textToken.css.ts b/src/components/community/playground/common/textToken.css.ts new file mode 100644 index 0000000..069b905 --- /dev/null +++ b/src/components/community/playground/common/textToken.css.ts @@ -0,0 +1,205 @@ +import { styleVariants } from '@vanilla-extract/css'; + +const BREAKPOINTS = [500, 800] as const; +const MEDIA_QUERY = { + pc: `screen and (min-width: ${BREAKPOINTS[1]}px)`, + mobile: `screen and (max-width: ${BREAKPOINTS[0]}px)`, +} as const; + +/** + * 타이틀 텍스트 토큰 + */ +export const titleText = styleVariants({ + title: { + fontSize: 36, + fontWeight: 900, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 30, + fontWeight: 900, + }, + }, + }, + subtitle1: { + fontSize: 30, + fontWeight: 800, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 22, + fontWeight: 800, + }, + }, + }, + subtitle2B: { + fontSize: 22, + fontWeight: 700, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 20, + fontWeight: 700, + }, + }, + }, + subtitle2R: { + fontSize: 22, + fontWeight: 500, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 20, + fontWeight: 500, + }, + }, + }, + subtitle3: { + fontSize: 20, + fontWeight: 700, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 18, + fontWeight: 700, + }, + }, + }, +}); + +/** + * Body 텍스트 토큰 + */ +export const bodyText = styleVariants({ + body1B: { + fontSize: 20, + fontWeight: 700, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 18, + fontWeight: 700, + }, + }, + }, + body1R: { + fontSize: 20, + fontWeight: 400, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 18, + fontWeight: 400, + }, + }, + }, + body2B: { + fontSize: 18, + fontWeight: 700, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 18, + fontWeight: 700, + }, + }, + }, + body2R: { + fontSize: 18, + fontWeight: 400, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 16, + fontWeight: 400, + }, + }, + }, + body3: { + fontSize: 16, + fontWeight: 400, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 14, + fontWeight: 400, + }, + }, + }, + caption: { + fontSize: 14, + fontWeight: 400, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 12, + fontWeight: 400, + }, + }, + }, +}); + +/** + * 버튼 텍스트 토큰 + */ +export const btnText = styleVariants({ + border: { + fontSize: 20, + fontWeight: 800, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 12, + fontWeight: 800, + }, + }, + }, + button1B: { + fontSize: 20, + fontWeight: 700, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 12, + fontWeight: 400, + }, + }, + }, + button1R: { + fontSize: 20, + fontWeight: 400, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 18, + fontWeight: 400, + }, + }, + }, + button2B: { + fontSize: 18, + fontWeight: 700, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 16, + fontWeight: 700, + }, + }, + }, + button2R: { + fontSize: 18, + fontWeight: 400, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 16, + fontWeight: 400, + }, + }, + }, + button3R: { + fontSize: 16, + fontWeight: 400, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 14, + fontWeight: 400, + }, + }, + }, + button4B: { + fontSize: 14, + fontWeight: 800, + '@media': { + [MEDIA_QUERY.mobile]: { + fontSize: 13, + fontWeight: 800, + }, + }, + }, +}); diff --git a/src/components/community/playground/common/token.ts b/src/components/community/playground/common/token.ts deleted file mode 100644 index 95c8e0b..0000000 --- a/src/components/community/playground/common/token.ts +++ /dev/null @@ -1,202 +0,0 @@ -/** - * 색상 토큰 - */ -export const COLORS = { - GDSC: { - Red: '#EA4235', - Yellow: '#FABC05', - Green: '#34A853', - Blue: '#4286F5', - }, - SSU: { - DeepBlue: '#00688F', - Blue: '#00A4CA', - SkyBlue: '#58C4C4', - }, - grayscale: { - white: '#FFFFFF', - Gray1: '#F3F5F7', - Gray2: '#ECEEF0', - Gray3: '#E2E5E8', - Gray4: '#D4D8DC', - Gray5: '#B5B9BD', - Gray6: '#8E9398', - Gray7: '#505458', - Gray8: '#3A3D40', - Gray9: '#252729', - Black: '#101112', - }, - background: '#0A0A0A', -}; - -/** - * PC Title 텍스트 스타일 - */ -export const TEXT_STYLE_TITLE_PC = { - title: { - fontSize: 36, - fontWeight: 900, - }, - subtitle1: { - fontSize: 30, - fontWeight: 800, - }, - subtitle2B: { - fontSize: 22, - fontWeight: 700, - }, - subtitle2R: { - fontSize: 22, - fontWeight: 500, - }, - subtitle3: { - fontSize: 20, - fontWeight: 700, - }, -}; - -/** - * Mobile Title 텍스트 스타일 - */ -export const TEXT_STYLE_TITLE_MOBILE = { - title: { - fontSize: 30, - fontWeight: 900, - }, - subtitle1: { - fontSize: 22, - fontWeight: 800, - }, - subtitle2B: { - fontSize: 20, - fontWeight: 700, - }, - subtitle2R: { - fontSize: 20, - fontWeight: 500, - }, - subtitle3: { - fontSize: 18, - fontWeight: 700, - }, -}; - -/** - * PC Body 텍스트 스타일 - */ -export const TEXT_STYLE_BODY_PC = { - body1B: { - fontSize: 20, - fontWeight: 700, - }, - body1R: { - fontSize: 20, - fontWeight: 400, - }, - body2B: { - fontSize: 18, - fontWeight: 700, - }, - body2R: { - fontSize: 18, - fontWeight: 400, - }, - body3: { - fontSize: 16, - fontWeight: 400, - }, - caption: { - fontSize: 14, - fontWeight: 400, - }, -}; - -/** - * Mobile Body 텍스트 스타일 - */ -export const TEXT_STYLE_BODY_MOBILE = { - body1B: { - fontSize: 18, - fontWeight: 700, - }, - body1R: { - fontSize: 18, - fontWeight: 400, - }, - body2B: { - fontSize: 16, - fontWeight: 700, - }, - body2R: { - fontSize: 16, - fontWeight: 400, - }, - body3: { - fontSize: 14, - fontWeight: 400, - }, - caption: { - fontSize: 12, - fontWeight: 400, - }, -}; - -/** - * PC BUTTON 텍스트 스타일 - */ -export const TEXT_STYLE_BUTTON_PC = { - button1B: { - fontSize: 20, - fontWeight: 700, - }, - button1R: { - fontSize: 20, - fontWeight: 400, - }, - button2B: { - fontSize: 18, - fontWeight: 700, - }, - button2R: { - fontSize: 18, - fontWeight: 400, - }, - button3: { - fontSize: 16, - fontWeight: 400, - }, - button4B: { - fontSize: 14, - fontWeight: 800, - }, -}; - -/** - * MOBILE BUTTON 텍스트 스타일 - */ -export const TEXT_STYLE_BUTTON_MOBILE = { - button1B: { - fontSize: 18, - fontWeight: 700, - }, - button1R: { - fontSize: 18, - fontWeight: 400, - }, - button2B: { - fontSize: 16, - fontWeight: 700, - }, - button2R: { - fontSize: 16, - fontWeight: 400, - }, - button3: { - fontSize: 14, - fontWeight: 400, - }, - button4B: { - fontSize: 13, - fontWeight: 800, - }, -}; diff --git a/src/components/community/playground/playground.css.ts b/src/components/community/playground/playground.css.ts new file mode 100644 index 0000000..6fbd753 --- /dev/null +++ b/src/components/community/playground/playground.css.ts @@ -0,0 +1,72 @@ +import { style, styleVariants } from '@vanilla-extract/css'; +import { COLORS } from '@/components/community/playground/common/colorToken'; + +const BREAKPOINTS = [500] as const; +const MEDIA_QUERY = { + pc: `screen and (min-width: ${BREAKPOINTS[0]}px)`, + mobile: `screen and (max-width: ${BREAKPOINTS[0]}px)`, +} as const; + +/** + * 개발자 성향 테스트에서 단독으로 사용하는 콘테이너 스타일 + */ +export const devtestPage = style({ + padding: '0', + margin: '0', + background: `linear-gradient( + 135deg, + ${COLORS.SSU.Blue}70, + ${COLORS.SSU.SkyBlue}50 + )`, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', +}); + +/** + * 공통 wrapper의 base style + */ +const wrapperbase = style({ + width: '31.2vw', + minHeight: '100vh', + height: '100vh', + overflowX: `hidden`, + '@media': { + [MEDIA_QUERY.mobile]: { + width: '100vw', + height: `calc(var(--var, 1vh) * 100)`, + }, + [MEDIA_QUERY.pc]: { + minWidth: '500px', + boxShadow: + 'rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px', + }, + }, +}); + +/** + * 개발자 성향테스트 / 오늘의 포춘쿠키 공통 Wrapper + * devtest & fortune + */ +export const wrapper = styleVariants({ + devtest: [ + wrapperbase, + { + background: `linear-gradient( + 135deg, + ${COLORS.SSU.Blue}, + ${COLORS.SSU.SkyBlue} + )`, + }, + ], + fortune: [ + wrapperbase, + { + background: `linear-gradient( + 135deg, + ${COLORS.SSU.Blue}, + ${COLORS.SSU.SkyBlue} + )`, + }, + ], +}); diff --git a/src/pages/community/playground/devtest.tsx b/src/pages/community/playground/devtest.tsx index 49daf66..af485b9 100644 --- a/src/pages/community/playground/devtest.tsx +++ b/src/pages/community/playground/devtest.tsx @@ -1,6 +1,6 @@ -import { Wrapper, PlayPage, StartPage } from '@/components/community/index'; +import { PlayPage, StartPage } from '@/components/community/index'; import { useState } from 'react'; -import { COLORS } from '@/components/community/playground/common/token'; +import * as styles from '@/components/community/playground/playground.css'; const STAGES = [StartPage, PlayPage] as const; @@ -16,20 +16,10 @@ const DevTestPage = () => { }; return ( -
- +
+
- - +
); }; From 1fb23c0ede9c40082abf85bd8cfb836675d52406 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Mon, 13 Feb 2023 20:58:34 +0900 Subject: [PATCH 22/33] feat : add dev-test questions --- .../DevTest/ProgressBar/ProgressBar.css.ts | 26 ++ .../DevTest/ProgressBar/ProgressBar.tsx | 13 + src/resources/devTestQustions.tsx | 390 +++++++++++++++--- 3 files changed, 383 insertions(+), 46 deletions(-) create mode 100644 src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts create mode 100644 src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx diff --git a/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts new file mode 100644 index 0000000..d188520 --- /dev/null +++ b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts @@ -0,0 +1,26 @@ +import { styleVariants } from '@vanilla-extract/css'; +import { COLORS } from '../../common/colorToken'; +import { questions } from '@/resources/devTestQustions'; + +export const progress = styleVariants({ + outer: [ + { + width: '90%', + height: '15px', + borderRadius: '500px', + backgroundColor: `${COLORS.grayscale.Gray2}`, + overflow: 'hidden', + padding: '2px', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', + }, + ], + inner: [ + { + transition: 'all 0.25s', + backgroundColor: `${COLORS.SSU.SkyBlue}`, + }, + ], +}); diff --git a/src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000..91b5c95 --- /dev/null +++ b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx @@ -0,0 +1,13 @@ +interface Props { + curIdx: number; +} + +const ProgressBar = ({ curIdx }: Props) => { + return ( +
+
+
+ ); +}; + +export default ProgressBar; diff --git a/src/resources/devTestQustions.tsx b/src/resources/devTestQustions.tsx index c438f3a..3350c09 100644 --- a/src/resources/devTestQustions.tsx +++ b/src/resources/devTestQustions.tsx @@ -1,89 +1,387 @@ +export enum Part { + WM = 'Web/Mobile', + SC = 'Server/Cloud', + AM = 'AI/ML', +} + +export interface DevType { + title: string; + subtitle: string; + type: string; + part: Part; + content: Array; +} + export interface Questions { question: string; - select: Array; + select: Array; } +export interface Answer { + type: Array; + answer: string; +} + +export const vitaminDev: DevType = { + title: '놀기 위해 개발하는거 아니겠어?', + subtitle: '회식이 제일 좋아! 노는게 제일 좋아!', + type: '분위기 메이커 비타민 개발자', + part: Part.WM, + content: [ + '어디서든 인기만점인 당신은 비타민 같아요!', + '팀 프로젝트가 너무 좋아요! 항상 설레요!', + '아주 열심히 일하지만, 나에게 1순위늰 언제나 행복이에요.', + '어둡고 칙칙한 것은 싫어. 생기있는게 좋아요.', + '친구가 힘들바엔, 그냥 내가 힘든게 나아요. 버스기사 장인!', + '나의 지친 모습은 아무에게도 보여주기 싫어요!', + ], +}; + +export const artistDev: DevType = { + title: '소피, 아름답지 않은면 살아도 산게 아니야.', + subtitle: '섬세함과 완벽함은 나의 원동력!', + type: '하울 스타일의 예술가 개발자', + part: Part.WM, + content: [ + '조용해 보이지만, 주변에 사람이 끊이질 않아요.', + '디자인, 코드, 로그... 모두 깔끔하고 완벽해야해요.', + '자기 계발을 위해 끊임없이 노력해요.', + '순간의 소모적인 즐거움보단 미래까지 생각하는 편이에요!', + '리더십이 짱짱하대요. 나는 모르겠지만 항상 팀플 조장이에요.', + '나의 목표는 육각형 인재! 뭐든 잘 하고 싶어요.', + ], +}; + +export const plannerDev: DevType = { + title: '잠깐, 이건 내 계획에 없었는데...? 죽을게.', + subtitle: '뭐든지 철저한 계획은 기본!', + type: '인간 플래너 그 자체 개발자', + part: Part.SC, + content: [ + '가만히 있는 것 처럼 보여도, 머리는 쉬지 않아요.', + '프로젝트 기획하고, 계획 짜는게 가장 재미있어요!', + '인생 계획을 이루기 위해서 항상 노력하고 있어요.', + '코드가 이상해도, 디자인이 별로여도 괜찮아요. 대신 기한은 지켜라...', + '팀 리더가 되기 싫어요. 가뜩이나 생각할거 많은데!', + '빠르게 변하는 유행은 나의 적이에요.', + ], +}; + +export const foxDev: DevType = { + title: '검은 화면에 코드를 적어내려가는 모습.. 멋있지? 반했지?', + subtitle: '스타벅스에서 개발하는 모습 보여주면 다 나한테 반하더라...', + type: '인간 퐉스 개발자', + part: Part.SC, + content: [ + '사람들이 무슨 생각하고 있는지 다 보이는걸요?', + '무엇을 해야 사람들이 날 좋아하는지 알고있어요.', + '머리가 비범한 편이라, 남들보다 적게 공부하고 많이 배워요.', + '팀 리더? 귀찮지만 꽤 재밌어요.', + '머릿 속 계산 속도가 슈퍼컴퓨터 급이에요.', + '느리고 비효율적인 것들을 싫어해요.', + ], +}; + +export const fighterDev: DevType = { + title: '잠깐 나 궁금한거 있어, 아 아니 싸우자는거 아니야!', + subtitle: '데브톡 얼마나 재밌게요~', + type: '인간 100분 토론 개발자', + part: Part.AM, + content: [ + '하나에 집중하면 그것만 보여요. 아무것도 안들려요!', + '뭔가에 꽂히기 전 까지는 일상이 지루해요.', + '나와 다른 생각이 너무 궁금해요! 듣고 배우고 싶어요.', + '더 완벽한 결과를 위해서라면 어려운 공부도 Easy해져요.', + '느리고, 비효율적이어도 괜찮아요. 분명 배우는게 있거든요.', + '남들의 칭찬보다는 나의 만족이 중요한 완벽주의자예요.', + ], +}; + +export const imagineDev: DevType = { + title: '(개발자 성향 테스트하다가 갑자기 지구멸망하면 어떡하지...?)', + subtitle: '일상에서 상상하는 시간을 빼보라구요?', + type: '그럼 하루가 없어지는 개발자', + part: Part.AM, + content: [ + '이런 저런 상상이 너무 즐겁고 재밌어요.', + '상상하다가 밤 잠을 설치기도 해요.', + '그래도 때로는 상상에서 솔루션을 찾아내기도 해요.', + '깊게 생각할 수 있는 여지를 주는 것들이 좋아요.', + '한 번 읽고나면, 혼자 곱씹어보다가 완벽하게 이해해버려요.', + '이미 수백번 상상해봤기에 설명도 기가막히게 잘해요!', + ], +}; + +export const results: Array = [ + vitaminDev, + artistDev, + plannerDev, + foxDev, + fighterDev, + imagineDev, +]; + export const questions: Array = [ { question: - "길을 가다가 누군가 '숭실대 입구역 어떻게 가요?'라고\n물어봤다. 나의 반응은?", + '바늘 구멍같은 취업시장에서 나는 승리했다...\n오늘은 첫 출근! 나는 귀요미 신입 개발자!\n드디어 회사 입구에 도착했다.', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, imagineDev, artistDev], + answer: '두근두근, 어떤 사람들이 았을까? 너무 기대돼!', + }, + { + type: [foxDev, vitaminDev, artistDev], + answer: '사람들에게 내가 얼마나 뛰어난 개발자인지 알려줘야겠군.', + }, + { + type: [imagineDev, plannerDev, fighterDev], + answer: '일단 들어가서 인사를... 아 괜히 말실수하는거 아냐? 개떨려...', + }, + { + type: [foxDev, plannerDev, fighterDev], + answer: '1년만 경력 쌓고 나가야지.\n나는 더 높은 곳에 있어야해.', + }, ], }, { - question: '당신은 지금 배가 고픈가요', + question: + '신입끼리 모여서 진행하는 온보딩 교육.\n내 옆에 있는 이 사람이 나의 동기인가보다.\n들떠있는건지 나한테 이것저것 물어보네?', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, plannerDev, fighterDev], + answer: + '너무 반가워요! 서로 도와주면서 잘 지내봐요!(좋은 사람인 것 같다!)', + }, + { + type: [artistDev, plannerDev, foxDev], + answer: '너무 반가워요! 서로 도와주면서 잘 지내봐요^^(말좀 그만 걸어)', + }, + { + type: [artistDev, foxDev, imagineDev], + answer: '아~ 동작구 사시는구나. 아~ 숭실대 나오셨구나. 아~', + }, + { + type: [vitaminDev, fighterDev, imagineDev], + answer: + '아진짜요?LA갈비를얘기하셔서갑자기생각난건데제가LA에있을때말이죠...', + }, ], }, { - question: '당신은 지금 졸린가요', + question: + '헉 앞으로 일하게 될 팀을 배정해준다고 한다.\n내가 들어갈 팀은 이랬으면 좋겠는데?!', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, fighterDev, imagineDev], + answer: '성과가 뭐가 중요해. 난 무조건 사람 냄새 나는 팀!', + }, + { + type: [artistDev, plannerDev, foxDev], + answer: '회사에서 무슨 인간관계야.. 성과 좋고 철저한 팀.', + }, + { + type: [plannerDev, foxDev, fighterDev], + answer: '난 내가 주인공이면 돼. 내가 활약할 수 있는 팀.', + }, + { + type: [vitaminDev, artistDev, imagineDev], + answer: '인생은 끝 없는 공부! 배울 점이 많은 사람들이 있는 팀!', + }, ], }, { - question: '당신은 지금 눕고싶나요', + question: + '긴장해서 그런가?\n배고파서 죽을 것만 같다.\n2시가 다 되어가는데 왜 아무도 밥을 안먹지...?', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, imagineDev, plannerDev], + answer: '(끙... 오늘은 물만 마셔야겠다.)', + }, + { + type: [artistDev, foxDev, fighterDev], + answer: '저 혹시, 저희 식사는 알아서 하고 오면 됩니까?', + }, + { + type: [vitaminDev, plannerDev, foxDev], + answer: '(화장실 가서 초코바 먹고와야겠다. 념념굿)', + }, + { + type: [artistDev, fighterDev, imagineDev], + answer: '(회사 리뷰 사이트 뒤져보는 중...)', + }, ], }, { - question: '당신은 지금 쉬고싶나요', + question: + '빡세다곤 들었지만...\n첫 날부터 과제라니!\n어...? 과제의 상태가...', + select: [ + { + type: [foxDev, fighterDev, imagineDev], + answer: '가이드라인 빡세네... 난 자유로운게 좋은데.', + }, + { + type: [artistDev, plannerDev, imagineDev], + answer: '자유롭게 해결해보라고...? 장난치는 것도 아니고...', + }, + { + type: [vitaminDev, artistDev, foxDev], + answer: '쉽네ㅋㅋ', + }, + { + type: [vitaminDev, plannerDev, fighterDev], + answer: '동기랑 같이 이야기하면서 해결해봐야지! 카톡을 해봐야겠다.', + }, + ], + }, + { + question: + '오후 업무를 받았다.\n엥? 나 개발자로 들어온거 아니었나...?\n난생 처음보는 업무를 받았다.', + select: [ + { + type: [vitaminDev, artistDev, plannerDev], + answer: '그래도 일단 받았으니, 할 수 있을 만큼은 해야지.', + }, + { + type: [vitaminDev, plannerDev, imagineDev], + answer: '선배님, 제 업무가 맞는지 확인좀 부탁드려도 될까요?(제발...)', + }, + { + type: [artistDev, foxDev, fighterDev], + answer: '선배님, 제 업무가 맞는지 확인좀 부탁드려도 될까요?(장난하냐?)', + }, + { + type: [foxDev, fighterDev, imagineDev], + answer: '내 업무 아니니까 대충해서 내야지.', + }, + ], + }, + { + question: + '주변 사람들에게 물어보니, 일단 외우라고 한다.\n관련 자료도 받았는데...', + select: [ + { + type: [vitaminDev, fighterDev, imagineDev], + answer: '자료까지 받으니까 힘이 나네. 열심히 외워보자!', + }, + { + type: [artistDev, plannerDev, fighterDev], + answer: '이걸 왜 나한테...? 진지하게 도망갈까...', + }, + { + type: [vitaminDev, artistDev, foxDev], + answer: '하라면 못할 줄 알고? 이딴 잡무 1시간 안에 끝내간다.', + }, + { + type: [plannerDev, foxDev, imagineDev], + answer: '블라인드를 켠다...', + }, + ], + }, + { + question: + '벌써 팀 프로젝트에 들어간다고?\n뭐하는 회사지... 쨌든 입사 후 첫 팀플!', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, foxDev, fighterDev], + answer: '너무 설렌다... 이번에 얼마나 성장할까?', + }, + { + type: [artistDev, plannerDev, imagineDev], + answer: '아니 적응하고 공부할 시간은 달라고', + }, + { + type: [vitaminDev, artistDev, foxDev], + answer: '드디어 내 능력을 보여줄 시간이다.', + }, + { + type: [plannerDev, fighterDev, imagineDev], + answer: '(오만가지 상상 중) 팀플하다 싸우진 않겠지...', + }, ], }, { - question: '당신은 지구멸망제발', + question: '용기내서 낸 나의 의견!\n그리고 이어지는 팀원들의 지적...', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, plannerDev, imagineDev], + answer: '후잉... 죄송합니다...', + }, + { + type: [artistDev, foxDev, fighterDev], + answer: '오호 그 점을 역이용해서 보완해보는건 어떨까요?', + }, + { + type: [artistDev, foxDev, fighterDev], + answer: '아 네~ (뭐래 내 말이 맞구만;)', + }, + { + type: [vitaminDev, plannerDev, imagineDev], + answer: '그쵸! 별로죠?! 저도 별로라고 생각했어요!(ㅠㅠ)', + }, ], }, { - question: '당신은 지금 노래추천해주세요', + question: '오 아침에 봤던 동기다!\n잠깐... 동기가 선배에게 혼나고 있는데?', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, artistDev, imagineDev], + answer: '괜찮아... 원래 그런게 사회생활이래. 힘내자!', + }, + { + type: [artistDev, foxDev, fighterDev], + answer: '그럼 이따 가서 그걸 이렇게 한 번 해봐.', + }, + { + type: [plannerDev, foxDev, imagineDev], + answer: '아이고... 이따 술이나 한잔 할래?', + }, + { + type: [vitaminDev, plannerDev, fighterDev], + answer: '엥 너네 선배 진짜 이상하네 말을 왜 그따구로 해?', + }, ], }, { - question: '당신은 지금 질문만들기가 힘든가요', + question: '어우 첫 날이라 그런가?\n시간이 너무 빨라! 슬슬 퇴근 시간이네...', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, plannerDev, imagineDev], + answer: '오늘의 나,, 너무 고생 많았다⭐', + }, + { + type: [artistDev, plannerDev, fighterDev], + answer: '내일은 아침에 과제를 절반하고, 잡무 해결한 다음...', + }, + { + type: [vitaminDev, foxDev, imagineDev], + answer: '놀다갈까?', + }, + { + type: [artistDev, foxDev, fighterDev], + answer: '근데 생각해보니까 갑자기 빡치네 아까...', + }, ], }, { - question: '당신은 ㅇ;리만ㅇ럼;ㄴㅇ리ㅏ', + question: '앗 아니나 다를까..\n첫 날이니 회식을 하자고 한다.', select: [ - '네? 뉴진스의 하입보이요. Cause I~~', - '사진찍는다고요?', - '콩', - '츄~카와이쿠테 고멘~', + { + type: [vitaminDev, artistDev, fighterDev], + answer: '오옹!!! 기대하던 회식!!! 너무 좋아!!!', + }, + { + type: [artistDev, plannerDev, imagineDev], + answer: '아... 네! 좋아요 ~... ㅎㅎ...', + }, + { + type: [vitaminDev, foxDev, fighterDev], + answer: '아니? 내가 먼저 회식 하자고 말한다.', + }, + { + type: [plannerDev, foxDev, imagineDev], + answer: '앗 정말 죄송합니다 지금 급한 일이 있어서 (없지롱ㅋㅋ)', + }, ], }, ]; From 0cb2a7254ae80bd3690493c594f7f06b97f1e5b2 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Tue, 14 Feb 2023 11:37:07 +0900 Subject: [PATCH 23/33] fix : fix Image and fontSize --- next.config.js | 3 +++ src/components/community/playground/DevTest/StartPage.tsx | 5 ++++- .../community/playground/common/TitleBox/TitleBox.css.ts | 1 + src/components/community/playground/common/textToken.css.ts | 2 +- 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/next.config.js b/next.config.js index 6506fd0..25963d7 100644 --- a/next.config.js +++ b/next.config.js @@ -5,6 +5,9 @@ const withVanillaExtract = createVanillaExtractPlugin(); const nextConfig = { reactStrictMode: true, swcMinify: true, + images: { + domains: ['horosocular.s3.ap-northeast-1.amazonaws.com'], + }, }; module.exports = withVanillaExtract(nextConfig); diff --git a/src/components/community/playground/DevTest/StartPage.tsx b/src/components/community/playground/DevTest/StartPage.tsx index bdc6615..acfaf17 100644 --- a/src/components/community/playground/DevTest/StartPage.tsx +++ b/src/components/community/playground/DevTest/StartPage.tsx @@ -2,6 +2,7 @@ import { StartButton, TitleBox, VisitorBox } from '../common'; import * as styles from './devtest.css'; import { devTestLogo } from '@/resources/communityRes'; import type { StepProps } from './types'; +import Image from 'next/image'; interface Props extends StepProps {} @@ -19,7 +20,9 @@ const StartPage = (props: Props) => { onEnd()} /> GDSC Soongsil Univ. - devtest-logo + + devtest-logo +
); }; diff --git a/src/components/community/playground/common/TitleBox/TitleBox.css.ts b/src/components/community/playground/common/TitleBox/TitleBox.css.ts index bd224f2..dc2ba03 100644 --- a/src/components/community/playground/common/TitleBox/TitleBox.css.ts +++ b/src/components/community/playground/common/TitleBox/TitleBox.css.ts @@ -27,6 +27,7 @@ export const titleBox = styleVariants({ wordBreak: 'keep-all', textAlign: 'center', textShadow: `0.5px 0.5px 1.5px ${COLORS.grayscale.Gray8}`, + lineHeight: '27px', }, ], }); diff --git a/src/components/community/playground/common/textToken.css.ts b/src/components/community/playground/common/textToken.css.ts index 069b905..8cd7174 100644 --- a/src/components/community/playground/common/textToken.css.ts +++ b/src/components/community/playground/common/textToken.css.ts @@ -137,7 +137,7 @@ export const btnText = styleVariants({ fontWeight: 800, '@media': { [MEDIA_QUERY.mobile]: { - fontSize: 12, + fontSize: 18, fontWeight: 800, }, }, From b166518464c819076c939fbdac41c0896e7aa20d Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Tue, 14 Feb 2023 11:37:23 +0900 Subject: [PATCH 24/33] feat : add progress bar --- .../community/playground/DevTest/PlayPage.tsx | 8 +- .../DevTest/ProgressBar/ProgressBar.css.ts | 84 +++++++++++++++++-- .../DevTest/ProgressBar/ProgressBar.tsx | 6 +- .../playground/DevTest/devtest.css.ts | 14 +++- src/resources/devTestQustions.tsx | 25 +++--- 5 files changed, 113 insertions(+), 24 deletions(-) diff --git a/src/components/community/playground/DevTest/PlayPage.tsx b/src/components/community/playground/DevTest/PlayPage.tsx index f21a2d4..8cfc923 100644 --- a/src/components/community/playground/DevTest/PlayPage.tsx +++ b/src/components/community/playground/DevTest/PlayPage.tsx @@ -3,6 +3,7 @@ import { useState } from 'react'; import { Button, TitleBox } from '../common'; import type { StepProps } from './types'; import * as styles from './devtest.css'; +import ProgressBar from './ProgressBar/ProgressBar'; interface Props extends StepProps {} @@ -15,6 +16,9 @@ const PlayPage = (props: Props) => { return (
+ + +
@@ -22,11 +26,11 @@ const PlayPage = (props: Props) => { {questions[idx].select.map((s, aIdx) => (
diff --git a/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts index d188520..9a5448a 100644 --- a/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts +++ b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts @@ -1,11 +1,17 @@ -import { styleVariants } from '@vanilla-extract/css'; +import { styleVariants, style } from '@vanilla-extract/css'; import { COLORS } from '../../common/colorToken'; -import { questions } from '@/resources/devTestQustions'; + +const innerBase = style({ + transition: 'all 0.25s', + background: `linear-gradient(135deg, ${COLORS.SSU.DeepBlue}, ${COLORS.SSU.SkyBlue})`, + height: '100%', + borderRadius: '500px', +}); export const progress = styleVariants({ outer: [ { - width: '90%', + width: '100%', height: '15px', borderRadius: '500px', backgroundColor: `${COLORS.grayscale.Gray2}`, @@ -17,10 +23,76 @@ export const progress = styleVariants({ justifyContent: 'flex-start', }, ], - inner: [ + inner__0: [ + innerBase, + { + width: `0%`, + }, + ], + inner__1: [ + innerBase, + { + width: `9%`, + }, + ], + inner__2: [ + innerBase, + { + width: `18%`, + }, + ], + inner__3: [ + innerBase, + { + width: `27%`, + }, + ], + inner__4: [ + innerBase, + { + width: `36%`, + }, + ], + inner__5: [ + innerBase, + { + width: `45%`, + }, + ], + inner__6: [ + innerBase, + { + width: `54%`, + }, + ], + inner__7: [ + innerBase, + { + width: `63%`, + }, + ], + inner__8: [ + innerBase, + { + width: `72%`, + }, + ], + inner__9: [ + innerBase, + { + width: `81%`, + }, + ], + inner__10: [ + innerBase, + { + width: `90%`, + }, + ], + inner__11: [ + innerBase, { - transition: 'all 0.25s', - backgroundColor: `${COLORS.SSU.SkyBlue}`, + width: `100%`, }, ], }); diff --git a/src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx index 91b5c95..87caaf8 100644 --- a/src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx +++ b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx @@ -1,11 +1,13 @@ +import * as styles from './ProgressBar.css'; + interface Props { curIdx: number; } const ProgressBar = ({ curIdx }: Props) => { return ( -
-
+
+
); }; diff --git a/src/components/community/playground/DevTest/devtest.css.ts b/src/components/community/playground/DevTest/devtest.css.ts index 7754cff..a0bc82b 100644 --- a/src/components/community/playground/DevTest/devtest.css.ts +++ b/src/components/community/playground/DevTest/devtest.css.ts @@ -24,6 +24,9 @@ export const firstPage = style({ [MEDIA_QUERY.pc]: { paddingTop: '120px', }, + [`screen and (min-height: ${BREAKPOINTS[1]}px)`]: { + paddingTop: '120px', + }, }, }); @@ -38,6 +41,7 @@ export const playPage = style({ alignItems: 'center', justifyContent: 'center', gap: '50px', + position: 'relative', }); /** @@ -57,9 +61,17 @@ export const text = styleVariants({ export const decoImg = style({ width: '65%', - height: 'auto', + height: '40%', position: 'absolute', bottom: '0px', left: '50%', transform: 'translateX(-50%)', }); + +export const progress = style({ + width: '90%', + position: 'absolute', + top: '20px', + left: '50%', + transform: 'translate(-50%, 0)', +}); diff --git a/src/resources/devTestQustions.tsx b/src/resources/devTestQustions.tsx index 3350c09..63b0b83 100644 --- a/src/resources/devTestQustions.tsx +++ b/src/resources/devTestQustions.tsx @@ -77,7 +77,7 @@ export const foxDev: DevType = { '무엇을 해야 사람들이 날 좋아하는지 알고있어요.', '머리가 비범한 편이라, 남들보다 적게 공부하고 많이 배워요.', '팀 리더? 귀찮지만 꽤 재밌어요.', - '머릿 속 계산 속도가 슈퍼컴퓨터 급이에요.', + '매력이 흘러 넘쳐요. 주변에는 항상 사람이 바글바글!', '느리고 비효율적인 것들을 싫어해요.', ], }; @@ -132,11 +132,11 @@ export const questions: Array = [ }, { type: [foxDev, vitaminDev, artistDev], - answer: '사람들에게 내가 얼마나 뛰어난 개발자인지 알려줘야겠군.', + answer: '내가 얼마나 뛰어난 개발자인지 알려줘야겠군.', }, { type: [imagineDev, plannerDev, fighterDev], - answer: '일단 들어가서 인사를... 아 괜히 말실수하는거 아냐? 개떨려...', + answer: '일단 들어가서 인사를...\n아 괜히 말실수하는거 아냐? 개떨려...', }, { type: [foxDev, plannerDev, fighterDev], @@ -151,11 +151,11 @@ export const questions: Array = [ { type: [vitaminDev, plannerDev, fighterDev], answer: - '너무 반가워요! 서로 도와주면서 잘 지내봐요!(좋은 사람인 것 같다!)', + '반가워요! 서로 도와주면서 잘 지내봐요!\n(좋은 사람인 것 같다!)', }, { type: [artistDev, plannerDev, foxDev], - answer: '너무 반가워요! 서로 도와주면서 잘 지내봐요^^(말좀 그만 걸어)', + answer: '반가워요! 서로 도와주면서 잘 지내봐요^^\n(말좀 그만 걸어)', }, { type: [artistDev, foxDev, imagineDev], @@ -163,8 +163,7 @@ export const questions: Array = [ }, { type: [vitaminDev, fighterDev, imagineDev], - answer: - '아진짜요?LA갈비를얘기하셔서갑자기생각난건데제가LA에있을때말이죠...', + answer: '아진짜요?\n갑자기생각난건데제가LA에있을때말이죠...', }, ], }, @@ -230,7 +229,7 @@ export const questions: Array = [ }, { type: [vitaminDev, plannerDev, fighterDev], - answer: '동기랑 같이 이야기하면서 해결해봐야지! 카톡을 해봐야겠다.', + answer: '동기랑 같이 이야기하면서 해결해봐야지!\n카톡을 해봐야겠다.', }, ], }, @@ -244,11 +243,11 @@ export const questions: Array = [ }, { type: [vitaminDev, plannerDev, imagineDev], - answer: '선배님, 제 업무가 맞는지 확인좀 부탁드려도 될까요?(제발...)', + answer: '선배님, 제 업무가 맞는지 확인 부탁드려도 될까요?\n(제발...)', }, { type: [artistDev, foxDev, fighterDev], - answer: '선배님, 제 업무가 맞는지 확인좀 부탁드려도 될까요?(장난하냐?)', + answer: '선배님, 제 업무가 맞는지 확인 부탁드려도 될까요?\n(장난하냐?)', }, { type: [foxDev, fighterDev, imagineDev], @@ -258,7 +257,7 @@ export const questions: Array = [ }, { question: - '주변 사람들에게 물어보니, 일단 외우라고 한다.\n관련 자료도 받았는데...', + '주변 사람들에게 물어보니, 일단 외우라고 한다.\n관련 자료도 받긴 받았는데...', select: [ { type: [vitaminDev, fighterDev, imagineDev], @@ -296,7 +295,7 @@ export const questions: Array = [ }, { type: [plannerDev, fighterDev, imagineDev], - answer: '(오만가지 상상 중) 팀플하다 싸우진 않겠지...', + answer: '(오만가지 상상 중)\n팀플하다 싸우진 않겠지...', }, ], }, @@ -334,7 +333,7 @@ export const questions: Array = [ }, { type: [plannerDev, foxDev, imagineDev], - answer: '아이고... 이따 술이나 한잔 할래?', + answer: '이따 술이나 한잔 할래?', }, { type: [vitaminDev, plannerDev, fighterDev], From 9aa66850491d0db99fb3f5b336d63c5bf9dca081 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 19 Feb 2023 14:59:13 +0900 Subject: [PATCH 25/33] feat : add feat caculating test-result --- src/components/community/index.ts | 3 +- .../community/playground/DevTest/PlayPage.tsx | 110 +++++++++++++----- .../playground/DevTest/ResultPage.tsx | 12 ++ src/pages/community/playground/devtest.tsx | 16 ++- src/resources/devTestQustions.tsx | 16 +++ 5 files changed, 125 insertions(+), 32 deletions(-) create mode 100644 src/components/community/playground/DevTest/ResultPage.tsx diff --git a/src/components/community/index.ts b/src/components/community/index.ts index 7bc779a..9946c60 100644 --- a/src/components/community/index.ts +++ b/src/components/community/index.ts @@ -1,4 +1,5 @@ import StartPage from './playground/DevTest/StartPage'; import PlayPage from './playground/DevTest/PlayPage'; +import ResultPage from './playground/DevTest/ResultPage'; -export { StartPage, PlayPage }; +export { StartPage, PlayPage, ResultPage }; diff --git a/src/components/community/playground/DevTest/PlayPage.tsx b/src/components/community/playground/DevTest/PlayPage.tsx index 8cfc923..69ba09c 100644 --- a/src/components/community/playground/DevTest/PlayPage.tsx +++ b/src/components/community/playground/DevTest/PlayPage.tsx @@ -1,49 +1,103 @@ import { questions } from '@/resources/devTestQustions'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Button, TitleBox } from '../common'; import type { StepProps } from './types'; import * as styles from './devtest.css'; import ProgressBar from './ProgressBar/ProgressBar'; +import { DevType, results } from '@/resources/devTestQustions'; -interface Props extends StepProps {} +interface Props extends StepProps { + saveResult?: (res: DevType) => void; +} const PlayPage = (props: Props) => { - const { onEnd } = props; + const { onEnd, saveResult } = props; const [idx, setIdx] = useState(0); const [answers, setAnswers] = useState>( Array(questions.length).fill(0), ); + const [choices, setChoices] = useState>( + questions[0].select[0].type, + ); + const [types, setTypes] = useState>([]); + + const choice = (aIdx: number, devType: Array) => { + setChoices(devType); + setAnswers((prev) => prev.map((p, pi) => (idx === pi ? aIdx : p))); + }; + + const moveToNext = () => { + setTypes((prev) => [...prev, ...choices]); + setIdx((prev) => prev + 1); + }; + + const getMode = () => { + const devTypes = types.map((type) => type.name); + + const counts = { + 0: 0, + 1: 0, + 2: 0, + 3: 0, + 4: 0, + 5: 0, + }; + + const newObject = devTypes.reduce((acc, cur) => { + acc.hasOwnProperty(cur) ? (acc[cur] += 1) : (acc[cur] = 1); + return acc; + }, counts); + + const modeKey: number = Object.keys(newObject) + .map((a) => Number(a)) + .reduce((acc, cur) => (newObject[acc] > newObject[cur] ? acc : cur)); + + saveResult(results[modeKey]); + }; + + useEffect(() => { + if (idx == questions.length) { + getMode(); + onEnd(); + } else { + setChoices(questions[idx].select[0].type); + } + }, [idx]); return (
- - - -
- -
-
- {questions[idx].select.map((s, aIdx) => ( + {questions[idx] ? ( + <> + + + +
+ +
+
+ {questions[idx].select.map((s, aIdx) => ( +
-
); }; diff --git a/src/components/community/playground/DevTest/ResultPage.tsx b/src/components/community/playground/DevTest/ResultPage.tsx new file mode 100644 index 0000000..720155d --- /dev/null +++ b/src/components/community/playground/DevTest/ResultPage.tsx @@ -0,0 +1,12 @@ +import { DevType } from '@/resources/devTestQustions'; +import type { StepProps } from './types'; + +interface Props extends StepProps { + result?: DevType; +} + +const ResultPage = ({ result }: Props) => { + return
; +}; + +export default ResultPage; diff --git a/src/pages/community/playground/devtest.tsx b/src/pages/community/playground/devtest.tsx index af485b9..acb7099 100644 --- a/src/pages/community/playground/devtest.tsx +++ b/src/pages/community/playground/devtest.tsx @@ -1,24 +1,34 @@ -import { PlayPage, StartPage } from '@/components/community/index'; +import { PlayPage, StartPage, ResultPage } from '@/components/community/index'; import { useState } from 'react'; import * as styles from '@/components/community/playground/playground.css'; +import { DevType } from '@/resources/devTestQustions'; -const STAGES = [StartPage, PlayPage] as const; +const STAGES = [StartPage, PlayPage, ResultPage] as const; /** * 개발자 성향테스트 페이지 최상위 Wrapper */ const DevTestPage = () => { const [stage, setStage] = useState(0); + const [result, setResult] = useState(); const CurrentPage = STAGES[stage]; const goToNextStep = () => { setStage((prev) => prev + 1); }; + const saveResult = (res: DevType) => { + setResult(res); + }; + return (
- +
); diff --git a/src/resources/devTestQustions.tsx b/src/resources/devTestQustions.tsx index 63b0b83..2a12d82 100644 --- a/src/resources/devTestQustions.tsx +++ b/src/resources/devTestQustions.tsx @@ -4,7 +4,17 @@ export enum Part { AM = 'AI/ML', } +export enum Dev { + Vitamin, + Artist, + Planner, + Fox, + Fighter, + Imagine, +} + export interface DevType { + name: Dev; title: string; subtitle: string; type: string; @@ -23,6 +33,7 @@ export interface Answer { } export const vitaminDev: DevType = { + name: Dev.Vitamin, title: '놀기 위해 개발하는거 아니겠어?', subtitle: '회식이 제일 좋아! 노는게 제일 좋아!', type: '분위기 메이커 비타민 개발자', @@ -38,6 +49,7 @@ export const vitaminDev: DevType = { }; export const artistDev: DevType = { + name: Dev.Artist, title: '소피, 아름답지 않은면 살아도 산게 아니야.', subtitle: '섬세함과 완벽함은 나의 원동력!', type: '하울 스타일의 예술가 개발자', @@ -53,6 +65,7 @@ export const artistDev: DevType = { }; export const plannerDev: DevType = { + name: Dev.Planner, title: '잠깐, 이건 내 계획에 없었는데...? 죽을게.', subtitle: '뭐든지 철저한 계획은 기본!', type: '인간 플래너 그 자체 개발자', @@ -68,6 +81,7 @@ export const plannerDev: DevType = { }; export const foxDev: DevType = { + name: Dev.Fox, title: '검은 화면에 코드를 적어내려가는 모습.. 멋있지? 반했지?', subtitle: '스타벅스에서 개발하는 모습 보여주면 다 나한테 반하더라...', type: '인간 퐉스 개발자', @@ -83,6 +97,7 @@ export const foxDev: DevType = { }; export const fighterDev: DevType = { + name: Dev.Fighter, title: '잠깐 나 궁금한거 있어, 아 아니 싸우자는거 아니야!', subtitle: '데브톡 얼마나 재밌게요~', type: '인간 100분 토론 개발자', @@ -98,6 +113,7 @@ export const fighterDev: DevType = { }; export const imagineDev: DevType = { + name: Dev.Imagine, title: '(개발자 성향 테스트하다가 갑자기 지구멸망하면 어떡하지...?)', subtitle: '일상에서 상상하는 시간을 빼보라구요?', type: '그럼 하루가 없어지는 개발자', From a0bf7ea078eda88e39ad04fb35b4ef3f7352e039 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 19 Feb 2023 14:59:43 +0900 Subject: [PATCH 26/33] fix : fix init value in Progressbar --- .../community/playground/DevTest/ProgressBar/ProgressBar.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts index 9a5448a..cabdcff 100644 --- a/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts +++ b/src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts @@ -26,7 +26,7 @@ export const progress = styleVariants({ inner__0: [ innerBase, { - width: `0%`, + width: `2%`, }, ], inner__1: [ From d2e4f8a379ed7c4a888f6d7d3ed29e7b2e651212 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 19 Feb 2023 17:36:57 +0900 Subject: [PATCH 27/33] feat : add result resources(svg) --- src/resources/assets/artist.svg | 1 + src/resources/assets/fighter.svg | 1 + src/resources/assets/fox.svg | 1 + src/resources/assets/imagine.svg | 1 + src/resources/assets/planner.svg | 1 + src/resources/assets/vitamin.svg | 1 + 6 files changed, 6 insertions(+) create mode 100644 src/resources/assets/artist.svg create mode 100644 src/resources/assets/fighter.svg create mode 100644 src/resources/assets/fox.svg create mode 100644 src/resources/assets/imagine.svg create mode 100644 src/resources/assets/planner.svg create mode 100644 src/resources/assets/vitamin.svg diff --git a/src/resources/assets/artist.svg b/src/resources/assets/artist.svg new file mode 100644 index 0000000..90d8494 --- /dev/null +++ b/src/resources/assets/artist.svg @@ -0,0 +1 @@ +makeup artist \ No newline at end of file diff --git a/src/resources/assets/fighter.svg b/src/resources/assets/fighter.svg new file mode 100644 index 0000000..8a958d5 --- /dev/null +++ b/src/resources/assets/fighter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/resources/assets/fox.svg b/src/resources/assets/fox.svg new file mode 100644 index 0000000..589e896 --- /dev/null +++ b/src/resources/assets/fox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/resources/assets/imagine.svg b/src/resources/assets/imagine.svg new file mode 100644 index 0000000..0337c0b --- /dev/null +++ b/src/resources/assets/imagine.svg @@ -0,0 +1 @@ +flowers \ No newline at end of file diff --git a/src/resources/assets/planner.svg b/src/resources/assets/planner.svg new file mode 100644 index 0000000..d8133b9 --- /dev/null +++ b/src/resources/assets/planner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/resources/assets/vitamin.svg b/src/resources/assets/vitamin.svg new file mode 100644 index 0000000..bac7124 --- /dev/null +++ b/src/resources/assets/vitamin.svg @@ -0,0 +1 @@ + \ No newline at end of file From 1563edbd6ca907dac8a058605fa3bf0d94c4cb6a Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Sun, 19 Feb 2023 17:37:13 +0900 Subject: [PATCH 28/33] feat : print dev-test result --- .../DevTest/ResultBox/ResultBox.css.ts | 80 +++++++++++++++++++ .../DevTest/ResultBox/ResultBox.tsx | 35 ++++++++ .../playground/DevTest/ResultPage.tsx | 25 +++++- .../playground/DevTest/devtest.css.ts | 50 ++++++++++++ .../playground/common/Button/Button.css.ts | 18 ++++- .../playground/common/Button/Button.tsx | 4 +- src/resources/devTestQustions.tsx | 11 ++- 7 files changed, 219 insertions(+), 4 deletions(-) create mode 100644 src/components/community/playground/DevTest/ResultBox/ResultBox.css.ts create mode 100644 src/components/community/playground/DevTest/ResultBox/ResultBox.tsx diff --git a/src/components/community/playground/DevTest/ResultBox/ResultBox.css.ts b/src/components/community/playground/DevTest/ResultBox/ResultBox.css.ts new file mode 100644 index 0000000..2ed37c7 --- /dev/null +++ b/src/components/community/playground/DevTest/ResultBox/ResultBox.css.ts @@ -0,0 +1,80 @@ +import { style, styleVariants } from '@vanilla-extract/css'; +import { COLORS } from '../../common/colorToken'; +import { bodyText } from '../../common/textToken.css'; +import { titleText } from '../../common/textToken.css'; + +export const resultBox = styleVariants({ + box: [ + { + width: '100%', + backgroundColor: 'white', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + borderRadius: '20px', + padding: '40px 10px', + gap: '40px', + }, + ], + titleBox: [ + { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center', + gap: '3px', + whiteSpace: 'pre-line', + wordBreak: 'keep-all', + }, + ], + title: [ + bodyText.body2R, + { + color: COLORS.grayscale.Gray8, + }, + ], + subtitle: [ + bodyText.body1B, + { + color: COLORS.grayscale.Gray9, + }, + ], + img: [ + { + position: 'relative', + width: '90%', + height: '200px', + }, + ], + list: [ + bodyText.body3, + { + listStyleType: 'none', + margin: '0px', + padding: '0px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center', + whiteSpace: 'pre-line', + wordBreak: 'keep-all', + gap: '8px', + color: COLORS.grayscale.Gray9, + }, + ], + recruiting: [ + { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '8px', + }, + ], + recDetail: [ + { + fontSize: '14px', + textAlign: 'center', + color: COLORS.grayscale.Gray7, + }, + ], +}); diff --git a/src/components/community/playground/DevTest/ResultBox/ResultBox.tsx b/src/components/community/playground/DevTest/ResultBox/ResultBox.tsx new file mode 100644 index 0000000..30daea4 --- /dev/null +++ b/src/components/community/playground/DevTest/ResultBox/ResultBox.tsx @@ -0,0 +1,35 @@ +import { DevType, images } from '@/resources/devTestQustions'; +import * as styles from './ResultBox.css'; +import Image from 'next/image'; +import { Button } from '../../common'; + +interface Props { + result: DevType; +} + +const ResultBox = ({ result }: Props) => { + return ( +
+
+ {result.title} + {result.subtitle} +
+ + {result.type} + +
    + {result.content.map((r) => ( +
  • {r}
    • + ))} +
+
+ + 나와 비슷한 개발자들이 모여있는... + +
+
+ ); +}; + +export default ResultBox; diff --git a/src/components/community/playground/DevTest/ResultPage.tsx b/src/components/community/playground/DevTest/ResultPage.tsx index 720155d..14e01b2 100644 --- a/src/components/community/playground/DevTest/ResultPage.tsx +++ b/src/components/community/playground/DevTest/ResultPage.tsx @@ -1,12 +1,35 @@ import { DevType } from '@/resources/devTestQustions'; import type { StepProps } from './types'; +import * as styles from './devtest.css'; +import ResultBox from './ResultBox/ResultBox'; +import { Button } from '../common'; interface Props extends StepProps { result?: DevType; } const ResultPage = ({ result }: Props) => { - return
; + return ( +
+
+ + 당신의 개발자 유형은, + + {`${result?.type}!`} +
+ +
+
+
+ ); }; export default ResultPage; diff --git a/src/components/community/playground/DevTest/devtest.css.ts b/src/components/community/playground/DevTest/devtest.css.ts index a0bc82b..1fb68b8 100644 --- a/src/components/community/playground/DevTest/devtest.css.ts +++ b/src/components/community/playground/DevTest/devtest.css.ts @@ -1,5 +1,7 @@ import { style, styleVariants } from '@vanilla-extract/css'; import { bodyText } from '../common/textToken.css'; +import { titleText } from '../common/textToken.css'; +import { COLORS } from '../common/colorToken'; const BREAKPOINTS = [500, 800] as const; const MEDIA_QUERY = { @@ -75,3 +77,51 @@ export const progress = style({ left: '50%', transform: 'translate(-50%, 0)', }); + +export const resultPage = styleVariants({ + container: [ + { + padding: '60px 30px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '30px', + }, + ], + btnBox: [ + { + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '10px', + }, + ], +}); + +export const resultTitle = styleVariants({ + box: [ + { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '5px', + whiteSpace: 'pre-line', + textAlign: 'center', + }, + ], + title: [ + titleText.subtitle1, + { + color: COLORS.grayscale.white, + textShadow: '1px 1px 2px #14141460', + }, + ], + subtitle: [ + titleText.subtitle2B, + { + color: COLORS.grayscale.white, + textShadow: '1px 1px 2px #14141460', + }, + ], +}); diff --git a/src/components/community/playground/common/Button/Button.css.ts b/src/components/community/playground/common/Button/Button.css.ts index 55380d9..e002a26 100644 --- a/src/components/community/playground/common/Button/Button.css.ts +++ b/src/components/community/playground/common/Button/Button.css.ts @@ -41,7 +41,23 @@ export const button = styleVariants({ btnText.button4B, { backgroundColor: `white`, - color: `${COLORS.SSU.DeepBlue}`, + color: COLORS.SSU.DeepBlue, + }, + ], + result: [ + btnBase, + btnText.button2B, + { + backgroundColor: COLORS.grayscale.white, + color: COLORS.SSU.DeepBlue, + }, + ], + gradient: [ + btnBase, + btnText.button4B, + { + background: `linear-gradient(135deg, ${COLORS.GDSC.Blue}, ${COLORS.GDSC.Red})`, + color: COLORS.grayscale.white, }, ], }); diff --git a/src/components/community/playground/common/Button/Button.tsx b/src/components/community/playground/common/Button/Button.tsx index a1e7b5a..e4c274e 100644 --- a/src/components/community/playground/common/Button/Button.tsx +++ b/src/components/community/playground/common/Button/Button.tsx @@ -1,11 +1,13 @@ import * as styles from './Button.css'; -const Themes = ['black', 'white', 'blue'] as const; +const Themes = ['black', 'white', 'blue', 'result', 'gradient'] as const; interface Props extends React.ComponentProps<'button'> { /**0번 : 블랙 테마 * 1번 : 화이트 테마 * 2번 : 블루 테마 + * 3번 : 결과 버튼 + * 4번 : 그라디언트 */ selected: number; title: string; diff --git a/src/resources/devTestQustions.tsx b/src/resources/devTestQustions.tsx index 2a12d82..cffd6bc 100644 --- a/src/resources/devTestQustions.tsx +++ b/src/resources/devTestQustions.tsx @@ -1,3 +1,12 @@ +import vitamin from './assets/vitamin.svg'; +import artist from './assets/artist.svg'; +import planner from './assets/planner.svg'; +import fox from './assets/fox.svg'; +import fighter from './assets/fighter.svg'; +import imagine from './assets/imagine.svg'; + +export const images = [vitamin, artist, planner, fox, fighter, imagine]; + export enum Part { WM = 'Web/Mobile', SC = 'Server/Cloud', @@ -41,7 +50,7 @@ export const vitaminDev: DevType = { content: [ '어디서든 인기만점인 당신은 비타민 같아요!', '팀 프로젝트가 너무 좋아요! 항상 설레요!', - '아주 열심히 일하지만, 나에게 1순위늰 언제나 행복이에요.', + '아주 열심히 일하지만, 나에게 1순위는 언제나 행복이에요.', '어둡고 칙칙한 것은 싫어. 생기있는게 좋아요.', '친구가 힘들바엔, 그냥 내가 힘든게 나아요. 버스기사 장인!', '나의 지친 모습은 아무에게도 보여주기 싫어요!', From f3828023a3ae10ba6d2f1177b9fe9a33dc36e68a Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Mon, 20 Feb 2023 23:32:21 +0900 Subject: [PATCH 29/33] fix : fix Result type --- src/components/community/playground/DevTest/PlayPage.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/community/playground/DevTest/PlayPage.tsx b/src/components/community/playground/DevTest/PlayPage.tsx index 69ba09c..8207b6b 100644 --- a/src/components/community/playground/DevTest/PlayPage.tsx +++ b/src/components/community/playground/DevTest/PlayPage.tsx @@ -10,6 +10,10 @@ interface Props extends StepProps { saveResult?: (res: DevType) => void; } +type Count = { + [key: number]: number; +}; + const PlayPage = (props: Props) => { const { onEnd, saveResult } = props; const [idx, setIdx] = useState(0); @@ -34,7 +38,7 @@ const PlayPage = (props: Props) => { const getMode = () => { const devTypes = types.map((type) => type.name); - const counts = { + const counts: Count = { 0: 0, 1: 0, 2: 0, @@ -52,7 +56,7 @@ const PlayPage = (props: Props) => { .map((a) => Number(a)) .reduce((acc, cur) => (newObject[acc] > newObject[cur] ? acc : cur)); - saveResult(results[modeKey]); + saveResult!(results[modeKey]); }; useEffect(() => { From 4d08f4040566bb0acc0c31082505cf5a7d5f2ff7 Mon Sep 17 00:00:00 2001 From: Jun99uu Date: Tue, 28 Feb 2023 18:46:17 +0900 Subject: [PATCH 30/33] feat : add result dom to image function --- package.json | 4 ++ .../DevTest/ResultBox/ResultBox.css.ts | 4 +- .../DevTest/ResultBox/ResultBox.tsx | 12 +++-- .../playground/DevTest/ResultPage.tsx | 46 +++++++++++++++---- .../playground/DevTest/devtest.css.ts | 34 +++++++++++++- src/resources/assets/logo.svg | 9 ++++ src/resources/devTestQustions.tsx | 2 +- yarn.lock | 22 +++++++++ 8 files changed, 116 insertions(+), 17 deletions(-) create mode 100644 src/resources/assets/logo.svg diff --git a/package.json b/package.json index 697af25..7820a6a 100644 --- a/package.json +++ b/package.json @@ -20,12 +20,16 @@ "dependencies": { "@prisma/client": "4.9.0", "@tanstack/react-query": "4.16.1", + "@types/dom-to-image": "^2.6.4", + "@types/file-saver": "^2.0.5", "@types/node": "18.11.9", "@types/react": "18.0.25", "@types/react-dom": "18.0.9", "@vanilla-extract/css": "1.9.2", + "dom-to-image": "^2.6.0", "eslint": "8.28.0", "eslint-config-next": "13.1.6", + "file-saver": "^2.0.5", "framer-motion": "7.6.7", "jotai": "1.10.0", "next": "13.1.6", diff --git a/src/components/community/playground/DevTest/ResultBox/ResultBox.css.ts b/src/components/community/playground/DevTest/ResultBox/ResultBox.css.ts index 2ed37c7..0bd14f9 100644 --- a/src/components/community/playground/DevTest/ResultBox/ResultBox.css.ts +++ b/src/components/community/playground/DevTest/ResultBox/ResultBox.css.ts @@ -62,12 +62,12 @@ export const resultBox = styleVariants({ color: COLORS.grayscale.Gray9, }, ], - recruiting: [ + logo: [ { display: 'flex', flexDirection: 'column', alignItems: 'center', - gap: '8px', + gap: '4px', }, ], recDetail: [ diff --git a/src/components/community/playground/DevTest/ResultBox/ResultBox.tsx b/src/components/community/playground/DevTest/ResultBox/ResultBox.tsx index 30daea4..2d9f202 100644 --- a/src/components/community/playground/DevTest/ResultBox/ResultBox.tsx +++ b/src/components/community/playground/DevTest/ResultBox/ResultBox.tsx @@ -2,6 +2,7 @@ import { DevType, images } from '@/resources/devTestQustions'; import * as styles from './ResultBox.css'; import Image from 'next/image'; import { Button } from '../../common'; +import Logo from '@/resources/assets/logo.svg'; interface Props { result: DevType; @@ -22,12 +23,17 @@ const ResultBox = ({ result }: Props) => {
  • {r}
    • ))} -
    +
    + logo - 나와 비슷한 개발자들이 모여있는... + GDSC Soongsil Univ. -
    + + {/* + 나와 비슷한 개발자들이 모여있는... + +
    ); }; diff --git a/src/components/community/playground/DevTest/ResultPage.tsx b/src/components/community/playground/DevTest/ResultPage.tsx index 14e01b2..afa43ae 100644 --- a/src/components/community/playground/DevTest/ResultPage.tsx +++ b/src/components/community/playground/DevTest/ResultPage.tsx @@ -3,25 +3,51 @@ import type { StepProps } from './types'; import * as styles from './devtest.css'; import ResultBox from './ResultBox/ResultBox'; import { Button } from '../common'; +import domtoimage from 'dom-to-image'; +import { saveAs } from 'file-saver'; +import { useRef } from 'react'; interface Props extends StepProps { result?: DevType; } const ResultPage = ({ result }: Props) => { + const cardRef = useRef(null); + + const onDownloadBtn = () => { + const card = cardRef.current; + if (card) { + domtoimage.toBlob(card).then((blob) => { + saveAs(blob, 'card.png'); + }); + } + }; + return ( -
    -
    - - 당신의 개발자 유형은, - - {`${result?.type}!`} +
    +
    +
    + + 당신의 개발자 유형은, + + {`${result?.type}!`} +
    +
    -
    -
    +