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
f10cce0d
Commit
f10cce0d
authored
Jul 04, 2022
by
Jiwon Yoon
Browse files
Type, 함수들 Question->Page
parent
6702d090
Changes
8
Hide whitespace changes
Inline
Side-by-side
frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx
View file @
f10cce0d
import
React
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
Question
}
from
"
./Question
"
;
interface
BasicQuestionType
{
export
interface
BasicQuestionType
{
type
:
string
;
name
:
string
;
id
:
string
;
title
:
string
;
isRequired
:
boolean
;
comment
:
string
;
content
:
any
;
[
key
:
string
]:
string
|
number
|
boolean
|
any
;
}
export
interface
EssayType
extends
BasicQuestionType
{}
export
interface
RadioType
extends
BasicQuestionType
{
content
:
{
hasOther
:
boolean
;
choices
:
string
[];
otherText
:
string
;
};
}
export
interface
CheckboxType
extends
BasicQuestionType
{
content
:
{
choices
:
string
[];
maxCount
:
number
;
};
}
export
interface
DropdownType
extends
BasicQuestionType
{
content
:
{
choices
:
string
[];
hasNone
:
boolean
;
};
}
export
interface
FileType
extends
BasicQuestionType
{
content
:
{
filename
:
string
;
value
:
string
;
};
}
export
interface
RatingType
extends
BasicQuestionType
{
content
:
{
rateMin
:
number
;
rateMax
:
number
;
minRateDescription
:
string
;
maxRateDescription
:
string
;
};
}
interface
EssayType
extends
BasicQuestionType
{}
let
EssayQ
:
EssayType
=
{
type
:
"
comment
"
,
name
:
"
Question1
"
,
title
:
"
제목을 입력하세요
"
,
const
EssayQ
:
EssayType
=
{
type
:
"
essay
"
,
id
:
"
000000000000
"
,
title
:
"
Question1
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
null
,
};
const
RadioQ
:
RadioType
=
{
type
:
"
radio
"
,
id
:
"
000000000001
"
,
title
:
"
Question2
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
hasOther
:
false
,
otherText
:
""
,
choices
:
[
"
radio1
"
,
"
radio2
"
,
"
radio3
"
],
},
};
const
CheckboxQ
:
CheckboxType
=
{
type
:
"
checkbox
"
,
id
:
"
000000000002
"
,
title
:
"
Question3
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
choices
:
[
"
check1
"
,
"
check2
"
,
"
check3
"
],
maxCount
:
2
,
},
};
const
DropdownQ
:
DropdownType
=
{
type
:
"
dropdown
"
,
id
:
"
000000000003
"
,
title
:
"
Question4
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
choices
:
[
"
drop1
"
,
"
drop2
"
,
"
drop3
"
],
hasNone
:
false
,
},
};
const
FileQ
:
FileType
=
{
type
:
"
file
"
,
id
:
"
000000000004
"
,
title
:
"
Question5
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
filename
:
""
,
value
:
""
,
},
};
const
RatingQ
:
RatingType
=
{
type
:
"
rating
"
,
id
:
"
000000000005
"
,
title
:
"
Question6
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
rateMin
:
0
,
rateMax
:
10
,
minRateDescription
:
"
가장 낮음
"
,
maxRateDescription
:
"
가장 높음
"
,
},
};
interface
MultiChoiceType
extends
BasicQuestionType
{
hasOther
:
boolean
;
choices
:
any
;
otherText
:
string
;
}
export
const
CreateSurveyForm
=
()
=>
{
const
[
questionList
,
setQuestionList
]
=
useState
<
Array
<
BasicQuestionType
>>
([
EssayQ
,
RadioQ
,
CheckboxQ
,
]);
const
[
survey
,
setSurvey
]
=
useState
();
export
const
CreateSurveyForm
=
()
=>
(
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center"
>
<
input
type
=
"text"
className
=
"font-bold text-4xl text-center m-2 border-b-2"
placeholder
=
"설문지 제목"
></
input
>
<
textarea
className
=
"font-bold text-1xl text-center m-2 resize-none"
placeholder
=
"설문조사에 대한 설명을 입력해주세요"
rows
=
{
2
}
cols
=
{
60
}
></
textarea
>
</
div
>
function
QuestionListChange
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
):
void
{
const
newList
:
BasicQuestionType
[]
=
[...
questionList
];
const
targetId
:
any
=
e
.
target
.
name
;
const
obj
:
any
=
newList
.
find
((
a
)
=>
a
.
id
===
e
.
target
.
id
);
obj
[
targetId
]
=
e
.
target
.
value
;
setQuestionList
(
newList
);
}
<
Question
/>
function
addQuestion
():
void
{
//무작위로 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
]);
}
<
div
className
=
"flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3"
>
질문 추가 +
function
deleteQuestion
():
void
{}
return
(
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center"
>
<
input
type
=
"text"
className
=
"font-bold text-4xl text-center m-2 border-b-2"
placeholder
=
"설문지 제목"
></
input
>
<
textarea
className
=
"font-bold text-1xl text-center m-2 resize-none"
placeholder
=
"설문조사에 대한 설명을 입력해주세요"
rows
=
{
2
}
cols
=
{
60
}
></
textarea
>
</
div
>
<
Question
questionList
=
{
questionList
}
QuestionListChange
=
{
QuestionListChange
}
addQuestion
=
{
addQuestion
}
/>
</
div
>
</
div
>
)
;
);
}
;
frontend/src/CreateSurveyForm/QCheckbox.tsx
View file @
f10cce0d
import
React
from
"
react
"
;
import
{
CheckboxType
}
from
"
./
Question
"
;
import
{
CheckboxType
}
from
"
./
CreateSurveyFormPage
"
;
type
Props
=
{
element
:
CheckboxType
;
...
...
@@ -19,18 +19,19 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => (
></
input
>
<
select
id
=
"Questions"
className
=
"w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor
focus:themeColor block
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"
>
<
option
>
질문종류
</
option
>
<
option
value
=
"
E
ssay"
>
주관식
</
option
>
<
option
value
=
"
MultipleChoice
"
>
객관식
</
option
>
<
option
value
=
"
D
ropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"
C
heck
B
ox"
selected
>
<
option
value
=
"
e
ssay"
>
주관식
</
option
>
<
option
value
=
"
radio
"
>
객관식
</
option
>
<
option
value
=
"
d
ropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"
c
heck
b
ox"
selected
>
체크박스(객관식)
</
option
>
<
option
value
=
"Rating"
>
선형
</
option
>
<
option
value
=
"Grid"
>
그리드
</
option
>
<
option
value
=
"Date"
>
날짜
</
option
>
<
option
value
=
"file"
>
파일업로드
</
option
>
<
option
value
=
"rating"
>
선형
</
option
>
<
option
value
=
"grid"
>
그리드
</
option
>
<
option
value
=
"date"
>
날짜
</
option
>
</
select
>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
...
...
frontend/src/CreateSurveyForm/QDropdown.tsx
View file @
f10cce0d
import
React
from
"
react
"
;
import
{
DropdownType
}
from
"
./
Question
"
;
import
{
DropdownType
}
from
"
./
CreateSurveyFormPage
"
;
type
Props
=
{
element
:
DropdownType
;
...
...
@@ -19,18 +19,19 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => (
></
input
>
<
select
id
=
"Questions"
className
=
"w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor
focus:themeColor block
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"
>
<
option
>
질문종류
</
option
>
<
option
value
=
"Essay"
>
주관식
</
option
>
<
option
value
=
"MultipleChoice"
>
객관식
</
option
>
<
option
value
=
"Dropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"CheckBox"
selected
>
체크박스(객관식)
<
option
value
=
"essay"
>
주관식
</
option
>
<
option
value
=
"radio"
>
객관식
</
option
>
<
option
value
=
"dropdown"
selected
>
드롭다운(객관식)
</
option
>
<
option
value
=
"Rating"
>
선형
</
option
>
<
option
value
=
"Grid"
>
그리드
</
option
>
<
option
value
=
"Date"
>
날짜
</
option
>
<
option
value
=
"checkbox"
>
체크박스(객관식)
</
option
>
<
option
value
=
"file"
>
파일업로드
</
option
>
<
option
value
=
"rating"
>
선형
</
option
>
<
option
value
=
"grid"
>
그리드
</
option
>
<
option
value
=
"date"
>
날짜
</
option
>
</
select
>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
...
...
frontend/src/CreateSurveyForm/Q
A
ssay.tsx
→
frontend/src/CreateSurveyForm/Q
E
ssay.tsx
View file @
f10cce0d
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
}
from
"
./
Question
"
;
import
{
EssayType
}
from
"
./
CreateSurveyFormPage
"
;
type
Props
=
{
element
:
EssayType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
Q
A
ssay
=
({
element
,
QuestionListChange
}:
Props
)
=>
{
export
const
Q
E
ssay
=
({
element
,
QuestionListChange
}:
Props
)
=>
{
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
=
{
QuestionListChange
}
...
...
@@ -23,22 +23,23 @@ export const QAssay = ({ element, QuestionListChange }: Props) => {
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
>
<
option
value
=
"
E
ssay"
selected
>
<
option
value
=
"
e
ssay"
selected
>
주관식
</
option
>
<
option
value
=
"MultipleChoice"
>
객관식
</
option
>
<
option
value
=
"Dropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"CheckBox"
>
체크박스(객관식)
</
option
>
<
option
value
=
"Rating"
>
선형
</
option
>
<
option
value
=
"Grid"
>
그리드
</
option
>
<
option
value
=
"Date"
>
날짜
</
option
>
<
option
value
=
"radio"
>
객관식
</
option
>
<
option
value
=
"dropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"checkbox"
>
체크박스(객관식)
</
option
>
<
option
value
=
"file"
>
파일업로드
</
option
>
<
option
value
=
"rating"
>
선형
</
option
>
<
option
value
=
"grid"
>
그리드
</
option
>
<
option
value
=
"date"
>
날짜
</
option
>
</
select
>
</
div
>
<
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
=
{
QuestionListChange
}
...
...
frontend/src/CreateSurveyForm/QFile.tsx
View file @
f10cce0d
import
React
,
{
useState
}
from
"
react
"
;
import
{
FileType
}
from
"
./
Question
"
;
import
{
FileType
}
from
"
./
CreateSurveyFormPage
"
;
type
Props
=
{
element
:
FileType
;
...
...
@@ -23,15 +23,16 @@ export const QFile = ({ element, QuestionListChange }: Props) => {
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
>
<
option
value
=
"Essay"
selected
>
주관식
<
option
value
=
"essay"
>
주관식
</
option
>
<
option
value
=
"radio"
>
객관식
</
option
>
<
option
value
=
"dropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"checkbox"
>
체크박스(객관식)
</
option
>
<
option
value
=
"file"
selected
>
파일업로드
</
option
>
<
option
value
=
"MultipleChoice"
>
객관식
</
option
>
<
option
value
=
"Dropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"CheckBox"
>
체크박스(객관식)
</
option
>
<
option
value
=
"Rating"
>
선형
</
option
>
<
option
value
=
"Grid"
>
그리드
</
option
>
<
option
value
=
"Date"
>
날짜
</
option
>
<
option
value
=
"rating"
>
선형
</
option
>
<
option
value
=
"grid"
>
그리드
</
option
>
<
option
value
=
"date"
>
날짜
</
option
>
</
select
>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
...
...
frontend/src/CreateSurveyForm/QRadio.tsx
View file @
f10cce0d
import
React
from
"
react
"
;
import
{
RadioType
}
from
"
./
Question
"
;
import
{
RadioType
}
from
"
./
CreateSurveyFormPage
"
;
type
Props
=
{
element
:
RadioType
;
...
...
@@ -11,8 +11,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<
div
className
=
"flex h-16 w-full place-content-between items-center"
>
<
input
type
=
"text"
name
=
{
element
.
name
}
id
=
"title"
id
=
{
element
.
id
}
name
=
"title"
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
QuestionListChange
}
...
...
@@ -36,8 +36,8 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
{
element
.
name
}
id
=
"comment"
id
=
{
element
.
id
}
name
=
"comment"
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
QuestionListChange
}
...
...
frontend/src/CreateSurveyForm/Question.tsx
View file @
f10cce0d
import
React
,
{
useState
}
from
"
react
"
;
import
{
QAssay
}
from
"
./QAssay
"
;
import
{
BasicQuestionType
}
from
"
./CreateSurveyFormPage
"
;
import
{
QEssay
}
from
"
./QEssay
"
;
import
{
QCheckbox
}
from
"
./QCheckbox
"
;
import
{
QRadio
}
from
"
./QRadio
"
;
import
{
QDropdown
}
from
"
./QDropdown
"
;
import
{
QFile
}
from
"
./QFile
"
;
export
interface
BasicQuestionType
{
type
:
string
;
name
:
string
;
title
:
string
;
isRequired
:
boolean
;
comment
:
string
;
content
:
any
;
[
key
:
string
]:
string
|
number
|
boolean
|
any
;
}
export
interface
EssayType
extends
BasicQuestionType
{}
export
interface
RadioType
extends
BasicQuestionType
{
content
:
{
hasOther
:
boolean
;
choices
:
string
[];
otherText
:
string
;
};
}
export
interface
CheckboxType
extends
BasicQuestionType
{
content
:
{
choices
:
string
[];
maxCount
:
number
;
};
}
export
interface
DropdownType
extends
BasicQuestionType
{
content
:
{
choices
:
string
[];
hasNone
:
boolean
;
};
}
export
interface
FileType
extends
BasicQuestionType
{
content
:
{
filename
:
string
;
value
:
string
;
};
}
const
EssayQ
:
EssayType
=
{
type
:
"
assay
"
,
name
:
"
Question1
"
,
title
:
"
Question1
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
null
,
};
const
RadioQ
:
RadioType
=
{
type
:
"
radio
"
,
name
:
"
Question2
"
,
title
:
"
Question2
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
hasOther
:
false
,
otherText
:
""
,
choices
:
[
"
radio1
"
,
"
radio2
"
,
"
radio3
"
],
},
};
const
CheckboxQ
:
CheckboxType
=
{
type
:
"
checkbox
"
,
name
:
"
Question3
"
,
title
:
"
Question3
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
choices
:
[
"
check1
"
,
"
check2
"
,
"
check3
"
],
maxCount
:
2
,
},
};
const
DropdownQ
:
DropdownType
=
{
type
:
"
dropdown
"
,
name
:
"
Question4
"
,
title
:
"
Question4
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
choices
:
[
"
drop1
"
,
"
drop2
"
,
"
drop3
"
],
hasNone
:
false
,
},
};
const
FileQ
:
FileType
=
{
type
:
"
file
"
,
name
:
"
Question5
"
,
title
:
"
Question5
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
filename
:
""
,
value
:
""
,
},
type
Props
=
{
questionList
:
BasicQuestionType
[];
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
addQuestion
:
()
=>
void
;
};
// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
export
const
Question
=
()
=>
{
const
[
questionList
,
setQuestionList
]
=
useState
<
BasicQuestionType
[]
>
([
EssayQ
,
RadioQ
,
CheckboxQ
,
DropdownQ
,
FileQ
,
]);
// const [survey, setSurvey] = useState();
function
QuestionListChange
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
):
void
{
const
newList
:
BasicQuestionType
[]
=
[...
questionList
];
const
targetId
:
any
=
e
.
target
.
id
;
const
obj
:
any
=
newList
.
find
((
a
)
=>
a
.
name
===
e
.
target
.
name
);
obj
[
targetId
]
=
e
.
target
.
value
;
setQuestionList
(
newList
);
}
export
const
Question
=
({
questionList
,
QuestionListChange
,
addQuestion
,
}:
Props
)
=>
{
return
(
<>
{
console
.
log
(
questionList
)
}
{
questionList
.
map
((
element
)
=>
{
switch
(
element
.
type
)
{
case
"
a
ssay
"
:
case
"
e
ssay
"
:
return
(
<
Q
A
ssay
<
Q
E
ssay
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
...
...
@@ -154,10 +57,14 @@ export const Question = () => {
QuestionListChange
=
{
QuestionListChange
}
/>
);
default
:
break
;
}
})
}
<
div
className
=
"flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3"
>
<
button
onClick
=
{
addQuestion
}
>
질문 추가
</
button
>
</
div
>
</>
);
};
src/config.ts
View file @
f10cce0d
export
const
mongoUri
=
"
mongodb://localhost/survey
"
;
export
const
mongoUri
=
"
mongodb://localhost
:27017
/survey
"
;
export
const
jwtCofig
=
{
secret
:
"
HelloSecretString
"
,
...
...
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