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
295f91db
Commit
295f91db
authored
Jul 04, 2022
by
Lee SeoYeon
Browse files
Merge remote-tracking branch 'origin/develope' into yeon
parents
1b9e1b61
d24ccceb
Changes
14
Hide whitespace changes
Inline
Side-by-side
frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx
0 → 100644
View file @
295f91db
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/QAssay.tsx
0 → 100644
View file @
295f91db
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
}
from
"
./Question
"
;
type
Props
=
{
element
:
EssayType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
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"
>
<
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
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
>
<
button
className
=
"w-1/12"
>
옵션
</
button
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
};
frontend/src/CreateSurveyForm/QCheckbox.tsx
0 → 100644
View file @
295f91db
import
React
from
"
react
"
;
import
{
CheckboxType
}
from
"
./Question
"
;
type
Props
=
{
element
:
CheckboxType
;
};
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"
>
<
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
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
frontend/src/CreateSurveyForm/QDate.tsx
0 → 100644
View file @
295f91db
frontend/src/CreateSurveyForm/QDropdown.tsx
0 → 100644
View file @
295f91db
frontend/src/CreateSurveyForm/QFile.tsx
0 → 100644
View file @
295f91db
frontend/src/CreateSurveyForm/QMatrix.tsx
0 → 100644
View file @
295f91db
frontend/src/CreateSurveyForm/QRadio.tsx
0 → 100644
View file @
295f91db
import
React
from
"
react
"
;
import
{
RadioType
}
from
"
./Question
"
;
type
Props
=
{
element
:
RadioType
;
QuestionListChange
:
(
e
:
React
.
ChangeEvent
<
HTMLInputElement
>
)
=>
void
;
};
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 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"
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 w-full justify-center"
>
<
input
type
=
"text"
name
=
{
element
.
name
}
id
=
"comment"
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
QuestionListChange
}
></
input
>
</
div
>
<
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
>
))
}
{
/* <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
>
<
button
className
=
"w-1/12"
>
삭제
</
button
>
</
div
>
</
div
>
);
frontend/src/CreateSurveyForm/QRating.tsx
0 → 100644
View file @
295f91db
frontend/src/CreateSurveyForm/Question.tsx
0 → 100644
View file @
295f91db
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
{}
export
interface
RadioType
extends
BasicQuestionType
{
content
:
{
hasOther
:
boolean
;
choices
:
any
[];
otherText
:
string
;
};
}
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
"
],
},
};
const
CheckboxQ
:
CheckboxType
=
{
type
:
"
checkbox
"
,
name
:
"
Question3
"
,
title
:
"
Question3
"
,
isRequired
:
false
,
comment
:
"
질문에 대한 설명을 입력해주세요
"
,
content
:
{
choices
:
[
"
ch1
"
,
"
ch2
"
,
"
ch3
"
],
maxCount
:
2
,
},
};
// const questionList: BasicQuestionType[] = [EssayQ, RadioQ, CheckboxQ];
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
)
=>
{
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} />;
// }
})
}
</>
);
};
frontend/src/CreateSurveyForm/index.tsx
0 → 100644
View file @
295f91db
export
{
CreateSurveyForm
}
from
"
./CreateSurveyFormPage
"
;
export
{
Question
}
from
"
./Question
"
;
frontend/src/SurveyRouter.tsx
View file @
295f91db
...
...
@@ -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 @
1b9e1b61
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 @
295f91db
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