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
5921fbdd
Commit
5921fbdd
authored
Jul 01, 2022
by
Jiwon Yoon
Browse files
CreateSurveyFormPage UI, Question Component
parent
d6f76734
Changes
14
Hide whitespace changes
Inline
Side-by-side
frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx
0 → 100644
View file @
5921fbdd
import
React
from
"
react
"
;
import
{
Question
}
from
"
./Question
"
;
interface
BasicQuestionType
{
type
:
string
;
name
:
string
;
title
:
string
;
isRequired
:
boolean
;
}
interface
EssayType
extends
BasicQuestionType
{}
let
EssayQ
:
EssayType
=
{
type
:
"
comment
"
,
name
:
"
Question1
"
,
title
:
"
제목을 입력하세요
"
,
isRequired
:
false
,
};
interface
MultiChoiceType
extends
BasicQuestionType
{
hasOther
:
boolean
;
choices
:
any
;
otherText
:
string
;
}
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
>
<
Question
/>
<
div
className
=
"flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3"
>
질문 추가 +
</
div
>
</
div
>
);
frontend/src/CreateSurveyForm/Q_Assay.tsx
0 → 100644
View file @
5921fbdd
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
,
BasicQuestionType
}
from
"
./Question
"
;
type
Props
=
{
element
:
EssayType
;
questionList
:
BasicQuestionType
[];
};
export
const
Q_Assay
=
({
element
,
questionList
}:
Props
)
=>
{
console
.
log
(
questionList
);
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"
>
<
p
className
=
"text-xl font-bold w-1/2 ml-6"
>
<
input
type
=
"text"
placeholder
=
{
element
.
title
}
></
input
>
</
p
>
<
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"
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 "
>
<
textarea
className
=
"border"
rows
=
{
1
}
cols
=
{
80
}
placeholder
=
"질문에 대한 설명을 입력해주세요"
></
textarea
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex border mt-4"
>
<
textarea
className
=
"resize-none"
cols
=
{
80
}
readOnly
></
textarea
>
</
div
>
<
div
className
=
"flex w-full flex-row justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
};
frontend/src/CreateSurveyForm/Q_Checkbox.tsx
0 → 100644
View file @
5921fbdd
import
React
from
"
react
"
;
import
{
CheckboxType
}
from
"
./Question
"
;
type
Props
=
{
element
:
CheckboxType
;
};
export
const
Q_Checkbox
=
({
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
=
"underline underline-offset-auto text-xl font-bold w-1/2 ml-6"
>
<
input
type
=
"text"
placeholder
=
{
element
.
title
}
></
input
>
</
p
>
<
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 "
>
<
textarea
className
=
"border"
rows
=
{
1
}
cols
=
{
80
}
placeholder
=
"질문에 대한 설명을 입력해주세요"
></
textarea
>
</
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
>
</
div
>
</
div
>
);
frontend/src/CreateSurveyForm/Q_Date.tsx
0 → 100644
View file @
5921fbdd
frontend/src/CreateSurveyForm/Q_Dropdown.tsx
0 → 100644
View file @
5921fbdd
frontend/src/CreateSurveyForm/Q_File.tsx
0 → 100644
View file @
5921fbdd
frontend/src/CreateSurveyForm/Q_Matrix.tsx
0 → 100644
View file @
5921fbdd
frontend/src/CreateSurveyForm/Q_Radio.tsx
0 → 100644
View file @
5921fbdd
import
React
from
"
react
"
;
import
{
RadioType
}
from
"
./Question
"
;
type
Props
=
{
element
:
RadioType
;
};
export
const
Q_Radio
=
({
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
=
"underline underline-offset-auto text-xl font-bold w-1/2 ml-6"
>
<
input
type
=
"text"
placeholder
=
{
element
.
title
}
></
input
>
</
p
>
<
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"
selected
>
객관식
</
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 "
>
<
textarea
className
=
"border"
rows
=
{
1
}
cols
=
{
80
}
placeholder
=
"질문에 대한 설명을 입력해주세요"
></
textarea
>
</
div
>
<
div
id
=
"commentarea"
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"
className
=
"mx-2 border-b-2"
placeholder
=
{
e
}
></
input
>
<
button
></
button
>
</
div
>
))
}
{
/* <button className="border rounded-full border-green-500 border-4 text-green-500 font-bold px-2">
+
</button> */
}
</
div
>
<
div
className
=
"flex w-full flex-row justify-end py-2"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
frontend/src/CreateSurveyForm/Q_Rating.tsx
0 → 100644
View file @
5921fbdd
frontend/src/CreateSurveyForm/Question.tsx
0 → 100644
View file @
5921fbdd
import
React
from
"
react
"
;
import
{
Q_Assay
}
from
"
./Q_Assay
"
;
import
{
Q_Checkbox
}
from
"
./Q_Checkbox
"
;
import
{
Q_Radio
}
from
"
./Q_Radio
"
;
export
interface
BasicQuestionType
{
type
:
string
;
name
:
string
;
title
:
string
;
isRequired
:
boolean
;
content
:
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
;
choices
:
any
;
otherText
:
string
;
};
}
let
RadioQ
:
RadioType
=
{
type
:
"
radio
"
,
name
:
"
Question2
"
,
title
:
"
Question2
"
,
isRequired
:
false
,
content
:
{
hasOther
:
false
,
otherText
:
""
,
choices
:
[
"
1
"
,
"
2
"
,
"
3
"
],
},
};
export
interface
CheckboxType
extends
BasicQuestionType
{
content
:
{
choices
:
any
;
maxCount
:
number
;
};
}
let
CheckboxQ
:
CheckboxType
=
{
type
:
"
checkbox
"
,
name
:
"
Question3
"
,
title
:
"
Question3
"
,
isRequired
:
false
,
content
:
{
choices
:
[
"
ch1
"
,
"
ch2
"
,
"
ch3
"
],
maxCount
:
2
,
},
};
let
questionList
:
BasicQuestionType
[]
=
[
EssayQ
,
RadioQ
,
CheckboxQ
];
export
const
Question
=
()
=>
(
<>
{
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
}
/>;
}
})
}
</>
);
frontend/src/CreateSurveyForm/index.tsx
0 → 100644
View file @
5921fbdd
export
{
CreateSurveyForm
}
from
"
./CreateSurveyFormPage
"
;
export
{
Question
}
from
"
./Question
"
;
frontend/src/SurveyRouter.tsx
View file @
5921fbdd
...
...
@@ -2,7 +2,8 @@ import React from "react";
import
{
BrowserRouter
,
Route
,
Routes
}
from
"
react-router-dom
"
;
import
App
from
"
./App
"
;
import
{
Login
,
SignUp
}
from
"
./auth
"
;
import
{
CreateSurveyForm
,
SurveyForm
}
from
"
./commons
"
;
import
{
SurveyForm
}
from
"
./commons
"
;
import
{
CreateSurveyForm
}
from
"
./CreateSurveyForm
"
;
import
{
Home
}
from
"
./home
"
;
export
const
SurveyRouter
=
()
=>
{
...
...
frontend/src/commons/CreateSurveyForm.tsx
deleted
100644 → 0
View file @
d6f76734
import
React
from
"
react
"
;
export
const
CreateSurveyForm
=
()
=>
(
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container h-1/2 place-items-center"
>
<
p
className
=
"font-bold text-4xl w-2/3"
>
Survey Title
</
p
>
<
p
className
=
"text-3xl w-2/3"
>
Comment
</
p
>
</
div
>
<
div
className
=
"flex flex-col container w-4/5 h-auto border-2 border-black items-center"
>
<
div
className
=
"flex flexgi-row h-16 w-full place-content-between items-center"
>
<
p
className
=
"underline underline-offset-auto text-xl font-bold w-1/2 ml-6"
>
질문
</
p
>
<
button
className
=
"text-center flex border-2 border-black mr-6 place-content-end"
>
질문종류▽
</
button
>
</
div
>
<
div
className
=
"flex border-2 border-black h-96 w-4/5 mt-4"
>
설문내용 뜨는창
</
div
>
<
div
className
=
"flex w-full flex-row justify-end"
>
<
button
className
=
"w-1/12"
>
필수
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
<
div
className
=
"flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3"
>
질문 추가 +
</
div
>
</
div
>);
frontend/src/commons/index.tsx
View file @
5921fbdd
export
{
CreateSurveyForm
}
from
"
./CreateSurveyForm
"
;
export
{
Header
}
from
"
./Header
"
;
export
{
SurveyForm
}
from
"
./SurveyForm
"
;
\ No newline at end of file
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