Merge pull request #335 from oduck-team/feat/333

feat: 메인페이지 폰트 스타일 변경

src/features/animes/components/AnimeCard/style.ts

@@ -70,7 +70,7 @@ export const InfoContainer = styled.div`
 `;
 
 export const Title = styled.div`
-  ${({ theme }) => theme.typo["body-2-r"]};
+  ${({ theme }) => theme.typo["body-3-r"]};
   color: ${({ theme }) => theme.colors["neutral"]["90"]};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -89,13 +89,13 @@ export const Rating = styled.div`
   flex-shrink: 0;
 
   & > span {
-    ${({ theme }) => theme.typo["body-2-r"]};
+    ${({ theme }) => theme.typo["body-3-r"]};
     color: ${({ theme }) => theme.colors["neutral"]["70"]};
   }
 
   & > svg {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     flex-shrink: 0;
     color: ${({ theme }) => theme.colors["primary"]["60"]};
     fill: ${({ theme }) => theme.colors["primary"]["60"]};

src/features/animes/components/AnimeRanking/index.tsx

@@ -90,7 +90,7 @@ export default function AnimeRanking({ title }: AnimeRankingProps) {
                 {animes.map((ani, i) => (
                   <SliderItem key={ani.animeId}>
                     <SliderItemImage image={ani.thumbnail}>
-                      <Rank>{i + 1}</Rank>
+                      <Rank className="sub-carousel">{i + 1}</Rank>
                     </SliderItemImage>
                     <div>{ani.title}</div>
                   </SliderItem>

src/features/animes/components/AnimeRanking/style.ts

@@ -40,7 +40,7 @@ export const AnimeRankingContainer = styled.section`
   margin-bottom: 34px;
 
   & > h1 {
-    ${({ theme }) => theme.typo["title-2-m"]}
+    ${({ theme }) => theme.typo["title-3-m"]}
     color: ${({ theme }) => theme.colors["neutral"]["100"]};
     padding-left: 16px;
     margin-bottom: 8px;
@@ -120,7 +120,7 @@ export const HighlightItem = styled.div<ItemProps>`
   }
 
   & > h2 {
-    ${({ theme }) => theme.typo["title-3-m"]}
+    ${({ theme }) => theme.typo["title-1-m"]}
     width: 85%;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -167,8 +167,12 @@ export const Rank = styled.div<RankProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  ${({ theme }) => theme.typo["title-2-b"]};
+  ${({ theme }) => theme.typo["title-1-b"]};
   ${({ size = "sm" }) => css`
     ${RankSizes[size]}
   `}
+
+  &.sub-carousel {
+    ${({ theme }) => theme.typo["body-3-r"]};
+  }
 `;

src/features/animes/components/AnimeSlide/style.ts

@@ -41,7 +41,7 @@ export const AnimeSlideContainer = styled.section`
 
   & > h1 {
     ${({ theme }) => theme.colors["neutral"]["100"]};
-    ${({ theme }) => theme.typo["title-2-m"]};
+    ${({ theme }) => theme.typo["title-3-m"]};
     padding-left: 16px;
   }
 `;

src/features/common/routes/Home/RecentReview/style.ts

@@ -14,11 +14,15 @@ export const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  & button {
+    color: ${({ theme }) => theme.colors.neutral[60]};
+  }
 `;
 
 export const Title = styled.h1`
   color: ${({ theme }) => theme.colors["neutral"]["100"]};
-  ${({ theme }) => theme.typo["title-2-m"]};
+  ${({ theme }) => theme.typo["title-3-m"]};
 `;
 
 export const ReviewConainer = styled.div`

src/features/common/routes/Home/RecentReviewImageCard/ImageCardLoading.tsx

@@ -0,0 +1,36 @@
+import styled from "@emotion/styled";
+
+import Skeleton from "@/components/Skeleton";
+
+export default function ImageCardLoading() {
+  return (
+    <ImageCardLoadingContainer>
+      <ImageContainer>
+        <Skeleton w={"full"} h={480} />
+      </ImageContainer>
+      <EvaluationContainer>
+        <Skeleton w={55} h={18} wUnit="%" />
+        <Skeleton w={35} h={18} />
+      </EvaluationContainer>
+    </ImageCardLoadingContainer>
+  );
+}
+
+const ImageCardLoadingContainer = styled.section`
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }) => theme.colors.neutral["05"]};
+  margin-bottom: 32px;
+`;
+
+const ImageContainer = styled.div`
+  width: 100%;
+  border-bottom-right-radius: 30px;
+  overflow: hidden;
+`;
+
+const EvaluationContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+`;

src/features/common/routes/Home/RecentReviewImageCard/index.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 
 import { useApi } from "@/hooks/useApi";
 
+import ImageCardLoading from "./ImageCardLoading";
 import {
   AnimeConatiner,
   AnimeInfo,
@@ -19,11 +20,12 @@ import {
 
 export default function RecentReviewImageCard() {
   const { reviewApi } = useApi();
-  const { data } = useQuery({
+  const { data, isLoading } = useQuery({
     queryFn: () => reviewApi.getRecentReviewCard(),
     queryKey: ["MostRecentReviewList", "card"],
   });
 
+  if (isLoading) return <ImageCardLoading />;
   return (
     <>
       {data && (

src/features/reviews/components/ReviewCard/Animation.style.ts

@@ -25,13 +25,12 @@ export const Image = styled.img`
 export const TitleContainer = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  padding-bottom: 8px;
 `;
 
 export const Title = styled.h1`
-  ${({ theme }) => theme.typo["body-2-m"]};
+  ${({ theme }) => theme.typo["body-3-m"]};
   color: ${({ theme }) => theme.colors.neutral[70]};
+  margin-bottom: 8px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;

src/features/reviews/components/ReviewCard/ReviewComent.style.ts

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { TextSize } from "./ReviewComent";
 
 export const ReviewComentContainer = styled.div<{ textSize: TextSize }>`
-  ${({ theme }) => theme.typo["body-2-r"]}
+  ${({ theme }) => theme.typo["body-3-r"]}
   ${({ theme }) => theme.colors.neutral[80]}
   display: -webkit-box;
   overflow: hidden;