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
e23d0af8
Commit
e23d0af8
authored
Jul 27, 2022
by
Jiwon Yoon
Browse files
result 질문 타입별로 보여주기
parent
a2418d6c
Changes
13
Hide whitespace changes
Inline
Side-by-side
frontend/src/commons/Header.tsx
View file @
e23d0af8
...
...
@@ -42,7 +42,7 @@ export const Header = () => {
</
button
>
</
Link
>
<
Link
to
=
"/signup"
>
<
button
className
=
"font-bold text-white hover:bg-
blue-500
mx-1 py-2 px-3 bg-themeColor rounded-md "
>
<
button
className
=
"font-bold text-white hover:bg-
themeColor2
mx-1 py-2 px-3 bg-themeColor rounded-md "
>
회원가입
</
button
>
</
Link
>
...
...
frontend/src/questions/Question.tsx
View file @
e23d0af8
...
...
@@ -54,7 +54,7 @@ Props) => {
selectedType
===
"
dropdown
"
||
selectedType
===
"
checkbox
"
)
{
element
.
content
=
{
content
=
{
choices
:
[{
text
:
""
,
value
:
0
}],
};
}
else
if
(
selectedType
===
"
essay
"
)
{
...
...
@@ -180,12 +180,7 @@ Props) => {
className
=
"w-32 md: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"
>
{
Array
.
from
(
QUESTION_TYPES
.
entries
()).
map
(([
key
,
value
])
=>
(
<
option
key
=
{
key
}
id
=
{
question
.
_id
}
value
=
{
key
}
selected
=
{
key
===
element
.
type
}
>
<
option
key
=
{
key
}
id
=
{
question
.
_id
}
value
=
{
key
}
>
{
value
}
</
option
>
))
}
...
...
frontend/src/
survey
/Accordion.tsx
→
frontend/src/
results
/Accordion.tsx
View file @
e23d0af8
import
React
,
{
useState
,
useRef
,
useEffect
}
from
"
react
"
;
import
{
baseImageUrl
}
from
"
../apis
"
;
import
{
BasicQuestionType
}
from
"
../types
"
;
import
{
REssayForm
}
from
"
./REssayForm
"
;
import
{
RCheckboxForm
}
from
"
./RCheckboxForm
"
;
import
{
RRadioForm
}
from
"
./RRadioForm
"
;
import
{
RDropdownForm
}
from
"
./RDropdownForm
"
;
import
{
RFileForm
}
from
"
./RFileForm
"
;
import
{
RRatingForm
}
from
"
./RRatingForm
"
;
import
{
RDateForm
}
from
"
./RDateForm
"
;
type
AccordionProps
=
{
question
:
BasicQuestionType
;
};
const
Accordion
=
({
question
}:
AccordionProps
)
=>
{
export
const
Accordion
=
({
question
}:
AccordionProps
)
=>
{
const
[
isOpened
,
setOpened
]
=
useState
<
boolean
>
(
false
);
const
[
height
,
setHeight
]
=
useState
<
string
>
(
"
0px
"
);
const
contentElement
=
useRef
<
HTMLDivElement
>
(
null
);
...
...
@@ -14,7 +19,27 @@ const Accordion = ({ question }: AccordionProps) => {
setOpened
(
!
isOpened
);
setHeight
(
!
isOpened
?
`
${
contentElement
.
current
?.
scrollHeight
}
px`
:
"
0px
"
);
};
function
getContent
(
question
:
BasicQuestionType
)
{
switch
(
question
.
type
)
{
case
"
essay
"
:
return
<
REssayForm
question
=
{
question
}
/>;
case
"
radio
"
:
return
<
RRadioForm
question
=
{
question
}
/>;
case
"
checkbox
"
:
return
<
RCheckboxForm
question
=
{
question
}
/>;
case
"
dropdown
"
:
return
<
RDropdownForm
question
=
{
question
}
/>;
case
"
file
"
:
return
<
RFileForm
question
=
{
question
}
/>;
case
"
rating
"
:
return
<
RRatingForm
question
=
{
question
}
/>;
case
"
date
"
:
return
<
RDateForm
question
=
{
question
}
/>;
default
:
return
<></>;
}
}
console
.
log
(
question
);
return
(
<
div
className
=
"p-1"
>
<
div
onClick
=
{
HandleOpening
}
>
...
...
@@ -31,20 +56,7 @@ const Accordion = ({ question }: AccordionProps) => {
style
=
{
{
height
:
height
}
}
className
=
"bg-gray-100 overflow-hidden transition-all duration-300"
>
{
question
.
answers
&&
(
question
.
type
===
"
file
"
?
question
.
answers
.
map
((
answer
:
any
)
=>
(
<
img
key
=
{
answer
.
url
}
alt
=
"file"
src
=
{
`
${
baseImageUrl
}
/
${
answer
.
url
}
`
}
/>
))
:
question
.
answers
.
map
((
answer
:
any
,
index
:
number
)
=>
(
<
p
key
=
{
index
}
className
=
"p-4"
>
{
answer
}
</
p
>
)))
}
{
question
.
answers
&&
getContent
(
question
)
}
</
div
>
</
div
>
</
div
>
...
...
frontend/src/results/RCheckboxForm.tsx
0 → 100644
View file @
e23d0af8
import
React
from
"
react
"
;
import
{
BasicQuestionType
}
from
"
../types
"
;
type
Props
=
{
question
:
BasicQuestionType
;
};
export
const
RCheckboxForm
=
({
question
}:
Props
)
=>
{
const
result
=
question
.
answers
.
flat
().
reduce
((
acc
:
any
,
cur
:
any
)
=>
{
acc
[
cur
]
=
(
acc
[
cur
]
||
0
)
+
1
;
return
acc
;
},
{});
console
.
log
(
result
);
return
(
<
div
className
=
"m-5"
>
{
question
.
content
.
choices
.
map
((
choice
:
any
)
=>
(
<
div
className
=
""
>
<
span
className
=
"font-bold"
>
{
choice
.
text
}
</
span
>
<
span
className
=
"ml-3"
>
-
{
result
[
choice
.
text
]
?
result
[
choice
.
text
]
:
0
}
</
span
>
</
div
>
))
}
</
div
>
);
};
frontend/src/results/RDateForm.tsx
0 → 100644
View file @
e23d0af8
import
React
from
"
react
"
;
import
{
BasicQuestionType
}
from
"
../types
"
;
type
Props
=
{
question
:
BasicQuestionType
;
};
export
const
RDateForm
=
({
question
}:
Props
)
=>
{
return
(
<
div
className
=
"m-5"
>
{
question
.
answers
.
map
((
answer
:
any
)
=>
(
<
div
className
=
"font-bold"
>
{
answer
}
</
div
>
))
}
</
div
>
);
};
frontend/src/results/RDropdownForm.tsx
0 → 100644
View file @
e23d0af8
import
React
from
"
react
"
;
import
{
BasicQuestionType
}
from
"
../types
"
;
type
Props
=
{
question
:
BasicQuestionType
;
};
export
const
RDropdownForm
=
({
question
}:
Props
)
=>
{
const
result
=
question
.
answers
.
reduce
((
acc
:
any
,
cur
:
any
)
=>
{
acc
[
cur
]
=
(
acc
[
cur
]
||
0
)
+
1
;
return
acc
;
},
{});
console
.
log
(
result
);
return
(
<
div
className
=
"m-5"
>
{
question
.
content
.
choices
.
map
((
choice
:
any
)
=>
(
<
div
className
=
""
>
<
span
className
=
"font-bold"
>
{
choice
.
text
}
</
span
>
<
span
className
=
"ml-3"
>
-
{
result
[
choice
.
text
]
?
result
[
choice
.
text
]
:
0
}
</
span
>
</
div
>
))
}
</
div
>
);
};
frontend/src/results/REssayForm.tsx
0 → 100644
View file @
e23d0af8
import
React
from
"
react
"
;
import
{
BasicQuestionType
}
from
"
../types
"
;
type
Props
=
{
question
:
BasicQuestionType
;
};
export
const
REssayForm
=
({
question
}:
Props
)
=>
{
return
(
<
div
className
=
"m-5"
>
{
question
.
answers
.
map
((
answer
:
any
)
=>
(
<
div
className
=
"font-bold"
>
{
answer
}
</
div
>
))
}
</
div
>
);
};
frontend/src/results/RFileForm.tsx
0 → 100644
View file @
e23d0af8
import
React
from
"
react
"
;
import
{
baseImageUrl
}
from
"
../apis
"
;
type
Props
=
{
question
:
any
;
};
export
const
RFileForm
=
({
question
}:
Props
)
=>
{
return
(
<
div
className
=
"m-5 flex justify-start items-center"
>
{
question
.
answers
.
map
((
answer
:
any
)
=>
(
<>
<
img
className
=
"h-14"
key
=
{
answer
.
url
}
alt
=
"file"
src
=
{
`
${
baseImageUrl
}
/
${
answer
.
url
}
`
}
/>
<
div
className
=
"ml-3"
>
{
answer
.
name
}
</
div
>
</>
))
}
</
div
>
);
};
frontend/src/results/RRadioForm.tsx
0 → 100644
View file @
e23d0af8
import
React
from
"
react
"
;
import
{
BasicQuestionType
}
from
"
../types
"
;
type
Props
=
{
question
:
BasicQuestionType
;
};
export
const
RRadioForm
=
({
question
}:
Props
)
=>
{
const
result
=
question
.
answers
.
reduce
((
acc
:
any
,
cur
:
any
)
=>
{
acc
[
cur
]
=
(
acc
[
cur
]
||
0
)
+
1
;
return
acc
;
},
{});
console
.
log
(
result
);
return
(
<
div
className
=
"m-5"
>
{
question
.
content
.
choices
.
map
((
choice
:
any
)
=>
(
<
div
className
=
""
>
<
span
className
=
"font-bold"
>
{
choice
.
text
}
</
span
>
<
span
className
=
"ml-3"
>
-
{
result
[
choice
.
text
]
?
result
[
choice
.
text
]
:
0
}
</
span
>
</
div
>
))
}
</
div
>
);
};
frontend/src/results/RRatingForm.tsx
0 → 100644
View file @
e23d0af8
import
React
from
"
react
"
;
import
{
BasicQuestionType
}
from
"
../types
"
;
type
Props
=
{
question
:
BasicQuestionType
;
};
export
const
RRatingForm
=
({
question
}:
Props
)
=>
{
const
result
=
question
.
answers
.
reduce
((
acc
:
any
,
cur
:
any
)
=>
{
acc
[
cur
]
=
(
acc
[
cur
]
||
0
)
+
1
;
return
acc
;
},
{});
console
.
log
(
result
);
return
(
<
div
className
=
"m-5"
>
<
div
>
{
question
.
content
.
minRateDescription
}
</
div
>
{
question
.
content
.
choices
.
map
((
choice
:
any
)
=>
(
<
div
className
=
""
>
<
span
className
=
"font-bold"
>
{
choice
.
text
}
</
span
>
<
span
className
=
"ml-3"
>
-
{
result
[
choice
.
text
]
?
result
[
choice
.
text
]
:
0
}
</
span
>
</
div
>
))
}
<
div
>
{
question
.
content
.
maxRateDescription
}
</
div
>
</
div
>
);
};
frontend/src/results/index.tsx
0 → 100644
View file @
e23d0af8
export
{
Accordion
}
from
"
./Accordion
"
;
frontend/src/survey/ResultSurvey.tsx
View file @
e23d0af8
import
React
,
{
useEffect
,
useState
}
from
"
react
"
;
import
{
answerApi
,
surveyApi
}
from
"
../apis
"
;
import
{
catchErrors
}
from
"
../helpers
"
;
import
Accordion
from
"
./
Accordion
"
;
import
{
Accordion
}
from
"
.
.
/
results
"
;
import
{
useParams
}
from
"
react-router-dom
"
;
import
{
SurveyType
}
from
"
../types
"
;
...
...
src/routes/survey.route.ts
View file @
e23d0af8
...
...
@@ -8,6 +8,7 @@ router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys);
router
.
route
(
"
/create
"
).
post
(
authCtrl
.
requireLogin
,
surveyCtrl
.
createSurvey
);
router
.
route
(
"
/:surveyId
"
).
get
(
surveyCtrl
.
getSurveyById
);
router
.
route
(
"
/:surveyId/edit
"
)
.
get
(
authCtrl
.
requireLogin
,
authCtrl
.
authenticate
,
surveyCtrl
.
getSurveyById
)
...
...
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