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
2e1489ce
Commit
2e1489ce
authored
Jul 07, 2022
by
Jiwon Yoon
Browse files
usecontext
parent
eab79372
Changes
18
Show whitespace changes
Inline
Side-by-side
frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx
View file @
2e1489ce
import
React
,
{
useState
}
from
"
react
"
;
import
{
Question
}
from
"
./Question
"
;
import
axios
from
"
axios
"
;
import
{
QuestionProvider
}
from
"
./question.context
"
;
export
interface
BasicQuestionType
{
type
:
string
;
id
:
string
;
_
id
:
string
;
title
:
string
;
isRequired
:
boolean
;
comment
:
string
;
...
...
@@ -50,7 +50,7 @@ export interface RatingType extends BasicQuestionType {
const
EssayQ
:
EssayType
=
{
type
:
"
essay
"
,
id
:
"
000000000000
"
,
_
id
:
"
000000000000
"
,
title
:
"
Question Title
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
...
...
@@ -58,7 +58,7 @@ const EssayQ: EssayType = {
};
const
RadioQ
:
RadioType
=
{
type
:
"
radio
"
,
id
:
"
000000000001
"
,
_
id
:
"
000000000001
"
,
title
:
"
Question Title
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
...
...
@@ -70,7 +70,7 @@ const RadioQ: RadioType = {
};
const
CheckboxQ
:
CheckboxType
=
{
type
:
"
checkbox
"
,
id
:
"
000000000002
"
,
_
id
:
"
000000000002
"
,
title
:
"
Question Title
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
...
...
@@ -81,7 +81,7 @@ const CheckboxQ: CheckboxType = {
};
const
DropdownQ
:
DropdownType
=
{
type
:
"
dropdown
"
,
id
:
"
000000000003
"
,
_
id
:
"
000000000003
"
,
title
:
"
Question Title
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
...
...
@@ -92,7 +92,7 @@ const DropdownQ: DropdownType = {
};
const
FileQ
:
FileType
=
{
type
:
"
file
"
,
id
:
"
000000000004
"
,
_
id
:
"
000000000004
"
,
title
:
"
Question Title
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
...
...
@@ -103,7 +103,7 @@ const FileQ: FileType = {
};
const
RatingQ
:
RatingType
=
{
type
:
"
rating
"
,
id
:
"
000000000005
"
,
_
id
:
"
000000000005
"
,
title
:
"
Question Title
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
...
...
@@ -119,68 +119,14 @@ const RatingQ: RatingType = {
};
export
const
CreateSurveyForm
=
()
=>
{
const
[
c
ur
rentId
,
set
C
ur
rentId
]
=
useState
<
string
>
(
""
);
const
[
s
ur
vey
,
set
S
ur
vey
]
=
useState
(
);
const
[
error
,
setError
]
=
useState
(
""
);
const
[
disabled
,
setDisabled
]
=
useState
(
false
);
const
[
success
,
setSuccess
]
=
useState
(
false
);
const
[
questionList
,
setQuestionList
]
=
useState
<
Array
<
BasicQuestionType
>>
([
EssayQ
,
RadioQ
,
CheckboxQ
,
]);
const
[
survey
,
setSurvey
]
=
useState
();
function
changeCurrentId
(
event
:
React
.
MouseEvent
<
HTMLButtonElement
>
):
void
{
setCurrentId
(
event
.
currentTarget
.
id
);
}
function
QuestionListChange
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
):
void
{
const
newList
:
BasicQuestionType
[]
=
[...
questionList
];
const
obj
:
any
=
newList
.
find
((
a
)
=>
a
.
id
===
e
.
target
.
id
);
//고유 _id로 질문찾기
const
targetKey
:
any
=
e
.
target
.
name
;
obj
[
targetKey
]
=
e
.
target
.
value
;
setQuestionList
(
newList
);
}
async
function
addQuestion
(
event
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
{
event
.
preventDefault
();
try
{
const
res
=
await
axios
.
post
(
"
/api/question/create
"
);
console
.
log
(
"
서버연결됬나요
"
,
res
);
console
.
log
(
"
회원가입
"
);
setSuccess
(
true
);
setError
(
""
);
}
catch
(
error
)
{
console
.
log
(
"
에러발생
"
);
// catchErrors(error, setError)
}
finally
{
// setLoading(false);
}
//무작위로 12자리 ID제공, 추후에 질문을 DB에 생성하고 _id를 DB에서 가져오는 것으로 교체할 예정
function
getRandomInt
(
min
:
number
,
max
:
number
):
string
{
min
=
Math
.
ceil
(
min
);
max
=
Math
.
floor
(
max
);
const
randomNum
:
number
=
Math
.
floor
(
Math
.
random
()
*
(
max
-
min
))
+
min
;
return
randomNum
.
toString
();
}
const
randomId
:
string
=
getRandomInt
(
100000000000
,
999999999999
);
//새로운 질문 생성
const
newQ
:
EssayType
=
{
type
:
"
essay
"
,
id
:
randomId
,
title
:
"
Question
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
null
,
};
setQuestionList
([...
questionList
,
newQ
]);
}
function
deleteQuestion
():
void
{}
return
(
<>
{
console
.
log
(
currentId
)
}
<
QuestionProvider
>
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center mt-4"
>
<
input
...
...
@@ -195,18 +141,14 @@ export const CreateSurveyForm = () => {
cols
=
{
60
}
></
textarea
>
</
div
>
<
Question
questionList
=
{
questionList
}
QuestionListChange
=
{
QuestionListChange
}
addQuestion
=
{
addQuestion
}
changeCurrentId
=
{
changeCurrentId
}
/>
<
Question
/>
<
div
>
<
button
className
=
"border bg-themeColor my-5 py-2 px-3 font-bold text-white"
>
설문조사 생성
</
button
>
</
div
>
</
div
>
</
QuestionProvider
>
</>
);
};
frontend/src/CreateSurveyForm/Edit.tsx
View file @
2e1489ce
import
React
from
"
react
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
type
Props
=
{
id
:
string
;
changeCurrentId
:
(
event
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
=>
void
;
};
export
const
Edit
=
({
id
,
changeCurrentId
}:
Props
)
=>
{
export
const
Edit
=
({
id
}:
Props
)
=>
{
const
{
editClick
}
=
useQuestion
();
return
(
<
button
id
=
{
id
}
className
=
""
onClick
=
{
changeCurrentId
}
>
<
button
id
=
{
id
}
className
=
"
w-1/12
"
onClick
=
{
editClick
}
>
수정
</
button
>
);
...
...
frontend/src/CreateSurveyForm/QCheckbox.tsx
View file @
2e1489ce
import
React
from
"
react
"
;
import
{
CheckboxType
}
from
"
./CreateSurveyFormPage
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
Edit
}
from
"
./Edit
"
;
type
Props
=
{
element
:
CheckboxType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
QCheckbox
=
({
element
,
QuestionListChange
}:
Props
)
=>
(
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
=
{
element
.
name
}
id
=
"title"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
<
select
id
=
"Questions"
...
...
@@ -37,11 +41,11 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => (
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
{
element
.
name
}
id
=
"comment"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4"
>
...
...
@@ -60,6 +64,8 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => (
<
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/CreateSurveyForm/QDate.tsx
View file @
2e1489ce
import
{
useQuestion
}
from
"
./question.context
"
;
frontend/src/CreateSurveyForm/QDropdown.tsx
View file @
2e1489ce
import
React
from
"
react
"
;
import
{
DropdownType
}
from
"
./CreateSurveyFormPage
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
type
Props
=
{
element
:
DropdownType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
QDropdown
=
({
element
,
QuestionListChange
}:
Props
)
=>
(
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
=
{
element
.
name
}
id
=
"title"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
<
select
id
=
"Questions"
...
...
@@ -37,11 +39,11 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => (
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
{
element
.
name
}
id
=
"comment"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4"
>
...
...
@@ -62,4 +64,5 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => (
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
);
};
frontend/src/CreateSurveyForm/QEssay.tsx
View file @
2e1489ce
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
}
from
"
./CreateSurveyFormPage
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
Edit
}
from
"
./Edit
"
;
type
Props
=
{
element
:
EssayType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
changeCurrentId
:
(
event
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
=>
void
;
};
export
const
QEssay
=
({
element
,
QuestionListChange
,
changeCurrentId
,
}:
Props
)
=>
{
export
const
QEssay
=
({
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
}
id
=
{
element
.
_
id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
<
select
id
=
"Questions"
...
...
@@ -45,10 +42,10 @@ export const QEssay = ({
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
id
}
id
=
{
element
.
_
id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4 w-full justify-center"
>
...
...
@@ -58,7 +55,7 @@ export const QEssay = ({
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
옵션
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
<
Edit
id
=
{
element
.
i
d
}
changeCurrentId
=
{
changeCurrentI
d
}
/>
<
Edit
id
=
{
element
.
_
id
}
/>
</
div
>
</
div
>
);
...
...
frontend/src/CreateSurveyForm/QFile.tsx
View file @
2e1489ce
import
React
,
{
useState
}
from
"
react
"
;
import
{
FileType
}
from
"
./CreateSurveyFormPage
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
type
Props
=
{
element
:
FileType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
QFile
=
({
element
,
QuestionListChange
}:
Props
)
=>
{
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
=
{
element
.
name
}
id
=
"title"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
<
select
id
=
"Questions"
...
...
@@ -38,11 +40,11 @@ export const QFile = ({ element, QuestionListChange }: Props) => {
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
{
element
.
name
}
id
=
"comment"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4 w-full justify-center"
>
...
...
frontend/src/CreateSurveyForm/QMatrix.tsx
View file @
2e1489ce
import
{
useQuestion
}
from
"
./question.context
"
;
frontend/src/CreateSurveyForm/QRadio.tsx
View file @
2e1489ce
import
React
from
"
react
"
;
import
{
RadioType
}
from
"
./CreateSurveyFormPage
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
type
Props
=
{
element
:
RadioType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
QRadio
=
({
element
,
QuestionListChange
}:
Props
)
=>
(
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"
id
=
{
element
.
id
}
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
<
select
id
=
"Questions"
...
...
@@ -36,11 +38,11 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
id
=
{
element
.
id
}
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
</
div
>
<
div
className
=
"flex mt-4"
>
...
...
@@ -48,7 +50,7 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<
div
>
<
input
type
=
"radio"
id
=
{
element
.
id
}
id
=
{
element
.
_
id
}
name
=
"choice"
value
=
{
e
}
disabled
...
...
@@ -59,7 +61,7 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
// key={`${index}`}
className
=
"mx-2 border-b-2"
placeholder
=
{
e
}
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
<
button
></
button
>
</
div
>
...
...
@@ -74,4 +76,5 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
);
};
frontend/src/CreateSurveyForm/QRating.tsx
View file @
2e1489ce
import
React
from
"
react
"
;
import
{
RatingType
}
from
"
./CreateSurveyFormPage
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
type
Props
=
{
element
:
RatingType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
// deleteValue: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
export
const
QRating
=
({
element
,
QuestionListChange
}:
Props
)
=>
{
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
}
id
=
{
element
.
_
id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
<
select
id
=
{
element
.
id
}
id
=
{
element
.
_
id
}
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"
>
<
option
>
질문종류
</
option
>
...
...
@@ -40,16 +42,16 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
id
}
id
=
{
element
.
_
id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
Q
uestionListChange
}
onChange
=
{
q
uestionListChange
}
></
input
>
</
div
>
<
div
className
=
"flex place-content-between items-center p-5"
>
<
input
name
=
"minRateDescription"
id
=
{
element
.
id
}
id
=
{
element
.
_
id
}
className
=
"border-b-2 text-center"
size
=
{
10
}
placeholder
=
{
element
.
content
.
minRateDescription
}
...
...
@@ -57,7 +59,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
{
element
.
content
.
rateValues
.
map
((
e
)
=>
(
<
input
name
=
"text"
id
=
{
element
.
id
}
id
=
{
element
.
_
id
}
type
=
"text"
className
=
"border border-black rounded-full py-1 m-2 text-center"
size
=
{
1
}
...
...
@@ -66,7 +68,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
))
}
<
input
name
=
"maxRateDescription"
id
=
{
element
.
id
}
id
=
{
element
.
_
id
}
className
=
"border-b-2 text-center"
size
=
{
10
}
placeholder
=
{
element
.
content
.
maxRateDescription
}
...
...
@@ -76,7 +78,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
<
button
// type="button"
name
=
"rateValues"
id
=
{
element
.
id
}
id
=
{
element
.
_
id
}
className
=
"border border-red-500 rounded mx-2 px-2"
// onClick={deleteValue}
>
...
...
frontend/src/CreateSurveyForm/Question.tsx
View file @
2e1489ce
import
React
,
{
useState
}
from
"
react
"
;
import
{
BasicQuestionType
}
from
"
./CreateSurveyFormPage
"
;
import
{
QEssay
}
from
"
./QEssay
"
;
import
{
QCheckbox
}
from
"
./QCheckbox
"
;
import
{
QRadio
}
from
"
./QRadio
"
;
import
{
QDropdown
}
from
"
./QDropdown
"
;
import
{
QFile
}
from
"
./QFile
"
;
import
{
QRating
}
from
"
./QRating
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
type
Props
=
{
questionList
:
BasicQuestionType
[];
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
addQuestion
:
(
event
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
=>
void
;
changeCurrentId
:
(
event
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
=>
void
;
};
type
Props
=
{};
export
const
Question
=
({}:
Props
)
=>
{
const
{
addQuestion
,
questionList
,
currentId
}
=
useQuestion
();
export
const
Question
=
({
questionList
,
QuestionListChange
,
addQuestion
,
changeCurrentId
,
}:
Props
)
=>
{
return
(
<>
{
console
.
log
(
questionList
)
}
{
console
.
log
(
questionList
,
currentId
)
}
{
questionList
.
map
((
element
)
=>
{
switch
(
element
.
type
)
{
case
"
essay
"
:
return
(
<
QEssay
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
changeCurrentId
=
{
changeCurrentId
}
/>
);
return
<
QEssay
element
=
{
element
}
/>;
case
"
radio
"
:
return
(
<
QRadio
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
return
<
QRadio
element
=
{
element
}
/>;
case
"
checkbox
"
:
return
(
<
QCheckbox
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
return
<
QCheckbox
element
=
{
element
}
/>;
case
"
dropdown
"
:
return
(
<
QDropdown
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
return
<
QDropdown
element
=
{
element
}
/>;
case
"
file
"
:
return
(
<
QFile
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
return
<
QFile
element
=
{
element
}
/>;
case
"
rating
"
:
return
(
<
QRating
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
return
<
QRating
element
=
{
element
}
/>;
default
:
break
;
}
...
...
frontend/src/CreateSurveyForm/question.context.tsx
0 → 100644
View file @
2e1489ce
import
React
,
{
createContext
,
FC
,
ReactNode
,
useContext
,
useState
,
}
from
"
react
"
;
import
axios
from
"
axios
"
;
import
{
BasicQuestionType
}
from
"
./CreateSurveyFormPage
"
;
interface
IQuestionContext
{
questionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
questionList
:
BasicQuestionType
[];
editClick
:
(
e
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
=>
void
;
currentId
:
string
;
addQuestion
:
(
e
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
=>
Promise
<
void
>
;
}
const
QuestionContext
=
createContext
<
IQuestionContext
>
({
questionListChange
:
()
=>
{},
questionList
:
[],
editClick
:
()
=>
{},
currentId
:
""
,
addQuestion
:
async
()
=>
{},
});
export
const
QuestionProvider
:
FC
<
{
children
:
ReactNode
}
>
=
({
children
})
=>
{
const
[
questionList
,
setQuestionList
]
=
useState
<
Array
<
BasicQuestionType
>>
(
[]
);
const
[
currentId
,
setCurrentId
]
=
useState
<
string
>
(
""
);
function
questionListChange
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
):
void
{
const
newList
:
BasicQuestionType
[]
=
[...
questionList
];
const
obj
:
any
=
newList
.
find
((
a
)
=>
a
.
_id
===
e
.
target
.
id
);
//고유 _id로 질문찾기
const
targetKey
:
any
=
e
.
target
.
name
;
obj
[
targetKey
]
=
e
.
target
.
value
;
setQuestionList
(
newList
);
}
async
function
addQuestion
(
e
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
{
try
{
const
res
=
await
axios
.
post
(
"
/api/questions/create
"
,
{
type
:
"
essay
"
,
title
:
"
Question Title
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
null
,
});
console
.
log
(
res
.
data
);
setQuestionList
([...
questionList
,
res
.
data
]);
// setSuccess(true);
// setError("");
}
catch
(
error
)
{
console
.
log
(
"
에러발생
"
);
// catchErrors(error, setError)
}
finally
{
// setLoading(false);
}
}
function
editClick
(
e
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
{
setCurrentId
(
e
.
currentTarget
.
id
);
}
return
(
<
QuestionContext
.
Provider
value
=
{
{
questionListChange
,
addQuestion
,
questionList
,
editClick
,
currentId
,
}
}
>
{
children
}
</
QuestionContext
.
Provider
>
);
};
export
const
useQuestion
=
()
=>
useContext
(
QuestionContext
);
frontend/src/index.html
View file @
2e1489ce
...
...
@@ -4,7 +4,7 @@
<meta
charset=
"UTF-8"
/>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<title>
Webpack TypeScript React TailwindCSS Template
</title>
<title>
Simple Survey Form
</title>
</head>
<body>
<div
id=
"root"
></div>
...
...
src/controllers/question.controller.ts
View file @
2e1489ce
...
...
@@ -5,5 +5,5 @@ export const createQuestion = asyncWrap(async (req, res) => {
const
question
=
req
.
body
;
console
.
log
(
"
question body
"
,
question
);
const
newQuestion
=
await
questionDb
.
createQuestion
(
question
);
return
res
.
json
(
q
uestion
);
return
res
.
json
(
newQ
uestion
);
});
src/db/question.db.ts
View file @
2e1489ce
...
...
@@ -2,5 +2,13 @@ import { Question, IQuestion } from "../models";
export
const
createQuestion
=
async
(
question
:
IQuestion
)
=>
{
const
newQuestion
=
await
Question
.
create
(
question
);
return
newQuestion
;
const
newQ
=
{
_id
:
newQuestion
.
_id
,
type
:
newQuestion
.
type
,
title
:
newQuestion
.
title
,
isRequired
:
newQuestion
.
isRequired
,
comment
:
newQuestion
.
comment
,
content
:
newQuestion
.
content
,
}
return
newQ
;
};
src/models/question.model.ts
View file @
2e1489ce
...
...
@@ -2,7 +2,7 @@ import { model, Schema, Types } from "mongoose";
export
interface
IQuestion
{
type
:
string
;
id
:
string
;
//
id: string;
title
?:
string
;
isRequired
:
boolean
;
comment
?:
string
;
...
...
@@ -10,7 +10,7 @@ export interface IQuestion {
}
const
schema
=
new
Schema
<
IQuestion
>
({
id
:
{
type
:
String
},
//
id: {type:String},
type
:{
type
:
String
},
title
:
{
type
:
String
},
isRequired
:
{
type
:
Boolean
},
...
...
src/routes/index.ts
View file @
2e1489ce
...
...
@@ -7,6 +7,6 @@ const router = express.Router();
router
.
use
(
"
/users
"
,
userRouter
);
router
.
use
(
"
/auth
"
,
authRouter
);
router
.
use
(
"
/question
"
,
questionRouter
)
router
.
use
(
"
/question
s
"
,
questionRouter
)
export
default
router
;
src/routes/question.route.ts
View file @
2e1489ce
...
...
@@ -5,7 +5,6 @@ const router = express.Router();
router
.
route
(
"
/create
"
)
.
get
()
.
post
(
questionCtrl
.
createQuestion
);
export
default
router
;
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