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
005a4d71
Commit
005a4d71
authored
Jul 11, 2022
by
jang dong hyeok
Browse files
.
parent
373fe9c8
Changes
19
Show whitespace changes
Inline
Side-by-side
frontend/src/CreateSurveyForm/QCheckbox.tsx
View file @
005a4d71
...
...
@@ -22,7 +22,7 @@ export const QCheckbox = ({ element }: Props) => {
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"checkbox"
id
=
{
element
.
_id
}
/>
<
TypeChange
selectedType
=
"checkbox"
id
=
{
element
.
_id
}
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
...
...
frontend/src/CreateSurveyForm/QDropdown.tsx
View file @
005a4d71
...
...
@@ -20,7 +20,7 @@ export const QDropdown = ({ element }: Props) => {
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"dropdown"
id
=
{
element
.
_id
}
/>
<
TypeChange
selectedType
=
"dropdown"
id
=
{
element
.
_id
}
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
...
...
frontend/src/CreateSurveyForm/QEssay.tsx
View file @
005a4d71
...
...
@@ -23,7 +23,7 @@ export const QEssay = ({ element }: Props) => {
onChange
=
{
questionListChange
}
></
input
>
{
/* <TypeChange tt={"essay"} id={element._id} /> */
}
<
TypeChange
tt
=
{
"
essay
"
}
id
=
{
element
.
_id
}
/>
<
TypeChange
selectedType
=
{
"
essay
"
}
id
=
{
element
.
_id
}
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
...
...
frontend/src/CreateSurveyForm/QFile.tsx
View file @
005a4d71
...
...
@@ -21,7 +21,7 @@ export const QFile = ({ element }: Props) => {
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"file"
id
=
{
element
.
_id
}
/>
<
TypeChange
selectedType
=
"file"
id
=
{
element
.
_id
}
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
...
...
frontend/src/CreateSurveyForm/QRadio.tsx
View file @
005a4d71
...
...
@@ -20,7 +20,7 @@ export const QRadio = ({ element }: Props) => {
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"radio"
id
=
{
element
.
_id
}
/>
<
TypeChange
selectedType
=
"radio"
id
=
{
element
.
_id
}
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
...
...
frontend/src/CreateSurveyForm/QRating.tsx
View file @
005a4d71
...
...
@@ -22,7 +22,7 @@ export const QRating = ({ element }: Props) => {
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"rating"
id
=
{
element
.
_id
}
/>
<
TypeChange
selectedType
=
"rating"
id
=
{
element
.
_id
}
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
...
...
frontend/src/CreateSurveyForm/question.context.tsx
View file @
005a4d71
...
...
@@ -10,7 +10,7 @@ import { questionApi, surveyApi } from "../apis";
interface
questionTypeChangeProp
{
id
:
string
;
tt
:
string
;
selectedType
:
string
;
}
interface
IQuestionContext
{
...
...
@@ -22,7 +22,7 @@ interface IQuestionContext {
editCompleteClick
:
(
e
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
=>
void
;
currentId
:
string
;
addQuestion
:
(
e
:
React
.
MouseEvent
<
HTMLButtonElement
>
)
=>
Promise
<
void
>
;
questionTypeChange
:
({
id
,
tt
}:
questionTypeChangeProp
)
=>
void
;
questionTypeChange
:
({
id
,
selectedType
}:
questionTypeChangeProp
)
=>
void
;
}
const
QuestionContext
=
createContext
<
IQuestionContext
>
({
...
...
@@ -82,12 +82,15 @@ export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
setQuestionList
(
newList
);
}
//질문 Type 바꾸는 함수
function
questionTypeChange
({
id
,
tt
}:
questionTypeChangeProp
):
void
{
function
questionTypeChange
({
id
,
selectedType
,
}:
questionTypeChangeProp
):
void
{
const
newType
:
BasicQuestionType
[]
=
[...
questionList
];
const
objType
:
any
=
newType
.
find
((
t
)
=>
t
.
_id
===
id
);
objType
.
type
=
tt
;
objType
.
type
=
selectedType
;
// TODO
if
((
tt
=
"
essay
"
))
{
if
((
selectedType
=
"
essay
"
))
{
objType
.
content
;
}
setQuestionList
(
newType
);
...
...
frontend/src/CreateSurveyForm/typeDD.tsx
View file @
005a4d71
...
...
@@ -3,10 +3,10 @@ import { useQuestion } from "./question.context";
type
typeChangeProps
=
{
id
:
string
;
tt
:
string
;
selectedType
:
string
;
};
export
function
TypeChange
({
tt
,
id
}:
typeChangeProps
)
{
export
function
TypeChange
({
selectedType
,
id
}:
typeChangeProps
)
{
const
{
questionTypeChange
}
=
useQuestion
();
const
typeDD
=
new
Map
([
...
...
@@ -21,11 +21,11 @@ export function TypeChange({ tt, id }: typeChangeProps) {
]);
function
changeDD
(
e
:
React
.
ChangeEvent
<
HTMLSelectElement
>
)
{
const
t
t
=
e
.
target
.
value
;
const
t
argetType
=
e
.
target
.
value
;
// questionTypeChange(e);
console
.
log
(
e
.
target
.
value
);
console
.
log
(
id
);
questionTypeChange
({
id
,
tt
});
questionTypeChange
({
id
,
selectedType
});
//if문으로 type별로 content 바뀌게 해보기
}
...
...
@@ -33,8 +33,8 @@ export function TypeChange({ tt, id }: typeChangeProps) {
<
select
id
=
"Questions"
name
=
"type"
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"
defaultValue
=
{
tt
}
className
=
"w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg w-full mr-3 p-2.5"
defaultValue
=
{
selectedType
}
onChange
=
{
changeDD
}
>
{
Array
.
from
(
typeDD
.
entries
()).
map
(([
k
,
v
])
=>
(
...
...
frontend/src/home/Home.tsx
View file @
005a4d71
...
...
@@ -9,7 +9,7 @@ export const Home = () => (
<
div
className
=
"flex flex-col place-items-center container"
>
<
div
>
<
Link
to
=
"/create"
to
=
"/
surveys/
create"
className
=
"flex h-14 w-28 items-center border-2 border-themeColor font-bold text-black bg-gray-200 hover:bg-themeColor rounded-lg "
>
<
div
className
=
"text-center w-28 font-bold text-black place-items-center"
>
...
...
frontend/src/profile/Profile.tsx
View file @
005a4d71
...
...
@@ -12,7 +12,7 @@ export const Profile = () => {
return
(
<
div
className
=
"flex flex-col items-center"
>
<
div
className
=
"m-5"
>
나의 설문조사
</
div
>
<
div
className
=
"flex
flex-row
space-x-4 mt-5"
>
<
div
className
=
"flex space-x-4 mt-5"
>
<
button
onClick
=
{
createSurvey
}
className
=
"flex h-60 w-48 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
...
...
@@ -31,7 +31,7 @@ export const Profile = () => {
<
div
className
=
"px-2 py-2"
>
<
label
>
설문조사 이름
</
label
>
</
div
>
<
div
className
=
"flex justify-end
dropdown-toggle
"
>
<
div
className
=
"flex justify-end"
>
<
select
className
=
"py-2 w-14 bg-themeColor rounded text-white"
>
<
option
selected
>
옵션
</
option
>
<
option
>
삭제
</
option
>
...
...
@@ -50,7 +50,7 @@ export const Profile = () => {
<
div
className
=
"px-2 py-2"
>
<
label
>
설문조사이름
</
label
>
</
div
>
<
div
className
=
"flex justify-end
dropdown-toggle
"
>
<
div
className
=
"flex justify-end"
>
<
select
className
=
"py-2 w-14 bg-themeColor rounded text-white"
>
<
option
selected
>
옵션
</
option
>
<
option
>
삭제
</
option
>
...
...
@@ -69,7 +69,7 @@ export const Profile = () => {
<
div
className
=
"px-2 py-2"
>
<
label
>
설문조사 이름
</
label
>
</
div
>
<
div
className
=
"flex justify-end
dropdown-toggle
"
>
<
div
className
=
"flex justify-end"
>
<
select
className
=
"py-2 w-14 bg-themeColor rounded text-white"
>
<
option
selected
>
옵션
</
option
>
<
option
>
삭제
</
option
>
...
...
@@ -88,7 +88,7 @@ export const Profile = () => {
<
div
className
=
"px-2 py-2"
>
<
label
>
설문조사 이름
</
label
>
</
div
>
<
div
className
=
"flex justify-end
dropdown-toggle
"
>
<
div
className
=
"flex justify-end"
>
<
select
className
=
"py-2 w-14 bg-themeColor rounded text-white"
>
<
option
selected
>
옵션
</
option
>
<
option
>
삭제
</
option
>
...
...
frontend/src/questions/CheckboxForm.tsx
View file @
005a4d71
import
React
from
"
react
"
;
import
{
CheckboxType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
Edit
}
from
"
./Edit
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
CheckboxType
;
};
export
const
QCheckbox
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
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"
>
<
input
type
=
"text"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"checkbox"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
any
)
=>
(
<
div
>
...
...
@@ -46,12 +19,5 @@ export const QCheckbox = ({ element }: Props) => {
</
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
>
<
Edit
id
=
{
element
.
_id
}
/>
</
div
>
</
div
>
);
};
frontend/src/questions/DateForm.tsx
View file @
005a4d71
import
{
useQuestion
}
from
"
./question.context
"
;
frontend/src/questions/DropdownForm.tsx
View file @
005a4d71
import
React
from
"
react
"
;
import
{
DropdownType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
DropdownType
;
};
export
const
QDropdown
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
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"
>
<
input
type
=
"text"
name
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"dropdown"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
id
=
"commentarea"
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
any
)
=>
(
<
div
>
...
...
@@ -44,11 +19,5 @@ export const QDropdown = ({ element }: Props) => {
</
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/questions/EssayForm.tsx
View file @
005a4d71
import
React
,
{
useState
}
from
"
react
"
;
import
{
EssayType
}
from
"
../types
"
;
// import { useQuestion } from "./question.context";
// import { Edit } from "./Edit";
// import { TypeChange } from "./typeDD";
type
Props
=
{
element
:
EssayType
;
};
export
const
EssayForm
=
({
element
}:
Props
)
=>
{
// const { questionListChange } = useQuestion();
return
(
<
div
id
=
"commentarea"
className
=
"flex mt-4 w-full justify-center"
>
<
input
className
=
"border w-11/12 h-16"
disabled
></
input
>
...
...
frontend/src/questions/FileForm.tsx
View file @
005a4d71
import
React
,
{
useState
}
from
"
react
"
;
import
{
FileType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
FileType
;
};
export
const
QFile
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
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
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"file"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
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/questions/MatrixForm.tsx
View file @
005a4d71
import
{
useQuestion
}
from
"
./question.context
"
;
frontend/src/questions/Question.tsx
View file @
005a4d71
import
React
,
{
useState
}
from
"
react
"
;
import
{
BasicQuestionType
,
EssayType
}
from
"
../types
"
;
import
{
EssayForm
}
from
"
./EssayForm
"
;
import
{
RadioForm
}
from
"
./RadioForm
"
;
type
Props
=
{
element
:
BasicQuestionType
;
...
...
@@ -32,7 +33,7 @@ export const Question = ({ element }: Props) => {
case
"
essay
"
:
return
<
EssayForm
element
=
{
element
}
/>;
case
"
radio
"
:
//
return <RadioForm element={element} />;
return
<
RadioForm
element
=
{
element
}
/>;
case
"
checkbox
"
:
// return <CheckboxForm element={element} />;
case
"
dropdown
"
:
...
...
@@ -60,12 +61,12 @@ export const Question = ({ element }: Props) => {
<
select
id
=
"Questions"
name
=
"type"
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"
className
=
"w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg w-full mr-3 p-2.5"
defaultValue
=
{
element
.
type
}
onChange
=
{
changeDD
}
>
{
Array
.
from
(
typeDD
.
entries
()).
map
(([
k
,
v
])
=>
(
<
option
value
=
{
k
}
>
{
v
}
</
option
>
{
Array
.
from
(
typeDD
.
entries
()).
map
(([
k
ey
,
v
alue
])
=>
(
<
option
value
=
{
k
ey
}
>
{
v
alue
}
</
option
>
))
}
</
select
>
</
div
>
...
...
@@ -81,11 +82,11 @@ export const Question = ({ element }: Props) => {
</
div
>
{
getContent
(
element
)
}
<
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
>
<
button
id
=
{
element
.
id
}
className
=
"
w-1/12
"
onClick
=
{
handleClick
}
>
<
div
className
=
"
place-self
-end py-2"
>
<
button
className
=
"
px-0.5
"
>
필수
</
button
>
<
button
className
=
"
px-0.5
"
>
옵션
</
button
>
<
button
className
=
"
px-0.5
"
>
삭제
</
button
>
<
button
id
=
{
element
.
id
}
className
=
"
px-0.5
"
onClick
=
{
handleClick
}
>
수정
</
button
>
</
div
>
...
...
frontend/src/questions/RadioForm.tsx
View file @
005a4d71
import
React
from
"
react
"
;
import
{
RadioType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
RadioType
;
};
export
const
QRadio
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
export
const
RadioForm
=
({
element
}:
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
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"radio"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
className
=
"flex mt-4"
>
{
element
.
content
.
choices
.
map
((
e
:
any
,
index
:
number
)
=>
(
<
div
>
...
...
@@ -42,26 +17,8 @@ export const QRadio = ({ element }: Props) => {
value
=
{
e
.
text
}
disabled
/>
<
input
type
=
"text"
name
=
{
"
choice
"
}
// key={`${index}`}
className
=
"mx-2 border-b-2"
placeholder
=
{
e
.
text
}
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/questions/RatingForm.tsx
View file @
005a4d71
import
React
from
"
react
"
;
import
{
RatingType
}
from
"
../types
"
;
import
{
useQuestion
}
from
"
./question.context
"
;
import
{
TypeChange
}
from
"
./typeDD
"
;
type
Props
=
{
element
:
RatingType
;
...
...
@@ -9,31 +7,7 @@ type Props = {
};
export
const
QRating
=
({
element
}:
Props
)
=>
{
const
{
questionListChange
}
=
useQuestion
();
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
=
"title"
id
=
{
element
.
_id
}
className
=
"text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder
=
{
element
.
title
}
onChange
=
{
questionListChange
}
></
input
>
<
TypeChange
tt
=
"rating"
/>
</
div
>
<
div
className
=
"flex w-full justify-center"
>
<
input
type
=
"text"
name
=
"comment"
id
=
{
element
.
_id
}
className
=
"border w-11/12"
placeholder
=
"질문에 대한 설명을 입력해주세요"
onChange
=
{
questionListChange
}
></
input
>
</
div
>
<
div
className
=
"flex place-content-between items-center p-5"
>
<
input
name
=
"minRateDescription"
...
...
@@ -60,25 +34,5 @@ export const QRating = ({ element }: Props) => {
placeholder
=
{
element
.
content
.
maxRateDescription
}
></
input
>
</
div
>
<
div
>
<
button
// type="button"
name
=
"rateValues"
id
=
{
element
.
_id
}
className
=
"border border-red-500 rounded mx-2 px-2"
// onClick={deleteValue}
>
삭제
</
button
>
<
button
className
=
"border border-blue-500 rounded mx-2 px-2"
>
추가
</
button
>
</
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
>
);
};
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