Style: 탐색 페이지 스켈레톤 스타일 수정

Here-You · Feb 17, 2024 · 9efe429 · 9efe429
1 parent bf2ff7a
commit 9efe429
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.jsx b/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.jsx
@@ -10,7 +10,6 @@ const Preview = (
     </S.Profile>
     <S.Info>
       <S.Date />
-      <S.HeartContainer />
     </S.Info>
   </S.PreviewWrap>
 );

diff --git a/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.style.js b/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.style.js
@@ -20,7 +20,6 @@ const PreviewWrap = styled.div`
   width: 150px;
   margin: 3%;
   border-radius: 20px;
-  animation: ${skeletonGradient} 1.5s infinite;
 `;
 
 const PreviewImg = styled.div`
@@ -29,23 +28,23 @@ const PreviewImg = styled.div`
   height: 120px;
   overflow: hidden;
   border-radius: 5px;
+  animation: ${skeletonGradient} 1.5s infinite;
 `;
 
 const PreviewTitle = styled.div`
   width: 120px;
-  padding: 10px;
+  padding: 8px;
   border-radius: 20px;
-  margin-left: 10px;
-
+  margin-top: 10px;
   animation: ${skeletonGradient} 1.5s infinite;
 `;
 
 const Profile = styled.div`
   ${theme.ALIGN.ROW_CENTER};
   width: 140px;
-  padding: 10px;
   gap: 5px;
   justify-content: flex-start;
+  margin-top: 5px;
 `;
 
 const ProfileImg = styled.div`
@@ -59,14 +58,15 @@ const ProfileImg = styled.div`
 
 const Nickname = styled.div`
   border-radius: 20px;
-  width: 100px;
-  padding: 10px;
+  width: 80px;
+  padding: 8px;
   animation: ${skeletonGradient} 1.5s infinite;
 `;
 
 const Date = styled.div`
   display: flex;
-  width: 70%;
+  width: 50%;
+  padding: 5px;
   border-radius: 20px;
 
   animation: ${skeletonGradient} 1.5s infinite;
@@ -75,8 +75,8 @@ const Date = styled.div`
 const HeartContainer = styled.div`
   ${theme.ALIGN.ROW_CENTER};
   margin-left: 40px;
-  width: 140px;
-  gap: 2px;
+  width: 20px;
+  height: 20px;
   border-radius: 20px;
 
   animation: ${skeletonGradient} 1.5s infinite;
@@ -112,7 +112,7 @@ const EmptyContainer = styled.div`
 
 const Title = styled.div`
   display: flex;
-  width: 300px;
+  width: 200px;
   padding: 15px;
   margin-left: 10px;
   border-radius: 20px;

diff --git a/src/components/preview/skeleton/PreviewSkeleton.style.js b/src/components/preview/skeleton/PreviewSkeleton.style.js
@@ -21,21 +21,26 @@ const PreviewWrap = styled.div`
   width: 200px;
   margin-bottom: 20px;
   border-radius: 10px;
-  animation: ${skeletonGradient} 1.5s infinite;
+
+  @media ${theme.WINDOW_SIZE.MOBILE} {
+    width: 300px;
+    height: 300px;
+  }
 `;
 
 const DateWrapper = styled.div`
   display: flex;
-  padding: 10px 25px;
-  border-radius: 10px;
+  padding: 5px 10px;
   align-items: center;
   margin-bottom: 5px;
-  animation: ${skeletonGradient} 1.5s infinite;
 `;
 
 const Date = styled.div`
+  width: 80px;
+  padding: 8px;
   margin-left: 2px;
-  font-size: 12px;
+  border-radius: 10px;
+  animation: ${skeletonGradient} 1.5s infinite;
 `;
 
 const PreviewImg = styled.div`
@@ -47,13 +52,13 @@ const PreviewImg = styled.div`
   @media ${theme.WINDOW_SIZE.MOBILE} {
     width: 100%;
   }
+  animation: ${skeletonGradient} 1.5s infinite;
 `;
 
 const ContentContainer = styled.div`
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   width: 200px;
   border-radius: 10px;
-  padding: 3px;
+  padding: 8px;
 
   @media ${theme.WINDOW_SIZE.MOBILE} {
     width: 100%;
@@ -63,16 +68,15 @@ const ContentContainer = styled.div`
 const Title = styled.h1`
   margin: 3px 0px;
   width: 60%;
-  padding: 15px;
-  overflow: hidden;
+  padding: 12px;
   border-radius: 20px;
   animation: ${skeletonGradient} 1.5s infinite;
 `;
 
 const Open = styled.div`
   display: flex;
   width: 30%;
-  padding: 15px;
+  padding: 12px;
   border-radius: 20px;
   animation: ${skeletonGradient} 1.5s infinite;
 `;