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;