feat: add dev-test draft

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);

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",

src/components/community/index.ts

@@ -0,0 +1,5 @@
+import StartPage from './playground/DevTest/StartPage';
+import PlayPage from './playground/DevTest/PlayPage';
+import ResultPage from './playground/DevTest/ResultPage';
+
+export { StartPage, PlayPage, ResultPage };

src/components/community/playground/DevTest/PlayPage.tsx

@@ -0,0 +1,109 @@
+import { questions } from '@/resources/devTestQustions';
+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 {
+  saveResult?: (res: DevType) => void;
+}
+
+type Count = {
+  [key: number]: number;
+};
+
+const PlayPage = (props: Props) => {
+  const { onEnd, saveResult } = props;
+  const [idx, setIdx] = useState(0);
+  const [answers, setAnswers] = useState<Array<number>>(
+    Array(questions.length).fill(0),
+  );
+  const [choices, setChoices] = useState<Array<DevType>>(
+    questions[0].select[0].type,
+  );
+  const [types, setTypes] = useState<Array<DevType>>([]);
+
+  const choice = (aIdx: number, devType: Array<DevType>) => {
+    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: Count = {
+      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 (
+    <div className={styles.playPage}>
+      {questions[idx] ? (
+        <>
+          <span className={styles.progress}>
+            <ProgressBar curIdx={idx} />
+          </span>
+          <div className={styles.questionArea}>
+            <TitleBox
+              title={`Q${idx + 1}`}
+              subtitle={questions[idx].question}
+            />
+          </div>
+          <div className={styles.questionArea}>
+            {questions[idx].select.map((s, aIdx) => (
+              <Button
+                selected={answers[idx] === aIdx ? 0 : 1}
+                title={s.answer}
+                onClick={() => choice(aIdx, s.type)}
+                key={s.answer}
+              />
+            ))}
+          </div>
+          <Button
+            selected={2}
+            title={
+              idx !== questions.length - 1 ? '다음 질문으로!' : '결과 확인하기!'
+            }
+            onClick={moveToNext}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+
+export default PlayPage;

src/components/community/playground/DevTest/ProgressBar/ProgressBar.css.ts

@@ -0,0 +1,98 @@
+import { styleVariants, style } from '@vanilla-extract/css';
+import { COLORS } from '../../common/colorToken';
+
+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: '100%',
+      height: '15px',
+      borderRadius: '500px',
+      backgroundColor: `${COLORS.grayscale.Gray2}`,
+      overflow: 'hidden',
+      padding: '2px',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+    },
+  ],
+  inner__0: [
+    innerBase,
+    {
+      width: `2%`,
+    },
+  ],
+  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,
+    {
+      width: `100%`,
+    },
+  ],
+});

src/components/community/playground/DevTest/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,15 @@
+import * as styles from './ProgressBar.css';
+
+interface Props {
+  curIdx: number;
+}
+
+const ProgressBar = ({ curIdx }: Props) => {
+  return (
+    <div className={styles.progress['outer']}>
+      <div className={styles.progress[`inner__${curIdx}`]} />
+    </div>
+  );
+};
+
+export default ProgressBar;

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,
+    },
+  ],
+  logo: [
+    {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: '4px',
+    },
+  ],
+  recDetail: [
+    {
+      fontSize: '14px',
+      textAlign: 'center',
+      color: COLORS.grayscale.Gray7,
+    },
+  ],
+});

src/components/community/playground/DevTest/ResultBox/ResultBox.tsx

@@ -0,0 +1,43 @@
+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;
+}
+
+const ResultBox = ({ result }: Props) => {
+  return (
+    <div className={styles.resultBox['box']}>
+      <div className={styles.resultBox['titleBox']}>
+        <span className={styles.resultBox['title']}>{result.title}</span>
+        <span className={styles.resultBox['subtitle']}>{result.subtitle}</span>
+      </div>
+      <span className={styles.resultBox['img']}>
+        <Image src={images[result.name]} alt={result.type} fill />
+      </span>
+      <ul className={styles.resultBox['list']}>
+        {result.content.map((r) => (
+          <li className={r} key={r}>
+            {r}
+          </li>
+        ))}
+      </ul>
+      <div className={styles.resultBox['logo']}>
+        <Image src={Logo} width={50} height={34.25} alt="logo" />
+        <span className={styles.resultBox['recDetail']}>
+          GDSC Soongsil Univ.
+        </span>
+      </div>
+
+      {/* <span className={styles.resultBox['recDetail']}>
+        나와 비슷한 개발자들이 모여있는...
+      </span>
+      <Button selected={4} title={`GDSC ${result?.part} 지원하기`} /> */}
+    </div>
+  );
+};
+
+export default ResultBox;