Merge branch 'DH8' into develop0727

frontend/src/answers/AQuestion.tsx

@@ -52,7 +52,7 @@ export const AQuestion = ({ question, answerQuestion, addFiles }: Props) => {
   }
 
   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 rounded-lg">
       <div className="flex my-1 w-11/12 place-content-between items-center">
         <div className="text-xl font-bold">{question.title}</div>
         {question.isRequired ? (

frontend/src/commons/Header.tsx

-import React, { useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../auth/auth.context";
 import { UserIcon } from "../icons";
 
 export const Header = () => {
   const { user, logout } = useAuth();
-  const location = useLocation();
   const navigate = useNavigate();
 
-  const [windowSize, setWindowSize] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  });
+  const [isClicked, setIsClicked] = useState(false);
 
-  const handleResize = () => {
-    setWindowSize({
-      width: window.innerWidth,
-      height: window.innerHeight,
-    });
+  const handleHeaderClick = () => {
+    setIsClicked(!isClicked);
   };
-  useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
 
   return (
-    <div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-2.5">
-      <div className="container flex flex-wrap place-content-center mx-auto">
-        <Link to="/" className="font-bold text-2xl text-themeColor">
+    <div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-3.5">
+      <div className="container flex flex-wrap md:justify-start place-content-center mx-auto">
+        <Link to="/" className="font-bold text-2xl text-themeColor text-start">
           Simple Survey Form
         </Link>
-        {windowSize.width < 768 ? (
-          <UserIcon className="h-7 w-7 absolute top-4 right-2" onClick="" />
-        ) : (
-          <div className="md:flex items-center justify-end md:flex-1 lg:w-0">
+        <div className="absolute right-4 top-2 hidden md:flex items-center justify-end md:flex-1">
           {user.isLoggedIn ? (
-              <div className="pt-2">
+            <div>
               <button
                 onClick={() => logout(() => navigate("/"))}
                 className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
@@ -51,7 +35,7 @@ export const Header = () => {
               </Link>
             </div>
           ) : (
-              <div className="pt-2">
+            <div>
               <Link to="/login">
                 <button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
                   로그인
@@ -65,94 +49,59 @@ export const Header = () => {
             </div>
           )}
         </div>
-        )}
-        {/* <div className="flex items-center md:order-2">
+
         <button
-            type="button"
-            className="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
-            id="user-menu-button"
-            aria-expanded="false"
-            data-dropdown-toggle="user-dropdown"
-            data-dropdown-placement="bottom"
+          className="flex md:hidden w-8 h-8 rounded-full absolute top-4 right-5"
+          onClick={handleHeaderClick}
         >
-            <span className="sr-only">Open user menu</span>
-            <img
-              className="w-8 h-8 rounded-full"
-              src="/docs/images/people/profile-picture-3.jpg"
-              alt="user photo"
-            />
-          </button>
+          <UserIcon />
+          {isClicked ? (
+            user.isLoggedIn ? (
+              <div className="fixed top-14 right-1 w-48 bg-themeColor3 flex flex-col rounded-lg">
+                <div className="p-3">안녕하세요.</div>
+                <div className="pl-3 pr-3 pb-3">
+                  만들어진 설문을 확인하시려면 프로필을 눌러주세요.
+                </div>
+                <div className="flex border-themeColor border-t-2">
+                  <Link to="/login">
                     <div
-            className="hidden z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600"
-            id="user-dropdown"
+                      className="p-2 w-24 border-r-2 border-themeColor text-center text-l text-gray-600 hover:text-themeColor"
+                      onClick={() => logout(() => navigate("/"))}
                     >
-            <div className="py-3 px-4">
-              <span className="block text-sm text-gray-900 dark:text-white">
-                Bonnie Green
-              </span>
-              <span className="block text-sm font-medium text-gray-500 truncate dark:text-gray-400">
-                name@flowbite.com
-              </span>
+                      로그아웃
                     </div>
-            <ul className="py-1" aria-labelledby="user-menu-button">
-              <li>
-                <a
-                  href="#"
-                  className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-                >
-                  Dashboard
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#"
-                  className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-                >
-                  Settings
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#"
-                  className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-                >
-                  Earnings
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#"
-                  className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-                >
-                  Sign out
-                </a>
-              </li>
-            </ul>
+                  </Link>
+                  <Link to="/profile">
+                    <div className="p-2 w-24 text-center text-l text-gray-600 hover:text-themeColor">
+                      프로필
                     </div>
-          <button
-            data-collapse-toggle="mobile-menu-2"
-            type="button"
-            className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
-            aria-controls="mobile-menu-2"
-            aria-expanded="false"
-          >
-            <span className="sr-only">Open main menu</span>
-            <UserIcon className="w-7 h-7 absolute top-4 right-2" />
-            <svg
-              className="w-6 h-6"
-              aria-hidden="true"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
+                  </Link>
+                </div>
+              </div>
+            ) : (
+              <div className="fixed top-14 right-1 w-48 bg-themeColor3 flex flex-col rounded-lg">
+                <div className="p-3">로그아웃 상태입니다.</div>
+                <div className="pl-3 pr-3 pb-3">
+                  설문지를 만드시려면 로그인해주세요.
+                </div>
+                <div className="flex border-themeColor border-t-2">
+                  <Link to="/login">
+                    <div className="p-2 w-24 border-r-2 border-themeColor justify-center text-l text-gray-600 hover:text-themeColor">
+                      로그인
+                    </div>
+                  </Link>
+                  <Link to="/signup">
+                    <div className="p-2 w-24 justify-center text-l text-gray-600 hover:text-themeColor">
+                      회원가입
+                    </div>
+                  </Link>
+                </div>
+              </div>
+            )
+          ) : (
+            <></>
+          )}
         </button>
-        </div> */}
       </div>
     </div>
   );

frontend/src/profile/MySurveyCard.tsx

@@ -52,7 +52,7 @@ export const MySurveyCard = ({ data }: Props) => {
 
   return (
     <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 mt-2" onClick={editSurvey}>
+      <button className="w-full pt-1" onClick={editSurvey}>
         <p className="font-bold">
           {data.title ? data.title : "제목없는 설문조사"}
         </p>
@@ -73,7 +73,7 @@ export const MySurveyCard = ({ data }: Props) => {
         </button>
         <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 mr-1.5"
           onClick={deleteSurvey}
         >
           삭제

frontend/src/questions/Question.tsx

@@ -157,8 +157,8 @@ Props) => {
 
   return (
     <div
-      style={{ borderColor: isSaved ? "#58ACFA" : "red" }}
-      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2"
+      style={{ borderColor: isSaved ? "#0A8A8A" : "red" }}
+      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
     >
       <div className="flex h-16 w-full place-content-between items-center">
         <input

frontend/src/survey/EditResultButton.tsx

@@ -16,7 +16,7 @@ export const EditResultButton = () => {
               ? {
                   width: "140px",
                   color: "white",
-                  backgroundColor: "#58ACFA",
+                  backgroundColor: "#008080",
                   borderTopLeftRadius: "25px",
                   borderBottomLeftRadius: "25px",
                   textAlign: "center",
@@ -26,7 +26,7 @@ export const EditResultButton = () => {
               : {
                   width: "140px",
                   borderWidth: "1px",
-                  borderColor: "#58ACFA",
+                  borderColor: "#008080",
                   borderTopLeftRadius: "25px",
                   borderBottomLeftRadius: "25px",
                   textAlign: "center",
@@ -43,7 +43,7 @@ export const EditResultButton = () => {
               ? {
                   width: "140px",
                   color: "white",
-                  backgroundColor: "#58ACFA",
+                  backgroundColor: "#008080",
                   borderTopRightRadius: "25px",
                   borderBottomRightRadius: "25px",
                   textAlign: "center",
@@ -53,7 +53,7 @@ export const EditResultButton = () => {
               : {
                   width: "140px",
                   borderWidth: "1px",
-                  borderColor: "#58ACFA",
+                  borderColor: "#008080",
                   borderTopRightRadius: "25px",
                   borderBottomRightRadius: "25px",
                   textAlign: "center",

frontend/src/survey/EditSurvey.tsx

@@ -151,7 +151,7 @@ export const EditSurvey = () => {
               deleteQuestion={deleteQuestion}
             />
           ))}
-          <div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
+          <div className="flex w-4/5 content-center justify-center border-2 border-themeColor2 border-addQuestionColor h-8 mt-3 rounded-lg ">
             <button type="button" onClick={addQuestion}>
               질문 추가
             </button>

frontend/tailwind.config.js

@@ -4,7 +4,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'themeColor': '#58ACFA',
+        'themeColor': '#0A8A8A',
+        'themeColor2': '#41C1C1',
+        'themeColor3' : '#EAF4F4',
       },
     },
   },