From 8da6339d77fb8a2e6dd999b075f61b3611a67b43 Mon Sep 17 00:00:00 2001 From: chaKK Date: Sat, 17 Feb 2024 03:50:08 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Style:=20=EB=A9=94=EC=9D=B4=ED=8A=B8=20?= =?UTF-8?q?=ED=83=90=EC=83=89=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mate/skeleton/MateBoxSkeleton.jsx | 26 ++++ .../mate/skeleton/MateBoxSkeleton.style.js | 121 ++++++++++++++++++ .../mate/skeleton/MateRecsys.style.js | 91 +++++++++++++ .../mate/skeleton/MateRecsysSkeleton.jsx | 23 ++++ src/pages/mate/look/MateLook.jsx | 56 ++++---- 5 files changed, 292 insertions(+), 25 deletions(-) create mode 100644 src/components/mate/skeleton/MateBoxSkeleton.jsx create mode 100644 src/components/mate/skeleton/MateBoxSkeleton.style.js create mode 100644 src/components/mate/skeleton/MateRecsys.style.js create mode 100644 src/components/mate/skeleton/MateRecsysSkeleton.jsx diff --git a/src/components/mate/skeleton/MateBoxSkeleton.jsx b/src/components/mate/skeleton/MateBoxSkeleton.jsx new file mode 100644 index 00000000..ca6cc453 --- /dev/null +++ b/src/components/mate/skeleton/MateBoxSkeleton.jsx @@ -0,0 +1,26 @@ +import * as S from './MateBoxSkeleton.style'; + +const MateBoxSkeleton = () => { + return ( + + + + + + + + + + + + {new Array(2).fill(0).map(() => ( + + + + ))} + + + ); +}; + +export default MateBoxSkeleton; diff --git a/src/components/mate/skeleton/MateBoxSkeleton.style.js b/src/components/mate/skeleton/MateBoxSkeleton.style.js new file mode 100644 index 00000000..2e1a794d --- /dev/null +++ b/src/components/mate/skeleton/MateBoxSkeleton.style.js @@ -0,0 +1,121 @@ +import styled, { keyframes } from 'styled-components'; + +import theme from '@/theme'; + +const skeletonGradient = keyframes` + 0% { + background-color: rgba(165, 165, 165, 0.1); + } + 50% { + background-color: rgba(165, 165, 165, 0.3); + } + 100% { + background-color: rgba(165, 165, 165, 0.1); + } +`; + +const MateBox = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + position: relative; + width: 300px; + height: 250px; + border-radius: 20px; + gap: 10px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const MateDescriptionBox = styled.div` + ${theme.ALIGN.ROW_CENTER}; + gap: 10px; + position: absolute; + top: 20px; + left: 20px; +`; + +const ImageWrapper = styled.div` + ${theme.ALIGN.ROW_CENTER}; + width: 300px; + height: 100%; + padding: 10px; + margin-top: 60px; + gap: 10px; +`; + +const ImageContainer = styled.div` + width: 80%; + margin: 0 auto; + display: flex; +`; + +const TextBox = styled.div` + width: 200px; + ${theme.ALIGN.ROW_CENTER}; + justify-content: space-between; +`; + +const TextContainer = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + align-items: flex-start; + gap: 10px; +`; + +const Text = styled.div` + width: 100px; + padding: 10px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const FollowButton = styled.button` + width: 50px; + padding: 15px; + border: none; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const MateImage = styled.div` + width: 50px; + height: 50px; + object-fit: cover; + border-radius: 50%; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const SignatureContainer = styled.div` + display: flex; + flex-direction: column; + width: 200px; + align-items: center; +`; + +const SignatureImage = styled.div` + width: 120px; + height: 120px; + margin-bottom: 5px; + object-fit: cover; + border-radius: 5px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const Image = styled.div` + width: 170px; + height: 180px; + border-radius: 10px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +export { + MateDescriptionBox, + MateBox, + TextBox, + TextContainer, + MateImage, + SignatureContainer, + SignatureImage, + ImageContainer, + Image, + ImageWrapper, + Text, + FollowButton, +}; diff --git a/src/components/mate/skeleton/MateRecsys.style.js b/src/components/mate/skeleton/MateRecsys.style.js new file mode 100644 index 00000000..93700860 --- /dev/null +++ b/src/components/mate/skeleton/MateRecsys.style.js @@ -0,0 +1,91 @@ +import styled, { keyframes } from 'styled-components'; + +import theme from '@/theme'; + +const skeletonGradient = keyframes` + 0% { + background-color: rgba(165, 165, 165, 0.1); + } + 50% { + background-color: rgba(165, 165, 165, 0.3); + } + 100% { + background-color: rgba(165, 165, 165, 0.1); + } +`; + +const MateBox = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 20px; + height: 230px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const MateDescriptionBox = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + align-items: center; + width: 90%; + margin: 0 auto; + height: 80%; + margin-right: 10px; +`; + +const TextBox = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +const TextContainer = styled.div` + ${theme.ALIGN.COLUMN_CENTER}; + gap: 10px; +`; + +const MateImage = styled.div` + width: 70px; + height: 70px; + padding: 15px; + border-radius: 50%; + margin: 10px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const ButtonContainer = styled.div` + display: flex; + flex-direction: column; + margin: 10px 30px; + justify-content: center; + align-items: center; +`; + +const Button = styled.button` + border: none; + padding: 15px; + border-radius: 10px; + margin-top: 5px; + width: 120px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +const Text = styled.div` + display: flex; + width: 100px; + padding: 10px; + border-radius: 20px; + animation: ${skeletonGradient} 1.5s infinite; +`; + +export { + MateBox, + MateDescriptionBox, + MateImage, + TextBox, + TextContainer, + Button, + Text, + ButtonContainer, +}; diff --git a/src/components/mate/skeleton/MateRecsysSkeleton.jsx b/src/components/mate/skeleton/MateRecsysSkeleton.jsx new file mode 100644 index 00000000..3180d2f9 --- /dev/null +++ b/src/components/mate/skeleton/MateRecsysSkeleton.jsx @@ -0,0 +1,23 @@ +import * as S from './MateRecsys.style'; + +const MateRecsysSkeleton = () => { + return ( + + + + + + + + + + + + + + + + ); +}; + +export default MateRecsysSkeleton; diff --git a/src/pages/mate/look/MateLook.jsx b/src/pages/mate/look/MateLook.jsx index 5d69548b..9c18bbd9 100644 --- a/src/pages/mate/look/MateLook.jsx +++ b/src/pages/mate/look/MateLook.jsx @@ -6,6 +6,8 @@ import explore2 from '/images/explore2.svg'; import Banner from '@/components/mate/Banner'; import MateBox from '@/components/mate/MateBox'; import MateRecsys from '@/components/mate/MateRecsys'; +import MateBoxSkeleton from '@/components/mate/skeleton/MateBoxSkeleton'; +import MateRecsysSkeleton from '@/components/mate/skeleton/MateRecsysSkeleton'; import { useRandomInfiniteMate } from '@/hooks/mate/queries/useRandomInfiniteMate'; import { useGetLocationMate } from '@/hooks/mate/useGetLocationMate'; @@ -31,12 +33,13 @@ const MateLookPage = () => { 오늘의 랜덤 메이트 추천 - {randomMates?.map(mateData => - mateData?.data.data.data.map(mate => ( - - )), - )} - + {isLoading + ? new Array(5).fill(0).map(() => ) + : randomMates?.map(mateData => + mateData?.data.data.data.map(mate => ( + + )), + )}
{ {locationMate ? ( <> - - {`${locationMate?.userName}님의 시그니처 `} -

[{locationMate?.location}]

- {'를 함께 이용 중인 메이트 추천'} - + {!loading && ( + + {`${locationMate?.userName}님의 시그니처 `} +

[{locationMate?.location}]

+ {'를 함께 이용 중인 메이트 추천'} + + )} + - {locationMate?.mateProfiles ? ( - locationMate?.mateProfiles.length > 0 ? ( - locationMate?.mateProfiles.map(mate => ( - - )) - ) : ( -
- {`[${locationMate?.location}]`}를 사용하는 메이트가 - 없습니다. -
- ) - ) : ( -
Loading...
- )} + {loading + ? new Array(5).fill(0).map(() => ) + : locationMate?.mateProfiles && + (locationMate?.mateProfiles.length > 0 ? ( + locationMate?.mateProfiles.map(mate => ( + + )) + ) : ( +
+ {`[${locationMate?.location}]`}를 사용하는 메이트가 + 없습니다. +
+ ))} + {} ) : ( From 078d41acfe2f8d674998bbae318ea0771413ff96 Mon Sep 17 00:00:00 2001 From: chaKK Date: Sat, 17 Feb 2024 04:30:50 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Style:=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= =?UTF-8?q?=EB=B0=94=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD,?= =?UTF-8?q?=20=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 ( {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`