diff --git a/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.jsx b/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.jsx index da31c595..35f288f0 100644 --- a/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.jsx +++ b/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.jsx @@ -10,7 +10,6 @@ const Preview = ( - ); diff --git a/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.style.js b/src/components/explore/skeleton/SignatureSearchPreviewSkeleton.style.js index 65cf80f5..e3cbc2ee 100644 --- 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 index 06cbbf9e..7028753e 100644 --- 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,8 +68,7 @@ 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; `; @@ -72,7 +76,7 @@ const Title = styled.h1` const Open = styled.div` display: flex; width: 30%; - padding: 15px; + padding: 12px; border-radius: 20px; animation: ${skeletonGradient} 1.5s infinite; `;