Commit 4f7388bd authored by jang dong hyeok's avatar jang dong hyeok
Browse files

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

parent 80a2b663
...@@ -11,6 +11,11 @@ export const getSurvey = async (surveyId: string) => { ...@@ -11,6 +11,11 @@ export const getSurvey = async (surveyId: string) => {
const { data } = await axios.get(`${baseUrl}/surveys/edit/${surveyId}`); const { data } = await axios.get(`${baseUrl}/surveys/edit/${surveyId}`);
return data; return data;
}; };
//동혁
export const getSurveys = async () => {
const { data } = await axios.get(`${baseUrl}/surveys/`);
return data;
};
export const editSurvey = async (survey: SurveyType) => { export const editSurvey = async (survey: SurveyType) => {
const { data } = await axios.put( const { data } = await axios.put(
......
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>
);
};
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { surveyApi } from "../apis"; import { surveyApi } from "../apis";
import { SurveyType } from "../types"; 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 = () => { export const Profile = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [survey, setSurvey] = useState<SurveyType>({ const [survey, setSurvey] = useState<SurveyType>({
...@@ -11,6 +17,11 @@ export const Profile = () => { ...@@ -11,6 +17,11 @@ export const Profile = () => {
comment: "", comment: "",
questions: [], questions: [],
}); });
const [cardDatas, setCardDatas] = useState<SurveyType[]>([]);
useEffect(() => {
getSurveys();
}, [cardDatas]);
async function createSurvey() { async function createSurvey() {
const newSurvey: SurveyType = await surveyApi.createSurvey(survey); const newSurvey: SurveyType = await surveyApi.createSurvey(survey);
navigate(`/surveys/edit/${newSurvey._id}`, { navigate(`/surveys/edit/${newSurvey._id}`, {
...@@ -18,6 +29,12 @@ export const Profile = () => { ...@@ -18,6 +29,12 @@ export const Profile = () => {
}); });
} }
async function getSurveys() {
const surveys: SurveyType[] = await surveyApi.getSurveys();
setCardDatas(surveys);
}
// let surveys = getSurvey(_id);
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="m-5">나의 설문조사</div> <div className="m-5">나의 설문조사</div>
...@@ -30,82 +47,9 @@ export const Profile = () => { ...@@ -30,82 +47,9 @@ export const Profile = () => {
CREATE NEW SURVEY! CREATE NEW SURVEY!
</div> </div>
</button> </button>
<div className="w-48 h-60 rounded overflow-hidden border-2"> {cardDatas.map((data, i) => {
<div className="px-6 py-4"> return <MySurveyCard data={data} key={i} />;
<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>
</div> </div>
</div> </div>
); );
......
...@@ -26,6 +26,12 @@ export const getSurveyById = asyncWrap(async (req, res) => { ...@@ -26,6 +26,12 @@ export const getSurveyById = asyncWrap(async (req, res) => {
return res.json(survey); 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) => { export const updateSurvey = asyncWrap(async (req, res) => {
const survey = req.body; const survey = req.body;
const newSurvey = await surveyDb.updateSurvey(survey); const newSurvey = await surveyDb.updateSurvey(survey);
......
...@@ -20,6 +20,10 @@ export const getSurveyById = async (surveyId: string) => { ...@@ -20,6 +20,10 @@ export const getSurveyById = async (surveyId: string) => {
const survey = await Survey.findById(surveyId).populate("questions"); const survey = await Survey.findById(surveyId).populate("questions");
return survey; return survey;
}; };
export const getSurveys = async () => {
const surveys = await Survey.find();
return surveys;
};
export const updateSurvey = async (survey: ISurvey) => { export const updateSurvey = async (survey: ISurvey) => {
const newSurvey = await Survey.findOneAndUpdate({ _id: survey._id }, survey); const newSurvey = await Survey.findOneAndUpdate({ _id: survey._id }, survey);
......
...@@ -8,7 +8,8 @@ router ...@@ -8,7 +8,8 @@ router
.route("/edit/:surveyId") .route("/edit/:surveyId")
.get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById) .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)
.put(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.updateSurvey); .put(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.updateSurvey);
router.route("/")
.get(authCtrl.requireLogin,surveyCtrl.getSurveys);
router.param("surveyId", surveyCtrl.userBySurveyId); router.param("surveyId", surveyCtrl.userBySurveyId);
export default router; export default router;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment