From 078d41acfe2f8d674998bbae318ea0771413ff96 Mon Sep 17 00:00:00 2001
From: chaKK <cdin23@naver.com>
Date: Sat, 17 Feb 2024 04:30:50 +0900
Subject: [PATCH] =?UTF-8?q?Style:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD,=20?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=ED=8A=B8=20=ED=83=90=EC=83=89=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../explore/SignatureSearchSlider.jsx         |  4 +-
 .../explore/SignatureSearchSlider.style.js    | 26 ++++++++++++
 .../notification/NotificationPage.style.js    |  6 ++-
 src/pages/mate/look/MateLook.jsx              |  6 ++-
 src/pages/mate/look/MateLook.style.js         | 41 +++++++++++++++----
 5 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/src/components/explore/SignatureSearchSlider.jsx b/src/components/explore/SignatureSearchSlider.jsx
index c4277913..066b94e8 100644
--- 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
index cbd81c0a..fcffa346 100644
--- 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
index ab4b0c8a..f9ad4b24 100644
--- 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
index 9c18bbd9..b86678a5 100644
--- 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
index 7800bb97..ac923c2e 100644
--- 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`