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

accordion 수정

parent de2221e7
...@@ -14,7 +14,8 @@ const Accordion = ({ title, content }: AccordionProps) => { ...@@ -14,7 +14,8 @@ const Accordion = ({ title, content }: AccordionProps) => {
setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px"); setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px");
}; };
return ( return (
<div onClick={HandleOpening} className="border border-indigo-400"> <div className="p-1">
<div onClick={HandleOpening}>
<div className={"bg-themeColor p-4 flex justify-between text-white"}> <div className={"bg-themeColor p-4 flex justify-between text-white"}>
<h4 className="font-semibold">{title}</h4> <h4 className="font-semibold">{title}</h4>
{isOpened ? "" : ""} {isOpened ? "" : ""}
...@@ -22,11 +23,12 @@ const Accordion = ({ title, content }: AccordionProps) => { ...@@ -22,11 +23,12 @@ const Accordion = ({ title, content }: AccordionProps) => {
<div <div
ref={contentElement} ref={contentElement}
style={{ height: height }} style={{ height: height }}
className="bg-gray-100 overflow-hidden transition-all duration-200" className="bg-gray-100 overflow-hidden transition-all duration-700"
> >
<p className="p-4">{content}</p> <p className="p-4">{content}</p>
</div> </div>
</div> </div>
</div>
); );
}; };
......
...@@ -15,22 +15,38 @@ export const EditResultButton = () => { ...@@ -15,22 +15,38 @@ export const EditResultButton = () => {
return ( return (
<div> <div>
<div className="flex place-content-center"> <div className="flex place-content-center mt-6">
<NavLink <NavLink
to={`/surveys/${surveyId}/edit`} to={`/surveys/${surveyId}/edit`}
style={({ isActive }) => style={({ isActive }) =>
isActive ? { color: "#58ACFA" } : { color: "black" } isActive
? {
color: "white",
backgroundColor: "#58ACFA",
}
: {
borderBottomWidth: "1px",
borderColor: "#58ACFA",
}
} }
> >
<div className="text-xl m-3 underline">설문지 수정</div> <div className="text-xl m-3 ">설문지 수정</div>
</NavLink> </NavLink>
<NavLink <NavLink
to={`/surveys/${surveyId}/result`} to={`/surveys/${surveyId}/result`}
style={({ isActive }) => style={({ isActive }) =>
isActive ? { color: "#58ACFA" } : { color: "black" } isActive
? {
color: "white",
backgroundColor: "#58ACFA",
}
: {
borderBottomWidth: "1px",
borderColor: "#58ACFA",
}
} }
> >
<div className="text-xl m-3 underline">응답결과</div> <div className="text-xl m-3">응답결과</div>
</NavLink> </NavLink>
</div> </div>
<Outlet /> <Outlet />
......
...@@ -5,7 +5,8 @@ export const ResultSurvey = () => { ...@@ -5,7 +5,8 @@ export const ResultSurvey = () => {
const data = [ const data = [
{ {
title: "1번질문", title: "1번질문",
content: "1번 답변들", content:
"1번 답변들asdfadsgsjadhfasld;nvaldkfnbljgnahgvlajnbl janl;nvja; sabv;jnsvjl;asjvh asjfagkfnjf;nvasgn va;sdn va sglanksvl ds af adb adf afg dgafbg dfh jbvlkna lkslbk kjv nbkkdlfn akdl nvjbnkdjf nlkbakdn bkjnakjn n knk",
}, },
{ {
title: "2번질문", title: "2번질문",
...@@ -27,7 +28,7 @@ export const ResultSurvey = () => { ...@@ -27,7 +28,7 @@ export const ResultSurvey = () => {
</div> </div>
</div> </div>
<div className="container mx-auto"> <div className="container w-11/12 place-self-center">
{data.map((item) => ( {data.map((item) => (
<Accordion title={item.title} content={item.content} /> <Accordion title={item.title} content={item.content} />
))} ))}
......
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