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
de2221e7
Commit
de2221e7
authored
Jul 22, 2022
by
jang dong hyeok
Browse files
결과창 accordion
parent
72d4eb09
Changes
2
Hide whitespace changes
Inline
Side-by-side
frontend/src/survey/Accordion.tsx
0 → 100644
View file @
de2221e7
import
React
,
{
useState
,
useRef
}
from
"
react
"
;
type
AccordionProps
=
{
title
:
string
;
content
:
string
;
};
const
Accordion
=
({
title
,
content
}:
AccordionProps
)
=>
{
const
[
isOpened
,
setOpened
]
=
useState
<
boolean
>
(
false
);
const
[
height
,
setHeight
]
=
useState
<
string
>
(
"
0px
"
);
const
contentElement
=
useRef
<
HTMLDivElement
>
(
null
);
const
HandleOpening
=
()
=>
{
setOpened
(
!
isOpened
);
setHeight
(
!
isOpened
?
`
${
contentElement
.
current
?.
scrollHeight
}
px`
:
"
0px
"
);
};
return
(
<
div
onClick
=
{
HandleOpening
}
className
=
"border border-indigo-400"
>
<
div
className
=
{
"
bg-themeColor p-4 flex justify-between text-white
"
}
>
<
h4
className
=
"font-semibold"
>
{
title
}
</
h4
>
{
isOpened
?
"
△
"
:
"
▽
"
}
</
div
>
<
div
ref
=
{
contentElement
}
style
=
{
{
height
:
height
}
}
className
=
"bg-gray-100 overflow-hidden transition-all duration-200"
>
<
p
className
=
"p-4"
>
{
content
}
</
p
>
</
div
>
</
div
>
);
};
export
default
Accordion
;
frontend/src/survey/ResultSurvey.tsx
View file @
de2221e7
import
React
from
"
react
"
;
import
Accordion
from
"
./Accordion
"
;
export
const
ResultSurvey
=
()
=>
{
const
data
=
[
{
title
:
"
1번질문
"
,
content
:
"
1번 답변들
"
,
},
{
title
:
"
2번질문
"
,
content
:
"
2번답변들
"
,
},
{
title
:
"
3번질문
"
,
content
:
"
3번답변들
"
,
},
];
return
(
<
div
className
=
"flex flex-col place-items-center"
>
<
div
className
=
"flex flex-col container place-items-center mt-4"
>
...
...
@@ -11,9 +26,14 @@ export const ResultSurvey = () => {
설문조사 설명
</
div
>
</
div
>
<
div
className
=
"w-11/12 h-16 rounded border-2 hover:border-themeColor"
>
1번 질문
<
div
className
=
"container mx-auto"
>
{
data
.
map
((
item
)
=>
(
<
Accordion
title
=
{
item
.
title
}
content
=
{
item
.
content
}
/>
))
}
</
div
>
</
div
>
);
};
export
default
ResultSurvey
;
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