From 68c13bd0710ac571984d2562f7c17898d0a3b33d Mon Sep 17 00:00:00 2001
From: Ryan-TheLion <dae7249@nate.com>
Date: Thu, 9 May 2024 20:34:42 +0900
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=EC=BB=A4=ED=94=BC=EC=B1=97=20?=
 =?UTF-8?q?=EC=86=8C=EA=B0=9C=EA=B8=80=20=EC=A0=9C=ED=95=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 10자이상 1000자 이하로 유효성 검사 및
관련 메시지 수정
---
 src/constants/limitation.ts                               | 2 ++
 src/constants/message/validation.ts                       | 1 +
 .../create/components/sections/content/ContentSection.tsx | 4 ++--
 .../create/controls/rules/chat-content-rules.ts           | 8 ++++----
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/constants/limitation.ts b/src/constants/limitation.ts
index 060df4f1..ff88f597 100644
--- a/src/constants/limitation.ts
+++ b/src/constants/limitation.ts
@@ -30,6 +30,8 @@ const Limitation = {
   mentoring_time: 10,
   title_limit_under: 5,
   title_limit_over: 100,
+  chat_content_min_length: 10,
+  chat_content_max_length: 1000,
   chat_introduction_limit_under: 10,
   chat_introduction_limit_over: 150,
   content_limit_under: 10,
diff --git a/src/constants/message/validation.ts b/src/constants/message/validation.ts
index 1bcaedcd..3775d5e6 100644
--- a/src/constants/message/validation.ts
+++ b/src/constants/message/validation.ts
@@ -10,6 +10,7 @@ export const validationMessage = {
   noTime: "정확한 시간대를 설정해주세요",
   noLocation: "모임 위치를 설정해주세요",
   noHeadCnt: "모임 인원을 설정해주세요",
+  chatContentLength: `소개글은 최소 ${Limitation.chat_content_min_length}자 이상 ${Limitation.chat_content_max_length}자 이하이어야 합니다.`,
   underContentLimit: `본문 내용은 최소 ${Limitation.content_limit_under}자 이상이어야 합니다.`,
   overContentLimit: `본문 내용은 최대 ${Limitation.content_limit_over}자 이하이어야 합니다.`,
   underAnswerLimit: `댓글 내용은 최소 ${Limitation.answer_limit_under}자 이상이어야 합니다.`,
diff --git a/src/page/coffee-chat/create/components/sections/content/ContentSection.tsx b/src/page/coffee-chat/create/components/sections/content/ContentSection.tsx
index 905a1fb9..60386a92 100644
--- a/src/page/coffee-chat/create/components/sections/content/ContentSection.tsx
+++ b/src/page/coffee-chat/create/components/sections/content/ContentSection.tsx
@@ -33,8 +33,8 @@ function CoffeeChatContentSection({ control }: CoffeeChatContentSectionProps) {
               </div>
               <TextCounter
                 text={field.value}
-                min={Limitation.content_limit_under}
-                max={Limitation.content_limit_over}
+                min={Limitation.chat_content_min_length}
+                max={Limitation.chat_content_max_length}
                 className="text-lg block text-right h-2 mr-5"
               />
             </div>
diff --git a/src/page/coffee-chat/create/controls/rules/chat-content-rules.ts b/src/page/coffee-chat/create/controls/rules/chat-content-rules.ts
index 698c21ab..9780c7a5 100644
--- a/src/page/coffee-chat/create/controls/rules/chat-content-rules.ts
+++ b/src/page/coffee-chat/create/controls/rules/chat-content-rules.ts
@@ -11,11 +11,11 @@ type ChatContentRules = Omit<
 export const chatContentRules: ChatContentRules = {
   required: validationMessage.noContent,
   minLength: {
-    value: Limitation.content_limit_under,
-    message: validationMessage.underContentLimit,
+    value: Limitation.chat_content_min_length,
+    message: validationMessage.chatContentLength,
   },
   maxLength: {
-    value: Limitation.content_limit_over,
-    message: validationMessage.overContentLimit,
+    value: Limitation.chat_content_max_length,
+    message: validationMessage.chatContentLength,
   },
 }

From 31fdd45ba642ac289d884d6456e48989b2fb9022 Mon Sep 17 00:00:00 2001
From: Ryan-TheLion <dae7249@nate.com>
Date: Fri, 10 May 2024 15:47:56 +0900
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=94=94=EB=B0=94=EC=9D=B4=EC=8A=A4=20=EC=BA=98=EB=A6=B0?=
 =?UTF-8?q?=EB=8D=94=20active=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 휴대폰에서 active 된 tile 이 리액트 캘린더
기본 배경색상이 적용되는 현상 수정
- border-radius 속성 제거
---
 src/styles/react-calendar/Base.css           | 13 +++++++++++--
 src/styles/react-calendar/CoffeeChatTile.css |  3 ---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/styles/react-calendar/Base.css b/src/styles/react-calendar/Base.css
index bd3c1c8c..6e578cc4 100644
--- a/src/styles/react-calendar/Base.css
+++ b/src/styles/react-calendar/Base.css
@@ -67,6 +67,11 @@
   color: white;
 }
 
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #00c471;
+}
+
 .react-calendar__tile--range {
   background: #f8f8fa;
   color: #00c471;
@@ -99,7 +104,6 @@
   .react-calendar__tile:enabled:focus {
     background: #00c47133;
     color: #00c471;
-    border-radius: 6px;
   }
 
   .react-calendar__tile--now:enabled:hover,
@@ -114,7 +118,6 @@
   .react-calendar__tile--hasActive:enabled:focus {
     background: #f8f8fa;
     border-color: #00c471;
-    border: 1px;
   }
 
   .react-calendar__tile--active:enabled:hover,
@@ -129,6 +132,12 @@
 }
 
 @media (hover: none) {
+  .react-calendar__tile--active:hover,
+  .react-calendar__tile--active:focus {
+    background: #00c471;
+    color: white;
+  }
+
   .react-calendar__tile--active:enabled:hover,
   .react-calendar__tile--active:enabled:focus {
     background: #00c471;
diff --git a/src/styles/react-calendar/CoffeeChatTile.css b/src/styles/react-calendar/CoffeeChatTile.css
index 903f5d12..dbdd2d8e 100644
--- a/src/styles/react-calendar/CoffeeChatTile.css
+++ b/src/styles/react-calendar/CoffeeChatTile.css
@@ -1,19 +1,16 @@
 .react-calendar__tile:not(.disabled).reservation-possible {
   background: #fbf8ce;
-  border-radius: 6px;
 }
 
 .react-calendar__tile:not(.disabled).reservation-confirm {
   background: lightgray;
   color: #fff;
   font-weight: bold;
-  border-radius: 6px;
 }
 
 .react-calendar__tile:not(.disabled).mentoring {
   background: #00c471;
   color: #fff;
-  border-radius: 6px;
 }
 .react-calendar__tile--active.mentoring abbr {
   color: #ffff80;

From bcebd94e384c577eb9d7e201f93819e2ae2d6469 Mon Sep 17 00:00:00 2001
From: Ryan-TheLion <dae7249@nate.com>
Date: Fri, 10 May 2024 16:31:22 +0900
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EA=B0=80=EB=93=9C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 로그인 되지 않은 유저 가드 페이지 컴포넌트로 분리
- 클라이언트 세션도 초기화
---
 .../_components/guard-page/Unauthorized.tsx   | 25 +++++++++++++++++++
 src/app/coding-meetings/create/page.tsx       | 11 ++------
 2 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 src/app/coding-meetings/_components/guard-page/Unauthorized.tsx

diff --git a/src/app/coding-meetings/_components/guard-page/Unauthorized.tsx b/src/app/coding-meetings/_components/guard-page/Unauthorized.tsx
new file mode 100644
index 00000000..9b554baa
--- /dev/null
+++ b/src/app/coding-meetings/_components/guard-page/Unauthorized.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import Mentee from "@/components/shared/animation/Mentee"
+import notificationMessage from "@/constants/message/notification"
+import { useClientSession } from "@/hooks/useClientSession"
+import { useEffect } from "react"
+
+function CreateCodingMeetingUnauthorized() {
+  const { clientSessionReset } = useClientSession()
+
+  useEffect(() => {
+    clientSessionReset()
+  }, []) /* eslint-disable-line */
+
+  return (
+    <div className="text-center">
+      <div className="w-[400px] min-h-[266px] m-auto mt-[100px]">
+        <Mentee />
+      </div>
+      <div className="text-xl">{notificationMessage.unauthorized}.</div>
+    </div>
+  )
+}
+
+export default CreateCodingMeetingUnauthorized
diff --git a/src/app/coding-meetings/create/page.tsx b/src/app/coding-meetings/create/page.tsx
index 787c954b..90f49e5a 100644
--- a/src/app/coding-meetings/create/page.tsx
+++ b/src/app/coding-meetings/create/page.tsx
@@ -5,6 +5,7 @@ import CreateCodingMeetingPage from "@/page/coding-meetings/create/CreateCodingM
 import { getServerSession } from "@/util/auth"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
+import CreateCodingMeetingUnauthorized from "../_components/guard-page/Unauthorized"
 
 export const metadata: Metadata = {
   title: `모각코 생성`,
@@ -33,17 +34,9 @@ export const metadata: Metadata = {
 export default async function CreateCodingMeetingsPage() {
   const { user } = getServerSession()
 
-  // [TODO]
   try {
     if (!user) {
-      return (
-        <div className="text-center">
-          <div className="w-[400px] m-auto mt-[100px]">
-            <Mentee />
-          </div>
-          <div className="text-xl">{notificationMessage.unauthorized}.</div>
-        </div>
-      )
+      return <CreateCodingMeetingUnauthorized />
     }
 
     return <CreateCodingMeetingPage editMode="create" />

From 226324440eca845bd36cc4308bedf27411abf7ec Mon Sep 17 00:00:00 2001
From: Ryan-TheLion <dae7249@nate.com>
Date: Mon, 20 May 2024 22:08:00 +0900
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=EB=AA=A8=EA=B0=81=EC=BD=94=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1,=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- react hook form 의 FormProvider, Controller, FieldArray 를 활용하여,
  불필요한 리코일 atom (전역상태) 제거
- react hook form field의 rules로 필드 유효성 검증의 관심사 분리
- invalid form 에 대한 에러 처리로직 간소화
- 생성, 수정 이후 정상적으로 리다이렉트 될 수 있도록 리다이렉트 주소
  수정
- 타입 개선, 타입 안정성을 확보하려고 함(함수 override 등)
- base 캘린더 컴포넌트에 tileDisabled prop 추가, 모각코 캘린더 타일 css
  추가
---
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  31 ++
 src/app/coding-meetings/create/page.tsx       |   3 -
 src/app/coding-meetings/post/[token]/page.tsx |   3 +-
 src/app/layout.tsx                            |   7 +-
 src/components/LinkToListPage.tsx             |   4 +-
 src/components/shared/TextCounter.tsx         |   2 +-
 src/constants/limitation.ts                   |  15 +
 src/constants/select.ts                       |   1 -
 src/constants/timeOptions.ts                  |  56 +--
 src/interfaces/form.ts                        |  39 +-
 src/mocks/db/coding-meetings.ts               |   6 +-
 src/mocks/db/questions.ts                     |   2 +-
 .../coding-meeting/create-coding-meeting.ts   |  29 +-
 .../coding-meeting/update-coding-meeting.ts   |  44 +-
 .../create/CodingMeetingFormProvider.tsx      |  26 +
 .../create/CreateCodingMeetingPage.tsx        | 473 ++++--------------
 .../create/CreateCodingMeetingPage.types.ts   |  63 ---
 .../components/CodingMeetingSection.tsx       |  26 +-
 .../components/CustomCalendar/Calendar.css    |   6 -
 .../CustomCalendar/CustomCalendar.tsx         |  63 ---
 .../create/components/CustomMap/kakaoMap.tsx  | 115 -----
 .../create/components/DateTimeSection.tsx     | 143 ------
 .../create/components/HashTagsSection.tsx     | 119 -----
 .../create/components/HeadCountSection.tsx    |  59 ---
 .../create/components/LocationSection.tsx     | 195 --------
 .../calendar/CreateCodingMeetingCalendar.tsx  |  60 +++
 .../section/content/ContentSection.tsx        |  20 +
 .../section/date-time/DateTimeSection.tsx     |  81 +++
 .../section/hash-tags/HashTagsController.tsx  | 213 ++++++++
 .../section/hash-tags/HashTagsSection.tsx     |  14 +
 .../section/location/LocationDialog.tsx       |  33 ++
 .../section/location/LocationSection.tsx      |  23 +
 .../location/SearchResultPlaceMaps.tsx        | 120 +++++
 .../section/location/search/AutoComplete.tsx  |  76 +++
 .../location/search/HighlightPlaceName.tsx    |  69 +++
 .../location/search/SearchController.tsx      | 278 ++++++++++
 .../member-count/MemberCountSection.tsx       |  20 +
 .../components/section/title/TitleSection.tsx |  12 +
 .../create/controls/ContentController.tsx     |  45 ++
 .../create/controls/LocationController.tsx    | 112 +++++
 .../create/controls/MemberCountController.tsx |  78 +++
 .../create/controls/TitleController.tsx       |  57 +++
 .../CodingMeetingEndHourController.tsx        |  77 +++
 .../CodingMeetingEndMinuteController.tsx      |  59 +++
 .../content/coding-meeting-content-rules.ts   |  20 +
 .../date/day/coding-meeting-day-rules.ts      |  21 +
 .../end-time/coding-meeting-end-hour-rules.ts |  24 +
 .../coding-meeting-end-minute-rules.ts        |  43 ++
 .../coding-meeting-start-hour-rules.ts        |  24 +
 .../coding-meeting-start-minute-rules.ts      |  43 ++
 .../controls/rules/location/location-rules.ts |   9 +
 .../rules/location/location-search-rules.ts   |  11 +
 .../rules/member-count/member-count-rules.ts  |  20 +
 .../controls/rules/title/title-rules.ts       |  21 +
 .../CodingMeetingStartHourController.tsx      |  77 +++
 .../CodingMeetingStartMinuteController.tsx    |  59 +++
 .../create/hooks/useCreateCodingMeeting.tsx   | 113 +++++
 .../useHandleCreateCodingMeetingTime.tsx      |  72 ---
 .../create/hooks/useKakaoMapPlaceApi.tsx      |  30 ++
 .../create/hooks/useUpdateCodingMeeting.tsx   | 112 +++++
 src/page/coding-meetings/util/parser.ts       | 112 +++++
 .../CreateCoffeeChatReservationPage.tsx       |   5 +-
 .../components/sections/date/TimeOptions.tsx  |  11 +-
 .../create/controls/rules/hashtag-rules.ts    |   8 +
 .../coffee-chat/create/controls/util/form.ts  |  26 -
 .../calendar-base/ReservationCalendarBase.tsx |  48 +-
 src/react-query/coding-meeting.ts             |  65 ---
 src/recoil/atoms/coding-meeting/dateTime.tsx  |  28 --
 src/recoil/atoms/coding-meeting/hashtags.tsx  |   6 -
 src/recoil/atoms/coding-meeting/headcount.tsx |   6 -
 src/recoil/atoms/coding-meeting/mapData.tsx   |  47 +-
 .../react-calendar/CodingMeetingTile.css      |  11 +
 src/util/historySession/path.ts               |   5 +
 src/util/hook-form/error.ts                   |  50 ++
 src/util/validate.ts                          |   3 +
 76 files changed, 2654 insertions(+), 1455 deletions(-)
 delete mode 100644 src/constants/select.ts
 create mode 100644 src/page/coding-meetings/create/CodingMeetingFormProvider.tsx
 delete mode 100644 src/page/coding-meetings/create/CreateCodingMeetingPage.types.ts
 delete mode 100644 src/page/coding-meetings/create/components/CustomCalendar/Calendar.css
 delete mode 100644 src/page/coding-meetings/create/components/CustomCalendar/CustomCalendar.tsx
 delete mode 100644 src/page/coding-meetings/create/components/CustomMap/kakaoMap.tsx
 delete mode 100644 src/page/coding-meetings/create/components/DateTimeSection.tsx
 delete mode 100644 src/page/coding-meetings/create/components/HashTagsSection.tsx
 delete mode 100644 src/page/coding-meetings/create/components/HeadCountSection.tsx
 delete mode 100644 src/page/coding-meetings/create/components/LocationSection.tsx
 create mode 100644 src/page/coding-meetings/create/components/calendar/CreateCodingMeetingCalendar.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/content/ContentSection.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/date-time/DateTimeSection.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/hash-tags/HashTagsController.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/hash-tags/HashTagsSection.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/location/LocationDialog.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/location/LocationSection.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/location/SearchResultPlaceMaps.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/location/search/AutoComplete.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/location/search/HighlightPlaceName.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/location/search/SearchController.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/member-count/MemberCountSection.tsx
 create mode 100644 src/page/coding-meetings/create/components/section/title/TitleSection.tsx
 create mode 100644 src/page/coding-meetings/create/controls/ContentController.tsx
 create mode 100644 src/page/coding-meetings/create/controls/LocationController.tsx
 create mode 100644 src/page/coding-meetings/create/controls/MemberCountController.tsx
 create mode 100644 src/page/coding-meetings/create/controls/TitleController.tsx
 create mode 100644 src/page/coding-meetings/create/controls/end-time/CodingMeetingEndHourController.tsx
 create mode 100644 src/page/coding-meetings/create/controls/end-time/CodingMeetingEndMinuteController.tsx
 create mode 100644 src/page/coding-meetings/create/controls/rules/content/coding-meeting-content-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/date/day/coding-meeting-day-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/date/end-time/coding-meeting-end-hour-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/date/end-time/coding-meeting-end-minute-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/date/start-time/coding-meeting-start-hour-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/date/start-time/coding-meeting-start-minute-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/location/location-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/location/location-search-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/member-count/member-count-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/rules/title/title-rules.ts
 create mode 100644 src/page/coding-meetings/create/controls/start-time/CodingMeetingStartHourController.tsx
 create mode 100644 src/page/coding-meetings/create/controls/start-time/CodingMeetingStartMinuteController.tsx
 create mode 100644 src/page/coding-meetings/create/hooks/useCreateCodingMeeting.tsx
 delete mode 100644 src/page/coding-meetings/create/hooks/useHandleCreateCodingMeetingTime.tsx
 create mode 100644 src/page/coding-meetings/create/hooks/useKakaoMapPlaceApi.tsx
 create mode 100644 src/page/coding-meetings/create/hooks/useUpdateCodingMeeting.tsx
 create mode 100644 src/page/coding-meetings/util/parser.ts
 delete mode 100644 src/page/coffee-chat/create/controls/util/form.ts
 delete mode 100644 src/react-query/coding-meeting.ts
 delete mode 100644 src/recoil/atoms/coding-meeting/dateTime.tsx
 delete mode 100644 src/recoil/atoms/coding-meeting/hashtags.tsx
 delete mode 100644 src/recoil/atoms/coding-meeting/headcount.tsx
 create mode 100644 src/styles/react-calendar/CodingMeetingTile.css
 create mode 100644 src/util/hook-form/error.ts

diff --git a/package.json b/package.json
index 4a5b8bd0..c7f4a3c2 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "react-calendar": "^4.7.0",
     "react-dom": "^18",
     "react-error-boundary": "^4.0.12",
+    "react-highlight-words": "^0.20.0",
     "react-hook-form": "^7.49.0",
     "react-icons": "^4.12.0",
     "react-kakao-maps-sdk": "^1.1.26",
@@ -90,6 +91,7 @@
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-highlight-words": "^0.16.7",
     "@types/react-paginate": "^7.1.4",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/sockjs": "^0.3.36",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3803378..df17cfa6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,6 +149,9 @@ dependencies:
   react-error-boundary:
     specifier: ^4.0.12
     version: 4.0.12(react@18.2.0)
+  react-highlight-words:
+    specifier: ^0.20.0
+    version: 0.20.0(react@18.2.0)
   react-hook-form:
     specifier: ^7.49.0
     version: 7.49.0(react@18.2.0)
@@ -238,6 +241,9 @@ devDependencies:
   '@types/react-dom':
     specifier: ^18
     version: 18.2.17
+  '@types/react-highlight-words':
+    specifier: ^0.16.7
+    version: 0.16.7
   '@types/react-paginate':
     specifier: ^7.1.4
     version: 7.1.4
@@ -2307,6 +2313,12 @@ packages:
     dependencies:
       '@types/react': 18.2.43
 
+  /@types/react-highlight-words@0.16.7:
+    resolution: {integrity: sha512-+upXTIaRd3rGvh1aDQSs9z5X+sV3UM6Jrmjk03GN2GXl4v/+iOJKQj2LZHo6Vp2IoTvMdtxgME26feqo12xXLg==}
+    dependencies:
+      '@types/react': 18.2.43
+    dev: true
+
   /@types/react-paginate@7.1.4:
     resolution: {integrity: sha512-6fqZvDzRJHubOGl6c7cGFC9ysgQSWYy0Gpus9HjORpydlcXgPnT8x+aKgqwCdtpZrRTwcBz2Q7JWAOYaRrsXGg==}
     dependencies:
@@ -4113,6 +4125,10 @@ packages:
     resolution: {integrity: sha512-EWGTfnTqAO2L/j5HZgoM/3z82L7necsJ0pO9Tp0X1wil3PDLrkypTBRgVO2ExehEEvUycejZD3FuRaXpZZc3kw==}
     dev: true
 
+  /highlight-words-core@1.2.2:
+    resolution: {integrity: sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==}
+    dev: false
+
   /highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
     dev: false
@@ -4716,6 +4732,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /memoize-one@4.0.3:
+    resolution: {integrity: sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==}
+    dev: false
+
   /memoize-one@5.2.1:
     resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
     dev: false
@@ -5483,6 +5503,17 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-highlight-words@0.20.0(react@18.2.0):
+    resolution: {integrity: sha512-asCxy+jCehDVhusNmCBoxDf2mm1AJ//D+EzDx1m5K7EqsMBIHdZ5G4LdwbSEXqZq1Ros0G0UySWmAtntSph7XA==}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
+    dependencies:
+      highlight-words-core: 1.2.2
+      memoize-one: 4.0.3
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /react-hook-form@7.49.0(react@18.2.0):
     resolution: {integrity: sha512-gf4qyY4WiqK2hP/E45UUT6wt3Khl49pleEVcIzxhLBrD6m+GMWtLRk0vMrRv45D1ZH8PnpXFwRPv0Pewske2jw==}
     engines: {node: '>=18', pnpm: '8'}
diff --git a/src/app/coding-meetings/create/page.tsx b/src/app/coding-meetings/create/page.tsx
index 90f49e5a..24c2dcfc 100644
--- a/src/app/coding-meetings/create/page.tsx
+++ b/src/app/coding-meetings/create/page.tsx
@@ -1,7 +1,4 @@
-import Mentee from "@/components/shared/animation/Mentee"
-import notificationMessage from "@/constants/message/notification"
 import CreateCodingMeetingPage from "@/page/coding-meetings/create/CreateCodingMeetingPage"
-
 import { getServerSession } from "@/util/auth"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
diff --git a/src/app/coding-meetings/post/[token]/page.tsx b/src/app/coding-meetings/post/[token]/page.tsx
index 360953a4..8d0a2a5e 100644
--- a/src/app/coding-meetings/post/[token]/page.tsx
+++ b/src/app/coding-meetings/post/[token]/page.tsx
@@ -69,12 +69,13 @@ export default async function UpdateCodingMeetingsPage({
         />
       )
     }
+
     return (
       <div>
         <CreateCodingMeetingPage
           editMode="update"
           coding_meeting_token={params.token}
-          initialValues={codingMeetingPayload.data}
+          initialCodingMeeting={codingMeetingPayload.data}
         />
       </div>
     )
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 44e8e505..0399493f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,6 +15,7 @@ import ScrollTop from "@/components/shared/ScrollTop"
 import ToastDismissEventListener from "@/components/layout/ToastDismissListener"
 import GoogleAnalyticsProvider from "@/google-analytics/GoogleAnalyticsProvider"
 import HistorySession from "@/components/history/HistorySession"
+import CodingMeetingFormProvider from "@/page/coding-meetings/create/CodingMeetingFormProvider"
 
 export const dynamic = "force-dynamic"
 
@@ -68,8 +69,10 @@ export default function RootLayout({
             <HistorySession />
             <PopupEventListener />
             <ScrollTop />
-            <Layout>{children}</Layout>
-            <Modal />
+            <CodingMeetingFormProvider>
+              <Layout>{children}</Layout>
+              <Modal />
+            </CodingMeetingFormProvider>
             <ToastContainer limit={1} />
             <ToastDismissEventListener />
           </ReactQueryProvider>
diff --git a/src/components/LinkToListPage.tsx b/src/components/LinkToListPage.tsx
index 614360a9..18c752e1 100644
--- a/src/components/LinkToListPage.tsx
+++ b/src/components/LinkToListPage.tsx
@@ -4,7 +4,7 @@ import { getHistorySessionPath } from "@/util/historySession/path"
 import { useRouter } from "next/navigation"
 import { DirectionIcons } from "./icons/Icons"
 
-export type TargetPage = "qna" | "chat"
+export type TargetPage = "qna" | "chat" | "coding-meetings"
 
 interface LinkToListPageProps {
   to: TargetPage
@@ -13,11 +13,13 @@ interface LinkToListPageProps {
 const initialPath: Record<TargetPage, string> = {
   qna: "/qna?page=0",
   chat: "/chat?page=0",
+  "coding-meetings": "/coding-meetings?page=0&size=10&filter=all",
 } as const
 
 const targetPathname: Record<TargetPage, string> = {
   qna: "/qna",
   chat: "/chat",
+  "coding-meetings": "/coding-meetings",
 } as const
 
 function LinkToListPage({ to }: LinkToListPageProps) {
diff --git a/src/components/shared/TextCounter.tsx b/src/components/shared/TextCounter.tsx
index fa95a47e..fbe1e207 100644
--- a/src/components/shared/TextCounter.tsx
+++ b/src/components/shared/TextCounter.tsx
@@ -17,7 +17,7 @@ interface TextCounterProps {
 }
 
 function TextCounter({
-  text,
+  text = "",
   min,
   max,
   className,
diff --git a/src/constants/limitation.ts b/src/constants/limitation.ts
index ff88f597..89723399 100644
--- a/src/constants/limitation.ts
+++ b/src/constants/limitation.ts
@@ -62,3 +62,18 @@ const Limitation = {
 } as const
 
 export default Limitation
+
+export const CODING_MEETING_LIMITS = {
+  title: {
+    minLength: 5,
+    maxLength: 100,
+  },
+  memberCount: {
+    min: 3,
+    max: 6,
+  },
+  content: {
+    minLength: 10,
+    maxLength: 10000,
+  },
+}
diff --git a/src/constants/select.ts b/src/constants/select.ts
deleted file mode 100644
index 4db07061..00000000
--- a/src/constants/select.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const HeadCountValue = ["3", "4", "5", "6"] as const
diff --git a/src/constants/timeOptions.ts b/src/constants/timeOptions.ts
index 7cc5c06b..180e39b6 100644
--- a/src/constants/timeOptions.ts
+++ b/src/constants/timeOptions.ts
@@ -1,9 +1,32 @@
+export type CodingMeetingHourMinuteTime = {
+  hour:
+    | (typeof CODING_MEETING_HOURS)["AM"][number]
+    | (typeof CODING_MEETING_HOURS)["PM"][number]
+  minute: (typeof CODING_MEETING_MINUTES)[number]
+}
+
+export type CodingMeetingTimeOption = {
+  AM: `${(typeof CODING_MEETING_HOURS)["AM"][number]}:${(typeof CODING_MEETING_MINUTES)[number]}`
+  PM: `${(typeof CODING_MEETING_HOURS)["PM"][number]}:${(typeof CODING_MEETING_MINUTES)[number]}`
+}
+export type CodingMeetingTimeOptions = {
+  AM: Array<CodingMeetingTimeOption["AM"]>
+  PM: Array<CodingMeetingTimeOption["PM"]>
+}
+
 export const enum TimeZone {
   AM = "AM",
   PM = "PM",
 }
 
-export const AM = [
+export const CODING_MEETING_HOURS = {
+  AM: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11"],
+  PM: ["12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
+} as const
+
+export const CODING_MEETING_MINUTES = ["00", "30"] as const
+
+export const CODING_MEETING_AM_OPTIONS: CodingMeetingTimeOptions["AM"] = [
   "00:00",
   "00:30",
   "01:00",
@@ -30,7 +53,7 @@ export const AM = [
   "11:30",
 ]
 
-export const PM = [
+export const CODING_MEETING_PM_OPTIONS: CodingMeetingTimeOptions["PM"] = [
   "12:00",
   "12:30",
   "13:00",
@@ -56,32 +79,3 @@ export const PM = [
   "23:00",
   "23:30",
 ]
-
-const hours = [
-  "00",
-  "01",
-  "02",
-  "03",
-  "04",
-  "05",
-  "06",
-  "07",
-  "08",
-  "09",
-  "10",
-  "11",
-  "12",
-  "13",
-  "14",
-  "15",
-  "16",
-  "17",
-  "18",
-  "19",
-  "20",
-  "21",
-  "22",
-  "23",
-]
-const minutes = ["00", "30"]
-export const timeSelect = { hours, minutes }
diff --git a/src/interfaces/form.ts b/src/interfaces/form.ts
index a3e3cbc3..bc7b1512 100644
--- a/src/interfaces/form.ts
+++ b/src/interfaces/form.ts
@@ -1,3 +1,5 @@
+import { CodingMeetingHourMinuteTime } from "@/constants/timeOptions"
+import { CodingMeetingHashTag } from "./coding-meetings"
 export interface LoginFormData {
   email: string
   password: string
@@ -20,7 +22,42 @@ export interface AnswerFormData {
   answer: string
 }
 
-// comment
+// coding-meeting
+
+// [coding-meeting] form data
+export type CodingMeetingPageMode = "create" | "update"
+
+export interface CodingMeetingFormData {
+  title: string
+  content: string
+  member_upper_limit: number
+  date: {
+    day: Date
+    start_time: [
+      CodingMeetingHourMinuteTime["hour"],
+      CodingMeetingHourMinuteTime["minute"],
+    ]
+    end_time: [
+      CodingMeetingHourMinuteTime["hour"],
+      CodingMeetingHourMinuteTime["minute"],
+    ]
+  }
+  location: {
+    id: string
+    longitude: string
+    latitude: string
+    place_name: string
+  }
+  hashtags: { tag: CodingMeetingHashTag }[]
+}
+
+export interface CodingMeetingLocationSearchFormData {
+  keyword: string
+}
+
+export type CodingMeetingFormInitialValues = CodingMeetingFormData
+
+// [coding-meeting] comment
 export interface CommentFormData {
   comment: string
 }
diff --git a/src/mocks/db/coding-meetings.ts b/src/mocks/db/coding-meetings.ts
index 5a5a5e87..22aaaed2 100644
--- a/src/mocks/db/coding-meetings.ts
+++ b/src/mocks/db/coding-meetings.ts
@@ -11,7 +11,7 @@ const mockCodingMeetings: MockCodingMeeting[] = [
     member_level_image_url: badge_url[mockUsers[0].level],
     created_date: "2024-02-23T04:30:00.696Z",
     coding_meeting_closed: false,
-    coding_meeting_token: "CMT00000000",
+    coding_meeting_token: "cm_T00000000",
     coding_meeting_title: "봉은사역에서 모각코할 분들 모집합니다.",
     coding_meeting_start_time: "2024-02-29T07:30:53.696Z",
     coding_meeting_end_time: "2024-02-29T09:00:53.696Z",
@@ -64,7 +64,7 @@ const mockCodingMeetings: MockCodingMeeting[] = [
     member_level_image_url: badge_url[mockUsers[1].level],
     created_date: "2024-02-22T05:28:00.696Z",
     coding_meeting_closed: true,
-    coding_meeting_token: "CMT00000001",
+    coding_meeting_token: "cm_T00000001",
     coding_meeting_title:
       "[신림] 정기 오프라인 모각코 스터디 (주2회 이상 참여 必)",
     coding_meeting_start_time: "2024-02-29T15:30:00.696Z",
@@ -87,7 +87,7 @@ const mockCodingMeetings: MockCodingMeeting[] = [
     member_level_image_url: badge_url[mockUsers[2].level],
     created_date: "2024-02-23T04:36:53.696Z",
     coding_meeting_closed: false,
-    coding_meeting_token: "CMT00000002",
+    coding_meeting_token: "cm_T00000002",
     coding_meeting_title:
       "[사당역] Next.js 스터디 같이 하실 초보분들 모십니다.",
     coding_meeting_start_time: "2024-03-01T08:00:53.696Z",
diff --git a/src/mocks/db/questions.ts b/src/mocks/db/questions.ts
index d452b8e8..13c6a6e2 100644
--- a/src/mocks/db/questions.ts
+++ b/src/mocks/db/questions.ts
@@ -1,7 +1,7 @@
 import badge_url from "@/assets/images/badges"
 import { Question } from "@/interfaces/question"
 import { mockUsers } from "./user"
-// 2023-12-16T23:10:12
+
 export const mockQuestions: Array<Question> = [
   {
     id: 1,
diff --git a/src/mocks/handler/coding-meeting/create-coding-meeting.ts b/src/mocks/handler/coding-meeting/create-coding-meeting.ts
index b8a8d46c..a6351a57 100644
--- a/src/mocks/handler/coding-meeting/create-coding-meeting.ts
+++ b/src/mocks/handler/coding-meeting/create-coding-meeting.ts
@@ -7,7 +7,6 @@ import { RouteMap } from "@/service/route-map"
 import { HttpResponse, PathParams, http } from "msw"
 import jwt, { JwtPayload } from "jsonwebtoken"
 import { mockUsers } from "@/mocks/db/user"
-import { HttpStatusCode } from "axios"
 import mockCodingMeetings from "@/mocks/db/coding-meetings"
 import { MockCodingMeeting } from "@/interfaces/coding-meetings"
 import badge_url from "@/assets/images/badges"
@@ -23,10 +22,11 @@ export const mockCreateCodingMeetingApi = http.post<
     const { ...createPayload } = await request.json()
 
     const header = request.headers
-    const header_token = header.get("Authorization")
+    const authHeader = header.get("Authorization")
 
-    if (!header_token) {
-      const { Code, HttpStatus } = ApiStatus.QnA.updateQustion.Unauthorized
+    if (!authHeader) {
+      const { Code, HttpStatus } =
+        ApiStatus.CodingMeetings.createCodingMeeting.Unauthorized
       return HttpResponse.json(
         {
           code: Code,
@@ -36,25 +36,30 @@ export const mockCreateCodingMeetingApi = http.post<
       )
     }
 
-    const decoded_token = jwt.decode(header_token) as JwtPayload & {
+    const accessToken = authHeader.replace(/^Bearer /, "")
+
+    const decoded_token = jwt.decode(accessToken) as JwtPayload & {
       id: number
     }
 
     const targetMember = mockUsers.find((user) => user.id === decoded_token.id)
 
     if (!targetMember) {
+      const { Code, HttpStatus } =
+        ApiStatus.CodingMeetings.createCodingMeeting.NotFound
+
       return HttpResponse.json(
         {
-          code: -1,
-          msg: "답변을 입력할 권한이 없습니다.",
+          code: Code,
+          msg: "유저를 찾을 수 없습니다.",
         },
         {
-          status: HttpStatusCode.Forbidden,
+          status: HttpStatus,
         },
       )
     }
 
-    const token = "CMT" + (mockCodingMeetings.length + 10000)
+    const token = "cm_" + (mockCodingMeetings.length + 10000)
 
     const newCodingMeetingPost: MockCodingMeeting = {
       member_id: targetMember.id,
@@ -71,14 +76,16 @@ export const mockCreateCodingMeetingApi = http.post<
 
     mockCodingMeetings.push(newCodingMeetingPost)
 
+    const { Code, HttpStatus } = ApiStatus.CodingMeetings.createCodingMeeting.Ok
+
     return HttpResponse.json(
       {
-        code: 5144,
+        code: Code,
         msg: "모각코 생성 성공",
         data: { coding_meeting_token: token },
       },
       {
-        status: HttpStatusCode.Ok,
+        status: HttpStatus,
       },
     )
   },
diff --git a/src/mocks/handler/coding-meeting/update-coding-meeting.ts b/src/mocks/handler/coding-meeting/update-coding-meeting.ts
index c3d5cb3d..c6ac4644 100644
--- a/src/mocks/handler/coding-meeting/update-coding-meeting.ts
+++ b/src/mocks/handler/coding-meeting/update-coding-meeting.ts
@@ -6,6 +6,7 @@ import {
 import mockCodingMeetings from "@/mocks/db/coding-meetings"
 import { RouteMap } from "@/service/route-map"
 import { HttpResponse, http } from "msw"
+import jwt, { JwtPayload } from "jsonwebtoken"
 
 export const mockUpdateCodingMeetingApi = http.put<
   { coding_meeting_token: string },
@@ -18,10 +19,11 @@ export const mockUpdateCodingMeetingApi = http.put<
   async ({ params, request }) => {
     try {
       const header = request.headers
-      const token = header.get("Authorization")
+      const authHeader = header.get("Authorization")
 
-      if (!token) {
-        const { Code, HttpStatus } = ApiStatus.QnA.updateQustion.Unauthorized
+      if (!authHeader) {
+        const { Code, HttpStatus } =
+          ApiStatus.CodingMeetings.updateCodingMeeting.Unauthorized
         return HttpResponse.json(
           {
             code: Code,
@@ -31,29 +33,47 @@ export const mockUpdateCodingMeetingApi = http.put<
         )
       }
 
-      const targetToken = params.coding_meeting_token
+      const accessToken = authHeader.replace(/^Bearer /g, "")
+      const decoded_token = jwt.decode(accessToken) as JwtPayload & {
+        id: number
+      }
 
-      const updatePayload = await request.json()
+      const targetCodingMeetingToken = params.coding_meeting_token
 
-      const targetMockIdx = mockCodingMeetings.findIndex(
-        (post) => post.coding_meeting_token === targetToken,
+      const targetMockCodingMeetingIdx = mockCodingMeetings.findIndex(
+        (post) => post.coding_meeting_token === targetCodingMeetingToken,
       )
 
-      if (targetMockIdx < 0) {
+      if (targetMockCodingMeetingIdx < 0) {
         const { Code, HttpStatus } =
           ApiStatus.CodingMeetings.updateCodingMeeting.NotFound
 
         return HttpResponse.json(
           {
             code: Code,
-            msg: "존재하지 않는 질문",
+            msg: "존재하지 않는 모각코",
           },
           { status: HttpStatus },
         )
       }
 
-      mockCodingMeetings[targetMockIdx] = {
-        ...mockCodingMeetings[targetMockIdx],
+      const targetMockCodingMeeting =
+        mockCodingMeetings[targetMockCodingMeetingIdx]
+
+      if (targetMockCodingMeeting.member_id !== decoded_token.id) {
+        const { Code, HttpStatus } =
+          ApiStatus.CodingMeetings.updateCodingMeeting.Forbidden
+
+        return HttpResponse.json(
+          { code: Code, msg: "해당 모각코를 수정할 권한이 없는 유저입니다" },
+          { status: HttpStatus },
+        )
+      }
+
+      const updatePayload = await request.json()
+
+      mockCodingMeetings[targetMockCodingMeetingIdx] = {
+        ...mockCodingMeetings[targetMockCodingMeetingIdx],
         ...updatePayload,
       }
 
@@ -63,7 +83,7 @@ export const mockUpdateCodingMeetingApi = http.put<
       return HttpResponse.json(
         {
           code: Code,
-          msg: "질문 수정 성공",
+          msg: "모각코 수정 성공",
         },
         { status: HttpStatus },
       )
diff --git a/src/page/coding-meetings/create/CodingMeetingFormProvider.tsx b/src/page/coding-meetings/create/CodingMeetingFormProvider.tsx
new file mode 100644
index 00000000..5e835edf
--- /dev/null
+++ b/src/page/coding-meetings/create/CodingMeetingFormProvider.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { usePathname } from "next/navigation"
+import { FormProvider, useForm } from "react-hook-form"
+
+function CodingMeetingFormProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const pathname = usePathname()
+
+  const methods = useForm<CodingMeetingFormData>()
+
+  if (
+    pathname === "/coding-meetings/create" ||
+    pathname.startsWith("/coding-meetings/post/")
+  ) {
+    return <FormProvider {...methods}>{children}</FormProvider>
+  }
+
+  return children
+}
+
+export default CodingMeetingFormProvider
diff --git a/src/page/coding-meetings/create/CreateCodingMeetingPage.tsx b/src/page/coding-meetings/create/CreateCodingMeetingPage.tsx
index ce30fe93..8f598d5e 100644
--- a/src/page/coding-meetings/create/CreateCodingMeetingPage.tsx
+++ b/src/page/coding-meetings/create/CreateCodingMeetingPage.tsx
@@ -1,410 +1,131 @@
 "use client"
 
-import { useClientSession } from "@/hooks/useClientSession"
-import { CodingMeetingHashTagList } from "@/recoil/atoms/coding-meeting/hashtags"
-import { useQueryClient } from "@tanstack/react-query"
-import { useRouter } from "next/navigation"
-import { FieldErrors, useForm } from "react-hook-form"
+import { FieldErrors, useFormContext } from "react-hook-form"
 import { toast } from "react-toastify"
-import { useRecoilState, useRecoilValue } from "recoil"
-import CodingMeetingSection from "./components/CodingMeetingSection"
-import { Input } from "@/components/shared/input/Input"
 import Spacing from "@/components/shared/Spacing"
-import Textarea from "@/components/shared/textarea/Textarea"
 import Button from "@/components/shared/button/Button"
-import HashTagsSection from "./components/HashTagsSection"
-import LocationSection from "./components/LocationSection"
-import HeadCountSection from "./components/HeadCountSection"
-import DateTimeSection from "./components/DateTimeSection"
-import { CodingMeetingQueries } from "@/react-query/coding-meeting"
-import { CodingMeetingHeadCount } from "@/recoil/atoms/coding-meeting/headcount"
-import { DirectionIcons } from "@/components/icons/Icons"
-import { EndTime, StartTime } from "@/recoil/atoms/coding-meeting/dateTime"
-import { LocationForSubmit } from "@/recoil/atoms/coding-meeting/mapData"
-import Limitation from "@/constants/limitation"
-import type { CodingMeetingDetailPayload } from "@/interfaces/dto/coding-meeting/get-coding-meeting-detail.dto"
-import NotFound from "@/app/not-found"
-import { revalidatePage } from "@/util/actions/revalidatePage"
-import queryKey from "@/constants/queryKey"
-import useHandleCreateCodingMeetingTime from "./hooks/useHandleCreateCodingMeetingTime"
-import { AxiosError } from "axios"
-import { APIResponse } from "@/interfaces/dto/api-response"
-import TextCounter from "@/components/shared/TextCounter"
-import { twJoin } from "tailwind-merge"
-import notificationMessage from "@/constants/message/notification"
-import { validationMessage } from "@/constants/message/validation"
-import { errorMessage } from "@/constants/message/error"
+import HashTagsSection from "./components/section/hash-tags/HashTagsSection"
+import DateTimeSection from "./components/section/date-time/DateTimeSection"
+import { CodingMeetingFormData, CodingMeetingPageMode } from "@/interfaces/form"
+import TitleSection from "./components/section/title/TitleSection"
+import LocationSection from "./components/section/location/LocationSection"
+import MemberCountSection from "./components/section/member-count/MemberCountSection"
+import ContentSection from "./components/section/content/ContentSection"
+import LinkToListPage from "@/components/LinkToListPage"
+import { pickFirstError } from "@/util/hook-form/error"
+import { useCreateCodingMeeting } from "./hooks/useCreateCodingMeeting"
+import { formDataToPayload, payloadToFormData } from "../util/parser"
+import { useUpdateCodingMeeting } from "./hooks/useUpdateCodingMeeting"
+import { CodingMeetingDetailPayload } from "@/interfaces/dto/coding-meeting/get-coding-meeting-detail.dto"
 
 interface CreateCodingMeetingPageProps {
-  editMode: "create" | "update"
-  initialValues?: CodingMeetingDetailPayload
+  editMode: CodingMeetingPageMode
   coding_meeting_token?: string
+  initialCodingMeeting?: CodingMeetingDetailPayload
 }
 
-interface CodingMeetingFormData {
-  title: string
-  content: string
-}
-
-const CreateCodingMeetingPage = ({
+function CreateCodingMeetingPage(props: { editMode: "create" }): JSX.Element
+function CreateCodingMeetingPage(props: {
+  editMode: "update"
+  coding_meeting_token: string
+  initialCodingMeeting: CodingMeetingDetailPayload
+}): JSX.Element
+function CreateCodingMeetingPage({
   editMode,
-  initialValues,
   coding_meeting_token,
-}: CreateCodingMeetingPageProps) => {
-  const [hash_tags, setHash_tags] = useRecoilState(CodingMeetingHashTagList)
-  const [head_cnt, setHead_cnt] = useRecoilState(CodingMeetingHeadCount)
-  const startTime = useRecoilValue(StartTime)
-  const endTime = useRecoilValue(EndTime)
-  const [location, setLocation] = useRecoilState(LocationForSubmit)
-  const queryClient = useQueryClient()
-  const { replace } = useRouter()
-  const { user } = useClientSession()
-  const {
-    resetDateTimes,
-    formatTime,
-    formatByUTC,
-    formattedStartTime,
-    formattedEndTime,
-  } = useHandleCreateCodingMeetingTime()
-
-  const { register, handleSubmit, watch, getValues } =
-    useForm<CodingMeetingFormData>(
-      initialValues
-        ? {
-            defaultValues: {
-              title: initialValues.coding_meeting_title,
-              content: initialValues.coding_meeting_content,
-            },
-          }
-        : {},
-    )
+  initialCodingMeeting,
+}: CreateCodingMeetingPageProps): JSX.Element {
+  const { handleSubmit } = useFormContext<CodingMeetingFormData>()
 
-  const { createCodingMeetingPost } =
-    CodingMeetingQueries.useCreateCodingMeeting()
-  const { updateCodingMeeting } = CodingMeetingQueries.useUpdateCodingMeeting()
+  const { createCodingMeetingApi, createCodingMeetingApiStatus } =
+    useCreateCodingMeeting()
 
-  const goToListPage = () => replace("/coding-meetings")
+  const { updateCodingMeetingApi, updateCodingMeetingApiStatus } =
+    useUpdateCodingMeeting()
 
-  const onSubmit = async (data: CodingMeetingFormData) => {
-    // 사용자 권한 인증
-    if (!user)
-      return toast.error(notificationMessage.unauthorized, {
-        toastId: "unauthorizedToCreateCodingMeeting",
-        position: "top-center",
-      })
-    // 장소 유효성 검사
-    if (!location)
-      return toast.error(validationMessage.noLocation, {
-        toastId: "emptyLocation",
-        position: "top-center",
-      })
-    // 인원수 유효성 검사
-    if (head_cnt === "0")
-      return toast.error(validationMessage.noHeadCnt, {
-        toastId: "emptyHeadCnt",
-        position: "top-center",
-      })
-    // 시간 유효성 검사
-    // 시간 값이 없을 경우
-    if (!startTime || !endTime)
-      return toast.error(validationMessage.noTime, {
-        toastId: "emptyCodingMeetingTime",
-        position: "top-center",
-      })
-    // 종료 시간이 시작 시간보다 빠를 경우
-    if (formattedEndTime.isBefore(formattedStartTime))
-      return toast.error(validationMessage.timeError, {
-        toastId: "codingMeetingTimeError",
-        position: "top-center",
-      })
-    // 시작 시간이 종료 시간과 같을 경우
-    if (formattedEndTime.isSame(formattedStartTime, "minute"))
-      return toast.error(validationMessage.sameTime, {
-        toastId: "codingMeetingSameTimeError",
-        position: "top-center",
-      })
-
-    const payload = {
-      coding_meeting_title: data.title,
-      coding_meeting_content: data.content,
-      coding_meeting_hashtags: hash_tags,
-      coding_meeting_location_id: location?.coding_meeting_location_id,
-      coding_meeting_location_place_name:
-        location.coding_meeting_location_place_name,
-      coding_meeting_location_longitude:
-        location.coding_meeting_location_longitude,
-      coding_meeting_location_latitude:
-        location.coding_meeting_location_latitude,
-      coding_meeting_member_upper_limit: Number(head_cnt),
-      coding_meeting_start_time: formatByUTC(formatTime(startTime)),
-      coding_meeting_end_time: formatByUTC(formatTime(endTime)),
-    }
+  const initialFormData = initialCodingMeeting
+    ? payloadToFormData(initialCodingMeeting)
+    : null
 
+  const onSubmit = async (formData: CodingMeetingFormData) => {
     if (editMode === "create") {
-      createCodingMeetingPost(payload, {
-        onSuccess: (res) => {
-          queryClient.invalidateQueries({
-            queryKey: [queryKey.codingMeeting],
-          })
-
-          replace(`/coding-meetings/${res.data.data?.coding_meeting_token}`)
-
-          setHash_tags([])
-          setHead_cnt("3")
-          resetDateTimes()
-          setLocation(undefined)
-        },
-        onError: (error: Error | AxiosError<APIResponse>) => {
-          if (error instanceof AxiosError) {
-            const { response } = error as AxiosError<APIResponse>
-
-            toast.error(
-              response?.data.msg ?? errorMessage.createCodingMeeting,
-              {
-                toastId: "failToCreateCodingMeeting",
-                position: "top-center",
-              },
-            )
-            return
-          }
-
-          toast.error(errorMessage.createCodingMeeting, {
-            toastId: "failToCreateCodingMeeting",
-            position: "top-center",
-          })
-        },
-      })
-    }
-
-    if (!coding_meeting_token) {
-      return NotFound()
+      createCodingMeetingApi(formDataToPayload("create", formData))
+      return
     }
 
-    if (editMode === "update") {
-      const editPayload = {
-        ...payload,
-        coding_meeting_token,
-      }
-      updateCodingMeeting(editPayload, {
-        onSuccess: async (res) => {
-          queryClient.resetQueries({
-            queryKey: [queryKey.codingMeeting],
-          })
-
-          await revalidatePage("/coding-meetings/[token]", "page")
-
-          setTimeout(() => {
-            replace(`/coding-meetings/${coding_meeting_token}`)
-
-            setHash_tags([])
-            setHead_cnt("3")
-            resetDateTimes()
-            setLocation(undefined)
-          }, 0)
-        },
-        onError: (error: Error | AxiosError<APIResponse>) => {
-          if (error instanceof AxiosError) {
-            const { response } = error as AxiosError<APIResponse>
-
-            toast.error(
-              response?.data.msg ?? errorMessage.updateCodingMeeting,
-              {
-                toastId: "failToUpdateCodingMeeting",
-                position: "top-center",
-              },
-            )
-            return
-          }
-
-          toast.error(errorMessage.updateCodingMeeting, {
-            toastId: "failToUpdateCodingMeeting",
-            position: "top-center",
-          })
-        },
-      })
-    }
+    // update
+    updateCodingMeetingApi(
+      formDataToPayload("update", formData, coding_meeting_token!),
+    )
   }
-  const onInvalid = async (errors: FieldErrors<CodingMeetingFormData>) => {
-    if (errors?.title) {
-      const titleErrorMessage = ((type: typeof errors.title.type) => {
-        switch (type) {
-          case "required":
-            return validationMessage.notitle
-          case "minLength":
-            return validationMessage.underTitleLimit
-          case "maxLength":
-            return validationMessage.overTitleLimit
-        }
-      })(errors.title.type)
-
-      toast.error(titleErrorMessage, {
-        position: "top-center",
-        toastId: "createCodingMeetingTitle",
-      })
-
-      window.scroll({
-        top: 0,
-        behavior: "smooth",
-      })
-
-      return
-    }
 
-    if (errors?.content) {
-      const contentErrorMessage = ((type: typeof errors.content.type) => {
-        switch (type) {
-          case "required":
-            return validationMessage.noContent
-          case "minLength":
-            return validationMessage.underContentLimit
-          case "maxLength":
-            return validationMessage.overContentLimit
-        }
-      })(errors.content.type)
+  const onInvalid = async (errors: FieldErrors<CodingMeetingFormData>) => {
+    const error = pickFirstError<CodingMeetingFormData>(errors)
 
-      toast.error(contentErrorMessage, {
-        position: "top-center",
-        toastId: "createCodingMeetingContent",
-      })
-      return
-    }
+    toast.error(error.message, {
+      position: "top-center",
+      toastId: "codingMeetingInvalidForm",
+    })
   }
 
-  const TitleInputClass = twJoin([
-    "text-base placeholder:text-base",
-    watch("title") &&
-      (watch("title")?.length < Limitation.title_limit_under ||
-        watch("title")?.length > Limitation.title_limit_over) &&
-      "focus:border-danger border-danger",
-  ])
-
   return (
-    <div className="w-[80%] m-auto">
-      <div
-        className="flex text-[#828282] items-center mt-10 cursor-pointer w-[100px]"
-        onClick={goToListPage}
-      >
-        <DirectionIcons.LeftLine className="text-2xl" />
-        <div className="text-base">목록 보기</div>
+    <div className="px-6 py-6 sm:px-12 sm:pt-8 sm:pb-12 pc:pt-[72px] pc:pl-[80px] pc:pr-[24px] xl:!pr-[40px] pc:pb-[42px]">
+      <div className="hidden pc:block">
+        <LinkToListPage to="coding-meetings" />
+        <Spacing size={48} />
       </div>
-      <div className="text-[32px] font-bold p-6">모각코 모집하기</div>
+      <h3 className="text-2xl pc:text-[32px] font-bold mb-8 pc:mb-14">
+        {editMode === "create" ? "모각코 모집하기" : "모각코 수정하기"}
+      </h3>
       <form
         onSubmit={handleSubmit(onSubmit, onInvalid)}
         className={`transition-opacity duration-1000 m-auto`}
       >
-        <CodingMeetingSection>
-          <CodingMeetingSection.Label htmlFor="title">
-            제목
-          </CodingMeetingSection.Label>
-          <div className="w-full">
-            <Input
-              id="title"
-              spellCheck="false"
-              autoComplete="off"
-              fullWidth
-              className={TitleInputClass}
-              placeholder="제목을 입력해주세요"
-              {...register("title", {
-                required: true,
-                minLength: Limitation.title_limit_under,
-                maxLength: Limitation.title_limit_over,
-              })}
-            />
-            <div>
-              {watch("title") &&
-                (watch("title")?.length < Limitation.title_limit_under ||
-                  watch("title")?.length > Limitation.title_limit_over) && (
-                  <Input.ErrorMessage className="text-md">
-                    {"제목은 5자 이상 100자 이하여야 합니다."}
-                  </Input.ErrorMessage>
-                )}
-            </div>
-          </div>
-        </CodingMeetingSection>
-        <Spacing size={10} />
-        <LocationSection
-          initialLocation={
-            initialValues && {
-              coding_meeting_location_id:
-                initialValues.coding_meeting_location_id,
-              coding_meeting_location_place_name:
-                initialValues.coding_meeting_location_place_name,
-              coding_meeting_location_latitude:
-                initialValues.coding_meeting_location_latitude,
-              coding_meeting_location_longitude:
-                initialValues.coding_meeting_location_longitude,
-            }
-          }
-        />
-        <Spacing size={10} />
-        <HeadCountSection
-          initialCnt={
-            initialValues &&
-            initialValues?.coding_meeting_member_upper_limit + ""
-          }
-        />
-        <Spacing size={10} />
-        <DateTimeSection
-          initialDateTime={
-            initialValues && {
-              coding_meeting_start_time:
-                initialValues?.coding_meeting_start_time,
-              coding_meeting_end_time: initialValues?.coding_meeting_end_time,
-            }
-          }
-        />
-        <Spacing size={10} />
-        <HashTagsSection
-          initialHashTags={
-            initialValues && initialValues?.coding_meeting_hashtags
-          }
-        />
-        <Spacing size={10} />
-        <CodingMeetingSection>
-          <CodingMeetingSection.Label htmlFor="content">
-            소개글
-          </CodingMeetingSection.Label>
-          <div className="w-full">
-            <Textarea
-              className="w-full min-h-[200px]"
-              placeholder="모집글의 내용을 작성해주세요 (최대 10,000자)"
-              {...register("content", {
-                required: true,
-                minLength: Limitation.content_limit_under,
-                maxLength: Limitation.content_limit_over,
-              })}
-            />
-          </div>
-        </CodingMeetingSection>
-        <div>
-          <TextCounter
-            text={watch("content") ?? ""}
-            min={Limitation.content_limit_under}
-            max={Limitation.content_limit_over}
-            className="text-lg block text-right h-2 mr-5"
+        <div className="flex w-full flex-col gap-8">
+          <TitleSection
+            {...(initialFormData && { initialTitle: initialFormData.title })}
+          />
+          <LocationSection
+            {...(initialFormData && {
+              initialLocation: initialFormData.location,
+            })}
+          />
+          <MemberCountSection
+            {...(initialFormData && {
+              initialMemberCount: initialFormData.member_upper_limit,
+            })}
+          />
+          <DateTimeSection
+            {...(initialFormData && { initialDateTime: initialFormData.date })}
+          />
+          <HashTagsSection
+            {...(initialFormData && {
+              initialHashTags: initialFormData.hashtags,
+            })}
+          />
+          <ContentSection
+            {...(initialFormData && {
+              initialContent: initialFormData.content,
+            })}
           />
         </div>
         <Spacing size={10} />
         <div className="flex flex-col sm:flex-row sm:justify-end sm:items-center w-full p-6 sm:p-0 sm:pr-[20px]">
           <Button
-            disabled={
-              !user ||
-              !location ||
-              head_cnt === "0" ||
-              !startTime ||
-              !endTime ||
-              !watch("content") ||
-              watch("content").length < Limitation.answer_limit_under ||
-              watch("content").length > Limitation.answer_limit_over ||
-              !getValues("title") ||
-              getValues("title").length < Limitation.title_limit_under ||
-              getValues("title").length > Limitation.title_limit_over
-            }
             buttonTheme="primary"
-            className="block sm:inline-flex sm:w-[150px] w-full p-5 py-3 my-10 disabled:bg-colorsGray disabled:text-colorsDarkGray"
+            className="block sm:inline-flex sm:w-[150px] w-full p-5 py-3 my-10 disabled:bg-[#E0E0E0] disabled:text-[#BDBDBD] disabled:pointer-events-none"
             type="submit"
+            disabled={
+              createCodingMeetingApiStatus === "pending" ||
+              updateCodingMeetingApiStatus === "pending"
+            }
           >
-            {editMode === "update" ? "모각코 수정하기" : "모각코 개설하기"}
+            {buttonText({
+              editMode,
+              loading:
+                createCodingMeetingApiStatus === "pending" ||
+                updateCodingMeetingApiStatus === "pending",
+            })}
           </Button>
         </div>
       </form>
@@ -413,3 +134,17 @@ const CreateCodingMeetingPage = ({
 }
 
 export default CreateCodingMeetingPage
+
+const buttonText = ({
+  editMode,
+  loading,
+}: {
+  editMode: CodingMeetingPageMode
+  loading: boolean
+}) => {
+  if (editMode === "create") {
+    return loading ? "모각코 개설하는 중" : "모각코 개설하기"
+  }
+
+  return loading ? "모각코 수정하는 중" : "모각코 수정하기"
+}
diff --git a/src/page/coding-meetings/create/CreateCodingMeetingPage.types.ts b/src/page/coding-meetings/create/CreateCodingMeetingPage.types.ts
deleted file mode 100644
index 27296cb8..00000000
--- a/src/page/coding-meetings/create/CreateCodingMeetingPage.types.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type {
-  CodingMeetingDateTime,
-  CodingMeetingHashTags,
-  CodingMeetingLocation,
-} from "@/interfaces/coding-meetings"
-import type { Time } from "@/recoil/atoms/coding-meeting/dateTime"
-import type { LabelHTMLAttributes, PropsWithChildren } from "react"
-import { SetterOrUpdater } from "recoil"
-
-export interface CodingMeetingFormData {
-  title: string
-}
-
-export type SubmitAskQuestionData = CodingMeetingFormData
-
-export type SubmitUpdateCodingMeetingData = Omit<
-  SubmitAskQuestionData,
-  "member_id"
-> & { post_id: number }
-
-export const enum TimeZone {
-  AM = "AM",
-  PM = "PM",
-}
-
-export interface CodingMeetingSectionProps
-  extends NonNullable<PropsWithChildren> {
-  className?: string
-}
-
-export interface CodingMeetingSectionLabelProps
-  extends LabelHTMLAttributes<HTMLLabelElement> {}
-
-export type TimeOptionsProps = { date: string[] }
-
-export type HeadCountSectionProps = {
-  initialCnt?: string
-}
-
-export type HashTagsSectionProps = {
-  initialHashTags?: CodingMeetingHashTags
-}
-
-export type DateTimeSectionProps = {
-  initialDateTime?: CodingMeetingDateTime
-}
-
-export type LocationSectionProps = {
-  initialLocation?: CodingMeetingLocation
-}
-
-export type TimeBoxProps = {
-  timeState: Time
-  setTimeState: SetterOrUpdater<Time>
-  suffix: "부터" | "까지"
-}
-
-export type SelectBoxProps = {
-  targetArray: string[]
-  placeholder: "구분" | "시간" | "분"
-  handler: (value: string) => void
-  defaultValue?: string
-}
diff --git a/src/page/coding-meetings/create/components/CodingMeetingSection.tsx b/src/page/coding-meetings/create/components/CodingMeetingSection.tsx
index 4fa9291c..a890e8d0 100644
--- a/src/page/coding-meetings/create/components/CodingMeetingSection.tsx
+++ b/src/page/coding-meetings/create/components/CodingMeetingSection.tsx
@@ -1,29 +1,41 @@
 import { twMerge } from "tailwind-merge"
-import type {
-  CodingMeetingSectionLabelProps,
-  CodingMeetingSectionProps,
-} from "../CreateCodingMeetingPage.types"
+
+interface CodingMeetingSectionProps {
+  children: React.ReactNode
+  className?: string
+}
+
+interface CodingMeetingSectionLabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  verticalAlign?: "top" | "center"
+}
 
 const CodingMeetingSection = ({
   children,
   className,
 }: CodingMeetingSectionProps) => {
   const classNames = twMerge([
-    "p-6 bg-white flex flex-col sm:flex-row w-full",
+    "bg-white flex w-full flex-col gap-y-2 gap-x-4 pc:flex-row",
     className,
   ])
 
   return <section className={classNames}>{children}</section>
 }
 
+export default CodingMeetingSection
+
 CodingMeetingSection.Label = function CodingMeetingSectionLabel({
+  verticalAlign = "top",
   className,
   children,
   ...props
 }: CodingMeetingSectionLabelProps) {
   const classNames = twMerge([
+    verticalAlign === "top" && "items-start",
+    verticalAlign === "center" && "items-center",
+    "h-fit",
     className,
-    "w-[150px] mr-10 text-colorsDarkGray text-lg font-bold",
+    "w-fit flex shrink-0 pc:w-[122px] text-[#828282] text-base font-bold",
   ])
 
   return (
@@ -32,5 +44,3 @@ CodingMeetingSection.Label = function CodingMeetingSectionLabel({
     </label>
   )
 }
-
-export default CodingMeetingSection
diff --git a/src/page/coding-meetings/create/components/CustomCalendar/Calendar.css b/src/page/coding-meetings/create/components/CustomCalendar/Calendar.css
deleted file mode 100644
index 80b3c7b4..00000000
--- a/src/page/coding-meetings/create/components/CustomCalendar/Calendar.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "@/styles/react-calendar/Base.css";
-
-.react-calendar {
-  width: 100%;
-  max-width: 450px;
-}
diff --git a/src/page/coding-meetings/create/components/CustomCalendar/CustomCalendar.tsx b/src/page/coding-meetings/create/components/CustomCalendar/CustomCalendar.tsx
deleted file mode 100644
index 78f34441..00000000
--- a/src/page/coding-meetings/create/components/CustomCalendar/CustomCalendar.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client"
-
-import Calendar, { TileArgs } from "react-calendar"
-import "./Calendar.css"
-import { getDay } from "@/util/getDate"
-import dayjs from "dayjs"
-import Holidays from "@/constants/holidays"
-import { Dispatch, SetStateAction } from "react"
-import { Value } from "@/interfaces/calendar"
-
-type CustomCalendarProps = {
-  date: Value
-  setDate: Dispatch<SetStateAction<Value>>
-}
-
-const CustomCalendar = ({ date, setDate }: CustomCalendarProps) => {
-  // 공휴일 포함 여부
-  const isHoliday = (date: Date) =>
-    Holidays.some((day) => day.date === dayjs(date).format("YYYY-MM-DD"))
-  const getHoliday = (date: Date) =>
-    Holidays.find((day) => day.date === dayjs(date).format("YYYY-MM-DD"))
-  // 공휴일 이름 formatting
-  const formatName = (name: string) => name.replaceAll(" ", "\n")
-
-  // 타일에 특정 정보 표시
-  const showSpecificDays = ({ date }: TileArgs) => {
-    const today = new Date()
-    if (date === today) {
-      return <div>Today</div>
-    }
-    if (isHoliday(date)) {
-      const name = getHoliday(date)?.name
-      if (name)
-        return (
-          <div className="text-[10px] whitespace-pre ">{formatName(name)}</div>
-        )
-    }
-  }
-
-  return (
-    <div className="react-calendar min-h-[450px]">
-      <Calendar
-        locale="ko"
-        onChange={setDate}
-        value={date}
-        // 숫자만 보이게 설정
-        formatDay={(_, date) => getDay(date)}
-        navigationLabel={undefined}
-        minDetail="month"
-        maxDetail="month"
-        className={"mx-auto text-sm border-white w-full"}
-        allowPartialRange
-        next2Label={null}
-        prev2Label={null}
-        minDate={new Date()}
-        // 날짜 타일에 추가할 컨텐츠
-        tileContent={showSpecificDays}
-      />
-    </div>
-  )
-}
-
-export default CustomCalendar
diff --git a/src/page/coding-meetings/create/components/CustomMap/kakaoMap.tsx b/src/page/coding-meetings/create/components/CustomMap/kakaoMap.tsx
deleted file mode 100644
index 4138ebf0..00000000
--- a/src/page/coding-meetings/create/components/CustomMap/kakaoMap.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Icons } from "@/components/icons/Icons"
-import {
-  CodingMeetingMapData,
-  Marker,
-  SearchMapMarker,
-  SelectedPlace,
-} from "@/recoil/atoms/coding-meeting/mapData"
-import { debounce } from "lodash-es"
-import React, { useState, useEffect } from "react"
-import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk"
-import { useRecoilState, useSetRecoilState } from "recoil"
-
-declare const window: typeof globalThis & {
-  kakao: any
-}
-
-export default function KakaoMapPage({ keyword }: { keyword: string }) {
-  const [loading, error] = useKakaoLoader({
-    appkey: process.env.NEXT_PUBLIC_KAKAO_MAP!,
-    libraries: ["services"],
-  })
-  const [info, setInfo] = useState<Marker>()
-  const [markers, setMarkers] = useRecoilState(SearchMapMarker)
-  const [map, setMap] = useState<kakao.maps.Map>()
-  const setMapData = useSetRecoilState(CodingMeetingMapData)
-  const setSelectedPlace = useSetRecoilState(SelectedPlace)
-
-  useEffect(() => {
-    if (!map) return
-    if (!keyword) return
-    const ps = new kakao.maps.services.Places()
-
-    const handleKeywordSearch = debounce(() => {
-      ps.keywordSearch(keyword, (data, status, _pagination) => {
-        if (status === kakao.maps.services.Status.OK) {
-          // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
-          // LatLngBounds 객체에 좌표를 추가합니다.
-          const bounds = new kakao.maps.LatLngBounds()
-          let markers: Marker[] = []
-          setMapData(data)
-          for (var i = 0; i < data.length; i++) {
-            // @ts-ignore
-            markers.push({
-              position: {
-                lat: data[i].y,
-                lng: data[i].x,
-              },
-              content: data[i].place_name,
-            })
-            // @ts-ignore
-            bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
-          }
-          setMarkers(markers)
-          // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
-          map.setBounds(bounds)
-        }
-      })
-    }, 1000)
-
-    handleKeywordSearch()
-  }, [map, keyword])
-
-  if (error) throw error
-
-  if (loading) {
-    return (
-      <div className="absolute left-0 top-0 z-[2] w-full h-full flex flex-col justify-center items-center bg-white">
-        <div className="w-8 h-8 flex justify-center items-center rounded-full border border-[#828282]">
-          <Icons.MapMarker className="text-[#828282]" />
-        </div>
-        <div className="mt-5 text-sm text-[#828282]">카카오 맵 로드 중</div>
-      </div>
-    )
-  }
-
-  return (
-    <Map // 로드뷰를 표시할 Container
-      center={{
-        lat: 37.566826,
-        lng: 126.9786567,
-      }}
-      className="w-full sm:w-[400px] h-[300px]"
-      level={3}
-      onCreate={setMap}
-    >
-      {markers &&
-        markers.map((marker) => (
-          <MapMarker
-            key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
-            position={{
-              lat: Number(marker.position.lat),
-              lng: Number(marker.position.lng),
-            }}
-            onClick={() => {
-              setSelectedPlace(marker)
-              setInfo(marker)
-            }}
-          >
-            {info && info.content === marker.content && (
-              <div
-                style={{
-                  color: "#000",
-                  borderRadius: "16px",
-                  border: "none",
-                  textAlign: "center",
-                }}
-              >
-                {marker.content}
-              </div>
-            )}
-          </MapMarker>
-        ))}
-    </Map>
-  )
-}
diff --git a/src/page/coding-meetings/create/components/DateTimeSection.tsx b/src/page/coding-meetings/create/components/DateTimeSection.tsx
deleted file mode 100644
index f03df3d7..00000000
--- a/src/page/coding-meetings/create/components/DateTimeSection.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-"use client"
-
-import { useLayoutEffect } from "react"
-import CodingMeetingSection from "./CodingMeetingSection"
-import CustomCalendar from "./CustomCalendar/CustomCalendar"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/Select"
-import { timeSelect } from "@/constants/timeOptions"
-import { useRecoilState, useSetRecoilState } from "recoil"
-import {
-  CodingMeetingDay,
-  EndTime,
-  StartTime,
-} from "@/recoil/atoms/coding-meeting/dateTime"
-import type {
-  DateTimeSectionProps,
-  SelectBoxProps,
-  TimeBoxProps,
-} from "../CreateCodingMeetingPage.types"
-import dayjs from "dayjs"
-import useHandleCreateCodingMeetingTime from "../hooks/useHandleCreateCodingMeetingTime"
-import { formatDay } from "@/util/getDate"
-
-const DateTimeSection = ({ initialDateTime }: DateTimeSectionProps) => {
-  const [date, setDate] = useRecoilState(CodingMeetingDay)
-  const setStartTime = useSetRecoilState(StartTime)
-  const setEndTime = useSetRecoilState(EndTime)
-  const { resetTimes, formatMinute } = useHandleCreateCodingMeetingTime()
-
-  useLayoutEffect(() => {
-    if (initialDateTime) {
-      const initialDate = formatDay(initialDateTime.coding_meeting_start_time)
-      const start = dayjs(initialDateTime.coding_meeting_start_time)
-      const end = dayjs(initialDateTime.coding_meeting_end_time)
-      setDate(new Date(initialDate))
-      setStartTime({
-        hour: start.get("hour") + "",
-        minute: formatMinute(start.get("minute")),
-      })
-      setEndTime({
-        hour: end.get("hour") + "",
-        minute: formatMinute(end.get("minute")),
-      })
-    } else {
-      resetTimes()
-    }
-  }, [])
-
-  return (
-    <CodingMeetingSection>
-      <CodingMeetingSection.Label className="block w-max">
-        일 시
-      </CodingMeetingSection.Label>
-      <div className="flex flex-wrap gap-10 w-full items-start">
-        <div>
-          <div className="font-bold">날짜</div>
-          <CustomCalendar date={date} setDate={setDate} />
-        </div>
-        <div>
-          <div className="flex flex-col gap-5">
-            <div className="font-bold">시간</div>
-            <StartBox />
-            <EndBox />
-          </div>
-        </div>
-      </div>
-    </CodingMeetingSection>
-  )
-}
-
-export default DateTimeSection
-
-const TimeBox = ({ timeState, setTimeState, suffix }: TimeBoxProps) => {
-  const handleTimeChange = (type: "hour" | "minute", value: string) => {
-    setTimeState({ ...timeState, [type]: value })
-  }
-
-  return (
-    <div className="flex items-center gap-2">
-      <div>
-        <SelectBox
-          targetArray={timeSelect.hours}
-          placeholder="시간"
-          handler={(value: string) => handleTimeChange("hour", value)}
-          defaultValue={timeState.hour}
-        />
-      </div>
-      <div>:</div>
-      <div>
-        <SelectBox
-          targetArray={timeSelect.minutes}
-          placeholder="분"
-          handler={(value: string) => handleTimeChange("minute", value)}
-          defaultValue={timeState.minute}
-        />
-      </div>
-      <div>{suffix}</div>
-    </div>
-  )
-}
-
-const StartBox = () => {
-  const [startTime, setStartTime] = useRecoilState(StartTime)
-  return (
-    <TimeBox timeState={startTime} setTimeState={setStartTime} suffix="부터" />
-  )
-}
-
-const EndBox = () => {
-  const [endTime, setEndTime] = useRecoilState(EndTime)
-  return <TimeBox timeState={endTime} setTimeState={setEndTime} suffix="까지" />
-}
-
-const SelectBox = ({
-  targetArray,
-  placeholder,
-  handler,
-  defaultValue,
-}: SelectBoxProps) => {
-  return (
-    <Select onValueChange={(value: string) => handler(value)}>
-      <SelectTrigger className="w-[100px] text-center">
-        <SelectValue
-          className="flex flex-1"
-          placeholder={defaultValue ? defaultValue : placeholder}
-          defaultValue={defaultValue}
-        />
-      </SelectTrigger>
-      <SelectContent>
-        {targetArray.map((val) => (
-          <SelectItem value={val} key={val}>
-            {val}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}
diff --git a/src/page/coding-meetings/create/components/HashTagsSection.tsx b/src/page/coding-meetings/create/components/HashTagsSection.tsx
deleted file mode 100644
index d708cd05..00000000
--- a/src/page/coding-meetings/create/components/HashTagsSection.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client"
-
-import { useLayoutEffect, useRef } from "react"
-import CodingMeetingSection from "./CodingMeetingSection"
-import { toast } from "react-toastify"
-import Limitation from "@/constants/limitation"
-import Regex from "@/constants/regex"
-import { Input } from "@/components/shared/input/Input"
-import Button from "@/components/shared/button/Button"
-import { Icons } from "@/components/icons/Icons"
-import { useRecoilState } from "recoil"
-import type { HashTagsSectionProps } from "../CreateCodingMeetingPage.types"
-import { CodingMeetingHashTagList } from "@/recoil/atoms/coding-meeting/hashtags"
-import { validationMessage } from "@/constants/message/validation"
-
-const HashTagsSection = ({ initialHashTags }: HashTagsSectionProps) => {
-  const hashtagRef = useRef<HTMLInputElement>(null)
-
-  // 제출된 해시태그
-  const [hashtags, setHashtags] = useRecoilState(CodingMeetingHashTagList)
-
-  useLayoutEffect(() => {
-    if (initialHashTags) setHashtags(initialHashTags)
-    else setHashtags([])
-  }, [])
-
-  // 해시태그 추가
-  const handleAddHashTags = () => {
-    // 빈 값 방지
-    if (!hashtagRef.current?.value)
-      return toast.error(validationMessage.noValue, {
-        toastId: "emtpyHashtagValue",
-        position: "top-center",
-      })
-    // 해시태그 개수 제한
-    if (hashtags.length >= Limitation.hashtags_cnt)
-      return toast.error(validationMessage.overHashtagCntLimit, {
-        toastId: "overHashtagCntLimit",
-        position: "top-center",
-      })
-    // 해시태그 개수 제한
-    if (hashtagRef.current?.value.length >= Limitation.hashtags_word)
-      return toast.error(validationMessage.overHashtagWordLimit, {
-        toastId: "overHahtagWordLmit",
-        position: "top-center",
-      })
-    // 특수문자 + 이모지 제출 방지
-    if (
-      hashtagRef.current?.value.match(Regex.preventSpecialCharacter) ||
-      hashtagRef.current?.value.match(Regex.preventEmoji)
-    )
-      return toast.error(validationMessage.preventSpecialCharacter, {
-        toastId: "preventSpecialCharacter",
-        position: "top-center",
-      })
-    // 중복 제출 방지
-    if (hashtags.includes(hashtagRef.current.value))
-      return toast.error(validationMessage.preventDuplicateValue, {
-        toastId: "preventDuplicateValue",
-        position: "top-center",
-      })
-    setHashtags([...hashtags, hashtagRef.current?.value])
-    // 제출 후 input 초기화
-    hashtagRef.current.value = ""
-  }
-  // 해시태그 삭제
-  const handleDeleteHashTags = (tag: string) =>
-    setHashtags(hashtags.filter((hashtag) => hashtag !== tag))
-
-  return (
-    <CodingMeetingSection>
-      <CodingMeetingSection.Label className="flex flex-row sm:flex-col">
-        <div>해시태그</div>
-        <div>
-          ({hashtags.length}/{Limitation.hashtags_cnt})
-        </div>
-      </CodingMeetingSection.Label>
-      <div>
-        <div className="flex flex-col sm:flex-row">
-          <Input
-            id="hashtags"
-            spellCheck="false"
-            autoComplete="off"
-            className="rounded-none border-r-0 border-l-0 border-t-0 text-xl"
-            placeholder="해시태그를 추가해보세요"
-            ref={hashtagRef}
-          />
-          <div className="flex flex-col justify-center sm:ml-3">
-            <Button
-              buttonTheme="primary"
-              className="px-5 py-2 shrink-0 w-full mt-5 sm:mt-0"
-              onClick={handleAddHashTags}
-            >
-              추가
-            </Button>
-          </div>
-        </div>
-        <div className="min-h-[30px] mt-5 flex flex-wrap">
-          {hashtags.map((tag) => (
-            <div
-              key={tag}
-              className="p-3 mr-3 flex border-[1px] border-slate-300 rounded-3xl items-center min-w-[50px] mb-5"
-            >
-              <div className="mr-1"># {tag}</div>
-              <div
-                className="transition-colors w-5 h-5 p-1 rounded-full border flex justify-center items-center bg-white hover:bg-secondary hover:text-white"
-                onClick={() => handleDeleteHashTags(tag)}
-              >
-                <Icons.Close />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </CodingMeetingSection>
-  )
-}
-
-export default HashTagsSection
diff --git a/src/page/coding-meetings/create/components/HeadCountSection.tsx b/src/page/coding-meetings/create/components/HeadCountSection.tsx
deleted file mode 100644
index 88a96f76..00000000
--- a/src/page/coding-meetings/create/components/HeadCountSection.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-"use client"
-
-import { useSetRecoilState } from "recoil"
-import CodingMeetingSection from "./CodingMeetingSection"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/Select"
-import { CodingMeetingHeadCount } from "@/recoil/atoms/coding-meeting/headcount"
-import { HeadCountValue } from "@/constants/select"
-import { useLayoutEffect } from "react"
-import type { HeadCountSectionProps } from "../CreateCodingMeetingPage.types"
-
-const HeadCountSection = ({ initialCnt }: HeadCountSectionProps) => {
-  const setHeadCount = useSetRecoilState(CodingMeetingHeadCount)
-
-  useLayoutEffect(() => {
-    if (initialCnt) setHeadCount(initialCnt)
-    else setHeadCount("0")
-  }, [])
-
-  return (
-    <CodingMeetingSection>
-      <CodingMeetingSection.Label className="block w-max mb-5">
-        모집인원
-      </CodingMeetingSection.Label>
-      <div className="w-full">
-        <div className="text-slate-500 mb-2">
-          본인 포함 최대 6명까지 가능합니다.
-        </div>
-        <Select
-          onValueChange={(cnt: string) => {
-            setHeadCount(cnt)
-          }}
-        >
-          <SelectTrigger className="w-[224px] text-center">
-            <SelectValue
-              className="flex flex-1"
-              defaultValue={initialCnt ? initialCnt : undefined}
-              placeholder={initialCnt ? initialCnt : "인원 수를 선택해주세요"}
-            />
-          </SelectTrigger>
-          <SelectContent>
-            {HeadCountValue.map((cnt) => (
-              <SelectItem value={cnt} key={cnt}>
-                {cnt}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    </CodingMeetingSection>
-  )
-}
-
-export default HeadCountSection
diff --git a/src/page/coding-meetings/create/components/LocationSection.tsx b/src/page/coding-meetings/create/components/LocationSection.tsx
deleted file mode 100644
index 6c9fd34c..00000000
--- a/src/page/coding-meetings/create/components/LocationSection.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-"use client"
-
-import { Input } from "@/components/shared/input/Input"
-import CodingMeetingSection from "./CodingMeetingSection"
-import Button from "@/components/shared/button/Button"
-import { Icons } from "@/components/icons/Icons"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/Dialog"
-import KakaoMapPage from "./CustomMap/kakaoMap"
-import { useEffect, useLayoutEffect, useState } from "react"
-import { useRecoilState, useSetRecoilState } from "recoil"
-import {
-  CodingMeetingMapData,
-  LocationForSubmit,
-  SearchMapMarker,
-  SelectedPlace,
-} from "@/recoil/atoms/coding-meeting/mapData"
-import { twJoin } from "tailwind-merge"
-import { LocationSectionProps } from "../CreateCodingMeetingPage.types"
-import MapContainer from "../../detail/kakao-map/MapContainer"
-
-const LocationSection = ({ initialLocation }: LocationSectionProps) => {
-  const [location, setLocation] = useRecoilState(LocationForSubmit)
-
-  useLayoutEffect(() => {
-    if (initialLocation)
-      setLocation({
-        coding_meeting_location_id: initialLocation.coding_meeting_location_id,
-        coding_meeting_location_place_name:
-          initialLocation.coding_meeting_location_place_name,
-        coding_meeting_location_latitude:
-          initialLocation.coding_meeting_location_latitude,
-        coding_meeting_location_longitude:
-          initialLocation.coding_meeting_location_longitude,
-      })
-  }, [])
-
-  return (
-    <CodingMeetingSection>
-      <CodingMeetingSection.Label>위치</CodingMeetingSection.Label>
-      <div className="w-full flex">
-        {location && (
-          <div className="mr-5 mb-5 flex items-center">
-            <div>
-              <Icons.MapMarker />
-            </div>
-            <div>{location.coding_meeting_location_place_name}</div>
-          </div>
-        )}
-        <LocationDialog />
-      </div>
-    </CodingMeetingSection>
-  )
-}
-
-export default LocationSection
-
-const LocationDialog = () => {
-  const [keyword, setKeyword] = useState<string>("")
-  const [mapData, setMapData] = useRecoilState(CodingMeetingMapData)
-  const [selectedPlace, setSelectedPlace] = useRecoilState(SelectedPlace)
-  const setMarkers = useSetRecoilState(SearchMapMarker)
-  const [location, setLocation] = useRecoilState(LocationForSubmit)
-
-  const resetHistory = () => {
-    setKeyword("")
-    setMapData(undefined)
-    setMarkers(undefined)
-    setLocation(undefined)
-    setSelectedPlace(undefined)
-  }
-
-  useLayoutEffect(() => {
-    resetHistory()
-  }, [])
-
-  useEffect(() => {
-    if (!selectedPlace) return
-    const element = document.getElementById(selectedPlace?.content)
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth" })
-    }
-  }, [selectedPlace])
-
-  const LocationSelectBtnClass = twJoin([
-    location ? "w-[100px]" : "w-[224px] p-3",
-  ])
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <div>
-          <Button
-            buttonTheme="secondary"
-            className={LocationSelectBtnClass}
-            onClick={resetHistory}
-          >
-            <Icons.Search className="mr-1 scale-x-[-1]" />
-            {location ? "위치 바꾸기" : "위치를 검색해주세요"}
-          </Button>
-        </div>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[48rem] overflow-y-scroll">
-        <DialogHeader>
-          <DialogTitle>
-            <div className="text-2xl font-bold text-center">장소 검색하기</div>
-            <div className="text-md text-center text-slate-400 font-light mt-3">
-              검색어를 입력하면 실시간으로 관련 장소를 확인해볼 수 있어요
-            </div>
-          </DialogTitle>
-          <DialogDescription>
-            <div className="flex items-center">
-              <Input
-                id="title"
-                spellCheck="false"
-                autoComplete="off"
-                fullWidth
-                className="text-base placeholder:text-base my-5 px-5 mr-5 relative"
-                placeholder="위치를 검색해주세요"
-                value={keyword}
-                onChange={(e) => setKeyword(e.target.value)}
-              />
-              <div
-                className=" hover:text-primary absolute right-10 cursor-pointer text-lg"
-                onClick={resetHistory}
-              >
-                <Icons.Close />
-              </div>
-            </div>
-            <div className="flex gap-5 flex-col sm:flex-row mb-5">
-              <div className="w-full sm:w-[40%] border-[1px] border-gray-200 min-h-[70px] max-h-[300px] overflow-scroll">
-                {mapData &&
-                  mapData.map((place) => (
-                    <div
-                      key={place.id}
-                      className="mb-3 border-b-[1px] border-b-slate-300 p-3 mx-2 last:border-b-0"
-                      id={place.place_name}
-                    >
-                      <div
-                        className="font-bold mb-2 cursor-pointer text-left hover:text-primary"
-                        onClick={() => {
-                          window.open(place.place_url)
-                        }}
-                      >
-                        {place.place_name}
-                      </div>
-                      <div className="flex justify-between">
-                        <div className="text-slate-400">
-                          {place.address_name}
-                        </div>
-                        <div>
-                          <DialogClose asChild>
-                            <Button
-                              type="button"
-                              buttonTheme={
-                                place.place_name ===
-                                location?.coding_meeting_location_place_name
-                                  ? "primary"
-                                  : "third"
-                              }
-                              className="ml-5 p-1 w-[40px] hover:text-white"
-                              onClick={() =>
-                                setLocation({
-                                  coding_meeting_location_id: place.id,
-                                  coding_meeting_location_place_name:
-                                    place.place_name,
-                                  coding_meeting_location_latitude: place.y,
-                                  coding_meeting_location_longitude: place.x,
-                                })
-                              }
-                            >
-                              선택
-                            </Button>
-                          </DialogClose>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-              </div>
-              <MapContainer>
-                <KakaoMapPage keyword={keyword} />
-              </MapContainer>
-            </div>
-          </DialogDescription>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/src/page/coding-meetings/create/components/calendar/CreateCodingMeetingCalendar.tsx b/src/page/coding-meetings/create/components/calendar/CreateCodingMeetingCalendar.tsx
new file mode 100644
index 00000000..b3733840
--- /dev/null
+++ b/src/page/coding-meetings/create/components/calendar/CreateCodingMeetingCalendar.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import "@/styles/react-calendar/CodingMeetingTile.css"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import ReservationCalendarBase from "@/page/coffee-chat/detail/reservation/calendar-base/ReservationCalendarBase"
+import dayjs from "dayjs"
+import { useController, useFormContext } from "react-hook-form"
+import { codingMeetingDayRules } from "../../controls/rules/date/day/coding-meeting-day-rules"
+
+interface CreateCodingMeetingCalendarProps {
+  initialDay?: CodingMeetingFormData["date"]["day"]
+}
+
+const CreateCodingMeetingCalendar = ({
+  initialDay,
+}: CreateCodingMeetingCalendarProps) => {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "date.day",
+    rules: codingMeetingDayRules,
+    defaultValue: initialDay
+      ? dayjs(initialDay).startOf("days").toDate()
+      : dayjs().startOf("days").toDate(),
+  })
+
+  return (
+    <ReservationCalendarBase
+      ref={field.ref}
+      minDate={
+        initialDay
+          ? dayjs(initialDay).startOf("days").toDate()
+          : dayjs().startOf("days").toDate()
+      }
+      date={field.value}
+      onDateChange={(date) =>
+        field.onChange(
+          dayjs(date as any)
+            .startOf("days")
+            .toDate(),
+        )
+      }
+      tileClassName={({ date }) => {
+        if (initialDay) {
+          return dayjs(date)
+            .startOf("days")
+            .isSame(dayjs(initialDay).startOf("days"))
+            ? "prev_meeting_day"
+            : ""
+        }
+
+        return ""
+      }}
+      tileDisabled={({ date }) => {
+        return dayjs(date).isBefore(dayjs().startOf("days"))
+      }}
+    />
+  )
+}
+export default CreateCodingMeetingCalendar
diff --git a/src/page/coding-meetings/create/components/section/content/ContentSection.tsx b/src/page/coding-meetings/create/components/section/content/ContentSection.tsx
new file mode 100644
index 00000000..b6f76ddb
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/content/ContentSection.tsx
@@ -0,0 +1,20 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import ContentController from "../../../controls/ContentController"
+import CodingMeetingSection from "../../CodingMeetingSection"
+
+interface ContentSectionProps {
+  initialContent?: CodingMeetingFormData["content"]
+}
+
+function ContentSection({ initialContent }: ContentSectionProps) {
+  return (
+    <CodingMeetingSection>
+      <CodingMeetingSection.Label htmlFor="meeting-content">
+        모집글
+      </CodingMeetingSection.Label>
+      <ContentController initialContent={initialContent} />
+    </CodingMeetingSection>
+  )
+}
+
+export default ContentSection
diff --git a/src/page/coding-meetings/create/components/section/date-time/DateTimeSection.tsx b/src/page/coding-meetings/create/components/section/date-time/DateTimeSection.tsx
new file mode 100644
index 00000000..75201703
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/date-time/DateTimeSection.tsx
@@ -0,0 +1,81 @@
+"use client"
+
+import Spacing from "@/components/shared/Spacing"
+import CodingMeetingSection from "../../CodingMeetingSection"
+import CreateCodingMeetingCalendar from "../../calendar/CreateCodingMeetingCalendar"
+import CodingMeetingEndHourController from "../../../controls/end-time/CodingMeetingEndHourController"
+import CodingMeetingEndMinuteController from "../../../controls/end-time/CodingMeetingEndMinuteController"
+import CodingMeetingStartHourController from "../../../controls/start-time/CodingMeetingStartHourController"
+import CodingMeetingStartMinuteController from "../../../controls/start-time/CodingMeetingStartMinuteController"
+import { CodingMeetingFormData } from "@/interfaces/form"
+
+interface DateTimeSectionProps {
+  initialDateTime?: CodingMeetingFormData["date"]
+}
+
+const DateTimeSection = ({ initialDateTime }: DateTimeSectionProps) => {
+  return (
+    <CodingMeetingSection>
+      <CodingMeetingSection.Label className="block w-max">
+        일 시
+      </CodingMeetingSection.Label>
+      <div className="flex flex-col sm:flex-row gap-y-6 w-full items-start">
+        <div className="flex-1 w-full">
+          <div className="font-medium text-[#828282]">날짜</div>
+          <div className="w-full flex justify-center">
+            <CreateCodingMeetingCalendar
+              {...(initialDateTime && { initialDay: initialDateTime.day })}
+            />
+          </div>
+        </div>
+        <div className="flex-1 w-full">
+          <div className="font-medium text-[#828282] mb-4">시간</div>
+          <TimeWrapper timeType="start">
+            <CodingMeetingStartHourController
+              {...(initialDateTime && {
+                initialStartHour: initialDateTime.start_time[0],
+              })}
+            />
+            <CodingMeetingStartMinuteController
+              {...(initialDateTime && {
+                initialStartMinute: initialDateTime.start_time[1],
+              })}
+            />
+          </TimeWrapper>
+          <Spacing size={16} />
+          <TimeWrapper timeType="end">
+            <CodingMeetingEndHourController
+              {...(initialDateTime && {
+                initialEndHour: initialDateTime.end_time[0],
+              })}
+            />
+            <CodingMeetingEndMinuteController
+              {...(initialDateTime && {
+                initialEndMinute: initialDateTime.end_time[1],
+              })}
+            />
+          </TimeWrapper>
+        </div>
+      </div>
+    </CodingMeetingSection>
+  )
+}
+
+export default DateTimeSection
+
+const TimeWrapper = ({
+  timeType,
+  children,
+}: {
+  timeType: "start" | "end"
+  children: React.ReactNode
+}) => {
+  return (
+    <div className="flex gap-x-1 justify-between sm:justify-start items-center w-full">
+      <div className="flex gap-x-2">{children}</div>
+      <span className="text-[#828282] font-medium shrink-0">
+        {timeType === "start" ? "부터" : "까지"}
+      </span>
+    </div>
+  )
+}
diff --git a/src/page/coding-meetings/create/components/section/hash-tags/HashTagsController.tsx b/src/page/coding-meetings/create/components/section/hash-tags/HashTagsController.tsx
new file mode 100644
index 00000000..6300518d
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/hash-tags/HashTagsController.tsx
@@ -0,0 +1,213 @@
+"use client"
+
+import { Icons } from "@/components/icons/Icons"
+import Button from "@/components/shared/button/Button"
+import { Input } from "@/components/shared/input/Input"
+import HashTag from "@/components/shared/tag/HashTag"
+import { CodingMeetingFormData, HashTagFormData } from "@/interfaces/form"
+import {
+  HashTagListRuleValidateType,
+  HashTagRuleValidateType,
+  hashTagRules,
+} from "@/page/coffee-chat/create/controls/rules/hashtag-rules"
+import { useId } from "react"
+import {
+  FieldError,
+  FieldErrors,
+  useController,
+  useFieldArray,
+  useForm,
+  useFormContext,
+} from "react-hook-form"
+import { toast } from "react-toastify"
+import CodingMeetingSection from "../../CodingMeetingSection"
+import Limitation from "@/constants/limitation"
+
+interface HashTagsControllerProps {
+  initialHashTags?: CodingMeetingFormData["hashtags"]
+}
+
+function HashTagsController({ initialHashTags }: HashTagsControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "hashtags",
+    defaultValue: initialHashTags ?? [],
+  })
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "hashtags",
+  })
+
+  const uniqueId = useId()
+
+  return (
+    <CodingMeetingSection>
+      <CodingMeetingSection.Label htmlFor="hashTag">
+        <span>해시태그</span>
+        <span>&nbsp;&#40;&nbsp;</span>
+        <span
+          className={`${
+            fields.length <= Limitation.hashtags_cnt
+              ? "text-primary"
+              : "text-danger"
+          }`}
+        >
+          {fields.length}
+        </span>
+        <span>&nbsp;/&nbsp;</span>
+        <span>{Limitation.hashtags_cnt}</span>
+        <span>&nbsp;&#41;</span>
+      </CodingMeetingSection.Label>
+      <div>
+        <HashTagField
+          hashTagListValue={fields ?? []}
+          onValidHashTag={(hashTag) => {
+            append({ tag: hashTag })
+          }}
+          onInvalidHashTagList={(error) => {
+            if (error.type === HashTagListRuleValidateType.Maximum) {
+              toast.error(error.message, {
+                position: "top-center",
+                toastId: "maxLengthHashTagList",
+              })
+
+              return
+            }
+
+            if (error.type === HashTagListRuleValidateType.Duplicate) {
+              toast.error(error.message, {
+                position: "top-center",
+                toastId: "duplicateHashTag",
+              })
+
+              return
+            }
+          }}
+        />
+        <div className="min-h-[30px] mt-5 flex flex-wrap gap-3">
+          {fields.map(({ tag }, index) => (
+            <div
+              key={`${uniqueId}-${tag}`}
+              className="inline-flex rounded-lg items-center bg-colorsLightGray pr-2"
+            >
+              <HashTag className="bg-transparent shadow-none">{tag}</HashTag>
+              <div
+                className="cursor-pointer transition-colors w-5 h-5 p-1 rounded-full border flex justify-center items-center bg-white hover:bg-secondary hover:text-white"
+                onClick={() => remove(index)}
+              >
+                <Icons.Close />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </CodingMeetingSection>
+  )
+}
+
+export default HashTagsController
+
+const HashTagField = ({
+  hashTagListValue,
+  onValidHashTag,
+  onInvalidHashTagList,
+}: {
+  hashTagListValue: CodingMeetingFormData["hashtags"]
+  onValidHashTag: (hashTag: string) => void
+  onInvalidHashTagList: (error: FieldError) => void
+}) => {
+  const { resetField, control } = useForm<HashTagFormData>({
+    defaultValues: { hashTag: "" },
+  })
+  const { field } = useController({
+    control,
+    name: "hashTag",
+    rules: hashTagRules({
+      hashTagList: hashTagListValue.map(({ tag }) => tag),
+    }),
+  })
+
+  const onSubmit = ({ hashTag }: HashTagFormData) => {
+    resetField("hashTag")
+    onValidHashTag(hashTag)
+  }
+
+  const onInvalid = (errors: FieldErrors<HashTagFormData>) => {
+    // hashTagList (hashTagList 콘트롤러에서 처리)
+    if (errors.hashTag?.type === HashTagListRuleValidateType.Maximum) {
+      onInvalidHashTagList(errors.hashTag)
+      return
+    }
+    if (errors.hashTag?.type === HashTagListRuleValidateType.Duplicate) {
+      onInvalidHashTagList(errors.hashTag)
+      return
+    }
+
+    // hashtag
+    if (errors.hashTag?.type === "required") {
+      toast.error(errors.hashTag.message, {
+        position: "top-center",
+        toastId: "emptyHashTag",
+      })
+
+      return
+    }
+
+    if (errors.hashTag?.type === HashTagRuleValidateType.InvalidFormat) {
+      toast.error(errors.hashTag.message, {
+        position: "top-center",
+        toastId: "invalidHashTagFormat",
+      })
+
+      return
+    }
+
+    if (errors.hashTag?.type === HashTagRuleValidateType.WhiteSpace) {
+      toast.error(errors.hashTag.message, {
+        position: "top-center",
+        toastId: "invalidHashTagWhiteSpace",
+      })
+
+      return
+    }
+
+    if (errors.hashTag?.type === "maxLength") {
+      toast.error(errors.hashTag.message, {
+        position: "top-center",
+        toastId: "maxLengthHashTag",
+      })
+
+      return
+    }
+  }
+
+  const controlHashTagData = control.handleSubmit(onSubmit, onInvalid)
+
+  return (
+    <div className="flex gap-3">
+      <Input
+        ref={field.ref}
+        id={field.name}
+        spellCheck="false"
+        autoComplete="off"
+        wrapperClassName="max-w-[282px] w-[64%]"
+        className="rounded-none border-r-0 border-l-0 border-t-0 text-sm"
+        placeholder="해시태그를 추가해보세요"
+        value={field.value}
+        onChange={field.onChange}
+        onBlur={field.onBlur}
+      />
+      <div className="flex flex-col justify-center">
+        <Button
+          type="button"
+          buttonTheme="primary"
+          className="px-5 py-2 w-max shrink-0"
+          onClick={controlHashTagData}
+        >
+          추가
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/page/coding-meetings/create/components/section/hash-tags/HashTagsSection.tsx b/src/page/coding-meetings/create/components/section/hash-tags/HashTagsSection.tsx
new file mode 100644
index 00000000..bce293a8
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/hash-tags/HashTagsSection.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { CodingMeetingFormData } from "@/interfaces/form"
+import HashTagsController from "./HashTagsController"
+
+interface HashTagSectionProps {
+  initialHashTags?: CodingMeetingFormData["hashtags"]
+}
+
+const HashTagsSection = ({ initialHashTags }: HashTagSectionProps) => {
+  return <HashTagsController initialHashTags={initialHashTags} />
+}
+
+export default HashTagsSection
diff --git a/src/page/coding-meetings/create/components/section/location/LocationDialog.tsx b/src/page/coding-meetings/create/components/section/location/LocationDialog.tsx
new file mode 100644
index 00000000..2e596446
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/location/LocationDialog.tsx
@@ -0,0 +1,33 @@
+import { useEffect } from "react"
+import SearchController from "./search/SearchController"
+import Button from "@/components/shared/button/Button"
+import { Icons } from "@/components/icons/Icons"
+import useModal from "@/hooks/useModal"
+
+function LocationDialog() {
+  const { closeModal } = useModal()
+
+  useEffect(() => {
+    document.body.style.overflow = "hidden"
+
+    return () => {
+      document.body.style.removeProperty("overflow")
+    }
+  }, [])
+
+  return (
+    <div className="w-full bg-white p-4">
+      <div className="sticky top-6 w-full">
+        <Button className="p-0" onClick={closeModal}>
+          <Icons.Close className="text-2xl p-0.5 absolute -right-7 -top-6" />
+        </Button>
+      </div>
+      <h4 className="mb-3">
+        <div className="text-2xl font-bold text-center">장소 검색하기</div>
+      </h4>
+      <SearchController />
+    </div>
+  )
+}
+
+export default LocationDialog
diff --git a/src/page/coding-meetings/create/components/section/location/LocationSection.tsx b/src/page/coding-meetings/create/components/section/location/LocationSection.tsx
new file mode 100644
index 00000000..d988bff9
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/location/LocationSection.tsx
@@ -0,0 +1,23 @@
+import CodingMeetingSection from "../../CodingMeetingSection"
+import LocationController from "../../../controls/LocationController"
+import { CodingMeetingFormData } from "@/interfaces/form"
+
+interface LocationSectionProps {
+  initialLocation?: CodingMeetingFormData["location"]
+}
+
+function LocationSection({ initialLocation }: LocationSectionProps) {
+  return (
+    <CodingMeetingSection>
+      <CodingMeetingSection.Label
+        htmlFor="meeting-location"
+        verticalAlign="center"
+      >
+        위치
+      </CodingMeetingSection.Label>
+      <LocationController initialLocation={initialLocation} />
+    </CodingMeetingSection>
+  )
+}
+
+export default LocationSection
diff --git a/src/page/coding-meetings/create/components/section/location/SearchResultPlaceMaps.tsx b/src/page/coding-meetings/create/components/section/location/SearchResultPlaceMaps.tsx
new file mode 100644
index 00000000..7195ea2b
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/location/SearchResultPlaceMaps.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import { Icons } from "@/components/icons/Icons"
+import { SearchPlaceResultData } from "@/recoil/atoms/coding-meeting/mapData"
+import { StaticMap } from "react-kakao-maps-sdk"
+import { useRecoilValue } from "recoil"
+import Button from "@/components/shared/button/Button"
+import { ErrorBoundary } from "react-error-boundary"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { useController, useFormContext } from "react-hook-form"
+import useModal from "@/hooks/useModal"
+import { locationRules } from "../../../controls/rules/location/location-rules"
+
+function SearchResultPlaceMaps() {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "location",
+    rules: locationRules,
+  })
+
+  const searchPlaceResultData = useRecoilValue(SearchPlaceResultData)
+
+  const { closeModal } = useModal()
+
+  if (
+    searchPlaceResultData.keyword &&
+    !searchPlaceResultData?.placeList?.length
+  ) {
+    return (
+      <div className="w-full bg-white border border-colorsGray rounded-md">
+        <div className="w-full h-[120px] flex justify-center items-center">
+          <Icons.MapMarker className="text-3xl text-colorsGray" />
+        </div>
+        <div className="w-full px-2 py-1">
+          <div className="inline-flex align-top text-sm">
+            <span className="text-danger">&apos;</span>
+            <span className="inline-block align-top text-danger whitespace-nowrap overflow-hidden text-ellipsis max-w-[154px]">
+              {searchPlaceResultData.keyword}
+            </span>
+            <span className="text-danger">&apos;</span>
+          </div>
+          <span className="text-sm align-top">
+            검색어와 일치하는 장소를 찾을 수 없습니다.
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <ul>
+      {searchPlaceResultData.placeList.map((place) => {
+        return (
+          <li
+            key={place.id}
+            className="[&:not(:last-child)]:mb-6 w-full bg-white border border-colorsGray rounded-md"
+          >
+            <div className="w-full overflow-hidden">
+              <ErrorBoundary
+                fallback={
+                  <div className="w-full h-[120px]">
+                    <div className="absolute left-0 top-0 z-[2] w-full h-full flex flex-col justify-center items-center bg-white">
+                      <div className="w-8 h-8 flex justify-center items-center rounded-full border border-[#828282]">
+                        <Icons.MapMarker className="text-[#828282]" />
+                      </div>
+                      <div className="mt-5 text-sm text-[#828282]">
+                        카카오 맵 로드 실패
+                      </div>
+                    </div>
+                  </div>
+                }
+              >
+                <StaticMap
+                  style={{
+                    width: "100%",
+                    height: "120px",
+                  }}
+                  center={{ lng: Number(place.x), lat: Number(place.y) }}
+                  marker={{
+                    position: { lng: Number(place.x), lat: Number(place.y) },
+                  }}
+                  level={3}
+                />
+              </ErrorBoundary>
+            </div>
+            <div className="flex w-full gap-x-6 justify-between px-2 py-1">
+              <div className="basis-0 flex-1">
+                <span className="font-bold block">{place.place_name}</span>
+                <span className="text-xs text-colorsDarkGray font-medium">
+                  {place.address_name}
+                </span>
+              </div>
+              <div className="flex justify-center items-center">
+                <Button
+                  buttonTheme="primary"
+                  className="px-6"
+                  onClick={() => {
+                    field.onChange({
+                      id: place.id,
+                      longitude: place.x,
+                      latitude: place.y,
+                      place_name: place.place_name,
+                    } as CodingMeetingFormData["location"])
+
+                    closeModal()
+                  }}
+                >
+                  선택
+                </Button>
+              </div>
+            </div>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export default SearchResultPlaceMaps
diff --git a/src/page/coding-meetings/create/components/section/location/search/AutoComplete.tsx b/src/page/coding-meetings/create/components/section/location/search/AutoComplete.tsx
new file mode 100644
index 00000000..00ec0936
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/location/search/AutoComplete.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import { PlaceAutoComplete } from "@/recoil/atoms/coding-meeting/mapData"
+import { useRecoilValue } from "recoil"
+import HighlightPlaceName from "./HighlightPlaceName"
+import React from "react"
+
+interface AutoCompleteProps {
+  onPlaceClick?: (payload: {
+    event: React.MouseEvent<HTMLLIElement>
+    place: kakao.maps.services.PlacesSearchResultItem
+  }) => void
+}
+
+function AutoComplete({ onPlaceClick }: AutoCompleteProps) {
+  const { keyword, loading, placeList } = useRecoilValue(PlaceAutoComplete)
+
+  if (!keyword) {
+    return <div className="text-sm py-4">검색어를 입력해 주세요</div>
+  }
+
+  if (loading) return <div className="text-sm py-4">잠시만 기다려주세요</div>
+
+  if (!placeList?.length)
+    return (
+      <div className="text-sm py-4">
+        <span className="text-danger font-semibold inline-block align-top overflow-hidden text-ellipsis max-w-[12em] whitespace-nowrap">
+          {keyword}
+        </span>{" "}
+        검색어와 일치하는 장소를 찾지 못했어요.
+      </div>
+    )
+
+  return (
+    <ul
+      id="location-autocomplete-wrapper"
+      className="max-h-[224px] overflow-x-hidden overflow-y-auto"
+    >
+      {placeList.map((place) => {
+        const onClick = (e: React.MouseEvent<HTMLLIElement>) => {
+          onPlaceClick && onPlaceClick({ event: e, place })
+        }
+
+        return (
+          <li
+            key={place.id}
+            className="[&:not(:last-child)]:border-b [&:not(:last-child)]:border-b-colorsGray flex flex-col w-full break-all py-4 justify-center bg-white pointerhover:hover:bg-light-green pointerhover:hover:cursor-pointer"
+            onClick={onClick}
+          >
+            <HighlightPlaceName
+              placeName={place.place_name}
+              typedKeyword={keyword}
+            />
+            <span className="text-xs font-medium">{place.address_name}</span>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export default AutoComplete
+
+AutoComplete.Wrapper = function AutoCompleteWrapper({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const placeAutoComplete = useRecoilValue(PlaceAutoComplete)
+
+  return placeAutoComplete.open ? (
+    <div className="absolute w-full p-2 bg-white rounded-bl-2xl rounded-br-2xl left-0 top-full border-t border-t-colorsGray shadow-[0_5px_2px_0_rgba(0,0,0,.05),0_5px_8px_0_rgba(0,0,0,.08)]">
+      {children}
+    </div>
+  ) : null
+}
diff --git a/src/page/coding-meetings/create/components/section/location/search/HighlightPlaceName.tsx b/src/page/coding-meetings/create/components/section/location/search/HighlightPlaceName.tsx
new file mode 100644
index 00000000..6954e405
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/location/search/HighlightPlaceName.tsx
@@ -0,0 +1,69 @@
+import Highlight from "react-highlight-words"
+
+interface HighlightPlaceNameProps {
+  placeName: string
+  typedKeyword: string
+}
+
+function HighlightPlaceName({
+  placeName,
+  typedKeyword,
+}: HighlightPlaceNameProps) {
+  const searchWords = getSearchWords({
+    keyword: typedKeyword,
+    text: placeName,
+  })
+
+  return (
+    <Highlight
+      highlightClassName="font-bold bg-transparent text-primary"
+      searchWords={searchWords}
+      textToHighlight={placeName}
+    />
+  )
+}
+
+export default HighlightPlaceName
+
+function getSearchWords({
+  keyword,
+  text,
+}: {
+  keyword: string
+  text: string
+}): string[] {
+  return keyword
+    .split(" ")
+    .map((keyword) => {
+      if (text.search(keyword) > -1) {
+        return [keyword]
+      }
+
+      const matchedWords = []
+
+      let startIndex = 0
+
+      for (let i = 0; i < keyword.length; i++) {
+        const subKeyword = keyword.slice(startIndex, i + 1)
+
+        if (text.search(subKeyword) === -1) {
+          const prev = keyword.slice(startIndex, i)
+
+          if (prev && text.search(prev) > -1) {
+            matchedWords.push(prev)
+
+            startIndex = i
+            i = startIndex - 1
+          }
+          continue
+        }
+
+        if (i === keyword.length - 1) {
+          matchedWords.push(keyword.slice(startIndex, i + 1))
+        }
+      }
+
+      return matchedWords?.length ? matchedWords : []
+    })
+    .flatMap((value) => value)
+}
diff --git a/src/page/coding-meetings/create/components/section/location/search/SearchController.tsx b/src/page/coding-meetings/create/components/section/location/search/SearchController.tsx
new file mode 100644
index 00000000..7e9aabf0
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/location/search/SearchController.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import { Icons } from "@/components/icons/Icons"
+import Button from "@/components/shared/button/Button"
+import RowInput from "@/components/shared/input/RowInput"
+import { CodingMeetingLocationSearchFormData } from "@/interfaces/form"
+import { debounce } from "lodash-es"
+import React, { useEffect, useMemo, useRef } from "react"
+import { FieldErrors, useController, useForm } from "react-hook-form"
+import { IoIosCloseCircle } from "react-icons/io"
+import AutoComplete from "./AutoComplete"
+import { twMerge } from "tailwind-merge"
+import { useKakaoMapPlaceApi } from "@/page/coding-meetings/create/hooks/useKakaoMapPlaceApi"
+import {
+  PlaceAutoComplete,
+  SearchPlaceResultData,
+} from "@/recoil/atoms/coding-meeting/mapData"
+import { useRecoilState, useResetRecoilState, useSetRecoilState } from "recoil"
+import SearchResultPlaceMaps from "../SearchResultPlaceMaps"
+import { locationSearchRules } from "@/page/coding-meetings/create/controls/rules/location/location-search-rules"
+
+function SearchController() {
+  const { control } = useForm<CodingMeetingLocationSearchFormData>()
+  const { field: searchField } = useController({
+    control,
+    name: "keyword",
+    rules: locationSearchRules,
+    defaultValue: "",
+  })
+
+  const { kakaoPlaceApi } = useKakaoMapPlaceApi()
+
+  const [placeAutoComplete, setPlaceAutoComplete] =
+    useRecoilState(PlaceAutoComplete)
+  const resetPlaceAutoComplete = useResetRecoilState(PlaceAutoComplete)
+  const setSearchPlaceResultData = useSetRecoilState(SearchPlaceResultData)
+  const resetSearchPlaceResultData = useResetRecoilState(SearchPlaceResultData)
+
+  const containerRef = useRef<HTMLDivElement>(null) // clickAway에서 활용
+  const inputFieldRef = useRef<HTMLInputElement>(null) // 인풋요소를 blur, focus 하기 위해
+  const isComposingRef = useRef<boolean>(false) // IME 이슈 해결에서 활용
+
+  const inputFoucsedClassnames = twMerge([
+    "p-0 focus-within:border-colorsGray overflow-hidden",
+    placeAutoComplete.open &&
+      "focus-within:border-transparent border-transparent rounded-tl-2xl rounded-tr-2xl rounded-bl-none rounded-br-none shadow-[0_4px_8px_0_rgba(0,0,0,.13)]",
+  ])
+
+  // debounce handler
+  const debounceSearchCallback = (value: string) => {
+    if (isComposingRef.current === true) {
+      inputFieldRef.current!.blur()
+      inputFieldRef.current!.focus()
+    }
+
+    if (!kakaoPlaceApi) {
+      setPlaceAutoComplete((prev) => ({
+        ...prev,
+        open: false,
+        loading: false,
+        keyword: value,
+        placeList: [],
+      }))
+
+      return
+    }
+
+    if (!value) {
+      resetPlaceAutoComplete()
+
+      return
+    }
+
+    if (placeAutoComplete.loading) {
+      return
+    }
+
+    setPlaceAutoComplete((prev) => ({
+      ...prev,
+      open: true,
+      loading: true,
+      keyword: value,
+    }))
+
+    kakaoPlaceApi.keywordSearch(value, (data, status, _pagination) => {
+      if (status === kakao.maps.services.Status.OK) {
+        setPlaceAutoComplete((prev) => ({
+          ...prev,
+          loading: false,
+          placeList: data,
+        }))
+
+        return
+      }
+
+      if (status === kakao.maps.services.Status.ZERO_RESULT) {
+        setPlaceAutoComplete((prev) => ({
+          ...prev,
+          loading: false,
+          placeList: [],
+        }))
+
+        return
+      }
+
+      // error
+      console.log("place search error(debounce)", { value })
+
+      setPlaceAutoComplete((prev) => ({
+        ...prev,
+        loading: false,
+        placeList: [],
+      }))
+    })
+  }
+
+  const debounceKeyword = useMemo(
+    () => debounce(debounceSearchCallback, 400),
+    [kakaoPlaceApi] /* eslint-disable-line */,
+  ) // kakaoApi 외 나머지는 내부에서 참조(ref)로 값을 사용할 수 있음
+
+  // change handler
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPlaceAutoComplete((prev) => ({ ...prev, open: false }))
+    searchField.onChange(e.target.value)
+
+    debounceKeyword(e.target.value)
+  }
+
+  // search submit handler
+  const onSearchSubmit = ({ keyword }: CodingMeetingLocationSearchFormData) => {
+    setPlaceAutoComplete((prev) => ({ ...prev, open: false }))
+    inputFieldRef.current!.blur()
+
+    kakaoPlaceApi?.keywordSearch(keyword, (data, status, _pagination) => {
+      setTimeout(() => {
+        setPlaceAutoComplete((prev) => ({
+          ...prev,
+          open: false,
+        }))
+      }, 400) // delay시간을 debounce 시간으로 설정
+
+      if (status === kakao.maps.services.Status.OK) {
+        setSearchPlaceResultData({
+          keyword,
+          placeList: data,
+        })
+
+        return
+      }
+
+      if (status === kakao.maps.services.Status.ZERO_RESULT) {
+        setSearchPlaceResultData({
+          keyword,
+          placeList: [],
+        })
+
+        return
+      }
+
+      // error
+      console.log("place search error", { keyword })
+
+      setSearchPlaceResultData({
+        keyword,
+        placeList: [],
+      })
+    })
+  }
+
+  const onSearchInvalid = (
+    errors: FieldErrors<CodingMeetingLocationSearchFormData>,
+  ) => {
+    // console.log("searchErrors", { errors })
+  }
+
+  // effect: add clickAway listener
+  // cleanup
+  useEffect(() => {
+    const handleClickAway = (e: MouseEvent) => {
+      if (!containerRef.current) return
+
+      const target = e.target as HTMLElement
+      if (containerRef.current.contains(target)) {
+        return
+      }
+
+      setPlaceAutoComplete((prev) => ({ ...prev, open: false }))
+    }
+
+    window.addEventListener("click", handleClickAway)
+
+    return () => {
+      window.removeEventListener("click", handleClickAway)
+
+      resetSearchPlaceResultData()
+      resetPlaceAutoComplete()
+    }
+  }, []) /* eslint-disable-line */
+
+  return (
+    <div ref={containerRef}>
+      <form
+        className="relative z-[9]"
+        onSubmit={control.handleSubmit(onSearchSubmit, onSearchInvalid)}
+      >
+        <RowInput
+          ref={inputFieldRef}
+          name="keyword"
+          onChange={handleChange}
+          value={searchField.value}
+          onFocus={(e) => {
+            placeAutoComplete.placeList?.length &&
+              !placeAutoComplete.open &&
+              setPlaceAutoComplete((prev) => ({ ...prev, open: true }))
+          }}
+          onCompositionStart={(e) => {
+            isComposingRef.current = true
+          }}
+          onCompositionEnd={(e) => {
+            isComposingRef.current = false
+          }}
+          classNames={{
+            container: "flex-row",
+            wrapper: inputFoucsedClassnames,
+          }}
+          fullWidth
+          autoComplete="off"
+          spellCheck="false"
+          placeholder="위치를 검색해주세요"
+          sideField={
+            <div className="flex justify-between items-center shrink-0">
+              {searchField.value ? (
+                <Button
+                  type="button"
+                  className="group"
+                  onClick={() => {
+                    searchField.onChange("")
+                    resetPlaceAutoComplete()
+                  }}
+                >
+                  <IoIosCloseCircle className="text-[#828282] text-lg pointerhover:group-hover:text-colorsDarkGray" />
+                </Button>
+              ) : null}
+              <Button type="submit" className="group">
+                <Icons.Search className="shrink-0 text-xl pointerhover:group-hover:text-primary" />
+              </Button>
+            </div>
+          }
+        />
+        <AutoComplete.Wrapper>
+          <AutoComplete
+            onPlaceClick={({ event, place }) => {
+              setPlaceAutoComplete((prev) => ({
+                ...prev,
+                open: false,
+              }))
+
+              setTimeout(() => {
+                searchField.onChange(place.place_name)
+
+                setSearchPlaceResultData((prev) => ({
+                  ...prev,
+                  placeList: [place],
+                }))
+              }, 0)
+            }}
+          />
+        </AutoComplete.Wrapper>
+      </form>
+      <div className="mt-10">
+        <SearchResultPlaceMaps />
+      </div>
+    </div>
+  )
+}
+
+export default SearchController
diff --git a/src/page/coding-meetings/create/components/section/member-count/MemberCountSection.tsx b/src/page/coding-meetings/create/components/section/member-count/MemberCountSection.tsx
new file mode 100644
index 00000000..c90afc76
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/member-count/MemberCountSection.tsx
@@ -0,0 +1,20 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import MemberCountController from "../../../controls/MemberCountController"
+import CodingMeetingSection from "../../CodingMeetingSection"
+
+interface MemberCountSectionProps {
+  initialMemberCount?: CodingMeetingFormData["member_upper_limit"]
+}
+
+function MemberCountSection({ initialMemberCount }: MemberCountSectionProps) {
+  return (
+    <CodingMeetingSection>
+      <CodingMeetingSection.Label htmlFor="meeting-member-count">
+        모집인원
+      </CodingMeetingSection.Label>
+      <MemberCountController initialMemberCount={initialMemberCount} />
+    </CodingMeetingSection>
+  )
+}
+
+export default MemberCountSection
diff --git a/src/page/coding-meetings/create/components/section/title/TitleSection.tsx b/src/page/coding-meetings/create/components/section/title/TitleSection.tsx
new file mode 100644
index 00000000..45bcf041
--- /dev/null
+++ b/src/page/coding-meetings/create/components/section/title/TitleSection.tsx
@@ -0,0 +1,12 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import TitleController from "../../../controls/TitleController"
+
+interface TitleSectionProps {
+  initialTitle?: CodingMeetingFormData["title"]
+}
+
+function TitleSection({ initialTitle }: TitleSectionProps) {
+  return <TitleController initialTitle={initialTitle} />
+}
+
+export default TitleSection
diff --git a/src/page/coding-meetings/create/controls/ContentController.tsx b/src/page/coding-meetings/create/controls/ContentController.tsx
new file mode 100644
index 00000000..daf35915
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/ContentController.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import TextCounter from "@/components/shared/TextCounter"
+import Textarea from "@/components/shared/textarea/Textarea"
+import { CODING_MEETING_LIMITS } from "@/constants/limitation"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { useController, useFormContext } from "react-hook-form"
+import { codingMeetingContentRules } from "./rules/content/coding-meeting-content-rules"
+
+interface ContentControllerProps {
+  initialContent?: CodingMeetingFormData["content"]
+}
+
+function ContentController({ initialContent }: ContentControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "content",
+    rules: codingMeetingContentRules,
+    defaultValue: initialContent ?? "",
+  })
+
+  return (
+    <div className="w-full">
+      <Textarea
+        ref={field.ref}
+        id="meeting-content"
+        className="resize-none w-full h-[200px]"
+        placeholder="모집글의 내용을 작성해주세요 (최대 10,000자)"
+        onChange={field.onChange}
+        value={field.value}
+      />
+      <div className="h-5 text-end">
+        <TextCounter
+          target={!!field.value}
+          text={field.value}
+          min={CODING_MEETING_LIMITS.content.minLength}
+          max={CODING_MEETING_LIMITS.content.maxLength}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ContentController
diff --git a/src/page/coding-meetings/create/controls/LocationController.tsx b/src/page/coding-meetings/create/controls/LocationController.tsx
new file mode 100644
index 00000000..6ed7fa0f
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/LocationController.tsx
@@ -0,0 +1,112 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { useController, useFormContext } from "react-hook-form"
+import LocationDialog from "../components/section/location/LocationDialog"
+import Button from "@/components/shared/button/Button"
+import { Icons } from "@/components/icons/Icons"
+import useModal from "@/hooks/useModal"
+import { useEffect } from "react"
+import { locationRules } from "./rules/location/location-rules"
+import { FaExternalLinkAlt } from "react-icons/fa"
+
+interface LocationControllerProps {
+  initialLocation?: CodingMeetingFormData["location"]
+}
+
+function LocationController({ initialLocation }: LocationControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "location",
+    rules: locationRules,
+    defaultValue: initialLocation,
+  })
+
+  const { closeModal } = useModal()
+
+  useEffect(() => {
+    return () => {
+      closeModal()
+    }
+  }, []) /* eslint-disable-line */
+
+  return (
+    <div
+      ref={field.ref}
+      tabIndex={0}
+      className="focus:outline focus:outline-2 focus:outline-offset-4 focus:outline-secondary focus:rounded-[2px]"
+    >
+      {field.value ? (
+        <SelectedLocation location={field.value} />
+      ) : (
+        <LocationSelector />
+      )}
+    </div>
+  )
+}
+
+export default LocationController
+
+const LocationSelector = () => {
+  const { openModal } = useModal()
+
+  return (
+    <Button
+      id="meeting-location"
+      className="relative w-full h-[41.6px] justify-start pc:justify-center border border-[#E0E0E0] bg-white pc:w-max gap-x-2 focus-visible:outline-offset-4 focus-visible:outline-blue-300 focus-visible:outline-4 pointerhover:hover:shadow-[4px_4px_0px_0px_var(--colors-light-green)] pointerhover:hover:bg-white pointerhover:hover:-top-1 pointerhover:hover:-left-1"
+      onClick={() => {
+        openModal({
+          closeableDim: false,
+          containsHeader: false,
+          content: <LocationDialog />,
+          classNames:
+            "w-full max-w-[540px] h-[100dvh] overflow-x-hidden overflow-y-auto break-all",
+        })
+      }}
+    >
+      <Icons.Search className="text-2xl text-[#BDBDBD]" />
+      <span className="font-medium text-base text-[#BDBDBD]">
+        위치를 선택해주세요
+      </span>
+    </Button>
+  )
+}
+
+const SelectedLocation = ({
+  location,
+}: {
+  location: CodingMeetingFormData["location"]
+}) => {
+  const { openModal } = useModal()
+
+  return (
+    <div className="p-1 flex w-full h-[41.6px] pc:inline-flex pc:w-fit align-top gap-x-2 border border-[#E0E0E0] bg-white rounded-md justify-between items-center">
+      <span className="pl-2 font-bold block text-base">
+        {location.place_name}
+      </span>
+      <div className="flex justify-center items-center">
+        <a
+          href={`https://place.map.kakao.com/${location.id}`}
+          title="카카오 맵에서 확인"
+          target="blank" // 탭이 열린 상태에서 클릭시 새로운 탭이 아닌 기존에 열린 탭에서 열림
+          className="group pointerhover:hover:bg-info rounded-md p-1"
+        >
+          <FaExternalLinkAlt className="text-sm text-secondary pointerhover:group-hover:text-black" />
+        </a>
+        <Button
+          className="text-sm text-secondary pointerhover:hover:text-black font-medium"
+          onClick={() =>
+            openModal({
+              closeableDim: false,
+              containsHeader: false,
+              content: <LocationDialog />,
+              classNames:
+                "w-full max-w-[540px] h-[100dvh] overflow-x-hidden overflow-y-auto break-all",
+            })
+          }
+        >
+          수정하기
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/page/coding-meetings/create/controls/MemberCountController.tsx b/src/page/coding-meetings/create/controls/MemberCountController.tsx
new file mode 100644
index 00000000..3c4bf256
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/MemberCountController.tsx
@@ -0,0 +1,78 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { useController, useFormContext } from "react-hook-form"
+import { memberCountRules } from "./rules/member-count/member-count-rules"
+import { CODING_MEETING_LIMITS } from "@/constants/limitation"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select"
+import { useId } from "react"
+
+interface MemberCountControllerProps {
+  initialMemberCount?: CodingMeetingFormData["member_upper_limit"]
+}
+
+function MemberCountController({
+  initialMemberCount,
+}: MemberCountControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "member_upper_limit",
+    rules: memberCountRules,
+    defaultValue: initialMemberCount,
+  })
+
+  const id = useId()
+
+  const onValueChange = (countFormat: string) => {
+    field.onChange(Number(countFormat))
+  }
+
+  return (
+    <div>
+      <div className="text-slate-500 text-sm mb-2">
+        본인 포함 최대 6명까지 가능합니다.
+      </div>
+      <Select
+        onValueChange={onValueChange}
+        value={field.value ? `${field.value}` : undefined}
+      >
+        <SelectTrigger
+          id="meeting-member-count"
+          ref={field.ref}
+          className="w-full sm:w-[224px]"
+        >
+          <SelectValue
+            placeholder={
+              <span className={"text-[#828282]"}>인원 수를 선택해주세요</span>
+            }
+          />
+        </SelectTrigger>
+        <SelectContent>
+          {memberCountOptions.map((memberCount) => {
+            return (
+              <SelectItem key={`${id}-${memberCount}`} value={`${memberCount}`}>
+                {memberCount}
+              </SelectItem>
+            )
+          })}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+export default MemberCountController
+
+const memberCountOptions = Array.from({
+  length:
+    CODING_MEETING_LIMITS.memberCount.max -
+    CODING_MEETING_LIMITS.memberCount.min +
+    1,
+}).map((_, index) => {
+  return CODING_MEETING_LIMITS.memberCount.min + index
+})
diff --git a/src/page/coding-meetings/create/controls/TitleController.tsx b/src/page/coding-meetings/create/controls/TitleController.tsx
new file mode 100644
index 00000000..4093df20
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/TitleController.tsx
@@ -0,0 +1,57 @@
+import TextCounter from "@/components/shared/TextCounter"
+import { Input } from "@/components/shared/input/Input"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { useController, useFormContext } from "react-hook-form"
+import CodingMeetingSection from "../components/CodingMeetingSection"
+import Limitation from "@/constants/limitation"
+import { codingMeetingTitleRules } from "./rules/title/title-rules"
+
+interface TitleControllerProps {
+  initialTitle?: CodingMeetingFormData["title"]
+}
+
+function TitleController({ initialTitle }: TitleControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field, fieldState } = useController({
+    control,
+    name: "title",
+    rules: codingMeetingTitleRules,
+    defaultValue: initialTitle ?? "",
+  })
+
+  return (
+    <CodingMeetingSection>
+      <CodingMeetingSection.Label
+        verticalAlign="center"
+        htmlFor={field.name}
+        className="gap-x-2"
+      >
+        <span>제목</span>
+        <TextCounter
+          target={!!field.value}
+          text={field.value}
+          min={Limitation.title_limit_under}
+          max={Limitation.title_limit_over}
+        />
+      </CodingMeetingSection.Label>
+      <div className="w-full">
+        <Input
+          ref={field.ref}
+          name={field.name}
+          id={field.name}
+          className={"text-base placeholder:text-base"}
+          placeholder="제목을 입력해주세요(5자 이상 100자 이하)"
+          spellCheck="false"
+          autoComplete="off"
+          fullWidth
+          value={field.value}
+          error={!!fieldState.error && fieldState.error.type !== "required"}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+        />
+      </div>
+    </CodingMeetingSection>
+  )
+}
+
+export default TitleController
diff --git a/src/page/coding-meetings/create/controls/end-time/CodingMeetingEndHourController.tsx b/src/page/coding-meetings/create/controls/end-time/CodingMeetingEndHourController.tsx
new file mode 100644
index 00000000..839d78ff
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/end-time/CodingMeetingEndHourController.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+} from "@/components/ui/Select"
+import { CODING_MEETING_HOURS } from "@/constants/timeOptions"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { SelectValue } from "@radix-ui/react-select"
+import { useId } from "react"
+import { useController, useFormContext } from "react-hook-form"
+import { codingMeetingEndHourRules } from "../rules/date/end-time/coding-meeting-end-hour-rules"
+
+interface CodingMeetingEndHourControllerProps {
+  initialEndHour?: CodingMeetingFormData["date"]["end_time"][0]
+}
+
+function CodingMeetingEndHourController({
+  initialEndHour,
+}: CodingMeetingEndHourControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "date.end_time.0",
+    rules: codingMeetingEndHourRules,
+    defaultValue: initialEndHour,
+  })
+
+  const seperatorId = useId()
+
+  return (
+    <Select
+      onValueChange={(value) => field.onChange(value)}
+      value={field.value ?? undefined}
+    >
+      <SelectTrigger ref={field.ref} className="w-[145px] pc:w-[132px]">
+        <SelectValue
+          placeholder={<span className={"text-[#828282]"}>시간 선택</span>}
+        />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel className="px-0 text-center">오전(AM)</SelectLabel>
+          {CODING_MEETING_HOURS.AM.map((am_hours) => {
+            return (
+              <SelectItem
+                key={`${seperatorId}-endAM-${am_hours}`}
+                value={am_hours}
+              >
+                {am_hours}
+              </SelectItem>
+            )
+          })}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel className="px-0 text-center">오후(PM)</SelectLabel>
+          {CODING_MEETING_HOURS.PM.map((pm_hours) => {
+            return (
+              <SelectItem
+                key={`${seperatorId}-endPM-${pm_hours}`}
+                value={pm_hours}
+              >
+                {pm_hours}
+              </SelectItem>
+            )
+          })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default CodingMeetingEndHourController
diff --git a/src/page/coding-meetings/create/controls/end-time/CodingMeetingEndMinuteController.tsx b/src/page/coding-meetings/create/controls/end-time/CodingMeetingEndMinuteController.tsx
new file mode 100644
index 00000000..999f59ca
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/end-time/CodingMeetingEndMinuteController.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { useController, useFormContext } from "react-hook-form"
+import { useId } from "react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select"
+import { CODING_MEETING_MINUTES } from "@/constants/timeOptions"
+import { codingMeetingEndMinuteRules } from "../rules/date/end-time/coding-meeting-end-minute-rules"
+
+interface CodingMeetingEndMinuteControllerProps {
+  initialEndMinute?: CodingMeetingFormData["date"]["end_time"][1]
+}
+
+function CodingMeetingEndMinuteController({
+  initialEndMinute,
+}: CodingMeetingEndMinuteControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "date.end_time.1",
+    rules: codingMeetingEndMinuteRules,
+    defaultValue: initialEndMinute,
+  })
+
+  const seperatorId = useId()
+
+  return (
+    <Select
+      onValueChange={(value) => field.onChange(value)}
+      value={field.value ?? undefined}
+    >
+      <SelectTrigger ref={field.ref} className="w-[145px] pc:w-[132px]">
+        <SelectValue
+          placeholder={<span className={"text-[#828282]"}>분 선택</span>}
+        />
+      </SelectTrigger>
+      <SelectContent>
+        {CODING_MEETING_MINUTES.map((minute) => {
+          return (
+            <SelectItem
+              key={`${seperatorId}-endMinute-${minute}`}
+              value={minute}
+            >
+              {minute}
+            </SelectItem>
+          )
+        })}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default CodingMeetingEndMinuteController
diff --git a/src/page/coding-meetings/create/controls/rules/content/coding-meeting-content-rules.ts b/src/page/coding-meetings/create/controls/rules/content/coding-meeting-content-rules.ts
new file mode 100644
index 00000000..ff5c550c
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/content/coding-meeting-content-rules.ts
@@ -0,0 +1,20 @@
+import { CODING_MEETING_LIMITS } from "@/constants/limitation"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+type CodingMeetingContentRules = Omit<
+  RegisterOptions<CodingMeetingFormData, "content">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+>
+
+export const codingMeetingContentRules: CodingMeetingContentRules = {
+  required: "모집글의 내용을 작성해주세요",
+  minLength: {
+    value: CODING_MEETING_LIMITS.content.minLength,
+    message: `모집글은 최소 ${CODING_MEETING_LIMITS.content.minLength}자 이상이어야 합니다`,
+  },
+  maxLength: {
+    value: CODING_MEETING_LIMITS.content.maxLength,
+    message: `모집글은 최대 ${CODING_MEETING_LIMITS.content.maxLength}자 이하이어야 합니다`,
+  },
+}
diff --git a/src/page/coding-meetings/create/controls/rules/date/day/coding-meeting-day-rules.ts b/src/page/coding-meetings/create/controls/rules/date/day/coding-meeting-day-rules.ts
new file mode 100644
index 00000000..a4cc4683
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/date/day/coding-meeting-day-rules.ts
@@ -0,0 +1,21 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import dayjs from "dayjs"
+import { RegisterOptions } from "react-hook-form"
+
+type CodingMeetingDayRules = Omit<
+  RegisterOptions<CodingMeetingFormData, "date.day">,
+  "setValueAs" | "disabled" | "valueAsNumber" | "valueAsDate"
+>
+
+export const codingMeetingDayRules: CodingMeetingDayRules = {
+  validate: (day) => {
+    const meetingDay = dayjs(day).startOf("days")
+    const now = dayjs().startOf("days")
+
+    if (meetingDay.isBefore(now)) {
+      return `모임 날짜는 ${now.format("YYYY-MM-DD")} 부터 가능합니다`
+    }
+
+    return true
+  },
+}
diff --git a/src/page/coding-meetings/create/controls/rules/date/end-time/coding-meeting-end-hour-rules.ts b/src/page/coding-meetings/create/controls/rules/date/end-time/coding-meeting-end-hour-rules.ts
new file mode 100644
index 00000000..058e479f
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/date/end-time/coding-meeting-end-hour-rules.ts
@@ -0,0 +1,24 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+type CodingMeetingEndHourRules = Omit<
+  RegisterOptions<CodingMeetingFormData, "date.end_time.0">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+>
+
+export const codingMeetingEndHourRules: CodingMeetingEndHourRules = {
+  required: "모임 종료시간의 시(hour)를 선택해주세요",
+  validate: (endHour, values) => {
+    if (!values.date.start_time) return true
+
+    const [startHour, _] = values.date.start_time
+
+    if (!startHour) return true
+
+    if (Number(endHour) < Number(startHour)) {
+      return "모임 종료 시간은 시작 시간 이후여야 합니다"
+    }
+
+    return true
+  },
+}
diff --git a/src/page/coding-meetings/create/controls/rules/date/end-time/coding-meeting-end-minute-rules.ts b/src/page/coding-meetings/create/controls/rules/date/end-time/coding-meeting-end-minute-rules.ts
new file mode 100644
index 00000000..4528b51f
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/date/end-time/coding-meeting-end-minute-rules.ts
@@ -0,0 +1,43 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+type CodingMeetingEndMinuteRules = Omit<
+  RegisterOptions<CodingMeetingFormData, "date.end_time.1">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+>
+
+export const codingMeetingEndMinuteRules: CodingMeetingEndMinuteRules = {
+  required: "모임 종료시간의 분(minute)을 선택해주세요",
+  validate: (endMinute, values) => {
+    if (!values.date.day || !values.date.start_time || !values.date.end_time)
+      return true
+
+    const [startHour, startMinute] = values.date.start_time
+    const [endHour, _] = values.date.end_time
+
+    if (!startHour || !startMinute || !endHour) return true
+
+    const [startTimeNumberFormat, endTimeNumberFormat] = [
+      Number(`${startHour}${startMinute}`),
+      Number(`${endHour}${endMinute}`),
+    ]
+
+    if (endTimeNumberFormat < startTimeNumberFormat) {
+      /*
+        11:30 => Number('1130') => 1130
+        00:30 => Number('0030') => 30
+        - 시작시간, 종료시간 문자 포멧을 숫자로 변환하여 
+          대소를 비교해도 된다고 판단
+          (일은 동일하기 때문에 dayjs 연산이 필요하지 않다고 판단)
+      */
+
+      return "모임 종료 시간은 시작 시간 이후여야 합니다"
+    }
+
+    if (startTimeNumberFormat === endTimeNumberFormat) {
+      return "모임 시작 시간과 종료 시간은 서로 다르게 설정해야 합니다"
+    }
+
+    return true
+  },
+}
diff --git a/src/page/coding-meetings/create/controls/rules/date/start-time/coding-meeting-start-hour-rules.ts b/src/page/coding-meetings/create/controls/rules/date/start-time/coding-meeting-start-hour-rules.ts
new file mode 100644
index 00000000..b1a4bac9
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/date/start-time/coding-meeting-start-hour-rules.ts
@@ -0,0 +1,24 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+type CodingMeetingStartHourRules = Omit<
+  RegisterOptions<CodingMeetingFormData, "date.start_time.0">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+>
+
+export const codingMeetingStartHourRules: CodingMeetingStartHourRules = {
+  required: "모임 시작시간의 시(hour)를 선택해주세요",
+  validate: (startHour, values) => {
+    if (!values.date.end_time) return true
+
+    const [endHour, _] = values.date.end_time
+
+    if (!endHour) return true
+
+    if (Number(startHour) > Number(endHour)) {
+      return "모임 시작 시간은 종료 시간 이전이어야 합니다"
+    }
+
+    return true
+  },
+}
diff --git a/src/page/coding-meetings/create/controls/rules/date/start-time/coding-meeting-start-minute-rules.ts b/src/page/coding-meetings/create/controls/rules/date/start-time/coding-meeting-start-minute-rules.ts
new file mode 100644
index 00000000..cbe6a904
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/date/start-time/coding-meeting-start-minute-rules.ts
@@ -0,0 +1,43 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+type CodingMeetingStartMinuteRules = Omit<
+  RegisterOptions<CodingMeetingFormData, "date.start_time.1">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+>
+
+export const codingMeetingStartMinuteRules: CodingMeetingStartMinuteRules = {
+  required: "모임 시작시간의 분(minute)을 선택해주세요",
+  validate: (startMinute, values) => {
+    if (!values.date.day || !values.date.start_time || !values.date.end_time)
+      return true
+
+    const [startHour, _] = values.date.start_time
+    const [endHour, endMinute] = values.date.end_time
+
+    if (!endHour || !endMinute || !startHour) return true
+
+    const [startTimeNumberFormat, endTimeNumberFormat] = [
+      Number(`${startHour}${startMinute}`),
+      Number(`${endHour}${endMinute}`),
+    ]
+
+    if (startTimeNumberFormat > endTimeNumberFormat) {
+      /*
+        11:30 => Number('1130') => 1130
+        00:30 => Number('0030') => 30
+        - 시작시간, 종료시간 문자 포멧을 숫자로 변환하여 
+          대소를 비교해도 된다고 판단
+          (일은 동일하기 때문에 dayjs 연산이 필요하지 않다고 판단)
+      */
+
+      return "모임 시작 시간은 종료 시간 이전이어야 합니다"
+    }
+
+    if (startTimeNumberFormat === endTimeNumberFormat) {
+      return "모임 시작 시간과 종료 시간은 서로 다르게 설정해야 합니다"
+    }
+
+    return true
+  },
+}
diff --git a/src/page/coding-meetings/create/controls/rules/location/location-rules.ts b/src/page/coding-meetings/create/controls/rules/location/location-rules.ts
new file mode 100644
index 00000000..093077de
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/location/location-rules.ts
@@ -0,0 +1,9 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+export const locationRules: Omit<
+  RegisterOptions<CodingMeetingFormData, "location">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+> = {
+  required: "모임 위치를 설정해주세요",
+}
diff --git a/src/page/coding-meetings/create/controls/rules/location/location-search-rules.ts b/src/page/coding-meetings/create/controls/rules/location/location-search-rules.ts
new file mode 100644
index 00000000..726ec5a1
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/location/location-search-rules.ts
@@ -0,0 +1,11 @@
+import { CodingMeetingLocationSearchFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+type LocationSearchRules = Omit<
+  RegisterOptions<CodingMeetingLocationSearchFormData, "keyword">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+>
+
+export const locationSearchRules: LocationSearchRules = {
+  required: true,
+}
diff --git a/src/page/coding-meetings/create/controls/rules/member-count/member-count-rules.ts b/src/page/coding-meetings/create/controls/rules/member-count/member-count-rules.ts
new file mode 100644
index 00000000..33b75ccb
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/member-count/member-count-rules.ts
@@ -0,0 +1,20 @@
+import { CODING_MEETING_LIMITS } from "@/constants/limitation"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+type MemberCountRules = Omit<
+  RegisterOptions<CodingMeetingFormData, "member_upper_limit">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+>
+
+export const memberCountRules: MemberCountRules = {
+  required: "모임 인원을 설정해 주세요",
+  min: {
+    value: CODING_MEETING_LIMITS.memberCount.min,
+    message: "모임 인원은 본인 포함 최소 3명부터 가능합니다",
+  },
+  max: {
+    value: CODING_MEETING_LIMITS.memberCount.max,
+    message: "모임 인원은 본인 포함 최대 6명까지 가능합니다",
+  },
+}
diff --git a/src/page/coding-meetings/create/controls/rules/title/title-rules.ts b/src/page/coding-meetings/create/controls/rules/title/title-rules.ts
new file mode 100644
index 00000000..93aa9927
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/rules/title/title-rules.ts
@@ -0,0 +1,21 @@
+import { CODING_MEETING_LIMITS } from "@/constants/limitation"
+import { validationMessage } from "@/constants/message/validation"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { RegisterOptions } from "react-hook-form"
+
+type CodingMeetingTitleRules = Omit<
+  RegisterOptions<CodingMeetingFormData, "title">,
+  "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
+>
+
+export const codingMeetingTitleRules: CodingMeetingTitleRules = {
+  required: validationMessage.notitle,
+  minLength: {
+    value: CODING_MEETING_LIMITS.title.minLength,
+    message: validationMessage.underTitleLimit,
+  },
+  maxLength: {
+    value: CODING_MEETING_LIMITS.title.maxLength,
+    message: validationMessage.overTitleLimit,
+  },
+}
diff --git a/src/page/coding-meetings/create/controls/start-time/CodingMeetingStartHourController.tsx b/src/page/coding-meetings/create/controls/start-time/CodingMeetingStartHourController.tsx
new file mode 100644
index 00000000..9c5761e1
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/start-time/CodingMeetingStartHourController.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+} from "@/components/ui/Select"
+import { CODING_MEETING_HOURS } from "@/constants/timeOptions"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { SelectValue } from "@radix-ui/react-select"
+import { useId } from "react"
+import { useController, useFormContext } from "react-hook-form"
+import { codingMeetingStartHourRules } from "../rules/date/start-time/coding-meeting-start-hour-rules"
+
+interface CodingMeetingStartHourControllerProps {
+  initialStartHour?: CodingMeetingFormData["date"]["start_time"][0]
+}
+
+function CodingMeetingStartHourController({
+  initialStartHour,
+}: CodingMeetingStartHourControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "date.start_time.0",
+    rules: codingMeetingStartHourRules,
+    defaultValue: initialStartHour,
+  })
+
+  const seperatorId = useId()
+
+  return (
+    <Select
+      onValueChange={(value) => field.onChange(value)}
+      value={field.value ?? undefined}
+    >
+      <SelectTrigger ref={field.ref} className="w-[145px] pc:w-[132px]">
+        <SelectValue
+          placeholder={<span className={"text-[#828282]"}>시간 선택</span>}
+        />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel className="px-0 text-center">오전(AM)</SelectLabel>
+          {CODING_MEETING_HOURS.AM.map((am_hours) => {
+            return (
+              <SelectItem
+                key={`${seperatorId}-startAM-${am_hours}`}
+                value={am_hours}
+              >
+                {am_hours}
+              </SelectItem>
+            )
+          })}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel className="px-0 text-center">오후(PM)</SelectLabel>
+          {CODING_MEETING_HOURS.PM.map((pm_hours) => {
+            return (
+              <SelectItem
+                key={`${seperatorId}-startPM-${pm_hours}`}
+                value={pm_hours}
+              >
+                {pm_hours}
+              </SelectItem>
+            )
+          })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default CodingMeetingStartHourController
diff --git a/src/page/coding-meetings/create/controls/start-time/CodingMeetingStartMinuteController.tsx b/src/page/coding-meetings/create/controls/start-time/CodingMeetingStartMinuteController.tsx
new file mode 100644
index 00000000..5410491a
--- /dev/null
+++ b/src/page/coding-meetings/create/controls/start-time/CodingMeetingStartMinuteController.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { useController, useFormContext } from "react-hook-form"
+import { codingMeetingStartMinuteRules } from "../rules/date/start-time/coding-meeting-start-minute-rules"
+import { useId } from "react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select"
+import { CODING_MEETING_MINUTES } from "@/constants/timeOptions"
+
+interface CodingMeetingStartMinuteControllerProps {
+  initialStartMinute?: CodingMeetingFormData["date"]["start_time"][1]
+}
+
+function CodingMeetingStartMinuteController({
+  initialStartMinute,
+}: CodingMeetingStartMinuteControllerProps) {
+  const { control } = useFormContext<CodingMeetingFormData>()
+  const { field } = useController({
+    control,
+    name: "date.start_time.1",
+    rules: codingMeetingStartMinuteRules,
+    defaultValue: initialStartMinute,
+  })
+
+  const seperatorId = useId()
+
+  return (
+    <Select
+      onValueChange={(value) => field.onChange(value)}
+      value={field.value ?? undefined}
+    >
+      <SelectTrigger ref={field.ref} className="w-[145px] pc:w-[132px]">
+        <SelectValue
+          placeholder={<span className={"text-[#828282]"}>분 선택</span>}
+        />
+      </SelectTrigger>
+      <SelectContent>
+        {CODING_MEETING_MINUTES.map((minute) => {
+          return (
+            <SelectItem
+              key={`${seperatorId}-startMinute-${minute}`}
+              value={minute}
+            >
+              {minute}
+            </SelectItem>
+          )
+        })}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default CodingMeetingStartMinuteController
diff --git a/src/page/coding-meetings/create/hooks/useCreateCodingMeeting.tsx b/src/page/coding-meetings/create/hooks/useCreateCodingMeeting.tsx
new file mode 100644
index 00000000..97e1c4eb
--- /dev/null
+++ b/src/page/coding-meetings/create/hooks/useCreateCodingMeeting.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { errorMessage } from "@/constants/message/error"
+import queryKey from "@/constants/queryKey"
+import { APIResponse } from "@/interfaces/dto/api-response"
+import {
+  CreateCodingMeetingRequest,
+  CreateCodingMeetingResponse,
+} from "@/interfaces/dto/coding-meeting/create-coding-meeting.dto"
+import { createCodingMeeting } from "@/service/coding-meetings"
+import { revalidatePage } from "@/util/actions/revalidatePage"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { AxiosError, AxiosResponse, HttpStatusCode } from "axios"
+import { useRouter } from "next/navigation"
+import { toast } from "react-toastify"
+import { serializeCmToken } from "../../util/cm-token"
+import { useFormContext } from "react-hook-form"
+import { CodingMeetingFormData } from "@/interfaces/form"
+
+interface UseCreateCodingMeeting {
+  handleManual?: boolean
+  onSuccess?: (
+    data: AxiosResponse<CreateCodingMeetingResponse, any>,
+    variables: CreateCodingMeetingRequest,
+    context: unknown,
+  ) => void
+  onError?: (
+    error: Error | AxiosError,
+    variables: CreateCodingMeetingRequest,
+    context: unknown,
+  ) => void
+}
+
+export function useCreateCodingMeeting({
+  handleManual,
+  onSuccess,
+  onError,
+}: UseCreateCodingMeeting = {}) {
+  const queryClient = useQueryClient()
+  const { replace } = useRouter()
+
+  const { reset } = useFormContext<CodingMeetingFormData>()
+
+  const { mutate, status } = useMutation({
+    mutationKey: [queryKey.codingMeeting, "create"],
+    mutationFn: (request: CreateCodingMeetingRequest) =>
+      createCodingMeeting({ ...request }),
+    onSuccess(response, variables, context) {
+      if (handleManual) {
+        onSuccess && onSuccess(response, variables, context)
+
+        return
+      }
+
+      reset()
+
+      const payload = response.data.data
+
+      queryClient.invalidateQueries({
+        queryKey: [queryKey.codingMeeting],
+      })
+
+      replace(
+        `/coding-meetings/${
+          payload?.coding_meeting_token
+            ? serializeCmToken(payload.coding_meeting_token)
+            : ""
+        }`,
+      )
+    },
+    onError(error, variables, context) {
+      if (handleManual) {
+        onError && onError(error, variables, context)
+
+        return
+      }
+
+      const toastId = "codingMeetingCreateError"
+
+      if (error instanceof AxiosError) {
+        const { response } = error as AxiosError<APIResponse>
+
+        if (response?.status === HttpStatusCode.Unauthorized) {
+          revalidatePage("/coding-meetings/create", "page")
+          setTimeout(() => {
+            toast.error("로그인 후 다시 작성해주세요", {
+              position: "top-center",
+            })
+          }, 0)
+
+          return
+        }
+
+        toast.error(response?.data.msg ?? errorMessage.createCodingMeeting, {
+          position: "top-center",
+          toastId,
+        })
+
+        return
+      }
+
+      toast.error(errorMessage.createCodingMeeting, {
+        position: "top-center",
+        toastId,
+      })
+    },
+  })
+
+  return {
+    createCodingMeetingApi: mutate,
+    createCodingMeetingApiStatus: status,
+  }
+}
diff --git a/src/page/coding-meetings/create/hooks/useHandleCreateCodingMeetingTime.tsx b/src/page/coding-meetings/create/hooks/useHandleCreateCodingMeetingTime.tsx
deleted file mode 100644
index cd62aa77..00000000
--- a/src/page/coding-meetings/create/hooks/useHandleCreateCodingMeetingTime.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client"
-
-import {
-  CodingMeetingDay,
-  EndTime,
-  StartTime,
-  type Time,
-} from "@/recoil/atoms/coding-meeting/dateTime"
-import { formatDay } from "@/util/getDate"
-import dayjs from "dayjs"
-import utc from "dayjs/plugin/utc"
-
-import { useRecoilState } from "recoil"
-
-const useHandleCreateCodingMeetingTime = () => {
-  const [day, setDay] = useRecoilState(CodingMeetingDay)
-  const [startTime, setStartTime] = useRecoilState(StartTime)
-  const [endTime, setEndTime] = useRecoilState(EndTime)
-
-  const formattedDay = formatDay(day + "")
-  const formatMinute = (minute: number | string) =>
-    String(minute).length === 1 ? "0" + String(minute) : minute + ""
-
-  const formatTime = ({ hour, minute }: Time) => `${hour}:${minute}`
-
-  const formatByUTC = (time: string) => {
-    dayjs.extend(utc)
-    return dayjs(`${formattedDay} ${time}`).utc().format().slice(0, -1)
-  }
-
-  const resetTimes = () => {
-    setStartTime({
-      hour: "",
-      minute: "",
-    })
-    setEndTime({
-      hour: "",
-      minute: "",
-    })
-  }
-
-  const formattedStartTime = dayjs(`${formattedDay} ${formatTime(startTime)}`)
-  const formattedEndTime = dayjs(`${formattedDay} ${formatTime(endTime)}`)
-
-  const resetDateTimes = () => {
-    setDay(new Date())
-    setStartTime({
-      hour: "",
-      minute: "",
-    })
-    setEndTime({
-      hour: "",
-      minute: "",
-    })
-  }
-
-  return {
-    startTime,
-    endTime,
-    setStartTime,
-    setEndTime,
-    formatMinute,
-    formatTime,
-    formatByUTC,
-    resetTimes,
-    resetDateTimes,
-    formattedStartTime,
-    formattedEndTime,
-  }
-}
-
-export default useHandleCreateCodingMeetingTime
diff --git a/src/page/coding-meetings/create/hooks/useKakaoMapPlaceApi.tsx b/src/page/coding-meetings/create/hooks/useKakaoMapPlaceApi.tsx
new file mode 100644
index 00000000..681f4064
--- /dev/null
+++ b/src/page/coding-meetings/create/hooks/useKakaoMapPlaceApi.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useKakaoLoader } from "react-kakao-maps-sdk"
+
+export function useKakaoMapPlaceApi() {
+  const [loading, error] = useKakaoLoader({
+    appkey: process.env.NEXT_PUBLIC_KAKAO_MAP!,
+    libraries: ["services"],
+  })
+
+  const [kakaoPlaceApi, setKakaoPlaceApi] =
+    useState<kakao.maps.services.Places | null>(null)
+
+  useEffect(() => {
+    if (loading || error) {
+      return
+    }
+
+    if (kakaoPlaceApi) return
+
+    setKakaoPlaceApi(new kakao.maps.services.Places())
+  }, [loading, error, kakaoPlaceApi])
+
+  return {
+    loading,
+    error,
+    kakaoPlaceApi,
+  }
+}
diff --git a/src/page/coding-meetings/create/hooks/useUpdateCodingMeeting.tsx b/src/page/coding-meetings/create/hooks/useUpdateCodingMeeting.tsx
new file mode 100644
index 00000000..a0a991e5
--- /dev/null
+++ b/src/page/coding-meetings/create/hooks/useUpdateCodingMeeting.tsx
@@ -0,0 +1,112 @@
+"use client"
+
+import { errorMessage } from "@/constants/message/error"
+import queryKey from "@/constants/queryKey"
+import { APIResponse } from "@/interfaces/dto/api-response"
+import {
+  UpdateCodingMeetingRequest,
+  UpdateCodingMeetingResponse,
+} from "@/interfaces/dto/coding-meeting/update-coding-meeting.dto"
+import { updateCodingMeeting } from "@/service/coding-meetings"
+import { revalidatePage } from "@/util/actions/revalidatePage"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { AxiosError, AxiosResponse, HttpStatusCode } from "axios"
+import { useRouter } from "next/navigation"
+import { toast } from "react-toastify"
+import { serializeCmToken } from "../../util/cm-token"
+import { useFormContext } from "react-hook-form"
+import { CodingMeetingFormData } from "@/interfaces/form"
+
+interface UseUpdateCodingMeeting {
+  handleManual?: boolean
+  onSuccess?: (
+    data: AxiosResponse<UpdateCodingMeetingResponse, any>,
+    variables: UpdateCodingMeetingRequest,
+    context: unknown,
+  ) => void
+  onError?: (
+    error: Error | AxiosError,
+    variables: UpdateCodingMeetingRequest,
+    context: unknown,
+  ) => void
+}
+
+export function useUpdateCodingMeeting({
+  handleManual,
+  onSuccess,
+  onError,
+}: UseUpdateCodingMeeting = {}) {
+  const queryClient = useQueryClient()
+  const { replace } = useRouter()
+
+  const { reset } = useFormContext<CodingMeetingFormData>()
+
+  const { mutate, status } = useMutation({
+    mutationKey: [queryKey.codingMeeting, "update"],
+    mutationFn: (request: UpdateCodingMeetingRequest) =>
+      updateCodingMeeting({ ...request }),
+    async onSuccess(response, variables, context) {
+      if (handleManual) {
+        onSuccess && onSuccess(response, variables, context)
+        return
+      }
+
+      reset()
+
+      queryClient.resetQueries({
+        queryKey: [queryKey.codingMeeting],
+      })
+
+      await revalidatePage("/coding-meetings/[token]", "page")
+
+      setTimeout(() => {
+        replace(
+          `/coding-meetings/${serializeCmToken(
+            variables.coding_meeting_token,
+          )}`,
+        )
+      }, 0)
+    },
+    onError(error, variables, context) {
+      if (handleManual) {
+        onError && onError(error, variables, context)
+        return
+      }
+
+      const toastId = "codingMeetingUpdateError"
+
+      if (error instanceof AxiosError) {
+        const { response } = error as AxiosError<APIResponse>
+
+        if (response?.status === HttpStatusCode.Unauthorized) {
+          revalidatePage("/coding-meetings/post/[token]", "page")
+
+          setTimeout(() => {
+            toast.error("로그인 후 다시 작성해주세요", {
+              position: "top-center",
+            })
+          }, 0)
+
+          return
+        }
+
+        toast.error(response?.data.msg ?? errorMessage.updateCodingMeeting, {
+          position: "top-center",
+          toastId,
+        })
+
+        return
+      }
+
+      toast.error(errorMessage.createCodingMeeting, {
+        position: "top-center",
+        toastId,
+      })
+    },
+  })
+
+  return {
+    updateCodingMeetingApi: mutate,
+    updateCodingMeetingApiStatus: status,
+  }
+}
diff --git a/src/page/coding-meetings/util/parser.ts b/src/page/coding-meetings/util/parser.ts
new file mode 100644
index 00000000..5b6cc568
--- /dev/null
+++ b/src/page/coding-meetings/util/parser.ts
@@ -0,0 +1,112 @@
+import { CreateCodingMeetingRequest } from "@/interfaces/dto/coding-meeting/create-coding-meeting.dto"
+import { CodingMeetingDetailPayload } from "@/interfaces/dto/coding-meeting/get-coding-meeting-detail.dto"
+import { UpdateCodingMeetingRequest } from "@/interfaces/dto/coding-meeting/update-coding-meeting.dto"
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { getKorDayjs } from "@/util/getDate"
+
+type Action = "create" | "update"
+
+export function formDataToPayload(
+  action: "create",
+  formData: CodingMeetingFormData,
+): CreateCodingMeetingRequest
+export function formDataToPayload(
+  action: "update",
+  formData: CodingMeetingFormData,
+  codingMeetingToken: string,
+): UpdateCodingMeetingRequest
+export function formDataToPayload(
+  action: Action,
+  formData: CodingMeetingFormData,
+  codingMeetingToken?: string,
+) {
+  const { title, location, member_upper_limit, date, hashtags, content } =
+    formData
+
+  const dayInstance = getKorDayjs(date.day)
+  const [startHour, startMinute] = date.start_time
+  const [endHour, endMinute] = date.end_time
+
+  const basePayload = {
+    coding_meeting_title: title,
+    coding_meeting_location_id: location.id,
+    coding_meeting_location_place_name: location.place_name,
+    coding_meeting_location_longitude: location.longitude,
+    coding_meeting_location_latitude: location.latitude,
+    coding_meeting_member_upper_limit: member_upper_limit,
+    coding_meeting_start_time: dayInstance
+      .clone()
+      .set("hours", Number(startHour))
+      .set("minutes", Number(startMinute))
+      .toISOString()
+      .replace(/Z$/, ""),
+    coding_meeting_end_time: dayInstance
+      .clone()
+      .set("hours", Number(endHour))
+      .set("minutes", Number(endMinute))
+      .toISOString()
+      .replace(/Z$/, ""),
+    coding_meeting_hashtags: hashtags.map(({ tag }) => tag),
+    coding_meeting_content: content,
+  }
+
+  if (action === "create") {
+    return {
+      ...basePayload,
+    } as CreateCodingMeetingRequest
+  }
+
+  return {
+    ...basePayload,
+    coding_meeting_token: codingMeetingToken,
+  } as UpdateCodingMeetingRequest
+}
+
+export function payloadToFormData(
+  payload: CodingMeetingDetailPayload,
+): CodingMeetingFormData {
+  return {
+    title: payload.coding_meeting_title,
+    content: payload.coding_meeting_content,
+    member_upper_limit: payload.coding_meeting_member_upper_limit,
+    date: {
+      ...parseCodingMeetingDate({
+        startTime: payload.coding_meeting_start_time,
+        endTime: payload.coding_meeting_end_time,
+      }),
+    },
+    location: {
+      id: payload.coding_meeting_location_id,
+      longitude: payload.coding_meeting_location_longitude,
+      latitude: payload.coding_meeting_location_latitude,
+      place_name: payload.coding_meeting_location_place_name,
+    },
+    hashtags: payload.coding_meeting_hashtags.map((hashtag) => ({
+      tag: hashtag,
+    })),
+  }
+}
+
+const parseCodingMeetingDate = ({
+  startTime,
+  endTime,
+}: {
+  startTime: string
+  endTime: string
+}) => {
+  const day = getKorDayjs(startTime).startOf("days").toDate()
+  const start_time = [
+    getKorDayjs(startTime).format("HH"),
+    getKorDayjs(startTime).format("mm"),
+  ]
+  const end_time = [
+    getKorDayjs(endTime).format("HH"),
+    getKorDayjs(endTime).format("mm"),
+  ]
+
+  return {
+    day,
+    start_time,
+    end_time,
+  } as CodingMeetingFormData["date"]
+}
diff --git a/src/page/coffee-chat/create/CreateCoffeeChatReservationPage.tsx b/src/page/coffee-chat/create/CreateCoffeeChatReservationPage.tsx
index 0eb72b8f..42c2ae89 100644
--- a/src/page/coffee-chat/create/CreateCoffeeChatReservationPage.tsx
+++ b/src/page/coffee-chat/create/CreateCoffeeChatReservationPage.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import { useForm } from "react-hook-form"
-import Spacing from "@/components/shared/Spacing"
 import { useEffect } from "react"
 import { toast } from "react-toastify"
 import { useClientSession } from "@/hooks/useClientSession"
@@ -20,9 +19,9 @@ import {
 import TitleSection from "./components/sections/title/TitleSection"
 import IntroductionSection from "./components/sections/introduction/IntroductionSection"
 import ContentSection from "./components/sections/content/ContentSection"
-import { pickError } from "./controls/util/form"
 import { useCreateCoffeeChat } from "./hooks/useCreateCoffeeChat"
 import LinkToListPage from "@/components/LinkToListPage"
+import { pickFirstError } from "@/util/hook-form/error"
 
 export interface CoffeeChatFormProps {
   initialValues?: CoffeeChatEditorInitialValues
@@ -91,7 +90,7 @@ function CreateCoffeeChatReservationPage({
         각 필드(title, introduction...)에 대한 리액트 훅 폼 에러메시지를 설정했기 때문에,
         에러 객체의 message를 그대로 활용
     */
-    const { type, message } = pickError(errors)
+    const { type, message } = pickFirstError<CoffeeChatFormData>(errors)
 
     toast.error(message, {
       toastId: `${type}-${message}`,
diff --git a/src/page/coffee-chat/create/components/sections/date/TimeOptions.tsx b/src/page/coffee-chat/create/components/sections/date/TimeOptions.tsx
index 3de01a6b..2cf61e40 100644
--- a/src/page/coffee-chat/create/components/sections/date/TimeOptions.tsx
+++ b/src/page/coffee-chat/create/components/sections/date/TimeOptions.tsx
@@ -1,6 +1,10 @@
 import TimeZoneSection from "./TimeZoneSection"
 import { useState } from "react"
-import { AM, PM, TimeZone } from "@/constants/timeOptions"
+import {
+  CODING_MEETING_AM_OPTIONS,
+  CODING_MEETING_PM_OPTIONS,
+  TimeZone,
+} from "@/constants/timeOptions"
 import TimeOptionButton from "../../TimeOptionButton"
 import Spacing from "@/components/shared/Spacing"
 import dayjs from "dayjs"
@@ -12,7 +16,10 @@ interface TimeOptionsProps {
 function TimeOptions({ day }: TimeOptionsProps) {
   const [timeZone, setTimeZone] = useState<TimeZone>(TimeZone.AM)
 
-  const targetOptions = timeZone === TimeZone.AM ? AM : PM
+  const targetOptions =
+    timeZone === TimeZone.AM
+      ? CODING_MEETING_AM_OPTIONS
+      : CODING_MEETING_PM_OPTIONS
 
   return (
     <div>
diff --git a/src/page/coffee-chat/create/controls/rules/hashtag-rules.ts b/src/page/coffee-chat/create/controls/rules/hashtag-rules.ts
index bb2e18d7..75f86d89 100644
--- a/src/page/coffee-chat/create/controls/rules/hashtag-rules.ts
+++ b/src/page/coffee-chat/create/controls/rules/hashtag-rules.ts
@@ -16,6 +16,7 @@ export type HashTagListField = ControllerRenderProps<
 
 export const enum HashTagRuleValidateType {
   "InvalidFormat" = "invalidFormat",
+  "WhiteSpace" = "invalidWhiteSpace",
 }
 
 export const enum HashTagListRuleValidateType {
@@ -42,6 +43,13 @@ export const hashTagRules: ({
 
         return validationMessage.preventSpecialCharacter
       },
+      [HashTagRuleValidateType.WhiteSpace]: (hashTag) => {
+        if (validatorInstance.validateHashTag(hashTag).whiteSpace()) {
+          return true
+        }
+
+        return "해시태그는 공백만 포함할 수 없습니다."
+      },
       [HashTagListRuleValidateType.Duplicate]: (hashTag) => {
         if (
           validatorInstance.validateHashTagList(hashTagList).duplicate(hashTag)
diff --git a/src/page/coffee-chat/create/controls/util/form.ts b/src/page/coffee-chat/create/controls/util/form.ts
deleted file mode 100644
index 5fff0a98..00000000
--- a/src/page/coffee-chat/create/controls/util/form.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { CoffeeChatFormData } from "@/interfaces/form"
-import { FieldError, FieldErrors, Merge } from "react-hook-form"
-
-type ErrorType =
-  | FieldError
-  | Merge<FieldError, (FieldError | undefined)[]>
-  | (Record<
-      string,
-      Partial<{
-        type: string | number
-        message: string
-      }>
-    > &
-      Partial<{
-        type: string | number
-        message: string
-      }>)
-
-export function pickError(errors: FieldErrors<CoffeeChatFormData>): ErrorType {
-  return (errors?.title ??
-    errors?.introduction ??
-    errors?.content ??
-    errors?.hashTags ??
-    errors?.dateTimes ??
-    errors?.root)!
-}
diff --git a/src/page/coffee-chat/detail/reservation/calendar-base/ReservationCalendarBase.tsx b/src/page/coffee-chat/detail/reservation/calendar-base/ReservationCalendarBase.tsx
index 18eb9514..ad3662c6 100644
--- a/src/page/coffee-chat/detail/reservation/calendar-base/ReservationCalendarBase.tsx
+++ b/src/page/coffee-chat/detail/reservation/calendar-base/ReservationCalendarBase.tsx
@@ -6,28 +6,39 @@ import { getDay, getHoliday } from "@/util/getDate"
 import dayjs from "dayjs"
 import { Value } from "./Calendar.types"
 import ReactCalendarTileContent from "@/components/react-calendar/ReactCalendarTileContent"
+import { ForwardedRef, forwardRef } from "react"
+import { twMerge } from "tailwind-merge"
 
 type ReservationCalendarBaseProps = {
-  start: Date
-  limit: number
+  start?: Date
+  limit?: number
   date: Value
   onDateChange?: CalendarProps["onChange"]
   tileClassName?: CalendarProps["tileClassName"]
   minDate?: Date
   maxDate?: Date
+  tileDisabled?: CalendarProps["tileDisabled"]
+  wrapperClassName?: string
 }
 
-const ReservationCalendarBase = ({
-  start,
-  limit,
-  date,
-  onDateChange,
-  tileClassName,
-  minDate,
-  maxDate,
-}: ReservationCalendarBaseProps) => {
+const ReservationCalendarBase = (
+  {
+    start,
+    limit,
+    date,
+    onDateChange,
+    tileClassName,
+    tileDisabled,
+    minDate,
+    maxDate,
+    wrapperClassName,
+  }: ReservationCalendarBaseProps,
+  ref: ForwardedRef<any>,
+) => {
   // 종료 날짜
-  const calendarValue = new Date(dayjs(start).add(limit, "day").format())
+  const calendarValue = limit
+    ? new Date(dayjs(start).add(limit, "day").format())
+    : undefined
 
   const tileClassNames = ({ date, activeStartDate, view }: TileArgs) => {
     const holiday = getHoliday(date)
@@ -55,8 +66,14 @@ const ReservationCalendarBase = ({
     return holiday ? "holiday" : undefined
   }
 
+  const wrapperClassNames = twMerge([
+    "focus:outline focus:outline-1 focus:outline-blue-400/40",
+    wrapperClassName,
+    "react-calendar",
+  ])
+
   return (
-    <div className="react-calendar">
+    <div className={wrapperClassNames} ref={ref} tabIndex={0}>
       <Calendar
         locale="ko"
         onChange={onDateChange}
@@ -75,9 +92,12 @@ const ReservationCalendarBase = ({
         // 날짜 타일에 추가할 컨텐츠
         tileContent={ReactCalendarTileContent}
         tileClassName={tileClassNames}
+        tileDisabled={tileDisabled}
       />
     </div>
   )
 }
 
-export default ReservationCalendarBase
+export default forwardRef<any, ReservationCalendarBaseProps>(
+  ReservationCalendarBase,
+)
diff --git a/src/react-query/coding-meeting.ts b/src/react-query/coding-meeting.ts
deleted file mode 100644
index 62f05ee4..00000000
--- a/src/react-query/coding-meeting.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import queryKey from "@/constants/queryKey"
-import type { CreateCodingMeetingRequest } from "@/interfaces/dto/coding-meeting/create-coding-meeting.dto"
-import { UpdateCodingMeetingRequest } from "@/interfaces/dto/coding-meeting/update-coding-meeting.dto"
-import {
-  createCodingMeeting,
-  updateCodingMeeting,
-} from "@/service/coding-meetings"
-import { useMutation } from "@tanstack/react-query"
-
-// 모각코 등록글 생성
-const useCreateCodingMeeting = () => {
-  const {
-    data,
-    mutate: createCodingMeetingMutate,
-    isPending: isCreateCodingMeeting,
-    isError: isCreateCodingMeetingPostError,
-    isSuccess: isCreateCodingMeetingPostSuccess,
-  } = useMutation({
-    mutationKey: [queryKey.codingMeeting],
-    mutationFn: (createPayload: CreateCodingMeetingRequest) =>
-      createCodingMeeting({
-        ...createPayload,
-      }),
-  })
-
-  return {
-    createCodingMeetingPostResponse: data,
-    createCodingMeetingPost: createCodingMeetingMutate,
-    createCodingMeetingPostStatus: {
-      isCreateCodingMeeting,
-      isCreateCodingMeetingPostError,
-      isCreateCodingMeetingPostSuccess,
-    },
-  }
-}
-
-// 모각코 등록글 수정
-const useUpdateCodingMeeting = () => {
-  const {
-    data,
-    mutate: updateCodingMeetingMutate,
-    isPending: isUpdateCodingMeeting,
-    isError: isUpdateCodingMeetingError,
-    isSuccess: isUpdateCodingMeetingSuccess,
-  } = useMutation({
-    mutationKey: [queryKey.codingMeeting],
-    mutationFn: (updatePayload: UpdateCodingMeetingRequest) =>
-      updateCodingMeeting({ ...updatePayload }),
-  })
-
-  return {
-    updateCodingMeetingResponse: data,
-    updateCodingMeeting: updateCodingMeetingMutate,
-    updateCodingMeetingStatus: {
-      isUpdateCodingMeeting,
-      isUpdateCodingMeetingError,
-      isUpdateCodingMeetingSuccess,
-    },
-  }
-}
-
-export const CodingMeetingQueries = {
-  useCreateCodingMeeting,
-  useUpdateCodingMeeting,
-}
diff --git a/src/recoil/atoms/coding-meeting/dateTime.tsx b/src/recoil/atoms/coding-meeting/dateTime.tsx
deleted file mode 100644
index 4bb59bf1..00000000
--- a/src/recoil/atoms/coding-meeting/dateTime.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Value } from "@/interfaces/calendar"
-import { atom } from "recoil"
-
-export type Time = {
-  hour: string
-  minute: string
-}
-
-export const StartTime = atom<Time>({
-  key: "coding-meeting-start-time-atom",
-  default: {
-    hour: "",
-    minute: "",
-  },
-})
-
-export const EndTime = atom<Time>({
-  key: "coding-meeting-end-time-atom",
-  default: {
-    hour: "",
-    minute: "",
-  },
-})
-
-export const CodingMeetingDay = atom<Value>({
-  key: "coding-meeting-day-atom",
-  default: new Date(),
-})
diff --git a/src/recoil/atoms/coding-meeting/hashtags.tsx b/src/recoil/atoms/coding-meeting/hashtags.tsx
deleted file mode 100644
index 1036d7ea..00000000
--- a/src/recoil/atoms/coding-meeting/hashtags.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from "recoil"
-
-export const CodingMeetingHashTagList = atom<string[]>({
-  key: "CodingMeeting-HashTagList-atom",
-  default: [],
-})
diff --git a/src/recoil/atoms/coding-meeting/headcount.tsx b/src/recoil/atoms/coding-meeting/headcount.tsx
deleted file mode 100644
index db2b8414..00000000
--- a/src/recoil/atoms/coding-meeting/headcount.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from "recoil"
-
-export const CodingMeetingHeadCount = atom<string>({
-  key: "CodingMeeting-HeadCount-atom",
-  default: "0",
-})
diff --git a/src/recoil/atoms/coding-meeting/mapData.tsx b/src/recoil/atoms/coding-meeting/mapData.tsx
index 14eded17..4f40e98d 100644
--- a/src/recoil/atoms/coding-meeting/mapData.tsx
+++ b/src/recoil/atoms/coding-meeting/mapData.tsx
@@ -1,12 +1,5 @@
 import { atom } from "recoil"
 
-export const CodingMeetingMapData = atom<
-  kakao.maps.services.PlacesSearchResult | undefined
->({
-  key: "CodingMeeting-MapData-atom",
-  default: undefined,
-})
-
 export type Marker = {
   position: {
     lat: string
@@ -15,24 +8,28 @@ export type Marker = {
   content: string
 }
 
-export const SelectedPlace = atom<Marker | undefined>({
-  key: "CodingMeeting-SelectedPlace-atom",
-  default: undefined,
-})
-
-export const SearchMapMarker = atom<Marker[] | undefined>({
-  key: "CodingMeeting-Marker-atom",
-  default: undefined,
+export const SearchPlaceResultData = atom<{
+  keyword: string
+  placeList: kakao.maps.services.PlacesSearchResult
+}>({
+  key: "codingmeeting-search-result-place",
+  default: {
+    keyword: "",
+    placeList: [],
+  },
 })
 
-export type Location = {
-  coding_meeting_location_id: string
-  coding_meeting_location_place_name: string
-  coding_meeting_location_longitude: string
-  coding_meeting_location_latitude: string
-}
-
-export const LocationForSubmit = atom<Location | undefined>({
-  key: "CodingMeeting-Location-atom",
-  default: undefined,
+export const PlaceAutoComplete = atom<{
+  open: boolean
+  loading: boolean
+  keyword: string
+  placeList: kakao.maps.services.PlacesSearchResult
+}>({
+  key: "codingmeeting-place-autocomplete",
+  default: {
+    open: false,
+    loading: false,
+    keyword: "",
+    placeList: [],
+  },
 })
diff --git a/src/styles/react-calendar/CodingMeetingTile.css b/src/styles/react-calendar/CodingMeetingTile.css
new file mode 100644
index 00000000..1cedf150
--- /dev/null
+++ b/src/styles/react-calendar/CodingMeetingTile.css
@@ -0,0 +1,11 @@
+/* 
+  클래스를 추가하는 것을 통해 우선 순위를 좀 더 줘서 
+  기본 스타일을 override 할 수 있도록 함
+  (기본 타일 disabled스타일은 
+  .react-calendar__tile:disabled)
+*/
+.react-calendar__tile.prev_meeting_day:disabled {
+  background-color: var(--colors-gray);
+  color: #fff;
+  font-weight: bold;
+}
diff --git a/src/util/historySession/path.ts b/src/util/historySession/path.ts
index 88d0864b..21cca7c1 100644
--- a/src/util/historySession/path.ts
+++ b/src/util/historySession/path.ts
@@ -78,6 +78,11 @@ export function pathnameOfBack(pathname: string): TargetPage | null {
   if (isQuestionDetailPage(pathname)) return "qna"
   if (isCoffeeChatDetailPage(pathname)) return "chat"
   if (pathname === "/chat/create") return "chat"
+  if (
+    pathname !== "/coding-meetings" &&
+    pathname.startsWith("/coding-meetings")
+  )
+    return "coding-meetings"
 
   return null
 }
diff --git a/src/util/hook-form/error.ts b/src/util/hook-form/error.ts
new file mode 100644
index 00000000..d9315edb
--- /dev/null
+++ b/src/util/hook-form/error.ts
@@ -0,0 +1,50 @@
+import { CodingMeetingFormData } from "@/interfaces/form"
+import { FieldError, FieldErrors, FieldValues, Merge } from "react-hook-form"
+
+type ErrorType =
+  | FieldError
+  | Merge<FieldError, (FieldError | undefined)[]>
+  | (Record<
+      string,
+      Partial<{
+        type: string | number
+        message: string
+      }>
+    > &
+      Partial<{
+        type: string | number
+        message: string
+      }>)
+
+export function pickFirstError<T extends FieldValues = FieldValues>(
+  errors: FieldErrors<T>,
+) {
+  let errorPayload = {} as ErrorType
+
+  for (const [field, error] of Array.from(Object.entries(errors))) {
+    if (errors[field]) {
+      if (field === "date") {
+        const dateError = errors[
+          "date"
+        ] as FieldErrors<CodingMeetingFormData>["date"]
+
+        if (dateError?.day) {
+          errorPayload = dateError.day
+          break
+        }
+
+        if (dateError?.start_time) {
+          errorPayload = dateError.start_time[0] ?? dateError.start_time[1]!
+          break
+        }
+
+        errorPayload = dateError!.end_time![0] ?? dateError!.end_time![1]!
+        break
+      }
+      errorPayload = error as ErrorType
+      break
+    }
+  }
+
+  return errorPayload
+}
diff --git a/src/util/validate.ts b/src/util/validate.ts
index 7a9f32f6..0a8adecf 100644
--- a/src/util/validate.ts
+++ b/src/util/validate.ts
@@ -104,6 +104,9 @@ export class Validator {
           !hashTag.match(Regex.preventEmoji)
         )
       },
+      whiteSpace() {
+        return !!hashTag && !!hashTag.trim()
+      },
     }
   }