diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 0000000..bc7258e
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,19 @@
+name: Build # workflow 의 이름
+
+on: push # workflow 의 실행 시점
+
+jobs:
+  build: # job 의 이름
+    runs-on: ubuntu-latest # 실행할 OS 환경
+    steps: # job 의 세부 단계
+      # step1 : 코드 체크아웃
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # step2 : Node.js 설치
+      - name: Install dependencies
+        run: npm install
+
+      # step3 : 빌드
+      - name: Build Next.js app
+        run: npm run build
diff --git a/components/ActivityDetails/ActivityDetails.tsx b/components/ActivityDetails/ActivityDetails.tsx
index bd23154..d990a5d 100644
--- a/components/ActivityDetails/ActivityDetails.tsx
+++ b/components/ActivityDetails/ActivityDetails.tsx
@@ -19,6 +19,7 @@ import {
   getActivityInfoResponse,
   getActivityReviewsResponse,
 } from '@/pages/api/activities/apiactivities.types';
+import Spinner from '../Spinner/Spinner';
 
 export default function ActivityDetails({ id }: ActivityDetailsProps) {
   const router = useRouter();
@@ -50,7 +51,7 @@ export default function ActivityDetails({ id }: ActivityDetailsProps) {
   });
 
   if (isLoadingActivity || isLoadingReviews) {
-    return <div>Loading...</div>;
+    return <Spinner />;
   }
 
   if (activityError || reviewError) {
diff --git a/components/ActivityDetails/Reservation/Reservation.tsx b/components/ActivityDetails/Reservation/Reservation.tsx
index 997a1fc..11b9efc 100644
--- a/components/ActivityDetails/Reservation/Reservation.tsx
+++ b/components/ActivityDetails/Reservation/Reservation.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { format, addDays } from 'date-fns';
 import { PrimaryButton } from '@/components/Button/Button';
 import { usePopup } from '@/hooks/usePopup';
@@ -25,21 +25,47 @@ export default function Reservation({ activity }: ReservationProps) {
   const { openPopup } = usePopup();
   const { openModal, closeModal } = useModal();
 
-  useEffect(() => {
-    if (selectedDate) {
-      updateModal(selectedDate, selectedTime);
-    }
-  }, [selectedDate]);
+  const getAvailableTimes = useCallback(
+    (date: Date | null) => {
+      if (!date) return [];
+      return schedules
+        .filter(
+          (schedule) =>
+            format(new Date(schedule.date), 'yyyy-MM-dd') ===
+            format(date, 'yyyy-MM-dd')
+        )
+        .map((schedule) => `${schedule.startTime} ~ ${schedule.endTime}`);
+    },
+    [schedules]
+  );
+
+  const updateModal = useCallback(
+    (date: Date | null, time: string | null) => {
+      setModal((prevModal) => ({
+        ...prevModal,
+        content: (
+          <ReservationModal
+            selectedDate={date}
+            handleDateChange={handleDateChange}
+            getAvailableTimes={getAvailableTimes}
+            selectedTime={time}
+            handleTimeChange={handleTimeChange}
+          />
+        ),
+      }));
+    },
+    [getAvailableTimes, setModal]
+  );
 
   useEffect(() => {
-    if (selectedTime) {
+    if (selectedDate) {
       updateModal(selectedDate, selectedTime);
     }
 
     if (selectedDate && selectedTime) {
       setButtonText(`${format(selectedDate, 'yy/MM/dd')} ${selectedTime}`);
     }
-  }, [selectedTime]);
+  }, [selectedDate, selectedTime, updateModal]);
 
   useEffect(() => {
     const isDisabled = !selectedTime;
@@ -79,32 +105,6 @@ export default function Reservation({ activity }: ReservationProps) {
 
   const totalPrice = pricePerPerson * participants;
 
-  const updateModal = (date: Date | null, time: string | null) => {
-    setModal((prevModal) => ({
-      ...prevModal,
-      content: (
-        <ReservationModal
-          selectedDate={date}
-          handleDateChange={handleDateChange}
-          getAvailableTimes={getAvailableTimes}
-          selectedTime={time}
-          handleTimeChange={handleTimeChange}
-        />
-      ),
-    }));
-  };
-
-  const getAvailableTimes = (date: Date | null) => {
-    if (!date) return [];
-    return schedules
-      .filter(
-        (schedule) =>
-          format(new Date(schedule.date), 'yyyy-MM-dd') ===
-          format(date, 'yyyy-MM-dd')
-      )
-      .map((schedule) => `${schedule.startTime} ~ ${schedule.endTime}`);
-  };
-
   useEffect(() => {
     setModal((prevModal) => ({
       ...prevModal,
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
index e81214b..0a36b07 100644
--- a/components/Button/Button.tsx
+++ b/components/Button/Button.tsx
@@ -125,7 +125,7 @@ export function CircleCloseButton({ onClick }: SimpleButtonProps) {
 /* 닫기 버튼 - 기본 버전  */
 export function CloseButton({ onClick }: SimpleButtonProps) {
   return (
-    <button onClick={onClick}>
+    <button onClick={onClick} className="cursor-pointer">
       <Image src="/icon/btn_x_medium.svg" width={24} height={24} alt="닫기" />
     </button>
   );
@@ -185,7 +185,7 @@ export function MeatballButton({ onClick }: SimpleButtonProps) {
 /* 추가하기 버튼 - 항목 추가 시 사용 */
 export function PlusButton({ onClick }: SimpleButtonProps) {
   return (
-    <button onClick={onClick}>
+    <button type="button" onClick={onClick}>
       <Image src="/icon/btn_plus.svg" width={56} height={56} alt="추가하기" />
     </button>
   );
@@ -194,7 +194,7 @@ export function PlusButton({ onClick }: SimpleButtonProps) {
 /* 제거하기 버튼 - 항목 제거 시 사용 */
 export function MinusButton({ onClick }: SimpleButtonProps) {
   return (
-    <button onClick={onClick}>
+    <button type="button" onClick={onClick}>
       <Image src="/icon/btn_minus.svg" width={56} height={56} alt="제거하기" />
     </button>
   );
@@ -215,14 +215,11 @@ export function ArrowCircleButton({ onClick }: SimpleButtonProps) {
 }
 
 /* 이미지 등록하기 버튼 */
-export function ImageUploadButton({ onClick }: SimpleButtonProps) {
+export function ImageUploadButton() {
   return (
-    <button
-      className="flex flex-col gap-[40px] items-center justify-center w-[180px] h-[180px] border border-dashed border-var-gray8 rounded-lg"
-      onClick={onClick}
-    >
+    <div className="flex flex-col gap-[40px] items-center justify-center w-[180px] h-[180px] border border-dashed border-var-gray8 rounded-lg">
       <Image src="/icon/icon_plus.svg" width={30} height={30} alt="추가" />
       <p className="text-[24px]">이미지 등록</p>
-    </button>
+    </div>
   );
 }
diff --git a/components/Button/Button.types.ts b/components/Button/Button.types.ts
index adc4307..f853e0b 100644
--- a/components/Button/Button.types.ts
+++ b/components/Button/Button.types.ts
@@ -1,7 +1,7 @@
 export interface PrimaryButtonProps {
   size: 'small' | 'medium' | 'large';
   style: 'dark' | 'bright' | 'disabled' | 'enabled';
-  children: string;
+  children?: string;
   disabled?: boolean;
   onClick: () => void;
 }
diff --git a/components/InputBox/InputBox.tsx b/components/InputBox/InputBox.tsx
index e3e1e88..b49d837 100644
--- a/components/InputBox/InputBox.tsx
+++ b/components/InputBox/InputBox.tsx
@@ -21,8 +21,13 @@ export default function InputBox({
 }: InputBoxProps) {
   return (
     <div className="flex flex-col gap-[16px] relative">
-      {label && <label className="text-[24px] font-bold">{label}</label>}
+      {label && (
+        <label className="text-[24px] font-bold" htmlFor={name}>
+          {label}
+        </label>
+      )}
       <input
+        id={name}
         className={`border ${errors[name] ? 'border-var-red2' : ''} py-[16px] px-[20px] rounded-md border-var-gray6`}
         type={type}
         placeholder={placeholder}
diff --git a/components/InputBox/TextArea.tsx b/components/InputBox/TextArea.tsx
new file mode 100644
index 0000000..df92caf
--- /dev/null
+++ b/components/InputBox/TextArea.tsx
@@ -0,0 +1,40 @@
+import { InputBoxProps } from './InputBox.types';
+
+/*
+	label: label은 optional입니다.
+	type: 옵셔널이며 기본은 text입니다.
+	placeholder: placeholder입니다.
+	name: register의 필드 명입니다. 데이터를 담는 변수명 입니다.
+	validation: 옵셔널이며 유효성 검사 조건을 담는 변수입니다.
+	register, errors: 해당 input을 담는 리액트 훅 폼의 register와 errors객체를 넣어주세요.
+*/
+
+export default function TextArea({
+  label = '',
+  type = 'text',
+  placeholder,
+  name,
+  validation = {},
+  register,
+  errors,
+  readOnly = false,
+}: InputBoxProps) {
+  return (
+    <div className="flex flex-col gap-[16px] relative">
+      {label && <label className="text-[24px] font-bold">{label}</label>}
+      <textarea
+        className={`border ${errors[name] ? 'border-var-red2' : ''} py-[16px] px-[20px] rounded-md border-var-gray6 w-full h-[346px] resize-none`}
+        type={type}
+        placeholder={placeholder}
+        {...register(name, { ...validation, readOnly })}
+        readOnly={readOnly}
+      />
+      {/* 에러 메세지 */}
+      {errors[name] && (
+        <span className="text-[12px] text-var-red2">
+          {errors[name]?.message}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/components/KategorieDropdown/KategorieDropdown.tsx b/components/KategorieDropdown/KategorieDropdown.tsx
index b21bce3..fd3f0fa 100644
--- a/components/KategorieDropdown/KategorieDropdown.tsx
+++ b/components/KategorieDropdown/KategorieDropdown.tsx
@@ -64,7 +64,7 @@ function KategorieDropdown() {
   };
 
   return (
-    <div className="w-[800px] h-[56px] relative" ref={KateDropdownElement}>
+    <div className="w-[800px] h-[56px] relative z-10" ref={KateDropdownElement}>
       <div
         className={`w-[800px] h-[56px] border-solid border border-var-gray7 rounded flex items-center pl-[16px] text-[16px] font-[400] font-sans ${isSelected} bg-white`}
         onClick={handleOpen}
@@ -89,8 +89,7 @@ function KategorieDropdown() {
         )}
       </div>
       {isOpen ? (
-        <ul className="w-[800px] h-[260px] rounded-md bg-white absolute animate-slideDown bottom-[-266px] flex flex-col items-center justify-center">
-
+        <ul className="w-[800px] h-[260px] rounded-md bg-white absolute animate-slideDown bottom-[-266px] flex flex-col items-center justify-center shadow-kategorieDropdown">
           {Object.values(Kategories).map((category) => (
             <Kategorie key={category} name={category} setIsOpen={setIsOpen} />
           ))}
diff --git a/components/Lander/AllActivities.tsx b/components/Lander/AllActivities.tsx
index 5961b68..f8ffbe9 100644
--- a/components/Lander/AllActivities.tsx
+++ b/components/Lander/AllActivities.tsx
@@ -10,6 +10,8 @@ import { getActivityListParams } from '@/pages/api/activities/apiactivities.type
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import Pagination from '../Pagination/Pagination';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { mainPageState } from '@/states/mainPageState';
 
 const Kategories = ['문화 예술', '식음료', '스포츠', '투어', '관광', '웰빙'];
 
@@ -19,9 +21,16 @@ function AllActivity({
   price,
   rating,
   reviewCount,
+  id,
 }: AllActivityProps) {
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push(`/activity-details/${id}`);
+  };
+
   return (
-    <div>
+    <div onClick={handleClick} className="cursor-pointer">
       <div
         className="w-[286px] t:w-[223px] m:w-[170px] h-[286px] t:h-[223px] m:h-[170px] rounded-xl bg-[url('/image/Testimage.jpg')]"
         style={{
@@ -57,49 +66,69 @@ function AllActivity({
   );
 }
 
-interface ActivityDetail {
-  id: number;
-  userId: number;
-  title: string;
-  description: string;
-  category: string;
-  price: number;
-  address: string;
-  bannerImageUrl: string;
-  rating: number;
-  reviewCount: number;
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-interface MockData {
-  activities: ActivityDetail[];
-  totalCount: number;
-  cursorId: number | null;
-}
-
 function AllActivities() {
   const router = useRouter();
   const [currentPage, setCurrentPage] = useState<number>(
     router.query.page ? parseInt(router.query.page as string, 10) : 1
   );
+  const [MainPageState, setMainPageState] = useRecoilState(mainPageState);
+
+  const { itemsPerPage: items_per_page, selectedSorted } =
+    useRecoilValue(mainPageState);
 
-  const items_per_page = 8;  
+  const setItemsPerPage = () => {
+    if (typeof window !== 'undefined') {
+      // 브라우저 환경에서만 실행
+      const width = window.innerWidth;
+
+      let itemsPerPage;
+      if (width >= 1281) {
+        itemsPerPage = 8;
+      } else if (width > 744) {
+        itemsPerPage = 9;
+      } else {
+        itemsPerPage = 6;
+      }
+
+      setMainPageState((prevState) => ({
+        ...prevState,
+        itemsPerPage,
+      }));
+
+      console.log(`Current items per page: ${itemsPerPage}`);
+    }
+  };
+
+  useEffect(() => {
+    setItemsPerPage();
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', setItemsPerPage);
+    }
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', setItemsPerPage);
+      }
+    };
+  }, []);
 
   const params: getActivityListParams = {
     method: 'offset',
-    cursorId: null, // 처음에는 null로 설정
+    cursorId: null,
     category: null,
     keyword: null,
-    sort: null,
+    sort: selectedSorted,
     page: currentPage,
-    size: 8, // 최대 9개만 가져오기
+    size: items_per_page,
   };
 
-  const { data: allActivitiesData, error, isLoading } = useQuery<getActivityListResponse>(
-    {queryKey : ['AllActivities', currentPage],
-    queryFn :() => getActivityList(params)}
-  );
+  const {
+    data: allActivitiesData,
+    error,
+    isLoading,
+  } = useQuery<getActivityListResponse>({
+    queryKey: ['AllActivities', params],
+    queryFn: () => getActivityList(params),
+  });
 
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
@@ -112,11 +141,11 @@ function AllActivities() {
       cursorId: null,
       category: null,
       keyword: null,
-      sort: null,
+      sort: selectedSorted,
       page: currentPage,
       size: items_per_page,
     };
-  }, [currentPage]);
+  }, [currentPage, items_per_page, selectedSorted]);
 
   return (
     <div>
@@ -135,14 +164,6 @@ function AllActivities() {
         🛼 모든 체험
       </div>
       <div className="grid grid-cols-4 t:grid-cols-3 m:grid-cols-2 grid-rows-2 gap-[20px] t:gap-[14px] m:gap-[6px] gap-y-[48px] mb-[40px] overflow-auto scrollbar-hide">
-        {/* <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity>
-        <AllActivity></AllActivity> */}
         {allActivitiesData?.activities.map((data) => (
           <AllActivity
             key={data.id}
@@ -151,11 +172,19 @@ function AllActivities() {
             price={data.price}
             rating={data.rating}
             reviewCount={data.reviewCount}
+            id={data.id}
           />
         ))}
       </div>
       <div className="text-[30px] font-[700] flex justify-center mb-[342px] mt-[70px]">
-        {allActivitiesData && allActivitiesData.totalCount > 0 && (<Pagination totalItems={allActivitiesData?.totalCount} itemsPerPage={items_per_page} currentPage={currentPage} onPageChange={handlePageChange}/>)}
+        {allActivitiesData && allActivitiesData.totalCount > 0 && (
+          <Pagination
+            totalItems={allActivitiesData?.totalCount}
+            itemsPerPage={items_per_page}
+            currentPage={currentPage}
+            onPageChange={handlePageChange}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/components/Lander/AllActivities.type.ts b/components/Lander/AllActivities.type.ts
index 40d0e11..6a4b674 100644
--- a/components/Lander/AllActivities.type.ts
+++ b/components/Lander/AllActivities.type.ts
@@ -4,5 +4,5 @@ export interface AllActivityProps {
   price: number;
   rating: number;
   reviewCount: number;
+  id: number;
 }
-
diff --git a/components/Lander/BestActivities.tsx b/components/Lander/BestActivities.tsx
index 1ab5c4d..8150655 100644
--- a/components/Lander/BestActivities.tsx
+++ b/components/Lander/BestActivities.tsx
@@ -14,6 +14,7 @@ function BestActivity({
   price,
   rating,
   reviewCount,
+  id,
 }: BestActivityProps) {
   return (
     <div
@@ -121,6 +122,7 @@ function BestActivities() {
               price={item.price}
               rating={item.rating}
               reviewCount={item.reviewCount}
+              id= {item.id}
             />
           ))}
         </div>
@@ -137,6 +139,7 @@ function BestActivities() {
               price={item.price}
               rating={item.rating}
               reviewCount={item.reviewCount}
+              id= {item.id}
             />
           ))}
         </div>
diff --git a/components/Lander/BestActivities.type.ts b/components/Lander/BestActivities.type.ts
index 304c65a..b225cd9 100644
--- a/components/Lander/BestActivities.type.ts
+++ b/components/Lander/BestActivities.type.ts
@@ -24,4 +24,5 @@ export interface BestActivityProps {
   price: number;
   rating: number;
   reviewCount: number;
+  id: number;
 }
\ No newline at end of file
diff --git a/components/Lander/Main.tsx b/components/Lander/Main.tsx
index 1849170..1ed0db5 100644
--- a/components/Lander/Main.tsx
+++ b/components/Lander/Main.tsx
@@ -30,10 +30,10 @@ function Main() {
         <div className="mt-[120px] m:mt-[14px] flex justify-center">
           <SearchBar></SearchBar>
         </div>
-        <div className='mt-[40px]'>
+        <div className="mt-[40px]">
           <BestActivities></BestActivities>
         </div>
-        <div className=' mt-[60px]'>
+        <div className=" mt-[60px]">
           <AllActivities></AllActivities>
         </div>
       </div>
diff --git a/components/Layout/NavigationBar.tsx b/components/Layout/NavigationBar.tsx
index 4a62210..a9faaa9 100644
--- a/components/Layout/NavigationBar.tsx
+++ b/components/Layout/NavigationBar.tsx
@@ -2,25 +2,76 @@ import Image from 'next/image';
 import Link from 'next/link';
 import Logo from '@/public/icon/logo_small.svg';
 import notificationIcon from '@/public/icon/icon_notification.svg';
+import { useUserData } from '@/hooks/useUserData';
+import { useState } from 'react';
+import NavigationDropdown from '../NavigationDropdown/NavigationDropdown';
+import useClickOutside from '@/hooks/useClickOutside';
+import useGetNotification from '@/hooks/useGetNotification';
+import NotificationDropdown from '../NavigationDropdown/NotificationDropdown';
+import useLoginState from '@/hooks/useLoginState';
 
 export default function NavigationBar() {
-  const isLoggined = 'y';
+  const userData = useUserData();
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+  const { isLoggedIn } = useLoginState();
+  const [isNotificationOpen, setIsNotificationOpen] = useState<boolean>(false);
+  const { data, isLoading, isError } = useGetNotification({
+    cursorId: 0,
+    size: 10,
+  });
+
+  const toggleDropdown = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+  const toggleNotifyDropdown = () => {
+    setIsNotificationOpen(!isNotificationOpen);
+  };
+  const closeProfileDropdown = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const dropdownRef = useClickOutside<HTMLDivElement>(closeProfileDropdown);
 
   return (
-    <div className="flex h-[70px] justify-between pl-[369px] pr-[351px] t:px-[24px] m:px-[24px] bg-[#fff] border-b border-var-gray3 border-solid ">
+    <div className="sticky top-0 flex h-[70px] z-30 justify-between pl-[369px] pr-[351px] t:px-[24px] m:px-[24px]  border-b bg-white border-var-gray3 border-solid ">
       <div className="flex items-center">
         <Link href="/">
           <Image src={Logo} alt="로고 아이콘" />
         </Link>
       </div>
-      {isLoggined ? (
+      {isLoggedIn ? (
         <div className="flex items-center gap-[25px]">
-          <button>
-            <Image src={notificationIcon} alt="알림 아이콘" />
+          <button onClick={toggleNotifyDropdown}>
+            <div className="relative">
+              <Image src={notificationIcon} alt="알림 아이콘" />
+              {data?.totalCount !== undefined && data?.totalCount > 0 && (
+                <span className="flex justify-center absolute -top-2 -right-2 bg-red-500 w-[15px] h-[15px] text-white text-xs rounded-full px-2">
+                  {data.totalCount}
+                </span>
+              )}
+            </div>
           </button>
-          <div className="flex items-center gap-[10px] border-l-2 border-var-gray3 border-solid pl-[25px] m:pl-[12px]">
-            <div className="h-[32px] w-[32px] rounded-full bg-var-gray3" />
-            <p className="text-[14px]">테스트</p>
+          {isNotificationOpen && (
+            <NotificationDropdown data={data} onClick={toggleNotifyDropdown} />
+          )}
+          <div
+            className="flex relative items-center gap-[10px] border-l-2 cursor-pointer border-var-gray3 border-solid pl-[25px] m:pl-[12px]"
+            ref={dropdownRef}
+            onClick={toggleDropdown}
+          >
+            {isDropdownOpen && <NavigationDropdown />}
+            {userData.profileImageUrl ? (
+              <Image
+                src={userData.profileImageUrl}
+                width={32}
+                height={32}
+                className="h-[32px] w-[32px] rounded-full bg-var-gray3"
+                alt="유저 프로필사진"
+              />
+            ) : (
+              <div className="h-[32px] w-[32px] rounded-full bg-var-gray3" />
+            )}
+            <p className="text-[14px]">{userData.nickname}</p>
           </div>
         </div>
       ) : (
diff --git a/components/MyActivity/Register/DateInput.tsx b/components/MyActivity/Register/DateInput.tsx
new file mode 100644
index 0000000..42bd00c
--- /dev/null
+++ b/components/MyActivity/Register/DateInput.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import CustomCalendar from '@/components/CustomCalendar/CustomCalendar';
+import useClickOutside from '@/hooks/useClickOutside';
+
+function Date() {
+  const [date, setDate] = useState<Date | null>(null);
+  const [showCalendar, setShowCalendar] = useState(false);
+
+  const handleInputClick = () => {
+    setShowCalendar(true);
+  };
+
+  const handleDateSelect = (date: Date | null) => {
+    setDate(date);
+    setShowCalendar(false);
+  };
+
+  const closeCalendar = () => {
+    setShowCalendar(false);
+  };
+
+  const calendarRef = useClickOutside<HTMLDivElement>(closeCalendar);
+
+  return (
+    <div className="relative">
+      <div className="w-[374px]">
+        <input
+          type="text"
+          value={date ? date.toDateString() : ''}
+          onClick={handleInputClick}
+          readOnly
+          className="w-full h-[56px] py-[8px] px-[16px] rounded-md border border-var-gray6 bg-white"
+          placeholder="YY/MM/DD"
+        />
+      </div>
+      {showCalendar && (
+        <div ref={calendarRef} className="absolute left-[40px] top-[67px] z-10">
+          <CustomCalendar selectedDate={date} onChange={handleDateSelect} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Date;
diff --git a/components/MyActivity/Register/TimeDropdown.tsx b/components/MyActivity/Register/TimeDropdown.tsx
new file mode 100644
index 0000000..74c8706
--- /dev/null
+++ b/components/MyActivity/Register/TimeDropdown.tsx
@@ -0,0 +1,66 @@
+import useClickOutside from '@/hooks/useClickOutside';
+import Image from 'next/image';
+import { useState } from 'react';
+
+function generateTimeOptions() {
+  const times = [];
+  for (let hour = 0; hour <= 24; hour++) {
+    const timeString = `${hour}:00`;
+    times.push(timeString);
+  }
+  return times;
+}
+
+function TimeDropdown() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedTime, setSelectedTime] = useState<string | null>('0:00');
+
+  const handleSelectTime = (time: string | null) => {
+    setSelectedTime(time);
+    setIsOpen(false);
+  };
+
+  const handleClickDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const closeDropdown = () => {
+    setIsOpen(false);
+  };
+
+  const dropdownRef = useClickOutside<HTMLDivElement>(closeDropdown);
+  const times = generateTimeOptions();
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        type="button"
+        className="flex justify-between items-center w-[140px] h-[56px] py-[4px] px-[16px] rounded-md border border-var-gray6 bg-white text-var-gray7 text-left"
+        onClick={handleClickDropdown}
+      >
+        <p>{selectedTime}</p>
+        <Image
+          src="/icon/chevron_down.svg"
+          alt="화살표"
+          width={24}
+          height={24}
+        />
+      </button>
+      {isOpen && (
+        <ul className="absolute z-10 animate-slideDown w-[140px] h-[200px] rounded-[8px] overflow-y-scroll scrollbar-hide">
+          {times.map((time) => (
+            <li
+              key={time}
+              onClick={() => handleSelectTime(time)}
+              className="h-[56px] text-var-black py-[18px] px-[16px] hover:bg-gray-100 cursor-pointer bg-white"
+            >
+              {time}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default TimeDropdown;
diff --git a/components/MyActivity/Register/TimeSlot.tsx b/components/MyActivity/Register/TimeSlot.tsx
new file mode 100644
index 0000000..18101d7
--- /dev/null
+++ b/components/MyActivity/Register/TimeSlot.tsx
@@ -0,0 +1,82 @@
+import { MinusButton, PlusButton } from '@/components/Button/Button';
+import DateInput from './DateInput';
+import TimeDropdown from './TimeDropdown';
+import { TimeSlotGroupProps } from './TimeSlot.types';
+import { useState } from 'react';
+
+function TimeSlotGroup({
+  isDefault = false,
+  handleClickPlus = () => {},
+  handleClickMinus = (id: number) => {},
+  id = -1,
+}: TimeSlotGroupProps) {
+  return (
+    <div className="flex gap-[20px]">
+      <DateInput />
+      <div className="flex gap-[12px] items-center">
+        <TimeDropdown />
+        <p className="text-[20px] font-[700]">~</p>
+        <TimeDropdown />
+      </div>
+      {isDefault ? (
+        <PlusButton onClick={handleClickPlus} />
+      ) : (
+        <MinusButton
+          onClick={() => {
+            handleClickMinus(id);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function TimeSlot() {
+  const [timeSlots, setTimeSlots] = useState<{ id: number }[]>([]);
+
+  const handleClickPlus = () => {
+    const newTimeSlot = {
+      id: Date.now(),
+    };
+    setTimeSlots((prevTimeSlots) => [...prevTimeSlots, newTimeSlot]);
+  };
+  const handleClickMinus = (id: number) => {
+    setTimeSlots((prevTimeSlots) =>
+      prevTimeSlots.filter((timeSlot) => timeSlot.id !== id)
+    );
+  };
+
+  return (
+    <div>
+      <label className="text-[24px] font-[700] block mb-[24px] text-var-black">
+        예약 가능한 시간대
+      </label>
+      <div className="flex gap-[20px]">
+        <label className="w-[374px] text-[20px] font-[500] block mb-[10px] text-var-gray8">
+          날짜
+        </label>
+        <label className="w-[158px] text-[20px] font-[500] block mb-[10px] text-var-gray8">
+          시작 시간
+        </label>
+        <label className="w-[140px] text-[20px] font-[500] block mb-[10px] text-var-gray8">
+          종료 시간
+        </label>
+      </div>
+      <TimeSlotGroup isDefault handleClickPlus={handleClickPlus} />
+      <hr className="mt-[20px] mb-[20px]" />
+      <div className="space-y-[20px]">
+        {timeSlots.map((timeSlot) => (
+          <TimeSlotGroup
+            key={timeSlot.id}
+            id={timeSlot.id}
+            handleClickMinus={() => {
+              handleClickMinus(timeSlot.id);
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default TimeSlot;
diff --git a/components/MyActivity/Register/TimeSlot.types.ts b/components/MyActivity/Register/TimeSlot.types.ts
new file mode 100644
index 0000000..ff710a3
--- /dev/null
+++ b/components/MyActivity/Register/TimeSlot.types.ts
@@ -0,0 +1,6 @@
+export interface TimeSlotGroupProps {
+  isDefault?: boolean;
+  handleClickPlus?: () => void;
+  handleClickMinus?: (id: number) => void;
+  id?: number;
+}
diff --git a/components/MyActivity/Register/UploadImage.tsx b/components/MyActivity/Register/UploadImage.tsx
new file mode 100644
index 0000000..567efc9
--- /dev/null
+++ b/components/MyActivity/Register/UploadImage.tsx
@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import {
+  CircleCloseButton,
+  ImageUploadButton,
+} from '@/components/Button/Button';
+import Image from 'next/image';
+import { UploadImageProps } from './UploadImage.types';
+
+function UploadImage({
+  label,
+  maxImages,
+  singleImage = false,
+}: UploadImageProps) {
+  const [selectedImages, setSelectedImages] = useState<File[]>([]);
+  const [keys, setKeys] = useState<number[]>([]);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      if (singleImage) {
+        setSelectedImages([file]);
+        setKeys([Date.now()]);
+      } else if (selectedImages.length < maxImages) {
+        setSelectedImages([...selectedImages, file]);
+        setKeys([...keys, Date.now()]);
+      }
+    }
+  };
+
+  const handleRemoveFile = (index: number) => {
+    const newImages = [...selectedImages];
+    newImages.splice(index, 1);
+    setSelectedImages(newImages);
+
+    const newKeys = [...keys];
+    newKeys.splice(index, 1);
+    setKeys(newKeys);
+  };
+
+  return (
+    <div>
+      <label className="text-[24px] font-[700] text-var-black block mb-[24px]">
+        {label}
+      </label>
+
+      <div
+        className={`grid ${singleImage ? 'grid-rows-1 grid-cols-4' : 'grid-rows-2 grid-cols-4 '} gap-[24px]`}
+      >
+        <div>
+          <label
+            htmlFor={`upload-${label}`}
+            className={`cursor-pointer ${selectedImages.length === maxImages ? 'pointer-events-none' : ''}`}
+          >
+            <ImageUploadButton />
+          </label>
+          <input
+            type="file"
+            id={`upload-${label}`}
+            className="hidden"
+            accept="image/*"
+            onChange={handleFileChange}
+          />
+        </div>
+        {selectedImages.map((image, index) => (
+          <div key={keys[index]} className="relative w-[180px] h-[180px]">
+            <Image
+              src={URL.createObjectURL(image)}
+              alt={`상세 이미지 ${index + 1}`}
+              width={180}
+              height={180}
+              className="w-[180px] h-[180px] object-cover rounded-[24px]"
+            />
+            <div className="absolute -top-[20px] -right-[20px]">
+              <CircleCloseButton onClick={() => handleRemoveFile(index)} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function UploadBannerImage() {
+  return <UploadImage label="배너 이미지" maxImages={1} singleImage />;
+}
+
+export function UploadDetailImage() {
+  return <UploadImage label="소개 이미지" maxImages={4} singleImage={false} />;
+}
diff --git a/components/MyActivity/Register/UploadImage.types.tsx b/components/MyActivity/Register/UploadImage.types.tsx
new file mode 100644
index 0000000..c604dbf
--- /dev/null
+++ b/components/MyActivity/Register/UploadImage.types.tsx
@@ -0,0 +1,5 @@
+export interface UploadImageProps {
+  label: string;
+  maxImages: number;
+  singleImage?: boolean;
+}
diff --git a/components/MyPage/MyPageInput.tsx b/components/MyPage/MyPageInput.tsx
deleted file mode 100644
index d76c0e5..0000000
--- a/components/MyPage/MyPageInput.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { FieldValues, useForm } from 'react-hook-form';
-import { PrimaryButton } from '../Button/Button';
-import InputBox from '../InputBox/InputBox';
-import { validation } from './validation';
-import { useQuery } from '@tanstack/react-query';
-import { useEffect } from 'react';
-import { apiMyInfo } from '@/pages/api/users/apiUsers';
-import useEditMyInfo from '@/hooks/useEditMyInfo';
-
-export default function MyPageInput() {
-  const {
-    register,
-    handleSubmit,
-    getValues,
-    setValue,
-    formState: { errors },
-  } = useForm<FieldValues>({ mode: 'onChange' });
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['myInfo'],
-    queryFn: apiMyInfo,
-  });
-  const { postMyInfoMutation } = useEditMyInfo();
-
-  const onSubmit = (data: FieldValues) => {
-    const { nickname, password, passwordCheck } = data;
-    if (password === passwordCheck) {
-      const newPassword = password;
-      postMyInfoMutation.mutate({ nickname, newPassword });
-    }
-  };
-
-  useEffect(() => {
-    if (data) {
-      setValue('nickname', data.nickname);
-      setValue('email', data.email);
-    }
-  }, [data, setValue]);
-
-  const isAllFieldsValid = () => {
-    const isNotError =
-      !errors.email &&
-      !errors.nickname &&
-      !errors.password &&
-      !errors.passwordCheck;
-    const { email, nickname, password, passwordCheck } = getValues();
-    const isFormFilled = !!email && !!nickname && !!password && !!passwordCheck;
-
-    return isFormFilled && isNotError;
-  };
-
-  if (isLoading) return <div>Loading...</div>;
-  if (isError) return <div>데이터를 불러오는데 실패 했습니다.</div>;
-
-  return (
-    <div className="flex flex-col w-[792px] h-[564px] t:w-[429px] t:h-[556px] m:w-full m:h-[492px] m:pb-[210px]">
-      <form className="flex flex-col gap-[24px] t:gap-[16px]">
-        <div className="flex justify-between">
-          <p className="font-bold text-[32px]">내 정보</p>
-          <PrimaryButton
-            style={isAllFieldsValid() ? 'dark' : 'disabled'}
-            size="small"
-            onClick={handleSubmit(onSubmit)}
-            disabled={!isAllFieldsValid()}
-          >
-            저장하기
-          </PrimaryButton>
-        </div>
-        <div className="flex flex-col gap-[32px]">
-          <div>
-            <InputBox
-              label="닉네임"
-              placeholder=""
-              name="nickname"
-              validation={validation.nickName}
-              register={register}
-              errors={errors}
-            />
-          </div>
-          <div>
-            <InputBox
-              label="이메일"
-              placeholder=""
-              name="email"
-              register={register}
-              errors={errors}
-              readOnly
-            />
-          </div>
-          <div>
-            <InputBox
-              label="비밀번호"
-              placeholder="8자 이상 입력해 주세요"
-              name="password"
-              validation={validation.password}
-              register={register}
-              errors={errors}
-            />
-          </div>
-          <div>
-            <InputBox
-              label="비밀번호 재입력"
-              placeholder="비밀번호를 한번 더 입력해 주세요"
-              name="passwordCheck"
-              validation={{
-                ...validation.passwordCheck,
-                validate: (value: string) =>
-                  value === getValues().password ||
-                  '비밀번호가 일치하지 않습니다.',
-              }}
-              register={register}
-              errors={errors}
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-  );
-}
diff --git a/components/MyPageInput/MyPageInput.tsx b/components/MyPageInput/MyPageInput.tsx
new file mode 100644
index 0000000..6106c04
--- /dev/null
+++ b/components/MyPageInput/MyPageInput.tsx
@@ -0,0 +1,194 @@
+import { FieldValues, useForm } from 'react-hook-form';
+import { PrimaryButton } from '../Button/Button';
+import InputBox from '../InputBox/InputBox';
+import { validation } from './validation';
+import hamburgerIcon from '@/public/icon/hamburger_icon.svg';
+import { useEffect, useState } from 'react';
+import useEditMyInfo from '@/hooks/useEditMyInfo';
+import { useUserData } from '@/hooks/useUserData';
+import Image from 'next/image';
+import useUploadProfile from '@/hooks/useUploadProfile';
+import { ProfileImageResponse } from '@/pages/api/users/apiUser.types';
+import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
+import editProfileIcon from '@/public/image/btn.png';
+import { useSideNavigation } from '@/hooks/useSideNavigation';
+
+export default function MyPageInput() {
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useForm<FieldValues>({ mode: 'onChange' });
+
+  const { openSideNavigation } = useSideNavigation();
+
+  const userData = useUserData();
+  const { postProfileImgMutation } = useUploadProfile();
+  const { postMyInfoMutation } = useEditMyInfo();
+  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(
+    userData?.profileImageUrl
+  );
+
+  const onSubmit = (data: FieldValues) => {
+    const { nickname, password, passwordCheck } = data;
+    if (password === passwordCheck) {
+      const newPassword = password;
+      postMyInfoMutation.mutate({ nickname, newPassword });
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      postProfileImgMutation.mutate(formData, {
+        onSuccess: (response: ProfileImageResponse) => {
+          setProfileImageUrl(response.profileImageUrl);
+          postMyInfoMutation.mutate({
+            profileImageUrl: response.profileImageUrl,
+          });
+        },
+        onError: (error) => {
+          console.error('데이터를 불러오는데 실패했습니다.', error);
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (userData?.profileImageUrl) {
+      setProfileImageUrl(userData.profileImageUrl);
+    }
+  }, [userData?.profileImageUrl]);
+
+  useEffect(() => {
+    if (userData) {
+      setValue('nickname', userData.nickname);
+      setValue('email', userData.email);
+    }
+  }, [userData, setValue]);
+
+  const isAllFieldsValid = () => {
+    const isNotError =
+      !errors.email &&
+      !errors.nickname &&
+      !errors.password &&
+      !errors.passwordCheck;
+    const { email, nickname, password, passwordCheck } = getValues();
+    const isFormFilled = !!email && !!nickname && !!password && !!passwordCheck;
+
+    return isFormFilled && isNotError;
+  };
+
+  return (
+    <div className="flex flex-col w-[792px] h-[564px] t:w-[429px] t:h-[556px] m:w-full m:h-full m:pb-[150px] m:px-[16px] ">
+      <form className="flex flex-col gap-[24px] t:gap-[16px]">
+        <div className="flex m:gap-[15px] p:justify-between t:justify-between">
+          <Image
+            src={hamburgerIcon}
+            alt="햄버거 메뉴 아이콘"
+            className="p:hidden t:hidden"
+            onClick={() => openSideNavigation()}
+          />
+          <p className="font-bold text-[32px]">내 정보</p>
+          <div className="flex items-center m:hidden">
+            <PrimaryButton
+              style={isAllFieldsValid() ? 'dark' : 'disabled'}
+              size="small"
+              onClick={handleSubmit(onSubmit)}
+              disabled={!isAllFieldsValid()}
+            >
+              저장하기
+            </PrimaryButton>
+          </div>
+        </div>
+        <div className="w-fill flex justify-center p:hidden t:hidden">
+          <label htmlFor="upload-image" className="cursor-pointer">
+            <div className="w-[160px] relative">
+              <Image
+                src={profileImageUrl ? profileImageUrl : profileThumbnail}
+                width={160}
+                height={160}
+                className="rounded-full w-[160px] h-[160px] "
+                alt="유저 프로필 사진"
+              />
+              <Image
+                src={editProfileIcon}
+                className="w-[44px] h-[44px] absolute bottom-[-5px] right-[10px]  "
+                alt="유저 프로필 사진 수정"
+              />
+              <input
+                id="upload-image"
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handleFileChange}
+              />
+            </div>
+          </label>
+        </div>
+        <div className="flex flex-col gap-[25px]">
+          <div>
+            <InputBox
+              label="닉네임"
+              placeholder=""
+              name="nickname"
+              validation={validation.nickName}
+              register={register}
+              errors={errors}
+            />
+          </div>
+          <div>
+            <InputBox
+              label="이메일"
+              placeholder=""
+              name="email"
+              register={register}
+              errors={errors}
+              readOnly
+            />
+          </div>
+          <div>
+            <InputBox
+              label="비밀번호"
+              placeholder="8자 이상 입력해 주세요"
+              name="password"
+              validation={validation.password}
+              register={register}
+              errors={errors}
+            />
+          </div>
+          <div>
+            <InputBox
+              label="비밀번호 재입력"
+              placeholder="비밀번호를 한번 더 입력해 주세요"
+              name="passwordCheck"
+              validation={{
+                ...validation.passwordCheck,
+                validate: (value: string) =>
+                  value === getValues().password ||
+                  '비밀번호가 일치하지 않습니다.',
+              }}
+              register={register}
+              errors={errors}
+            />
+          </div>
+          <div className="mt-[30px] flex items-center p:hidden t:hidden">
+            <PrimaryButton
+              style={isAllFieldsValid() ? 'dark' : 'disabled'}
+              size="large"
+              onClick={handleSubmit(onSubmit)}
+              disabled={!isAllFieldsValid()}
+            >
+              저장하기
+            </PrimaryButton>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/components/MyPage/validation.ts b/components/MyPageInput/validation.ts
similarity index 100%
rename from components/MyPage/validation.ts
rename to components/MyPageInput/validation.ts
diff --git a/components/NavigationDropdown/NavigationDropdown.tsx b/components/NavigationDropdown/NavigationDropdown.tsx
new file mode 100644
index 0000000..87de616
--- /dev/null
+++ b/components/NavigationDropdown/NavigationDropdown.tsx
@@ -0,0 +1,27 @@
+import useLogout from '@/hooks/useLogout';
+import Link from 'next/link';
+
+export default function NavigationDropdown() {
+  const logout = useLogout();
+
+  return (
+    <div
+      className="z-30 absolute bottom-[-90px] flex w-[90px] animate-slideDown flex-col justify-center overflow-hidden rounded-md bg-var-gray1 border-var-gray2 border-solid border  
+       shadow-lg "
+    >
+      <Link
+        href="/mypage"
+        className="block w-full rounded-[0.4rem] px-[16px] py-[10px] text-left text-[14px] hover:bg-var-green1"
+      >
+        내 정보
+      </Link>
+      <button
+        type="button"
+        className="border-t-block w-full rounded-[0.4rem] px-[16px] py-[10px] text-left text-[14px] hover:bg-var-green1"
+        onClick={logout}
+      >
+        로그아웃
+      </button>
+    </div>
+  );
+}
diff --git a/components/NavigationDropdown/NotificationDropdown.tsx b/components/NavigationDropdown/NotificationDropdown.tsx
new file mode 100644
index 0000000..09aeda1
--- /dev/null
+++ b/components/NavigationDropdown/NotificationDropdown.tsx
@@ -0,0 +1,80 @@
+import { useRouter } from 'next/router';
+import { CloseButton } from '../Button/Button';
+import { NotificationDropdownProps } from './NotificationDropdown.types';
+import { useEffect, useState } from 'react';
+
+export default function NotificationDropdown({
+  data,
+  onClick,
+}: NotificationDropdownProps) {
+  const router = useRouter();
+  const [notifications, setNotifications] = useState<any[]>([]);
+
+  const handleDelete = (id: number) => {
+    // 삭제 로직 추가 예정
+    const updatedNotifications = notifications.filter(
+      (notification) => notification.id !== id
+    );
+    setNotifications(updatedNotifications);
+  };
+
+  useEffect(() => {
+    if (data && data.notifications) {
+      setNotifications(data.notifications.slice(0, 2));
+    }
+  }, [data]);
+
+  const getTimeAgoString = (updatedAt: string): string => {
+    const updatedAtUTC = Date.parse(updatedAt);
+    const now = new Date();
+    const diff = now.getTime() - updatedAtUTC;
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (days > 0) {
+      return `${days}일 전`;
+    } else if (hours > 0) {
+      return `${hours}시간 전`;
+    } else if (minutes > 0) {
+      return `${minutes}분 전`;
+    } else {
+      return `방금 전`;
+    }
+  };
+
+  return (
+    <div className="z-30 px-[20px] pt-[15px] pb-[24px] absolute top-[70px] right-[400px] t:right-[100px] w-[368px] h-[340px] animate-slideDown flex-col justify-center overflow-hidden rounded-md m:w-full m:h-full m:right-0 m:top-0 bg-var-green1 ">
+      <div className="flex text-[20px] font-bold mb-[20px] justify-between">
+        알림 {data ? `${data.totalCount}` : '0'}개
+        <CloseButton onClick={onClick} />
+      </div>
+      {data && data.notifications.length ? (
+        <div className="flex flex-col gap-[8px]">
+          {notifications.map((notification) => (
+            <div
+              key={notification.id}
+              className="flex-col  items-center px-[12px] py-[16px] justify-between rounded-[5px] border-b w-[328px] h-[120px] m:w-[335px] m:h-[105px] bg-white border-gray-200 "
+            >
+              <div className="flex justify-between">
+                승인 아이콘
+                <button onClick={() => handleDelete(notification.id)}>
+                  삭제
+                </button>
+              </div>
+              <div className="w-[298px] h-[44px]">
+                <p>{notification.content}</p>
+              </div>
+              <p>{getTimeAgoString(notification.updatedAt)}</p>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="flex justify-center items-center h-[245px] bg-white py-[24px] rounded-[5px] m:bg-var-green1 m:px-[20px] m:py-[40px]">
+          새로운 알림이 없습니다.
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/NavigationDropdown/NotificationDropdown.types.ts b/components/NavigationDropdown/NotificationDropdown.types.ts
new file mode 100644
index 0000000..b299edb
--- /dev/null
+++ b/components/NavigationDropdown/NotificationDropdown.types.ts
@@ -0,0 +1,20 @@
+export interface NotificationDropdownProps {
+  data: MyNotificationListResponse | undefined;
+  onClick: () => void;
+}
+
+export interface MyNotificationListResponse {
+  cursorId: number;
+  notifications: [
+    {
+      id: number;
+      teamId: string;
+      userId: number;
+      content: string;
+      createdAt: string;
+      updatedAt: string;
+      deletedAt: string;
+    },
+  ];
+  totalCount: number;
+}
diff --git a/components/PriceFilterBtn/PriceFilterBtn.tsx b/components/PriceFilterBtn/PriceFilterBtn.tsx
index b5f4a1f..677d0f8 100644
--- a/components/PriceFilterBtn/PriceFilterBtn.tsx
+++ b/components/PriceFilterBtn/PriceFilterBtn.tsx
@@ -1,22 +1,35 @@
 import Image from 'next/image';
 import filterIcon from '@/public/icon/filter_arrowdown.svg';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import useClickOutside from '@/hooks/useClickOutside';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { mainPageState } from '@/states/mainPageState';
 
 export default function PriceFilterBtn() {
   const [showMenuList, setShowMenuList] = useState(false);
-  const dropDownElement = useClickOutside<HTMLButtonElement>(() =>
+  const dropDownElement = useClickOutside<HTMLDivElement>(() =>
     setShowMenuList(false)
   );
+  const [selectedSort , setSelectedSort] = useState("정렬");
+  const [MainPageState, setMainPageState] = useRecoilState(mainPageState);
+  const {selectedSorted: selectedPriceSorted} = useRecoilValue(mainPageState);
+  const changeSelectedSort = (sorted : string, sort : string): void => {
+    setMainPageState((prevState) => ({
+      ...prevState,
+      selectedSorted : sorted,
+    }));
+    setShowMenuList(false);
+    setSelectedSort(sort);
+    console.log(selectedPriceSorted)
+  }
 
   return (
-    <div className='relative'>
+    <div className="relative" ref={dropDownElement}>
       <button
-        className="flex justify-between items-center w-[127px] h-[53px] border-solid border-[1px] rounded-[15px] t:w-[120px] m:w-[90px] m:h-[41px] border-var-green2 px-[20px] bg-white"
-        ref={dropDownElement}
+        className="flex justify-between items-center w-[147px] h-[53px] border-solid border-[1px] rounded-[15px] t:w-[120px] m:w-[90px] m:h-[41px] border-var-green2 px-[20px] bg-white"
         onClick={() => setShowMenuList((prev) => !prev)}
       >
-        <p className="text-[18px] text-var-green2">가격</p>
+        <p className="text-[18px] text-var-green2">{selectedSort}</p>
         <Image
           src={filterIcon}
           alt="가격 필터 화살표 아이콘"
@@ -26,11 +39,11 @@ export default function PriceFilterBtn() {
 
       {showMenuList && (
         <div className="absolute">
-          <div className="relative left-0 bottom-[-8px] z-50 flex w-[127px] t:w-[120px] m:w-[90px] flex-col shadow-lg rounded-[8px] animate-slideDown">
-            <button className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 w-[127px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-t-[8px] bg-white hover:bg-var-gray2 ">
+          <div className="relative left-0 bottom-[-8px] z-50 flex w-[147px] t:w-[120px] m:w-[90px] flex-col shadow-lg rounded-[8px] animate-slideDown">
+            <button className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 w-[147px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-t-[8px] bg-white hover:bg-var-gray2" onClick={() => changeSelectedSort("price_asc", "가격 낮은 순")}>
               가격이 낮은 순
             </button>
-            <button className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 border-t-0  w-[127px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-b-[8px] bg-white hover:bg-var-gray2">
+            <button className="flex justify-center items-center text-[18px] m:text-[14px] border border-solid border-var-gray3 border-t-0 w-[147px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] rounded-b-[8px] bg-white hover:bg-var-gray2" onClick={() => changeSelectedSort("price_desc", "가격 높은 순")}>
               가격이 높은 순
             </button>
           </div>
diff --git a/components/ReservationFilter/ReservationFilter.tsx b/components/ReservationFilter/ReservationFilter.tsx
new file mode 100644
index 0000000..b5ab8ba
--- /dev/null
+++ b/components/ReservationFilter/ReservationFilter.tsx
@@ -0,0 +1,72 @@
+import Image from 'next/image';
+import filterIcon from '@/public/icon/filter_arrowdown.svg';
+import React, { useState } from 'react';
+import useClickOutside from '@/hooks/useClickOutside';
+import { ReservationFilterProps, statusType } from './myReservationTypes.types';
+import {
+  Status,
+  statusTitles,
+} from '../ReservationListCard/reservationStatusInfo';
+
+export default function ReservationFilter({
+  setFilterOption,
+  filterOption,
+}: ReservationFilterProps) {
+  const [showMenuList, setShowMenuList] = useState(false);
+
+  const dropDownElement = useClickOutside<HTMLDivElement>(() =>
+    setShowMenuList(false)
+  );
+
+  const handleOnClick = (status: statusType) => {
+    setFilterOption(status);
+    setShowMenuList(false);
+  };
+
+  const handleOnClickAll = () => {
+    setShowMenuList(false);
+    setFilterOption(undefined);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        className="flex justify-between items-center w-[160px] h-[53px] border-solid border-[1px] rounded-[15px] t:w-[120px] m:w-[90px] m:h-[41px] border-var-green2 px-[20px] bg-white"
+        onClick={() => setShowMenuList((prev) => !prev)}
+      >
+        <p className="text-[18px] text-var-green2">
+          {filterOption ? statusTitles[filterOption] : '필터'}
+        </p>
+        <Image
+          src={filterIcon}
+          alt="가격 필터 화살표 아이콘"
+          className={showMenuList ? 'rotate-180' : ''}
+        />
+      </button>
+
+      {showMenuList && (
+        <div className="absolute" ref={dropDownElement}>
+          <div className="relative left-0 bottom-[-8px] z-50 bg-white flex w-[160px] t:w-[120px] m:w-[90px] flex-col rounded-lg animate-slideDown overflow-hidden border border-solid border-var-gray3">
+            {filterOption && (
+              <button className={buttonStyle} onClick={handleOnClickAll}>
+                ALL
+              </button>
+            )}
+            {Status.map((status: statusType, index) => (
+              <button
+                className={buttonStyle}
+                key={index}
+                onClick={() => handleOnClick(status)}
+              >
+                {statusTitles[status]}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const buttonStyle: string =
+  'flex justify-center items-center border-b border-solid text-[18px] m:text-[14px] t:w-[120px] m:w-[90px] h-[58px] m:h-[41px] bg-white hover:bg-var-gray2';
diff --git a/components/ReservationFilter/myReservationTypes.types.ts b/components/ReservationFilter/myReservationTypes.types.ts
new file mode 100644
index 0000000..582053a
--- /dev/null
+++ b/components/ReservationFilter/myReservationTypes.types.ts
@@ -0,0 +1,35 @@
+export type statusType =
+  | 'pending'
+  | 'confirmed'
+  | 'declined'
+  | 'canceled'
+  | 'completed';
+
+export interface ReservationFilterProps {
+  setFilterOption: React.Dispatch<React.SetStateAction<statusType | undefined>>;
+  filterOption: statusType | undefined;
+}
+export interface ReservationCardProps {
+  reservationData: MyReservationProps;
+}
+
+export interface MyReservationProps {
+  id: number;
+  teamId: string;
+  userId: number;
+  activity: {
+    bannerImageUrl: string;
+    title: string;
+    id: number;
+  };
+  scheduleId: number;
+  status: 'pending' | 'canceled' | 'declined' | 'completed' | 'confirmed';
+  reviewSubmitted: boolean;
+  totalPrice: number;
+  headCount: number;
+  date: string;
+  startTime: string;
+  endTime: string;
+  createdAt: string;
+  updatedAt: string;
+}
diff --git a/components/ReservationListCard/ReservationListCard.tsx b/components/ReservationListCard/ReservationListCard.tsx
new file mode 100644
index 0000000..b30b6cf
--- /dev/null
+++ b/components/ReservationListCard/ReservationListCard.tsx
@@ -0,0 +1,111 @@
+import Image from 'next/image';
+import { PrimaryButton } from '../Button/Button';
+import { statusStyle, statusTitles } from './reservationStatusInfo';
+import { useModal } from '@/hooks/useModal';
+import Review from '../Review/Review';
+import { ReservationCardProps } from '../ReservationFilter/myReservationTypes.types';
+import { usePopup } from '@/hooks/usePopup';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiEditMyReservation } from '@/pages/api/myReservations/apiMyReservations';
+import { useUserData } from '@/hooks/useUserData';
+import { formatCurrency } from '@/utils/formatCurrency';
+import Link from 'next/link';
+
+const ReservationListCard = ({ reservationData }: ReservationCardProps) => {
+  const { openModal, closeModal } = useModal();
+
+  const handleOpenReviewModal = () => {
+    openModal({
+      title: '후기 작성',
+      hasButton: false,
+      content: <Review reservation={reservationData} closeModal={closeModal} />,
+    });
+  };
+
+  const { openPopup } = usePopup();
+  const userData = useUserData();
+  const queryClient = useQueryClient();
+
+  const EditMyReservationMutation = useMutation({
+    mutationFn: apiEditMyReservation,
+    onSuccess: () =>
+      queryClient.invalidateQueries({
+        queryKey: ['myReservationList', userData.id],
+      }),
+    onError: (error) => {
+      console.error('Error editing reservation:', error);
+    },
+  });
+
+  const handleCancelReservation = () => {
+    openPopup({
+      popupType: 'select',
+      content: '예약을 취소하시겠어요?',
+      btnName: ['아니오', '취소하기'],
+      callBackFnc: () =>
+        EditMyReservationMutation.mutate({ reservationId: reservationData.id }),
+    });
+  };
+
+  return (
+    <div className="h-[212px] relative flex rounded-3xl shadow-card overflow-hidden">
+      <div className="min-w-[204px] h-[204px] relative">
+        <Link
+          href={`/activity-details/${reservationData.activity.id}`}
+          className="text-[20px] font-bold mt-[8px] hover:underline"
+        >
+          <Image
+            src={reservationData.activity.bannerImageUrl}
+            alt="액티비티 사진"
+            layout="fill"
+            objectFit="cover"
+            className="hover:scale-110"
+          />
+        </Link>
+      </div>
+      <div className="w-full p-[24px]">
+        <p
+          className={`text-[16px] font-bold ${statusStyle[reservationData.status]}`}
+        >
+          {statusTitles[reservationData.status]}
+        </p>
+        <Link
+          href={`/activity-details/${reservationData.activity.id}`}
+          className="text-[20px] font-bold mt-[8px] hover:underline"
+        >
+          {reservationData.activity.title}
+        </Link>
+        <p className="mt-[12px] text-[18px]">
+          {reservationData.date}&nbsp;&nbsp;·&nbsp;&nbsp;
+          {reservationData.startTime}~{reservationData.endTime}
+          &nbsp;&nbsp;·&nbsp;&nbsp;{reservationData.headCount}명
+        </p>
+        <div className="w-full flex justify-between mt-[16px] items-center">
+          <p className="font-medium text-[24px]">
+            ₩{formatCurrency(reservationData.totalPrice)}
+          </p>
+          {reservationData.status === 'pending' && (
+            <PrimaryButton
+              size="medium"
+              style="bright"
+              onClick={handleCancelReservation}
+            >
+              예약 취소
+            </PrimaryButton>
+          )}
+          {reservationData.status === 'completed' && (
+            <PrimaryButton
+              size="medium"
+              style="dark"
+              onClick={handleOpenReviewModal}
+            >
+              후기 작성
+            </PrimaryButton>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReservationListCard;
diff --git a/components/ReservationListCard/reservationStatusInfo.ts b/components/ReservationListCard/reservationStatusInfo.ts
new file mode 100644
index 0000000..5175f88
--- /dev/null
+++ b/components/ReservationListCard/reservationStatusInfo.ts
@@ -0,0 +1,25 @@
+import { statusType } from '../ReservationFilter/myReservationTypes.types';
+
+export const statusTitles = {
+  pending: '예약 신청',
+  canceled: '예약 취소',
+  declined: '예약 거절',
+  completed: '체험 완료',
+  confirmed: '예약 승인',
+};
+
+export const statusStyle = {
+  pending: 'text-var-blue2',
+  canceled: 'text-var-gray7',
+  declined: 'text-var-red2',
+  completed: 'text-var-gray7',
+  confirmed: 'text-var-orange2',
+};
+
+export const Status: statusType[] = [
+  'pending',
+  'canceled',
+  'declined',
+  'completed',
+  'confirmed',
+];
diff --git a/components/Review/Rating.tsx b/components/Review/Rating.tsx
new file mode 100644
index 0000000..8146e98
--- /dev/null
+++ b/components/Review/Rating.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { RatingProps } from './Review.types';
+
+export default function Rating({ currentRating, onRatingChange }: RatingProps) {
+  const [rating, setRating] = useState(currentRating);
+  const [hoverRating, setHoverRating] = useState<number>(1);
+  const totalStars = 5;
+
+  useEffect(() => {
+    setRating(currentRating);
+  }, [currentRating]);
+
+  const handleMouseEnter = (index: number) => {
+    setHoverRating(index);
+  };
+
+  const handleMouseLeave = () => {
+    setHoverRating(0);
+  };
+
+  const handleClick = (index: number) => {
+    setRating(index);
+    onRatingChange(index);
+  };
+
+  return (
+    <div className="flex gap-1 w-full h-[100px] items-center justify-center">
+      {Array.from({ length: totalStars }, (_, index) => (
+        <Image
+          key={index}
+          src={
+            index < (hoverRating || rating)
+              ? '/icon/icon_star_on.svg'
+              : '/icon/icon_star_off.svg'
+          }
+          width={50}
+          height={50}
+          alt={index < (hoverRating || rating) ? '채워진 별점' : '빈 별점'}
+          onMouseEnter={() => handleMouseEnter(index + 1)}
+          onMouseLeave={handleMouseLeave}
+          onClick={() => handleClick(index + 1)}
+          className="cursor-pointer"
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/components/Review/Review.tsx b/components/Review/Review.tsx
new file mode 100644
index 0000000..c0b58d0
--- /dev/null
+++ b/components/Review/Review.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { PrimaryButton } from '@/components/Button/Button';
+import { formatCurrency } from '@/utils/formatCurrency';
+import Rating from './Rating';
+import { useMutation } from '@tanstack/react-query';
+import {
+  ReservationId,
+  ReviewBody,
+} from '@/pages/api/myReservations/apiMyReservations.types';
+import { apiReview } from '@/pages/api/myReservations/apiMyReservations';
+import { ReviewProps } from './Review.types';
+
+export default function Review({ reservation, closeModal }: ReviewProps) {
+  const [reviewContent, setReviewContent] = useState<string>('');
+  const [rating, setRating] = useState<number>(1);
+
+  const mutation = useMutation({
+    mutationFn: (data: { id: ReservationId; body: ReviewBody }) =>
+      apiReview(data.id, data.body),
+    onSuccess: (result) => {
+      console.log('후기 작성 완료: ', result);
+      closeModal();
+    },
+    onError: (error) => {
+      console.error('후기 작성 에러: ', error);
+    },
+  });
+
+  const handleReviewSubmit = async () => {
+    const body: ReviewBody = {
+      rating,
+      content: reviewContent,
+    };
+    mutation.mutate({
+      id: { reservationId: reservation.id },
+      body,
+    });
+  };
+
+  return (
+    <>
+      <div className="flex gap-6 m:gap-4">
+        <Image
+          src={reservation.activity.bannerImageUrl}
+          width={125}
+          height={125}
+          alt="체험 사진"
+          className="object-cover rounded-xl m:w-[100px] m:h-[100px]"
+        />
+        <div className="text-nomad-black flex flex-col justify-between">
+          <p className="font-bold text-xl m:text-base max-w-[290px] m:max-w-[220px] overflow-hidden whitespace-nowrap text-ellipsis">
+            {reservation.activity.title}
+          </p>
+          <div className="flex gap-2 m:text-sm m:gap-1">
+            <p>{reservation.date}</p>
+            <p>·</p>
+            <p>
+              {reservation.startTime} - {reservation.endTime}
+            </p>
+            <p>·</p>
+            <p>{reservation.headCount}명</p>
+          </div>
+          <div className="border border-solid border-var-gray2" />
+          <p className="font-bold text-[32px] m:text-xl">
+            ₩ {formatCurrency(reservation.totalPrice)}
+          </p>
+        </div>
+      </div>
+      <Rating
+        onRatingChange={(rating) => setRating(rating)}
+        currentRating={rating}
+      />
+      <div className="w-full h-[200px] m:h-1/2 p-4 rounded border border-solid border-var-gray2">
+        <textarea
+          className="w-full h-full border-none outline-none text-base resize-none scrollbar-hide"
+          placeholder="후기를 작성해 주세요."
+          value={reviewContent}
+          onChange={(e) => setReviewContent(e.target.value)}
+        />
+      </div>
+      <div className="mt-5">
+        <PrimaryButton size="large" style="dark" onClick={handleReviewSubmit}>
+          작성하기
+        </PrimaryButton>
+      </div>
+    </>
+  );
+}
diff --git a/components/Review/Review.types.ts b/components/Review/Review.types.ts
new file mode 100644
index 0000000..ef80868
--- /dev/null
+++ b/components/Review/Review.types.ts
@@ -0,0 +1,11 @@
+import { MyReservationProps } from '../ReservationFilter/myReservationTypes.types';
+
+export interface RatingProps {
+  currentRating: number;
+  onRatingChange: (newRating: number) => void;
+}
+
+export interface ReviewProps {
+  reservation: MyReservationProps;
+  closeModal: () => void;
+}
diff --git a/components/SideNavigation/SideNavigation.tsx b/components/SideNavigation/SideNavigation.tsx
index 6016d63..7a57ed1 100644
--- a/components/SideNavigation/SideNavigation.tsx
+++ b/components/SideNavigation/SideNavigation.tsx
@@ -11,16 +11,19 @@ import editProfileIcon from '@/public/image/btn.png';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { routePaths } from './SideNavigation.types';
-import { apiMyInfo } from '@/pages/api/users/apiUsers';
 import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
 import useUploadProfile from '@/hooks/useUploadProfile';
 import useEditMyInfo from '@/hooks/useEditMyInfo';
 import { ProfileImageResponse } from '@/pages/api/users/apiUser.types';
+import { useUserData } from '@/hooks/useUserData';
 
 export default function SidenNavigation() {
   const router = useRouter();
+  const userData = useUserData();
   const [activeButton, setActiveButton] = useState<string | null>(null);
-  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null);
+  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(
+    userData?.profileImageUrl
+  );
   useEffect(() => {
     switch (router.pathname) {
       case '/reservation':
@@ -69,14 +72,10 @@ export default function SidenNavigation() {
   };
 
   useEffect(() => {
-    apiMyInfo()
-      .then((response) => {
-        setProfileImageUrl(response.profileImageUrl);
-      })
-      .catch((error) => {
-        console.error('데이터를 불러오는데 실패하였습니다.:', error);
-      });
-  }, []);
+    if (userData?.profileImageUrl) {
+      setProfileImageUrl(userData.profileImageUrl);
+    }
+  }, [userData?.profileImageUrl]);
 
   const handleBtnClick = (buttonName: string | null) => {
     setActiveButton((prevActiveButton) =>
diff --git a/components/SideNavigation/SideNavigationMobile.tsx b/components/SideNavigation/SideNavigationMobile.tsx
index d9ee40d..61861a3 100644
--- a/components/SideNavigation/SideNavigationMobile.tsx
+++ b/components/SideNavigation/SideNavigationMobile.tsx
@@ -1,28 +1,43 @@
 import Image from 'next/image';
+import calendarIcon from '@/public/icon/calendar_check_outline.svg';
+import settingIcon from '@/public/icon/cog_outline.svg';
+import reservationIcon from '@/public/icon/text_box_check_outline.svg';
+import myAccountIcon from '@/public/icon/account_check_outline.svg';
 import grayCalendarIcon from '@/public/icon/gray-calendar-check-outline.svg';
 import graySettingIcon from '@/public/icon/gray-cog-outline.svg';
 import grayReservationIcon from '@/public/icon/gray-text-box-check-outline.svg';
 import grayMyAccountIcon from '@/public/icon/gray-account-check-outline.svg';
-import editProfileIcon from '@/public/image/btn.png';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { routePaths } from './SideNavigation.types';
-import { apiMyInfo } from '@/pages/api/users/apiUsers';
 import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30hp.png';
-import useUploadProfile from '@/hooks/useUploadProfile';
-import useEditMyInfo from '@/hooks/useEditMyInfo';
-import { ProfileImageResponse } from '@/pages/api/users/apiUser.types';
+import { useUserData } from '@/hooks/useUserData';
+import { useRecoilState } from 'recoil';
+import { sideNavigationState } from '@/states/sideNavigationState';
+import { CloseButton } from '../Button/Button';
 
-interface SidenNavigationMobileProps {
-  onNavigate: (section: string) => void;
-}
-
-export default function SidenNavigationMobile({
-  onNavigate,
-}: SidenNavigationMobileProps) {
+export default function SidenNavigationMobile() {
   const router = useRouter();
-  const [activeSection, setActiveSection] = useState<string | null>(null);
-  const [profileImageUrl, setProfileImageUrl] = useState<string | null>(null);
+  const userData = useUserData();
+  const [isOpen, setIsOpen] = useRecoilState(sideNavigationState);
+  const [activeButton, setActiveButton] = useState<string | null>(null);
+
+  useEffect(() => {
+    switch (router.pathname) {
+      case '/reservation':
+        setActiveButton('reservation');
+        break;
+      case '/setting':
+        setActiveButton('setting');
+        break;
+      case '/calendar':
+        setActiveButton('calendar');
+        break;
+      case '/mypage':
+        setActiveButton('mypage');
+        break;
+    }
+  }, [router.pathname]);
 
   const buttonPaths: routePaths = {
     mypage: '/mypage',
@@ -31,101 +46,111 @@ export default function SidenNavigationMobile({
     calendar: '/calendar',
   };
 
-  const { postProfileImgMutation } = useUploadProfile();
-  const { postMyInfoMutation } = useEditMyInfo();
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const formData = new FormData();
-      formData.append('image', file);
-
-      postProfileImgMutation.mutate(formData, {
-        onSuccess: (response: ProfileImageResponse) => {
-          setProfileImageUrl(response.profileImageUrl);
-          postMyInfoMutation.mutate({
-            profileImageUrl: response.profileImageUrl,
-          });
-        },
-        onError: (error) => {
-          console.error('데이터를 불러오는데 실패했습니다.', error);
-        },
-      });
-    }
+  const handleCloseSideNav = () => {
+    setIsOpen(false);
   };
+  const handleBtnClick = (buttonName: string | null) => {
+    setActiveButton((prevActiveButton) =>
+      prevActiveButton === buttonName ? prevActiveButton : buttonName
+    );
+    setIsOpen(false);
 
-  useEffect(() => {
-    apiMyInfo()
-      .then((response) => {
-        setProfileImageUrl(response.profileImageUrl);
-      })
-      .catch((error) => {
-        console.error('데이터를 불러오는데 실패하였습니다.:', error);
-      });
-  }, []);
-
-  const handleBtnClick = (section: string) => {
-    setActiveSection(section);
-    onNavigate(section);
+    if (buttonName && buttonPaths[buttonName]) {
+      router.push(buttonPaths[buttonName]);
+    }
   };
 
-  const sideNavBtnStyle = `font-bold flex gap-[8px] h-[44px] w-fill items-center pl-[16px] text-[16px] text-var-gray6 `;
+  const sideNavBtnStyle = `font-bold flex gap-[8px] h-[44px] w-fill items-center pl-[16px] text-[16px] `;
 
   return (
-    <div className="w-[344px] h-[432px] p-[24px] flex flex-col rounded-[12px] border border-solid border-var-gray3 justify-center gap-[24px]  ">
-      <div className="w-fill flex justify-center relative">
-        <label htmlFor="upload-image" className="cursor-pointer">
-          <Image
-            src={profileImageUrl ? profileImageUrl : profileThumbnail}
-            width={160}
-            height={160}
-            className="rounded-full w-[160px] h-[160px] "
-            alt="유저 프로필 사진"
-          />
-          <Image
-            src={editProfileIcon}
-            className="w-[44px] h-[44px] absolute bottom-[-5px] right-[75px]"
-            alt="유저 프로필 사진 수정"
-          />
-          <input
-            id="upload-image"
-            type="file"
-            accept="image/*"
-            className="hidden"
-            onChange={handleFileChange}
-          />
-        </label>
-      </div>
-      <div className="flex flex-col gap-[8px]  justify-between">
-        <button
-          className={sideNavBtnStyle}
-          onClick={() => handleBtnClick('mypage')}
-        >
-          <Image src={grayMyAccountIcon} alt="내 정보 아이콘" />
-          <p>내 정보</p>
-        </button>
-        <button
-          className={sideNavBtnStyle}
-          onClick={() => handleBtnClick('reservation')}
-        >
-          <Image src={grayReservationIcon} alt="예약 내역 아이콘" />
-          <p>예약 내역</p>
-        </button>
-        <button
-          className={sideNavBtnStyle}
-          onClick={() => handleBtnClick('setting')}
-        >
-          <Image src={graySettingIcon} alt="내 체험 관리 아이콘" />
-          <p>내 체험 관리</p>
-        </button>
-        <button
-          className={sideNavBtnStyle}
-          onClick={() => handleBtnClick('calendar')}
-        >
-          <Image src={grayCalendarIcon} alt="예약 현황 아이콘" />
-          <p>예약 현황</p>
-        </button>
+    isOpen && (
+      <div className="fixed inset-0 bg-black bg-opacity-60 mt-[70px] overflow-hidden ">
+        <div className="fixed left-0 top-0 z-20 w-4/5 h-full p-[24px] flex flex-col mt-[70px] border border-solid border-var-gray3 gap-[24px] bg-white">
+          <div className="flex justify-end">
+            <CloseButton onClick={handleCloseSideNav} />
+          </div>
+          <div className="flex flex-col items-center gap-[25px]">
+            <Image
+              src={
+                userData.profileImageUrl
+                  ? userData.profileImageUrl
+                  : profileThumbnail
+              }
+              width={160}
+              height={160}
+              className="rounded-full w-[160px] h-[160px] "
+              alt="유저 프로필 사진"
+            />
+            <p className="font-bold text-[24px]">{userData.nickname}</p>
+          </div>
+          <div className="flex flex-col gap-[8px]  justify-between">
+            <button
+              className={`${sideNavBtnStyle} ${
+                activeButton === 'mypage'
+                  ? 'bg-var-green1  rounded-[12px] text-var-black'
+                  : 'text-var-gray6'
+              }`}
+              onClick={() => handleBtnClick('mypage')}
+            >
+              <Image
+                src={
+                  activeButton === 'mypage' ? myAccountIcon : grayMyAccountIcon
+                }
+                alt="내 정보 아이콘"
+              />
+              <p>내 정보</p>
+            </button>
+            <button
+              className={`${sideNavBtnStyle} ${
+                activeButton === 'reservation'
+                  ? 'bg-var-green1 rounded-[12px]  text-var-black'
+                  : 'text-var-gray6'
+              }`}
+              onClick={() => handleBtnClick('reservation')}
+            >
+              <Image
+                src={
+                  activeButton === 'reservation'
+                    ? reservationIcon
+                    : grayReservationIcon
+                }
+                alt="예약 내역 아이콘"
+              />
+              <p>예약 내역</p>
+            </button>
+            <button
+              className={`${sideNavBtnStyle} ${
+                activeButton === 'setting'
+                  ? 'bg-var-green1 rounded-[12px] text-var-black'
+                  : 'text-var-gray6'
+              }`}
+              onClick={() => handleBtnClick('setting')}
+            >
+              <Image
+                src={activeButton === 'setting' ? settingIcon : graySettingIcon}
+                alt="내 체험 관리 아이콘"
+              />
+              <p>내 체험 관리</p>
+            </button>
+            <button
+              className={`${sideNavBtnStyle} ${
+                activeButton === 'calendar'
+                  ? 'bg-var-green1 rounded-[12px] text-var-black'
+                  : 'text-var-gray6'
+              }`}
+              onClick={() => handleBtnClick('calendar')}
+            >
+              <Image
+                src={
+                  activeButton === 'calendar' ? calendarIcon : grayCalendarIcon
+                }
+                alt="예약 현황 아이콘"
+              />
+              <p>예약 현황</p>
+            </button>
+          </div>
+        </div>
       </div>
-    </div>
+    )
   );
 }
diff --git a/components/Spinner/Spinner.tsx b/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000..fe7bd56
--- /dev/null
+++ b/components/Spinner/Spinner.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default function Spinner() {
+  return (
+    <div
+      role="status"
+      className="w-full h-screen flex items-center justify-center"
+    >
+      <svg
+        aria-hidden="true"
+        className="inline w-[150px] h-[150px] text-var-gray2 animate-spin fill-var-green2"
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
diff --git a/hooks/useGetNotification.ts b/hooks/useGetNotification.ts
new file mode 100644
index 0000000..4050f11
--- /dev/null
+++ b/hooks/useGetNotification.ts
@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  MyNotificationListQuery,
+  MyNotificationListResponse,
+} from '@/pages/api/myNotifications/apiMyNotifications.types';
+import { apiMyNotificationList } from '@/pages/api/myNotifications/apiMyNotifications';
+import useLoginState from './useLoginState';
+
+export default function useGetNotification(query: MyNotificationListQuery) {
+  const { cursorId = undefined, size = 10 } = query;
+  const { isLoggedIn } = useLoginState();
+
+  const { data, isLoading, isError } = useQuery<
+    MyNotificationListResponse,
+    Error
+  >({
+    queryKey: ['myNotification', query],
+    queryFn: () => apiMyNotificationList({ cursorId, size }),
+    enabled: !!isLoggedIn,
+  });
+
+  return { data, isLoading, isError };
+}
diff --git a/hooks/useLogin.ts b/hooks/useLogin.ts
index 7fd33aa..d07cba2 100644
--- a/hooks/useLogin.ts
+++ b/hooks/useLogin.ts
@@ -9,7 +9,6 @@ import useLoginState from './useLoginState';
 
 export default function useLogin() {
   const { setIsLoggedIn } = useLoginState();
-  const router = useRouter();
   const { openPopup } = usePopup();
   const postLoginMutation: UseMutationResult<
     LoginResponse,
diff --git a/hooks/useLogout.ts b/hooks/useLogout.ts
index 13d87dc..9563b53 100644
--- a/hooks/useLogout.ts
+++ b/hooks/useLogout.ts
@@ -1,12 +1,15 @@
+import { useRouter } from 'next/router';
 import useLoginState from './useLoginState';
 
 export default function useLogout() {
   const { setIsLoggedIn } = useLoginState();
+  const route = useRouter();
 
   const logout = () => {
     localStorage.removeItem('refreshToken');
     localStorage.removeItem('userId');
     setIsLoggedIn(false);
+    route.push('/');
   };
 
   return logout;
diff --git a/hooks/useReservationList.ts b/hooks/useReservationList.ts
new file mode 100644
index 0000000..6b85bca
--- /dev/null
+++ b/hooks/useReservationList.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiMyReservationList } from '@/pages/api/myReservations/apiMyReservations';
+import { useUserData } from './useUserData';
+import { MyReservationListResponse } from '@/pages/api/myReservations/apiMyReservations.types';
+
+export const useReservationList = () => {
+  const userData = useUserData();
+
+  const { data: myReservationList } = useQuery<MyReservationListResponse>({
+    queryKey: ['myReservationList', userData.id],
+    queryFn: () =>
+      apiMyReservationList({
+        cursorId: undefined,
+        size: undefined,
+        status: undefined,
+      }),
+    enabled: !!userData.id,
+  });
+
+  return myReservationList;
+};
diff --git a/hooks/useSideNavigation.ts b/hooks/useSideNavigation.ts
new file mode 100644
index 0000000..41f30a3
--- /dev/null
+++ b/hooks/useSideNavigation.ts
@@ -0,0 +1,16 @@
+import { sideNavigationState } from '@/states/sideNavigationState';
+import { useRecoilState } from 'recoil';
+
+export const useSideNavigation = () => {
+  const [isOpen, setIsOpen] = useRecoilState(sideNavigationState);
+
+  const openSideNavigation = () => {
+    setIsOpen(true);
+  };
+
+  const closeSideNavigation = () => {
+    setIsOpen(false);
+  };
+
+  return { isOpen, openSideNavigation, closeSideNavigation };
+};
diff --git a/hooks/useUserData.ts b/hooks/useUserData.ts
index c647a01..07b77fa 100644
--- a/hooks/useUserData.ts
+++ b/hooks/useUserData.ts
@@ -3,15 +3,17 @@ import { userState } from '@/states/userState';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
+import useLoginState from './useLoginState';
 
 export const useUserData = () => {
   const [userId, setUserId] = useState<string>();
   const [userData, setUserData] = useRecoilState(userState);
+  const { isLoggedIn } = useLoginState();
 
-  const { data: userResponseData } = useQuery({
+  const { data: userResponseData, isError } = useQuery({
     queryKey: ['user', userId],
     queryFn: apiMyInfo,
-    enabled: !!userId,
+    enabled: !!isLoggedIn,
   });
 
   useEffect(() => {
@@ -21,6 +23,7 @@ export const useUserData = () => {
   }, [userResponseData]);
 
   useEffect(() => {
+    console.log('hi');
     const userId = localStorage.getItem('userId') || '';
     setUserId(userId);
   }, []);
diff --git a/package-lock.json b/package-lock.json
index e5734aa..a771457 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2405,20 +2405,6 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
diff --git a/package.json b/package.json
index 0eefc74..113eb5b 100644
--- a/package.json
+++ b/package.json
@@ -17,10 +17,10 @@
     "react-calendar": "^5.0.0",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
-    "react-slick": "^0.30.2",
     "recoil": "^0.7.7",
-    "slick-carousel": "^1.8.1",
-    "tailwind-scrollbar-hide": "^1.1.7"
+    "tailwind-scrollbar-hide": "^1.1.7",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/pages/404.tsx b/pages/404.tsx
new file mode 100644
index 0000000..0ebce76
--- /dev/null
+++ b/pages/404.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+import { PrimaryButton } from '@/components/Button/Button';
+import { useRouter } from 'next/router';
+
+export default function NonePage() {
+  const router = useRouter();
+
+  const handleToMain = () => {
+    router.push('/');
+  };
+
+  return (
+    <div className="flex items-center flex-col mt-14 m:mt-10">
+      <div className="w-[500px] m:w-[300px]">
+        <Image src="/image/404.png" width={500} height={500} alt="notFound" />
+        <PrimaryButton size="large" style="dark" onClick={handleToMain}>
+          메인으로 이동
+        </PrimaryButton>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/Navtest.tsx b/pages/Navtest.tsx
deleted file mode 100644
index 9c01740..0000000
--- a/pages/Navtest.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import CatergoryBtn from '@/components/CatergoryBtn/CatergoryBtn';
-import NavigationBar from '@/components/Layout/NavigationBar';
-import MyPageInput from '@/components/MyPage/MyPageInput';
-import PriceFilterBtn from '@/components/PriceFilterBtn/PriceFilterBtn';
-import SidenNavigation from '@/components/SideNavigation/SideNavigation';
-
-export default function Navtest() {
-  return (
-    <>
-      <SidenNavigation />
-      <MyPageInput />
-    </>
-  );
-}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3b5cc82..dae4e75 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,10 +8,31 @@ import Layout from '@/components/Layout/Layout';
 import Modal from '@/components/Modal/Modal';
 import LayoutMobile from '@/components/Layout/LayoutMobile';
 import SilentRefresh from '@/hooks/useSilentRefresh';
+import Spinner from '@/components/Spinner/Spinner';
+import { useEffect, useState } from 'react';
+import { Router } from 'next/router';
+import SidenNavigationMobile from '@/components/SideNavigation/SideNavigationMobile';
 
 const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const start = () => setIsLoading(true);
+    const end = () => setIsLoading(false);
+
+    Router.events.on('routeChangeStart', start);
+    Router.events.on('routeChangeComplete', end);
+    Router.events.on('routeChangeError', end);
+
+    return () => {
+      Router.events.off('routeChangeStart', start);
+      Router.events.off('routeChangeComplete', end);
+      Router.events.off('routeChangeError', end);
+    };
+  }, []);
+
   let childContent: React.ReactNode;
 
   switch (pageProps.layoutType) {
@@ -36,12 +57,17 @@ export default function App({ Component, pageProps }: AppProps) {
 
   return (
     <RecoilRoot>
-      <QueryClientProvider client={queryClient}>
-        {childContent}
-        <Popup />
-        <Modal />
-        <SilentRefresh />
-      </QueryClientProvider>
+      {isLoading ? (
+        <Spinner />
+      ) : (
+        <QueryClientProvider client={queryClient}>
+          {childContent}
+          <Popup />
+          <Modal />
+          <SidenNavigationMobile />
+          <SilentRefresh />
+        </QueryClientProvider>
+      )}
     </RecoilRoot>
   );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 546ebc6..e70b684 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -6,10 +6,20 @@ export default function Document() {
     <Html lang="ko">
       <Head>
         <title>GlobalNomad</title>
+        <link rel="icon" href="/favicon.ico" />
         <script
+          async
           type="text/javascript"
-          src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey}&libraries=services,clusterer,drawing`}
+          src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey}&libraries=services,clusterer,drawing &autoload=false`}
         ></script>
+        <meta property="og:title" content="GlobalNomad" />
+        <meta
+          property="og:description"
+          content="사람들이 여행을 갈 때, 가서 뭘 할지, 비용은 얼마인지 등 여러 고민을 하게 된다. 바쁜 현대인의 이런 고민을 줄여주기 위해 플랫폼 안에 잘 짜인 체험 상품을 보고 간단하게 예약할 수 있는 서비스입니다."
+        />
+        <meta property="og:image" content="/image/globalnomad.png" />
+        {/* <meta property="og:url" content="https://globalnomad.com" /> */}
+        <meta property="og:type" content="website" />
       </Head>
       <body>
         <Main />
diff --git a/pages/activity-details/[id].tsx b/pages/activity-details/[id].tsx
index 5aa7ae0..4a072a5 100644
--- a/pages/activity-details/[id].tsx
+++ b/pages/activity-details/[id].tsx
@@ -1,7 +1,7 @@
 import ActivityDetails from '@/components/ActivityDetails/ActivityDetails';
 import { useRouter } from 'next/router';
 
-export default function activityDetails() {
+export default function ActivityDetailsPage() {
   const router = useRouter();
   const { id } = router.query;
   const activityId = typeof id === 'string' ? parseInt(id, 10) : undefined;
diff --git a/pages/api/myReservations/apiMyReservations.types.ts b/pages/api/myReservations/apiMyReservations.types.ts
index d81372f..1a8498a 100644
--- a/pages/api/myReservations/apiMyReservations.types.ts
+++ b/pages/api/myReservations/apiMyReservations.types.ts
@@ -21,7 +21,7 @@ export interface MyReservationListResponse {
         id: number;
       };
       scheduleId: number;
-      status: string;
+      status: 'pending' | 'confirmed' | 'declined' | 'canceled' | 'completed';
       reviewSubmitted: boolean;
       totalPrice: number;
       headCount: number;
diff --git a/pages/login.tsx b/pages/login.tsx
index aafe288..e08a503 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -11,6 +11,14 @@ import useLoginState from '@/hooks/useLoginState';
 import { useRouter } from 'next/router';
 import { GetServerSideProps } from 'next';
 
+export const getServerSideProps: GetServerSideProps = async () => {
+  return {
+    props: {
+      layoutType: 'removeLayout',
+    },
+  };
+};
+
 export default function LoginPage() {
   const { postLoginMutation } = useLogin();
   const { isLoggedIn } = useLoginState();
@@ -35,11 +43,11 @@ export default function LoginPage() {
     const isFormFilled = !!email && !!password;
 
     return isFormFilled && isNotError;
-  }, [errors.email, errors.password, watchFields]);
+  }, [errors.email, errors.password, getValues]);
 
   useEffect(() => {
-    if (isLoggedIn) router.push('/mypage');
-  }, [isLoggedIn]);
+    if (isLoggedIn) router.push('/');
+  }, [isLoggedIn, router]);
 
   return (
     <div className="flex flex-col items-center max-w-[640px] m-auto pt-[160px] gap-[40px] px-[20px] ">
diff --git a/pages/logoutTest.tsx b/pages/logoutTest.tsx
deleted file mode 100644
index 260c729..0000000
--- a/pages/logoutTest.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import useLoginState from '@/hooks/useLoginState';
-import useLogout from '@/hooks/useLogout';
-
-export default function logoutTest() {
-  const logout = useLogout();
-  const { isLoggedIn } = useLoginState();
-
-  console.log(isLoggedIn);
-
-  return (
-    <div>
-      <button onClick={logout}>로그아웃</button>
-    </div>
-  );
-}
diff --git a/pages/myActivity/register.tsx b/pages/myActivity/register.tsx
new file mode 100644
index 0000000..7ba0e88
--- /dev/null
+++ b/pages/myActivity/register.tsx
@@ -0,0 +1,77 @@
+import { FieldValues, useForm } from 'react-hook-form';
+import { PrimaryButton } from '@/components/Button/Button';
+import InputBox from '@/components/InputBox/InputBox';
+import KategorieDropdown from '@/components/KategorieDropdown/KategorieDropdown';
+import TextArea from '@/components/InputBox/TextArea';
+import TimeSlot from '@/components/MyActivity/Register/TimeSlot';
+import CustomCalendar from '@/components/CustomCalendar/CustomCalendar';
+import {
+  UploadBannerImage,
+  UploadDetailImage,
+} from '@/components/MyActivity/Register/UploadImage';
+
+function RegisterActivity() {
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useForm<FieldValues>({ mode: 'onChange' });
+
+  const handleClickRegister = () => {};
+
+  return (
+    <div className="flex gap-[20px] py-[72px] m:gap-0">
+      <div className="w-[384px] t:w-[251px] h-[432px] bg-var-gray7 flex-shrink-0 m:hidden">
+        프로필
+      </div>
+      <div className="flex flex-col w-full gap-[20px]">
+        <div className="flex justify-between items-center">
+          <h1 className="text-[32px] font-[700]">내 체험 등록</h1>
+          <PrimaryButton
+            size="small"
+            style="dark"
+            onClick={handleClickRegister}
+          >
+            등록하기
+          </PrimaryButton>
+        </div>
+        <form className="space-y-[24px]">
+          <InputBox
+            placeholder="제목"
+            name="title"
+            register={register}
+            errors={errors}
+          />
+          <KategorieDropdown />
+          <TextArea
+            placeholder="설명"
+            name="description"
+            register={register}
+            errors={errors}
+          />
+          <InputBox
+            label="가격"
+            placeholder="가격"
+            name="price"
+            register={register}
+            errors={errors}
+          />
+          <InputBox
+            label="주소"
+            placeholder="주소"
+            name="address"
+            register={register}
+            errors={errors}
+          />
+          <TimeSlot />
+          <UploadBannerImage />
+          <UploadDetailImage />
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default RegisterActivity;
diff --git a/pages/mypage.tsx b/pages/mypage.tsx
index 535d700..00cb6b6 100644
--- a/pages/mypage.tsx
+++ b/pages/mypage.tsx
@@ -1,63 +1,19 @@
-import { CircleCloseButton } from '@/components/Button/Button';
-import MyPageInput from '@/components/MyPage/MyPageInput';
+import MyPageInput from '@/components/MyPageInput/MyPageInput';
 import SidenNavigation from '@/components/SideNavigation/SideNavigation';
 import SidenNavigationMobile from '@/components/SideNavigation/SideNavigationMobile';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 export default function MyPage() {
-  const router = useRouter();
-  const [screenSize, setScreenSize] = useState('');
-  const [activeSection, setActiveSection] = useState<string | null>(null);
-
-  const handleNavigate = (section: string) => {
-    setActiveSection(section);
-  };
-  const onCircleClick = () => {
-    setActiveSection(null);
-  };
-
-  useEffect(() => {
-    function handleResize() {
-      const width = window.innerWidth;
-      if (width <= 743) {
-        setScreenSize('m');
-      } else {
-        setScreenSize('');
-      }
-    }
-
-    handleResize();
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [screenSize, activeSection]);
   return (
     <>
-      {screenSize !== 'm' ? (
-        <div className="flex justify-center w-full mt-[72px] gap-[24px] t:mt-[24px] t:gap-[16px]">
+      <div className="flex justify-center w-full mt-[72px] gap-[24px] t:mt-[24px] t:gap-[16px] m:mt-[26px]">
+        <div className="m:hidden">
           <SidenNavigation />
-          <MyPageInput />
         </div>
-      ) : (
-        <>
-          {!activeSection && (
-            <div className="flex justify-center w-full mt-[24px]">
-              <SidenNavigationMobile onNavigate={handleNavigate} />
-            </div>
-          )}
-          {activeSection === 'mypage' && (
-            <div className="flex-col justify-center w-full my-[10px] ">
-              <div className="flex justify-end mb-[10px]">
-                <CircleCloseButton onClick={onCircleClick} />
-              </div>
-              <MyPageInput />
-            </div>
-          )}
-        </>
-      )}
+        <MyPageInput />
+      </div>
+      <SidenNavigationMobile />
     </>
   );
 }
diff --git a/pages/reservation.tsx b/pages/reservation.tsx
new file mode 100644
index 0000000..672cb64
--- /dev/null
+++ b/pages/reservation.tsx
@@ -0,0 +1,76 @@
+import ReservationListCard from '@/components/ReservationListCard/ReservationListCard';
+import ReservationFilter from '@/components/ReservationFilter/ReservationFilter';
+import SideNavigation from '@/components/SideNavigation/SideNavigation';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { useReservationList } from '@/hooks/useReservationList';
+import {
+  MyReservationProps,
+  statusType,
+} from '@/components/ReservationFilter/myReservationTypes.types';
+
+export default function MyReservationPage() {
+  const [filterOption, setFilterOption] = useState<statusType>();
+  const [reservationListByFilter, setReservationListByFilter] = useState<
+    MyReservationProps[]
+  >([]);
+  const myReservationList = useReservationList();
+
+  useEffect(() => {
+    if (myReservationList) {
+      const reservationList = myReservationList.reservations;
+      if (filterOption) {
+        const filteredData = reservationList.filter(
+          (card) => card.status === filterOption
+        );
+        setReservationListByFilter(filteredData);
+      } else {
+        setReservationListByFilter(reservationList);
+      }
+    }
+  }, [myReservationList, filterOption]);
+
+  return (
+    <div className="flex justify-center w-full mt-[72px] gap-[24px] t:mt-[24px] t:gap-[16px]">
+      <SideNavigation />
+      <div className="flex flex-col w-[792px] gap-[24px] t:w-[429px] t:h-[556px] m:w-full m:h-[492px] m:pb-[210px]">
+        <div className="flex w-full justify-between">
+          <p className="text-[32px] font-bold">예약 내역 </p>
+          {reservationListByFilter && (
+            <ReservationFilter
+              setFilterOption={setFilterOption}
+              filterOption={filterOption}
+            />
+          )}
+        </div>
+        <div className="flex flex-col animate-slideDown overflow-auto scrollbar-hide h-[calc(100vh-380px)] gap-[24px] pr-[10px]">
+          {reservationListByFilter.length > 0 ? (
+            reservationListByFilter.map(
+              (reservationData: MyReservationProps) => {
+                return (
+                  <div key={reservationData.id}>
+                    <ReservationListCard reservationData={reservationData} />
+                  </div>
+                );
+              }
+            )
+          ) : (
+            <div className="flex flex-col h-[500px] items-center justify-center">
+              <div>
+                <Image
+                  src="/icon/empty_reservation.svg"
+                  alt="등록된 체험이 없어요"
+                  width={240}
+                  height={240}
+                />
+              </div>
+              <span className="text-var-gray7 text-[24px]">
+                등록된 체험이 없어요
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/signup.tsx b/pages/signup.tsx
index bca6927..35a7c1e 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -10,8 +10,9 @@ import { SignupBody } from './api/users/apiUser.types';
 import { useEffect, useMemo, useState } from 'react';
 import useLoginState from '@/hooks/useLoginState';
 import { useRouter } from 'next/router';
+import { GetServerSideProps } from 'next';
 
-export const getStaticProps = async () => {
+export const getServerSideProps: GetServerSideProps = async () => {
   return {
     props: {
       layoutType: 'removeLayout',
@@ -60,14 +61,15 @@ export default function SingupPage() {
     errors.password,
     errors.passwordCheck,
     errors.nickname,
-    watchFields,
+    getValues,
+    isChecked,
   ]);
 
   useEffect(() => {
     if (isLoggedIn) {
       router.push('/mypage');
     }
-  }, [isLoggedIn]);
+  }, [isLoggedIn, router]);
 
   return (
     <div className="flex flex-col items-center max-w-[640px] m-auto pt-[160px] gap-[40px] px-[20px] ">
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..accbae2
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/icon/hamburger_icon.svg b/public/icon/hamburger_icon.svg
new file mode 100644
index 0000000..5d6f2e0
--- /dev/null
+++ b/public/icon/hamburger_icon.svg
@@ -0,0 +1,9 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="38" height="38" fill="url(#pattern0_10004_12995)"/>
+<defs>
+<pattern id="pattern0_10004_12995" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_10004_12995" transform="scale(0.00195312)"/>
+</pattern>
+<image id="image0_10004_12995" width="512" height="512" xlink:href="data:image/png;base64,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koUki0m+aAo0BTIgAzJQPQNlby177IuVPXd/kvLWrAcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQGLzCd5FCS60leJfmY5GuS3/4wkAEZkIGqGSh761KSl0muJTmYpOzBHgQ2VGBXktmVMCr2Gh4ZkAEZ2JwMLP4Zui4k2bmhFcCTTazAmSSfdfZVO3ub5+Zsnty5DyUDn5Kcntiq5MLHLrAtyT2FX+GXARmQgd5m4Ka3BcZeCyfuCbYnWbDoe7vohzLFuA4TuQyMnoH5JDMTV6Vc8FgEtiR5pvgr/jIgAzLQTAbmkkyNpSI46UQJ3LDom1n0pqfRpyeGDIeSgUsTValcbHWBfUmWNQAaABmQARloLgNl795dvSo44UQIlJeP3lr0zS36oUwvrsMkLgOjZ+D5RFQrF1ld4ITir/jLgAzIQPMZOFy9Ojjh4AWeWPjNL3wT1OgTFEOGrWfg0eCrlQusKrAjyQ8NgAZABmRABprPwLck5aPcHgQ6CRyz6Jtf9K1PLX5/k7cM1MvA0U47v4MIrHzPv8VXb/GxZCkDMrCZGTivshHoKnDXKwBeAZABGZCBwWTgTtfN33EEHlj4g1n4mzl1eG5Trwz0IwP3lTUCXQU0AP1YtDZP90EGZKBGBjQAXauf4+ItAJtOjU3HOeRIBvqRgdvqGoGuArPeAvAWgAzIgAwMJgP+E2DX6ue4+BhgP7p205P7IAMyUCMDR9Q1Al0FypdGfNf9D6b7r7GBOIdCJANtZqB8EdBM183fcQSKwGMNgAZABmRABprPwEMljcBaBY5b+M0vfBNbmxOb++a+1cyAbwFca/Vz/F+BN5oATYAMyIAMNJuB12oZgfUK7E2ybPE3u/hrThHOZSqVgbYy8DPJnvVu/n6OQBG4rAHQAMiADMhAcxm4qIQRGFVgKsmcxd/c4jettTWtuV/uV80M+Oa/USufn18VKB8hmdcEaAJkQAZkoPcZeJrkv9Xd218IVBAorwRcSfLLBtD7DaDmJOFcJlMZaCcDt5JMV9jvnYLAPwVOJnmnCdAEyIAMyEBvMrCU5NQ/d2z/SKCywNYkZ5N8sAH0ZgMwpbUzpblX7lWtDLxPci5J+fZWDwIbKlBeajqQ5GqShSSLSb5oCjQFMiADMlA9A2VvLXvsi5U9d3+S8tasBwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEmBf4H6nflhsrH8qUAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/public/image/404.png b/public/image/404.png
new file mode 100644
index 0000000..b3195c9
Binary files /dev/null and b/public/image/404.png differ
diff --git a/states/mainPageState.tsx b/states/mainPageState.tsx
index 11669ec..09d15b4 100644
--- a/states/mainPageState.tsx
+++ b/states/mainPageState.tsx
@@ -5,7 +5,7 @@ export const mainPageState = atom<mainPageStateProps>({
   key: 'mainPageState',
   default : {
     currentPage: 1,
-    itemsPerPage: 9,
+    itemsPerPage: 8,
     selectedKategorie: '',
     selectedSorted: '',
   }
diff --git a/states/sideNavigationState.tsx b/states/sideNavigationState.tsx
new file mode 100644
index 0000000..9eee6ce
--- /dev/null
+++ b/states/sideNavigationState.tsx
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const sideNavigationState = atom<boolean>({
+  key: 'sideNavigationState',
+  default: false,
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index 15b1294..f725c95 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -53,8 +53,9 @@ module.exports = {
       },
       boxShadow: {
         card: '0px 4px 16px 0px rgba(17, 34, 17, 0.05)',
+        kategorieDropdown: '0px 10px 30px 3px rgba(5, 16, 55, 0.15);',
       },
     },
   },
-  plugins: [require("tailwind-scrollbar-hide")],
+  plugins: [require('tailwind-scrollbar-hide')],
 };