Refactor style

.github/workflows/deploy.yml

@@ -3,7 +3,7 @@ name: Deploy Frontend to EC2 (main)
 on:
   push:
     branches:
-      - ModifyStyle
+      - RefactorStyle
 
 jobs:
   deploy:

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "AutoPreview.serverURL": "http://localhost:3000/"
+}

git

@@ -0,0 +1,30 @@
+  origin/AttributesToggle
+  origin/AutoCompleteWithBackend
+  origin/Complete
+  origin/Debug1
+  origin/DeployTest
+  origin/DeployTest3
+  origin/Detail
+  origin/DetailInfo
+  origin/DetailWindow
+  origin/Dropdown
+  origin/Favorites
+  origin/Feedback
+  origin/FeedbackPage
+  origin/ForMerge2
+  origin/HEAD -> origin/main
+  origin/LinkMarkerToDetail
+  origin/MarkToDetail
+  origin/MarkerBookmark
+  origin/ModifyStyle
+  origin/Refactor
+  origin/Sign
+  origin/elaus00-patch-1
+  origin/forMerge
+  origin/gh-pages
+  origin/main
+  origin/mapping
+  origin/mergeForDebug1
+  origin/mergeForDebug1-1
+  origin/release
+  origin/release-test

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pureplate",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",

src/Attributes/Button.js

@@ -1,37 +1,15 @@
 import { useAuth } from "../AuthContext";
 import styles from "./Button.module.css";
-import halalIcon from "../assets/Icons/flag_halal.svg";
-import veganIcon from "../assets/Icons/flag_vegan.svg";
-import glutenIcon from "../assets/Icons/flag_glutenfree.svg";
-import lactoIcon from "../assets/Icons/flag_loctosfree.svg";
-
-import halalIcon1 from "../assets/Icons/flag_halal1.svg";
-import veganIcon1 from "../assets/Icons/flag_vegan1.svg";
-import glutenIcon1 from "../assets/Icons/flag_glutenfree1.svg";
-import lactoIcon1 from "../assets/Icons/flag_loctosfree1.svg";
+import { cssList, icons } from "./iconConfig"; // 분리된 설정 파일 임포트
 import { useEffect, useState } from "react";
 
 function Button({ attribute }) {
-  const [cssList, setCssList] = useState({
-    Vegan: "rgba(118, 199, 183, 0.85)",
-    Halal: "rgba(118, 199, 131, 0.85)",
-    "Gluten-Free": "rgba(233, 250, 234, 0.9)",
-    "Lacto-Free": "rgba(254, 246, 176, 0.85) ",
-  });
-
-  const [list, setList] = useState({
-    Vegan: veganIcon,
-    Halal: halalIcon,
-    "Gluten-Free": glutenIcon,
-    "Lacto-Free": lactoIcon,
-  });
-
-  // Icons for different states (default and active)
-  const [icons, setIcons] = useState({
-    Vegan: { default: veganIcon1, active: veganIcon },
-    Halal: { default: halalIcon1, active: halalIcon },
-    "Gluten-Free": { default: glutenIcon1, active: glutenIcon },
-    "Lacto-Free": { default: lactoIcon1, active: lactoIcon },
+  const [list, setList] = useState(() => {
+    const initialList = {};
+    Object.keys(icons).forEach((key) => {
+      initialList[key] = icons[key].default;
+    });
+    return initialList;
   });
 
   const { dietToggle, setDietToggle } = useAuth(); 
@@ -102,4 +80,4 @@ function Button({ attribute }) {
   );
 }
 
-export default Button; 
+export default Button;

src/Attributes/Button.module.css

@@ -4,31 +4,31 @@
 
 /* Default (not selected) */
 .selectedFalse {
-  border-color: #a6b9b1c5;
+  border-color: #a6b9b100;
+  background-color: #ffffffd0;
 }
 
 .distance {
   color: #3e4958;
   text-align: center;
   font-family: "AnekBangla-Light", sans-serif;
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: 1.1rem;
   font-weight: 300;
   position: relative;
 
-  border-radius: 1.875rem;
+  border-radius: 1.575rem;
   border-style: solid;
   border-width: 0.03125rem;
   padding: 0.625rem 1rem 0.625rem 1rem;
   display: flex;
   flex-direction: row;
-  gap: 0.625rem;
   align-items: center;
   justify-content: center;
   height: 2.875rem;
   position: relative;
   cursor: pointer;
 }
+
 /* 1050px 이하의 화면 크기에서 스타일 적용 */
 @media (max-width: 1050px) {
   .distance {

src/Attributes/iconConfig.js

@@ -0,0 +1,23 @@
+import halalIcon from "../assets/Icons/flag_halal.svg";
+import veganIcon from "../assets/Icons/flag_vegan.svg";
+import glutenIcon from "../assets/Icons/flag_glutenfree.svg";
+import lactoIcon from "../assets/Icons/flag_loctosfree.svg";
+
+import halalIcon1 from "../assets/Icons/flag_halal1.svg";
+import veganIcon1 from "../assets/Icons/flag_vegan1.svg";
+import glutenIcon1 from "../assets/Icons/flag_glutenfree1.svg";
+import lactoIcon1 from "../assets/Icons/flag_loctosfree1.svg";
+
+export const cssList = {
+  Vegan: "rgba(118, 199, 183, 0.85)",
+  Halal: "rgba(118, 199, 131, 0.85)",
+  "Gluten-Free": "rgba(233, 250, 234, 0.9)",
+  "Lacto-Free": "rgba(254, 246, 176, 0.85)",
+};
+
+export const icons = {
+  Vegan: { default: veganIcon1, active: veganIcon },
+  Halal: { default: halalIcon1, active: halalIcon },
+  "Gluten-Free": { default: glutenIcon1, active: glutenIcon },
+  "Lacto-Free": { default: lactoIcon1, active: lactoIcon },
+};

src/Profile/Profile.jsx

@@ -2,7 +2,7 @@ import { ChevronDown } from "../ChevronDown/ChevronDown.jsx";
 import { useEffect, useState } from "react";
 import { useAuth } from "../AuthContext.jsx";
 import { Link, useNavigate } from "react-router-dom";
-import Sign from "./Signin/Sign.jsx";
+import SignInMain from "./Signin/SignInMain.jsx";
 import LogoutConfirmModal from "./Logout/LogoutConfirmModal.jsx";
 import styles from "./Profile.module.css";
 import profileIcon from "../assets/Icons/profile.svg";
@@ -72,7 +72,7 @@ function Profile() {
           onClick={isLoggedIn ? toggleDropdown : openModal}
         >
           {!isLoggedIn ? (
-            <span style={{ width: "100%" }}>Sign In</span>
+            <span>Sign In</span>
           ) : (
             <>
               <div className={styles.jiwoo}>{user}</div>
@@ -107,7 +107,7 @@ function Profile() {
             </ul>
           </div>
         )}
-        <Sign isOpen={isModalOpen} close={closeModal} />
+        <SignInMain isOpen={isModalOpen} close={closeModal} />
         <LogoutConfirmModal
           isOpen={isLogoutConfirmOpen}
           onClose={closeLogoutConfirm}

src/Profile/Profile.module.css

@@ -4,6 +4,7 @@ li {
   line-height: 149.8%;
   font-weight: 400;
 }
+
 a:visited {
   color: black;
 }
@@ -35,30 +36,18 @@ a:visited {
   cursor: pointer;
 }
 
-@media (max-width: 1050px) {
-  .profile {
-    font-size: 0.9rem; /* 폰트 사이즈 줄임 */
-    width: 7rem;
-    height: 2.8rem;
-  }
-}
-@media (max-width: 678px) {
-  .profile {
-    display: none;
-  }
-}
-
 .dropdownContainer {
+  display: flex;
   position: relative;
 }
+
 .profileImage {
   background: linear-gradient(to left, #d3d3d3, #d3d3d3);
   border-radius: 5rem;
   width: 2.5rem;
   height: 2.5rem;
-  position: absolute;
-  left: 0.4375rem;
-  top: calc(50% - 1.21875rem);
+  position: relative;
+  justify-content: center;
   object-fit: cover;
 }
 
@@ -100,14 +89,6 @@ a:visited {
   animation: dropdown 0.4s ease forwards;
 }
 
-@media (max-width: 678px) {
-  .dropdownMenu {
-    right: -10px;
-    width: 100px;
-    left: auto;
-  }
-}
-
 .dropdownMenu ul {
   list-style-type: none; /* 기본 목록 스타일 제거 */
   margin: 0;
@@ -124,6 +105,7 @@ a:visited {
   background-color: #f2f2f2;
   /* background-color: #f1f1f1; 항목에 마우스 오버 시 배경색 변경 */
 }
+
 .dropProfile {
   color: #3e4958;
   text-align: center;
@@ -133,22 +115,11 @@ a:visited {
   font-weight: 800;
   display: none;
 }
-@media (max-width: 678px) {
-  .dropProfile {
-    display: block;
-  }
-}
+
 .dropProfile:hover {
   background-color: transparent !important;
 }
 
-@media (min-width: 678px) {
-  .profileIcon {
-    display: none;
-    width: 35px;
-  }
-}
-
 @keyframes dropdown {
   0% {
     transform: translateY(-20px);
@@ -159,65 +130,38 @@ a:visited {
     opacity: 1;
   }
 }
-/*
-@keyframes dropdownClose {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-} */
-/* .dropdownMenu.hide {
-  animation: dropdownClose 0.4s ease forwards;
-} */
-
-/*  */
-/* 
-@keyframes slide-fade-in-dropdown-animation {
-  0% {
-    transform: translateY(-100%);
-  }
 
-  100% {
-    transform: translateY(0);
+@media (max-width: 1050px) {
+  .profile {
+    font-size: 0.9rem; /* 폰트 사이즈 줄임 */
+    width: 7rem;
+    height: 2.8rem;
   }
 }
 
-.slide-fade-in-dropdown {
-  overflow: hidden;
-}
-
-.slide-fade-in-dropdown > ul {
-  animation: slide-fade-in-dropdown-animation 0.4s ease;
-}
-
-@keyframes slide-fade-out-dropdown-animation {
-  0% {
-    transform: translateY(0);
+@media (max-width: 678px) {
+  .profile {
+    display: none;
   }
+}
 
-  100% {
-    transform: translateY(-100%);
+@media (max-width: 678px) {
+  .dropdownMenu {
+    right: -10px;
+    width: 100px;
+    left: auto;
   }
 }
 
-.slide-fade-out-dropdown {
-  overflow: hidden;
+@media (max-width: 678px) {
+  .dropProfile {
+    display: block;
+  }
 }
 
-.slide-fade-out-dropdown > ul {
-  animation: slide-fade-out-dropdown-animation 0.4s ease;
-  animation-fill-mode: forwards;
+@media (min-width: 678px) {
+  .profileIcon {
+    display: none;
+    width: 35px;
+  }
 }
-
-.components-dropdown > ul {
-  position: relative;
-  top: 5px;
-  margin-top: 0;
-  margin-bottom: 5px;
-  padding-left: 0;
-  list-style: none;
-} */