Commit f8d845da authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

Merge branch 'answer-structure' into main-answer-structure

parents 6442aa99 ab4ecce7
<mxfile host="65bd71144e">
<diagram id="4_LKa-YRAXo4FlEpOd_K" name="페이지-1">
<mxGraphModel dx="1549" dy="312" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="33" value="Frontend" style="swimlane;" vertex="1" parent="1">
<mxGeometry x="-180" y="40" width="1080" height="800" as="geometry">
<mxRectangle x="-20" y="40" width="80" height="23" as="alternateBounds"/>
</mxGeometry>
</mxCell>
<mxCell id="2" value="Routes" style="whiteSpace=wrap;html=1;" vertex="1" parent="33">
<mxGeometry x="185" y="40" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="3" value="/surveys/edit/:surveyId" style="whiteSpace=wrap;html=1;" vertex="1" parent="33">
<mxGeometry x="320" y="130" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="4" value="" style="edgeStyle=none;html=1;" edge="1" parent="33" source="2" target="3">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="29" value="&lt;p style=&quot;margin: 0px ; margin-top: 4px ; text-align: center ; text-decoration: underline&quot;&gt;&lt;b&gt;EditSurvey: 설문조사 수정&lt;/b&gt;&lt;/p&gt;&lt;hr&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;surveyId = useParams()&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;useEffect(&lt;span&gt;surveyApi.getSurvey(surveyId))&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;span&gt;&lt;br&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;span&gt;- 질문 추가: addQuestion()&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;span&gt;- 질문 삭제: deleteQuestion()&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;br&gt;&lt;/p&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;&lt;span&gt;- 설문 수정: updateSurvey: await surveyApi.update()&lt;/span&gt;&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;" vertex="1" parent="33">
<mxGeometry x="97.5" y="250" width="295" height="170" as="geometry"/>
</mxCell>
<mxCell id="6" value="&lt;span style=&quot;font-size: 12px&quot;&gt;/surveys/edit/:surveyId&lt;br&gt;&lt;/span&gt;" style="edgeStyle=none;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="33" source="2" target="29">
<mxGeometry relative="1" as="geometry">
<mxPoint x="340" y="450" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="30" value="&lt;p style=&quot;margin: 0px ; margin-top: 4px ; text-align: center ; text-decoration: underline&quot;&gt;&lt;b&gt;survey.api&lt;/b&gt;&lt;/p&gt;&lt;hr&gt;&lt;p style=&quot;margin: 0px ; margin-left: 8px&quot;&gt;getSuvey()&lt;br&gt;field2 = value2&lt;br&gt;field3 = value3&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;" vertex="1" parent="33">
<mxGeometry x="460" y="40" width="160" height="90" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
\ No newline at end of file
...@@ -3,7 +3,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; ...@@ -3,7 +3,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
import App from "./App"; import App from "./App";
import { Login, SignUp } from "./auth"; import { Login, SignUp } from "./auth";
import { RequireAuth } from "./auth/RequireAuth"; import { RequireAuth } from "./auth/RequireAuth";
import { SurveyForm } from "./commons"; import { AnswerSurveyForm } from "./answers";
import { Home } from "./home"; import { Home } from "./home";
import { Profile } from "./profile"; import { Profile } from "./profile";
import { EditResultButton } from "./survey"; import { EditResultButton } from "./survey";
...@@ -22,7 +22,7 @@ export const SurveyRouter = () => { ...@@ -22,7 +22,7 @@ export const SurveyRouter = () => {
<Route path=":surveyId" element={<EditSurvey />} /> <Route path=":surveyId" element={<EditSurvey />} />
<Route path=":surveyId/result" element={<ResultSurvey />} /> <Route path=":surveyId/result" element={<ResultSurvey />} />
</Route> </Route>
<Route path="surveys/:surveyId" element={<SurveyForm />} /> <Route path="surveys/:surveyId" element={<AnswerSurveyForm />} />
<Route <Route
path="profile" path="profile"
element={ element={
......
import React, { useState } from "react"; import React, { useState } from "react";
import { CheckboxType, AnswersType } from "../types"; import { CheckboxType, AnswersType, AnswerProps } from "../types";
type Props = { interface Props extends AnswerProps {
element: CheckboxType; element: CheckboxType;
answerQuestion: any | undefined; answerQuestion: any | undefined;
}; }
export const ACheckboxForm = ({ element, answerQuestion }: Props) => { export const ACheckboxForm = ({ element, answerQuestion }: Props) => {
const [answer, setAnswer] = useState(""); const [answer, setAnswer] = useState("");
......
import React, { useState } from "react"; import React, { useState } from "react";
import { DropdownType, AnswersType } from "../types"; import { DropdownType, AnswerProps } from "../types";
type Props = { interface Props extends AnswerProps {
element: DropdownType; element: DropdownType;
answerQuestion: any | undefined; answerQuestion: any | undefined;
}; }
export const ADropdownForm = ({ element, answerQuestion }: Props) => { export const ADropdownForm = ({ element, answerQuestion }: Props) => {
const [answer, setAnswer] = useState(""); const [answer, setAnswer] = useState("");
......
import React, { useState } from "react"; import React, { useState } from "react";
import { EssayType, AnswersType } from "../types"; import { AnswerProps, EssayType } from "../types";
type Props = { type Props = {
element: EssayType; element: EssayType;
......
import React, { useState } from "react"; import React, { useState } from "react";
import { FileType, AnswersType } from "../types"; import { FileType, AnswersType, AnswerProps } from "../types";
type Props = { interface Props extends AnswerProps {
element: FileType; element: FileType;
answerQuestion: any | undefined; answerQuestion: any | undefined;
addFiles: (oneFile: { questionId: string; file: File }) => void; addFiles: (oneFile: { questionId: string; file: File }) => void;
}; }
export const AFileForm = ({ element, answerQuestion, addFiles }: Props) => { export const AFileForm = ({ element, answerQuestion, addFiles }: Props) => {
const [answer, setAnswer] = useState(""); const [answer, setAnswer] = useState("");
......
import React, { useState } from "react"; import React, { useState } from "react";
import { RadioType, AnswersType } from "../types"; import { RadioType, AnswersType, AnswerProps } from "../types";
type Props = { interface Props extends AnswerProps {
element: RadioType; element: RadioType;
answerQuestion: any | undefined; answerQuestion: any | undefined;
}; }
export const ARadioForm = ({ element, answerQuestion }: Props) => { export const ARadioForm = ({ element, answerQuestion }: Props) => {
const [answer, setAnswer] = useState(""); const [answer, setAnswer] = useState("");
...@@ -23,7 +23,7 @@ export const ARadioForm = ({ element, answerQuestion }: Props) => { ...@@ -23,7 +23,7 @@ export const ARadioForm = ({ element, answerQuestion }: Props) => {
return ( return (
<div className="flex w-full gap-2 justify-around my-3"> <div className="flex w-full gap-2 justify-around my-3">
{element.content.choices.map((choice) => ( {element.content.choices.map((choice) => (
<div> <div key={choice.text}>
<input <input
className="mr-2" className="mr-2"
type="radio" type="radio"
......
import React, { useState } from "react"; import React, { useState } from "react";
import { RatingType, AnswersType } from "../types"; import { RatingType, AnswersType, AnswerProps } from "../types";
type Props = { interface Props extends AnswerProps {
element: RatingType; element: RatingType;
answerQuestion: any | undefined; answerQuestion: any | undefined;
}; }
export const ARatingForm = ({ element, answerQuestion }: Props) => { export const ARatingForm = ({ element, answerQuestion }: Props) => {
const [selectedchoice, setSelectedchoice] = useState(""); const [selectedchoice, setSelectedchoice] = useState("");
......
...@@ -7,7 +7,7 @@ import { Question } from "../questions"; ...@@ -7,7 +7,7 @@ import { Question } from "../questions";
import { AnswerType, SurveyType } from "../types"; import { AnswerType, SurveyType } from "../types";
import { AQuestion } from "./AQuestion"; import { AQuestion } from "./AQuestion";
export const SurveyForm = () => { export const AnswerSurveyForm = () => {
let { surveyId } = useParams<{ surveyId: string }>(); let { surveyId } = useParams<{ surveyId: string }>();
const [files, setFiles] = useState<{ questionId: string; file: File }[]>([]); const [files, setFiles] = useState<{ questionId: string; file: File }[]>([]);
const [requiredErrorMessage, setRequiredErrorMessage] = useState(""); const [requiredErrorMessage, setRequiredErrorMessage] = useState("");
......
export { AnswerSurveyForm } from "./AnswerSurveyForm";
export const QUESTION_TYPES = new Map([
["essay", "주관식"],
["radio", "객관식"],
["dropdown", "드롭다운"],
["checkbox", "체크박스"],
["file", "파일"],
["rating", "선형"],
["grid", "그리드"],
["date", "날짜"],
]);
export { Header } from "./Header"; export { Header } from "./Header";
export { SurveyForm } from "./SurveyForm"; export { QUESTION_TYPES } from "./constants";
\ No newline at end of file
import React, { useState, Dispatch, SetStateAction } from "react"; import React, { useState } from "react";
import { BasicQuestionType, EssayType } from "../types"; import { BasicQuestionType } from "../types";
import { questionApi } from "../apis"; import { questionApi } from "../apis";
import { EssayForm } from "./EssayForm"; import { EssayForm } from "./EssayForm";
import { CheckboxForm } from "./CheckboxForm"; import { CheckboxForm } from "./CheckboxForm";
...@@ -8,6 +8,7 @@ import { DropdownForm } from "./DropdownForm"; ...@@ -8,6 +8,7 @@ import { DropdownForm } from "./DropdownForm";
import { FileForm } from "./FileForm"; import { FileForm } from "./FileForm";
import { RatingForm } from "./RatingForm"; import { RatingForm } from "./RatingForm";
import { DateForm } from "./DateForm"; import { DateForm } from "./DateForm";
import { QUESTION_TYPES } from "../commons";
type Props = { type Props = {
element: BasicQuestionType; element: BasicQuestionType;
...@@ -16,17 +17,6 @@ type Props = { ...@@ -16,17 +17,6 @@ type Props = {
isSave: boolean; isSave: boolean;
}; };
const typeDropDown = new Map([
["essay", "주관식"],
["radio", "객관식"],
["dropdown", "드롭다운"],
["checkbox", "체크박스"],
["file", "파일"],
["rating", "선형"],
["grid", "그리드"],
["date", "날짜"],
]);
export const Question = ({ export const Question = ({
element, element,
handleQuestion, handleQuestion,
...@@ -165,13 +155,15 @@ export const Question = ({ ...@@ -165,13 +155,15 @@ export const Question = ({
name="type" name="type"
onChange={handleSelect} onChange={handleSelect}
disabled={save} disabled={save}
value={element.type}
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5" className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
> >
{Array.from(typeDropDown.entries()).map(([key, value]) => ( {Array.from(QUESTION_TYPES.entries()).map(([key, value]) => (
<option <option
key={key}
id={element._id} id={element._id}
value={key} value={key}
selected={key === element.type} // selected={key === element.type}
> >
{value} {value}
</option> </option>
......
...@@ -139,6 +139,7 @@ export const EditSurvey = () => { ...@@ -139,6 +139,7 @@ export const EditSurvey = () => {
</div> </div>
{questions.map((question) => ( {questions.map((question) => (
<Question <Question
key={question._id}
element={question} element={question}
isSave={state ? true : false} isSave={state ? true : false}
handleQuestion={handleQuestion} handleQuestion={handleQuestion}
......
...@@ -44,22 +44,21 @@ export interface RadioType extends BasicQuestionType { ...@@ -44,22 +44,21 @@ export interface RadioType extends BasicQuestionType {
}; };
} }
interface IChoices {
value: number;
text: string;
}
export interface CheckboxType extends BasicQuestionType { export interface CheckboxType extends BasicQuestionType {
content: { content: {
choices: { choices: IChoices[];
value: number;
text: string;
}[];
maxCount: number; maxCount: number;
}; };
} }
export interface DropdownType extends BasicQuestionType { export interface DropdownType extends BasicQuestionType {
content: { content: {
choices: { choices: IChoices[];
value: number;
text: string;
}[];
hasNone: boolean; hasNone: boolean;
}; };
} }
...@@ -93,3 +92,9 @@ export interface AnswerType { ...@@ -93,3 +92,9 @@ export interface AnswerType {
guestId: string; guestId: string;
answers: AnswersType[]; answers: AnswersType[];
} }
export interface AnswerProps {
element: BasicQuestionType;
// answers: AnswersType | undefined;
// handleAnswer: () => void;
}
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