Merge pull request #17 from Finding-Nemo-s-Aquarium/yugyeong

hover 색상 변경 및 서브 카테고리 로직 버그 해결

src/Shop/Shop.css

@@ -52,6 +52,10 @@
     cursor: pointer;
 }
 
+.category-title:hover {
+    color: #ff9500;
+}
+
 .category-items {
     font-family: 'Baloo 2', Helvetica, sans-serif;
     display: flex;
@@ -67,6 +71,10 @@
     margin: 5px;
 }
 
+.category-item:hover {
+    color: #ff9500;
+}
+
 .gallery {
     display: flex;
     flex-wrap: wrap;

src/Shop/Shop.jsx

@@ -7,6 +7,7 @@ import "./Shop.css";
 
 const Shop = ({ isLoggedIn }) => {
     const [selectedCategory, setSelectedCategory] = useState(null);
+    const [selectedSubCategory, setSelectedSubCategory] = useState(null);
     const [selectedItem, setSelectedItem] = useState(null);
 
     //const navigate = useNavigate();
@@ -42,13 +43,19 @@ const Shop = ({ isLoggedIn }) => {
 
     const handleCategoryClick = (category) => {
         setSelectedCategory(category);
+        setSelectedSubCategory(null); // 카테고리를 클릭하면 선택된 서브카테고리 초기화
         setSelectedItem(null); // 카테고리를 클릭하면 선택된 아이템을 초기화
     };
 
     const handleItemClick = (item) => {
         setSelectedItem(item);
     };
 
+    const handleSubCategoryClick = (subCategory) => {
+        setSelectedSubCategory(subCategory); // 서브카테고리 설정
+        setSelectedItem(null); // 서브카테고리를 클릭하면 선택된 아이템 초기화
+    };
+
     const handleAddToCart = async (name, amount) => {
         if (!isLoggedIn) {
             alert('로그인을 해주세요.');
@@ -122,7 +129,7 @@ const Shop = ({ isLoggedIn }) => {
                                     <div 
                                         className="category-item" 
                                         key={item.name} 
-                                        onClick={() => handleItemClick(item)}
+                                        onClick={() => handleSubCategoryClick(item.name)}
                                     >
                                         {item.name}
                                     </div>
@@ -141,6 +148,12 @@ const Shop = ({ isLoggedIn }) => {
                         onAddToCart={handleAddToCart}
                         isLoggedIn={isLoggedIn}
                     />
+                ) : selectedSubCategory ? (
+                    allItems.filter(item => item.name === selectedSubCategory).map(item => (
+                        <div className="gallery-item" key={item.name}>
+                            <img src={item.src} alt={item.name} onClick={() => handleItemClick(item)} />
+                        </div>
+                    ))
                 ) : selectedCategory ? (
                     categories[selectedCategory].map(item => (
                         <div className="gallery-item" key={item.name}>

src/Sign/SignUp.css

@@ -35,7 +35,7 @@ body {
 
 }
 
-.input-container {
+.signup-container .input-container {
   width: 100%;
   max-width: 370px;
   text-align: center;
@@ -44,65 +44,65 @@ body {
   align-items: center;
 }
 
-.back-home {
+.signup-container .back-home {
   position: absolute;
   top: 20px;
   left: 20px;
-  color: #2845a3;
+  color: #0099DA;
   cursor: pointer;
 }
 
-.header {
+.signup-container .header {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   /* clownfish와 signin 텍스트 사이의 간격 */
 }
 
-.clownfish {
+.signup-container .clownfish {
   width: 30px;
   margin-right:  10px;
   /* 왼쪽으로 이동시키는 대신 오른쪽 마진 추가 */
 }
 
-.finding-nemo-text {
-  color: #2845a3;
+.signup-container .finding-nemo-text {
+  color: #0099DA;
   font-family: 'Luckiest Guy', sans-serif;
   font-size: 1.5em;
 }
 
-.signup-text {
+.signup-container .signup-text {
   font-size: 50px !important;
   margin-top: -10px;
   margin-bottom: 20px;
   margin-left: -220px;
 }
 
-.signup-form {
+.signup-container .signup-form {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-.input-label {
+.signup-container .input-label {
   margin-top: 10px;
-  color: #2845a3;
+  color: #0099DA;
   font-size: 15px;
   text-align: left;
 }
 
-.input-box {
+.signup-container .input-box {
   height: 20px;
   padding: 10px;
   margin-top: 7px;
-  border: 1px solid #2845a3;
+  border: 1px solid #0099DA;
   border-radius: 10px;
 }
 
 .signup-button {
   height: 50px;
   margin-top: 55px;
-  background-color: #2845a3;
+  background-color: #0099DA;
   color: white;
   border: none;
   border-radius: 10px;
@@ -116,7 +116,7 @@ body {
 }
 
 .signin-link span {
-  color: #2845a3;
+  color: #0099DA;
   cursor: pointer;
 }
 

src/Sign/components/AlreadyHave.css

@@ -22,11 +22,11 @@
 }
 
 .signin {
-    color: #2845a3;
+    color: #0099DA;
     cursor: pointer;
     /* 클릭 가능하게 변경 */
 }
 
 .signin:hover {
-    color: #ff9500;
+    color: #3AC4FF;
 }

src/Sign/components/DontHave.css

@@ -28,5 +28,5 @@
 }
 
 .signup:hover {
-    color: #ff9500;
+    color: #4C6CD3;
 }

src/Sign/components/SignInBackToHome.css

@@ -25,5 +25,5 @@
 }
 
 .SignInBackToHome:hover .SignInBackToHome-text {
-    color: #ff9500;
+    color: #4C6CD3;
 }

src/Sign/components/SignInButton.css

@@ -17,7 +17,7 @@
 }
 
 .signin-button:hover {
-    background-color: #1f3a82;
+    background-color: #4C6CD3;
 }
 
 .text-wrapper {

src/Sign/components/SignUpBackToHome.css

@@ -6,7 +6,7 @@
     height: 37px;
     text-align: center;
     font-size: 20px;
-    color: #2845a3;
+    color: #0099DA;
     font-family: Kanit;
 }
 
@@ -25,5 +25,5 @@
 }
 
 .backToHome:hover .backToHome-text {
-    color: #ff9500;
+    color: #3AC4FF;
 }

src/Sign/components/SignUpButton.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap');
 
 .signup-button {
-    background-color: #2845a3;
+    background-color: #0099DA;
     border-radius: 17px;
     height: 40px;
     width: 370px;
@@ -13,7 +13,7 @@
 }
 
 .signup-button:hover {
-    background-color: #1f3a82;
+    background-color: #3AC4FF;
 }
 
 .text-wrapper {