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
f067e7f1
Commit
f067e7f1
authored
Jul 18, 2022
by
Lee SeoYeon
Browse files
설문조사 유형 답변 보이기
parent
eeb9a28a
Changes
5
Show whitespace changes
Inline
Side-by-side
frontend/src/commons/ACheckbox.tsx
View file @
f067e7f1
import
React
from
"
react
"
;
import
React
,
{
useEffect
}
from
"
react
"
;
import
{
CheckboxType
}
from
"
../types
"
;
export
const
ACheckboxForm
=
()
=>
{
type
Props
=
{
element
:
CheckboxType
;
};
export
const
ACheckboxForm
=
({
element
}:
Props
)
=>
{
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3"
>
<
div
className
=
"flex flexgi-row h-16 w-full place-content-between items-center"
>
<
form
className
=
"text-xl font-bold ml-6 w-1/2"
>
checkbox
</
form
>
</
div
>
<
form
className
=
"border w-11/12 my-4"
>
설문조사 설명
</
form
>
<
div
className
=
"flex flex-row items-center m-3"
>
<
div
className
=
"mb-4 mx-3"
>
<
input
id
=
"default-checkbox"
type
=
"checkbox"
className
=
"w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<
input
className
=
"ml-2 text-lg font-medium"
>
First checkbox
</
input
>
</
div
>
<
div
className
=
"mb-4 mx-3"
>
<
input
id
=
"default-checkbox"
type
=
"checkbox"
className
=
"w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<
label
className
=
"ml-2 text-lg font-medium"
>
Second checkbox
</
label
>
</
div
>
<
div
className
=
"mb-4 mx-3"
>
<
input
id
=
"default-checkbox"
type
=
"checkbox"
value
=
""
className
=
"w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<
label
className
=
"ml-2 text-lg font-medium"
>
Third checkbox
</
label
>
</
div
>
<
div
className
=
"mb-4 mx-4"
>
<
input
id
=
"default-checkbox"
type
=
"checkbox"
value
=
""
className
=
"w-5 h-5 mt-3 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<
label
className
=
"ml-2 text-lg font-medium"
>
Fourth checkbox
</
label
>
</
div
>
<
div
className
=
"flex w-full gap-4 justify-around my-3"
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
div
>
<
input
className
=
"mr-2"
type
=
"checkbox"
/>
<
label
className
=
"text-lg"
>
{
choice
.
text
}
</
label
>
</
div
>
))
}
</
div
>
);
};
frontend/src/commons/ADropdown.tsx
View file @
f067e7f1
import
React
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
{
DropdownType
}
from
"
../types
"
;
export
const
ADropdownForm
=
()
=>
{
type
Props
=
{
element
:
DropdownType
;
};
export
const
ADropdownForm
=
({
element
}:
Props
)
=>
{
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3"
>
<
div
className
=
"flex flexgi-row h-16 w-full items-center"
>
<
form
className
=
"text-xl font-bold ml-6 w-1/2"
>
dropdown
</
form
>
</
div
>
<
form
className
=
"border w-11/12 my-3"
>
설문조사 설명
</
form
>
<
div
className
=
"flex flex-col container w-4/5 h-auto items-center m-3 py-3"
>
<
select
className
=
"py-2 hover:bg-themeColor bg-gray-200 rounded "
>
<
option
selected
>
choose answer
</
option
>
<
option
>
first
</
option
>
<
option
>
second
</
option
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
option
>
{
choice
.
text
}
</
option
>
))
}
</
select
>
</
div
>
);
...
...
frontend/src/commons/AEssayForm.tsx
View file @
f067e7f1
import
React
from
"
react
"
;
import
{
EssayType
}
from
"
../types
"
;
export
const
AEssayForm
=
()
=>
{
type
Props
=
{
element
:
EssayType
;
};
export
const
AEssayForm
=
({
element
}:
Props
)
=>
{
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3"
>
<
div
className
=
"flex flexgi-row h-16 w-full place-content-between items-center"
>
<
form
className
=
"text-xl font-bold ml-6 w-1/2"
>
input
</
form
>
</
div
>
<
form
className
=
"border w-11/12 my-3"
>
설문조사 설명
</
form
>
<
input
className
=
"border w-11/12 h-36 my-3"
type
=
"text"
></
input
>
<
div
className
=
"flex mt-4 w-full justify-center"
>
<
input
className
=
"border w-11/12 h-36 my-3"
></
input
>
</
div
>
);
};
frontend/src/commons/AQuestion.tsx
0 → 100644
View file @
f067e7f1
import
React
,
{
useState
}
from
"
react
"
;
import
{
useNavigate
}
from
"
react-router-dom
"
;
import
{
BasicQuestionType
,
SurveyType
}
from
"
../types
"
;
import
{
ACheckboxForm
}
from
"
./ACheckbox
"
;
import
{
ADropdownForm
}
from
"
./ADropdown
"
;
import
{
AEssayForm
}
from
"
./AEssayForm
"
;
import
{
ARadioForm
}
from
"
./ARadioForm
"
;
type
PropsType
=
{
question
:
BasicQuestionType
;
};
export
const
AQuestion
=
({
question
}:
PropsType
)
=>
{
function
getContent
(
question
:
BasicQuestionType
)
{
switch
(
question
.
type
)
{
case
"
essay
"
:
return
<
AEssayForm
element
=
{
question
}
/>;
case
"
radio
"
:
return
<
ARadioForm
element
=
{
question
}
/>;
case
"
checkbox
"
:
return
<
ACheckboxForm
element
=
{
question
}
/>;
case
"
dropdown
"
:
return
<
ADropdownForm
element
=
{
question
}
/>;
// case "file":
// return <AFileForm element={element} currentId={currentId} />;
// case "rating":
// return (
// <ARatingForm
// handleQuestion={handleQuestion}
// element={element}
// currentId={currentId}
// />
// );
default
:
return
<></>;
}
}
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3"
>
<
div
className
=
"flex flexgi-row h-16 w-full place-content-between items-center"
>
<
div
className
=
"text-xl font-bold ml-6 w-1/2"
>
질문
</
div
>
</
div
>
<
div
className
=
"border w-11/12 my-3"
>
내용
</
div
>
{
getContent
(
question
)
}
</
div
>
);
};
frontend/src/commons/ARadioForm.tsx
View file @
f067e7f1
import
React
from
"
react
"
;
import
{
RadioType
}
from
"
../types
"
;
//
type Props = {
//
element: RadioType;
//
};
type
Props
=
{
element
:
RadioType
;
};
export
const
ARadioForm
=
()
=>
{
export
const
ARadioForm
=
(
{
element
}:
Props
)
=>
{
return
(
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-3"
>
<
div
className
=
"flex flexgi-row h-16 w-full place-content-between items-center"
>
<
form
className
=
"text-xl font-bold ml-6 w-1/2"
>
radio
</
form
>
</
div
>
<
form
className
=
"border w-11/12 my-4"
>
설문조사 설명
</
form
>
<
div
className
=
"flex flex-row items-center m-3"
>
<
div
className
=
"flex items-center mb-4 mx-4"
>
<
input
id
=
"default-radio-1"
type
=
"radio"
value
=
""
name
=
"default-radio"
className
=
"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<
label
className
=
"ml-2 text-lg"
>
First radio
</
label
>
</
div
>
<
div
className
=
"flex items-center mb-4 mx-4"
>
<
input
id
=
"default-radio-1"
type
=
"radio"
value
=
""
name
=
"default-radio"
className
=
"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<
label
className
=
"ml-2 text-lg"
>
Second radio
</
label
>
</
div
>
<
div
className
=
"flex items-center mb-4 mx-4"
>
<
input
checked
id
=
"default-radio-2"
type
=
"radio"
value
=
""
name
=
"default-radio"
className
=
"w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<
label
className
=
"ml-2 text-lg"
>
Checked state
</
label
>
</
div
>
<
div
className
=
"flex w-full gap-4 justify-around my-3"
>
{
element
.
content
.
choices
.
map
((
choice
)
=>
(
<
div
>
<
input
className
=
"mr-2"
type
=
"radio"
></
input
>
<
label
className
=
"text-lg"
>
{
choice
.
value
}
</
label
>
</
div
>
))
}
</
div
>
);
};
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