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
6702d090
Commit
6702d090
authored
Jul 03, 2022
by
Jiwon Yoon
Browse files
Qcheckbox, QFile
parent
d24ccceb
Changes
4
Hide whitespace changes
Inline
Side-by-side
frontend/src/CreateSurveyForm/QCheckbox.tsx
View file @
6702d090
...
...
@@ -3,14 +3,20 @@ import { CheckboxType } from "./Question";
type
Props
=
{
element
:
CheckboxType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
QCheckbox
=
({
element
}:
Props
)
=>
(
export
const
QCheckbox
=
({
element
,
QuestionListChange
}:
Props
)
=>
(
<
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"
>
<
p
className
=
"text-xl font-bold ml-6 border-b-2"
>
<
input
type
=
"text"
placeholder
=
{
element
.
title
}
></
input
>
</
p
>
<
input
type
=
"text"
name
=
{
element
.
name
}
id
=
"title"
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
QuestionListChange
}
></
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"
...
...
@@ -27,13 +33,15 @@ export const QCheckbox = ({ element }: Props) => (
<
option
value
=
"Date"
>
날짜
</
option
>
</
select
>
</
div
>
<
div
className
=
"flex "
>
<
textarea
className
=
"border"
rows
=
{
1
}
cols
=
{
80
}
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
{
element
.
name
}
id
=
"comment"
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
></
textarea
>
onChange
=
{
QuestionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
string
)
=>
(
...
...
frontend/src/CreateSurveyForm/QDropdown.tsx
View file @
6702d090
import
React
from
"
react
"
;
import
{
DropdownType
}
from
"
./Question
"
;
type
Props
=
{
element
:
DropdownType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
QDropdown
=
({
element
,
QuestionListChange
}:
Props
)
=>
(
<
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"
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
QuestionListChange
}
></
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"
>
<
option
>
질문종류
</
option
>
<
option
value
=
"Essay"
>
주관식
</
option
>
<
option
value
=
"MultipleChoice"
>
객관식
</
option
>
<
option
value
=
"Dropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"CheckBox"
selected
>
체크박스(객관식)
</
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"
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
QuestionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
string
)
=>
(
<
div
>
<
input
type
=
"checkbox"
checked
=
{
false
}
></
input
>
<
input
type
=
"text"
className
=
"mx-2 border-b-2"
placeholder
=
{
e
}
></
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/CreateSurveyForm/QFile.tsx
View file @
6702d090
import
React
,
{
useState
}
from
"
react
"
;
import
{
FileType
}
from
"
./Question
"
;
type
Props
=
{
element
:
FileType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
QFile
=
({
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"
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
QuestionListChange
}
></
input
>
<
select
id
=
"Questions"
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
>
<
option
value
=
"MultipleChoice"
>
객관식
</
option
>
<
option
value
=
"Dropdown"
>
드롭다운(객관식)
</
option
>
<
option
value
=
"CheckBox"
>
체크박스(객관식)
</
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"
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/CreateSurveyForm/Question.tsx
View file @
6702d090
...
...
@@ -2,6 +2,8 @@ import React, { useState } from "react";
import
{
QAssay
}
from
"
./QAssay
"
;
import
{
QCheckbox
}
from
"
./QCheckbox
"
;
import
{
QRadio
}
from
"
./QRadio
"
;
import
{
QDropdown
}
from
"
./QDropdown
"
;
import
{
QFile
}
from
"
./QFile
"
;
export
interface
BasicQuestionType
{
type
:
string
;
...
...
@@ -16,17 +18,28 @@ export interface EssayType extends BasicQuestionType {}
export
interface
RadioType
extends
BasicQuestionType
{
content
:
{
hasOther
:
boolean
;
choices
:
any
[];
choices
:
string
[];
otherText
:
string
;
};
}
export
interface
CheckboxType
extends
BasicQuestionType
{
content
:
{
choices
:
any
[];
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
"
,
...
...
@@ -44,7 +57,7 @@ const RadioQ: RadioType = {
content
:
{
hasOther
:
false
,
otherText
:
""
,
choices
:
[
"
1
"
,
"
2
"
,
"
3
"
],
choices
:
[
"
radio1
"
,
"
radio2
"
,
"
radio
3
"
],
},
};
const
CheckboxQ
:
CheckboxType
=
{
...
...
@@ -54,10 +67,32 @@ const CheckboxQ: CheckboxType = {
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
choices
:
[
"
ch1
"
,
"
ch2
"
,
"
ch3
"
],
choices
:
[
"
ch
eck
1
"
,
"
ch
eck
2
"
,
"
ch
eck
3
"
],
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
:
""
,
},
};
// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
...
...
@@ -65,6 +100,9 @@ export const Question = () => {
const
[
questionList
,
setQuestionList
]
=
useState
<
BasicQuestionType
[]
>
([
EssayQ
,
RadioQ
,
CheckboxQ
,
DropdownQ
,
FileQ
,
]);
// const [survey, setSurvey] = useState();
...
...
@@ -96,19 +134,29 @@ export const Question = () => {
/>
);
case
"
checkbox
"
:
return
<
QCheckbox
element
=
{
element
}
/>;
return
(
<
QCheckbox
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
case
"
dropdown
"
:
return
(
<
QDropdown
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
case
"
file
"
:
return
(
<
QFile
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
default
:
break
;
}
// if (element.type === "assay") {
// return (
// <QAssay element={element} QuestionListChange={QuestionListChange} />
// );
// } else if (element.type === "radio") {
// return <QRadio element={element} />;
// } else if (element.type === "checkbox") {
// return <QCheckbox element={element} />;
// }
})
}
</>
);
...
...
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