Commit 69f157f6 authored by jang dong hyeok's avatar jang dong hyeok
Browse files

UI 수정

parent 88e6bd35
...@@ -53,7 +53,7 @@ export const AQuestion = ({ question, answerQuestion, addFiles }: Props) => { ...@@ -53,7 +53,7 @@ export const AQuestion = ({ question, answerQuestion, addFiles }: Props) => {
return ( return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-4"> <div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-4">
<div className="flex flexgi-row my-1 w-11/12 place-content-between items-center"> <div className="flex my-1 w-11/12 place-content-between items-center">
<div className="text-xl font-bold">{question.title}</div> <div className="text-xl font-bold">{question.title}</div>
{question.isRequired ? ( {question.isRequired ? (
<div className="text-xs text-red-600">* 필수질문</div> <div className="text-xs text-red-600">* 필수질문</div>
......
...@@ -29,7 +29,7 @@ export const MySurveyCard = ({ data }: Props) => { ...@@ -29,7 +29,7 @@ export const MySurveyCard = ({ data }: Props) => {
}; };
const copyLink = () => { const copyLink = () => {
navigator.clipboard.writeText(`http://localhost:8080/surveys/${data._id}`); navigator.clipboard.writeText(`http://localhost:8080/survey/${data._id}`);
alert("설문조사의 링크가 클립보드에 저장되었습니다."); alert("설문조사의 링크가 클립보드에 저장되었습니다.");
}; };
...@@ -52,9 +52,9 @@ export const MySurveyCard = ({ data }: Props) => { ...@@ -52,9 +52,9 @@ export const MySurveyCard = ({ data }: Props) => {
} }
return ( return (
<div className="w-52 h-60 rounded border-2 hover:border-2 hover:border-themeColor"> <div className="w-40 h-48 md:w-52 md:h-60 rounded border-2 hover:border-2 hover:border-themeColor">
<button className="w-full" onClick={editSurvey}> <button className="w-full" onClick={editSurvey}>
<div className="h-36 p-5"> <div className="h-24 md:h-36 p-3">
<p className="text-gray-700"> <p className="text-gray-700">
{data.comment ? data.comment : "설명없는 설문조사"} {data.comment ? data.comment : "설명없는 설문조사"}
</p> </p>
...@@ -70,14 +70,14 @@ export const MySurveyCard = ({ data }: Props) => { ...@@ -70,14 +70,14 @@ export const MySurveyCard = ({ data }: Props) => {
</p> </p>
</div> </div>
</button> </button>
<div className="flex justify-end pt-1"> <div className="flex justify-end pt-1 pr-1">
<label className="pt-1">링크복사</label> <label className="pt-1">링크복사</label>
<button className="" onClick={copyLink}> <button className="" onClick={copyLink}>
<img src={CopyImg} alt="copy"></img> <img src={CopyImg} alt="copy"></img>
</button> </button>
<button <button
type="button" type="button"
className="bg-themeColor rounded text-white py-1 px-1.5 ml-1" className="bg-themeColor rounded text-white py-1 px-1.5 ml-1 "
onClick={deleteSurvey} onClick={deleteSurvey}
> >
삭제 삭제
......
...@@ -36,12 +36,12 @@ export const Profile = () => { ...@@ -36,12 +36,12 @@ export const Profile = () => {
return ( return (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="mt-10 text-xl font-bold">나의 설문조사</div> <div className="mt-10 text-xl font-bold">나의 설문조사</div>
<div className="grid grid-cols-1 md:grid-cols-4 sm:grid-cols-2 gap-4 mt-6"> <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6">
<button <button
onClick={createSurvey} onClick={createSurvey}
className="flex h-60 w-52 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg " className="flex w-40 h-48 md:h-60 md:w-52 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
> >
<div className="text-center px-6 py-6 font-bold text-gray-500 place-items-center hover:text-white"> <div className="text-center md:px-6 md:py-6 font-xs md:font-bold text-gray-500 place-items-center hover:text-white">
CREATE NEW SURVEY! CREATE NEW SURVEY!
</div> </div>
</button> </button>
......
...@@ -38,11 +38,11 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => { ...@@ -38,11 +38,11 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
return ( return (
<> <>
<div className="flex place-content-between items-center p-5"> <div className="flex place-content-between items-center w-full p-5 overflow-x-scroll">
<input <input
name="minRateDescription" name="minRateDescription"
className="border-b-2 text-center" className="border-b-2 text-center"
size={10} size={3}
placeholder="비동의" placeholder="비동의"
value={element.content.minRateDescription} value={element.content.minRateDescription}
onChange={handleContent} onChange={handleContent}
...@@ -64,7 +64,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => { ...@@ -64,7 +64,7 @@ export const RatingForm = ({ element, handleQuestion, save }: Props) => {
<input <input
name="maxRateDescription" name="maxRateDescription"
className="border-b-2 text-center" className="border-b-2 text-center"
size={10} size={3}
placeholder="동의" placeholder="동의"
value={element.content.maxRateDescription} value={element.content.maxRateDescription}
onChange={handleContent} onChange={handleContent}
......
...@@ -16,7 +16,11 @@ const Accordion = ({ title, content }: AccordionProps) => { ...@@ -16,7 +16,11 @@ const Accordion = ({ title, content }: AccordionProps) => {
return ( return (
<div className="p-1"> <div className="p-1">
<div onClick={HandleOpening}> <div onClick={HandleOpening}>
<div className={"bg-themeColor p-4 flex justify-between text-white"}> <div
className={
"bg-themeColor rounded-r-lg p-4 flex justify-between text-white"
}
>
<h4 className="font-semibold">{title}</h4> <h4 className="font-semibold">{title}</h4>
{isOpened ? "" : ""} {isOpened ? "" : ""}
</div> </div>
......
...@@ -21,32 +21,54 @@ export const EditResultButton = () => { ...@@ -21,32 +21,54 @@ export const EditResultButton = () => {
style={({ isActive }) => style={({ isActive }) =>
isActive isActive
? { ? {
width: "140px",
color: "white", color: "white",
backgroundColor: "#58ACFA", backgroundColor: "#58ACFA",
borderTopLeftRadius: "25px",
borderBottomLeftRadius: "25px",
textAlign: "center",
fontWeight: "bold",
fontSize: "20px",
} }
: { : {
borderBottomWidth: "1px", width: "140px",
borderWidth: "1px",
borderColor: "#58ACFA", borderColor: "#58ACFA",
borderTopLeftRadius: "25px",
borderBottomLeftRadius: "25px",
textAlign: "center",
fontSize: "18px",
} }
} }
> >
<div className="text-xl m-3 ">설문지 수정</div> <div className="m-3 ">설문지 수정</div>
</NavLink> </NavLink>
<NavLink <NavLink
to={`/surveys/${surveyId}/result`} to={`/surveys/${surveyId}/result`}
style={({ isActive }) => style={({ isActive }) =>
isActive isActive
? { ? {
width: "140px",
color: "white", color: "white",
backgroundColor: "#58ACFA", backgroundColor: "#58ACFA",
borderTopRightRadius: "25px",
borderBottomRightRadius: "25px",
textAlign: "center",
fontWeight: "bold",
fontSize: "20px",
} }
: { : {
borderBottomWidth: "1px", width: "140px",
borderWidth: "1px",
borderColor: "#58ACFA", borderColor: "#58ACFA",
borderTopRightRadius: "25px",
borderBottomRightRadius: "25px",
textAlign: "center",
fontSize: "18px",
} }
} }
> >
<div className="text-xl m-3">응답결과</div> <div className="m-3">응답결과</div>
</NavLink> </NavLink>
</div> </div>
<Outlet /> <Outlet />
......
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