From bce62d1d85266a4761761e050f020c7c1ad24b5c Mon Sep 17 00:00:00 2001 From: ejinn1 Date: Sat, 15 Feb 2025 11:12:44 +0900 Subject: [PATCH 1/6] Refactor: improve code readablility in follower component --- src/app/(route)/dashboard/page.tsx | 4 ++-- src/components/Dashboard/Follower/index.tsx | 14 +++++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/app/(route)/dashboard/page.tsx b/src/app/(route)/dashboard/page.tsx index 85d7bc97..774e0849 100644 --- a/src/app/(route)/dashboard/page.tsx +++ b/src/app/(route)/dashboard/page.tsx @@ -1,6 +1,6 @@ import { Header } from '@/components/common/Header'; import { PageContainer } from '@/components/common/PageContainer'; -import { Follwer } from '@/components/Dashboard/Follower'; +import { Follower } from '@/components/Dashboard/Follower'; import { GoalList } from '@/components/Dashboard/GoalList'; import { MyProgress } from '@/components/Dashboard/MyProgress'; import { RecentTodos } from '@/components/Dashboard/RecentTodos'; @@ -10,7 +10,7 @@ export default function DashBoardPage() { <>
- + diff --git a/src/components/Dashboard/Follower/index.tsx b/src/components/Dashboard/Follower/index.tsx index 7db1fa33..30f266b6 100644 --- a/src/components/Dashboard/Follower/index.tsx +++ b/src/components/Dashboard/Follower/index.tsx @@ -8,25 +8,29 @@ import { useGetFollowPosts } from '@/hooks/apis/Follows/useGetFollowPostsQuery'; import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'; import { FollowerStory } from './FollowerStory'; -export const Follwer = () => { +export const Follower = () => { const { follows, isLoading, fetchNextPage, isFetchingNextPage } = useGetFollowPosts(); const { observerRef } = useInfiniteScroll({ fetchNextPage, isLoading }); + const hasFollowers = follows.length > 0; + return ( - {isLoading ? ( - - ) : follows.length === 0 ? ( + {isLoading && } + + {!isLoading && !hasFollowers && (

찍찍이들 팔로우 하고 인증 보기

- ) : ( + )} + + {!isLoading && hasFollowers && (
{follows.map((follower) => ( From f4251370bdcafb58f3196e2b1e8d36dc031b233a Mon Sep 17 00:00:00 2001 From: ejinn1 Date: Sat, 15 Feb 2025 11:17:59 +0900 Subject: [PATCH 2/6] Refactor: improve code readablility in RecentTodos component --- .../Dashboard/RecentTodos/index.tsx | 22 +++++++++++++------ ...etTodosQuery.ts => useRecentTodosQuery.ts} | 0 2 files changed, 15 insertions(+), 7 deletions(-) rename src/hooks/apis/Dashboard/{useRecnetTodosQuery.ts => useRecentTodosQuery.ts} (100%) diff --git a/src/components/Dashboard/RecentTodos/index.tsx b/src/components/Dashboard/RecentTodos/index.tsx index a669601c..4b92ba18 100644 --- a/src/components/Dashboard/RecentTodos/index.tsx +++ b/src/components/Dashboard/RecentTodos/index.tsx @@ -10,12 +10,12 @@ import { Button } from '@/components/common/Button/Button'; import { Card } from '@/components/common/Card'; import { NoDataText } from '@/components/common/NoDataText'; +import { BasicTodoItem } from '@/components/TodosDetail/TodosDetailContent/TodoProfile/BasicTodoItem'; import { NO_DATA_MESSAGES } from '@/constants/Messages'; -import { useRecentTodosQuery } from '@/hooks/apis/Dashboard/useRecnetTodosQuery'; +import { useRecentTodosQuery } from '@/hooks/apis/Dashboard/useRecentTodosQuery'; import { useGoalsQuery } from '@/hooks/apis/useGoalsQuery'; import { useSidebarStore } from '@/store/useSidebarStore'; import { useTodoModalStore } from '@/store/useTodoModalStore'; -import { BasicTodoItem } from '@/components/TodosDetail/TodosDetailContent/TodoProfile/BasicTodoItem'; export const RecentTodos = () => { const { todos, isLoading } = useRecentTodosQuery(); @@ -24,6 +24,9 @@ export const RecentTodos = () => { const { open: openModal } = useTodoModalStore(); const { open: openSidebar } = useSidebarStore(); + const hasTodos = todos.length > 0; + const hasGoals = goals.length > 0; + return ( { > 모두 보기 - {isLoading ? ( - - ) : goals.length === 0 ? ( + + {isLoading && } + + {!isLoading && !hasGoals && ( - ) : todos.length === 0 ? ( + )} + + {!isLoading && hasGoals && !hasTodos && ( - ) : ( + )} + + {!isLoading && hasGoals && hasTodos && (
    {todos.map((todo) => ( Date: Sat, 15 Feb 2025 11:21:23 +0900 Subject: [PATCH 3/6] Refactor: improve code readablility in GoalList component --- src/components/Dashboard/GoalList/index.tsx | 24 ++++++++++++--------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/Dashboard/GoalList/index.tsx b/src/components/Dashboard/GoalList/index.tsx index ca5ec8c0..55453d53 100644 --- a/src/components/Dashboard/GoalList/index.tsx +++ b/src/components/Dashboard/GoalList/index.tsx @@ -16,11 +16,21 @@ export const GoalList = () => { useTodosOfGoalsQuery(); const { observerRef } = useInfiniteScroll({ fetchNextPage, isLoading }); + const hasGoals = goals.length > 0; + return ( - {isLoading ? ( - - ) : goals.length > 0 ? ( + {isLoading && } + + {!isLoading && !hasGoals && ( +
    + + + +
    + )} + + {!isLoading && hasGoals && (
    {goals.map((goal) => ( { todos={goal.todos} /> ))} +
    {isFetchingNextPage && ( )} -
    -
    - ) : ( -
    - - -
    )} From 8dfcfd7f5d7d12280ec27e1a439191ee1eba3319 Mon Sep 17 00:00:00 2001 From: ejinn1 Date: Sat, 15 Feb 2025 14:41:07 +0900 Subject: [PATCH 4/6] Refactor: apply dynamic to sidebar component --- next.config.ts | 2 +- src/app/(route)/layout.tsx | 4 +++- src/app/not-found.tsx | 5 ++++- src/components/Sidebar/index.tsx | 4 +++- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/next.config.ts b/next.config.ts index 75293411..14ddc5fd 100644 --- a/next.config.ts +++ b/next.config.ts @@ -20,7 +20,7 @@ const nextConfig: NextConfig = { hostname: 'zzikzzik-bucket.s3.ap-northeast-2.amazonaws.com', }, ], - formats: ['image/avif', 'image/webp'], // AVIF 우선 적용 + formats: ['image/avif', 'image/webp'], }, }; diff --git a/src/app/(route)/layout.tsx b/src/app/(route)/layout.tsx index 3521cf6d..0571f405 100644 --- a/src/app/(route)/layout.tsx +++ b/src/app/(route)/layout.tsx @@ -1,6 +1,8 @@ import { ReactNode } from 'react'; -import { Sidebar } from '@/components/Sidebar'; +import dynamic from 'next/dynamic'; + +const Sidebar = dynamic(() => import('@/components/Sidebar')); export default function RootLayout({ children, diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index f4173481..23d2caaa 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -1,11 +1,14 @@ 'use client'; +import dynamic from 'next/dynamic'; import { useRouter } from 'next/navigation'; + import LogoMain from '@/assets/svg/svg-logo-main.svg'; import { Button } from '@/components/common/Button/Button'; import { Header } from '@/components/common/Header'; import { PageContainer } from '@/components/common/PageContainer'; -import { Sidebar } from '@/components/Sidebar'; + +const Sidebar = dynamic(() => import('@/components/Sidebar')); export default function NotFound() { const router = useRouter(); diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index ebe64c5e..f57e290e 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -27,7 +27,7 @@ import { useTodoModalStore } from '@/store/useTodoModalStore'; import { cn } from '@/utils/className'; -export const Sidebar = () => { +const Sidebar = () => { const router = useRouter(); const path = usePathname(); @@ -147,3 +147,5 @@ export const Sidebar = () => {
    ); }; + +export default Sidebar; From bc2f31c4358550ad480b560e6093776379aaf54c Mon Sep 17 00:00:00 2001 From: ejinn1 Date: Sat, 15 Feb 2025 15:30:54 +0900 Subject: [PATCH 5/6] Refactor: add preconnect and dns-prefetch to api server --- src/app/layout.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b97d3c3b..59f2df32 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -34,6 +34,8 @@ export default function RootLayout({ name="google-site-verification" content="z39r-2JIYzXYwS1QN_IVZHpSCp4wfM4qOvr5AVfSASc" /> + + From f0c047d9277c56cce9157c37c4b2939179a33026 Mon Sep 17 00:00:00 2001 From: ejinn1 Date: Sat, 15 Feb 2025 16:02:52 +0900 Subject: [PATCH 6/6] Refactor: improve LCP score in dashboard page --- src/components/Dashboard/Follower/FollowerStory/index.tsx | 6 ++++-- src/components/Dashboard/Follower/index.tsx | 8 ++++++-- src/hooks/apis/Follows/useGetFollowPostsQuery.ts | 4 ++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/Dashboard/Follower/FollowerStory/index.tsx b/src/components/Dashboard/Follower/FollowerStory/index.tsx index a241ed98..31ce4580 100644 --- a/src/components/Dashboard/Follower/FollowerStory/index.tsx +++ b/src/components/Dashboard/Follower/FollowerStory/index.tsx @@ -6,9 +6,10 @@ import { formatDateToRelativeTime } from '@/utils/date'; interface FollowerStoryProps { follower: ContentTypes; + priority: boolean; } -export const FollowerStory = ({ follower }: FollowerStoryProps) => { +export const FollowerStory = ({ follower, priority }: FollowerStoryProps) => { const router = useRouter(); const pic = follower.completePic; @@ -26,7 +27,8 @@ export const FollowerStory = ({ follower }: FollowerStoryProps) => { src={pic} width={120} height={120} - sizes="100vw" + sizes="120px" + priority={priority} alt="팔로워 인증 사진" className="size-120 rounded-20 object-cover" /> diff --git a/src/components/Dashboard/Follower/index.tsx b/src/components/Dashboard/Follower/index.tsx index 30f266b6..e53b6c22 100644 --- a/src/components/Dashboard/Follower/index.tsx +++ b/src/components/Dashboard/Follower/index.tsx @@ -32,8 +32,12 @@ export const Follower = () => { {!isLoading && hasFollowers && (
    - {follows.map((follower) => ( - + {follows.map((follower, index) => ( + ))} {isFetchingNextPage && ( diff --git a/src/hooks/apis/Follows/useGetFollowPostsQuery.ts b/src/hooks/apis/Follows/useGetFollowPostsQuery.ts index c6f95d7c..f1cdd028 100644 --- a/src/hooks/apis/Follows/useGetFollowPostsQuery.ts +++ b/src/hooks/apis/Follows/useGetFollowPostsQuery.ts @@ -4,10 +4,10 @@ import { } from '@tanstack/react-query'; import { AxiosError } from 'axios'; -import { GetFollowsResponse } from '@/types/Follows'; import { GET } from '@/apis/services/httpMethod'; import { API_ENDPOINTS } from '@/constants/ApiEndpoints'; import { QUERY_KEYS } from '@/constants/QueryKeys'; +import { GetFollowsResponse } from '@/types/Follows'; import { BaseInfiniteQueryResponse } from '@/types/response'; export const getFollowPostsOptions = (): UseInfiniteQueryOptions< @@ -18,7 +18,7 @@ export const getFollowPostsOptions = (): UseInfiniteQueryOptions< queryKey: [QUERY_KEYS.FOLLOWS], queryFn: ({ pageParam = 0 }) => GET( - `${API_ENDPOINTS.FOLLOW.GET}?lastCompleteId=${pageParam}&size=10`, + `${API_ENDPOINTS.FOLLOW.GET}?lastCompleteId=${pageParam}&size=6`, ), getNextPageParam: (lastPage) => { const nextCursor = lastPage.data.nextCursor;