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 ( {type === 'hot' ? ( - 인기 급상승 시그니처🔥 + 🔥 인기 급상승 시그니처 ) : type === 'new' ? ( - 최신 시그니처🔥 + 🔥 최신 시그니처 ) : ( "{searchTerm}" 에 관한 시그니처⭐ )} 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 = () => { - 오늘의 랜덤 메이트 추천 + + 오늘의

랜덤 메이트

추천 +
{isLoading ? new Array(5).fill(0).map(() => ) @@ -68,7 +70,7 @@ const MateLookPage = () => { )) ) : (
- {`[${locationMate?.location}]`}를 사용하는 메이트가 + {`[${locationMate?.location}]`}을/를 사용하는 메이트가 없습니다.
))} 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`