Merge branch 'DH6' into develop0722

frontend/src/SurveyRouter.tsx

@@ -6,8 +6,9 @@ import { RequireAuth } from "./auth/RequireAuth";
 import { SurveyForm } from "./commons";
 import { Home } from "./home";
 import { Profile } from "./profile";
-import { EditResponseButton } from "./survey";
+import { EditResultButton } from "./survey";
 import { EditSurvey } from "./survey/EditSurvey";
+import { ResultSurvey } from "./survey/ResultSurvey";
 
 export const SurveyRouter = () => {
   return (
@@ -17,9 +18,9 @@ export const SurveyRouter = () => {
           <Route index element={<Home />} />
           <Route path="login" element={<Login />} />
           <Route path="signup" element={<SignUp />} />
-          <Route path="surveys/edit/" element={<EditResponseButton />}>
+          <Route path="surveys/edit/" element={<EditResultButton />}>
             <Route path=":surveyId" element={<EditSurvey />} />
-            <Route path=":surveyId/response" element />
+            <Route path=":surveyId/result" element={<ResultSurvey />} />
           </Route>
           <Route path="surveys/:surveyId" element={<SurveyForm />} />
           <Route

frontend/src/apis/survey.api.ts

@@ -8,7 +8,7 @@ export const createSurvey = async (survey: SurveyType) => {
 };
 
 export const getSurvey = async (surveyId: string) => {
-  const { data } = await axios.get(`${baseUrl}/surveys/edit/${surveyId}`);
+  const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}/edit`);
   return data;
 };
 
@@ -24,13 +24,20 @@ export const getSurveys = async () => {
 
 export const editSurvey = async (survey: SurveyType) => {
   const { data } = await axios.put(
-    `${baseUrl}/surveys/edit/${survey._id}`,
+    `${baseUrl}/surveys/${survey._id}/edit`,
+    survey
+  );
+  return data;
+};
+export const resultSurvey = async (survey: SurveyType) => {
+  const { data } = await axios.put(
+    `${baseUrl}/surveys/${survey._id}/result`,
     survey
   );
   return data;
 };
 
 export const deleteSurvey = async (surveyId: string) => {
-  const { data } = await axios.delete(`${baseUrl}/surveys/delete/${surveyId}`);
+  const { data } = await axios.delete(`${baseUrl}/surveys/${surveyId}/delete`);
   return data;
 };

frontend/src/profile/MySurveyCard.tsx

@@ -16,7 +16,7 @@ export const MySurveyCard = ({ data }: Props) => {
   const [success, setSuccess] = useState(false);
 
   const editSurvey = () => {
-    navigate(`/surveys/edit/${data._id}`, {
+    navigate(`/surveys/${data._id}/edit`, {
       replace: true,
       state: { save: true },
     });
@@ -52,36 +52,36 @@ export const MySurveyCard = ({ data }: Props) => {
   }
 
   return (
-    <div className="w-52 h-60 rounded border-2">
-      <div className="h-32 p-5">
-        <p className="text-gray-700">
-          {data.comment ? data.comment : "설명없는 설문조사"}
-        </p>
-      </div>
-      <div className="flex flex-col px-5 py-3">
-        <div className="h-12">
-          <button type="button" onClick={editSurvey}>
-            <p className="font-bold">
-              {data.title ? data.title : "제목없는 설문조사"}
-            </p>
-          </button>
+    <div className="w-52 h-60 rounded border-2 hover:border-2 hover:border-themeColor">
+      <button className="w-full" onClick={editSurvey}>
+        <div className="h-36 p-5">
+          <p className="text-gray-700">
+            {data.comment ? data.comment : "설명없는 설문조사"}
+          </p>
+        </div>
+
+        <div className="flex flex-col h-12 place-items-center">
+          <p className="font-bold">
+            {data.title ? data.title : "제목없는 설문조사"}
+          </p>
+
           <p className="text-gray-500 text-sm">
             {data.updatedAt?.substring(0, 10)}
           </p>
         </div>
-        <div className="flex justify-end pt-1">
-          <label className="pt-1">링크복사</label>
-          <button className="" onClick={copyLink}>
-            <img src={CopyImg} alt="copy"></img>
-          </button>
-          <button
-            type="button"
-            className="bg-themeColor rounded text-white py-1 px-1.5 ml-1"
-            onClick={deleteSurvey}
-          >
-            삭제
-          </button>
-        </div>
+      </button>
+      <div className="flex justify-end pt-1">
+        <label className="pt-1">링크복사</label>
+        <button className="" onClick={copyLink}>
+          <img src={CopyImg} alt="copy"></img>
+        </button>
+        <button
+          type="button"
+          className="bg-themeColor rounded text-white py-1 px-1.5 ml-1"
+          onClick={deleteSurvey}
+        >
+          삭제
+        </button>
       </div>
     </div>
   );

frontend/src/survey/Accordion.tsx

+import React, { useState, useRef } from "react";
+
+type AccordionProps = {
+  title: string;
+  content: string;
+};
+const Accordion = ({ title, content }: AccordionProps) => {
+  const [isOpened, setOpened] = useState<boolean>(false);
+  const [height, setHeight] = useState<string>("0px");
+  const contentElement = useRef<HTMLDivElement>(null);
+
+  const HandleOpening = () => {
+    setOpened(!isOpened);
+    setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px");
+  };
+  return (
+    <div className="p-1">
+      <div onClick={HandleOpening}>
+        <div className={"bg-themeColor p-4 flex justify-between text-white"}>
+          <h4 className="font-semibold">{title}</h4>
+          {isOpened ? "△" : "▽"}
+        </div>
+        <div
+          ref={contentElement}
+          style={{ height: height }}
+          className="bg-gray-100 overflow-hidden transition-all duration-700"
+        >
+          <p className="p-4">{content}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

frontend/src/survey/EditResponseButton.tsx

-import React from "react";
-import { Outlet, useNavigate, useParams } from "react-router-dom";
-
-export const EditResponseButton = () => {
-  let { surveyId } = useParams<{ surveyId: string }>();
-  const navigate = useNavigate();
-
-  function editButtonClick(e: React.MouseEvent<HTMLButtonElement>) {
-    navigate(`/surveys/edit/${surveyId}`);
-  }
-  return (
-    <div>
-      <div className="flex place-content-center">
-        <button
-          className="text-xl m-3 underline decoration-4"
-          onClick={editButtonClick}
-        >
-          설문지 수정
-        </button>
-        <button
-          className="text-xl m-3 underline"
-          /*onClick={}*/
-        >
-          응답결과
-        </button>
-      </div>
-      <Outlet />
-    </div>
-  );
-};

frontend/src/survey/EditResultButton.tsx

+import React from "react";
+import { NavLink } from "react-router-dom";
+import { Outlet, useNavigate, useParams } from "react-router-dom";
+
+export const EditResultButton = () => {
+  let { surveyId } = useParams<{ surveyId: string }>();
+  const navigate = useNavigate();
+
+  /*function editButtonClick(e: React.MouseEvent<HTMLButtonElement>) {
+    navigate(`/surveys/${surveyId}/edit`);
+  }
+  function resultButtonClick(e: React.MouseEvent<HTMLButtonElement>) {
+    navigate(`/surveys/${surveyId}/result`);
+  }*/
+
+  return (
+    <div>
+      <div className="flex place-content-center mt-6">
+        <NavLink
+          to={`/surveys/${surveyId}/edit`}
+          style={({ isActive }) =>
+            isActive
+              ? {
+                  color: "white",
+                  backgroundColor: "#58ACFA",
+                }
+              : {
+                  borderBottomWidth: "1px",
+                  borderColor: "#58ACFA",
+                }
+          }
+        >
+          <div className="text-xl m-3 ">설문지 수정</div>
+        </NavLink>
+        <NavLink
+          to={`/surveys/${surveyId}/result`}
+          style={({ isActive }) =>
+            isActive
+              ? {
+                  color: "white",
+                  backgroundColor: "#58ACFA",
+                }
+              : {
+                  borderBottomWidth: "1px",
+                  borderColor: "#58ACFA",
+                }
+          }
+        >
+          <div className="text-xl m-3">응답결과</div>
+        </NavLink>
+      </div>
+      <Outlet />
+    </div>
+  );
+};

frontend/src/survey/ResultSurvey.tsx

+import React from "react";
+import Accordion from "./Accordion";
+
+export const ResultSurvey = () => {
+  const data = [
+    {
+      title: "1번질문",
+      content:
+        "1번 답변들asdfadsgsjadhfasld;nvaldkfnbljgnahgvlajnbl janl;nvja; sabv;jnsvjl;asjvh asjfagkfnjf;nvasgn va;sdn va sglanksvl ds af adb adf afg dgafbg dfh jbvlkna lkslbk kjv nbkkdlfn akdl nvjbnkdjf nlkbakdn bkjnakjn n knk",
+    },
+    {
+      title: "2번질문",
+      content: "2번답변들",
+    },
+    {
+      title: "3번질문",
+      content: "3번답변들",
+    },
+  ];
+  return (
+    <div className="flex flex-col place-items-center">
+      <div className="flex flex-col container place-items-center mt-4">
+        <div className="font-bold text-4xl text-center m-2 border-b-2">
+          설문지 제목
+        </div>
+        <div className="font-bold text-1xl text-center m-2 resize-none">
+          설문조사 설명
+        </div>
+      </div>
+
+      <div className="container w-11/12 place-self-center">
+        {data.map((item) => (
+          <Accordion title={item.title} content={item.content} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ResultSurvey;

frontend/src/survey/index.tsx

-export { EditResponseButton } from "./EditResponseButton";
+export { EditResultButton } from "./EditResultButton";

src/routes/survey.route.ts

@@ -4,18 +4,21 @@ import { authCtrl, surveyCtrl, questionCtrl } from "../controllers";
 const router = express.Router();
 
 router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys);
-router.route("/:surveyId").get(surveyCtrl.getSurveyById);
+router.route("/:surveyId")
+.get(surveyCtrl.getSurveyById);
+
+
 
 router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey);
 router
   .route("/:surveyId")
   .get(surveyCtrl.getSurveyById);
 router
-  .route("/edit/:surveyId")
+  .route("/:surveyId/edit")
   .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)
   .put(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.updateSurvey);
 router
-  .route("/delete/:surveyId")
+  .route("/:surveyId/delete")
   .delete(
     authCtrl.requireLogin,
     authCtrl.authenticate,