Surveys, Survey 컴포넌트 새로 만들고 적용

frontend/src/commons/Header.tsx

@@ -28,7 +28,7 @@ export const Header = () => {
               >
                 로그아웃
               </button>
-              <Link to="/surveys/profile">
+              <Link to="/surveys">
                 <button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
                   프로필
                 </button>
@@ -71,7 +71,7 @@ export const Header = () => {
                       로그아웃
                     </div>
                   </Link>
-                  <Link to="/profile">
+                  <Link to="/surveys">
                     <div className="p-2 w-24 text-center text-l text-gray-600 hover:text-themeColor">
                       프로필
                     </div>

frontend/src/layouts/SurveyLayout.tsx

+import React from "react";
+import { NavLink, useOutletContext } from "react-router-dom";
+import { Outlet, useNavigate, useParams } from "react-router-dom";
+import { useSurveys } from "./SurveysLayout";
+import type { ISurvey } from "../types";
+
+type SurveyContextType = {
+  survey: ISurvey;
+  update: (survey: ISurvey) => Promise<any>;
+};
+
+const activeStyle =
+  "w-36 h-12 flex justify-center items-center bg-themeColor p-1 text-white text-center font-bold text-xl";
+const inActiveStyle =
+  "w-36 h-12 flex justify-center items-center bg-white border border-themeColor p-1 text-center font-bold text-xl";
+
+export const SurveyLayout = () => {
+  const { surveys, update } = useSurveys();
+  let { surveyId } = useParams<{ surveyId: string }>();
+  const survey = surveys.find((survey) => survey._id === surveyId);
+
+  return (
+    <div>
+      <div className="flex justify-center items-center mt-6">
+        <NavLink
+          to={`/surveys/${surveyId}`}
+          end={true}
+          className={({ isActive }) =>
+            isActive
+              ? activeStyle + " rounded-l-3xl"
+              : inActiveStyle + " rounded-l-3xl"
+          }
+        >
+          설문 미리보기
+        </NavLink>
+        <NavLink
+          to={`/surveys/${surveyId}/edit`}
+          className={({ isActive }) => (isActive ? activeStyle : inActiveStyle)}
+        >
+          설문지 수정
+        </NavLink>
+        <NavLink
+          to={`/surveys/${surveyId}/result`}
+          className={({ isActive }) =>
+            isActive
+              ? activeStyle + " rounded-r-3xl"
+              : inActiveStyle + " rounded-r-3xl"
+          }
+        >
+          응답결과
+        </NavLink>
+      </div>
+      <Outlet context={{ survey, update }} />
+    </div>
+  );
+};
+
+export const useSurvey = () => {
+  return useOutletContext<SurveyContextType>();
+};

frontend/src/layouts/SurveysLayout.tsx

+import React, { useEffect, useState } from "react";
+import { Outlet, useOutletContext } from "react-router-dom";
+import { surveyApi } from "../apis";
+import { catchErrors } from "../helpers";
+import type { ISurvey } from "../types";
+
+type SurveysContextType = {
+  error: string;
+  loading: boolean;
+  surveys: ISurvey[];
+  create: () => Promise<any>;
+  remove: (id: string) => Promise<any>;
+  update: (survey: ISurvey) => Promise<any>;
+};
+
+export const SurveysLayout = () => {
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [surveys, setSurveys] = useState<ISurvey[]>([]);
+
+  useEffect(() => {
+    const getSurveys = async () => {
+      const surveys: ISurvey[] = await surveyApi.getSurveys();
+      // console.log(surveys);
+      setSurveys(surveys);
+    };
+    getSurveys();
+  }, []);
+
+  const create = async (surveyData: ISurvey) => {
+    const result: ISurvey = await surveyApi.createSurvey(surveyData);
+    setSurveys([result, ...surveys]);
+    return result;
+  };
+
+  const update = async (surveyData: ISurvey) => {
+    const result = await surveyApi.updateSurvey(surveyData);
+    const index = surveys.findIndex((survey) => survey._id === result._id);
+    surveys[index] = result;
+    console.log("result in modify layout:", result);
+    setSurveys([...surveys]);
+    return result;
+  };
+
+  /**
+   * 설문 삭제
+   * @param id survey id
+   */
+  const remove = async (id: string) => {
+    if (window.confirm("해당 설문조사를 삭제하시겠습니까?")) {
+      try {
+        setLoading(true);
+        const result = await surveyApi.deleteSurvey(id);
+        console.log("deleted survey", result);
+        setError("");
+        const items = surveys.filter((survey) => survey._id !== result._id);
+        // console.log("items left:", newItems);
+        setSurveys(items);
+        alert("삭제되었습니다.");
+      } catch (error) {
+        console.log("에러발생");
+        catchErrors(error, setError);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Outlet context={{ error, loading, surveys, create, remove, update }} />
+    </>
+  );
+};
+
+export const useSurveys = () => {
+  return useOutletContext<SurveysContextType>();
+};

frontend/src/layouts/index.tsx

 export { AnswerLayout } from "./AnswerLayout";
 export { BaseLayout } from "./BaseLayout";
-export { ModifyLayout } from "./ModifyLayout";
+export { SurveyLayout, useSurvey } from "./SurveyLayout";
+export { SurveysLayout, useSurveys } from "./SurveysLayout";
 export { ResultLayout } from "./ResultLayout";

frontend/src/surveys/SurveysList.tsx

+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { surveyApi } from "../apis";
+import { catchErrors } from "../helpers";
+import { useSurveys } from "../layouts";
+import type { ISurvey } from "../types";
+import { SurveyCard } from "./SurveyCard";
+
+export const SurveysList = () => {
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { surveys, remove: handleDelete } = useSurveys();
+  // const [surveys, setSurveys] = useState<ISurvey[]>([]);
+
+  // useEffect(() => {
+  //   const getSurveys = async () => {
+  //     const surveys: ISurvey[] = await surveyApi.getSurveys();
+  //     // console.log(surveys);
+  //     setSurveys(surveys);
+  //   };
+  //   getSurveys();
+  // }, []);
+
+  /**
+   * 설문 삭제
+   * @param id survey id
+   */
+  // const handleDelete = async (id: string) => {
+  //   if (window.confirm("해당 설문조사를 삭제하시겠습니까?")) {
+  //     try {
+  //       setLoading(true);
+  //       const result = await surveyApi.deleteSurvey(id);
+  //       console.log("deleted survey", result);
+  //       setError("");
+  //       const newItems = surveys.filter((survey) => survey._id !== result._id);
+  //       // console.log("items left:", newItems);
+  //       setSurveys(newItems);
+  //       alert("삭제되었습니다.");
+  //     } catch (error) {
+  //       console.log("에러발생");
+  //       catchErrors(error, setError);
+  //     } finally {
+  //       setLoading(false);
+  //     }
+  //   }
+  // };
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="mt-10 text-xl font-bold">나의 설문조사</div>
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6">
+        <Link
+          to={"/surveys/create"}
+          className="flex w-40 h-48 md:h-60 md:w-52 items-center font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
+        >
+          <div className="text-center md:px-6 md:py-6 font-xs md:font-bold text-gray-500 place-items-center hover:text-white">
+            CREATE NEW SURVEY!
+          </div>
+        </Link>
+        {surveys.map((survey) => (
+          <SurveyCard
+            key={survey._id}
+            survey={survey}
+            handleDelete={handleDelete}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};