slid-todo · ejinn1 · Feb 16, 2025 · Feb 15, 2025 · Feb 15, 2025 · Feb 15, 2025
diff --git 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
@@ -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() {
     <>
       <Header title="대시보드" />
       <PageContainer>
-        <Follwer />
+        <Follower />
         <RecentTodos />
         <MyProgress />
         <GoalList />

diff --git 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
@@ -34,6 +34,8 @@ export default function RootLayout({
           name="google-site-verification"
           content="z39r-2JIYzXYwS1QN_IVZHpSCp4wfM4qOvr5AVfSASc"
         />
+        <link rel="preconnect" href="https://solidtodo.shop" />
+        <link rel="dns-prefetch" href="https://solidtodo.shop" />
       </head>
       <body className={`${pretendard.variable} font-pretendard`}>
         <QueryProvider>

diff --git 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
@@ -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
@@ -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 (
     <DashboardItemContainer
       title="팔로워 현황"
       className="relative mb-22 mt-16"
     >
-      {isLoading ? (
-        <FollowStorySkeleton />
-      ) : follows.length === 0 ? (
+      {isLoading && <FollowStorySkeleton />}
+
+      {!isLoading && !hasFollowers && (
         <Card>
           <p className="text-sm-normal text-custom-gray-100">
             찍찍이들 팔로우 하고 인증 보기
           </p>
         </Card>
-      ) : (
+      )}
+
+      {!isLoading && hasFollowers && (
         <div className="flex snap-x snap-mandatory items-center gap-8  overflow-x-scroll scrollbar-hide">
-          {follows.map((follower) => (
-            <FollowerStory key={follower.completeId} follower={follower} />
+          {follows.map((follower, index) => (
+            <FollowerStory
+              key={follower.completeId}
+              follower={follower}
+              priority={index < 4}
+            />
           ))}
           {isFetchingNextPage && (
             <span className="flex w-full justify-center">

diff --git 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 (
     <DashboardItemContainer title="목표 별 할 일">
-      {isLoading ? (
-        <GoalListSkeleon />
-      ) : goals.length > 0 ? (
+      {isLoading && <GoalListSkeleon />}
+
+      {!isLoading && !hasGoals && (
+        <div className="pb-16">
+          <Card>
+            <NoDataText text={NO_DATA_MESSAGES.NO_GOAL} />
+          </Card>
+        </div>
+      )}
+
+      {!isLoading && hasGoals && (
         <div className="flex flex-col gap-16">
           {goals.map((goal) => (
             <GoalItem
@@ -32,18 +42,12 @@ export const GoalList = () => {
               todos={goal.todos}
             />
           ))}
+          <div ref={observerRef} style={{ height: '1px' }} />
           {isFetchingNextPage && (
             <span className="flex w-full justify-center">
               <Spinner className="size-18" />
             </span>
           )}
-          <div ref={observerRef} style={{ height: '1px' }} />
-        </div>
-      ) : (
-        <div className="pb-16">
-          <Card>
-            <NoDataText text={NO_DATA_MESSAGES.NO_GOAL} />
-          </Card>
         </div>
       )}
     </DashboardItemContainer>

diff --git 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 (
     <DashboardItemContainer title="최근 등록한 할일" className="relative">
       <Link
@@ -32,23 +35,28 @@ export const RecentTodos = () => {
       >
         모두 보기 <FaAngleRight className="ml-8" />
       </Link>
-      {isLoading ? (
-        <TodoListSkeleton />
-      ) : goals.length === 0 ? (
+
+      {isLoading && <TodoListSkeleton />}
+
+      {!isLoading && !hasGoals && (
         <Card>
           <NoDataText text={NO_DATA_MESSAGES.NO_TODO_AND_GOAL} />
           <Button onClick={openSidebar} size="medium">
             새 목표 등록
           </Button>
         </Card>
-      ) : todos.length === 0 ? (
+      )}
+
+      {!isLoading && hasGoals && !hasTodos && (
         <Card>
           <NoDataText text={NO_DATA_MESSAGES.NO_TODO} />
           <Button onClick={() => openModal('생성')} size="medium">
             새 할일 등록
           </Button>
         </Card>
-      ) : (
+      )}
+
+      {!isLoading && hasGoals && hasTodos && (
         <ul>
           {todos.map((todo) => (
             <BasicTodoItem

diff --git 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 = () => {
     </div>
   );
 };
+
+export default Sidebar;
diff --git a/...oks/apis/Dashboard/useRecnetTodosQuery.ts → ...oks/apis/Dashboard/useRecentTodosQuery.ts b/...oks/apis/Dashboard/useRecnetTodosQuery.ts → ...oks/apis/Dashboard/useRecentTodosQuery.ts
diff --git 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<GetFollowsResponse>(
-      `${API_ENDPOINTS.FOLLOW.GET}?lastCompleteId=${pageParam}&size=10`,
+      `${API_ENDPOINTS.FOLLOW.GET}?lastCompleteId=${pageParam}&size=6`,
     ),
   getNextPageParam: (lastPage) => {
     const nextCursor = lastPage.data.nextCursor;
-Original file line number
+Diff line change
@@ Expand Up / @@ -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'],
       },
     };
@@ Expand Down @@