From 815ff906ab68a050b26c03f6d1718c85706f0707 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:07:55 +0900
Subject: [PATCH 01/24] =?UTF-8?q?feat:=20Tab=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20value?=
 =?UTF-8?q?=EC=99=80=20label=EC=9D=84=20=EB=B6=84=EB=A6=AC=ED=95=98?=
 =?UTF-8?q?=EC=97=AC=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/common/Tab/index.tsx | 21 ++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/common/Tab/index.tsx b/apps/web/src/components/common/Tab/index.tsx
index 5ba63fb9..cdf7cbf0 100644
--- a/apps/web/src/components/common/Tab/index.tsx
+++ b/apps/web/src/components/common/Tab/index.tsx
@@ -1,16 +1,17 @@
 import { KeyboardEvent } from 'react';
 
-export interface TabData {
-  name: string;
+export interface TabData<T extends string> {
+  value: T;
+  label: string;
   onClick: () => void;
 }
 
-interface TabProps {
-  tabItems: TabData[];
-  selectedTab: string;
+interface TabProps<T extends string> {
+  tabItems: TabData<T>[];
+  selectedTab: T;
 }
 
-function Tab({ tabItems, selectedTab }: TabProps) {
+function Tab<T extends string>({ tabItems, selectedTab }: TabProps<T>) {
   const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>, onClick: () => void) => {
     if (e.key !== 'Enter') return;
     onClick();
@@ -20,15 +21,15 @@ function Tab({ tabItems, selectedTab }: TabProps) {
     <div role="tablist" className="flex items-center gap-6">
       {tabItems.map((tab) => (
         <button
-          key={tab.name}
+          key={tab.value}
           role="tab"
-          aria-selected={selectedTab === tab.name}
+          aria-selected={selectedTab === tab.value}
           onClick={tab.onClick}
           onKeyDown={(e) => handleKeyDown(e, tab.onClick)}
           className="flex cursor-pointer flex-col gap-1.5 bg-transparent"
         >
-          <span className="text-head1 text-main">{tab.name}</span>
-          <span className={`h-1 w-full ${selectedTab === tab.name ? 'bg-primary' : ''}`} />
+          <span className="text-head1 text-main">{tab.label}</span>
+          <span className={`h-1 w-full ${selectedTab === tab.value ? 'bg-primary' : ''}`} />
         </button>
       ))}
     </div>

From 4d51092bbeb907dc566c1e674e2b51b367c173d0 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:10:45 +0900
Subject: [PATCH 02/24] =?UTF-8?q?feat:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20Tab?=
 =?UTF-8?q?=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EC=B6=B0=EC=84=9C=20DashboardTab=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/dashboard/DashboardTab.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/dashboard/DashboardTab.tsx b/apps/web/src/components/dashboard/DashboardTab.tsx
index 224f4424..7edffb97 100644
--- a/apps/web/src/components/dashboard/DashboardTab.tsx
+++ b/apps/web/src/components/dashboard/DashboardTab.tsx
@@ -15,21 +15,23 @@ const DASHBOARD_ROUTES = {
 
 function DashboardTab() {
   const navigate = useNavigate();
-  const [selectedTab, setSelectedTab] = useState<string>(DASHBOARD_TAB.APPLIED);
+  const [selectedTab, setSelectedTab] = useState<keyof typeof DASHBOARD_TAB>('APPLIED');
 
-  const DASHBOARD_TAB_DATA: TabData[] = [
+  const DASHBOARD_TAB_DATA: TabData<keyof typeof DASHBOARD_TAB>[] = [
     {
-      name: DASHBOARD_TAB.APPLIED,
+      value: 'APPLIED',
+      label: DASHBOARD_TAB.APPLIED,
       onClick: () => {
         navigate({ to: DASHBOARD_ROUTES.APPLIED });
-        setSelectedTab(DASHBOARD_TAB.APPLIED);
+        setSelectedTab('APPLIED');
       },
     },
     {
-      name: DASHBOARD_TAB.OPENED,
+      value: 'OPENED',
+      label: DASHBOARD_TAB.OPENED,
       onClick: () => {
         navigate({ to: DASHBOARD_ROUTES.OPENED });
-        setSelectedTab(DASHBOARD_TAB.OPENED);
+        setSelectedTab('OPENED');
       },
     },
   ];

From d5e90bf053507e28560ba00e8fcf8edfc662f8aa Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:10:55 +0900
Subject: [PATCH 03/24] =?UTF-8?q?feat:=20Tab=20story=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/stories/Tab.stories.tsx | 39 ++++++++++++++++------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/stories/Tab.stories.tsx b/apps/web/src/stories/Tab.stories.tsx
index 32e360b5..68bf86a9 100644
--- a/apps/web/src/stories/Tab.stories.tsx
+++ b/apps/web/src/stories/Tab.stories.tsx
@@ -7,6 +7,8 @@ import Tab from '@/components/common/Tab';
 import type { TabData } from '@/components/common/Tab';
 import type { Meta, StoryObj } from '@storybook/react';
 
+type TabValues = '전체' | '진행중' | '종료';
+
 const meta: Meta<typeof Tab> = {
   title: 'common/Tab',
   component: Tab,
@@ -15,11 +17,11 @@ const meta: Meta<typeof Tab> = {
     tabItems: {
       description: '탭 아이템들의 배열입니다.',
       table: {
-        type: { summary: 'TabData[]' },
+        type: { summary: 'TabData<T>[]' },
       },
     },
     selectedTab: {
-      description: '현재 선택된 탭의 이름입니다.',
+      description: '현재 선택된 탭의 value입니다.',
       control: 'text',
     },
   },
@@ -33,15 +35,17 @@ const meta: Meta<typeof Tab> = {
 import Tab from '@/components/common/Tab';
 
 // Basic usage
-const [selectedTab, setSelectedTab] = useState('Tab 1');
+const [selectedTab, setSelectedTab] = useState<'tab1' | 'tab2'>('tab1');
 const tabItems = [
   {
-    name: 'Tab 1',
-    onClick: () => setSelectedTab('Tab 1'),
+    value: 'tab1',
+    label: 'Tab 1',
+    onClick: () => setSelectedTab('tab1'),
   },
   {
-    name: 'Tab 2',
-    onClick: () => setSelectedTab('Tab 2'),
+    value: 'tab2',
+    label: 'Tab 2',
+    onClick: () => setSelectedTab('tab2'),
   },
 ];
 
@@ -60,21 +64,24 @@ export default meta;
 type Story = StoryObj<typeof Tab>;
 
 interface TabWithHooksProps {
-  initialSelectedTab?: string;
-  items?: TabData[];
+  initialSelectedTab?: TabValues;
+  items?: TabData<TabValues>[];
 }
 
-const defaultTabItems: TabData[] = [
+const defaultTabItems: TabData<TabValues>[] = [
   {
-    name: '전체',
+    value: '전체',
+    label: '전체',
     onClick: () => action('onClick')('전체'),
   },
   {
-    name: '진행중',
+    value: '진행중',
+    label: '진행중',
     onClick: () => action('onClick')('진행중'),
   },
   {
-    name: '종료',
+    value: '종료',
+    label: '종료',
     onClick: () => action('onClick')('종료'),
   },
 ];
@@ -83,13 +90,13 @@ const TabWithHooks = ({
   initialSelectedTab = '전체',
   items = defaultTabItems,
 }: TabWithHooksProps) => {
-  const [selectedTab, setSelectedTab] = useState(initialSelectedTab);
+  const [selectedTab, setSelectedTab] = useState<TabValues>(initialSelectedTab);
 
   const tabItems = items.map((item) => ({
     ...item,
     onClick: () => {
-      setSelectedTab(item.name);
-      action('onClick')(item.name);
+      setSelectedTab(item.value);
+      action('onClick')(item.value);
     },
   }));
 

From 473f4069b15a617b7f5efe8b8bdaa33429bafb61 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 25 Nov 2024 22:11:14 +0900
Subject: [PATCH 04/24] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EC=97=90=EC=84=9C=20=EC=A7=84=ED=96=89?=
 =?UTF-8?q?=EC=98=88=EC=A0=95/=EC=A2=85=EB=A3=8C=20=ED=83=AD=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/ticle/list/index.tsx | 25 +++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/ticle/list/index.tsx b/apps/web/src/components/ticle/list/index.tsx
index 507d2924..03b30745 100644
--- a/apps/web/src/components/ticle/list/index.tsx
+++ b/apps/web/src/components/ticle/list/index.tsx
@@ -1,9 +1,8 @@
 import { Link } from '@tanstack/react-router';
 import { useState } from 'react';
 
-import Loading from '@/components/common/Loading/Loading';
-import SearchInput from '@/components/common/SearchInput';
 import Select, { Option } from '@/components/common/Select';
+import Tab, { TabData } from '@/components/common/Tab';
 import { useTicleList } from '@/hooks/api/ticle';
 import { formatDateTimeRange } from '@/utils/date';
 
@@ -30,9 +29,29 @@ const SORT_OPTIONS: Option[] = [
   },
 ];
 
+const TICLE_LIST_TAB = {
+  OPENED: '진행 예정 티클',
+  CLOSED: '종료된 티클',
+} as const;
+
 function TicleList() {
   const [sortOption, setSortOption] = useState<Option>(SORT_OPTIONS[0] as Option);
 
+  const [selectedTab, setSelectedTab] = useState<keyof typeof TICLE_LIST_TAB>('OPENED');
+
+  const TICLE_LIST_TAB_DATA: TabData<keyof typeof TICLE_LIST_TAB>[] = [
+    {
+      value: 'OPENED',
+      label: TICLE_LIST_TAB.OPENED,
+      onClick: () => setSelectedTab('OPENED'),
+    },
+    {
+      value: 'CLOSED',
+      label: TICLE_LIST_TAB.CLOSED,
+      onClick: () => setSelectedTab('CLOSED'),
+    },
+  ];
+
   const handleOptionChange = (option: Option) => {
     setSortOption(option);
   };
@@ -46,7 +65,7 @@ function TicleList() {
       <Banner />
       <div className="mt-14 flex w-[80rem] flex-col gap-12 justify-self-center">
         <div className="flex w-full justify-between">
-          <SearchInput placeholder="검색 기능은 준비 중입니다!" className="w-96" />
+          <Tab tabItems={TICLE_LIST_TAB_DATA} selectedTab={selectedTab} />
           <Select
             options={SORT_OPTIONS}
             selectedOption={sortOption}

From dbc3e4cfede309a971d38e2de8130cc1a4918187 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 25 Nov 2024 23:51:36 +0900
Subject: [PATCH 05/24] =?UTF-8?q?feat:=20Loading=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/Loading/Loading.tsx |  5 ---
 .../src/components/common/Loading/index.tsx   | 32 +++++++++++++++++++
 2 files changed, 32 insertions(+), 5 deletions(-)
 delete mode 100644 apps/web/src/components/common/Loading/Loading.tsx
 create mode 100644 apps/web/src/components/common/Loading/index.tsx

diff --git a/apps/web/src/components/common/Loading/Loading.tsx b/apps/web/src/components/common/Loading/Loading.tsx
deleted file mode 100644
index 9095f83f..00000000
--- a/apps/web/src/components/common/Loading/Loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Loading = () => {
-  return <span className="loader" />;
-};
-
-export default Loading;
diff --git a/apps/web/src/components/common/Loading/index.tsx b/apps/web/src/components/common/Loading/index.tsx
new file mode 100644
index 00000000..b1cb36d3
--- /dev/null
+++ b/apps/web/src/components/common/Loading/index.tsx
@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority';
+
+const dotVariants = cva('h-4 w-4 rounded-full', {
+  variants: {
+    variant: {
+      white: ['animate-[flashWhite_1.5s_ease-out_infinite_alternate] bg-altWeak'],
+      primary: ['animate-[flashPrimary_1.5s_ease-out_infinite_alternate] bg-secondary'],
+    },
+    position: {
+      first: '',
+      second: '[animation-delay:0.5s]',
+      third: '[animation-delay:1s]',
+    },
+  },
+  defaultVariants: {
+    variant: 'white',
+  },
+});
+
+type LoadingProps = {
+  color?: 'white' | 'primary';
+};
+
+const Loading = ({ color = 'white' }: LoadingProps) => (
+  <div className="flex gap-5">
+    <div className={dotVariants({ variant: color, position: 'first' })} />
+    <div className={dotVariants({ variant: color, position: 'second' })} />
+    <div className={dotVariants({ variant: color, position: 'third' })} />
+  </div>
+);
+
+export default Loading;

From 46d16e839f6295d2767615696fe4d6981fca05b4 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Mon, 25 Nov 2024 23:51:52 +0900
Subject: [PATCH 06/24] =?UTF-8?q?feat:=20Loading=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20story=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/stories/Loading.stories.tsx | 64 ++++++++++++++++++++++++
 apps/web/src/styles/global.css           | 33 ------------
 apps/web/tailwind.config.ts              | 26 ++++++++++
 3 files changed, 90 insertions(+), 33 deletions(-)
 create mode 100644 apps/web/src/stories/Loading.stories.tsx

diff --git a/apps/web/src/stories/Loading.stories.tsx b/apps/web/src/stories/Loading.stories.tsx
new file mode 100644
index 00000000..2c1e59c6
--- /dev/null
+++ b/apps/web/src/stories/Loading.stories.tsx
@@ -0,0 +1,64 @@
+import Loading from '@/components/common/Loading';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Loading> = {
+  title: 'common/Loading',
+  component: Loading,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['white', 'primary'],
+      description: '로딩 애니메이션의 색상을 설정합니다.',
+      table: {
+        type: { summary: "'white' | 'primary'" },
+        defaultValue: { summary: 'white' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+<h3>Usage</h3>
+
+\`\`\`jsx
+import Loading from '@/components/common/Loading';
+
+// Basic usage
+<Loading />
+
+// With primary color
+<Loading color="primary" />
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Loading>;
+
+export const Default: Story = {
+  args: {
+    color: 'white',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    color: 'primary',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'white',
+    },
+  },
+};
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 2618aede..10cdfdf0 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -69,39 +69,6 @@
     opacity: 0;
   }
 
-  .loader {
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background-color: #fff;
-    box-shadow:
-      32px 0 #fff,
-      -32px 0 #fff;
-    position: relative;
-    animation: flash 0.5s ease-out infinite alternate;
-  }
-
-  @keyframes flash {
-    0% {
-      background-color: #fff2;
-      box-shadow:
-        32px 0 #fff2,
-        -32px 0 #fff;
-    }
-    50% {
-      background-color: #fff;
-      box-shadow:
-        32px 0 #fff2,
-        -32px 0 #fff2;
-    }
-    100% {
-      background-color: #fff2;
-      box-shadow:
-        32px 0 #fff,
-        -32px 0 #fff2;
-    }
-  }
-
   .floating {
     animation-name: floating;
     animation-duration: 3s;
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 7b9a2bf6..65764ab6 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -136,6 +136,32 @@ const tailwindConfig: Config = {
         up: '0px 2px 8px 0px var(--grey-500)',
         floating: '0px 16px 28px 0px var(--grey-500), 0px 0px 4px 0px var(--grey-500)',
       },
+
+      // animation
+      animation: {
+        flashWhite: 'flashWhite 1s ease-out infinite alternate',
+        flashPrimary: 'flashPurple 1s ease-out infinite alternate',
+      },
+
+      // keyframes
+      keyframes: {
+        flashWhite: {
+          '0%, 100%': {
+            backgroundColor: 'var(--grey-700)',
+          },
+          '50%': {
+            backgroundColor: 'var(--white)',
+          },
+        },
+        flashPrimary: {
+          '0%, 100%': {
+            backgroundColor: 'var(--purple-200)',
+          },
+          '50%': {
+            backgroundColor: 'var(--purple-500)',
+          },
+        },
+      },
     },
   },
 };

From 735c37addae752421362b2eb7379858ec0a2c47d Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 00:01:32 +0900
Subject: [PATCH 07/24] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=EC=8B=9C=20=EA=B8=B0=EC=A1=B4=20?=
 =?UTF-8?q?useQuery=EB=A5=BC=20useInfiniteQuery=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/hooks/api/ticle.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/hooks/api/ticle.ts b/apps/web/src/hooks/api/ticle.ts
index 33207ce2..24ca64c3 100644
--- a/apps/web/src/hooks/api/ticle.ts
+++ b/apps/web/src/hooks/api/ticle.ts
@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
 
 import { getTitleList, getTicle, createTicle, applyTicle } from '@/api/ticle';
 
@@ -10,11 +10,18 @@ interface GetTicleListParams {
 }
 
 export const useTicleList = (params: GetTicleListParams = {}) => {
-  return useQuery({
+  return useInfiniteQuery({
     queryKey: ['ticleList', params],
-    queryFn: () => getTitleList(params),
-    staleTime: 1000 * 60 * 5,
-    placeholderData: (previousData) => previousData,
+    queryFn: ({ pageParam = 1 }) =>
+      getTitleList({
+        ...params,
+        page: pageParam,
+      }),
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.meta.hasNextPage) return undefined;
+      return lastPage.meta.page + 1;
+    },
+    initialPageParam: 1,
   });
 };
 

From d705e30e0cf1776c0a9aa5df5aea801f6de7cb62 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 00:22:46 +0900
Subject: [PATCH 08/24] =?UTF-8?q?feat:=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=BB=A4=EC=8A=A4=ED=85=80=ED=9B=85=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/hooks/useIntersectionObserver.ts | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 apps/web/src/hooks/useIntersectionObserver.ts

diff --git a/apps/web/src/hooks/useIntersectionObserver.ts b/apps/web/src/hooks/useIntersectionObserver.ts
new file mode 100644
index 00000000..5ab6187c
--- /dev/null
+++ b/apps/web/src/hooks/useIntersectionObserver.ts
@@ -0,0 +1,39 @@
+import { InfiniteQueryObserverResult } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';
+
+interface IntersectionObserverParams {
+  threshold?: number;
+  hasNextPage: boolean;
+  fetchNextPage: () => Promise<InfiniteQueryObserverResult>;
+}
+const useIntersectionObserver = ({
+  threshold = 0.5,
+  hasNextPage,
+  fetchNextPage,
+}: IntersectionObserverParams) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const observerCallback: IntersectionObserverCallback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && hasNextPage) {
+          fetchNextPage();
+        }
+      });
+    };
+
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(observerCallback, {
+      threshold,
+    });
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, [ref, threshold, fetchNextPage, hasNextPage]);
+
+  return { ref };
+};
+
+export default useIntersectionObserver;

From 9b6e32c1a8093a50dc6b31b1c6fa1bb0c0c83d2e Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 00:23:17 +0900
Subject: [PATCH 09/24] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=A1=B0=ED=9A=8C=EC=8B=9C=20=EB=AC=B4?=
 =?UTF-8?q?=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4=EA=B3=BC=20=EB=A1=9C?=
 =?UTF-8?q?=EB=94=A9=20=EC=9D=B8=EB=94=94=EC=BC=80=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/live/VideoPlayer.tsx |  2 +-
 apps/web/src/components/ticle/list/index.tsx | 60 +++++++++++++++-----
 2 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/live/VideoPlayer.tsx b/apps/web/src/components/live/VideoPlayer.tsx
index b781c3b6..a4884d47 100644
--- a/apps/web/src/components/live/VideoPlayer.tsx
+++ b/apps/web/src/components/live/VideoPlayer.tsx
@@ -6,7 +6,7 @@ import MicOnIc from '@/assets/icons/mic-on.svg?react';
 
 import Avatar from '../common/Avatar';
 import Badge from '../common/Badge';
-import Loading from '../common/Loading/Loading';
+import Loading from '../common/Loading';
 
 const videoVariants = cva('h-full w-full rounded-lg object-cover transition-opacity duration-300', {
   variants: {
diff --git a/apps/web/src/components/ticle/list/index.tsx b/apps/web/src/components/ticle/list/index.tsx
index 03b30745..9f983b9b 100644
--- a/apps/web/src/components/ticle/list/index.tsx
+++ b/apps/web/src/components/ticle/list/index.tsx
@@ -1,9 +1,11 @@
 import { Link } from '@tanstack/react-router';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 
+import Loading from '@/components/common/Loading';
 import Select, { Option } from '@/components/common/Select';
 import Tab, { TabData } from '@/components/common/Tab';
 import { useTicleList } from '@/hooks/api/ticle';
+import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 import { formatDateTimeRange } from '@/utils/date';
 
 import Banner from './Banner';
@@ -56,14 +58,21 @@ function TicleList() {
     setSortOption(option);
   };
 
-  const { data: { ticles, meta } = { ticles: [], meta: {} }, isLoading } = useTicleList({
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useTicleList({
+    pageSize: 12,
+    isOpen: selectedTab === 'OPENED',
     sort: sortOption.value as 'newest' | 'oldest' | 'trending',
   });
 
+  const { ref: intersectionRef } = useIntersectionObserver({
+    hasNextPage,
+    fetchNextPage,
+  });
+
   return (
     <div>
       <Banner />
-      <div className="mt-14 flex w-[80rem] flex-col gap-12 justify-self-center">
+      <div className="mt-20 flex w-[80rem] flex-col gap-12 justify-self-center">
         <div className="flex w-full justify-between">
           <Tab tabItems={TICLE_LIST_TAB_DATA} selectedTab={selectedTab} />
           <Select
@@ -72,18 +81,39 @@ function TicleList() {
             onChange={handleOptionChange}
           />
         </div>
-        <main className="my-12 flex flex-wrap gap-5">
-          {ticles.map((ticle) => (
-            <Link key={ticle.id} to="/ticle/$ticleId" params={{ ticleId: ticle.id.toString() }}>
-              <TicleCard
-                title={ticle.title}
-                tags={ticle.tags}
-                date={getDateString(ticle.startTime, ticle.endTime)}
-                speaker={ticle.speakerName}
-                applicantsCount={ticle.applicantsCount}
-              />
-            </Link>
-          ))}
+        <main className="mb-16 mt-5 flex flex-wrap gap-5">
+          {isLoading ? (
+            <div className="flex h-80 w-full items-center justify-center">
+              <Loading color="primary" />
+            </div>
+          ) : (
+            data?.pages.map((page) => (
+              <Fragment key={page.meta.page}>
+                {page.ticles.map((ticle) => (
+                  <Link
+                    key={ticle.id}
+                    to="/ticle/$ticleId"
+                    params={{ ticleId: ticle.id.toString() }}
+                  >
+                    <TicleCard
+                      title={ticle.title}
+                      tags={ticle.tags}
+                      date={getDateString(ticle.startTime, ticle.endTime)}
+                      speaker={ticle.speakerName}
+                      applicantsCount={ticle.applicantsCount}
+                    />
+                  </Link>
+                ))}
+              </Fragment>
+            ))
+          )}
+
+          <div ref={intersectionRef} className="h-10 w-full" aria-hidden />
+          {isFetchingNextPage && (
+            <div className="flex w-full justify-center">
+              <Loading color="primary" />
+            </div>
+          )}
         </main>
       </div>
     </div>

From 888e6d82404e8f0677d3549cb3c27331a4c62fe4 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 00:41:28 +0900
Subject: [PATCH 10/24] =?UTF-8?q?feat:=20=EA=B8=B0=EC=A1=B4=20=EB=8C=80?=
 =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EC=A1=B0=ED=9A=8C=20=EC=BF=BC?=
 =?UTF-8?q?=EB=A6=AC=EB=A5=BC=20useInfiniteQuery=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/hooks/api/dashboard.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/hooks/api/dashboard.ts b/apps/web/src/hooks/api/dashboard.ts
index aacd6ec7..9ecfdd23 100644
--- a/apps/web/src/hooks/api/dashboard.ts
+++ b/apps/web/src/hooks/api/dashboard.ts
@@ -1,12 +1,21 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
 import { GetDashboardListQueryType } from '@repo/types';
 
 import { getDashboardTicleList, getApplicantsTicle, startTicle, joinTicle } from '@/api/dashboard';
 
 export const useDashboardTicleList = (params: GetDashboardListQueryType) => {
-  return useQuery({
+  return useInfiniteQuery({
     queryKey: ['dashboardTicleList', params],
-    queryFn: () => getDashboardTicleList(params),
+    queryFn: ({ pageParam = 1 }) =>
+      getDashboardTicleList({
+        ...params,
+        page: pageParam,
+      }),
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.meta.hasNextPage) return undefined;
+      return lastPage.meta.page + 1;
+    },
+    initialPageParam: 1,
     placeholderData: (previousData) => previousData,
   });
 };

From b204788a1a6d2911d3edd7f9660da36fa5936257 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 00:42:03 +0900
Subject: [PATCH 11/24] =?UTF-8?q?design:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=B9=B4=EB=93=9C=EC=97=90=EC=84=9C=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A4=EC=9E=90=20=EB=AA=85=EC=9D=B4=20=EA=B8=B8=EB=95=8C=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=EC=9D=B4=20=EA=B9=A8?=
 =?UTF-8?q?=EC=A7=80=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95=EB=90=9C=20width=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/dashboard/apply/TicleInfoCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx b/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
index 3ef0a019..efe2d290 100644
--- a/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
+++ b/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
@@ -27,7 +27,7 @@ function TicleInfoCard({
       <div className="flex gap-5">
         <div className="flex items-center gap-3">
           <h3 className="text-title2 text-main">개설자</h3>
-          <span className="text-body1 text-main">{speakerName}</span>
+          <span className="w-36 text-body1 text-main">{speakerName}</span>
         </div>
         <div className="flex items-center gap-3">
           <h3 className="text-title2 text-main">티클명</h3>

From 533a45570a3e168f8506a2cf2b7e718a4d79ed7b Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 00:42:17 +0900
Subject: [PATCH 12/24] =?UTF-8?q?feat:=20=EC=8B=A0=EC=B2=AD=ED=95=9C=20?=
 =?UTF-8?q?=ED=8B=B0=ED=81=B4,=20=EA=B0=9C=EC=84=A4=ED=95=9C=20=ED=8B=B0?=
 =?UTF-8?q?=ED=81=B4=EC=97=90=20=EB=8C=80=ED=95=B4=2010=EA=B0=9C=EC=94=A9?=
 =?UTF-8?q?=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dashboard/apply/index.tsx  | 61 +++++++++++++------
 .../src/components/dashboard/open/index.tsx   | 61 +++++++++++++------
 2 files changed, 87 insertions(+), 35 deletions(-)

diff --git a/apps/web/src/components/dashboard/apply/index.tsx b/apps/web/src/components/dashboard/apply/index.tsx
index de846359..3256c9a2 100644
--- a/apps/web/src/components/dashboard/apply/index.tsx
+++ b/apps/web/src/components/dashboard/apply/index.tsx
@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 
+import Loading from '@/components/common/Loading';
 import Select, { Option } from '@/components/common/Select';
 import { useDashboardTicleList } from '@/hooks/api/dashboard';
+import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 
 import TicleInfoCard from './TicleInfoCard';
 
@@ -26,28 +28,53 @@ function Apply() {
     setSelectedOption(option);
   };
 
-  const { data: { ticles, meta } = { ticles: [], meta: {} }, isLoading } = useDashboardTicleList({
-    isSpeaker: false,
-    page: 1,
-    pageSize: 10,
-    ...(selectedOption.value && { status: selectedOption.value as 'open' | 'closed' }),
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useDashboardTicleList(
+    {
+      isSpeaker: false,
+      page: 1,
+      pageSize: 10,
+      ...(selectedOption.value && { status: selectedOption.value as 'open' | 'closed' }),
+    }
+  );
+
+  const { ref: intersectionRef } = useIntersectionObserver({
+    hasNextPage,
+    fetchNextPage,
   });
 
   return (
     <main className="mt-14 flex w-full flex-col gap-12">
       <Select options={FILTER_OPTIONS} selectedOption={selectedOption} onChange={onOptionChange} />
       <div className="flex flex-col gap-6">
-        {ticles.map((ticle) => (
-          <TicleInfoCard
-            key={ticle.id}
-            ticleId={ticle.id}
-            ticleTitle={ticle.title}
-            speakerName={ticle.speakerName as string}
-            startTime={ticle.startTime}
-            endTime={ticle.endTime}
-            status={ticle.ticleStatus}
-          />
-        ))}
+        {isLoading ? (
+          <div className="flex h-80 w-full items-center justify-center">
+            <Loading color="primary" />
+          </div>
+        ) : (
+          <div className="flex flex-col gap-6">
+            {data?.pages.map((page) => (
+              <Fragment key={page.meta.page}>
+                {page.ticles.map((ticle) => (
+                  <TicleInfoCard
+                    key={ticle.id}
+                    ticleId={ticle.id}
+                    ticleTitle={ticle.title}
+                    speakerName={ticle.speakerName as string}
+                    startTime={ticle.startTime}
+                    endTime={ticle.endTime}
+                    status={ticle.ticleStatus}
+                  />
+                ))}
+              </Fragment>
+            ))}
+            <div ref={intersectionRef} className="h-10 w-full" aria-hidden />
+            {isFetchingNextPage && (
+              <div className="flex w-full justify-center">
+                <Loading color="primary" />
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </main>
   );
diff --git a/apps/web/src/components/dashboard/open/index.tsx b/apps/web/src/components/dashboard/open/index.tsx
index 724836b0..b823b234 100644
--- a/apps/web/src/components/dashboard/open/index.tsx
+++ b/apps/web/src/components/dashboard/open/index.tsx
@@ -1,7 +1,9 @@
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 
+import Loading from '@/components/common/Loading';
 import Select, { Option } from '@/components/common/Select';
 import { useDashboardTicleList } from '@/hooks/api/dashboard';
+import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 
 import TicleInfoCard from './TicleInfoCard';
 
@@ -26,28 +28,51 @@ function Open() {
     setSelectedOption(option);
   };
 
-  const { data: { ticles, meta } = { ticles: [], meta: {} }, isLoading } = useDashboardTicleList({
-    isSpeaker: true,
-    page: 1,
-    pageSize: 10,
-    ...(selectedOption.value && { status: selectedOption.value as 'open' | 'closed' }),
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useDashboardTicleList(
+    {
+      isSpeaker: true,
+      page: 1,
+      pageSize: 10,
+      ...(selectedOption.value && { status: selectedOption.value as 'open' | 'closed' }),
+    }
+  );
+
+  const { ref: intersectionRef } = useIntersectionObserver({
+    hasNextPage,
+    fetchNextPage,
   });
 
   return (
     <main className="mt-14 flex w-full flex-col gap-12">
       <Select options={FILTER_OPTIONS} selectedOption={selectedOption} onChange={onOptionChange} />
-      <div className="flex flex-col gap-6">
-        {ticles.map((ticle) => (
-          <TicleInfoCard
-            key={ticle.id}
-            ticleId={ticle.id}
-            ticleTitle={ticle.title}
-            startTime={ticle.startTime}
-            endTime={ticle.endTime}
-            status={ticle.ticleStatus}
-          />
-        ))}
-      </div>
+      {isLoading ? (
+        <div className="flex h-80 w-full items-center justify-center">
+          <Loading color="primary" />
+        </div>
+      ) : (
+        <div className="flex flex-col gap-6">
+          {data?.pages.map((page) => (
+            <Fragment key={page.meta.page}>
+              {page.ticles.map((ticle) => (
+                <TicleInfoCard
+                  key={ticle.id}
+                  ticleId={ticle.id}
+                  ticleTitle={ticle.title}
+                  startTime={ticle.startTime}
+                  endTime={ticle.endTime}
+                  status={ticle.ticleStatus}
+                />
+              ))}
+            </Fragment>
+          ))}
+          <div ref={intersectionRef} className="h-10 w-full" aria-hidden />
+          {isFetchingNextPage && (
+            <div className="flex w-full justify-center">
+              <Loading color="primary" />
+            </div>
+          )}
+        </div>
+      )}
     </main>
   );
 }

From aafaba9fcf10bf59ad91254abfae06421506ca92 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 00:44:23 +0900
Subject: [PATCH 13/24] =?UTF-8?q?feat:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=EC=97=90=EC=84=9C=20=ED=8B=B0=ED=81=B4=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=ED=95=B4=EB=8B=B9=20?=
 =?UTF-8?q?=ED=8B=B0=ED=81=B4=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/apply/TicleInfoCard.tsx         | 36 ++++++------
 .../dashboard/open/TicleInfoCard.tsx          | 56 ++++++++++---------
 2 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx b/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
index efe2d290..c74de263 100644
--- a/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
+++ b/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
@@ -23,25 +23,27 @@ function TicleInfoCard({
   const { dateStr, timeRangeStr } = formatDateTimeRange(startTime, endTime);
 
   return (
-    <div className="flex items-center justify-between rounded-lg border border-main bg-white p-6 shadow-normal">
-      <div className="flex gap-5">
-        <div className="flex items-center gap-3">
-          <h3 className="text-title2 text-main">개설자</h3>
-          <span className="w-36 text-body1 text-main">{speakerName}</span>
-        </div>
-        <div className="flex items-center gap-3">
-          <h3 className="text-title2 text-main">티클명</h3>
-          <span className="w-80 text-body1 text-main">{ticleTitle}</span>
-        </div>
-        <div className="flex items-center gap-3">
-          <h3 className="text-title2 text-main">진행 일시</h3>
-          <span className="text-body1 text-main">{`${dateStr} ${timeRangeStr}`}</span>
+    <Link to={`/ticle/${ticleId}`}>
+      <div className="flex items-center justify-between rounded-lg border border-main bg-white p-6 shadow-normal">
+        <div className="flex gap-5">
+          <div className="flex items-center gap-3">
+            <h3 className="text-title2 text-main">개설자</h3>
+            <span className="w-36 text-body1 text-main">{speakerName}</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <h3 className="text-title2 text-main">티클명</h3>
+            <span className="w-80 text-body1 text-main">{ticleTitle}</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <h3 className="text-title2 text-main">진행 일시</h3>
+            <span className="text-body1 text-main">{`${dateStr} ${timeRangeStr}`}</span>
+          </div>
         </div>
+        <Link to={`/live/${ticleId}`}>
+          <Button disabled={status === 'closed'}>티클 참여하기</Button>
+        </Link>
       </div>
-      <Link to={`/live/${ticleId}`}>
-        <Button disabled={status === 'closed'}>티클 참여하기</Button>
-      </Link>
-    </div>
+    </Link>
   );
 }
 
diff --git a/apps/web/src/components/dashboard/open/TicleInfoCard.tsx b/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
index adcb1b36..bcaa1082 100644
--- a/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
+++ b/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
@@ -19,40 +19,44 @@ interface TicleInfoCardProps {
 function TicleInfoCard({ ticleId, ticleTitle, startTime, endTime, status }: TicleInfoCardProps) {
   const { isOpen, onOpen, onClose } = useModal();
 
-  const { data: applicantsData, isLoading } = useApplicantsTicle(ticleId.toString());
+  const { data: applicantsData } = useApplicantsTicle(ticleId.toString());
   const { dateStr, timeRangeStr } = formatDateTimeRange(startTime, endTime);
 
   if (!applicantsData) return;
 
   return (
-    <div className="flex items-center justify-between rounded-lg border border-main bg-white p-6 shadow-normal">
-      <div className="flex gap-5">
-        <div className="flex items-center gap-3">
-          <h3 className="text-title2 text-main">티클명</h3>
-          <span className="w-80 text-body1 text-main">{ticleTitle}</span>
+    <Link to={`/ticle/${ticleId}`}>
+      <div className="flex items-center justify-between rounded-lg border border-main bg-white p-6 shadow-normal">
+        <div className="flex gap-5">
+          <div className="flex items-center gap-3">
+            <h3 className="text-title2 text-main">티클명</h3>
+            <span className="w-80 text-body1 text-main">{ticleTitle}</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <h3 className="text-title2 text-main">진행 일시</h3>
+            <span className="text-body1 text-main">{`${dateStr} ${timeRangeStr}`}</span>
+          </div>
         </div>
-        <div className="flex items-center gap-3">
-          <h3 className="text-title2 text-main">진행 일시</h3>
-          <span className="text-body1 text-main">{`${dateStr} ${timeRangeStr}`}</span>
+        <div className="flex gap-9">
+          <button
+            className="flex items-center gap-2 rounded-md p-2.5 hover:bg-teritary"
+            onClick={onOpen}
+          >
+            <span className="text-title2 text-primary">신청자 목록</span>
+
+            <div>
+              <PersonFilledIc className="fill-primary" />
+            </div>
+          </button>
+          <Link to={`/live/${ticleId}`}>
+            <Button disabled={status === 'closed'}>티클 시작하기</Button>
+          </Link>
         </div>
+        {isOpen && (
+          <ApplicantsDialog onClose={onClose} isOpen={isOpen} applicants={applicantsData} />
+        )}
       </div>
-      <div className="flex gap-9">
-        <button
-          className="flex items-center gap-2 rounded-md p-2.5 hover:bg-teritary"
-          onClick={onOpen}
-        >
-          <span className="text-title2 text-primary">신청자 목록</span>
-
-          <div>
-            <PersonFilledIc className="fill-primary" />
-          </div>
-        </button>
-        <Link to={`/live/${ticleId}`}>
-          <Button disabled={status === 'closed'}>티클 시작하기</Button>
-        </Link>
-      </div>
-      {isOpen && <ApplicantsDialog onClose={onClose} isOpen={isOpen} applicants={applicantsData} />}
-    </div>
+    </Link>
   );
 }
 

From 2a841f3b7c6ed63f94de75c804105d6b09d1f0fd Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 01:13:39 +0900
Subject: [PATCH 14/24] =?UTF-8?q?feat:=20Link=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EB=82=B4=20Link=ED=83=9C=EA=B7=B8=EA=B0=80=20=EC=A4=91?=
 =?UTF-8?q?=EC=B2=A9=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dashboard/apply/TicleInfoCard.tsx | 16 ++++++++++++----
 .../components/dashboard/open/TicleInfoCard.tsx  | 16 ++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx b/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
index c74de263..cd6e75a5 100644
--- a/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
+++ b/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
@@ -1,4 +1,5 @@
-import { Link } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { MouseEvent } from 'react';
 
 import Button from '@/components/common/Button';
 import { formatDateTimeRange } from '@/utils/date';
@@ -21,6 +22,12 @@ function TicleInfoCard({
   status,
 }: TicleInfoCardProps) {
   const { dateStr, timeRangeStr } = formatDateTimeRange(startTime, endTime);
+  const navigate = useNavigate();
+
+  const handleTicleParticipate = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    navigate({ to: `/live/${ticleId}` });
+  };
 
   return (
     <Link to={`/ticle/${ticleId}`}>
@@ -39,9 +46,10 @@ function TicleInfoCard({
             <span className="text-body1 text-main">{`${dateStr} ${timeRangeStr}`}</span>
           </div>
         </div>
-        <Link to={`/live/${ticleId}`}>
-          <Button disabled={status === 'closed'}>티클 참여하기</Button>
-        </Link>
+
+        <Button disabled={status === 'closed'} onClick={handleTicleParticipate}>
+          티클 참여하기
+        </Button>
       </div>
     </Link>
   );
diff --git a/apps/web/src/components/dashboard/open/TicleInfoCard.tsx b/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
index bcaa1082..4dcd39a3 100644
--- a/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
+++ b/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
@@ -1,4 +1,5 @@
-import { Link } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { MouseEvent } from 'react';
 
 import PersonFilledIc from '@/assets/icons/person-filled.svg?react';
 import Button from '@/components/common/Button';
@@ -22,8 +23,15 @@ function TicleInfoCard({ ticleId, ticleTitle, startTime, endTime, status }: Ticl
   const { data: applicantsData } = useApplicantsTicle(ticleId.toString());
   const { dateStr, timeRangeStr } = formatDateTimeRange(startTime, endTime);
 
+  const navigate = useNavigate();
+
   if (!applicantsData) return;
 
+  const handleTicleParticipate = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    navigate({ to: `/live/${ticleId}` });
+  };
+
   return (
     <Link to={`/ticle/${ticleId}`}>
       <div className="flex items-center justify-between rounded-lg border border-main bg-white p-6 shadow-normal">
@@ -48,9 +56,9 @@ function TicleInfoCard({ ticleId, ticleTitle, startTime, endTime, status }: Ticl
               <PersonFilledIc className="fill-primary" />
             </div>
           </button>
-          <Link to={`/live/${ticleId}`}>
-            <Button disabled={status === 'closed'}>티클 시작하기</Button>
-          </Link>
+          <Button disabled={status === 'closed'} onClick={handleTicleParticipate}>
+            티클 시작하기
+          </Button>
         </div>
         {isOpen && (
           <ApplicantsDialog onClose={onClose} isOpen={isOpen} applicants={applicantsData} />

From 04c2fe3e02a9e0baf7b66a9183c20ab377a4109a Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 01:20:32 +0900
Subject: [PATCH 15/24] =?UTF-8?q?feat:=20DashboardTab=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?state=EA=B0=80=20=EC=95=84=EB=8B=8C=20url=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=9D=BC=EC=84=9C=20tab=EC=9D=84=20=EC=A0=84=ED=99=98=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/dashboard/DashboardTab.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/dashboard/DashboardTab.tsx b/apps/web/src/components/dashboard/DashboardTab.tsx
index 7edffb97..e4014ac4 100644
--- a/apps/web/src/components/dashboard/DashboardTab.tsx
+++ b/apps/web/src/components/dashboard/DashboardTab.tsx
@@ -1,5 +1,4 @@
-import { useNavigate } from '@tanstack/react-router';
-import { useState } from 'react';
+import { useMatch, useNavigate } from '@tanstack/react-router';
 
 import Tab, { TabData } from '../common/Tab';
 
@@ -15,7 +14,8 @@ const DASHBOARD_ROUTES = {
 
 function DashboardTab() {
   const navigate = useNavigate();
-  const [selectedTab, setSelectedTab] = useState<keyof typeof DASHBOARD_TAB>('APPLIED');
+  const isOpenedMatch = useMatch({ from: '/dashboard/open', shouldThrow: false });
+  const selectedTab = isOpenedMatch ? 'OPENED' : 'APPLIED';
 
   const DASHBOARD_TAB_DATA: TabData<keyof typeof DASHBOARD_TAB>[] = [
     {
@@ -23,7 +23,6 @@ function DashboardTab() {
       label: DASHBOARD_TAB.APPLIED,
       onClick: () => {
         navigate({ to: DASHBOARD_ROUTES.APPLIED });
-        setSelectedTab('APPLIED');
       },
     },
     {
@@ -31,7 +30,6 @@ function DashboardTab() {
       label: DASHBOARD_TAB.OPENED,
       onClick: () => {
         navigate({ to: DASHBOARD_ROUTES.OPENED });
-        setSelectedTab('OPENED');
       },
     },
   ];

From e965652983a43334afe00037ddc84498343ca82d Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 01:27:54 +0900
Subject: [PATCH 16/24] =?UTF-8?q?feat:=20Header=EB=A5=BC=20root=EC=97=90?=
 =?UTF-8?q?=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EB=A0=8C=EB=8D=94=EB=A7=81?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B2=83=EC=9D=B4=20=EC=95=84=EB=8B=8C=20?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EA=B3=B3=EC=97=90=20=EC=A7=81?=
 =?UTF-8?q?=EC=A0=91=20=EC=82=BD=EC=9E=85=ED=95=98=EC=97=AC=20=EB=A6=AC?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=9D=B4=EC=8A=88=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/routes/__root.tsx            | 11 +----------
 apps/web/src/routes/dashboard/_layout.tsx | 16 ++++++++++------
 apps/web/src/routes/index.tsx             |  8 +++++++-
 apps/web/src/routes/ticle/$ticleId.tsx    | 10 +++++++---
 apps/web/src/routes/ticle/open.tsx        | 10 +++++++---
 5 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 35a9f5a4..f7710239 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -1,22 +1,13 @@
-import { Outlet, ScrollRestoration, createRootRoute, useLocation } from '@tanstack/react-router';
-
-import Header from '@/components/Header';
-
-const NO_HEADER_PATHS = ['/live', '/auth'];
+import { Outlet, ScrollRestoration, createRootRoute } from '@tanstack/react-router';
 
 export const Route = createRootRoute({
   component: RootComponent,
 });
 
 function RootComponent() {
-  const location = useLocation();
-  const currentPath = location.pathname;
-  const hasHeader = !NO_HEADER_PATHS.some((path) => currentPath.startsWith(path));
-
   return (
     <div className="h-full min-h-dvh bg-weak">
       <ScrollRestoration />
-      {hasHeader && <Header />}
       <Outlet />
     </div>
   );
diff --git a/apps/web/src/routes/dashboard/_layout.tsx b/apps/web/src/routes/dashboard/_layout.tsx
index 25bf6e7c..bebf98ec 100644
--- a/apps/web/src/routes/dashboard/_layout.tsx
+++ b/apps/web/src/routes/dashboard/_layout.tsx
@@ -2,6 +2,7 @@ import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
 
 import BasicLayout from '@/components/common/BasicLayout';
 import DashboardTab from '@/components/dashboard/DashboardTab';
+import Header from '@/components/Header';
 
 export const Route = createFileRoute('/dashboard')({
   component: RouteComponent,
@@ -16,11 +17,14 @@ export const Route = createFileRoute('/dashboard')({
 
 function RouteComponent() {
   return (
-    <BasicLayout className="px-[7.5rem]">
-      <div className="w-full">
-        <DashboardTab />
-      </div>
-      <Outlet />
-    </BasicLayout>
+    <>
+      <Header />
+      <BasicLayout className="px-[7.5rem]">
+        <div className="w-full">
+          <DashboardTab />
+        </div>
+        <Outlet />
+      </BasicLayout>
+    </>
   );
 }
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 7068a660..48000d26 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 
+import Header from '@/components/Header';
 import TicleList from '@/components/ticle/list';
 
 export const Route = createFileRoute('/')({
@@ -7,5 +8,10 @@ export const Route = createFileRoute('/')({
 });
 
 function IndexPage() {
-  return <TicleList />;
+  return (
+    <>
+      <Header />
+      <TicleList />
+    </>
+  );
 }
diff --git a/apps/web/src/routes/ticle/$ticleId.tsx b/apps/web/src/routes/ticle/$ticleId.tsx
index aeeac6ee..b78e4f42 100644
--- a/apps/web/src/routes/ticle/$ticleId.tsx
+++ b/apps/web/src/routes/ticle/$ticleId.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
 
 import BasicLayout from '@/components/common/BasicLayout';
+import Header from '@/components/Header';
 import Detail from '@/components/ticle/detail';
 
 export const Route = createFileRoute('/ticle/$ticleId')({
@@ -9,8 +10,11 @@ export const Route = createFileRoute('/ticle/$ticleId')({
 
 function RouteComponent() {
   return (
-    <BasicLayout>
-      <Detail />
-    </BasicLayout>
+    <>
+      <Header />
+      <BasicLayout>
+        <Detail />
+      </BasicLayout>
+    </>
   );
 }
diff --git a/apps/web/src/routes/ticle/open.tsx b/apps/web/src/routes/ticle/open.tsx
index aa3aa6e1..e4cd21a8 100644
--- a/apps/web/src/routes/ticle/open.tsx
+++ b/apps/web/src/routes/ticle/open.tsx
@@ -1,6 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
 
 import BasicLayout from '@/components/common/BasicLayout';
+import Header from '@/components/Header';
 import Open from '@/components/ticle/open';
 
 export const Route = createFileRoute('/ticle/open')({
@@ -9,8 +10,11 @@ export const Route = createFileRoute('/ticle/open')({
 
 function RouteComponent() {
   return (
-    <BasicLayout>
-      <Open />
-    </BasicLayout>
+    <>
+      <Header />
+      <BasicLayout>
+        <Open />
+      </BasicLayout>
+    </>
   );
 }

From d003f97f8ff57bebca5ed0b6d06883354cd17f7d Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 01:36:24 +0900
Subject: [PATCH 17/24] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=ED=83=AD=20=EC=A0=84?=
 =?UTF-8?q?=ED=99=98=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=A6=AC=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/ticle/list/index.tsx | 80 +++++++++-----------
 apps/web/src/routes/index.tsx                |  2 +
 2 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/apps/web/src/components/ticle/list/index.tsx b/apps/web/src/components/ticle/list/index.tsx
index 9f983b9b..fe04ea38 100644
--- a/apps/web/src/components/ticle/list/index.tsx
+++ b/apps/web/src/components/ticle/list/index.tsx
@@ -8,7 +8,6 @@ import { useTicleList } from '@/hooks/api/ticle';
 import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 import { formatDateTimeRange } from '@/utils/date';
 
-import Banner from './Banner';
 import TicleCard from './TicleCard';
 
 const getDateString = (startTime: string, endTime: string) => {
@@ -70,52 +69,41 @@ function TicleList() {
   });
 
   return (
-    <div>
-      <Banner />
-      <div className="mt-20 flex w-[80rem] flex-col gap-12 justify-self-center">
-        <div className="flex w-full justify-between">
-          <Tab tabItems={TICLE_LIST_TAB_DATA} selectedTab={selectedTab} />
-          <Select
-            options={SORT_OPTIONS}
-            selectedOption={sortOption}
-            onChange={handleOptionChange}
-          />
-        </div>
-        <main className="mb-16 mt-5 flex flex-wrap gap-5">
-          {isLoading ? (
-            <div className="flex h-80 w-full items-center justify-center">
-              <Loading color="primary" />
-            </div>
-          ) : (
-            data?.pages.map((page) => (
-              <Fragment key={page.meta.page}>
-                {page.ticles.map((ticle) => (
-                  <Link
-                    key={ticle.id}
-                    to="/ticle/$ticleId"
-                    params={{ ticleId: ticle.id.toString() }}
-                  >
-                    <TicleCard
-                      title={ticle.title}
-                      tags={ticle.tags}
-                      date={getDateString(ticle.startTime, ticle.endTime)}
-                      speaker={ticle.speakerName}
-                      applicantsCount={ticle.applicantsCount}
-                    />
-                  </Link>
-                ))}
-              </Fragment>
-            ))
-          )}
-
-          <div ref={intersectionRef} className="h-10 w-full" aria-hidden />
-          {isFetchingNextPage && (
-            <div className="flex w-full justify-center">
-              <Loading color="primary" />
-            </div>
-          )}
-        </main>
+    <div className="mt-20 flex w-[80rem] flex-col gap-12 justify-self-center">
+      <div className="flex w-full justify-between">
+        <Tab tabItems={TICLE_LIST_TAB_DATA} selectedTab={selectedTab} />
+        <Select options={SORT_OPTIONS} selectedOption={sortOption} onChange={handleOptionChange} />
       </div>
+      <main className="mb-16 mt-5 flex flex-wrap gap-5">
+        {isLoading ? (
+          <div className="flex h-80 w-full items-center justify-center">
+            <Loading color="primary" />
+          </div>
+        ) : (
+          data?.pages.map((page) => (
+            <Fragment key={page.meta.page}>
+              {page.ticles.map((ticle) => (
+                <Link key={ticle.id} to="/ticle/$ticleId" params={{ ticleId: ticle.id.toString() }}>
+                  <TicleCard
+                    title={ticle.title}
+                    tags={ticle.tags}
+                    date={getDateString(ticle.startTime, ticle.endTime)}
+                    speaker={ticle.speakerName}
+                    applicantsCount={ticle.applicantsCount}
+                  />
+                </Link>
+              ))}
+            </Fragment>
+          ))
+        )}
+
+        <div ref={intersectionRef} className="h-10 w-full" aria-hidden />
+        {isFetchingNextPage && (
+          <div className="flex w-full justify-center">
+            <Loading color="primary" />
+          </div>
+        )}
+      </main>
     </div>
   );
 }
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 48000d26..2e5f7205 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -2,6 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 
 import Header from '@/components/Header';
 import TicleList from '@/components/ticle/list';
+import Banner from '@/components/ticle/list/Banner';
 
 export const Route = createFileRoute('/')({
   component: IndexPage,
@@ -11,6 +12,7 @@ function IndexPage() {
   return (
     <>
       <Header />
+      <Banner />
       <TicleList />
     </>
   );

From 4b890d5534941e0fe8ecd4bb75201a670ecbdada Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 01:54:18 +0900
Subject: [PATCH 18/24] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8,=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C?=
 =?UTF-8?q?=EC=97=90=20=EB=8C=80=ED=95=B4=20Empty=20=EB=B7=B0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/components/common/Empty/index.tsx | 24 +++++++++++++++++++
 .../components/{ => common}/Header/index.tsx  |  0
 .../src/components/dashboard/apply/index.tsx  |  5 +++-
 .../src/components/dashboard/open/index.tsx   |  5 +++-
 apps/web/src/components/ticle/list/index.tsx  |  3 +++
 apps/web/src/hooks/api/ticle.ts               |  1 +
 apps/web/src/routes/dashboard/_layout.tsx     |  2 +-
 apps/web/src/routes/index.tsx                 |  2 +-
 apps/web/src/routes/ticle/$ticleId.tsx        |  2 +-
 apps/web/src/routes/ticle/open.tsx            |  2 +-
 10 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/components/common/Empty/index.tsx
 rename apps/web/src/components/{ => common}/Header/index.tsx (100%)

diff --git a/apps/web/src/components/common/Empty/index.tsx b/apps/web/src/components/common/Empty/index.tsx
new file mode 100644
index 00000000..fbae230c
--- /dev/null
+++ b/apps/web/src/components/common/Empty/index.tsx
@@ -0,0 +1,24 @@
+import TicleCharacter from '@/assets/images/ticle-character.png';
+import cn from '@/utils/cn';
+
+interface EmptyProps {
+  title?: string;
+  className?: string;
+}
+
+function Empty({ title = '항목이 비어있어요!', className }: EmptyProps) {
+  return (
+    <div className={cn('flex h-96 w-full flex-col items-center justify-center gap-8', className)}>
+      <img
+        src={TicleCharacter}
+        alt="흑백 티클 캐릭터"
+        className="grayscale"
+        width={180}
+        height={180}
+      />
+      <h1 className="text-head2 text-weak">{title}</h1>
+    </div>
+  );
+}
+
+export default Empty;
diff --git a/apps/web/src/components/Header/index.tsx b/apps/web/src/components/common/Header/index.tsx
similarity index 100%
rename from apps/web/src/components/Header/index.tsx
rename to apps/web/src/components/common/Header/index.tsx
diff --git a/apps/web/src/components/dashboard/apply/index.tsx b/apps/web/src/components/dashboard/apply/index.tsx
index 3256c9a2..9517e2a9 100644
--- a/apps/web/src/components/dashboard/apply/index.tsx
+++ b/apps/web/src/components/dashboard/apply/index.tsx
@@ -1,5 +1,6 @@
 import { Fragment, useState } from 'react';
 
+import Empty from '@/components/common/Empty';
 import Loading from '@/components/common/Loading';
 import Select, { Option } from '@/components/common/Select';
 import { useDashboardTicleList } from '@/hooks/api/dashboard';
@@ -46,10 +47,12 @@ function Apply() {
     <main className="mt-14 flex w-full flex-col gap-12">
       <Select options={FILTER_OPTIONS} selectedOption={selectedOption} onChange={onOptionChange} />
       <div className="flex flex-col gap-6">
-        {isLoading ? (
+        {isLoading || !data ? (
           <div className="flex h-80 w-full items-center justify-center">
             <Loading color="primary" />
           </div>
+        ) : !data.pages[0]?.ticles?.length ? (
+          <Empty />
         ) : (
           <div className="flex flex-col gap-6">
             {data?.pages.map((page) => (
diff --git a/apps/web/src/components/dashboard/open/index.tsx b/apps/web/src/components/dashboard/open/index.tsx
index b823b234..2c6642dc 100644
--- a/apps/web/src/components/dashboard/open/index.tsx
+++ b/apps/web/src/components/dashboard/open/index.tsx
@@ -1,5 +1,6 @@
 import { Fragment, useState } from 'react';
 
+import Empty from '@/components/common/Empty';
 import Loading from '@/components/common/Loading';
 import Select, { Option } from '@/components/common/Select';
 import { useDashboardTicleList } from '@/hooks/api/dashboard';
@@ -45,10 +46,12 @@ function Open() {
   return (
     <main className="mt-14 flex w-full flex-col gap-12">
       <Select options={FILTER_OPTIONS} selectedOption={selectedOption} onChange={onOptionChange} />
-      {isLoading ? (
+      {isLoading || !data ? (
         <div className="flex h-80 w-full items-center justify-center">
           <Loading color="primary" />
         </div>
+      ) : !data.pages[0]?.ticles?.length ? (
+        <Empty />
       ) : (
         <div className="flex flex-col gap-6">
           {data?.pages.map((page) => (
diff --git a/apps/web/src/components/ticle/list/index.tsx b/apps/web/src/components/ticle/list/index.tsx
index fe04ea38..52d602bc 100644
--- a/apps/web/src/components/ticle/list/index.tsx
+++ b/apps/web/src/components/ticle/list/index.tsx
@@ -1,6 +1,7 @@
 import { Link } from '@tanstack/react-router';
 import { Fragment, useState } from 'react';
 
+import Empty from '@/components/common/Empty';
 import Loading from '@/components/common/Loading';
 import Select, { Option } from '@/components/common/Select';
 import Tab, { TabData } from '@/components/common/Tab';
@@ -79,6 +80,8 @@ function TicleList() {
           <div className="flex h-80 w-full items-center justify-center">
             <Loading color="primary" />
           </div>
+        ) : data?.pages.length === 0 ? (
+          <Empty />
         ) : (
           data?.pages.map((page) => (
             <Fragment key={page.meta.page}>
diff --git a/apps/web/src/hooks/api/ticle.ts b/apps/web/src/hooks/api/ticle.ts
index 24ca64c3..656a1ab2 100644
--- a/apps/web/src/hooks/api/ticle.ts
+++ b/apps/web/src/hooks/api/ticle.ts
@@ -22,6 +22,7 @@ export const useTicleList = (params: GetTicleListParams = {}) => {
       return lastPage.meta.page + 1;
     },
     initialPageParam: 1,
+    placeholderData: (previousData) => previousData,
   });
 };
 
diff --git a/apps/web/src/routes/dashboard/_layout.tsx b/apps/web/src/routes/dashboard/_layout.tsx
index bebf98ec..40d3bce9 100644
--- a/apps/web/src/routes/dashboard/_layout.tsx
+++ b/apps/web/src/routes/dashboard/_layout.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
 
 import BasicLayout from '@/components/common/BasicLayout';
 import DashboardTab from '@/components/dashboard/DashboardTab';
-import Header from '@/components/Header';
+import Header from '@/components/common/Header';
 
 export const Route = createFileRoute('/dashboard')({
   component: RouteComponent,
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 2e5f7205..994f9820 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 
-import Header from '@/components/Header';
+import Header from '@/components/common/Header';
 import TicleList from '@/components/ticle/list';
 import Banner from '@/components/ticle/list/Banner';
 
diff --git a/apps/web/src/routes/ticle/$ticleId.tsx b/apps/web/src/routes/ticle/$ticleId.tsx
index b78e4f42..e8917047 100644
--- a/apps/web/src/routes/ticle/$ticleId.tsx
+++ b/apps/web/src/routes/ticle/$ticleId.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
 
 import BasicLayout from '@/components/common/BasicLayout';
-import Header from '@/components/Header';
+import Header from '@/components/common/Header';
 import Detail from '@/components/ticle/detail';
 
 export const Route = createFileRoute('/ticle/$ticleId')({
diff --git a/apps/web/src/routes/ticle/open.tsx b/apps/web/src/routes/ticle/open.tsx
index e4cd21a8..7401856c 100644
--- a/apps/web/src/routes/ticle/open.tsx
+++ b/apps/web/src/routes/ticle/open.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router';
 
 import BasicLayout from '@/components/common/BasicLayout';
-import Header from '@/components/Header';
+import Header from '@/components/common/Header';
 import Open from '@/components/ticle/open';
 
 export const Route = createFileRoute('/ticle/open')({

From b0eaf1b2a2a373c2bc13f075951e26ef942b9090 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 02:12:16 +0900
Subject: [PATCH 19/24] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EC=8B=A0?=
 =?UTF-8?q?=EC=B2=AD=EC=8B=9C=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/ticle/detail/index.tsx |  5 +----
 apps/web/src/hooks/api/ticle.ts                |  4 ++++
 apps/web/src/utils/errorHandler.ts             | 12 ++++++++++++
 apps/web/src/utils/queryClient.ts              |  5 +++++
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/utils/errorHandler.ts

diff --git a/apps/web/src/components/ticle/detail/index.tsx b/apps/web/src/components/ticle/detail/index.tsx
index ccfcf98e..ba20a923 100644
--- a/apps/web/src/components/ticle/detail/index.tsx
+++ b/apps/web/src/components/ticle/detail/index.tsx
@@ -10,16 +10,13 @@ import { formatDateTimeRange } from '@/utils/date';
 
 function Detail() {
   const { ticleId } = useParams({ from: '/ticle/$ticleId' });
-  const navigate = useNavigate({ from: `/ticle/${ticleId}` });
-  const { data, isLoading } = useTicle(ticleId);
+  const { data } = useTicle(ticleId);
 
   const { mutate } = useApplyTicle();
 
   const handleApplyButtonClick = () => {
     mutate(ticleId);
-    navigate({ to: `/dashboard/apply` });
   };
-  // TODO: 티클 신청 완료시 alert띄우기
 
   if (!data) return;
   const { dateStr, timeRangeStr } = formatDateTimeRange(data.startTime, data.endTime);
diff --git a/apps/web/src/hooks/api/ticle.ts b/apps/web/src/hooks/api/ticle.ts
index 656a1ab2..d4642feb 100644
--- a/apps/web/src/hooks/api/ticle.ts
+++ b/apps/web/src/hooks/api/ticle.ts
@@ -1,4 +1,5 @@
 import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
 
 import { getTitleList, getTicle, createTicle, applyTicle } from '@/api/ticle';
 
@@ -47,10 +48,13 @@ export const useCreateTicle = () => {
 
 export const useApplyTicle = () => {
   const queryClient = useQueryClient();
+  const navigate = useNavigate({ from: '/ticle/$ticleId' });
 
   return useMutation({
     mutationFn: applyTicle,
     onSuccess: (_, ticleId) => {
+      alert('티클 신청이 완료되었습니다.'); // TODO: toast로 교체
+      navigate({ to: `/dashboard/apply` });
       queryClient.invalidateQueries({ queryKey: ['ticleList'] });
       queryClient.invalidateQueries({ queryKey: ['dashboardTicleList'] });
       queryClient.invalidateQueries({ queryKey: ['applicantsTicle', ticleId] });
diff --git a/apps/web/src/utils/errorHandler.ts b/apps/web/src/utils/errorHandler.ts
new file mode 100644
index 00000000..e097826b
--- /dev/null
+++ b/apps/web/src/utils/errorHandler.ts
@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+export const handleError = (error: unknown) => {
+  if (error instanceof Error) {
+    if (axios.isAxiosError(error)) {
+      const serverError = error.response?.data;
+
+      // TODO: alert가 아닌 toast로 교체
+      alert(serverError?.error.message || '오류가 발생했습니다.');
+    }
+  }
+};
diff --git a/apps/web/src/utils/queryClient.ts b/apps/web/src/utils/queryClient.ts
index 9d807773..6780a985 100644
--- a/apps/web/src/utils/queryClient.ts
+++ b/apps/web/src/utils/queryClient.ts
@@ -2,6 +2,8 @@ import { QueryClient } from '@tanstack/react-query';
 
 import { STALE_TIME } from '@/constants/query';
 
+import { handleError } from './errorHandler';
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -9,6 +11,9 @@ const queryClient = new QueryClient({
       staleTime: STALE_TIME,
       gcTime: STALE_TIME,
     },
+    mutations: {
+      onError: handleError,
+    },
   },
 });
 

From 53dd2595afb113d55a0df561b602fb2b72bf4f20 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:18:41 +0900
Subject: [PATCH 20/24] =?UTF-8?q?design:=20Empty=20=EB=B7=B0=EC=97=90=20?=
 =?UTF-8?q?=EC=A0=90=EC=84=A0=20border=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/common/Empty/index.tsx |  7 ++++++-
 apps/web/src/styles/global.css                 | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/common/Empty/index.tsx b/apps/web/src/components/common/Empty/index.tsx
index fbae230c..36f9c4fe 100644
--- a/apps/web/src/components/common/Empty/index.tsx
+++ b/apps/web/src/components/common/Empty/index.tsx
@@ -8,7 +8,12 @@ interface EmptyProps {
 
 function Empty({ title = '항목이 비어있어요!', className }: EmptyProps) {
   return (
-    <div className={cn('flex h-96 w-full flex-col items-center justify-center gap-8', className)}>
+    <div
+      className={cn(
+        'custom-dashed flex h-96 w-full flex-col items-center justify-center gap-8',
+        className
+      )}
+    >
       <img
         src={TicleCharacter}
         alt="흑백 티클 캐릭터"
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 10cdfdf0..d7104c0d 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -89,6 +89,20 @@
   }
 }
 
+.custom-dashed {
+  position: relative;
+  border-radius: 8px;
+  background-clip: padding-box;
+}
+
+.custom-dashed::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  border: 3px dashed var(--grey-300);
+}
+
 @layer utilities {
   *::-webkit-scrollbar {
     @apply w-2;

From fd62076a0f374c791511976e46532368d9b9a7eb Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:44:18 +0900
Subject: [PATCH 21/24] =?UTF-8?q?feat:=20=EA=B0=9C=EC=84=A4=ED=95=9C=20?=
 =?UTF-8?q?=ED=8B=B0=ED=81=B4=20=EB=AA=A9=EB=A1=9D=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=B0=B8=EC=97=AC=EC=9E=90=20=EB=AA=A9=EB=A1=9D=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=97=B4=20=EB=95=8C=20link=20=ED=83=9C=EA=B7=B8?=
 =?UTF-8?q?=20=EB=8F=99=EC=9E=91=20=EC=97=86=EC=95=A0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/dashboard/open/TicleInfoCard.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/dashboard/open/TicleInfoCard.tsx b/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
index 4dcd39a3..702a941e 100644
--- a/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
+++ b/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
@@ -32,6 +32,11 @@ function TicleInfoCard({ ticleId, ticleTitle, startTime, endTime, status }: Ticl
     navigate({ to: `/live/${ticleId}` });
   };
 
+  const handleApplicantsDialogOpen = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    onOpen();
+  };
+
   return (
     <Link to={`/ticle/${ticleId}`}>
       <div className="flex items-center justify-between rounded-lg border border-main bg-white p-6 shadow-normal">
@@ -48,7 +53,7 @@ function TicleInfoCard({ ticleId, ticleTitle, startTime, endTime, status }: Ticl
         <div className="flex gap-9">
           <button
             className="flex items-center gap-2 rounded-md p-2.5 hover:bg-teritary"
-            onClick={onOpen}
+            onClick={handleApplicantsDialogOpen}
           >
             <span className="text-title2 text-primary">신청자 목록</span>
 

From 2799fafb4e4d835c77c739145397f775482ea80d Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:44:38 +0900
Subject: [PATCH 22/24] =?UTF-8?q?feat:=20=EC=B0=B8=EC=97=AC=EC=9E=90=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=AA=A8=EB=8B=AC=EC=97=90=20Empty=20?=
 =?UTF-8?q?=EB=B7=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/components/common/Empty/index.tsx |  7 ++++---
 .../dashboard/open/ApplicantsDialog.tsx       | 19 ++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/common/Empty/index.tsx b/apps/web/src/components/common/Empty/index.tsx
index 36f9c4fe..010c4363 100644
--- a/apps/web/src/components/common/Empty/index.tsx
+++ b/apps/web/src/components/common/Empty/index.tsx
@@ -4,9 +4,10 @@ import cn from '@/utils/cn';
 interface EmptyProps {
   title?: string;
   className?: string;
+  imageSize?: number;
 }
 
-function Empty({ title = '항목이 비어있어요!', className }: EmptyProps) {
+function Empty({ title = '항목이 비어있어요!', className, imageSize = 180 }: EmptyProps) {
   return (
     <div
       className={cn(
@@ -18,8 +19,8 @@ function Empty({ title = '항목이 비어있어요!', className }: EmptyProps)
         src={TicleCharacter}
         alt="흑백 티클 캐릭터"
         className="grayscale"
-        width={180}
-        height={180}
+        width={imageSize}
+        height={imageSize}
       />
       <h1 className="text-head2 text-weak">{title}</h1>
     </div>
diff --git a/apps/web/src/components/dashboard/open/ApplicantsDialog.tsx b/apps/web/src/components/dashboard/open/ApplicantsDialog.tsx
index 4b58f356..226d22ab 100644
--- a/apps/web/src/components/dashboard/open/ApplicantsDialog.tsx
+++ b/apps/web/src/components/dashboard/open/ApplicantsDialog.tsx
@@ -2,6 +2,7 @@ import { DashboardApplicantsResponse } from '@repo/types';
 
 import Avatar from '@/components/common/Avatar';
 import { Dialog } from '@/components/common/Dialog';
+import Empty from '@/components/common/Empty';
 
 interface ApplicantsDialogProps {
   isOpen: boolean;
@@ -15,13 +16,17 @@ function ApplicantsDialog({ isOpen, onClose, applicants }: ApplicantsDialogProps
       <Dialog.Title align="center">신청자 목록</Dialog.Title>
       <Dialog.Close onClose={onClose} />
       <Dialog.Content className="custom-scrollbar h-56 overflow-y-scroll">
-        <ul className="flex flex-col gap-4">
-          {applicants.map((applicant) => (
-            <li key={applicant.id} className="flex items-center gap-2.5">
-              <Avatar src={applicant.user.profileImageUrl} size="sm" />
-              <span className="text-body1 text-alt">{applicant.user.nickname}</span>
-            </li>
-          ))}
+        <ul className="flex h-full flex-col gap-4">
+          {applicants.length === 0 ? (
+            <Empty imageSize={80} className="h-full" />
+          ) : (
+            applicants.map((applicant) => (
+              <li key={applicant.id} className="flex items-center gap-2.5">
+                <Avatar src={applicant.user.profileImageUrl} size="sm" />
+                <span className="text-body1 text-alt">{applicant.user.nickname}</span>
+              </li>
+            ))
+          )}
         </ul>
       </Dialog.Content>
     </Dialog.Root>

From e6f49ce09266b00750d4293de015a46f50af77ea Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:47:20 +0900
Subject: [PATCH 23/24] =?UTF-8?q?feat:=20=ED=8B=B0=ED=81=B4=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=EC=8B=9C=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20invalidateQueries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/hooks/api/ticle.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/hooks/api/ticle.ts b/apps/web/src/hooks/api/ticle.ts
index d4642feb..c022c5c9 100644
--- a/apps/web/src/hooks/api/ticle.ts
+++ b/apps/web/src/hooks/api/ticle.ts
@@ -42,6 +42,7 @@ export const useCreateTicle = () => {
     mutationFn: createTicle,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['ticleList'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboardTicleList'] });
     },
   });
 };

From 2e550e7bd775918dbe7c2be280cbdc8660b9cc68 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:50:59 +0900
Subject: [PATCH 24/24] =?UTF-8?q?design:=20=ED=83=9C=EA=B7=B8=EC=9D=98=20?=
 =?UTF-8?q?=EC=B5=9C=EB=8C=80=20=ED=81=AC=EA=B8=B0=EC=97=90=20=EB=A7=9E?=
 =?UTF-8?q?=EC=B6=B0=EC=84=9C=20=ED=8B=B0=ED=81=B4=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/ticle/list/TicleCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/ticle/list/TicleCard.tsx b/apps/web/src/components/ticle/list/TicleCard.tsx
index 4c38873c..6e4a13ad 100644
--- a/apps/web/src/components/ticle/list/TicleCard.tsx
+++ b/apps/web/src/components/ticle/list/TicleCard.tsx
@@ -21,10 +21,10 @@ const TicleCard = ({
   speakerProfileImg,
 }: TicleCardProps) => {
   return (
-    <article className="flex w-[19rem] cursor-pointer flex-col gap-14 rounded-lg border border-main bg-white px-6 py-8 shadow-normal transition-transform duration-500 ease-in-out hover:-translate-y-3 hover:border-primary hover:shadow-up">
+    <article className="flex h-[23rem] w-[19rem] cursor-pointer flex-col justify-between gap-14 rounded-lg border border-main bg-white px-6 py-8 shadow-normal transition-transform duration-500 ease-in-out hover:-translate-y-3 hover:border-primary hover:shadow-up">
       <div className="flex flex-col gap-4">
         <h3 className="text-head3 text-main">{title}</h3>
-        <div className="flex gap-2">
+        <div className="flex h-20 flex-wrap gap-2">
           {tags.map((tag) => (
             <Badge key={tag}>{tag}</Badge>
           ))}