결과창 accordion

frontend/src/survey/Accordion.tsx

+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

 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;