style(web): 설문 작성 페이지 ui작업

apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.css.ts

@@ -0,0 +1,48 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const cardWrapper = style({
+  padding: '24px',
+  paddingTop: '22px',
+});
+
+// SurveyItem
+export const itemTitle = style({
+  display: 'flex',
+  gap: '0.25em',
+});
+
+export const asterisk = style({
+  color: vars.color.red500,
+});
+
+//radioOptions
+export const optionContainer = style({
+  width: '100%',
+  minHeight: '24px',
+  padding: '0.5em 0.5em 0.5em 0',
+});
+export const optionWrapper = style({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.75em',
+});
+
+// selectOptions
+export const selectBox = style({
+  position: 'relative',
+  width: '150px',
+  height: '45px',
+  borderRadius: '4px',
+  border: `1px solid ${vars.color.grayScale100}`,
+});
+
+export const select = style({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'transparent',
+  border: 0,
+  outline: 0,
+  padding: '6px',
+});

apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.tsx

@@ -0,0 +1,78 @@
+import { Options } from '../../hooks/useSurvey';
+import { Block, Card, Checkbox, Radio } from '@ssoon-servey/shared-ui';
+import * as $ from './SurveyItem.css';
+
+const SurveyItem = ({
+  title,
+  type,
+  options,
+  isRequired,
+}: {
+  title: string;
+  type: 'radio' | 'select' | 'checkbox';
+  options: Options[];
+  isRequired: boolean;
+}) => {
+  return (
+    <Card>
+      <div className={$.cardWrapper}>
+        <div className={$.itemTitle}>
+          <span>{title}</span>
+          {isRequired && <span className={$.asterisk}>*</span>}
+        </div>
+        <Block height={15} />
+        <div>
+          {type === 'radio' && <RadioOptions options={options} />}
+          {type === 'checkbox' && <CheckboxOptions options={options} />}
+          {type === 'select' && <SelectOptions options={options} />}
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default SurveyItem;
+
+const RadioOptions = ({ options }: { options: Options[] }) => {
+  return (
+    <>
+      {options.map((option) => (
+        <div key={option.item_id} className={$.optionContainer}>
+          <label className={$.optionWrapper}>
+            <Radio value={option.option_text} name={option.option_text} />
+            <span>{option.option_text}</span>
+          </label>
+        </div>
+      ))}
+    </>
+  );
+};
+
+const CheckboxOptions = ({ options }: { options: Options[] }) => {
+  return (
+    <>
+      {options.map((option) => (
+        <div key={option.item_id} className={$.optionContainer}>
+          <label className={$.optionWrapper}>
+            <Checkbox value={option.option_text} name={option.option_text} />
+            <span>{option.option_text}</span>
+          </label>
+        </div>
+      ))}
+    </>
+  );
+};
+
+const SelectOptions = ({ options }: { options: Options[] }) => {
+  return (
+    <div className={$.selectBox}>
+      <select className={$.select}>
+        {options.map((option) => (
+          <option key={option.id} value={option.option_text} selected={false}>
+            {option.option_text}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};

apps/survey-web/src/app/survey/components/SurveyItem/index.tsx

@@ -0,0 +1 @@
+export { default } from './SurveyItem';

apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.css.ts

@@ -0,0 +1,50 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const surveyNavContainer = style({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+});
+
+export const nextButton = style({
+  marginRight: '14px',
+  boxShadow:
+    '0 2px 1px -1px rgba(0, 0, 0, 0.2),0 1px 1px 0 rgba(0, 0, 0, 0.141), 0 1px 3px 0 rgba(0, 0, 0, 0.122)',
+  backgroundColor: vars.color.grayScale00,
+  fontSize: '14px',
+  borderRadius: '4px',
+  lineHeight: '36px',
+  padding: '0 24px',
+  color: vars.color.primary500,
+  ':hover': {
+    backgroundColor: '#f9f7fc',
+  },
+});
+
+export const backButton = style([nextButton]);
+
+export const submitButton = style({
+  fontSize: '14px',
+  borderRadius: '4px',
+  backgroundColor: vars.color.primary500,
+  color: vars.color.grayScale00,
+  lineHeight: '36px',
+  padding: '0 24px',
+  ':hover': {
+    backgroundColor: '#7654b4',
+    boxShadow:
+      '0px 2px 1px -1px rgba(103, 58, 183, 0.2),0px 1px 1px 0px rgba(103, 58, 183, 0.14),0px 1px 3px 0px rgba(103, 58, 183, 0.12)',
+  },
+});
+
+export const resetButton = style({
+  padding: '0px 8px',
+  fontSize: '14px',
+  borderRadius: '4px',
+  lineHeight: '36px',
+  color: vars.color.primary500,
+  ':hover': {
+    backgroundColor: vars.color.primary200,
+  },
+});

apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.tsx

@@ -0,0 +1,42 @@
+import * as $ from './SurveyNav.css';
+
+const SectionNav = ({
+  isPrevious,
+  isNext,
+  goNext,
+  goBack,
+  onSubmit,
+}: {
+  isPrevious: boolean;
+  isNext: boolean;
+  goNext: () => void;
+  goBack: () => void;
+  onSubmit: () => void;
+}) => {
+  return (
+    <div className={$.surveyNavContainer}>
+      <div>
+        {isPrevious && (
+          <button className={$.backButton} onClick={goBack}>
+            뒤로
+          </button>
+        )}
+        {isNext && (
+          <button className={$.nextButton} onClick={goNext}>
+            다음
+          </button>
+        )}
+        {!isNext && (
+          <button className={$.submitButton} onClick={onSubmit}>
+            제출
+          </button>
+        )}
+      </div>
+      <div>
+        <button className={$.resetButton}>양식 지우기</button>
+      </div>
+    </div>
+  );
+};
+
+export default SectionNav;

apps/survey-web/src/app/survey/components/SurveyNav/index.ts

@@ -0,0 +1 @@
+export { default } from './SurveyNav';

apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.css.ts

@@ -0,0 +1,31 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const borderTop = style({
+  backgroundColor: vars.color.primary500,
+  borderTopLeftRadius: '8px',
+  borderTopRightRadius: '8px',
+  height: '10px',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+});
+
+export const surveyTitle = style({
+  fontSize: '24pt',
+  fontWeight: 400,
+  paddingBottom: '12px',
+});
+
+export const cardWrapper = style({
+  padding: '24px',
+  paddingTop: '22px',
+});
+
+export const emphasize = style({
+  fontSize: '14px',
+  fontWeight: 400,
+  marginTop: '14px',
+  color: vars.color.red500,
+});

apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.tsx

@@ -0,0 +1,16 @@
+import { Card } from '@ssoon-servey/shared-ui';
+import * as $ from './SurveyTitle.css';
+
+const SurveyTitle = ({ title }: { title: string }) => {
+  return (
+    <Card>
+      <div className={$.borderTop} />
+      <div className={$.cardWrapper}>
+        <h2 className={$.surveyTitle}>{title}</h2>
+        <div className={$.emphasize}>* 표시는 필수 질문임</div>
+      </div>
+    </Card>
+  );
+};
+
+export default SurveyTitle;

apps/survey-web/src/app/survey/components/SurveyTitle/index.tsx

@@ -0,0 +1 @@
+export { default } from './SurveyTitle';

apps/survey-web/src/app/survey/hooks/useSurvey.ts

@@ -4,18 +4,18 @@ import {
 } from '@ssoon-servey/supabase';
 import { useEffect, useState } from 'react';
 
-type Options = {
+export type Options = {
   id: number;
   option_text: string;
   item_id: number | null;
 };
 
-type SurveyItems = {
+export type SurveyItems = {
   id: number;
   options: Options[];
   question_required: boolean;
   question_title: string;
-  question_type: string;
+  question_type: 'radio' | 'select' | 'checkbox';
   section_id: number | null;
 };
 
@@ -76,7 +76,15 @@ const getSurvey = async (supabase: SupabaseContextValue['supabase']) => {
       ...section,
       isNext: i !== sections.length - 1,
       isPrevious: i !== 0,
-      items: items
+      items: (
+        items as {
+          id: number;
+          question_required: boolean;
+          question_title: string;
+          question_type: 'radio' | 'select' | 'checkbox';
+          section_id: number | null;
+        }[]
+      )
         .filter((item) => item.section_id === section.id)
         .map((items) => ({
           ...items,

apps/survey-web/src/app/survey/page.css.ts

@@ -1,4 +1,3 @@
-import { vars } from '@ssoon-servey/shared-ui';
 import { style } from '@vanilla-extract/css';
 
 export const cardContainer = style({
@@ -7,17 +6,6 @@ export const cardContainer = style({
   gap: '10px',
 });
 
-export const borderTop = style({
-  backgroundColor: vars.color.primary500,
-  borderTopLeftRadius: '8px',
-  borderTopRightRadius: '8px',
-  height: '10px',
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-});
-
 export const cardWrapper = style({
   padding: '24px',
   paddingTop: '22px',