feature(web): 설문 작성 api 연동

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

@@ -1,22 +1,17 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Route, Routes, Link } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { container } from './app.css';
 import SurveyPage from './survey/page';
+import HomePage from './home/page';
+import CompletePage from './complete/page';
 
 export function App() {
   return (
     <div className={container}>
       <Routes>
-        <Route
-          path="/"
-          element={
-            <div>
-              This is the generated root route.{' '}
-              <Link to="/survey/1">Click here for page survey.</Link>
-            </div>
-          }
-        />
+        <Route path="/" element={<HomePage />} />
         <Route path="/survey/:id" element={<SurveyPage />} />
+        <Route path="/complete/:id" element={<CompletePage />} />
       </Routes>
       {/* END: routes */}
     </div>

apps/survey-web/src/app/complete/page.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,
+  color: vars.color.red500,
+  marginBottom: '8px',
+});

apps/survey-web/src/app/complete/page.tsx

@@ -0,0 +1,37 @@
+import { Card } from '@ssoon-servey/shared-ui';
+import * as $ from './page.css';
+import usePageValue from '../survey/hooks/usePageValue';
+import {
+  useGetSurvey,
+  useGetSurveyAnswer,
+} from '../survey/hooks/api/useSurvey';
+import { Link } from 'react-router-dom';
+
+const CompletePage = () => {
+  const { surveyId } = usePageValue();
+  const { data, isError, isLoading } = useGetSurvey(surveyId);
+  const { data: answers } = useGetSurveyAnswer();
+  if (isError) {
+    return <div>error</div>;
+  }
+  if (isLoading) {
+    return <div>loading...</div>;
+  }
+  return (
+    <Card>
+      <div className={$.borderTop} />
+      <div className={$.cardWrapper}>
+        <h2 className={$.surveyTitle}>{data.title}</h2>
+        <div className={$.emphasize}>응답이 기록되었습니다.</div>
+        <p>
+          {JSON.stringify(
+            answers?.map((answer) => ({ [answer.item_title]: answer.value }))
+          )}
+        </p>
+        <Link to={`/survey/${surveyId}`}>처음으로</Link>
+      </div>
+    </Card>
+  );
+};
+
+export default CompletePage;

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

@@ -0,0 +1,12 @@
+import { style } from '@vanilla-extract/css';
+
+export const cardContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '10px',
+});
+
+export const cardWrapper = style({
+  padding: '24px',
+  paddingTop: '22px',
+});

apps/survey-web/src/app/home/page.tsx

@@ -0,0 +1,25 @@
+import { Card } from '@ssoon-servey/shared-ui';
+import { useGetSurveyList } from '../survey/hooks/api/useSurvey';
+import * as $ from './page.css';
+import { Link } from 'react-router-dom';
+
+const HomePage = () => {
+  const { data: surveyList, isError, isLoading } = useGetSurveyList();
+  if (isError) return <div>error</div>;
+  if (isLoading) return <div>loading...</div>;
+  return (
+    <div>
+      {surveyList.map((survey, i) => (
+        <Card>
+          <Link to={`survey/${survey.id}`}>
+            <div
+              className={$.cardWrapper}
+            >{`설문 제목 :  ${survey.title}`}</div>
+          </Link>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+export default HomePage;

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

@@ -0,0 +1,110 @@
+import { useNavigate } from 'react-router-dom';
+import * as $ from './SurveyBottomNav.css';
+import usePageValue from '../../hooks/usePageValue';
+import {
+  SurveyForm,
+  useSurveyFormContext,
+} from '../../hooks/useSurveyFormContext';
+import { validate } from '../../utils/validate';
+import { useDeleteSurveyAnswer } from '../../hooks/api/useSurvey';
+
+const sectionFormErrorCheck = (surveyFormValue: SurveyForm) => {
+  let errorCount = 0;
+  const form: SurveyForm = {};
+  for (const itemId in surveyFormValue) {
+    const surveyForm = surveyFormValue[itemId];
+    if (surveyForm.required) {
+      const isError = validate(surveyForm.type, surveyForm.value);
+      if (isError) errorCount += 1;
+      form[itemId] = {
+        ...surveyFormValue[itemId],
+        error: isError,
+      };
+    }
+  }
+  return { form, errorCount };
+};
+
+interface SectionBottomNav {
+  isPrevious?: boolean;
+  isNext?: boolean;
+}
+const SectionBottomNav = ({ isPrevious, isNext }: SectionBottomNav) => {
+  const { surveyId, pageNumber } = usePageValue();
+  const [mutate] = useDeleteSurveyAnswer();
+  const { surveyFormValue, setSurveyFormValue } = useSurveyFormContext();
+  const navigate = useNavigate();
+
+  const goNext = () => {
+    const { form, errorCount } = sectionFormErrorCheck(surveyFormValue);
+    setSurveyFormValue(form);
+    if (errorCount > 0) {
+      return;
+    } else {
+      navigate(`/survey/${surveyId}?page=${pageNumber + 1}`);
+    }
+  };
+
+  const goBack = () => {
+    navigate(-1);
+  };
+
+  const onReset = () => {
+    if (!surveyFormValue) return;
+
+    const form: SurveyForm = {};
+    for (const itemId in surveyFormValue) {
+      const surveyForm = surveyFormValue[itemId];
+      form[itemId] = {
+        ...surveyForm,
+        error: false,
+        value: undefined,
+      };
+      mutate({
+        surveyId,
+        itemId: Number(itemId),
+      });
+    }
+    setSurveyFormValue(form);
+  };
+
+  const onSubmit = () => {
+    const { form, errorCount } = sectionFormErrorCheck(surveyFormValue);
+    setSurveyFormValue(form);
+    if (errorCount > 0) {
+      return;
+    } else {
+      navigate(`/complete/${surveyId}`);
+      console.log('제출');
+      return;
+    }
+  };
+  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} onClick={onReset}>
+          양식 지우기
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SectionBottomNav;

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

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

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

@@ -46,3 +46,16 @@ export const select = style({
   outline: 0,
   padding: '6px',
 });
+
+// TextAreaOptions
+export const textArea = style({
+  border: 0,
+  resize: 'none',
+  width: '100%',
+  borderBottom: `1px solid ${vars.color.grayScale100}`,
+  padding: '3px',
+  ':focus': {
+    outline: 'none',
+    borderBottom: `1px solid ${vars.color.primary500}`,
+  },
+});