diff --git a/mock.json b/mock.json
index 21fac936..69462e12 100644
--- a/mock.json
+++ b/mock.json
@@ -17,6 +17,153 @@
       "email": "asdf@gmail.coms",
       "password": "asdfasdf",
       "id": 7
+    },
+    {
+      "nickname": "ㅁㄴㅇㄹ",
+      "email": "bomaru83@naver.com",
+      "password": "asdfasdf",
+      "confirmPassword": "asdfasdf",
+      "id": 8
+    },
+    {
+      "nickname": "ㅁㄴㅇㄹ",
+      "email": "bomaru83@naver.com",
+      "password": "asdfasdf",
+      "confirmPassword": "asdfasdf",
+      "id": 9
+    },
+    {
+      "nickname": "율율",
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "confirmPassword": "asdfasdf",
+      "id": 10
+    },
+    {
+      "nickname": "율율",
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "confirmPassword": "asdfasdf",
+      "id": 11
+    },
+    {
+      "nickname": "율율",
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "confirmPassword": "asdfasdf",
+      "id": 12
+    },
+    {
+      "nickname": "율율",
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "confirmPassword": "asdfasdf",
+      "id": 13
+    },
+    {
+      "nickname": "호호",
+      "email": "hoho@hoho.com",
+      "password": "hohohoho1",
+      "confirmPassword": "hohohoho1",
+      "id": 14
+    },
+    {
+      "nickname": "minha",
+      "email": "minha@test.com",
+      "password": "test1234",
+      "confirmPassword": "test1234",
+      "id": 15
+    },
+    {
+      "nickname": "lemon",
+      "email": "lemon@gmail.com",
+      "password": "password1234!",
+      "confirmPassword": "password1234!",
+      "id": 16
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 17
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 18
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 19
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 20
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 21
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 22
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 23
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 24
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 25
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 26
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 27
+    },
+    {
+      "nickname": "dddd",
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "confirmPassword": "@@a1a2a3",
+      "id": 28
     }
   ],
   "login": [
@@ -24,6 +171,181 @@
       "id": 1,
       "email": "asdf@gmail.com",
       "password": "asdfasdf"
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 2
+    },
+    {
+      "email": "sample1@sample.com",
+      "password": "qwerty1234",
+      "id": 3
+    },
+    {
+      "email": "sample@sample.com",
+      "password": "qwerty1234",
+      "id": 4
+    },
+    {
+      "email": "abc@abc.com",
+      "password": "asdf123456",
+      "id": 5
+    },
+    {
+      "email": "asdf@asdf.com",
+      "password": "asdf123456",
+      "id": 6
+    },
+    {
+      "email": "bomaru83@naver.com",
+      "password": "ㅁㄴdfasdf",
+      "id": 7
+    },
+    {
+      "email": "bomaru83@naver.co",
+      "password": "asdfasdf",
+      "id": 8
+    },
+    {
+      "email": "bomaru83@naver.com",
+      "password": "asdfasdf",
+      "id": 9
+    },
+    {
+      "email": "asdf@asdf.com",
+      "password": "asdf12345",
+      "id": 10
+    },
+    {
+      "email": "abc@gmail.co",
+      "password": "asdfggjk",
+      "id": 11
+    },
+    {
+      "email": "sample@sample.com",
+      "password": "qwerty1234",
+      "id": 12
+    },
+    {
+      "email": "sample@sample.com",
+      "password": "qwerty1234",
+      "id": 13
+    },
+    {
+      "email": "Asdf@asdf.com",
+      "password": "asdf123456",
+      "id": 14
+    },
+    {
+      "email": "bomaru83@naver.com",
+      "password": "asdfasdf",
+      "id": 15
+    },
+    {
+      "email": "spfesi0401@codeit.com",
+      "password": "asdfasdf",
+      "id": 16
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 17
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 18
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "password",
+      "id": 19
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 20
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 21
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 22
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 23
+    },
+    {
+      "email": "sample@sample.com",
+      "password": "qwerty1234",
+      "id": 24
+    },
+    {
+      "email": "sample@sample.com",
+      "password": "qwerty1234",
+      "id": 25
+    },
+    {
+      "email": "juepark42@gmail.com",
+      "password": "fakepassword^^",
+      "id": 26
+    },
+    {
+      "email": "bomaru83@naver.com",
+      "password": "asdfasdf",
+      "id": 27
+    },
+    {
+      "email": "abc@abc.com",
+      "password": "asdf12345",
+      "id": 28
+    },
+    {
+      "email": "bomaru83@naver.co",
+      "password": "asdfasdf",
+      "id": 29
+    },
+    {
+      "email": "juepark42@gmail.com",
+      "password": "fakepassword^^",
+      "id": 30
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 31
+    },
+    {
+      "email": "asdf@gmail.com",
+      "password": "asdfasdf",
+      "id": 32
+    },
+    {
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "id": 33
+    },
+    {
+      "email": "aaa@naver.com",
+      "password": "@@a1a2a3",
+      "id": 34
+    },
+    {
+      "email": "asdfasd@afasd.sddafc",
+      "password": "asdfasdfasdfsd",
+      "id": 35
+    },
+    {
+      "email": "sdaf@asdf.asdf",
+      "password": "asdfafsd",
+      "id": 36
     }
   ],
   "user": [
@@ -37,8 +359,8 @@
   "crews": [
     {
       "id": 1,
-      "type": "유산소",
-      "subType": "달리기",
+      "type": "유산소/근력",
+      "subType": "러닝",
       "name": "매일 달릴사람!",
       "location": "서울특별시",
       "detailedLocation": "강남구",
@@ -50,188 +372,188 @@
         }
       ],
       "createdBy": 1,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": true,
       "gatheringCount": 4
     },
     {
       "id": 2,
-      "type": "유산소",
-      "subType": "달리기",
-      "name": "2같이 달릴사람 구함",
-      "location": "광주",
-      "detailedLocation": "어디구 어디로",
+      "type": "유산소/근력",
+      "subType": "러닝",
+      "name": "광교호수공원 러닝크루 구합니다",
+      "location": "경기도",
+      "detailedLocation": "수원시",
       "participantCount": 10,
       "capacity": 20,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://img.hankyung.com/photo/202209/f8b44f8bbe2a703573e176387b1296a0.jpg"
         }
       ],
       "createdBy": 1,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": true,
       "gatheringCount": 3
     },
     {
       "id": 3,
-      "type": "유산소",
-      "subType": "달리기",
-      "name": "3같이 달릴사람 구함",
-      "location": "부산",
-      "detailedLocation": "어디구 어디로",
+      "type": "유연성",
+      "subType": "요가",
+      "name": "힐링 요가 크루입니다",
+      "location": "부산광역시",
+      "detailedLocation": "남구",
       "participantCount": 1,
       "capacity": 5,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://cdn.imweb.me/thumbnail/20230607/82966d0f2d0e1.png"
         }
       ],
       "createdBy": 2,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": false,
       "gatheringCount": 3
     },
     {
       "id": 4,
-      "type": "유산소",
-      "subType": "달리기",
-      "name": "4같이 달릴사람 구함",
-      "location": "부산",
-      "detailedLocation": "어디구 어디로",
+      "type": "유산소/근력",
+      "subType": "등산",
+      "name": "30대 인천 등산모임",
+      "location": "인천광역시",
+      "detailedLocation": "부평구",
       "participantCount": 1,
       "capacity": 20,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://i.namu.wiki/i/z4SlzF00Hi7dzXpkkj_mdNnXyY2WTHD6hmxzCks5e6PxQ7KwHosVlzQatl42tPiui_EICYUhL-iEBxxbRQUN7w.webp"
         }
       ],
       "createdBy": 2,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": false,
       "gatheringCount": 3
     },
     {
       "id": 5,
-      "type": "유산소",
-      "subType": "달리기",
-      "name": "5같이 달릴사람 구함",
-      "location": "부산",
-      "detailedLocation": "어디구 어디로",
+      "type": "구기종목",
+      "subType": "축구",
+      "name": "축구할사람 모집합니다",
+      "location": "서울특별시",
+      "detailedLocation": "마포구",
       "participantCount": 1,
       "capacity": 20,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://www.ksponco.or.kr/sports/img/olparksoccer/know_3.png"
         }
       ],
       "createdBy": 2,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": false,
       "gatheringCount": 5
     },
     {
       "id": 6,
-      "type": "유산소",
-      "subType": "달리기",
-      "name": "6같이 달릴사람 구함",
-      "location": "광주",
-      "detailedLocation": "어디구 어디로",
+      "type": "유산소/근력",
+      "subType": "클라이밍",
+      "name": "한계에 도전하는 클라이밍 모임",
+      "location": "경기도",
+      "detailedLocation": "수원시",
       "participantCount": 10,
       "capacity": 20,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ33qODhVM0rvTqrzWHaeLe3ESODcSHNiYrsg&s"
         }
       ],
       "createdBy": 1,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": true,
       "gatheringCount": 5
     },
     {
       "id": 7,
-      "type": "유산소",
-      "subType": "수영",
-      "name": "7엄청긴크루이름엄청긴크루이름엄청긴크루이름엄청긴크루이름",
+      "type": "유연성",
+      "subType": "폴댄스",
+      "name": "폴킴 아닙니다 폴댄스",
       "location": "경기도",
-      "detailedLocation": "어디구 어디로",
+      "detailedLocation": "고양시",
       "participantCount": 20,
       "capacity": 24,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://i.pinimg.com/474x/59/55/b0/5955b0be1eb8c9bd8204f339db1befac.jpg"
         }
       ],
       "createdBy": 1,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": true,
       "gatheringCount": 5
     },
     {
       "id": 8,
-      "type": "유산소",
-      "subType": "달리기",
-      "name": "8같이 달릴사람 구함",
-      "location": "광주",
-      "detailedLocation": "어디구 어디로",
+      "type": "기타",
+      "subType": "서핑",
+      "name": "같이 서핑하실분",
+      "location": "부산광역시",
+      "detailedLocation": "해운대구",
       "participantCount": 10,
       "capacity": 20,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://i.pinimg.com/736x/84/aa/da/84aada701c873c7451b38ec44b725dad.jpg"
         }
       ],
       "createdBy": 1,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": true,
       "gatheringCount": 5
     },
     {
       "id": 9,
-      "type": "유산소",
-      "subType": "달리기",
-      "name": "9같이 달릴사람 구함",
-      "location": "부산",
-      "detailedLocation": "어디구 어디로",
+      "type": "기타",
+      "subType": "아이스스케이트",
+      "name": "빙글빙글 스케이트",
+      "location": "경기도",
+      "detailedLocation": "수원시",
       "participantCount": 1,
       "capacity": 5,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://img.freepik.com/free-photo/portrait-person-ice-skating-outdoors-winter-time_23-2151396912.jpg"
         }
       ],
       "createdBy": 2,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": false,
       "gatheringCount": 5
     },
     {
       "id": 10,
-      "type": "유산소",
-      "subType": "수영",
-      "name": "10엄청긴크루이름엄청긴크루이름엄청긴크루이름엄청긴크루이름",
-      "location": "경기도",
-      "detailedLocation": "어디구 어디로",
+      "type": "유산소/근력",
+      "subType": "헬스",
+      "name": "건강한 신체에 건강한 정신",
+      "location": "서울특별시",
+      "detailedLocation": "강북구",
       "participantCount": 20,
       "capacity": 24,
       "images": [
         {
-          "imagePath": "https://i.pinimg.com/564x/f8/8d/c5/f88dc5b857caf6c303ae5ef9dd12e7fb.jpg"
+          "imagePath": "https://img.freepik.com/free-photo/gym-with-indoor-cycling-equipment_23-2149270210.jpg"
         }
       ],
       "createdBy": 1,
-      "createdDate": "2024-11-04T00:00:00.000Z",
-      "updatedDate": "2024-11-05T00:00:00.000Z",
+      "createdDate": "2024-11-04T10:09:12.306+09:00",
+      "updatedDate": "2024-11-05T10:09:12.306+09:00",
       "isConfirmed": true,
       "gatheringCount": 3
     }
@@ -250,7 +572,10 @@
       "isCaptain": true,
       "isCrew": true,
       "CrewMembers": [
-        { "id": 1, "nickname": "이름1" },
+        {
+          "id": 1,
+          "nickname": "이름1"
+        },
         {
           "id": 2,
           "nickname": "이름2",
@@ -278,7 +603,7 @@
     {
       "id": 101,
       "title": "신나는 운동...즐거운..코딩..",
-      "dateTime": "2024-11-29T00:32:12.306Z",
+      "dateTime": "2024-11-09T10:30:12.306+09:00",
       "location": "서울시 강남구 역삼동 오피스타워 3층",
       "currentCount": 3,
       "totalCount": 10,
@@ -288,7 +613,7 @@
     {
       "id": 102,
       "title": "등산 모임",
-      "dateTime": "2024-11-12T09:00",
+      "dateTime": "2024-11-12T10:30:12.306+09:00",
       "location": "서울 강남구 개포동 대모산",
       "currentCount": 5,
       "totalCount": 10,
@@ -298,7 +623,7 @@
     {
       "id": 103,
       "title": "등산 모임",
-      "dateTime": "2024-11-15T09:00",
+      "dateTime": "2024-11-15T10:30:12.306+09:00",
       "location": "경기 과천시 중앙동 관악산",
       "currentCount": 10,
       "totalCount": 10,
@@ -308,7 +633,7 @@
     {
       "id": 104,
       "title": "등산 모임",
-      "dateTime": "2024-11-12T09:00",
+      "dateTime": "2024-11-17T10:30:12.306+09:00",
       "location": "아차산",
       "currentCount": 2,
       "totalCount": 4,
@@ -318,7 +643,7 @@
     {
       "id": 105,
       "title": "러닝",
-      "dateTime": "2024-11-12T09:00",
+      "dateTime": "2024-11-18T10:30:12.306+09:00",
       "location": "서울 영등포구 여의동로 330 한강사업본부 여의도안내센터",
       "currentCount": 0,
       "totalCount": 20,
@@ -331,7 +656,7 @@
       "id": 1,
       "title": "신나는 운동...즐거운..코딩..",
       "introduce": "공지사항입니다. 다들 이번 약속 잊지 않으셨죠? 꼭 참여 부탁드립니다~",
-      "dateTime": "2024-10-29T00:32:12.306Z",
+      "dateTime": "2024-11-09T10:30:12.306+09:00",
       "location": "서울시 강남구 역삼동 오피스타워 3층",
       "currentCount": 3,
       "totalCount": 10,
@@ -367,7 +692,7 @@
       "id": 1,
       "rate": 5,
       "comment": "글이 길어질 경우 글이 길어질 경우 확인 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 최고의 모임~",
-      "createdAt": "2024-10-30T00:30",
+      "createdAt": "2024-11-09T10:30:12.306+09:00",
       "reviewer": {
         "id": 1,
         "nickname": "샘플1",
@@ -379,7 +704,7 @@
       "id": 2,
       "rate": 2,
       "comment": "솔직히 좀 별로..",
-      "createdAt": "2024-10-30T00:34",
+      "createdAt": "2024-11-15T10:30:12.306+09:00",
       "reviewer": {
         "id": 2,
         "nickname": "샘플2",
@@ -391,7 +716,7 @@
       "id": 3,
       "rate": 5,
       "comment": "진짜 좋은 모임이었다.. 굿",
-      "createdAt": "2024-10-30T00:50",
+      "createdAt": "2024-11-20T10:30:12.306+09:00",
       "reviewer": {
         "id": 3,
         "nickname": "샘플3",
@@ -403,7 +728,7 @@
       "id": 4,
       "rate": 5,
       "comment": "모임계를 뒤집어 엎으셨다",
-      "createdAt": "2024-10-30T00:52",
+      "createdAt": "2024-11-29T10:30:12.306+09:00",
       "reviewer": {
         "id": 4,
         "nickname": "샘플4",
@@ -415,7 +740,7 @@
       "id": 5,
       "rate": 4,
       "comment": "좋아용",
-      "createdAt": "2024-10-31T00:52",
+      "createdAt": "2024-11-29T10:30:12.306+09:00",
       "reviewer": {
         "id": 5,
         "nickname": "샘플5",
@@ -427,7 +752,7 @@
       "id": 6,
       "rate": 1,
       "comment": "별로였음",
-      "createdAt": "2024-10-31T00:52",
+      "createdAt": "2024-11-29T10:30:12.306+09:00",
       "reviewer": {
         "id": 6,
         "nickname": "샘플6",
@@ -439,7 +764,7 @@
       "id": 7,
       "rate": 4,
       "comment": "나만 좋았냐",
-      "createdAt": "2024-10-31T00:54",
+      "createdAt": "2024-11-30T10:30:12.306+09:00",
       "reviewer": {
         "id": 7,
         "nickname": "샘플7",
@@ -447,4 +772,4 @@
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/next.config.mjs b/next.config.mjs
index f74fc3b6..efd2c845 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -17,7 +17,7 @@ const nextConfig = {
           {
             key: 'Access-Control-Allow-Origin',
             value:
-              process.env.NEXT_PUBLIC_API_URL || 'https://foggy-sideways-saltasaurus.glitch.me/',
+              process.env.NEXT_PUBLIC_API_BASE_URL || 'https://foggy-sideways-saltasaurus.glitch.me/',
 
           },
           { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' },
diff --git a/src/app/(crew)/crew/_components/create-crew-form/index.tsx b/src/app/(crew)/crew/_components/create-crew-form/index.tsx
index 9c1827d9..f197b632 100644
--- a/src/app/(crew)/crew/_components/create-crew-form/index.tsx
+++ b/src/app/(crew)/crew/_components/create-crew-form/index.tsx
@@ -31,9 +31,9 @@ export default function CreateCrewForm({
     control,
     handleSubmit,
     setValue,
-    getValues,
+    trigger,
     clearErrors,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<CreateCrewRequestTypes>({
     defaultValues: data,
     mode: 'onBlur',
@@ -89,6 +89,10 @@ export default function CreateCrewForm({
                 {...field}
                 id="crew-title"
                 variant="filled"
+                onChange={(e) => {
+                  field.onChange(e);
+                  if (errors.title) trigger('title'); // 입력 중일 때 유효성 검사 트리거
+                }}
                 error={errors.title?.message}
                 placeholder="크루명을 20자 이내로 입력해주세요."
                 maxLength={20}
@@ -125,6 +129,7 @@ export default function CreateCrewForm({
                     field.onChange(value);
                     handleMainCategoryChange(value);
                   }}
+                  error={errors.mainCategory?.message}
                 />
               )}
             />
@@ -139,11 +144,11 @@ export default function CreateCrewForm({
                   placeholder="세부 카테고리"
                   data={categoryData[categoryIndex]?.items || []}
                   className="flex-1"
+                  error={errors.subCategory?.message}
                 />
               )}
             />
           </div>
-          {errors.mainCategory && <p className="text-red-500">{errors.mainCategory.message}</p>}
         </div>
 
         <div className="flex flex-col gap-3">
@@ -153,12 +158,29 @@ export default function CreateCrewForm({
           <Controller
             name="imageUrl"
             control={control}
-            rules={{ required: '이미지를 선택해주세요.' }}
+            rules={{
+              required: '이미지를 선택해주세요.',
+              validate: {
+                fileSize: (file) =>
+                  file && file instanceof File && file.size <= 5242880
+                    ? true
+                    : '파일 크기는 5MB 이하여야 합니다.',
+                fileType: (file) =>
+                  file &&
+                  file instanceof File &&
+                  ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
+                    ? true
+                    : 'JPG, PNG 파일만 업로드 가능합니다.',
+              },
+            }}
             render={({ field }) => (
               <FileInputWrap
                 {...field}
                 sample={ImgCrewSamples}
-                onChange={(newValue) => field.onChange(newValue)}
+                onChange={(newValue) => {
+                  field.onChange(newValue);
+                  if (newValue instanceof File) trigger('imageUrl');
+                }}
               />
             )}
           />
@@ -189,12 +211,14 @@ export default function CreateCrewForm({
                     field.onChange(value);
                     handleMainLocationChange(value);
                   }}
+                  error={errors.mainLocation?.message}
                 />
               )}
             />
             <Controller
               name="subLocation"
               control={control}
+              rules={{ required: '시/군/구를 선택해주세요.' }}
               render={({ field }) => (
                 <DropDown
                   {...field}
@@ -203,11 +227,11 @@ export default function CreateCrewForm({
                   placeholder="시/군/구"
                   data={regionData[regionIndex]?.areas || []}
                   className="flex-1"
+                  error={errors.subLocation?.message}
                 />
               )}
             />
           </div>
-          {errors.mainLocation && <p className="text-red-500">{errors.mainLocation.message}</p>}
         </div>
 
         <div className="flex flex-col gap-3">
@@ -230,6 +254,7 @@ export default function CreateCrewForm({
                 variant="filled"
                 min={4}
                 max={20}
+                error={errors.totalCount?.message}
                 classNames={{
                   input:
                     'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl',
@@ -238,13 +263,12 @@ export default function CreateCrewForm({
               />
             )}
           />
-          {errors.totalCount && <p className="text-red-500">{errors.totalCount.message}</p>}
         </div>
 
         <div className="flex justify-between gap-4 pt-18">
           <Button
             type="submit"
-            disabled={!isValid}
+            disabled={!isValid || isSubmitting}
             className="btn-filled h-11 flex-1 text-base font-medium disabled:bg-gray-200"
           >
             {isEdit ? '수정' : '확인'}
diff --git a/src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx b/src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx
index 5e062781..bd4030d7 100644
--- a/src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx
+++ b/src/app/(crew)/crew/_components/create-gathering-form/create-gathering-form.stories.tsx
@@ -9,7 +9,7 @@ const initialValue: CreateGatheringRequestType = {
   introduce: '',
   dateTime: '',
   location: '',
-  totalCount: 0,
+  totalCount: 2,
   imageUrl: null,
 };
 
@@ -41,7 +41,7 @@ const Template: StoryFn<CreateGatheringRequestType> = function CreateCrewPageSto
         opened={createModalOpened}
         onClose={closeCreateModal}
         centered
-        title="약속 잡기"
+        title="약속 만들기"
         styles={{
           root: { '--modal-size': '520px' },
           content: { boxShadow: '0 25px 50px -12px rgba(0,0,0,0.1)', borderRadius: '12px' },
diff --git a/src/app/(crew)/crew/_components/create-gathering-form/index.tsx b/src/app/(crew)/crew/_components/create-gathering-form/index.tsx
index fc8c375b..f13f27e3 100644
--- a/src/app/(crew)/crew/_components/create-gathering-form/index.tsx
+++ b/src/app/(crew)/crew/_components/create-gathering-form/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { NumberInput } from '@mantine/core';
 import Button from '@/src/components/common/input/button';
 import DateTimePicker from '@/src/components/common/input/date-time-picker';
@@ -27,22 +26,17 @@ export default function CreateGatheringForm({
   data,
 }: CreateGatheringFormTypes) {
   const {
-    register,
+    control,
     handleSubmit,
-    formState: { errors },
     trigger,
-  } = useForm<CreateGatheringRequestType>();
-  const [values, setValues] = useState<CreateGatheringRequestType>(data);
-  const requiredFields: (keyof CreateGatheringRequestType)[] = [
-    'title',
-    'imageUrl',
-    'location',
-    'dateTime',
-    'totalCount',
-  ];
-  const isFormValid =
-    requiredFields.every((field) => values[field as keyof CreateGatheringRequestType]) &&
-    Object.keys(errors).length === 0;
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<CreateGatheringRequestType>({
+    defaultValues: data,
+    mode: 'onBlur',
+  });
+  const title = useWatch({ control, name: 'title' });
+  const location = useWatch({ control, name: 'location' });
+  const introduce = useWatch({ control, name: 'introduce' });
 
   return (
     <form onSubmit={isEdit ? handleSubmit(onEdit) : handleSubmit(onSubmit)}>
@@ -53,35 +47,33 @@ export default function CreateGatheringForm({
               약속 이름
             </label>
             <span>
-              <span className="text-blue-500">{values.title.length}</span>/20
+              <span className="text-blue-500">{title.length}</span>/20
             </span>
           </div>
-          <TextInput
-            id="gathering-title"
-            variant="filled"
-            value={values.title}
-            register={{
-              ...register('title', {
-                required: '필수 입력사항입니다.',
-                pattern: /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z|0-9| ]{1,20}$/,
-                onBlur: () => trigger('title'),
-              }),
-            }}
-            error={errors.title?.message?.toString()}
-            onChange={(e) =>
-              setValues((prevValues) => {
-                if (e.target.value.length <= 20) {
-                  return { ...prevValues, title: e.target.value };
-                }
-                return prevValues;
-              })
-            }
-            placeholder="약속 이름을 20자 이내로 입력해주세요."
-            maxLength={20}
-            classNames={{
-              input:
-                'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl aria-[invalid=true]:border-none',
+          <Controller
+            name="title"
+            control={control}
+            rules={{
+              required: '필수 입력사항입니다.',
             }}
+            render={({ field }) => (
+              <TextInput
+                {...field}
+                id="gathering-title"
+                variant="filled"
+                onChange={(e) => {
+                  field.onChange(e);
+                  if (errors.title) trigger('title'); // 입력 중일 때 유효성 검사 트리거
+                }}
+                error={errors.title?.message}
+                placeholder="약속명을 20자 이내로 입력해주세요."
+                maxLength={20}
+                classNames={{
+                  input:
+                    'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl aria-[invalid=true]:border-none',
+                }}
+              />
+            )}
           />
         </div>
         <div className="flex flex-col gap-3">
@@ -89,14 +81,37 @@ export default function CreateGatheringForm({
             이미지 선택/첨부
           </label>
           <div className="flex">
-            <FileInputWrap
-              sample={ImgGatheringSamples}
-              value={values.imageUrl}
-              onChange={(newValue) =>
-                setValues((prevValues) => ({ ...prevValues, imageUrl: newValue }))
-              }
+            <Controller
+              name="imageUrl"
+              control={control}
+              rules={{
+                required: '이미지를 선택해주세요.',
+                validate: {
+                  fileSize: (file) =>
+                    file && file instanceof File && file.size <= 5242880
+                      ? true
+                      : '파일 크기는 5MB 이하여야 합니다.',
+                  fileType: (file) =>
+                    file &&
+                    file instanceof File &&
+                    ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type)
+                      ? true
+                      : 'JPG, PNG 파일만 업로드 가능합니다.',
+                },
+              }}
+              render={({ field }) => (
+                <FileInputWrap
+                  {...field}
+                  sample={ImgGatheringSamples}
+                  onChange={(newValue) => {
+                    field.onChange(newValue);
+                    if (newValue instanceof File) trigger('imageUrl');
+                  }}
+                />
+              )}
             />
           </div>
+          {errors.imageUrl && <p className="text-sm text-red-500">{errors.imageUrl.message}</p>}
         </div>
         <div className="flex flex-col gap-3">
           <div className="flex justify-between">
@@ -104,35 +119,33 @@ export default function CreateGatheringForm({
               장소
             </label>
             <span>
-              <span className="text-blue-500">{values.location.length}</span>/20
+              <span className="text-blue-500">{location.length}</span>/20
             </span>
           </div>
-          <TextInput
-            id="gathering-location"
-            variant="filled"
-            value={values.location}
-            register={{
-              ...register('location', {
-                required: '필수 입력사항입니다.',
-                pattern: /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z|A-Z|0-9| ]{1,20}$/,
-                onBlur: () => trigger('location'),
-              }),
-            }}
-            error={errors.location?.message?.toString()}
-            onChange={(e) =>
-              setValues((prevValues) => {
-                if (e.target.value.length <= 20) {
-                  return { ...prevValues, location: e.target.value };
-                }
-                return prevValues;
-              })
-            }
-            placeholder="자세한 주소를 입력해주세요."
-            maxLength={20}
-            classNames={{
-              input:
-                'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl aria-[invalid=true]:border-none',
+          <Controller
+            name="location"
+            control={control}
+            rules={{
+              required: '필수 입력사항입니다.',
             }}
+            render={({ field }) => (
+              <TextInput
+                {...field}
+                id="gathering-location"
+                variant="filled"
+                onChange={(e) => {
+                  field.onChange(e);
+                  if (errors.location) trigger('location'); // 입력 중일 때 유효성 검사 트리거
+                }}
+                error={errors.location?.message}
+                placeholder="약속명을 20자 이내로 입력해주세요."
+                maxLength={20}
+                classNames={{
+                  input:
+                    'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl aria-[invalid=true]:border-none',
+                }}
+              />
+            )}
           />
         </div>
         <div className="flex flex-col gap-3">
@@ -141,46 +154,49 @@ export default function CreateGatheringForm({
               날짜
             </label>
           </div>
-          <DateTimePicker
-            fullDate={new Date()}
-            onChange={(date: Date) =>
-              setValues((prevValues) => ({
-                ...prevValues,
-                dateTime: date.toLocaleString(),
-              }))
-            }
+          <Controller
+            name="dateTime"
+            control={control}
+            rules={{ required: '날짜와 시간을 선택해주세요.' }}
+            render={({ field: { onChange, ...field } }) => (
+              <DateTimePicker
+                {...field}
+                fullDate={new Date()}
+                onChange={(date) => {
+                  const formattedDate = date.toLocaleString();
+                  onChange(formattedDate);
+                  trigger('dateTime'); // 유효성 검사 실행
+                }}
+              />
+            )}
           />
         </div>
         <div className="flex flex-col gap-3">
           <label htmlFor="gathering-totalCount" className="text-base font-semibold text-gray-800">
             모집 정원
           </label>
-          <NumberInput
-            id="gathering-totalCount"
-            variant="filled"
-            value={values.totalCount}
-            {...register('totalCount', {
-              min: 4,
-              max: 20,
-              onBlur: () => trigger('totalCount'),
-            })}
+          <Controller
             name="totalCount"
-            onChange={(newValue) =>
-              setValues((prevValues) => ({ ...prevValues, totalCount: Number(newValue) }))
-            }
-            placeholder="자세한 모집 정원을 입력해주세요."
-            min={4}
-            max={20}
-            classNames={{
-              input:
-                'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl',
+            control={control}
+            rules={{
+              required: '모집 정원을 입력해주세요.',
             }}
+            render={({ field }) => (
+              <NumberInput
+                {...field}
+                id="gathering-totalCount"
+                variant="filled"
+                min={4}
+                max={20}
+                error={errors.totalCount?.message}
+                classNames={{
+                  input:
+                    'h-11 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl',
+                }}
+                placeholder="자세한 모집 정원을 입력해주세요."
+              />
+            )}
           />
-          {errors.totalCount && (
-            <p className="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error">
-              4명 이상 20명 이하로 입력해주세요.
-            </p>
-          )}
         </div>
         <div className="flex flex-col gap-3">
           <div className="flex justify-between">
@@ -188,23 +204,26 @@ export default function CreateGatheringForm({
               모집 설명/공지
             </label>
             <span>
-              <span className="text-blue-500">{values.introduce.length}</span>/100
+              <span className="text-blue-500">{introduce.length}</span>/100
             </span>
           </div>
-          <Textarea
-            placeholder="모집 설명/공지를 100자 이내로 입력해주세요."
-            value={values.introduce}
-            onChange={(e) =>
-              setValues((prevValues) => ({ ...prevValues, introduce: e.target.value }))
-            }
-            maxLength={100}
-            inputClassNames="h-40 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl"
+          <Controller
+            name="introduce"
+            control={control}
+            render={({ field }) => (
+              <Textarea
+                {...field}
+                placeholder="모집 설명/공지를 100자 이내로 입력해주세요."
+                maxLength={100}
+                inputClassNames="h-40 py-2.5 px-4 bg-gray-100 placeholder:text-gray-400 font-pretendard text-base font-medium rounded-xl"
+              />
+            )}
           />
         </div>
         <div className="flex justify-between gap-4 pt-10">
           <Button
             type="submit"
-            disabled={!isFormValid}
+            disabled={!isValid || isSubmitting}
             className="btn-filled h-11 flex-1 text-base font-medium disabled:bg-gray-200"
           >
             {isEdit ? '수정' : '확인'}
diff --git a/src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx b/src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx
index 252eab72..757d010f 100644
--- a/src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx
+++ b/src/app/(crew)/crew/_components/create-gathering-modal/presenter.tsx
@@ -22,30 +22,23 @@ export default function CreateGatheringModalPresenter({
       opened={opened}
       onClose={onClose}
       centered
-      title="약속 잡기"
+      title="약속 만들기"
       styles={{
         root: { '--modal-size': '520px' },
         content: {
           boxShadow: '0 25px 50px -12px rgba(0,0,0,0.1)',
           borderRadius: '12px',
+          overflow: 'hidden',
         },
       }}
       classNames={{
         body: 'p-0',
         title: 'text-xl font-semibold text-gray-900',
       }}
+      scrollAreaComponent={ScrollArea.Autosize}
     >
-      <div>
-        <ScrollArea h={760}>
-          <div className="flex flex-col gap-8 p-6">
-            <CreateGatheringForm
-              data={data}
-              onSubmit={onSubmit}
-              onEdit={onEdit}
-              onClose={onClose}
-            />
-          </div>
-        </ScrollArea>
+      <div className="flex flex-col gap-8 p-6">
+        <CreateGatheringForm data={data} onSubmit={onSubmit} onEdit={onEdit} onClose={onClose} />
       </div>
     </Modal>
   );
diff --git a/src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx b/src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx
index 8c39019f..5ed5812d 100644
--- a/src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx
+++ b/src/app/(crew)/crew/_components/gathering-detail-modal/presenter.tsx
@@ -38,115 +38,117 @@ export default function GatheringDetailModalPresenter({
       classNames={{
         body: 'p-0',
       }}
+      scrollAreaComponent={ScrollArea.Autosize}
     >
       <div>
-        <ScrollArea h={760}>
-          <figure className="relative aspect-video w-full overflow-hidden">
-            <Image
-              src={data?.imageUrl}
-              alt="모임 이미지"
-              fill
-              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-            />
-            {isToday(data?.dateTime) && (
-              <strong className="absolute right-0 top-0 flex items-center gap-2 bg-blue-600 px-4 py-2 text-base font-medium text-white">
-                <Image src={IcoClock} width={15} height={13} alt="아이콘" />
-                <span>오늘 {new Date(data?.dateTime).getHours()}시 마감</span>
-              </strong>
-            )}
-          </figure>
-          <div className="flex flex-col gap-8 p-6">
-            <section>
-              <hgroup>
-                <h2 className="text-xl font-semibold text-gray-800 md:mr-2 md:inline-block">
-                  {data?.title}
-                </h2>
+        <figure className="relative aspect-video w-full overflow-hidden">
+          <Image
+            src={data?.imageUrl}
+            alt="모임 이미지"
+            fill
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+          />
+          {isToday(data?.dateTime) && (
+            <strong className="absolute right-0 top-0 flex items-center gap-2 bg-blue-600 px-4 py-2 text-base font-medium text-white">
+              <Image src={IcoClock} width={15} height={13} alt="아이콘" />
+              <span>
+                오늘 {formatDate(data?.dateTime).time.split(':')[0]}시{' '}
+                {formatDate(data?.dateTime).time.split(':')[1]}분 마감
+              </span>
+            </strong>
+          )}
+        </figure>
+        <div className="flex flex-col gap-8 p-6">
+          <section>
+            <hgroup>
+              <h2 className="text-xl font-semibold text-gray-800 md:mr-2 md:inline-block">
+                {data?.title}
+              </h2>
 
-                <h3 className="text-base font-medium text-gray-700 md:inline-block">
-                  <i
-                    className="mr-2 hidden text-xl font-semibold not-italic text-gray-800 md:inline-block"
-                    aria-hidden="true"
-                  >
-                    |
-                  </i>
-                  <span>{data?.location}</span>
-                </h3>
-              </hgroup>
-              <p className="mb-6 mt-2.5 flex gap-2 text-base font-semibold">
-                <span className="rounded-[4px] bg-gray-900 px-2 py-0.5 text-white">
-                  {formatDate(data?.dateTime).date}
-                </span>
-                <span className="rounded-[4px] bg-gray-900 px-2 py-0.5 text-white">
-                  {formatDate(data?.dateTime).time}
-                </span>
-              </p>
-              <p className="text-base font-medium text-gray-700">{data?.introduce}</p>
-            </section>
-            <section className="text-gray-700">
-              <h3 className="mb-4 flex items-center text-base font-medium">
-                <figure className="relative h-[20px] w-[20px]">
-                  <Image
-                    src={IcoUser}
-                    fill
-                    alt="아이콘"
-                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                  />
-                </figure>
-                <span>
-                  참여인원 {data?.currentCount}/{data?.totalCount}
-                </span>
+              <h3 className="text-base font-medium text-gray-700 md:inline-block">
+                <i
+                  className="mr-2 hidden text-xl font-semibold not-italic text-gray-800 md:inline-block"
+                  aria-hidden="true"
+                >
+                  |
+                </i>
+                <span>{data?.location}</span>
               </h3>
-              <ScrollArea h={152}>
-                <ul className="grid grid-cols-2 gap-4">
-                  {data?.participants.map((participant) => (
-                    <li key={participant.id} className="flex items-center gap-2">
-                      <figure className="relative h-10 w-10 overflow-hidden rounded-full">
-                        <Profile imageUrl={participant?.profileImageUrl} />
-                      </figure>
-                      <span className="text-base font-medium">{participant?.nickname}</span>
-                    </li>
-                  ))}
-                </ul>
-              </ScrollArea>
-            </section>
-            <footer className="flex items-center justify-center gap-3">
+            </hgroup>
+            <p className="mb-6 mt-2.5 flex gap-2 text-base font-semibold">
+              <span className="rounded-[4px] bg-gray-900 px-2 py-0.5 text-white">
+                {formatDate(data?.dateTime).date}
+              </span>
+              <span className="rounded-[4px] bg-gray-900 px-2 py-0.5 text-white">
+                {formatDate(data?.dateTime).time}
+              </span>
+            </p>
+            <p className="text-base font-medium text-gray-700">{data?.introduce}</p>
+          </section>
+          <section className="text-gray-700">
+            <h3 className="mb-4 flex items-center text-base font-medium">
+              <figure className="relative h-[20px] w-[20px]">
+                <Image
+                  src={IcoUser}
+                  fill
+                  alt="아이콘"
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />
+              </figure>
+              <span>
+                참여인원 {data?.currentCount}/{data?.totalCount}
+              </span>
+            </h3>
+            <ScrollArea h={152}>
+              <ul className="grid grid-cols-2 gap-4">
+                {data?.participants.map((participant) => (
+                  <li key={participant.id} className="flex items-center gap-2">
+                    <figure className="relative h-10 w-10 overflow-hidden rounded-full">
+                      <Profile imageUrl={participant?.profileImageUrl} />
+                    </figure>
+                    <span className="text-base font-medium">{participant?.nickname}</span>
+                  </li>
+                ))}
+              </ul>
+            </ScrollArea>
+          </section>
+          <footer className="flex items-center justify-center gap-3">
+            <Button
+              type="button"
+              onClick={onClose}
+              className="btn-outlined h-11 w-29.5 text-base font-medium"
+            >
+              닫기
+            </Button>
+            {!data?.isParticipant && (
               <Button
                 type="button"
-                onClick={onClose}
-                className="btn-outlined h-11 w-29.5 text-base font-medium"
+                onClick={onJoin}
+                className="btn-filled h-11 w-29.5 text-base font-medium"
               >
-                닫기
+                참여하기
               </Button>
-              {!data?.isParticipant && (
-                <Button
-                  type="button"
-                  onClick={onJoin}
-                  className="btn-filled h-11 w-29.5 text-base font-medium"
-                >
-                  참여하기
-                </Button>
-              )}
-              {data?.isParticipant && !data?.isGatherCaptain && (
-                <Button
-                  type="button"
-                  onClick={onExit}
-                  className="btn-filled h-11 w-29.5 text-base font-medium"
-                >
-                  탈퇴하기
-                </Button>
-              )}
-              {data?.isGatherCaptain && (
-                <Button
-                  type="button"
-                  onClick={onDelete}
-                  className="btn-filled h-11 w-29.5 text-base font-medium"
-                >
-                  삭제하기
-                </Button>
-              )}
-            </footer>
-          </div>
-        </ScrollArea>
+            )}
+            {data?.isParticipant && !data?.isGatherCaptain && (
+              <Button
+                type="button"
+                onClick={onExit}
+                className="btn-filled h-11 w-29.5 text-base font-medium"
+              >
+                탈퇴하기
+              </Button>
+            )}
+            {data?.isGatherCaptain && (
+              <Button
+                type="button"
+                onClick={onDelete}
+                className="btn-filled h-11 w-29.5 text-base font-medium"
+              >
+                삭제하기
+              </Button>
+            )}
+          </footer>
+        </div>
       </div>
     </Modal>
   );
diff --git a/src/app/(crew)/crew/create/page.tsx b/src/app/(crew)/crew/create/page.tsx
index d12bccb9..097caf6a 100644
--- a/src/app/(crew)/crew/create/page.tsx
+++ b/src/app/(crew)/crew/create/page.tsx
@@ -1,11 +1,13 @@
 'use client';
 
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import CreateCrewForm from '@/src/app/(crew)/crew/_components/create-crew-form';
 import { CreateCrewRequestTypes } from '@/src/types/create-crew';
 import IcoCreateCrew from '@/public/assets/icons/ic-create-crew.svg';
 
 export default function CreateCrewPage() {
+  const router = useRouter();
   const initialValue: CreateCrewRequestTypes = {
     title: '',
     mainCategory: '',
@@ -18,6 +20,8 @@ export default function CreateCrewPage() {
 
   const handleSubmit = () => {
     // TODO : POST API 연결
+    const response = { id: 1 };
+    router.push(`/crew/detail/${response?.id}`);
   };
 
   return (
diff --git a/src/app/(crew)/crew/detail/[id]/page.tsx b/src/app/(crew)/crew/detail/[id]/page.tsx
index cc5a3306..6460e2e5 100644
--- a/src/app/(crew)/crew/detail/[id]/page.tsx
+++ b/src/app/(crew)/crew/detail/[id]/page.tsx
@@ -20,7 +20,7 @@ export default async function CrewDetailPage() {
         <section className="w-full space-y-6">
           <article className="space-y-6">
             <div className="flex items-center justify-between">
-              <h2 className="text-2xl font-semibold">크루 약속 잡기</h2>
+              <h2 className="text-2xl font-semibold">크루 약속</h2>
               <CreateGathering />
             </div>
             <div className="flex w-full">
diff --git a/src/app/(crew)/page.tsx b/src/app/(crew)/page.tsx
index f10a3333..afe5498a 100644
--- a/src/app/(crew)/page.tsx
+++ b/src/app/(crew)/page.tsx
@@ -46,18 +46,18 @@ export default function Home() {
               leftSection={
                 <Image src={IcoSearch} alt="search" width={21} height={21} className="-mr-4" />
               }
-              placeholder="검색어를 입력하세요"
+              placeholder="크루 이름, 위치를 검색하세요."
               inputClassNames="w-full h-11 pl-12 placeholder:text-gray-500 font-pretendard text-base font-medium text-gray-800 rounded-xl"
             />
           </div>
-          <div className="flex-0 flex justify-between gap-2 md:basis-57 md:gap-4">
+          <div className="flex-0 flex justify-between gap-2 md:basis-67 md:gap-4">
             <DropDown
               name="region"
               variant="default"
               data={regionData.map((dataItem) => dataItem.main)}
               placeholder="전체"
               value={region}
-              className="w-[110px]"
+              className="w-[130px]"
               onChange={setRegion}
             />
             <DropDown
@@ -69,7 +69,7 @@ export default function Home() {
               ]}
               placeholder="최신순"
               value={sort}
-              className="w-[110px]"
+              className="w-[130px]"
               onChange={setSort}
             />
           </div>
diff --git a/src/app/_components/hero/hero-crew.tsx b/src/app/_components/hero/hero-crew.tsx
index 3316364c..893aa3b6 100644
--- a/src/app/_components/hero/hero-crew.tsx
+++ b/src/app/_components/hero/hero-crew.tsx
@@ -1,14 +1,14 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { Button } from '@mantine/core';
 import { useAuthStore } from '@/src/store/use-auth-store';
+import Button from '@/src/components/common/input/button';
 import ImgHeroCrew from '@/public/assets/icons/ic-dumbbell.svg';
 
 export default function HeroCrew() {
   const { isAuth } = useAuthStore();
 
   return (
-    <section className="pb-3 md:pb-4 lg:pb-12.5">
+    <section className="cursor-default pb-3 md:pb-4 lg:pb-12.5">
       <div className="flex items-end justify-between">
         <div className="flex items-center gap-9">
           <Image src={ImgHeroCrew} width={99} height={64} alt="이미지" className="hidden md:flex" />
@@ -21,13 +21,12 @@ export default function HeroCrew() {
             </strong>
           </p>
         </div>
-        <Button
-          component={Link}
+        <Link
           href={isAuth ? '/crew/create' : '/login'}
-          className="-translate-y-1 items-center rounded-xl bg-blue-500 py-2 text-sm font-semibold md:h-11 md:text-lg md:font-bold"
+          className="btn-filled -translate-y-1 items-center rounded-xl px-4 py-2 text-sm font-semibold md:h-11 md:text-lg md:font-bold"
         >
           크루 만들기
-        </Button>
+        </Link>
       </div>
     </section>
   );
diff --git a/src/components/common/input/date-time-picker/index.tsx b/src/components/common/input/date-time-picker/index.tsx
index 11146873..2097a51c 100644
--- a/src/components/common/input/date-time-picker/index.tsx
+++ b/src/components/common/input/date-time-picker/index.tsx
@@ -55,6 +55,7 @@ export default function DateTimePicker({ fullDate, onChange }: DateTimePickerPro
                 'w-[calc(33.333vw-13.333px)] h-[10vw] md:w-[200px] md:h-[80px] text-gray-800',
             }}
             weekendDays={[0]}
+            excludeDate={(date) => dayjs(date).isBefore(dayjs().startOf('day'))}
             previousIcon={<IconArrow direction="left" color="#1F2937" />}
             nextIcon={<IconArrow direction="right" color="#1F2937" />}
             styles={{
diff --git a/src/components/common/input/drop-down/index.tsx b/src/components/common/input/drop-down/index.tsx
index 91a71268..34dfaa0e 100644
--- a/src/components/common/input/drop-down/index.tsx
+++ b/src/components/common/input/drop-down/index.tsx
@@ -1,5 +1,5 @@
-import { LegacyRef, useEffect, useMemo, useState } from 'react';
-import { ComboboxData, Select, SelectProps } from '@mantine/core';
+import { LegacyRef, useEffect, useMemo, useRef, useState } from 'react';
+import { ComboboxData, Select } from '@mantine/core';
 import IconArrow from '@/public/assets/icons/ic-arrow';
 
 export interface DropDownProps {
@@ -11,6 +11,7 @@ export interface DropDownProps {
   onChange: (newValue: string | null) => void;
   className?: string;
   inWhere?: string;
+  error?: string | null;
   ref?: LegacyRef<HTMLInputElement>;
 }
 
@@ -23,28 +24,14 @@ export default function DropDown({
   onChange,
   placeholder,
   className,
-  ref,
+  error,
   ...rest
 }: DropDownProps) {
   const [isFocused, setIsFocused] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleBlur = () => {
-    setIsFocused(false);
-    if (inWhere === 'form' && !value) {
-      setError('필수 입력사항입니다.');
-    } else {
-      setError(null);
-    }
-  };
-
-  const handleChange = (newValue: string | null) => {
-    onChange(newValue);
-    setIsFocused(false);
-    if (inWhere === 'form' && !newValue) {
-      setError(newValue ? null : '필수 입력사항입니다.');
-    }
-  };
+  const formStyle =
+    inWhere === 'form' ? 'bg-gray-100 placeholder-gray-400' : 'bg-white placeholder-gray-800';
 
   const getColor = useMemo(() => {
     if (isFocused) return '#ffffff';
@@ -52,15 +39,29 @@ export default function DropDown({
     return '#D1D5DB';
   }, [isFocused, inWhere]);
 
-  const renderSelectOption: SelectProps['renderOption'] = ({ option }) => (
-    <div data-testid="dropDownOption">{option.label}</div>
-  );
+  const getFocusStyle = () => {
+    if (variant === 'default') {
+      return isFocused
+        ? 'focus:bg-black focus:text-white focus:placeholder:text-white'
+        : 'bg-white text-gray-800 placeholder-gray-800';
+    }
+
+    return isFocused
+      ? 'focus:bg-black focus:text-white focus:placeholder:text-white sort-bg-on pl-10'
+      : 'bg-white text-gray-800 placeholder-gray-800 sort-bg pl-10';
+  };
+
+  const handleChange = (newValue: string | null) => {
+    onChange(newValue);
+    setIsFocused(false);
+    inputRef.current?.blur();
+  };
 
   useEffect(() => {
     if (value === null) {
       onChange(null);
     }
-  }, [value, onChange]);
+  }, [value]);
 
   return (
     <Select
@@ -69,9 +70,8 @@ export default function DropDown({
       data={data}
       value={value}
       name={name}
-      dropdownOpened={isFocused}
       onFocus={() => setIsFocused(true)}
-      onBlur={handleBlur}
+      onBlur={() => setIsFocused(false)}
       onChange={handleChange}
       color={getColor}
       leftSection=""
@@ -79,9 +79,7 @@ export default function DropDown({
       placeholder={placeholder}
       classNames={{
         root: `${className}`,
-        input: `${variant === 'sort' && (isFocused ? 'sort-bg-on pl-10' : 'sort-bg pl-10')} ${
-          inWhere === 'form' ? 'bg-gray-100 placeholder-gray-400' : 'bg-white placeholder-gray-800'
-        } font-pretendard h-10 md:h-11 focus:bg-black focus:placeholder:text-white focus:text-white text-base font-medium rounded-xl border-0 py-2.5 px-3`,
+        input: `${getFocusStyle()} ${formStyle} font-pretendard h-10 md:h-11 text-base font-medium rounded-xl border-0 py-2.5 px-3`,
         section: `end-1 ${variant === 'sort' && 'data-[position=right]:hidden start-1'}`,
         dropdown: 'rounded-xl shadow-xl p-0 border-0 mt-2',
         option: `py-1 m-1 px-2 mr-0 rounded-xl font-pretendard text-gray-800 text-base font-medium hover:bg-blue-100 ${
@@ -96,8 +94,8 @@ export default function DropDown({
         middlewares: { flip: false, shift: false },
         offset: 0,
       }}
-      renderOption={renderSelectOption}
-      ref={ref as LegacyRef<HTMLInputElement>}
+      withCheckIcon={false}
+      ref={inputRef}
       {...rest}
     />
   );
diff --git a/src/components/common/input/file-input-wrap/file-input/index.tsx b/src/components/common/input/file-input-wrap/file-input/index.tsx
index ded11b50..77e06590 100644
--- a/src/components/common/input/file-input-wrap/file-input/index.tsx
+++ b/src/components/common/input/file-input-wrap/file-input/index.tsx
@@ -77,7 +77,7 @@ export default function FileInput({ value, isBlur, onChange }: FileInputProps) {
   }, [fileReader]);
 
   useEffect(() => {
-    if (isBlur) {
+    if (isBlur && value) {
       setPreview(null); // 블러 상태에서 미리보기 제거
     }
   }, [isBlur]);
diff --git a/src/components/common/input/file-input-wrap/file-sample/index.tsx b/src/components/common/input/file-input-wrap/file-sample/index.tsx
index 53e288c6..84d41566 100644
--- a/src/components/common/input/file-input-wrap/file-sample/index.tsx
+++ b/src/components/common/input/file-input-wrap/file-sample/index.tsx
@@ -10,16 +10,6 @@ export interface FileSampleProps {
 export default function FileSample({ image, isBlur, onChange }: FileSampleProps) {
   const radioInput = useRef<HTMLInputElement>(null);
 
-  const convertUrlToFile = async (
-    url: string | undefined,
-    fileName: string,
-    mimeType: string,
-  ): Promise<File> => {
-    const res = await fetch(url?.toString() ?? '');
-    const blob = await res.blob();
-    return new File([blob], fileName, { type: mimeType });
-  };
-
   const handleClick = async () => {
     onChange(image);
   };
diff --git a/src/mock/review-data.ts b/src/mock/review-data.ts
index 40990d37..7bf39305 100644
--- a/src/mock/review-data.ts
+++ b/src/mock/review-data.ts
@@ -11,7 +11,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       rate: 5,
       comment:
         '글이 길어질 경우 글이 길어질 경우 확인 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 글이 길어질 경우 최고의 모임~',
-      createdAt: '2024-10-30T00:30',
+      createdAt: '2024-10-30T10:09:12.306+09:00',
       reviewer: {
         id: 1,
         nickname: '샘플1',
@@ -23,7 +23,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 2,
       rate: 2,
       comment: '솔직히 좀 별로..',
-      createdAt: '2024-10-30T00:34',
+      createdAt: '2024-10-30T10:09:12.306+09:00',
       reviewer: {
         id: 2,
         nickname: '샘플2',
@@ -35,7 +35,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 3,
       rate: 5,
       comment: '진짜 좋은 모임이었다.. 굿',
-      createdAt: '2024-10-30T00:50',
+      createdAt: '2024-10-30T10:09:12.306+09:00',
       reviewer: {
         id: 3,
         nickname: '샘플3',
@@ -47,7 +47,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 4,
       rate: 5,
       comment: '모임계를 뒤집어 엎으셨다',
-      createdAt: '2024-10-30T00:52',
+      createdAt: '2024-10-30T10:09:12.306+09:00',
       reviewer: {
         id: 4,
         nickname: '샘플4',
@@ -59,7 +59,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 5,
       rate: 4,
       comment: '좋아용',
-      createdAt: '2024-10-31T00:52',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 5,
         nickname: '샘플5',
@@ -71,7 +71,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 5,
       rate: 1,
       comment: '별로였음',
-      createdAt: '2024-10-31T00:52',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 6,
         nickname: '샘플6',
@@ -83,7 +83,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 5,
       rate: 4,
       comment: '나만 좋았냐',
-      createdAt: '2024-10-31T00:54',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 7,
         nickname: '샘플7',
@@ -95,7 +95,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 6,
       rate: 0,
       comment: '솔직히 좀 별로..',
-      createdAt: '2024-10-30T00:56',
+      createdAt: '2024-10-30T10:09:12.306+09:00',
       reviewer: {
         id: 2,
         nickname: '샘플2',
@@ -107,7 +107,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 7,
       rate: 5,
       comment: '진짜 좋은 모임이었다.. 굿',
-      createdAt: '2024-10-30T00:56',
+      createdAt: '2024-10-30T10:09:12.306+09:00',
       reviewer: {
         id: 3,
         nickname: '샘플3',
@@ -119,7 +119,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 8,
       rate: 4,
       comment: '모임계를 뒤집어 엎으셨다',
-      createdAt: '2024-10-30T00:56',
+      createdAt: '2024-10-30T10:09:12.306+09:00',
       reviewer: {
         id: 4,
         nickname: '샘플4',
@@ -131,7 +131,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 9,
       rate: 5,
       comment: '좋아용',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 5,
         nickname: '샘플5',
@@ -143,7 +143,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 10,
       rate: 2,
       comment: '별로였음',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 6,
         nickname: '샘플6',
@@ -155,7 +155,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 11,
       rate: 5,
       comment: '나만 좋았냐',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 7,
         nickname: '샘플7',
@@ -167,7 +167,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 12,
       rate: 4,
       comment: '모임계를 뒤집어 엎으셨다',
-      createdAt: '2024-10-30T00:56',
+      createdAt: '2024-10-30T10:09:12.306+09:00',
       reviewer: {
         id: 4,
         nickname: '샘플4',
@@ -179,7 +179,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 13,
       rate: 5,
       comment: '좋아용',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 5,
         nickname: '샘플5',
@@ -191,7 +191,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 14,
       rate: 1,
       comment: '별로였음',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 6,
         nickname: '샘플6',
@@ -203,7 +203,7 @@ export const CrewReviewData: { data: CrewReview[] } = {
       id: 15,
       rate: 4,
       comment: '나만 좋았냐',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       reviewer: {
         id: 7,
         nickname: '샘플7',
@@ -223,7 +223,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 3,
       rate: 3,
       comment: '리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-11-09T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -233,7 +233,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 4,
       rate: 4,
       comment: '다시는 안 간다',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -243,7 +243,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 5,
       rate: 2,
       comment: '펭귄이랑 친구하고싶어요',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -253,7 +253,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 6,
       rate: 5,
       comment: '복식호흡을 할 수 있게 됐어요 감사합니다',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:006',
       gatheringLocation: '어느동',
     },
     {
@@ -273,7 +273,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 8,
       rate: 4,
       comment: '다시는 안 간다',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -283,7 +283,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 9,
       rate: 3,
       comment: '펭귄이랑 친구하고싶어요',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -293,7 +293,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 10,
       rate: 5,
       comment: '복식호흡을 할 수 있게 됐어요 감사합니다',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -303,7 +303,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 11,
       rate: 4,
       comment: '리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰리뷰',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -313,7 +313,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 12,
       rate: 3,
       comment: '다시는 안 간다',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -323,7 +323,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 13,
       rate: 2,
       comment: '펭귄이랑 친구하고싶어요',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
     {
@@ -333,7 +333,7 @@ export const MyReviewData: { data: MyReview[] } = {
       id: 14,
       rate: 5,
       comment: '복식호흡을 할 수 있게 됐어요 감사합니다',
-      createdAt: '2024-10-31T00:56',
+      createdAt: '2024-10-31T10:09:12.306+09:00',
       gatheringLocation: '어느동',
     },
   ],
diff --git a/src/utils/is-today.ts b/src/utils/is-today.ts
index fb92a92f..1e30d13e 100644
--- a/src/utils/is-today.ts
+++ b/src/utils/is-today.ts
@@ -1,10 +1,16 @@
 export default function isToday(dateString: string): boolean {
-  const inputDate = new Date(dateString);
-  const today = new Date();
+  const date = new Date(dateString);
+
+  const now = new Date();
+  const utc = now.getTime() + now.getTimezoneOffset() * 60 * 1000;
+
+  const koreaTimeDiff = 9 * 60 * 60 * 1000;
+  const koreaNow = new Date(utc + koreaTimeDiff);
 
   return (
-    inputDate.getDate() === today.getDate() &&
-    inputDate.getMonth() === today.getMonth() &&
-    inputDate.getFullYear() === today.getFullYear()
+    date.getDate() === koreaNow.getDate() &&
+    date.getMonth() === koreaNow.getMonth() &&
+    date.getFullYear() === koreaNow.getFullYear() &&
+    date.getTime() >= koreaNow.getTime()
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 07e5ef6c..3b5a9c88 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -57,7 +57,7 @@ const config: Config = {
         18: '72px',
       },
       flexBasis: {
-        57: '228px',
+        67: '268px',
       },
       gap: {
         6.5: '26px',