diff --git a/src/features/animes/components/AnimeCard/style.ts b/src/features/animes/components/AnimeCard/style.ts
index af9c26a8..6595ed83 100644
--- a/src/features/animes/components/AnimeCard/style.ts
+++ b/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"]};
diff --git a/src/features/animes/components/AnimeRanking/index.tsx b/src/features/animes/components/AnimeRanking/index.tsx
index 36d7e4e2..c9fb445e 100644
--- a/src/features/animes/components/AnimeRanking/index.tsx
+++ b/src/features/animes/components/AnimeRanking/index.tsx
@@ -90,7 +90,7 @@ export default function AnimeRanking({ title }: AnimeRankingProps) {
{animes.map((ani, i) => (
- {i + 1}
+ {i + 1}
{ani.title}
diff --git a/src/features/animes/components/AnimeRanking/style.ts b/src/features/animes/components/AnimeRanking/style.ts
index 76a9f363..bc1a9b60 100644
--- a/src/features/animes/components/AnimeRanking/style.ts
+++ b/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`
}
& > 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`
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"]};
+ }
`;
diff --git a/src/features/animes/components/AnimeSlide/style.ts b/src/features/animes/components/AnimeSlide/style.ts
index 2c5daeaa..348798eb 100644
--- a/src/features/animes/components/AnimeSlide/style.ts
+++ b/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;
}
`;
diff --git a/src/features/common/routes/Home/RecentReview/style.ts b/src/features/common/routes/Home/RecentReview/style.ts
index fd3d0d7f..41ca43b3 100644
--- a/src/features/common/routes/Home/RecentReview/style.ts
+++ b/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`
diff --git a/src/features/common/routes/Home/RecentReviewImageCard/ImageCardLoading.tsx b/src/features/common/routes/Home/RecentReviewImageCard/ImageCardLoading.tsx
new file mode 100644
index 00000000..331c8b27
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+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;
+`;
diff --git a/src/features/common/routes/Home/RecentReviewImageCard/index.tsx b/src/features/common/routes/Home/RecentReviewImageCard/index.tsx
index cf42561f..558c9aba 100644
--- a/src/features/common/routes/Home/RecentReviewImageCard/index.tsx
+++ b/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 ;
return (
<>
{data && (
diff --git a/src/features/reviews/components/ReviewCard/Animation.style.ts b/src/features/reviews/components/ReviewCard/Animation.style.ts
index b6ecc4dc..7cb759df 100644
--- a/src/features/reviews/components/ReviewCard/Animation.style.ts
+++ b/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;
diff --git a/src/features/reviews/components/ReviewCard/ReviewComent.style.ts b/src/features/reviews/components/ReviewCard/ReviewComent.style.ts
index eed2f5cf..ffd27fc5 100644
--- a/src/features/reviews/components/ReviewCard/ReviewComent.style.ts
+++ b/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;