Commit de2221e7 authored by jang dong hyeok's avatar jang dong hyeok
Browse files

결과창 accordion

parent 72d4eb09
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;
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;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment