refactor: 카테고리 박스 스크롤 문제 수정 및 리스트 카드 수정

delicious-algorithme · Dec 3, 2024 · 34ee10c · 34ee10c
1 parent dd6d6df
commit 34ee10c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/src/components/common/category/Category.jsx b/src/components/common/category/Category.jsx
@@ -46,7 +46,6 @@ const CategoryLayout = styled.div`
     gap: 20px;
     align-items: center;
     justify-content: center;
-    overflow-y: scroll;
     padding-bottom: 100px;
     & > div {
         display: flex;
@@ -59,6 +58,7 @@ const CategoryLayout = styled.div`
         color: ${Orange};
         border: 1px solid ${Orange};
         cursor: pointer;
+
         &:hover {
             background-color: ${Orange};
             color: ${White};

diff --git a/src/components/common/store/StoreCard.jsx b/src/components/common/store/StoreCard.jsx
@@ -62,7 +62,6 @@ const StoreListCardLayout = styled.div`
     border-top: 1px solid ${LightGrey};
 
     &:hover {
-        cursor: pointer;
         background-color: ${LightGrey};
     }
 
@@ -173,6 +172,10 @@ const NameAndBookmarkContainer = styled.div`
     & > p {
         font-weight: 700;
         font-size: 19px;
+        &:hover {
+            cursor: pointer;
+            font-size: 20px;
+        }
     }
 
     @media screen and (max-width: 500px) {

diff --git a/src/components/main/CategoryAndMap.jsx b/src/components/main/CategoryAndMap.jsx
@@ -56,12 +56,12 @@ const CategoryAndMapBox = styled.div`
         overflow-y: auto;
         border-radius: 20px;
         box-shadow: 2px 2px 2px ${Grey};
-        overflow-y: auto;
 
         &::-webkit-scrollbar {
             width: 5px;
             height: auto;
         }
+
         &::-webkit-scrollbar-thumb {
             background: rgba(217, 217, 217, 1);
             border-radius: 15px;

diff --git a/src/components/storeCard/TopStoreCard.jsx b/src/components/storeCard/TopStoreCard.jsx
@@ -40,12 +40,8 @@ const StoreCardContainer = styled.div`
     border-radius: 5px;
     position: relative;
     transition: all 0.3s ease;
-    cursor: pointer;
 
     &:hover {
-        & > p {
-            color: ${Orange};
-        }
         transform: scale(1.05);
     }
 
@@ -76,6 +72,9 @@ const ImageContainer = styled.div`
         height: 100%;
         object-fit: cover;
         border-radius: 10px 10px 0 0;
+        &:hover {
+            cursor: pointer;
+        }
     }
 
     @media screen and (max-width: 500px) {
@@ -98,6 +97,10 @@ const NameAndBookmarkContainer = styled.div`
         display: flex;
         align-items: center;
         font-weight: 600;
+        &:hover {
+            transform: scale(1.05);
+            cursor: pointer;
+        }
     }
 
     & > div {