Merge pull request #210 from Here-You/feature/#209

[Style] : 메이트 탐색 디자인 변경, 스크롤바 수정, 알림 스타일 수정
Here-You · Feb 16, 2024 · 88dfda1 · 88dfda1
2 parents ff89dc7 + 078d41a
commit 88dfda1
Show file tree

Hide file tree

Showing 9 changed files with 360 additions and 38 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/mate/skeleton/MateBoxSkeleton.jsx b/src/components/mate/skeleton/MateBoxSkeleton.jsx
@@ -0,0 +1,26 @@
+import * as S from './MateBoxSkeleton.style';
+
+const MateBoxSkeleton = () => {
+  return (
+    <S.MateBox>
+      <S.MateDescriptionBox>
+        <S.MateImage />
+        <S.TextBox>
+          <S.TextContainer>
+            <S.Text />
+            <S.Text />
+          </S.TextContainer>
+        </S.TextBox>
+      </S.MateDescriptionBox>
+      <S.ImageWrapper>
+        {new Array(2).fill(0).map(() => (
+          <S.SignatureContainer>
+            <S.SignatureImage /> <S.Text />
+          </S.SignatureContainer>
+        ))}
+      </S.ImageWrapper>
+    </S.MateBox>
+  );
+};
+
+export default MateBoxSkeleton;
diff --git a/src/components/mate/skeleton/MateBoxSkeleton.style.js 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
@@ -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
@@ -0,0 +1,23 @@
+import * as S from './MateRecsys.style';
+
+const MateRecsysSkeleton = () => {
+  return (
+    <S.MateBox>
+      <S.MateDescriptionBox>
+        <S.TextBox>
+          <S.MateImage />
+          <S.TextContainer>
+            <S.Text />
+            <S.Text />
+          </S.TextContainer>
+          <S.ButtonContainer>
+            <S.Button />
+            <S.Button />
+          </S.ButtonContainer>
+        </S.TextBox>
+      </S.MateDescriptionBox>
+    </S.MateBox>
+  );
+};
+
+export default MateRecsysSkeleton;
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;