diff --git a/src/app/components/(course)/CoursePlanNewLayout.tsx b/src/app/components/(course)/CoursePlanNewLayout.tsx
new file mode 100644
index 0000000..4fc86a4
--- /dev/null
+++ b/src/app/components/(course)/CoursePlanNewLayout.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import { ChevronLeft, Plus } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Spacer from '@components/(layout)/Spacer'
+import { Place } from '@components/SearchPlace'
+import SearchPlace from '@components/SearchPlace'
+import SelectCategories from '@components/SelectCategories'
+import { useEffect, useState } from 'react'
+import { Input } from 'antd'
+import SortableList from '@components/SortableList'
+import getData from '@/app/schedules/getData'
+import KakaoMap from '@components/KakaoMap'
+import type { DatePickerProps } from 'antd'
+import { DatePicker } from 'antd'
+import RegionCascader from '@components/RegionCascader'
+
+const LAYOUT_TYPE = {
+  course: 'course' as const,
+  plan: 'plan' as const,
+}
+
+type LayoutType = keyof typeof LAYOUT_TYPE
+
+export default function CoursePlanNewLayout({ type }: { type: LayoutType }) {
+  const router = useRouter()
+  const [places, setPlaces] = useState<Place[]>([])
+  const [selectedRegion, setSelectedRegion] = useState<string>('')
+  const [openSearchPlace, setOpenSearchPlace] = useState<boolean>(false)
+
+  const pageType = type === LAYOUT_TYPE.course ? '코스' : '플랜'
+
+  useEffect(() => {
+    const data = getData()
+    setPlaces(data.courses[0].places)
+  }, [])
+
+  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
+    console.log('날짜 선택')
+  }
+
+  const onChangePlaces = (place: Place) => {
+    setPlaces((prevPlaces) => [...prevPlaces, place])
+  }
+
+  const headerTitle =
+    type === LAYOUT_TYPE.course
+      ? '나만의 코스 작성하기'
+      : '좋아하는 장소로 채우는 나의 플랜'
+
+  return (
+    <div className='relative h-100% flex flex-col'>
+      <Header title={headerTitle} onBack={() => router.back()} />
+      <Spacer height={25} />
+      <Section title={`${pageType} 제목을 만들어주세요.`} padding>
+        <Input
+          allowClear
+          maxLength={20}
+          className='rounded-full h-[35px] border-0 bg-bright-gray'
+        />
+      </Section>
+      <Divider />
+      <Section title={`${pageType} 지역을 선택하세요.`} padding>
+        <RegionCascader
+          placeholder='지역을 선택해주세요.'
+          setSelectedRegion={setSelectedRegion}
+        />
+      </Section>
+      <Divider />
+      <Section title={`${pageType} 장소를 선택하세요.`}>
+        <div className='px-[20px] w-full flex flex-col gap-[15px] padding'>
+          {places.length > 0 && <KakaoMap places={places} id={1} />}
+          <SortableList places={places} setPlaces={setPlaces} />
+          <button
+            onClick={() => setOpenSearchPlace(true)}
+            className='w-full h-[40px] text-[15px] cursor-pointer rounded-full flex items-center justify-center bg-container-light-blue'
+          >
+            <Plus size={20} strokeWidth={3} stroke={'#ffffff'} />
+          </button>
+        </div>
+        {openSearchPlace && (
+          <SearchPlace
+            setOpenSearchPlace={setOpenSearchPlace}
+            onChangePlaces={onChangePlaces}
+          />
+        )}
+      </Section>
+      <Divider />
+      <Section title={`${pageType} 설명을 적어주세요.`} padding>
+        <Input.TextArea allowClear showCount autoSize maxLength={200} />
+      </Section>
+      <Divider />
+      <Section title='방문 날짜를 등록하세요.' padding>
+        <DatePicker
+          onChange={onChange}
+          allowClear
+          placeholder='날짜를 선택해주세요.'
+        />
+      </Section>
+      <Divider />
+      <Section title='관련 태그를 눌러 주세요.' padding>
+        <SelectCategories />
+      </Section>
+      <Spacer height={25} />
+      <button
+        className={`w-full text-[12px] h-[54px] flex items-center justify-center bg-blue-100 text-white ${
+          places.length === 0 ? 'cursor-default' : 'bg-blue-800 bg-opacity-50'
+        }`}
+        disabled={places.length === 0}
+      >
+        완료
+      </button>
+    </div>
+  )
+}
+
+function Header({ title, onBack }: { title: string; onBack: () => void }) {
+  return (
+    <header className='max-w-[375px] relative bg-white w-full h-[55px] px-[20px] min-h-[55px] flex justify-between items-center border-b-[1px] border-b-header-line'>
+      <button onClick={onBack}>
+        <ChevronLeft size={24} color='black' strokeWidth={1.5} />
+      </button>
+      <p className='font-semibold text-[17px]'>{title}</p>
+      <div className='w-[24px] h-[24px]'></div>
+    </header>
+  )
+}
+
+function Section({
+  title,
+  children,
+  padding,
+}: {
+  title: string
+  children: React.ReactNode
+  padding?: boolean
+}) {
+  return (
+    <div
+      className={`w-full flex flex-col gap-[15px] ${
+        padding ? 'px-[20px]' : ''
+      }`}
+    >
+      <span className={`text-main font-semibold ${padding ? '' : 'px-[20px]'}`}>
+        {title}
+      </span>
+      {children}
+    </div>
+  )
+}
+
+function Divider() {
+  return (
+    <>
+      <Spacer height={25} />
+      <Spacer height={8} className='bg-bright-gray' />
+      <Spacer height={25} />
+    </>
+  )
+}
diff --git a/src/app/components/RegionCascader.tsx b/src/app/components/RegionCascader.tsx
index 465e2b4..26f298f 100644
--- a/src/app/components/RegionCascader.tsx
+++ b/src/app/components/RegionCascader.tsx
@@ -33,7 +33,7 @@ export default function RegionCascader({
       size='large'
       showSearch={{ filter }}
       style={{
-        width: '300px',
+        width: '100%',
       }}
       expandTrigger='hover'
     />
diff --git a/src/app/components/SearchPlace.tsx b/src/app/components/SearchPlace.tsx
index 414abe0..f94d776 100644
--- a/src/app/components/SearchPlace.tsx
+++ b/src/app/components/SearchPlace.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Input } from 'antd'
+import { ChevronLeft } from 'lucide-react'
+import Spacer from '@components/(layout)/Spacer'
 
 export interface Place {
   id: string
@@ -21,18 +23,29 @@ interface Meta {
 }
 
 interface SearchPlaceProps {
-  onOpenDrawer?: (open: boolean) => void
-  onSelectPlace?: (place: Place) => void
+  setOpenSearchPlace: (open: boolean) => void
+  onChangePlaces: (place: Place) => void
 }
 
 export default function SearchPlace({
-  onOpenDrawer,
-  onSelectPlace,
+  setOpenSearchPlace,
+  onChangePlaces,
 }: SearchPlaceProps) {
   const [results, setResults] = useState<Place[]>([])
   const [meta, setMeta] = useState<Meta>() // TODO: 페이지네이션 추가 필요
   const [inputValue, setInputValue] = useState('')
 
+  useEffect(() => {
+    getResult(inputValue)
+  }, [inputValue])
+
+  useEffect(() => {
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = 'unset'
+    }
+  }, [])
+
   const getResult = async (value: string) => {
     if (!value) return
 
@@ -50,46 +63,56 @@ export default function SearchPlace({
   }
 
   const selectPlace = (place: Place) => {
-    if (onOpenDrawer && onSelectPlace) {
-      onOpenDrawer(false)
-      onSelectPlace(place)
+    if (onChangePlaces) {
+      setOpenSearchPlace(false)
+      onChangePlaces(place)
       setInputValue('')
     }
   }
 
-  useEffect(() => {
-    getResult(inputValue)
-  }, [inputValue])
-
   return (
-    <div className='max-w-[375px] w-full m-auto'>
-      <div className='flex flex-col gap-[10px]'>
-        <span className='text-[15px] font-semibold'>장소명</span>
-        <Input.Search
-          placeholder='장소 이름을 입력해주세요.'
-          className='w-full'
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-        />
-      </div>
-      <div className='w-full mt-[20px] mb-[20px] h-[2px] bg-gray-100' />
-      <div className='flex flex-col gap-[5px] justify-start items-center'>
-        {results.map((result) => {
-          return (
-            <div
-              key={result.id}
-              className='text-[12px] border-blue-100 rounded-[5px] border-[1px] flex flex-col w-full gap-[5px] px-[15px] py-[8px] cursor-pointer'
-              onClick={() => {
-                selectPlace(result)
-              }}
-            >
-              <span className='text-[13px] font-bold'>{result.place_name}</span>
-              <span className='text-[10px] text-gray-600'>
-                {result.address_name}
-              </span>
-            </div>
-          )
-        })}
+    <div className='fixed top-0 transform z-[1000] w-full max-w-[375px] h-full bg-white'>
+      <header className=' bg-white h-[55px] px-[20px] min-h-[55px] flex justify-between items-center border-b-[1px] border-b-header-line'>
+        <button onClick={() => setOpenSearchPlace(false)}>
+          <ChevronLeft size={24} color='black' strokeWidth={1.5} />
+        </button>
+        <p className='font-semibold text-[17px]'>장소 추가하기</p>
+        <div className='w-[24px] h-[24px]'></div>
+      </header>
+      <Spacer height={18} />
+      <div className='px-[20px] w-full flex flex-col gap-[15px]'>
+        <div className='flex flex-col gap-[10px]'>
+          <span className='text-main font-semibold'>장소명</span>
+          <Input.Search
+            placeholder='장소 이름을 입력해주세요.'
+            className='w-full'
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+          />
+        </div>
+        <div className='w-full mt-[20px] h-[2px] bg-gray-100' />
+        <div className='justify-start items-center overflow-y-auto h-[calc(100vh-200px)]'>
+          <div className='h-fit w-full flex flex-col gap-[5px]'>
+            {results.map((result) => {
+              return (
+                <div
+                  key={result.id}
+                  className='text-[12px] border-blue-100 rounded-[5px] border-[1px] flex flex-col w-full gap-[5px] px-[15px] py-[8px] cursor-pointer'
+                  onClick={() => {
+                    selectPlace(result)
+                  }}
+                >
+                  <span className='text-[13px] font-bold'>
+                    {result.place_name}
+                  </span>
+                  <span className='text-[10px] text-gray-600'>
+                    {result.address_name}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        </div>
       </div>
     </div>
   )
diff --git a/src/app/components/SelectCategories.tsx b/src/app/components/SelectCategories.tsx
new file mode 100644
index 0000000..231b64f
--- /dev/null
+++ b/src/app/components/SelectCategories.tsx
@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { categories } from '@/types/Categories'
+
+export default function SelectCategories() {
+  const [clickedCategory, setClickedCategory] = useState<number[]>([])
+
+  const handleCategoryClick = (id: number) => {
+    setClickedCategory((prev) =>
+      prev.includes(id)
+        ? prev.filter((categoryId) => categoryId !== id)
+        : [...prev, id]
+    )
+  }
+
+  return (
+    <div className='inline-flex flex-wrap gap-[5px]'>
+      {categories.map((category) => (
+        <button
+          key={category.id}
+          className={`text-middle py-[5px] px-[10px] rounded-full border-[1px] border-container-blue transition-all duration-100 cursor-pointer ${
+            clickedCategory.includes(category.id)
+              ? 'bg-container-blue text-white'
+              : 'bg-white text-container-blue'
+          }`}
+          onClick={() => handleCategoryClick(category.id)}
+        >
+          {category.value}
+        </button>
+      ))}
+    </div>
+  )
+}
diff --git a/src/app/components/SortableItem.tsx b/src/app/components/SortableItem.tsx
index 18c92f1..2ea8fa0 100644
--- a/src/app/components/SortableItem.tsx
+++ b/src/app/components/SortableItem.tsx
@@ -1,8 +1,7 @@
-import { Button } from 'antd'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { Place } from '@/app/components/SearchPlace'
-import { AlignJustify } from 'lucide-react'
+import { AlignJustify, X, Image } from 'lucide-react'
 
 interface SortableItemProps {
   id: string
@@ -33,29 +32,29 @@ export default function SortableItem({
         transition,
         touchAction: 'none',
       }}
-      className='flex items-center justify-between gap-[10px] h-[40px] px-[10px] py-[10px] border text-[15px] rounded-[5px] bg-white'
+      className='flex items-center justify-between gap-[10px] h-[40px] px-[10px] py-[10px] text-[15px] rounded-full bg-bright-gray'
     >
       <div className='flex items-center gap-[10px]'>
         <div {...attributes} {...listeners} ref={setNodeRef}>
-          <AlignJustify size={20} strokeWidth={1.5} />
+          <AlignJustify size={20} strokeWidth={1.5} stroke={'#5A59F2'} />
         </div>
         <span className='text-[13px]'>{place.place_name}</span>
       </div>
       <div className='flex gap-[5px]'>
         {onEdit && (
-          <Button
+          <button
             className='text-[10px] border-0 h-[20px] w-[20px]'
             onClick={() => handleEdit(place.id)}
           >
-            수정
-          </Button>
+            <Image size={20} stroke={'#A9A9A9'} strokeWidth={1.5} />
+          </button>
         )}
-        <Button
+        <button
           className='text-[10px] shadow-none border-0 h-[20px] w-[30px]'
           onClick={() => onDelete(place.id)}
         >
-          X
-        </Button>
+          <X size={20} stroke={'#A9A9A9'} strokeWidth={1.5} />
+        </button>
       </div>
     </div>
   )
diff --git a/src/app/components/SortableList.tsx b/src/app/components/SortableList.tsx
new file mode 100644
index 0000000..74092c9
--- /dev/null
+++ b/src/app/components/SortableList.tsx
@@ -0,0 +1,60 @@
+import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core'
+import { Place } from '@components/SearchPlace'
+import SortableItem from '@components/SortableItem'
+import {
+  SortableContext,
+  arrayMove,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+
+export default function SortableList({
+  places,
+  setPlaces,
+}: {
+  places: Place[]
+  setPlaces: React.Dispatch<React.SetStateAction<Place[]>>
+}) {
+  const onChangePlaces = (place: Place) => {
+    setPlaces((prevPlaces: Place[]): Place[] => [...prevPlaces, place])
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (active.id !== over?.id) {
+      setPlaces((items: Place[]): Place[] => {
+        const oldIndex = items.findIndex((item) => item.id === active.id)
+        const newIndex = items.findIndex((item) => item.id === over?.id)
+        return arrayMove(items, oldIndex, newIndex) as Place[]
+      })
+    }
+  }
+
+  const handleDelete = (id: string) => {
+    setPlaces((prev: Place[]): Place[] =>
+      prev.filter((place) => place.id !== id)
+    )
+  }
+
+  const handleEdit = (id: string) => {
+    alert(`${id}번 장소를 수정합니다.`)
+  }
+
+  return (
+    <div className='w-full flex flex-col gap-[10px]'>
+      <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={places} strategy={verticalListSortingStrategy}>
+          {places.map((place) => (
+            <SortableItem
+              key={place.id}
+              id={place.id}
+              place={place}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+    </div>
+  )
+}
diff --git a/src/app/courses/new/page.tsx b/src/app/courses/new/page.tsx
index 1484301..f8d12ae 100644
--- a/src/app/courses/new/page.tsx
+++ b/src/app/courses/new/page.tsx
@@ -1,174 +1,5 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { Input, Drawer } from 'antd'
-import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core'
-import {
-  SortableContext,
-  arrayMove,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable'
-import SortableItem from '@/app/components/SortableItem'
-import SearchPlace, { Place } from '@/app/components/SearchPlace'
-import { categories } from '@/types/Categories'
-import getData from '@/app/schedules/getData'
-import { ChevronLeft } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import Spacer from '@/app/components/(layout)/Spacer'
+import CoursePlanNewLayout from '@/app/components/(course)/CoursePlanNewLayout'
 
 export default function Page() {
-  const router = useRouter()
-  const [clickedCategory, setClickedCategory] = useState<number[]>([])
-  const [places, setPlaces] = useState<Place[]>([])
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    const data = getData()
-    setPlaces(data.courses[0].places)
-  }, [])
-
-  const showDrawer = () => {
-    setOpen(true)
-  }
-
-  const onClose = () => {
-    setOpen(false)
-  }
-
-  const onChangePlaces = (place: Place) => {
-    setPlaces((prevPlaces) => [...prevPlaces, place])
-  }
-
-  const handleCategoryClick = (id: number) => {
-    setClickedCategory((prev) =>
-      prev.includes(id)
-        ? prev.filter((categoryId) => categoryId !== id)
-        : [...prev, id]
-    )
-  }
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event
-
-    if (active.id !== over?.id) {
-      setPlaces((items) => {
-        const oldIndex = items.findIndex((item) => item.id === active.id)
-        const newIndex = items.findIndex((item) => item.id === over?.id)
-        return arrayMove(items, oldIndex, newIndex)
-      })
-    }
-  }
-
-  const handleDelete = (id: string) => {
-    setPlaces((prev) => prev.filter((place) => place.id !== id))
-  }
-
-  const handleEdit = (id: string) => {
-    alert(`${id}번 장소를 수정합니다.`)
-  }
-
-  return (
-    <>
-      <header className='max-w-[375px] relative bg-white w-full h-[55px] px-[20px] min-h-[55px] flex justify-between items-center border-b-[1px] border-b-header-line'>
-        <button onClick={() => router.back()}>
-          <ChevronLeft size={24} color='black' strokeWidth={1.5} />
-        </button>
-        <p className='font-semibold text-[17px]'>나만의 코스 작성하기</p>
-        <div className='w-[24px] h-[24px]'></div>
-      </header>
-      <Spacer height={8} />
-      <div className='px-[20px] w-full flex flex-col justify-between'>
-        <div className='w-full flex flex-col items-end'>
-          <div className='w-full flex flex-col gap-[5px]'>
-            <span className='text-main font-semibold'>
-              코스 제목을 만들어주세요
-            </span>
-            <Input
-              allowClear
-              maxLength={20}
-              className='rounded-full h-[35px] border-0 bg-bright-gray'
-            />
-            <Spacer height={15} />
-            <Spacer height={8} className='bg-bright-gray' />
-          </div>
-          <Spacer height={25} />
-          <div className='w-full flex flex-col gap-[5px]'>
-            <span className='text-main font-semibold'>
-              코스 지역을 검색하세요.
-            </span>
-            <Input.TextArea allowClear showCount autoSize maxLength={200} />
-          </div>
-          <div className='w-full mt-[10px] flex flex-col'>
-            <span className='text-[15px]'>코스 카테고리</span>
-            <div className='mt-[5px] inline-flex flex-wrap gap-[5px]'>
-              {categories.map((category) => (
-                <button
-                  key={category.id}
-                  className={`text-[12px] py-[5px] px-[13px] border rounded-[10px] transition-all duration-200 cursor-pointer ${
-                    clickedCategory.includes(category.id)
-                      ? 'bg-blue-100 border-blue-100'
-                      : 'border-gray-300'
-                  }`}
-                  onClick={() => handleCategoryClick(category.id)}
-                >
-                  {category.value}
-                </button>
-              ))}
-            </div>
-          </div>
-          <div className='w-full mt-[20px] mb-[20px] h-[2px] bg-gray-100' />
-          <div className='w-full flex flex-col gap-[10px]'>
-            <span className='text-[15px]'>코스 내 장소 정보</span>
-            <DndContext
-              collisionDetection={closestCenter}
-              onDragEnd={handleDragEnd}
-            >
-              <SortableContext
-                items={places}
-                strategy={verticalListSortingStrategy}
-              >
-                {places.map((place) => (
-                  <SortableItem
-                    key={place.id}
-                    id={place.id}
-                    place={place}
-                    onEdit={handleEdit}
-                    onDelete={handleDelete}
-                  />
-                ))}
-              </SortableContext>
-            </DndContext>
-            <button
-              onClick={showDrawer}
-              className='w-full h-[40px] text-[15px] rounded-[5px] border border-blue-100 flex items-center justify-center'
-            >
-              +
-            </button>
-            <Drawer
-              title='장소 검색'
-              height={600}
-              placement={'bottom'}
-              className='w-[90%] max-w-[330px] rounded-t-[10px] mx-auto my-0'
-              onClose={onClose}
-              open={open}
-              maskClosable
-            >
-              <SearchPlace
-                onOpenDrawer={setOpen}
-                onSelectPlace={onChangePlaces}
-              />
-            </Drawer>
-          </div>
-        </div>
-        <button
-          className={`w-full rounded-[5px] mt-[40px] text-[12px] h-[40px] flex items-center justify-center bg-blue-100 text-white ${
-            places.length === 0 ? 'cursor-default' : 'bg-blue-800 bg-opacity-50'
-          }`}
-          disabled={places.length === 0}
-        >
-          완료
-        </button>
-      </div>
-    </>
-  )
+  return <CoursePlanNewLayout type='course' />
 }
diff --git a/src/app/schedules/[id]/update/page.tsx b/src/app/schedules/[id]/update/page.tsx
index 801c9be..69dc4b8 100644
--- a/src/app/schedules/[id]/update/page.tsx
+++ b/src/app/schedules/[id]/update/page.tsx
@@ -127,7 +127,10 @@ export default function Page() {
         open={open}
         maskClosable
       >
-        <SearchPlace onOpenDrawer={setOpen} onSelectPlace={onChangePlaces} />
+        <SearchPlace
+          setOpenSearchPlace={setOpen}
+          onChangePlaces={onChangePlaces}
+        />
       </Drawer>
     </div>
   )
diff --git a/src/app/schedules/new/page.tsx b/src/app/schedules/new/page.tsx
index 8b54701..ad2d87c 100644
--- a/src/app/schedules/new/page.tsx
+++ b/src/app/schedules/new/page.tsx
@@ -160,7 +160,10 @@ export default function Page() {
           open={open}
           maskClosable
         >
-          <SearchPlace onOpenDrawer={setOpen} onSelectPlace={onChangePlaces} />
+          <SearchPlace
+            setOpenSearchPlace={setOpen}
+            onChangePlaces={onChangePlaces}
+          />
         </Drawer>
       </div>
     </div>