feat: add dev-test draft

src/components/comuunity/index.ts

@@ -0,0 +1,3 @@
+import DevTestPage from './playground/DevTest';
+
+export { DevTestPage };

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<SetStateAction<number>>;
+}
+
+const PlayPage = (props: Props) => {
+  const [idx, setIdx] = useState(0);
+  const [answers, setAnswers] = useState<Array<number>>(
+    Array(questions.length).fill(0),
+  );
+
+  return (
+    <div className="devtest__play-page">
+      <div className="devtest__play-page--question">
+        <TitleBox title={`Q${idx + 1}`} subtitle={questions[idx].question} />
+      </div>
+      <div className="devtest__play-page--select">
+        {questions[idx].select.map((s, aIdx) => (
+          <Button
+            backgroundColor={
+              answers[idx] === aIdx
+                ? COLORS.grayscale.Black
+                : COLORS.grayscale.white
+            }
+            color={
+              answers[idx] === aIdx
+                ? COLORS.grayscale.white
+                : COLORS.grayscale.Black
+            }
+            title={s}
+            onClickHandler={() =>
+              setAnswers((prev) => prev.map((p, pi) => (idx === pi ? aIdx : p)))
+            }
+            key={s}
+          />
+        ))}
+      </div>
+      <Button
+        backgroundColor="white"
+        color={COLORS.SSU.DeepBlue}
+        title="다음 질문으로!"
+        onClickHandler={
+          () =>
+            idx !== questions.length - 1 //마지막 질문이 아니라면
+              ? setIdx((prev) => prev + 1) //다음 질문으로
+              : props.setStage((prev) => prev + 1) //마지막 질문이라면 -> 다음 스테이지로
+        }
+      />
+      <style jsx>{`
+        .devtest__play-page {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 50px;
+        }
+        .devtest__play-page--question,
+        .devtest__play-page--select {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 15px;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default PlayPage;

src/components/comuunity/playground/DevTest/StartPage.tsx

@@ -0,0 +1,76 @@
+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<SetStateAction<number>>;
+}
+
+/**
+ * 시작하기 버튼이 있는 테스트 시작 페이지
+ */
+const StartPage = (props: Props) => {
+  return (
+    <div className="devtest__first-page">
+      <TitleBox
+        title="개발자 성향테스트"
+        subtitle="과연 나는 어떤 개발자일까? "
+      />
+      <VisitorBox today={10} sum={100} />
+      <StartButton
+        color={COLORS.SSU.DeepBlue}
+        title="시작하기"
+        onClickHandler={() => props.setStage((prev) => prev + 1)}
+      />
+      <span>GDSC Soongsil Univ.</span>
+      <img src={devTestLogo} alt="devtest-logo" />
+      <style jsx>{`
+        .devtest__first-page {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 30px;
+          padding-top: 80px;
+        }
+        span {
+          color: white;
+          font-size: ${TEXT_STYLE_BODY_PC.body2B.fontSize};
+          font-weight: ${TEXT_STYLE_BODY_PC.body2B.fontWeight};
+        }
+        img {
+          width: 65%;
+          height: auto;
+          position: absolute;
+          bottom: 0px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        @media screen and (max-width: 500px) {
+          span {
+            color: white;
+            font-size: ${TEXT_STYLE_BODY_MOBILE.body2B.fontSize};
+            font-weight: ${TEXT_STYLE_BODY_MOBILE.body2B.fontWeight};
+          }
+        }
+
+        @media screen and (min-height: 800px) {
+          .devtest__first-page {
+            padding-top: 120px;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default StartPage;

src/components/comuunity/playground/DevTest/index.tsx

@@ -0,0 +1,35 @@
+import Wrapper from '../Wrapper';
+import StartPage from './StartPage';
+import PlayPage from './PlayPage';
+import { useState } from 'react';
+
+/**
+ * 개발자 성향테스트 페이지 최상위 Wrapper
+ */
+const DevTestPage = () => {
+  const [stage, setStage] = useState(0);
+
+  return (
+    <div className="devtest__page">
+      <Wrapper topColor="#00A4CA" bottomColor="#58C4C4">
+        {stage === 0 ? (
+          <StartPage setStage={setStage} />
+        ) : (
+          <PlayPage setStage={setStage} />
+        )}
+      </Wrapper>
+      <style jsx>{`
+        .devtest__page {
+          padding: 0;
+          margin: 0;
+          background-color: black;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default DevTestPage;

src/components/comuunity/playground/Wrapper.tsx

@@ -0,0 +1,46 @@
+interface Props {
+  children: React.ReactNode;
+  topColor: string;
+  bottomColor: string;
+}
+
+/**
+ * 모바일 중심형 페이지 Wrapper Component
+ * @param topColor 왼쪽 상단 색상 헥사코드(eg. #00A4CA)
+ * @param bottomColor 우측 하단 색상 헥사코드
+ */
+const Wrapper = (props: Props) => {
+  return (
+    <div className="container">
+      {props.children}
+      <style jsx>{`
+        .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) {
+          .container {
+            min-width: 500px;
+          }
+        }
+
+        @media screen and (max-width: 500px) {
+          .container {
+            width: 100vw;
+            height: calc(var(--var, 1vh) * 100);
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default Wrapper;

src/components/comuunity/playground/common/Button/Button.tsx

@@ -0,0 +1,54 @@
+import { TEXT_STYLE_BUTTON_PC, TEXT_STYLE_BUTTON_MOBILE } from '../token';
+
+interface Props {
+  backgroundColor: string;
+  color: string;
+  title: string;
+  onClickHandler: () => void;
+}
+/**
+ * 테스트 중 사용될 일반 버튼
+ * @param backgroundColor 배경색
+ * @param color 글자색
+ * @param title 버튼 텍스트
+ * @param onClickHandler 클릭 이벤트핸들러
+ */
+const Button = (props: Props) => {
+  return (
+    <button onClick={props.onClickHandler}>
+      {props.title}
+      <style jsx>{`
+        button {
+          border: none;
+          background-color: ${props.backgroundColor};
+          width: 90%;
+          min-width: 270px;
+          min-height: 50px;
+          border-radius: 500px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 50px;
+
+          font-size: ${TEXT_STYLE_BUTTON_PC.button4B.fontSize}px;
+          font-weight: ${TEXT_STYLE_BUTTON_PC.button4B.fontWeight};
+          font-family: 'SUIT Variable', sans-serif;
+          white-space: pre-line;
+          word-break: keep-all;
+          text-align: center;
+          color: ${props.color};
+        }
+
+        @media screen and (max-width: 500px) {
+          button {
+            font-size: ${TEXT_STYLE_BUTTON_MOBILE.button4B.fontSize}px;
+            font-weight: ${TEXT_STYLE_BUTTON_MOBILE.button4B.fontWeight};
+          }
+        }
+      `}</style>
+    </button>
+  );
+};
+
+export default Button;

src/components/comuunity/playground/common/StartButton/StartButton.tsx

@@ -0,0 +1,53 @@
+import { TEXT_STYLE_BUTTON_PC, TEXT_STYLE_BUTTON_MOBILE } from '../token';
+
+interface Props {
+  color: string; //글자색
+  title: string; //버튼 텍스트
+  onClickHandler: () => void;
+}
+
+/**
+ * 플레이그라운드에서 사용하는 시작버튼
+ * @param color 글자색
+ * @param title 버튼 텍스트
+ * @param onClickHandler 클릭 이벤트핸들러
+ */
+const StartButton = (props: Props) => {
+  return (
+    <button onClick={props.onClickHandler}>
+      {props.title}
+      <style jsx>{`
+        button {
+          border: none;
+          background-color: white;
+          width: 65%;
+          min-width: 220px;
+          height: 55px;
+          border-radius: 20px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 50px;
+
+          font-size: ${TEXT_STYLE_BUTTON_PC.button1B.fontSize}px;
+          font-weight: 800;
+          font-family: 'SUIT Variable', sans-serif;
+          white-space: pre-line;
+          word-break: keep-all;
+          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;
+          }
+        }
+      `}</style>
+    </button>
+  );
+};
+
+export default StartButton;