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)/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/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/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" /> + + 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/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 7db1fa33..e53b6c22 100644 --- a/src/components/Dashboard/Follower/index.tsx +++ b/src/components/Dashboard/Follower/index.tsx @@ -8,28 +8,36 @@ 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) => ( - + {follows.map((follower, index) => ( + ))} {isFetchingNextPage && ( 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 && ( )} -
-
- ) : ( -
- - -
)} 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) => ( { +const Sidebar = () => { const router = useRouter(); const path = usePathname(); @@ -147,3 +147,5 @@ export const Sidebar = () => {
); }; + +export default Sidebar; diff --git a/src/hooks/apis/Dashboard/useRecnetTodosQuery.ts b/src/hooks/apis/Dashboard/useRecentTodosQuery.ts similarity index 100% rename from src/hooks/apis/Dashboard/useRecnetTodosQuery.ts rename to src/hooks/apis/Dashboard/useRecentTodosQuery.ts 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;