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
6b3fc650
Commit
6b3fc650
authored
Jul 20, 2022
by
jang dong hyeok
Browse files
Merge branch 'develop0718' into DH6
parents
06176fc6
c69e04ec
Changes
8
Hide whitespace changes
Inline
Side-by-side
frontend/src/apis/survey.api.ts
View file @
6b3fc650
...
...
@@ -11,10 +11,17 @@ export const getSurvey = async (surveyId: string) => {
const
{
data
}
=
await
axios
.
get
(
`
${
baseUrl
}
/surveys/
${
surveyId
}
/edit`
);
return
data
;
};
<<<<<<<
HEAD
export
const
getASurvey
=
async
(
surveyId
:
string
)
=>
{
const
{
data
}
=
await
axios
.
get
(
`
${
baseUrl
}
/surveys/
${
surveyId
}
/edit`
);
=======
export
const
ansSurvey
=
async
(
surveyId
:
string
)
=>
{
const
{
data
}
=
await
axios
.
get
(
`
${
baseUrl
}
/surveys/
${
surveyId
}
`
);
>>>>>>>
develop0718
return
data
;
};
//동혁
export
const
getSurveys
=
async
()
=>
{
const
{
data
}
=
await
axios
.
get
(
`
${
baseUrl
}
/surveys/`
);
...
...
frontend/src/commons/ACheckbox.tsx
View file @
6b3fc650
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
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
>
))
}
</
div
>
);
};
frontend/src/commons/ADropdown.tsx
View file @
6b3fc650
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 @
6b3fc650
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 @
6b3fc650
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 @
6b3fc650
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
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
>
))
}
</
div
>
);
};
frontend/src/commons/SurveyForm.tsx
View file @
6b3fc650
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
{
useParams
}
from
"
react-router-dom
"
;
import
{
surveyApi
}
from
"
../apis
"
;
import
{
Question
}
from
"
../
question
s
"
;
import
{
catchErrors
}
from
"
../
helper
s
"
;
import
{
SurveyType
}
from
"
../types
"
;
import
{
ACheckboxForm
}
from
"
./ACheckbox
"
;
import
{
ADropdownForm
}
from
"
./ADropdown
"
;
import
{
AEssayForm
}
from
"
./AEssayForm
"
;
import
{
AQuestion
}
from
"
./AQuestion
"
;
import
{
ARadioForm
}
from
"
./ARadioForm
"
;
export
const
SurveyForm
=
()
=>
{
let
{
surveyId
}
=
useParams
<
{
surveyId
:
string
}
>
();
const
[
error
,
setError
]
=
useState
(
""
);
const
[
loading
,
setLoading
]
=
useState
(
false
);
const
[
success
,
setSuccess
]
=
useState
(
false
);
const
[
survey
,
setSurvey
]
=
useState
<
SurveyType
>
({
_id
:
surveyId
,
user
:
{},
...
...
@@ -17,36 +18,37 @@ export const SurveyForm = () => {
comment
:
""
,
questions
:
[],
});
useEffect
(()
=>
{
get
Survey
();
ans
Survey
();
},
[
surveyId
]);
async
function
getSurvey
()
{
async
function
ansSurvey
()
{
try
{
if
(
surveyId
)
{
const
thisS
urvey
:
SurveyType
=
await
surveyApi
.
getA
Survey
(
surveyId
);
console
.
log
(
thisS
urvey
);
setSurvey
(
thisS
urvey
);
//
setSuccess(true);
//
setError("");
const
answers
urvey
:
SurveyType
=
await
surveyApi
.
ans
Survey
(
surveyId
);
console
.
log
(
answers
urvey
);
setSurvey
(
answers
urvey
);
setSuccess
(
true
);
setError
(
""
);
}
else
{
//
setLoading(true);
setLoading
(
true
);
}
}
catch
(
error
)
{
//
catchErrors(error, setError);
catchErrors
(
error
,
setError
);
}
finally
{
//
setLoading(false);
setLoading
(
false
);
}
}
return
(
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center mt-4"
>
<
form
className
=
"font-bold text-4xl text-center m-2"
>
설문지 제목
</
form
>
<
textarea
className
=
"font-bold text-1xl text-center m-2 resize-none"
placeholder
=
"설문조사에 대한 설명을 입력해주세요"
rows
=
{
2
}
cols
=
{
60
}
></
textarea
>
<
p
className
=
"font-bold text-4xl text-center m-2"
>
{
survey
.
title
}
</
p
>
<
p
className
=
"font-bold text-1xl text-center m-2"
>
{
survey
.
comment
}
</
p
>
{
survey
.
questions
.
map
((
question
)
=>
{
return
<
AQuestion
question
=
{
question
}
></
AQuestion
>;
})
}
<
div
>
<
button
className
=
"rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"
>
제출하기
...
...
src/routes/survey.route.ts
View file @
6b3fc650
...
...
@@ -11,7 +11,10 @@ router.route("/:surveyId")
router
.
route
(
"
/create
"
).
post
(
authCtrl
.
requireLogin
,
surveyCtrl
.
createSurvey
);
router
.
route
(
"
/:surveyId/edit
"
)
.
route
(
"
/:surveyId
"
)
.
get
(
surveyCtrl
.
getSurveyById
);
router
.
route
(
"
/edit/:surveyId
"
)
.
get
(
authCtrl
.
requireLogin
,
authCtrl
.
authenticate
,
surveyCtrl
.
getSurveyById
)
.
put
(
authCtrl
.
requireLogin
,
authCtrl
.
authenticate
,
surveyCtrl
.
updateSurvey
);
router
...
...
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