Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
survey
Commits
373fe9c8
Commit
373fe9c8
authored
Jul 11, 2022
by
jang dong hyeok
Browse files
Merge branch 'dev-merge' into DH1
parents
d96fd4e9
74ee10b0
Changes
16
Hide whitespace changes
Inline
Side-by-side
frontend/src/CreateSurveyForm/question.context.tsx
View file @
373fe9c8
...
...
@@ -96,7 +96,7 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
async
function
addQuestion
()
{
try
{
const
newQ
:
BasicQuestionType
=
await
questionApi
.
createQuestion
();
setSurvey
({
...
survey
,
questions
:
[...
survey
.
questions
,
newQ
.
_id
]
});
setSurvey
({
...
survey
,
questions
:
[...
survey
.
questions
,
newQ
]
});
setQuestionList
([...
questionList
,
newQ
]);
// setSuccess(true);
// setError("");
...
...
frontend/src/SurveyRouter.tsx
View file @
373fe9c8
...
...
@@ -7,6 +7,7 @@ import { SurveyForm } from "./commons";
import
{
CreateSurveyForm
}
from
"
./CreateSurveyForm
"
;
import
{
Home
}
from
"
./home
"
;
import
{
Profile
}
from
"
./profile
"
;
import
{
CreateSurvey
}
from
"
./survey
"
;
export
const
SurveyRouter
=
()
=>
{
return
(
...
...
@@ -16,7 +17,7 @@ export const SurveyRouter = () => {
<
Route
index
element
=
{
<
Home
/>
}
/>
<
Route
path
=
"login"
element
=
{
<
Login
/>
}
/>
<
Route
path
=
"signup"
element
=
{
<
SignUp
/>
}
/>
<
Route
path
=
"create"
element
=
{
<
CreateSurvey
Form
/>
}
/>
<
Route
path
=
"
surveys/
create"
element
=
{
<
CreateSurvey
/>
}
/>
<
Route
path
=
"survey"
element
=
{
<
SurveyForm
/>
}
/>
<
Route
path
=
"profile"
...
...
frontend/src/profile/Profile.tsx
View file @
373fe9c8
import
React
from
"
react
"
;
import
{
Link
}
from
"
react-router-dom
"
;
import
{
useNavigate
}
from
"
react-router-dom
"
;
export
const
Profile
=
()
=>
{
const
navigate
=
useNavigate
();
const
createSurvey
=
()
=>
{
// 먼저 서버에 survey 테이블에 새로운 survey 항목 추가 로직 필요
navigate
(
"
/surveys/create
"
,
{
replace
:
true
});
};
return
(
<
div
className
=
"flex flex-col items-center"
>
<
div
className
=
"m-5"
>
나의 설문조사
</
div
>
<
div
className
=
"flex flex-row space-x-4 mt-5"
>
<
Link
to
=
"/create"
<
button
onClick
=
{
createSurvey
}
className
=
"flex h-60 w-48 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
>
<
div
className
=
"text-center px-6 py-6 font-bold text-gray-500 place-items-center hover:text-white"
>
CREATE NEW SURVEY!
</
div
>
</
Link
>
</
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"
>
...
...
frontend/src/questions/CheckboxForm.tsx
0 → 100644
View file @
373fe9c8
import
React
from
"
react
"
;
import
{
CheckboxType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
Edit
}
from
"
./Edit
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
CheckboxType
;
};
export
const
QCheckbox
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"
>
<
div
className
=
"flex flexgi-row h-16 w-full place-content-between items-center"
>
<
input
type
=
"text"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"checkbox"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
any
)
=>
(
<
div
>
<
input
type
=
"checkbox"
checked
=
{
false
}
></
input
>
<
input
type
=
"text"
className
=
"mx-2 border-b-2"
placeholder
=
{
e
.
text
}
></
input
>
</
div
>
))
}
</
div
>
<
div
className
=
"flex w-full flex-row justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
옵션
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
<
Edit
id
=
{
element
.
_id
}
/>
</
div
>
</
div
>
);
};
frontend/src/questions/DateForm.tsx
0 → 100644
View file @
373fe9c8
import
{
useQuestion
}
from
"
./question.context
"
;
frontend/src/questions/DropdownForm.tsx
0 → 100644
View file @
373fe9c8
import
React
from
"
react
"
;
import
{
DropdownType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
DropdownType
;
};
export
const
QDropdown
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"
>
<
div
className
=
"flex flexgi-row h-16 w-full place-content-between items-center"
>
<
input
type
=
"text"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"dropdown"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
any
)
=>
(
<
div
>
<
input
type
=
"checkbox"
checked
=
{
false
}
></
input
>
<
input
type
=
"text"
className
=
"mx-2 border-b-2"
placeholder
=
{
e
.
text
}
></
input
>
</
div
>
))
}
</
div
>
<
div
className
=
"flex w-full flex-row justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
옵션
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
};
frontend/src/questions/EssayForm.tsx
0 → 100644
View file @
373fe9c8
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
}
from
"
../types
"
;
// import { useQuestion } from "./question.context";
// import { Edit } from "./Edit";
// import { TypeChange } from "./typeDD";
type
Props
=
{
element
:
EssayType
;
};
export
const
EssayForm
=
({
element
}:
Props
)
=>
{
// const { questionListChange } = useQuestion();
return
(
<
div
id
=
"commentarea"
className
=
"flex mt-4 w-full justify-center"
>
<
input
className
=
"border w-11/12 h-16"
disabled
></
input
>
</
div
>
);
};
frontend/src/questions/FileForm.tsx
0 → 100644
View file @
373fe9c8
import
React
,
{
useState
}
from
"
react
"
;
import
{
FileType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
FileType
;
};
export
const
QFile
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"
>
<
div
className
=
"flex h-16 w-full place-content-between items-center"
>
<
input
type
=
"text"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"file"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4 w-full justify-center"
>
<
input
type
=
"file"
className
=
" w-11/12 h-16"
disabled
></
input
>
</
div
>
<
div
className
=
"flex w-full justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
옵션
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
};
frontend/src/questions/MatrixForm.tsx
0 → 100644
View file @
373fe9c8
import
{
useQuestion
}
from
"
./question.context
"
;
frontend/src/questions/Question.tsx
0 → 100644
View file @
373fe9c8
import
React
,
{
useState
}
from
"
react
"
;
import
{
BasicQuestionType
,
EssayType
}
from
"
../types
"
;
import
{
EssayForm
}
from
"
./EssayForm
"
;
type
Props
=
{
element
:
BasicQuestionType
;
};
export
const
Question
=
({
element
}:
Props
)
=>
{
const
handleClick
=
()
=>
{};
const
typeDD
=
new
Map
([
[
"
essay
"
,
"
주관식
"
],
[
"
radio
"
,
"
객관식
"
],
[
"
dropdown
"
,
"
드롭다운(객관식)
"
],
[
"
checkbox
"
,
"
체크박스
"
],
[
"
file
"
,
"
파일
"
],
[
"
rating
"
,
"
선형
"
],
[
"
grid
"
,
"
그리드
"
],
[
"
date
"
,
"
날짜
"
],
]);
function
changeDD
(
e
:
React
.
ChangeEvent
<
HTMLSelectElement
>
)
{
const
tt
=
e
.
target
.
value
;
// questionTypeChange(e);
console
.
log
(
tt
);
//if문으로 type별로 content 바뀌게 해보기
}
function
getContent
(
element
:
BasicQuestionType
)
{
switch
(
element
.
type
)
{
case
"
essay
"
:
return
<
EssayForm
element
=
{
element
}
/>;
case
"
radio
"
:
// return <RadioForm element={element} />;
case
"
checkbox
"
:
// return <CheckboxForm element={element} />;
case
"
dropdown
"
:
// return <DropdownForm element={element} />;
case
"
file
"
:
// return <FileForm element={element} />;
case
"
rating
"
:
// return <RatingForm element={element} />;
default
:
return
<></>;
}
}
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"
>
<
div
className
=
"flex h-16 w-full place-content-between items-center"
>
<
input
type
=
"text"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
// onChange={questionListChange}
></
input
>
<
select
id
=
"Questions"
name
=
"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"
defaultValue
=
{
element
.
type
}
onChange
=
{
changeDD
}
>
{
Array
.
from
(
typeDD
.
entries
()).
map
(([
k
,
v
])
=>
(
<
option
value
=
{
k
}
>
{
v
}
</
option
>
))
}
</
select
>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
// onChange={questionListChange}
></
input
>
</
div
>
{
getContent
(
element
)
}
<
div
className
=
"flex w-full justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
옵션
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
<
button
id
=
{
element
.
id
}
className
=
"w-1/12"
onClick
=
{
handleClick
}
>
수정
</
button
>
</
div
>
</
div
>
);
};
frontend/src/questions/RadioForm.tsx
0 → 100644
View file @
373fe9c8
import
React
from
"
react
"
;
import
{
RadioType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
RadioType
;
};
export
const
QRadio
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"
>
<
div
className
=
"flex h-16 w-full place-content-between items-center"
>
<
input
type
=
"text"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"radio"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
any
,
index
:
number
)
=>
(
<
div
>
<
input
type
=
"radio"
id
=
{
element
.
_id
}
name
=
"choice"
value
=
{
e
.
text
}
disabled
/>
<
input
type
=
"text"
name
=
{
"
choice
"
}
// key={`${index}`}
className
=
"mx-2 border-b-2"
placeholder
=
{
e
.
text
}
onChange
=
{
questionListChange
}
></
input
>
<
button
></
button
>
</
div
>
))
}
{
/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2">
+
</button> */
}
</
div
>
<
div
className
=
"flex w-full flex-row justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
옵션
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
};
frontend/src/questions/RatingForm.tsx
0 → 100644
View file @
373fe9c8
import
React
from
"
react
"
;
import
{
RatingType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
RatingType
;
// deleteValue: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
export
const
QRating
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2"
>
<
div
className
=
"flex h-16 w-full place-content-between items-center"
>
<
input
type
=
"text"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"rating"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
className
=
"flex place-content-between items-center p-5"
>
<
input
name
=
"minRateDescription"
id
=
{
element
.
_id
}
className
=
"border-b-2 text-center"
size
=
{
10
}
placeholder
=
{
element
.
content
.
minRateDescription
}
></
input
>
{
element
.
content
.
choices
.
map
((
e
)
=>
(
<
input
name
=
"text"
id
=
{
element
.
_id
}
type
=
"text"
className
=
"border border-black rounded-full py-1 m-2 text-center"
size
=
{
1
}
placeholder
=
{
e
.
text
}
></
input
>
))
}
<
input
name
=
"maxRateDescription"
id
=
{
element
.
_id
}
className
=
"border-b-2 text-center"
size
=
{
10
}
placeholder
=
{
element
.
content
.
maxRateDescription
}
></
input
>
</
div
>
<
div
>
<
button
// type="button"
name
=
"rateValues"
id
=
{
element
.
_id
}
className
=
"border border-red-500 rounded mx-2 px-2"
// onClick={deleteValue}
>
삭제
</
button
>
<
button
className
=
"border border-blue-500 rounded mx-2 px-2"
>
추가
</
button
>
</
div
>
<
div
className
=
"flex w-full justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
옵션
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
};
frontend/src/questions/index.tsx
0 → 100644
View file @
373fe9c8
export
{
Question
}
from
"
./Question
"
;
frontend/src/survey/CreateSurvey.tsx
0 → 100644
View file @
373fe9c8
import
React
,
{
FormEvent
,
useState
}
from
"
react
"
;
import
{
questionApi
,
surveyApi
}
from
"
../apis
"
;
import
{
Question
}
from
"
../questions
"
;
import
{
BasicQuestionType
,
SurveyType
}
from
"
../types
"
;
export
const
CreateSurvey
=
()
=>
{
const
[
survey
,
setSurvey
]
=
useState
<
SurveyType
>
({
title
:
""
,
comment
:
""
,
questions
:
[],
});
const
handleChange
=
()
=>
{};
async
function
handleSubmit
(
event
:
FormEvent
)
{
event
.
preventDefault
();
try
{
const
newSurvey
:
SurveyType
=
await
surveyApi
.
createSurvey
(
survey
);
console
.
log
(
newSurvey
);
// setSuccess(true);
// setError("");
}
catch
(
error
)
{
console
.
log
(
"
에러발생
"
);
// catchErrors(error, setError)
}
finally
{
// setLoading(false);
}
}
async
function
addQuestion
()
{
try
{
const
newQuestion
:
BasicQuestionType
=
await
questionApi
.
createQuestion
();
setSurvey
({
...
survey
,
questions
:
[...
survey
.
questions
,
newQuestion
]
});
// setQuestions([...questions, newQuestion]);
// setSuccess(true);
// setError("");
}
catch
(
error
)
{
console
.
log
(
"
에러발생
"
);
// catchErrors(error, setError)
}
finally
{
// setLoading(false);
}
}
const
questions
=
survey
.
questions
;
return
(
<>
<
form
onSubmit
=
{
handleSubmit
}
>
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center mt-4"
>
<
input
type
=
"text"
name
=
"title"
className
=
"font-bold text-4xl text-center m-2 border-b-2"
placeholder
=
"설문지 제목"
onChange
=
{
handleChange
}
></
input
>
<
input
type
=
"text"
name
=
"comment"
className
=
"font-bold text-1xl text-center m-2 resize-none"
placeholder
=
"설문조사에 대한 설명을 입력해주세요"
size
=
{
50
}
onChange
=
{
handleChange
}
></
input
>
</
div
>
{
questions
.
map
((
question
)
=>
(
<
Question
element
=
{
question
}
/>
))
}
<
div
className
=
"flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3"
>
<
button
type
=
"button"
onClick
=
{
addQuestion
}
>
질문 추가
</
button
>
</
div
>
<
div
>
<
button
type
=
"submit"
className
=
"border bg-themeColor my-5 py-2 px-3 font-bold text-white"
>
설문조사 생성
</
button
>
</
div
>
</
div
>
</
form
>
</>
);
};
frontend/src/survey/index.tsx
0 → 100644
View file @
373fe9c8
export
{
CreateSurvey
}
from
"
./CreateSurvey
"
;
frontend/src/types/index.ts
View file @
373fe9c8
...
...
@@ -10,10 +10,10 @@ export interface SignupUser {
password
:
string
;
}
export
interface
SurveyType
{
export
interface
SurveyType
{
title
:
string
;
comment
:
string
;
questions
:
string
[];
questions
:
BasicQuestionType
[];
}
export
interface
BasicQuestionType
{
...
...
@@ -75,4 +75,4 @@ export interface RatingType extends BasicQuestionType {
minRateDescription
:
string
;
maxRateDescription
:
string
;
};
}
\ No newline at end of file
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment