Style: 스크롤바 디자인 변경, 메이트 탐색하기 디자인 수정

Here-You · Feb 16, 2024 · 078d41a · 078d41a
1 parent 8da6339
commit 078d41a
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 14 deletions.
diff --git a/src/components/explore/SignatureSearchSlider.jsx b/src/components/explore/SignatureSearchSlider.jsx
@@ -8,9 +8,9 @@ const SignatureSearchSlider = ({ data, type, searchTerm }) => {
   return (
     <S.PageContainer>
       {type === 'hot' ? (
-        <S.Title>인기 급상승 시그니처🔥</S.Title>
+        <S.Title>🔥 인기 급상승 시그니처</S.Title>
       ) : type === 'new' ? (
-        <S.Title>최신 시그니처🔥</S.Title>
+        <S.Title>🔥 최신 시그니처</S.Title>
       ) : (
         <S.Title>"{searchTerm}" 에 관한 시그니처⭐</S.Title>
       )}

diff --git a/src/components/explore/SignatureSearchSlider.style.js b/src/components/explore/SignatureSearchSlider.style.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 
+import { FONT_SIZE } from '@/constants/size';
 import theme from '@/theme';
 
 const PageContainer = styled.div`
@@ -23,12 +24,37 @@ const EmptyContainer = styled.div`
 const Title = styled.div`
   display: flex;
   margin-left: 10px;
+  font-size: ${FONT_SIZE.LG};
+  color: ${theme.COLOR.MAIN.BLACK};
   font-family: 'Pretendard-bold';
 `;
 
 const PreviewContainer = styled.div`
   display: flex;
   overflow-x: scroll;
+  margin-bottom: 10px;
+
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+    border-radius: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+  }
 `;
 
 const Text = styled.div`

diff --git a/src/components/notification/NotificationPage.style.js b/src/components/notification/NotificationPage.style.js
@@ -11,8 +11,10 @@ const Container = styled.div`
 `;
 
 const NotificationContainer = styled.div`
-  ${theme.ALIGN.ROW_CENTER}
-  width: 90%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 95%;
   font-size: ${FONT_SIZE.LG};
   margin-bottom: 30px;
   padding: 20px;

diff --git a/src/pages/mate/look/MateLook.jsx b/src/pages/mate/look/MateLook.jsx
@@ -31,7 +31,9 @@ const MateLookPage = () => {
     <S.MateLookContainer>
       <Banner />
       <S.BoxContainer>
-        <S.Title>오늘의 랜덤 메이트 추천</S.Title>
+        <S.Title>
+          오늘의 <h3>랜덤 메이트</h3> 추천
+        </S.Title>
         <S.CenteredContainer>
           {isLoading
             ? new Array(5).fill(0).map(() => <MateRecsysSkeleton />)
@@ -68,7 +70,7 @@ const MateLookPage = () => {
                     ))
                   ) : (
                     <div>
-                      {`[${locationMate?.location}]`}를 사용하는 메이트가
+                      {`[${locationMate?.location}]`}을/를 사용하는 메이트가
                       없습니다.
                     </div>
                   ))}

diff --git a/src/pages/mate/look/MateLook.style.js b/src/pages/mate/look/MateLook.style.js
@@ -13,28 +13,31 @@ const BoxContainer = styled.div`
   flex-direction: column;
   width: 90%;
   margin: 0 auto;
-  margin-top: 20px;
+  margin-top: 50px;
 `;
 
 const Title = styled.div`
-  font-family: 'Pretendard-bold';
+  padding: 10px;
+  font-family: 'Pretendard';
   ${theme.ALIGN.ROW_CENTER};
-  font-size: 18px;
+  font-size: ${FONT_SIZE.LG};
   color: ${theme.COLOR.MAIN.BLACK};
   white-space: nowrap;
+  background-color: ${theme.COLOR.MAIN.LIGHT_GREEN};
+  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 5px 0px; */
+  border-radius: 10px;
 
   h3 {
     font-family: 'Pretendard-semibold';
-    font-size: 24px;
+    font-size: ${FONT_SIZE.LG};
     padding: 0 5px;
-    color: ${theme.COLOR.MAIN.GRAY};
+    color: ${theme.COLOR.MAIN.HEAVY_GREEN};
   }
 
   @media ${theme.WINDOW_SIZE.MOBILE} {
     font-size: 12px;
-
     h3 {
-      font-size: 15px;
+      font-size: 12px;
     }
   }
 `;
@@ -45,12 +48,34 @@ const CenteredContainer = styled.div`
   gap: 20px;
   overflow-x: auto;
   margin-top: 20px;
-  padding: 0 0px;
+  padding: 10px 0px;
 
   p {
     font-size: ${FONT_SIZE.LG};
     color: ${theme.COLOR.MAIN.BLACK};
   }
+
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+    border-radius: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+  }
 `;
 
 const MateContainer = styled.div`