Merge pull request #62 from SOPT-36-NINEDOT/feat/#60/survey

[Feat]: Survey 컴포넌트 제작

Author: kwonsaebom

public/svg/ic_radio_checked.svg

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const SvgIcRadioChecked = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <rect width={18.5} height={18.5} x={0.75} y={0.75} fill="#282C33" rx={9.25} />
+    <rect
+      width={18.5}
+      height={18.5}
+      x={0.75}
+      y={0.75}
+      stroke="#3E72F3"
+      strokeWidth={1.5}
+      rx={9.25}
+    />
+    <circle cx={10} cy={10} r={4} fill="#3E72F3" />
+  </svg>
+);
+export default SvgIcRadioChecked;

public/svg/ic_radio_default.svg

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+const SvgIcRadioDefault = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <circle cx={10} cy={10} r={10} fill="#282C33" />
+  </svg>
+);
+export default SvgIcRadioDefault;

src/assets/svg/IcRadioChecked.tsx

@@ -5,6 +5,8 @@ export { default as IcCheckboxChecked } from './IcCheckboxChecked';
 export { default as IcCheckboxDefault } from './IcCheckboxDefault';
 export { default as IcDropdown } from './IcDropdown';
 export { default as IcModalDelete } from './IcModalDelete';
+export { default as IcRadioChecked } from './IcRadioChecked';
+export { default as IcRadioDefault } from './IcRadioDefault';
 export { default as IcTooltipDelete } from './IcTooltipDelete';
 export { default as IcTriangle } from './IcTriangle';
 export { default as Vite } from './Vite';

src/assets/svg/IcRadioDefault.tsx

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors, fonts } from '@/style/token';
+
+export const surveyWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '5.4rem',
+});
+
+export const surveyContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.6rem',
+});
+
+export const surveyTitle = style({
+  marginBottom: '0.8rem',
+  color: colors.grey11,
+  ...fonts.body01,
+});

src/assets/svg/index.ts

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import {
+  surveyWrapper,
+  surveyContainer,
+  surveyTitle,
+} from '@/page/signup/component/Survey/Survey.css';
+import SurveyItem from '@/page/signup/component/SurveyItem/SurveyItem';
+import { questionList } from '@/page/signup/component/Survey/data';
+
+export const Survey = () => {
+  const [answers, setAnswers] = useState<Record<number, number>>({});
+
+  const handleSelect = (questionId: number, optionId: number) => {
+    setAnswers((prev) => ({
+      ...prev,
+      [questionId]: optionId,
+    }));
+  };
+
+  return (
+    <div className={surveyWrapper}>
+      {questionList.map((question) => (
+        <div key={question.id} className={surveyContainer}>
+          <h3 className={surveyTitle}>{question.content}</h3>
+          {question.optionList.map((option) => (
+            <SurveyItem
+              key={option.id}
+              item={option}
+              isChecked={answers[question.id] === option.id}
+              onClick={() => handleSelect(question.id, option.id)}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

src/page/signup/component/Survey/Survey.css.ts

@@ -0,0 +1,38 @@
+import type { QuestionType } from '@/page/signup/component/type/questionType';
+
+export const questionList: QuestionType[] = [
+  {
+    id: 1,
+    type: '객관식',
+    content: '어떤 방식으로 목표를 실천하는 것을 선호하시나요?',
+    optionList: [
+      { id: 1, content: '구체적인 실행 계획이 필요해요' },
+      { id: 2, content: '감성적 동기부여가 중요해요' },
+      { id: 3, content: '간단한 할 일을 쌓아가는 게 좋아요' },
+      { id: 4, content: '일정 기반으로 진행하는 걸 좋아해요' },
+      { id: 5, content: '해당하는 게 없어요' },
+    ],
+  },
+  {
+    id: 2,
+    type: '객관식',
+    content: '혼자 할 때와 함께할 때, 어떤 게 더 동기부여가 되나요?',
+    optionList: [
+      { id: 1, content: '혼자 조용히 하는 게 편해요' },
+      { id: 2, content: '누군가와 함께 하면 더 힘이 나요' },
+      { id: 3, content: '둘 다 비슷해요' },
+    ],
+  },
+  {
+    id: 3,
+    type: '객관식',
+    content: '당신이 목표를 이루는 데 어려움을 겪는 가장 큰 이유는 무엇인가요?',
+    optionList: [
+      { id: 1, content: '의지는 있지만 자꾸 미뤄요' },
+      { id: 2, content: '중간에 동기 부여가 떨어져요' },
+      { id: 3, content: '외부 자극이 없으면 움직이지 않아요' },
+      { id: 4, content: '시간 관리가 잘 안 돼요' },
+      { id: 5, content: '해당하는 게 없어요' },
+    ],
+  },
+];

src/page/signup/component/Survey/Survey.tsx

@@ -0,0 +1,20 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors, fonts } from '@/style/token';
+
+export const itemContainer = style({
+  display: 'flex',
+  gap: '1.2rem',
+});
+
+export const itemText = style({
+  color: colors.grey11,
+  ...fonts.body03,
+});
+
+export const radioIcon = style({
+  width: '2rem',
+  height: '2rem',
+
+  cursor: 'pointer',
+});

src/page/signup/component/Survey/data.ts

@@ -0,0 +1,28 @@
+import {
+  itemContainer,
+  itemText,
+  radioIcon,
+} from '@/page/signup/component/SurveyItem/SurveyItem.css';
+import { IcRadioDefault, IcRadioChecked } from '@/assets/svg';
+import type { OptionType } from '@/page/signup/component/type/optionType';
+
+type itemProps = {
+  item: OptionType;
+  isChecked: boolean;
+  onClick: () => void;
+};
+
+const SurveyItem = ({ item, isChecked, onClick }: itemProps) => {
+  const RadioIcon = isChecked ? IcRadioChecked : IcRadioDefault;
+
+  return (
+    <div className={itemContainer}>
+      <button onClick={onClick}>
+        <RadioIcon className={radioIcon} />
+      </button>
+      <span className={itemText}>{item.content}</span>
+    </div>
+  );
+};
+
+export default SurveyItem;