프로필에서 Card에 DB에 있는 데이터 가져다넣기

frontend/src/apis/survey.api.ts

@@ -11,6 +11,11 @@ export const getSurvey = async (surveyId: string) => {
   const { data } = await axios.get(`${baseUrl}/surveys/edit/${surveyId}`);
   return data;
 };
+//동혁
+export const getSurveys = async () => {
+  const { data } = await axios.get(`${baseUrl}/surveys/`);
+  return data;
+};
 
 export const editSurvey = async (survey: SurveyType) => {
   const { data } = await axios.put(

frontend/src/profile/MySurvey.tsx

+import React from "react";
+import { BasicQuestionType, SurveyType } from "../types";
+
+type Props = {
+  data: SurveyType;
+};
+export const MySurveyCard = ({ data }: Props) => {
+  return (
+    <div className="w-48 h-60 rounded overflow-hidden border-2">
+      <div className="px-6 py-4">
+        <p className="text-gray-700 text-base">{data.comment}</p>
+      </div>
+      <div className="flex flex-col py-6">
+        <div className="px-2 py-2">
+          <label>{data.title}</label>
+        </div>
+        <div className="flex justify-end">
+          <select
+            className="py-2 w-14 bg-themeColor rounded text-white"
+            //value={}
+            //onChange={}
+          >
+            <option value="option">옵션</option>
+            <option value="option">삭제</option>
+            <option value="option">이름 바꾸기</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/profile/Profile.tsx

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { surveyApi } from "../apis";
 import { SurveyType } from "../types";
+import { MySurveyCard } from "./MySurvey";
 
+const testData = [
+  { id: 0, name: "이름1", description: "설명1" },
+  { id: 1, name: "이름2", description: "설명2" },
+  { id: 2, name: "이름3", description: "설명3" },
+];
 export const Profile = () => {
   const navigate = useNavigate();
   const [survey, setSurvey] = useState<SurveyType>({
@@ -11,6 +17,11 @@ export const Profile = () => {
     comment: "",
     questions: [],
   });
+  const [cardDatas, setCardDatas] = useState<SurveyType[]>([]);
+
+  useEffect(() => {
+    getSurveys();
+  }, [cardDatas]);
   async function createSurvey() {
     const newSurvey: SurveyType = await surveyApi.createSurvey(survey);
     navigate(`/surveys/edit/${newSurvey._id}`, {
@@ -18,6 +29,12 @@ export const Profile = () => {
     });
   }
 
+  async function getSurveys() {
+    const surveys: SurveyType[] = await surveyApi.getSurveys();
+    setCardDatas(surveys);
+  }
+  // let surveys = getSurvey(_id);
+
   return (
     <div className="flex flex-col items-center">
       <div className="m-5">나의 설문조사</div>
@@ -30,82 +47,9 @@ export const Profile = () => {
             CREATE NEW SURVEY!
           </div>
         </button>
-        <div className="w-48 h-60 rounded overflow-hidden border-2">
-          <div className="px-6 py-4">
-            <p className="text-gray-700 text-base">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-          </div>
-          <div className="flex flex-col py-6">
-            <div className="px-2 py-2">
-              <label>설문조사 이름</label>
-            </div>
-            <div className="flex justify-end">
-              <select className="py-2 w-14 bg-themeColor rounded text-white">
-                <option selected>옵션</option>
-                <option>삭제</option>
-                <option>이름 바꾸기</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <div className="w-48 h-60 rounded overflow-hidden border-2">
-          <div className="px-6 py-4">
-            <p className="text-gray-700 text-base">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-          </div>
-          <div className="flex flex-col py-6">
-            <div className="px-2 py-2">
-              <label>설문조사이름</label>
-            </div>
-            <div className="flex justify-end">
-              <select className="py-2 w-14 bg-themeColor rounded text-white">
-                <option selected>옵션</option>
-                <option>삭제</option>
-                <option>이름 바꾸기</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <div className="w-48 h-60 rounded overflow-hidden border-2">
-          <div className="px-6 py-4">
-            <p className="text-gray-700 text-base">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-          </div>
-          <div className="flex flex-col py-6">
-            <div className="px-2 py-2">
-              <label>설문조사 이름</label>
-            </div>
-            <div className="flex justify-end">
-              <select className="py-2 w-14 bg-themeColor rounded text-white">
-                <option selected>옵션</option>
-                <option>삭제</option>
-                <option>이름 바꾸기</option>
-              </select>
-            </div>
-          </div>
-        </div>
-        <div className="w-48 h-60 rounded overflow-hidden border-2">
-          <div className="px-6 py-4">
-            <p className="text-gray-700 text-base">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-          </div>
-          <div className="flex flex-col py-6">
-            <div className="px-2 py-2">
-              <label>설문조사 이름</label>
-            </div>
-            <div className="flex justify-end">
-              <select className="py-2 w-14 bg-themeColor rounded text-white">
-                <option selected>옵션</option>
-                <option>삭제</option>
-                <option>이름 바꾸기</option>
-              </select>
-            </div>
-          </div>
-        </div>
+        {cardDatas.map((data, i) => {
+          return <MySurveyCard data={data} key={i} />;
+        })}
       </div>
     </div>
   );

src/controllers/survey.controller.ts

@@ -26,6 +26,12 @@ export const getSurveyById = asyncWrap(async (req, res) => {
   return res.json(survey);
 });
 
+//동혁
+export const getSurveys = asyncWrap(async(req,res)=>{
+  const surveys = await surveyDb.getSurveys();
+  return res.json(surveys);
+});
+
 export const updateSurvey = asyncWrap(async (req, res) => {
   const survey = req.body;
   const newSurvey = await surveyDb.updateSurvey(survey);

src/db/survey.db.ts

@@ -20,6 +20,10 @@ export const getSurveyById = async (surveyId: string) => {
   const survey = await Survey.findById(surveyId).populate("questions");
   return survey;
 };
+export const getSurveys = async () => {
+  const surveys = await Survey.find();
+  return surveys;
+};
 
 export const updateSurvey = async (survey: ISurvey) => {
   const newSurvey = await Survey.findOneAndUpdate({ _id: survey._id }, survey);

src/routes/survey.route.ts

@@ -8,7 +8,8 @@ router
   .route("/edit/:surveyId")
   .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)
   .put(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.updateSurvey);
-
+router.route("/")
+.get(authCtrl.requireLogin,surveyCtrl.getSurveys);
 router.param("surveyId", surveyCtrl.userBySurveyId);
 
 export default router;