UI 수정

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

@@ -8,36 +8,22 @@ export const Header = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const [windowSize, setWindowSize] = useState({
-    width: window.innerWidth,
-  });
-
   const [isClicked, setIsClicked] = useState(false);
 
   const handleHeaderClick = () => {
     setIsClicked(!isClicked);
   };
 
-  const handleResize = () => {
-    setWindowSize({
-      width: window.innerWidth,
-    });
-  };
-  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-3.5">
       <div className="container flex flex-wrap place-content-center mx-auto">
-        <Link to="/" className="font-bold text-2xl text-themeColor">
+        <Link
+          to="/"
+          className="font-bold text-2xl text-themeColor justify-center"
+        >
           Simple Survey Form
         </Link>
-
-        <div className="hidden 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">
               <button
@@ -75,35 +61,43 @@ export const Header = () => {
           <UserIcon />
           {isClicked ? (
             user.isLoggedIn ? (
-              <div className="fixed top-14 right-1 w-20 bg-white flex flex-col border-2 border-themeColor">
-                <Link to="/login">
-                  <button
-                    className="text-gray-600 hover:text-themeColor"
-                    onClick={() => logout(() => navigate("/"))}
-                  >
-                    로그아웃
-                  </button>
-                </Link>
-                <Link to="/profile">
-                  <button className="text-gray-600 hover:text-themeColor">
-                    프로필
-                  </button>
-                </Link>
+              <div className="fixed top-14 justify-center right-1 w-48 h-40 bg-themeColor3 flex flex-col rounded-lg place-content-between">
+                <div className="p-1 place-self-center">안녕하세요.</div>
+                <div className="p-1 place-self-center">
+                  만들어진 설문을 확인하시려면 프로필을 눌러주세요.
+                </div>
+                <div className="flex border-themeColor border-t-2">
+                  <Link to="/login">
+                    <div
+                      className="p-1 w-24 border-r-2 border-themeColor text-center text-l text-gray-600 hover:text-themeColor"
+                      onClick={() => logout(() => navigate("/"))}
+                    >
+                      로그아웃
+                    </div>
+                  </Link>
+                  <Link to="/profile">
+                    <div className="p-1 w-24 text-center text-l text-gray-600 hover:text-themeColor">
+                      프로필
+                    </div>
+                  </Link>
+                </div>
               </div>
             ) : (
-              <div className="fixed top-14 right-1 w-20 bg-white flex flex-col border-2 border-themeColor">
-                <Link to="/login">
-                  <button>
-                    <div className="text-gray-600 hover:text-themeColor">
+              <div className="fixed top-14 right-1 w-48 h-40 bg-themeColor3 flex flex-col  place-content-between">
+                <div className="p-1">로그아웃 상태입니다.</div>
+                <div className="p-1">설문지를 만드시려면 로그인해주세요.</div>
+                <div className="flex ">
+                  <Link to="/login">
+                    <div className="p-1 w-24 justify-center text-l text-gray-600 hover:text-themeColor">
                       로그인
                     </div>
-                  </button>
-                </Link>
-                <Link to="/signup">
-                  <button className="text-gray-600 hover:text-themeColor">
-                    회원가입
-                  </button>
-                </Link>
+                  </Link>
+                  <Link to="/signup">
+                    <div className="p-1 w-24 justify-center text-l text-gray-600 hover:text-themeColor">
+                      회원가입
+                    </div>
+                  </Link>
+                </div>
               </div>
             )
           ) : (

frontend/src/commons/asd.tsx

-
-<nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
-  <div className="container flex flex-wrap justify-between items-center mx-auto">
-  <a href="https://flowbite.com/" className="flex items-center">
-      <img src="/docs/images/logo.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite Logo">
-      <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
-  </a>
-  <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 " id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
-        <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>
-      <!-- Dropdown menu -->
-      <div className="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 block" id="user-dropdown" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(644.8px, 74.4px, 0px);">
-        <div className="py-3 px-4">
-          <span className="block text-sm text-gray-900 ">Bonnie Green</span>
-          <span className="block text-sm font-medium text-gray-500 truncate">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 ">Dashboard</a>
-          </li>
-          <li>
-            <a href="#" className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 ">Settings</a>
-          </li>
-          <li>
-            <a href="#" className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 ">Earnings</a>
-          </li>
-          <li>
-            <a href="#" className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 ">Sign out</a>
-          </li>
-        </ul>
-      </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 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
-        <span className="sr-only">Open main menu</span>
-        <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>
-    </button>
-  </div>
-  <div className="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="mobile-menu-2">
-    <ul className="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
-      <li>
-        <a href="#" className="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white" aria-current="page">Home</a>
-      </li>
-      <li>
-        <a href="#" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
-      </li>
-      <li>
-        <a href="#" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
-      </li>
-      <li>
-        <a href="#" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
-      </li>
-      <li>
-        <a href="#" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
-      </li>
-    </ul>
-  </div>
-  </div>
-</nav>

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

@@ -146,7 +146,7 @@ export const EditSurvey = () => {
               deleteQuestion={deleteQuestion}
             />
           ))}
-          <div className="flex w-4/5 content-center justify-center border-2 border-addQuestionColor h-8 mt-3 rounded-lg ">
+          <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',
       },
     },
   },