verion 0.1 시작

frontend/src/MainRouter.tsx

+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Login, SignUp } from "./auth";
+import { NotFound } from "./commons";
+import {
+  Profile,
+  CreateSurvey,
+  Preview,
+  EditSurvey,
+  AnswerSurvey,
+} from "./surveys";
+import { AnswerLayout, BaseLayout, ModifyLayout } from "./layouts";
+import { Home } from "./home";
+import { RequireAuth } from "./auth/RequireAuth";
+
+export const MainRouter = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<BaseLayout />}>
+          <Route path="/" element={<Home />}></Route>
+          <Route path="/login" element={<Login />} />
+          <Route path="/signup" element={<SignUp />} />
+          <Route element={<AnswerLayout />}>
+            <Route path="/answers/:surveyId" element={<AnswerSurvey />} />
+          </Route>
+          <Route
+            path="/surveys"
+            element={
+              <RequireAuth>
+                <ModifyLayout />
+              </RequireAuth>
+            }
+          >
+            <Route path="create" element={<CreateSurvey />} />
+            <Route path="profile" element={<Profile />} />
+            <Route path=":surveyId" element={<Preview />} />
+            <Route path=":surveyId/edit" element={<EditSurvey />} />
+          </Route>
+          <Route path="*" element={<NotFound />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+};

frontend/src/answers/ACheckboxForm.tsx

 import React, { useState } from "react";
-import { CheckboxType, AnswerProps } from "../types";
+import { ICheckbox, AnswerProps } from "../types";
 
 interface Props extends AnswerProps {
-  element: CheckboxType;
+  element: ICheckbox;
 }
 
 export const ACheckboxForm = ({ element, answerQuestion }: Props) => {

frontend/src/answers/ADropdownForm.tsx

 import React, { useState } from "react";
-import { DropdownType, AnswerProps } from "../types";
+import { IDropdown, AnswerProps } from "../types";
 
 interface Props extends AnswerProps {
-  element: DropdownType;
+  element: IDropdown;
 }
 
 export const ADropdownForm = ({ element, answerQuestion }: Props) => {

frontend/src/answers/AQuestion.tsx

 import React from "react";
-import { BasicQuestionType, AnswerQuestionType } from "../types";
+import { IQuestionData, AnswerQuestionType } from "../types";
 import { ACheckboxForm } from "./ACheckboxForm";
 import { ADateForm } from "./ADateForm";
 import { ADropdownForm } from "./ADropdownForm";
@@ -9,12 +9,12 @@ import { ARadioForm } from "./ARadioForm";
 import { ARatingForm } from "./ARatingForm";
 
 type Props = {
-  question: BasicQuestionType;
+  question: IQuestionData;
   answerQuestion: AnswerQuestionType;
   addFiles: (oneFile: { questionId: string; file: File }) => void;
 };
 export const AQuestion = ({ question, answerQuestion, addFiles }: Props) => {
-  function getContent(question: BasicQuestionType) {
+  function getContent(question: IQuestionData) {
     switch (question.type) {
       case "essay":
         return (

frontend/src/answers/ARadioForm.tsx

 import React, { useState } from "react";
-import { RadioType, AnswerProps } from "../types";
+import { IRadio, AnswerProps } from "../types";
 
 interface Props extends AnswerProps {
-  element: RadioType;
+  element: IRadio;
 }
 
 export const ARadioForm = ({ element, answerQuestion }: Props) => {

frontend/src/answers/ARatingForm.tsx

 import React, { useState } from "react";
-import { RatingType, AnswerProps } from "../types";
+import { IRating, AnswerProps } from "../types";
 
 interface Props extends AnswerProps {
-  element: RatingType;
+  element: IRating;
 }
 
 export const ARatingForm = ({ element, answerQuestion }: Props) => {

frontend/src/answers/AnswerSurveyForm.tsx

@@ -2,7 +2,7 @@ import React, { FormEvent, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { surveyApi, answerApi } from "../apis";
 import { catchErrors } from "../helpers";
-import { AnswerSurveyType, AnswerType, SurveyType } from "../types";
+import { AnswerSurveyType, AnswerType, ISurvey } from "../types";
 import { AQuestion } from "./AQuestion";
 
 export const AnswerSurveyForm = () => {
@@ -12,7 +12,7 @@ export const AnswerSurveyForm = () => {
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
   const navigate = useNavigate();
-  const [survey, setSurvey] = useState<SurveyType>({
+  const [survey, setSurvey] = useState<ISurvey>({
     _id: surveyId || "",
     user: {},
     title: "",
@@ -48,7 +48,7 @@ export const AnswerSurveyForm = () => {
   async function ansSurvey() {
     try {
       if (surveyId) {
-        const getSurvey: any = await surveyApi.ansSurvey(surveyId);
+        const getSurvey: any = await surveyApi.getSurveyById(surveyId);
         console.log("survey가져옴ㅎㅎ", getSurvey);
         if (getSurvey) {
           answerSurvey.current._id = getSurvey._id;

frontend/src/apis/question.api.ts

 import axios from "axios";
-import { BasicQuestionType } from "../types";
+import { IQuestionData } from "../types";
 import baseUrl from "./baseUrl";
 
 export const createQuestion = async (surveyId: string) => {
@@ -16,7 +16,7 @@ export const createQuestion = async (surveyId: string) => {
   return data;
 };
 
-export const updateQuestion = async (question: BasicQuestionType) => {
+export const updateQuestion = async (question: IQuestionData) => {
   const { data } = await axios.put(
     `${baseUrl}/questions/update/${question._id}`,
     question

frontend/src/apis/survey.api.ts

 import axios from "axios";
-import { SurveyType } from "../types";
+import { ISurvey } from "../types";
 import baseUrl from "./baseUrl";
 
-export const createSurvey = async (survey: SurveyType) => {
+export const createSurvey = async (survey: ISurvey) => {
   const { data } = await axios.post(`${baseUrl}/surveys`, survey);
   return data;
 };
@@ -12,7 +12,7 @@ export const getSurvey = async (surveyId: string) => {
   return data;
 };
 
-export const ansSurvey = async (surveyId: string) => {
+export const getSurveyById = async (surveyId: string) => {
   const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}`);
   return data;
 };
@@ -22,14 +22,12 @@ export const getSurveys = async () => {
   return data;
 };
 
-export const editSurvey = async (survey: SurveyType) => {
-  const { data } = await axios.put(
-    `${baseUrl}/surveys/${survey._id}/edit`,
-    survey
-  );
+export const updateSurvey = async (survey: ISurvey) => {
+  const { data } = await axios.put(`${baseUrl}/surveys/${survey._id}`, survey);
   return data;
 };
-export const resultSurvey = async (survey: SurveyType) => {
+
+export const resultSurvey = async (survey: ISurvey) => {
   const { data } = await axios.put(
     `${baseUrl}/surveys/${survey._id}/result`,
     survey
@@ -38,6 +36,6 @@ export const resultSurvey = async (survey: SurveyType) => {
 };
 
 export const deleteSurvey = async (surveyId: string) => {
-  const { data } = await axios.delete(`${baseUrl}/surveys/${surveyId}/delete`);
+  const { data } = await axios.delete(`${baseUrl}/surveys/${surveyId}`);
   return data;
 };

frontend/src/auth/RequireAuth.tsx

@@ -7,6 +7,7 @@ export const RequireAuth: FC<{ children: JSX.Element }> = ({ children }) => {
   const location = useLocation();
 
   if (!user.isLoggedIn) {
+    alert("로그인이 필요합니다.");
     return (
       <Navigate to={"/login"} state={{ from: location.pathname }} replace />
     );

frontend/src/commons/NotFound.tsx

+import React from "react";
+import { Link } from "react-router-dom";
+
+export const NotFound = () => {
+  return (
+    <div className="flex flex-col mt-10 justify-center text-center text-5xl">
+      <h1 className="text-4xl">페이지를 찾을 수 없습니다.</h1>
+      <Link to={"/"} className="mt-4">
+        홈으로
+      </Link>
+    </div>
+  );
+};

frontend/src/commons/index.tsx

 export { Header } from "./Header";
 export { Footer } from "./Footer";
+export { NotFound } from "./NotFound";
 export { QUESTION_TYPES } from "./constants";

frontend/src/index.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import "tailwindcss/tailwind.css";
 import { createRoot } from "react-dom/client";
 import { SurveyRouter } from "./SurveyRouter";
+import { MainRouter } from "./MainRouter";
 
 const container = document.getElementById("root");
 const root = createRoot(container!);
 
 root.render(
   <React.StrictMode>
-    <SurveyRouter />
+    {/* <SurveyRouter /> */}
+    <MainRouter />
   </React.StrictMode>
 );

frontend/src/layouts/AnswerLayout.tsx

+import React from "react";
+import { Outlet } from "react-router-dom";
+
+export const AnswerLayout = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};

frontend/src/layouts/BaseLayout.tsx

+import React from "react";
+import { Outlet } from "react-router-dom";
+import { AuthProvider } from "../auth";
+import { Header } from "../commons";
+
+export const BaseLayout = () => {
+  return (
+    <AuthProvider>
+      <Header />
+      <Outlet />
+    </AuthProvider>
+  );
+};

frontend/src/layouts/ModifyLayout.tsx

+import React from "react";
+import { Outlet } from "react-router-dom";
+
+export const ModifyLayout = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};

frontend/src/layouts/index.tsx

+export { AnswerLayout } from "./AnswerLayout";
+export { BaseLayout } from "./BaseLayout";
+export { ModifyLayout } from "./ModifyLayout";

frontend/src/profile/MySurveyCard.tsx

 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { surveyApi } from "../apis";
-import { SurveyType } from "../types";
+import { ISurvey } from "../types";
 import { catchErrors } from "../helpers";
 import { DuplicateIcon } from "../icons";
 
 type Props = {
-  data: SurveyType;
+  data: ISurvey;
 };
 
 export const MySurveyCard = ({ data }: Props) => {

frontend/src/profile/Profile.tsx

 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { baseImageUrl, surveyApi } from "../apis";
-import { SurveyType } from "../types";
+import { ISurvey } from "../types";
 import { MySurveyCard } from "./MySurveyCard";
 
 export const Profile = () => {
   const navigate = useNavigate();
-  const [survey, setSurvey] = useState<SurveyType>({
+  const [survey, setSurvey] = useState<ISurvey>({
     _id: "",
     user: {},
     title: "",
     comment: "",
     questions: [],
   });
-  const [cardDatas, setCardDatas] = useState<SurveyType[]>([]);
+  const [cardDatas, setCardDatas] = useState<ISurvey[]>([]);
 
   useEffect(() => {
     getSurveys();
   }, []);
 
   async function createSurvey() {
-    const newSurvey: SurveyType = await surveyApi.createSurvey(survey);
+    const newSurvey: ISurvey = await surveyApi.createSurvey(survey);
     navigate(`/surveys/${newSurvey._id}/create`, {
       replace: true,
     });
   }
 
   async function getSurveys() {
-    const surveys: SurveyType[] = await surveyApi.getSurveys();
+    const surveys: ISurvey[] = await surveyApi.getSurveys();
     // console.log(surveys);
     setCardDatas(surveys);
   }

frontend/src/questions/CheckboxForm.tsx

 import React, { useState } from "react";
-import { CheckboxType } from "../types";
+import { ICheckbox } from "../types";
 
 type Props = {
-  element: CheckboxType;
+  element: ICheckbox;
   handleQuestion: (id: string) => void;
   isEditing: boolean;
 };