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
d24ccceb
Commit
d24ccceb
authored
Jul 02, 2022
by
Jiwon Yoon
Browse files
onChange함수, UI수정
parent
9a60dc8a
Changes
9
Show whitespace changes
Inline
Side-by-side
frontend/src/CreateSurveyForm/Q
_
Assay.tsx
→
frontend/src/CreateSurveyForm/QAssay.tsx
View file @
d24ccceb
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
,
BasicQuestionType
}
from
"
./Question
"
;
import
{
EssayType
}
from
"
./Question
"
;
type
Props
=
{
element
:
EssayType
;
q
uestionList
:
BasicQuestionType
[]
;
Q
uestionList
Change
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
Q_Assay
=
({
element
,
questionList
}:
Props
)
=>
{
console
.
log
(
questionList
);
export
const
QAssay
=
({
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"
>
<
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 w-full mr-3 p-2.5"
...
...
@@ -30,16 +34,18 @@ export const Q_Assay = ({ element, questionList }: Props) => {
<
option
value
=
"Date"
>
날짜
</
option
>
</
select
>
</
div
>
<
div
className
=
"flex w-full"
>
<
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
border mt-4
"
>
<
textarea
className
=
"
resize-none"
readOnly
></
textarea
>
<
div
id
=
"commentarea"
className
=
"flex
mt-4 w-full justify-center
"
>
<
input
className
=
"
border w-11/12 h-16"
disabled
></
input
>
</
div
>
<
div
className
=
"flex w-full justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
...
...
frontend/src/CreateSurveyForm/Q
_
Checkbox.tsx
→
frontend/src/CreateSurveyForm/QCheckbox.tsx
View file @
d24ccceb
...
...
@@ -5,7 +5,7 @@ type Props = {
element
:
CheckboxType
;
};
export
const
Q
_
Checkbox
=
({
element
}:
Props
)
=>
(
export
const
QCheckbox
=
({
element
}:
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"
>
...
...
frontend/src/CreateSurveyForm/Q
_
Date.tsx
→
frontend/src/CreateSurveyForm/QDate.tsx
View file @
d24ccceb
File moved
frontend/src/CreateSurveyForm/Q
_
Dropdown.tsx
→
frontend/src/CreateSurveyForm/QDropdown.tsx
View file @
d24ccceb
File moved
frontend/src/CreateSurveyForm/Q
_
File.tsx
→
frontend/src/CreateSurveyForm/QFile.tsx
View file @
d24ccceb
File moved
frontend/src/CreateSurveyForm/Q
_
Matrix.tsx
→
frontend/src/CreateSurveyForm/QMatrix.tsx
View file @
d24ccceb
File moved
frontend/src/CreateSurveyForm/Q
_
Radio.tsx
→
frontend/src/CreateSurveyForm/QRadio.tsx
View file @
d24ccceb
...
...
@@ -3,14 +3,20 @@ import { RadioType } from "./Question";
type
Props
=
{
element
:
RadioType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
export
const
Q
_
Radio
=
({
element
}:
Props
)
=>
(
export
const
QRadio
=
({
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
>
<
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 focus:themeColor block w-full mr-3 p-2.5"
...
...
@@ -27,22 +33,26 @@ export const Q_Radio = ({ 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"
>
<
div
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
string
)
=>
(
<
div
>
<
input
type
=
"radio"
id
=
{
e
}
name
=
"choice"
value
=
{
e
}
checked
=
{
false
}
/>
<
input
type
=
"text"
name
=
"content"
className
=
"mx-2 border-b-2"
placeholder
=
{
e
}
onChange
=
{
QuestionListChange
}
></
input
>
<
button
></
button
>
</
div
>
...
...
frontend/src/CreateSurveyForm/Q
_
Rating.tsx
→
frontend/src/CreateSurveyForm/QRating.tsx
View file @
d24ccceb
File moved
frontend/src/CreateSurveyForm/Question.tsx
View file @
d24ccceb
import
React
from
"
react
"
;
import
{
Q
_
Assay
}
from
"
./Q
_
Assay
"
;
import
{
Q
_
Checkbox
}
from
"
./Q
_
Checkbox
"
;
import
{
Q
_
Radio
}
from
"
./Q
_
Radio
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
QAssay
}
from
"
./QAssay
"
;
import
{
QCheckbox
}
from
"
./QCheckbox
"
;
import
{
QRadio
}
from
"
./QRadio
"
;
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
{}
let
EssayQ
:
EssayType
=
{
type
:
"
assay
"
,
name
:
"
Question1
"
,
title
:
"
Question1
"
,
isRequired
:
false
,
content
:
null
,
};
export
interface
RadioType
extends
BasicQuestionType
{
content
:
{
hasOther
:
boolean
;
...
...
@@ -27,47 +20,96 @@ export interface RadioType extends BasicQuestionType {
otherText
:
string
;
};
}
let
RadioQ
:
RadioType
=
{
export
interface
CheckboxType
extends
BasicQuestionType
{
content
:
{
choices
:
any
[];
maxCount
:
number
;
};
}
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
:
[
"
1
"
,
"
2
"
,
"
3
"
],
},
};
export
interface
CheckboxType
extends
BasicQuestionType
{
content
:
{
choices
:
any
[];
maxCount
:
number
;
};
}
let
CheckboxQ
:
CheckboxType
=
{
const
CheckboxQ
:
CheckboxType
=
{
type
:
"
checkbox
"
,
name
:
"
Question3
"
,
title
:
"
Question3
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
choices
:
[
"
ch1
"
,
"
ch2
"
,
"
ch3
"
],
maxCount
:
2
,
},
};
le
t
questionList
:
BasicQuestionType
[]
=
[
EssayQ
,
RadioQ
,
CheckboxQ
];
// cons
t questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
export
const
Question
=
()
=>
(
export
const
Question
=
()
=>
{
const
[
questionList
,
setQuestionList
]
=
useState
<
BasicQuestionType
[]
>
([
EssayQ
,
RadioQ
,
]);
// 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
);
}
return
(
<>
{
console
.
log
(
questionList
)
}
{
questionList
.
map
((
element
)
=>
{
if
(
element
.
type
===
"
assay
"
)
{
return
<
Q_Assay
questionList
=
{
questionList
}
element
=
{
element
}
/>;
}
else
if
(
element
.
type
===
"
radio
"
)
{
return
<
Q_Radio
element
=
{
element
}
/>;
}
else
if
(
element
.
type
===
"
checkbox
"
)
{
return
<
Q_Checkbox
element
=
{
element
}
/>;
switch
(
element
.
type
)
{
case
"
assay
"
:
return
(
<
QAssay
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
case
"
radio
"
:
return
(
<
QRadio
element
=
{
element
}
QuestionListChange
=
{
QuestionListChange
}
/>
);
case
"
checkbox
"
:
return
<
QCheckbox
element
=
{
element
}
/>;
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