diff --git a/package.json b/package.json
index 8edb72f..b240222 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "slick-carousel": "^1.8.1",
     "tailwind-merge": "^2.5.1",
     "tailwindcss-animate": "^1.0.7",
+    "use-long-press": "^3.2.0",
     "vaul": "^0.9.1",
     "zod": "^3.23.8"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af45ef8..d87d5ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.9)
+      use-long-press:
+        specifier: ^3.2.0
+        version: 3.2.0(react@18.3.1)
       vaul:
         specifier: ^0.9.1
         version: 0.9.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4695,6 +4698,11 @@ packages:
       '@types/react':
         optional: true
 
+  use-long-press@3.2.0:
+    resolution: {integrity: sha512-uq5o2qFR1VRjHn8Of7Fl344/AGvgk7C5Mcb4aSb1ZRVp6PkgdXJJLdRrlSTJQVkkQcDuqFbFc3mDX4COg7mRTA==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   use-sidecar@1.1.2:
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
@@ -9803,6 +9811,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  use-long-press@3.2.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   use-sidecar@1.1.2(@types/react@18.3.3)(react@18.3.1):
     dependencies:
       detect-node-es: 1.1.0
diff --git a/src/__test__/utils/validation.test.ts b/src/__test__/utils/validation.test.ts
new file mode 100644
index 0000000..cb419f7
--- /dev/null
+++ b/src/__test__/utils/validation.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest';
+import { isFalsy } from '@/utils/validation/isFalsy.ts';
+
+describe('validation test: ', () => {
+  describe('function isFalsy test: ', () => {
+    it('should return false when input is not falsy', () => {
+      expect(isFalsy(1)).toBe(false);
+      expect(isFalsy('string')).toBe(false);
+      expect(isFalsy({})).toBe(false);
+      expect(isFalsy([])).toBe(false);
+      expect(isFalsy(true)).toBe(false);
+    });
+    it('should return true when input is falsy', () => {
+      expect(isFalsy(0)).toBe(true);
+      expect(isFalsy('')).toBe(true);
+      expect(isFalsy(null)).toBe(true);
+      expect(isFalsy(undefined)).toBe(true);
+      expect(isFalsy(false)).toBe(true);
+    });
+  });
+});
diff --git a/src/apis/location/addNewLocation.ts b/src/apis/location/addNewLocation.ts
new file mode 100644
index 0000000..7be6401
--- /dev/null
+++ b/src/apis/location/addNewLocation.ts
@@ -0,0 +1,11 @@
+import baseAxios from '@/libs/baseAxios.ts';
+
+// TODO: 추후 에러 처리 해야함
+
+export interface AddNewLocationResponse {
+  id: number;
+  name: string;
+}
+
+export const addNewLocation = async (name: string) =>
+  baseAxios.post<AddNewLocationResponse>('/location', { name });
diff --git a/src/apis/location/deleteLocation.ts b/src/apis/location/deleteLocation.ts
new file mode 100644
index 0000000..33feb6c
--- /dev/null
+++ b/src/apis/location/deleteLocation.ts
@@ -0,0 +1,4 @@
+import baseAxios from '@/libs/baseAxios.ts';
+
+export const deleteLocation = async (locationId: number) =>
+  baseAxios.delete(`/location/${locationId}`);
diff --git a/src/apis/location/getAllLocation.ts b/src/apis/location/getAllLocation.ts
new file mode 100644
index 0000000..af84037
--- /dev/null
+++ b/src/apis/location/getAllLocation.ts
@@ -0,0 +1,8 @@
+import baseAxios from '@/libs/baseAxios.ts';
+import { PlantLocation } from '@/types/plantLocation';
+
+export const getAllLocation = async () => {
+  const response = await baseAxios.get<PlantLocation[]>('/location');
+
+  return response.data;
+};
diff --git a/src/apis/location/updateLocation.ts b/src/apis/location/updateLocation.ts
new file mode 100644
index 0000000..fab8105
--- /dev/null
+++ b/src/apis/location/updateLocation.ts
@@ -0,0 +1,14 @@
+import baseAxios from '@/libs/baseAxios.ts';
+
+export interface UpdateLocationParams {
+  locationId: number;
+  name: string;
+}
+
+export interface UpdateLocationResponse {
+  id: number;
+  name: string;
+}
+
+export const updateLocation = async ({ locationId, name }: UpdateLocationParams) =>
+  baseAxios.patch<UpdateLocationResponse>(`/location/${locationId}`, { name });
diff --git a/src/assets/icon/BinLineMono.tsx b/src/assets/icon/BinLineMono.tsx
new file mode 100644
index 0000000..4bc41ea
--- /dev/null
+++ b/src/assets/icon/BinLineMono.tsx
@@ -0,0 +1,37 @@
+const BinLineMono = () => {
+  return (
+    <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="icon-bin-line-mono 1">
+        <g id="Group">
+          <path
+            id="Vector"
+            d="M21.0001 5.12103H4.0001C3.36497 5.12103 2.8501 5.63591 2.8501 6.27103C2.8501 6.90616 3.36497 7.42103 4.0001 7.42103H21.0001C21.6352 7.42103 22.1501 6.90616 22.1501 6.27103C22.1501 5.63591 21.6352 5.12103 21.0001 5.12103Z"
+            fill="#B0B8C1"
+          />
+          <path
+            id="Vector_2"
+            d="M9.28418 11.98V16.486C9.28418 17.1212 9.79905 17.636 10.4342 17.636C11.0693 17.636 11.5842 17.1212 11.5842 16.486V11.98C11.5842 11.3449 11.0693 10.83 10.4342 10.83C9.79905 10.83 9.28418 11.3449 9.28418 11.98Z"
+            fill="#B0B8C1"
+          />
+          <path
+            id="Vector_3"
+            d="M13.416 11.98V16.486C13.416 17.1212 13.9309 17.636 14.566 17.636C15.2011 17.636 15.716 17.1212 15.716 16.486V11.98C15.716 11.3449 15.2011 10.83 14.566 10.83C13.9309 10.83 13.416 11.3449 13.416 11.98Z"
+            fill="#B0B8C1"
+          />
+          <path
+            id="Vector_4"
+            d="M17.572 6.27103H15.572V3.84003C15.572 3.28903 15.124 2.84003 14.572 2.84003H10.428C9.87698 2.84003 9.42798 3.28903 9.42798 3.84003V6.27103H7.42798V3.84003C7.42798 2.18603 8.77398 0.840027 10.428 0.840027H14.572C16.226 0.840027 17.572 2.18603 17.572 3.84003V6.27103Z"
+            fill="#B0B8C1"
+          />
+          <path
+            id="Vector_5"
+            d="M18.4931 7.42103L18.0051 19.17C17.9891 19.545 17.6811 19.841 17.3061 19.841H7.70413C7.32913 19.841 7.02013 19.545 7.00513 19.171L6.50913 7.42103H18.4931ZM20.8921 5.12103H4.10913L4.73513 19.938C4.78713 21.169 5.80013 22.141 7.03313 22.141H17.9771C19.2101 22.141 20.2241 21.169 20.2751 19.937L20.8921 5.12103Z"
+            fill="#B0B8C1"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default BinLineMono;
diff --git a/src/assets/icon/icon-plus-mono.tsx b/src/assets/icon/icon-plus-mono.tsx
new file mode 100644
index 0000000..c1305ac
--- /dev/null
+++ b/src/assets/icon/icon-plus-mono.tsx
@@ -0,0 +1,17 @@
+const IconPlusMono = () => {
+  return (
+    <svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="&#240;&#159;&#145;&#137;icon-plus-mono">
+        <path
+          id="Fill 5"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.85091 3.5001H4.93424V0.583435C4.93424 0.307185 4.71049 0.0834351 4.43424 0.0834351C4.15799 0.0834351 3.93424 0.307185 3.93424 0.583435V3.5001H1.01758C0.741328 3.5001 0.517578 3.72385 0.517578 4.0001C0.517578 4.27635 0.741328 4.5001 1.01758 4.5001H3.93424V7.41677C3.93424 7.69302 4.15799 7.91677 4.43424 7.91677C4.71049 7.91677 4.93424 7.69302 4.93424 7.41677V4.5001H7.85091C8.12716 4.5001 8.35091 4.27635 8.35091 4.0001C8.35091 3.72385 8.12716 3.5001 7.85091 3.5001Z"
+          fill="#333D48"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default IconPlusMono;
diff --git a/src/components/addPlant/LocationBadge.tsx b/src/components/addPlant/LocationBadge.tsx
new file mode 100644
index 0000000..36c8b28
--- /dev/null
+++ b/src/components/addPlant/LocationBadge.tsx
@@ -0,0 +1,26 @@
+import Badge from '@/components/common/Badge';
+import { cn } from '@/utils.ts';
+import { PlantLocation } from '@/types/plantLocation';
+import { useLongPress } from 'use-long-press';
+
+interface LocationBadgeProps {
+  location: PlantLocation;
+  selected: boolean;
+  onClick: () => void;
+  onLongPress: (defaultValue: string) => void;
+}
+
+const LocationBadge = ({ location, selected, onClick, onLongPress }: LocationBadgeProps) => {
+  const bind = useLongPress(() => onLongPress(location.name), {});
+
+  return (
+    <Badge
+      text={location.name}
+      onClick={onClick}
+      className={cn(selected ? 'bg-BloomingGreen500 text-white' : 'bg-GrayOpacity100 text-Gray800')}
+      {...bind()}
+    />
+  );
+};
+
+export default LocationBadge;
diff --git a/src/components/addPlant/PlantLocationBadgeList.tsx b/src/components/addPlant/PlantLocationBadgeList.tsx
index 1d1a032..6316e62 100644
--- a/src/components/addPlant/PlantLocationBadgeList.tsx
+++ b/src/components/addPlant/PlantLocationBadgeList.tsx
@@ -1,30 +1,205 @@
+import { ChangeEventHandler } from 'react';
+
+import { useUpdateLocation } from '@/queries/useUpdateLocation.ts';
+import { useDeleteLocation } from '@/queries/useDeleteLocation.ts';
+import { MODE, useLocationModalState } from '@/hooks/addNewPlant/useLocationModalState.ts';
+import { useNewLocation } from '@/hooks/addNewPlant/useNewLocation.ts';
+import { useEditLocation } from '@/hooks/addNewPlant/useEditLocation.ts';
+import { useDeleteLocationModal } from '@/hooks/addNewPlant/useDeleteLocationModal.ts';
+import { useAddNewLocation } from '@/queries/useAddNewLocation.ts';
+import { useGetAllLocation } from '@/queries/useGetAllLocation.ts';
+import useToast from '@/hooks/useToast.tsx';
+
+import CTAButton from '@/components/common/CTAButton';
+import TextFieldV2 from '@/components/common/TextFieldV2';
 import Label from '@/components/common/Label';
-import { plantLocation } from '@/constants/plantLocation.ts';
-import { cn } from '@/utils.ts';
 import Badge from '@/components/common/Badge';
-import { useState } from 'react';
+import CenterBottomSheet from '@/components/common/CenterBottomSheet';
+
+import BinLineMono from '@/assets/icon/BinLineMono.tsx';
+import RoundedGreenChecked from '@/assets/icon/RoundedGreenChecked.tsx';
+
+import LocationBadge from '@/components/addPlant/LocationBadge.tsx';
+
+import { FormKey, FormValue } from '@/pages/AddPlantPage.tsx';
 import { PlantLocation } from '@/types/plantLocation';
 
-const PlantLocationBadgeList = () => {
-  const [selectedLocation, setSelectedLocation] = useState<PlantLocation>(plantLocation[0]);
+import { cn } from '@/utils.ts';
+import { isFalsy } from '@/utils/validation/isFalsy.ts';
+import IconPlusMono from '@/assets/icon/icon-plus-mono.tsx';
+
+interface PlantLocationBadgeListProps {
+  handleChange: (key: FormKey, value: FormValue) => void;
+  selectedLocation?: PlantLocation;
+}
+
+const PlantLocationBadgeList = ({
+  handleChange,
+  selectedLocation,
+}: PlantLocationBadgeListProps) => {
+  const { newLocationName, initializeNewLocation, isError, changeNewLocationName } =
+    useNewLocation();
+  const { modalState, initializeModalState, openEditModal, openAddModal } = useLocationModalState();
+  const { editingLocationId, setEditingLocationId, initializeEditingLocation } = useEditLocation();
+  const { deleteLocationId, openDeleteModal, isOpenDeleteModal, closeDeleteModal } =
+    useDeleteLocationModal();
+
+  const data = useGetAllLocation();
+  const { mutate: addNewLocation } = useAddNewLocation();
+  const { mutate: updateLocation } = useUpdateLocation();
+  const { mutate: deleteLocation } = useDeleteLocation();
+  const { openToast } = useToast();
+
+  const changeNewLocationHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    changeNewLocationName(e.target.value);
+  };
+
+  const addNewLocationHandler = () => {
+    switch (modalState.mode) {
+      case MODE.ADD:
+        addNewLocation(newLocationName);
+        break;
+      case MODE.EDIT:
+        updateLocation({ locationId: editingLocationId!, name: newLocationName });
+        break;
+      default:
+        throw Error('에러가 발생했습니다.');
+    }
+
+    initializeModalState();
+    initializeNewLocation();
+
+    setTimeout(() => {
+      openToast({
+        message: (
+          <div
+            className={
+              'flex flex-row items-center justify-center w-full gap-2 text-small-body font-medium text-white'
+            }
+          >
+            <RoundedGreenChecked />
+            <span>등록 되었습니다.</span>
+          </div>
+        ),
+        duration: 1000,
+      });
+    }, 100);
+  };
+
+  const openAddNewModalHandler = () => {
+    openAddModal();
+  };
+
+  const closeModalHandler = () => {
+    initializeModalState();
+    initializeNewLocation();
+    initializeEditingLocation();
+  };
+
+  const openEditModalHandler = (location: PlantLocation) => {
+    openEditModal();
+    changeNewLocationName(location.name);
+    setEditingLocationId(location.id);
+  };
+
+  const openDeleteModalHandler = () => {
+    if (!editingLocationId) throw Error('삭제 버튼 클릭시 editingLocationId 를 찾을 수 없습니다.');
+    openDeleteModal(editingLocationId);
+    initializeModalState();
+  };
+
+  const closeDeleteModalHandler = () => {
+    closeDeleteModal();
+  };
+
+  const deleteLocationHandler = () => {
+    if (!deleteLocationId) throw Error('editingLocationId 를 찾을 수 없습니다.');
+    deleteLocation(deleteLocationId);
+    closeDeleteModalHandler();
+    setTimeout(() => {
+      openToast({
+        message: <p className={'text-small-body font-medium text-white'}>삭제 되었습니다.</p>,
+      });
+    }, 100);
+  };
 
   return (
     <div>
       <Label title={'식물위치'} htmlFor={'plant-location'} essential={true} />
       <ul className={'w-full flex flex-row gap-[9px] mt-[12px]'}>
-        {plantLocation.map((location) => (
-          <Badge
-            text={location.name}
+        {data.data.map((location) => (
+          <LocationBadge
             key={`location-badge-${location.id}`}
-            onClick={() => setSelectedLocation(location)}
-            className={cn(
-              selectedLocation.id === location.id
-                ? 'bg-BloomingGreen500 text-white'
-                : 'bg-GrayOpacity100 text-Gray800',
-            )}
+            onClick={() => handleChange('식물위치', { value: location, required: true })}
+            selected={selectedLocation?.id === location.id}
+            location={location}
+            onLongPress={() => openEditModalHandler(location)}
           />
         ))}
-        <Badge text={'직접입력'} type={'button'} className={'bg-GrayOpacity100 text-Gray800'} />
+        <Badge
+          text={'직접입력'}
+          type={'button'}
+          className={'bg-GrayOpacity100 text-Gray800'}
+          onClick={openAddNewModalHandler}
+          icon={<IconPlusMono />}
+        />
+        <CenterBottomSheet
+          title="식물 위치"
+          content={
+            <div className="px-3.5">
+              <TextFieldV2
+                placeholder={'직접입력'}
+                onChange={changeNewLocationHandler}
+                value={newLocationName}
+                error={isError}
+                errorMessage={'이름은 최대 네글자까지 입력이 가능해요.'}
+                trailingIcon={
+                  modalState.mode === MODE.EDIT ? (
+                    <button onClick={() => openDeleteModalHandler()}>
+                      <BinLineMono />
+                    </button>
+                  ) : undefined
+                }
+              />
+            </div>
+          }
+          actions={[
+            <CTAButton
+              text={'등록하기'}
+              type={'button'}
+              onClick={addNewLocationHandler}
+              className={cn(
+                isFalsy(newLocationName) || isError ? 'bg-Gray300' : 'bg-BloomingGreen500',
+              )}
+              disabled={isFalsy(newLocationName) || isError}
+            />,
+          ]}
+          isOpen={modalState.open}
+          onClose={closeModalHandler}
+          // 바텀 시트 제목 사이즈 조절할 때 사용되는 값입니다. true 일 경우 큰 사이즈, 아닐 경우 작은 사이즈 입니다.
+          headerAsLabel
+        />
+        <CenterBottomSheet
+          title={'정말 삭제하시나요?\n삭제 후에는 되돌릴 수 없어요'}
+          content={<></>}
+          actionDirection={'row'}
+          actions={[
+            <CTAButton
+              text={'취소'}
+              type={'button'}
+              onClick={closeDeleteModalHandler}
+              className={'bg-Gray100 text-Gray800'}
+            />,
+            <CTAButton
+              text={'삭제'}
+              type={'button'}
+              onClick={() => deleteLocationHandler()}
+              className={'bg-Red500'}
+            />,
+          ]}
+          isOpen={isOpenDeleteModal}
+          onClose={closeDeleteModalHandler}
+        />
       </ul>
     </div>
   );
diff --git a/src/components/addPlant/PlantTypeTextField.tsx b/src/components/addPlant/PlantTypeTextField.tsx
index 483cb66..fbd7bb6 100644
--- a/src/components/addPlant/PlantTypeTextField.tsx
+++ b/src/components/addPlant/PlantTypeTextField.tsx
@@ -1,8 +1,9 @@
 import TextField from '@/components/common/TextField';
 import IconSearchMono from '@/assets/icon/icon-search-mono.tsx';
 import SearchPlantPage from '@/pages/SearchPlantPage.tsx';
-import { useEffect, useState } from 'react';
+import { MouseEventHandler, useEffect, useState } from 'react';
 import { usePlantTypeSearchParams } from '@/hooks/usePlantTypeSearchParams.ts';
+import useToast from '@/hooks/useToast';
 
 interface PlantTypeTextFieldProps {
   handleChange: (key: '식물 종류', value: { value: string; required: boolean }) => void;
@@ -10,34 +11,34 @@ interface PlantTypeTextFieldProps {
 
 const PlantTypeTextField = ({ handleChange }: PlantTypeTextFieldProps) => {
   const [open, setOpen] = useState(false);
+  const { openToast } = useToast();
   const { plantType } = usePlantTypeSearchParams();
 
   useEffect(() => {
-    if (plantType) {
+    if (plantType !== null && plantType !== '') {
       handleChange('식물 종류', {
         value: plantType,
         required: true,
       });
     }
-  }, [plantType, handleChange]);
+  }, [plantType, handleChange, openToast]);
+
+  const onMouseDown: MouseEventHandler<HTMLInputElement> = (e) => {
+    e.preventDefault();
+    setOpen(true);
+  };
 
   return (
     <>
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-          setOpen(true);
-        }}
-      >
-        <TextField
-          title={'식물 종류'}
-          placeholder={'검색'}
-          essential={true}
-          icon={<IconSearchMono />}
-          onChange={(e) => handleChange('식물 종류', { value: e.target.value, required: true })}
-          value={plantType ?? ''}
-        />
-      </div>
+      <TextField
+        title={'식물 종류'}
+        placeholder={'검색'}
+        essential={true}
+        icon={<IconSearchMono />}
+        onChange={(e) => handleChange('식물 종류', { value: e.target.value, required: true })}
+        value={plantType ?? ''}
+        onMouseDown={onMouseDown}
+      />
       {open && (
         <div className={'w-screen h-screen fixed top-0 left-0 bg-white z-50'}>
           <SearchPlantPage onClose={() => setOpen(false)} />
diff --git "a/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\254\274\354\244\200\353\202\240.tsx" "b/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\254\274\354\244\200\353\202\240.tsx"
index 2773f81..f9b2fa2 100644
--- "a/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\254\274\354\244\200\353\202\240.tsx"
+++ "b/src/components/addPlant/\353\247\210\354\247\200\353\247\211\354\234\274\353\241\234\353\254\274\354\244\200\353\202\240.tsx"
@@ -11,19 +11,21 @@ const 마지막으로물준날 = () => {
 
   const [open, setOpen] = useState<boolean>(false);
 
-  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
+  const onMouseDown = (e: MouseEvent<HTMLInputElement>) => {
     e.preventDefault();
     setOpen(true);
   };
 
   return (
     <>
-      <button type={'button'} onClick={onClick}>
-        <TextField title={'마지막으로 물 준 날'} placeholder={''} essential={false} />
-      </button>
+      <TextField
+        title={'마지막으로 물 준 날'}
+        placeholder={''}
+        essential={false}
+        onMouseDown={onMouseDown}
+      />
       <BottomSheet
-        title={'함께하기 시작한 날'}
+        title={'마지막으로 물 준 날'}
         content={
           <div className={'px-[10px] h-[310px] overflow-hidden flex flex-row mt-[10px]'}>
             <ScrollPicker
@@ -51,7 +53,9 @@ const 마지막으로물준날 = () => {
         }
         actions={[<CTAButton text={'선택하기'} className={'bg-BloomingGreen500'} />]}
         isOpen={open}
-        onClose={() => {}}
+        onClose={() => {
+          setOpen(false);
+        }}
       />
     </>
   );
diff --git "a/src/components/addPlant/\355\225\250\352\273\230\355\225\230\352\270\260\354\213\234\354\236\221\355\225\234\353\202\240.tsx" "b/src/components/addPlant/\355\225\250\352\273\230\355\225\230\352\270\260\354\213\234\354\236\221\355\225\234\353\202\240.tsx"
index e07590b..a1e69a9 100644
--- "a/src/components/addPlant/\355\225\250\352\273\230\355\225\230\352\270\260\354\213\234\354\236\221\355\225\234\353\202\240.tsx"
+++ "b/src/components/addPlant/\355\225\250\352\273\230\355\225\230\352\270\260\354\213\234\354\236\221\355\225\234\353\202\240.tsx"
@@ -1,4 +1,4 @@
-import { MouseEvent, useState } from 'react';
+import { MouseEventHandler, useState } from 'react';
 
 import TextField from '@/components/common/TextField';
 import BottomSheet from '@/components/common/BottomSheet';
@@ -12,17 +12,19 @@ const 함께하기시작한날 = () => {
 
   const [open, setOpen] = useState<boolean>(false);
 
-  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
+  const onMouseDown: MouseEventHandler<HTMLInputElement> = (e) => {
     e.preventDefault();
     setOpen(true);
   };
 
   return (
     <>
-      <button onClick={onClick} type={'button'}>
-        <TextField title={'함께하기 시작한 날'} placeholder={''} essential={false} />
-      </button>
+      <TextField
+        title={'함께하기 시작한 날'}
+        placeholder={''}
+        essential={false}
+        onMouseDown={onMouseDown}
+      />
       <BottomSheet
         title={'함께하기 시작한 날'}
         content={
@@ -52,7 +54,9 @@ const 함께하기시작한날 = () => {
         }
         actions={[<CTAButton text={'선택하기'} className={'bg-BloomingGreen500'} />]}
         isOpen={open}
-        onClose={() => {}}
+        onClose={() => {
+          setOpen(false);
+        }}
       />
     </>
   );
diff --git a/src/components/common/BottomSheet/index.tsx b/src/components/common/BottomSheet/index.tsx
index 0f4e3d6..39e0a27 100644
--- a/src/components/common/BottomSheet/index.tsx
+++ b/src/components/common/BottomSheet/index.tsx
@@ -6,6 +6,7 @@ import {
   DrawerTitle,
 } from '@/components/ui/drawer.tsx';
 import { ReactNode } from 'react';
+import { cn } from '@/utils.ts';
 
 interface BottomSheetProps {
   title: string;
@@ -13,14 +14,30 @@ interface BottomSheetProps {
   actions: ReactNode[];
   isOpen: boolean;
   onClose: () => void;
+  headerAsLabel?: boolean;
 }
 
-const BottomSheet = ({ isOpen, onClose, title, content, actions }: BottomSheetProps) => {
+const BottomSheet = ({
+  isOpen,
+  onClose,
+  title,
+  content,
+  actions,
+  headerAsLabel,
+}: BottomSheetProps) => {
   return (
     <Drawer open={isOpen} onClose={onClose}>
       <DrawerContent>
         <DrawerHeader className={'whitespace-pre-wrap'}>
-          <DrawerTitle className={'text-small-title font-bold leading-[29px]'}>{title}</DrawerTitle>
+          <DrawerTitle
+            className={cn(
+              headerAsLabel
+                ? 'text-small-writing font-medium'
+                : 'text-small-title font-bold leading-[29px]',
+            )}
+          >
+            {title}
+          </DrawerTitle>
         </DrawerHeader>
         {content}
         <DrawerFooter>{...actions}</DrawerFooter>
diff --git a/src/components/common/CTAButton/index.tsx b/src/components/common/CTAButton/index.tsx
index 0a3174f..43434da 100644
--- a/src/components/common/CTAButton/index.tsx
+++ b/src/components/common/CTAButton/index.tsx
@@ -1,9 +1,10 @@
 import { Button, ButtonProps } from '@/components/ui/button.tsx';
 import { cn } from '@/utils.ts';
+import { ReactNode } from 'react';
 
 interface CTAButtonProps extends ButtonProps {
   color?: keyof typeof CTAButtonColor;
-  text: string;
+  text: string | ReactNode;
 }
 
 const CTAButtonColor = {
diff --git a/src/components/common/CenterBottomSheet/index.tsx b/src/components/common/CenterBottomSheet/index.tsx
new file mode 100644
index 0000000..6e655d3
--- /dev/null
+++ b/src/components/common/CenterBottomSheet/index.tsx
@@ -0,0 +1,54 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/centeredDrawer.tsx';
+import { ReactNode } from 'react';
+import { cn } from '@/utils.ts';
+
+interface CenterBottomSheetProps {
+  title: string | ReactNode;
+  content: ReactNode;
+  actions: ReactNode[];
+  isOpen: boolean;
+  onClose: () => void;
+  headerAsLabel?: boolean;
+  actionDirection?: 'row' | 'column';
+}
+
+const CenterBottomSheet = ({
+  isOpen,
+  onClose,
+  title,
+  content,
+  actions,
+  headerAsLabel,
+  actionDirection = 'column',
+}: CenterBottomSheetProps) => {
+  return (
+    <Drawer open={isOpen} onClose={onClose}>
+      <DrawerContent className={'rounded-3xl'}>
+        <DrawerHeader className={'whitespace-pre-wrap'}>
+          <DrawerTitle
+            className={cn(
+              headerAsLabel
+                ? 'text-small-writing font-medium'
+                : 'text-small-title font-bold leading-[29px]',
+              'text-start  px-2.5 mt-[10px]',
+            )}
+          >
+            {title}
+          </DrawerTitle>
+        </DrawerHeader>
+        {content}
+        <DrawerFooter className={cn('flex', actionDirection === 'row' ? 'flex-row' : 'flex-col')}>
+          {...actions}
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default CenterBottomSheet;
diff --git a/src/components/common/SearchField/index.tsx b/src/components/common/SearchField/index.tsx
index 2f7081a..6f812df 100644
--- a/src/components/common/SearchField/index.tsx
+++ b/src/components/common/SearchField/index.tsx
@@ -23,6 +23,7 @@ const SearchField: React.FC<SearchInputProps> = ({ placeholder = '플레이스
         type="text"
         value={query}
         onChange={handleChange}
+        autoFocus={true}
         placeholder={placeholder}
         className="w-full py-[8px] pl-[42px] pr-[22px] border border-Gray100 bg-Gray100 rounded-[10px] focus:outline-none text-regular-body font-medium caret-BloomingGreen500"
       />
diff --git a/src/components/common/TextField/index.tsx b/src/components/common/TextField/index.tsx
index a44e75c..b0f489a 100644
--- a/src/components/common/TextField/index.tsx
+++ b/src/components/common/TextField/index.tsx
@@ -1,8 +1,9 @@
 import { ChangeEventHandler, ReactNode, useEffect, useId, useRef, useState } from 'react';
 import Label from '@/components/common/Label';
 import { HiXCircle } from 'react-icons/hi';
+import { cn } from '@/utils.ts';
 
-interface TextFieldProps {
+interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
   essential?: boolean;
   title: string;
   placeholder?: string;
@@ -18,6 +19,7 @@ const TextField: React.FC<TextFieldProps> = ({
   title,
   icon,
   onClear,
+  disabled,
   ...inputProps
 }) => {
   const [isFocused, setIsFocused] = useState(false);
@@ -42,7 +44,7 @@ const TextField: React.FC<TextFieldProps> = ({
   }, []);
 
   return (
-    <div ref={containerRef} className="grid w-full max-w-sm gap-2">
+    <div ref={containerRef} className={cn(disabled ? 'z-0' : '', 'grid w-full max-w-sm gap-2')}>
       <Label title={title} essential={essential} htmlFor={id} />
       <div className="py-[14px] px-[16px] flex flex-row border border-GrayOpacity100 rounded-md bg-Gray50">
         {icon !== undefined ? <div className={'mr-[10px]'}>{icon}</div> : null}
diff --git a/src/components/common/TextFieldV2/index.tsx b/src/components/common/TextFieldV2/index.tsx
index 2eb9e28..679ba4d 100644
--- a/src/components/common/TextFieldV2/index.tsx
+++ b/src/components/common/TextFieldV2/index.tsx
@@ -4,10 +4,12 @@ import { ReactNode, useId } from 'react';
 import { cn } from '@/utils.ts';
 
 export interface TextFieldV2Props extends Omit<InputProps, 'id' | 'type' | 'className'> {
-  label: string;
+  label?: string;
   labelClassName?: string;
   inputClassName?: string;
   trailingIcon?: ReactNode;
+  error?: boolean;
+  errorMessage?: string;
 }
 
 const TextFieldV2 = ({
@@ -15,35 +17,42 @@ const TextFieldV2 = ({
   labelClassName,
   inputClassName,
   trailingIcon,
+  error,
+  errorMessage,
   ...rest
 }: TextFieldV2Props) => {
   const id = useId();
 
   return (
-    <div className="grid w-full items-center gap-2.5">
-      <Label
-        className={cn('text-small-writing text-gray-800 font-medium px-2.5', labelClassName)}
-        htmlFor={id}
-      >
-        {label}
-      </Label>
-      <div
-        className={cn(
-          'w-full px-2.5 pt-0 pb-3 flex flex-row justify-between items-center border-b-2 border-gray-100 bg-white',
-          inputClassName,
+    <>
+      <div className="grid w-full items-center gap-2.5">
+        {label !== undefined && (
+          <Label
+            className={cn('text-small-writing text-gray-800 font-medium px-2.5', labelClassName)}
+            htmlFor={id}
+          >
+            {label}
+          </Label>
         )}
-      >
-        <Input
-          className={
-            'border-none rounded-none p-0 text-regular-title font-semibold placeholder:text-gray-400 focus-visible:ring-transparent focus-visible:ring-offset-0 caret-blue-500 text-gray-800'
-          }
-          id={id}
-          type={'text'}
-          {...rest}
-        />
-        {trailingIcon}
+        <div
+          className={cn(
+            'w-full px-2.5 pt-0 pb-3 flex flex-row justify-between items-center border-b-2 border-gray-100 bg-white',
+            inputClassName,
+          )}
+        >
+          <Input
+            className={
+              'border-none rounded-none p-0 text-regular-title font-semibold placeholder:text-Gray400 focus-visible:ring-transparent focus-visible:ring-offset-0 caret-blue-500 text-Gray800'
+            }
+            id={id}
+            type={'text'}
+            {...rest}
+          />
+          {trailingIcon}
+        </div>
       </div>
-    </div>
+      {error && <p className="text-small-writing text-Red500 mt-4 mx-2.5">{errorMessage}</p>}
+    </>
   );
 };
 
diff --git a/src/components/searchPlant/SearchedPlantList.tsx b/src/components/searchPlant/SearchedPlantList.tsx
index b8698f6..ad58e46 100644
--- a/src/components/searchPlant/SearchedPlantList.tsx
+++ b/src/components/searchPlant/SearchedPlantList.tsx
@@ -2,8 +2,8 @@ import { useSearchPlant } from '@/queries/useSearchPlant.ts';
 import List from '@/components/common/List';
 import GreenRoundPlusIcon from '@/assets/icon/GreenRoundPlusIcon.tsx';
 import { usePlantTypeSearchParams } from '@/hooks/usePlantTypeSearchParams.ts';
-import useToast from '@/hooks/useToast.tsx';
 import RoundedGreenChecked from '@/assets/icon/RoundedGreenChecked.tsx';
+import useToast from '@/hooks/useToast';
 
 interface SearchedPlantListProps {
   query: string;
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 78ff1c0..bd50f27 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-opacity-90',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
diff --git a/src/components/ui/centeredDrawer.tsx b/src/components/ui/centeredDrawer.tsx
new file mode 100644
index 0000000..b893f1d
--- /dev/null
+++ b/src/components/ui/centeredDrawer.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/utils.ts';
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-DimBackground', className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-1/2 z-50 flex h-auto flex-col rounded-t-[10px] border bg-background mx-4 after:hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-[4px] w-[48px] rounded-full bg-Gray100" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('grid gap-1.5 py-1 px-3.5 mb-[10px] text-center sm:text-left', className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('mt-auto flex flex-col gap-2 p-3.5', className)} {...props} />
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..84c804f
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/src/hooks/addNewPlant/useDeleteLocationModal.ts b/src/hooks/addNewPlant/useDeleteLocationModal.ts
new file mode 100644
index 0000000..a181350
--- /dev/null
+++ b/src/hooks/addNewPlant/useDeleteLocationModal.ts
@@ -0,0 +1,23 @@
+import { useState } from 'react';
+
+export const useDeleteLocationModal = () => {
+  const [isOpenDeleteModal, setIsOpenDeleteMoal] = useState(false);
+  const [deleteLocationId, setDeleteLocationId] = useState<number | null>(null);
+
+  const openDeleteModal = (id: number) => {
+    setDeleteLocationId(id);
+    setIsOpenDeleteMoal(true);
+  };
+
+  const closeDeleteModal = () => {
+    setIsOpenDeleteMoal(false);
+    setDeleteLocationId(null);
+  };
+
+  return {
+    deleteLocationId,
+    openDeleteModal,
+    isOpenDeleteModal,
+    closeDeleteModal,
+  };
+};
diff --git a/src/hooks/addNewPlant/useEditLocation.ts b/src/hooks/addNewPlant/useEditLocation.ts
new file mode 100644
index 0000000..72ad35e
--- /dev/null
+++ b/src/hooks/addNewPlant/useEditLocation.ts
@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+export const useEditLocation = () => {
+  const [editingLocationId, setEditingLocationId] = useState<number | null>(null);
+
+  const initializeEditingLocation = () => {
+    setEditingLocationId(null);
+  };
+
+  return {
+    editingLocationId,
+    setEditingLocationId,
+    initializeEditingLocation,
+  };
+};
diff --git a/src/hooks/addNewPlant/useLocationModalState.ts b/src/hooks/addNewPlant/useLocationModalState.ts
new file mode 100644
index 0000000..babba97
--- /dev/null
+++ b/src/hooks/addNewPlant/useLocationModalState.ts
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+export const MODE = {
+  ADD: 'ADD',
+  EDIT: 'EDIT',
+} as const;
+
+export type MODE = (typeof MODE)[keyof typeof MODE] | null;
+
+interface ModalState {
+  mode: MODE;
+  open: boolean;
+}
+
+const initialModalState = {
+  mode: null,
+  open: false,
+};
+
+export const useLocationModalState = () => {
+  const [modalState, setModalState] = useState<ModalState>(initialModalState);
+
+  const initializeModalState = () => {
+    setModalState(initialModalState);
+  };
+
+  const openAddModal = () => {
+    setModalState({ mode: MODE.ADD, open: true });
+  };
+
+  const openEditModal = () => {
+    setModalState({ mode: MODE.EDIT, open: true });
+  };
+
+  return {
+    modalState,
+    openAddModal,
+    openEditModal,
+    initializeModalState,
+  };
+};
diff --git a/src/hooks/addNewPlant/useNewLocation.ts b/src/hooks/addNewPlant/useNewLocation.ts
new file mode 100644
index 0000000..a6e27aa
--- /dev/null
+++ b/src/hooks/addNewPlant/useNewLocation.ts
@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+export const useNewLocation = () => {
+  const [newLocationName, setNewLocationName] = useState('');
+  const [isError, setIsError] = useState(false);
+
+  const initializeNewLocation = () => {
+    setNewLocationName('');
+    setIsError(false);
+  };
+
+  const changeNewLocationName = (value: string) => {
+    setIsError(false);
+    if (value.length > 4) {
+      setIsError(true);
+    }
+    setNewLocationName(value);
+  };
+
+  return {
+    isError,
+    changeNewLocationName,
+    newLocationName,
+    initializeNewLocation,
+  };
+};
diff --git a/src/hooks/useToast.tsx b/src/hooks/useToast.tsx
index bf2fdd9..9de00ba 100644
--- a/src/hooks/useToast.tsx
+++ b/src/hooks/useToast.tsx
@@ -1,34 +1,31 @@
 import useGlobalModal from '@/hooks/useGlobalModal.ts';
-import { ReactNode } from 'react';
+import { ReactNode, useCallback } from 'react';
 
 const useToast = () => {
   const { openModal, closeModal } = useGlobalModal();
 
-  const openToast = ({
-    message,
-    duration = 3000,
-  }: {
-    message: ReactNode | string;
-    duration?: number;
-  }) => {
-    openModal({
-      title: (
-        <div
-          className={
-            'py-4 px-5 bg-GrayOpacity600 w-10/12 max-w-md rounded-[10px] mx-auto flex items-center justify-center'
-          }
-        >
-          {message}
-        </div>
-      ),
-      backdrop: false,
-      actions: [],
-    });
+  const openToast = useCallback(
+    ({ message, duration = 3000 }: { message: ReactNode | string; duration?: number }) => {
+      openModal({
+        title: (
+          <div
+            className={
+              'py-4 px-5 bg-GrayOpacity600 w-10/12 max-w-md rounded-[10px] mx-auto flex items-center justify-center'
+            }
+          >
+            {message}
+          </div>
+        ),
+        backdrop: false,
+        actions: [],
+      });
 
-    setTimeout(() => {
-      closeModal();
-    }, duration);
-  };
+      setTimeout(() => {
+        closeModal();
+      }, duration);
+    },
+    [openModal, closeModal],
+  );
 
   return {
     openToast,
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index c5c85dc..30d0b34 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,9 +1,43 @@
 import { delay, http, HttpResponse } from 'msw';
 import searchResponse from './mockDatas/searchPlant.ts';
+import { plantLocation } from '@/mocks/mockDatas/plantLocation.ts';
 
 export const handlers = [
   http.get(import.meta.env.VITE_API_URL + '/plants', async () => {
     await delay(1000);
     return HttpResponse.json(searchResponse);
   }),
+
+  http.post(import.meta.env.VITE_API_URL + '/location', async ({ request: req }) => {
+    await delay(1000);
+    const body = (await req.json()) as { name: string };
+    return HttpResponse.json({
+      id: 1,
+      name: body.name,
+    });
+  }),
+
+  http.get(import.meta.env.VITE_API_URL + '/location', async () => {
+    await delay(1000);
+
+    return HttpResponse.json(plantLocation);
+  }),
+
+  http.patch(import.meta.env.VITE_API_URL + '/location/:id', async ({ request: req, params }) => {
+    const body = (await req.json()) as { name: string };
+    const id = params.id;
+
+    return HttpResponse.json({
+      id: id,
+      name: body.name,
+    });
+  }),
+
+  http.delete(import.meta.env.VITE_API_URL + '/location/:id', async ({ params }) => {
+    const id = params.id;
+
+    return HttpResponse.json({
+      id: id,
+    });
+  }),
 ];
diff --git a/src/constants/plantLocation.ts b/src/mocks/mockDatas/plantLocation.ts
similarity index 100%
rename from src/constants/plantLocation.ts
rename to src/mocks/mockDatas/plantLocation.ts
diff --git a/src/pages/AddPlantPage.tsx b/src/pages/AddPlantPage.tsx
index 79d700a..5583334 100644
--- a/src/pages/AddPlantPage.tsx
+++ b/src/pages/AddPlantPage.tsx
@@ -10,7 +10,9 @@ import PlantLocationBadgeList from '@/components/addPlant/PlantLocationBadgeList
 import 함께하기시작한날 from '@/components/addPlant/함께하기시작한날';
 import 마지막으로물준날 from '@/components/addPlant/마지막으로물준날.tsx';
 import NotificationToggleList from '@/components/addPlant/NotificationToggleList.tsx';
-import { useCallback, useState } from 'react';
+import { Suspense, useCallback, useState } from 'react';
+import { PlantLocation } from '@/types/plantLocation';
+import { isFalsy } from '@/utils/validation/isFalsy.ts';
 
 const initialForm = {
   '식물 종류': {
@@ -18,7 +20,7 @@ const initialForm = {
     required: true,
   },
   식물위치: {
-    value: '',
+    value: undefined as PlantLocation | undefined,
     required: true,
   },
   '반려식물 애칭': {
@@ -35,8 +37,8 @@ const initialForm = {
   },
 };
 
-type FormKey = keyof typeof initialForm;
-type FormValue = (typeof initialForm)[FormKey];
+export type FormKey = keyof typeof initialForm;
+export type FormValue = (typeof initialForm)[FormKey];
 
 const AddPlantPage = () => {
   const router = useInternalRouter();
@@ -51,7 +53,7 @@ const AddPlantPage = () => {
 
   const isFormValid = Object.entries(form)
     .filter(([, value]) => value.required)
-    .every(([, value]) => value.value !== '');
+    .every(([, value]) => !isFalsy(value.value));
 
   return (
     <Screen>
@@ -70,7 +72,12 @@ const AddPlantPage = () => {
       />
       <form className={'w-full flex flex-col gap-[25px] mt-[41px]'}>
         <PlantTypeTextField handleChange={handleChange} />
-        <PlantLocationBadgeList />
+        <Suspense fallback={<div>로딩중...</div>}>
+          <PlantLocationBadgeList
+            selectedLocation={form.식물위치.value}
+            handleChange={handleChange}
+          />
+        </Suspense>
         <TextField title={'반려식물 애칭'} placeholder={'몬스테라 델리시오사'} essential={false} />
         <함께하기시작한날 />
         <마지막으로물준날 />
@@ -79,6 +86,7 @@ const AddPlantPage = () => {
       <CTAButton
         text={'등록하기'}
         className={cn('mt-[19px]', isFormValid ? 'bg-BloomingGreen500' : 'bg-Gray300')}
+        disabled={!isFormValid}
       />
     </Screen>
   );
diff --git a/src/providers/GlobalModalProvider.tsx b/src/providers/GlobalModalProvider.tsx
index 9425a38..dde1127 100644
--- a/src/providers/GlobalModalProvider.tsx
+++ b/src/providers/GlobalModalProvider.tsx
@@ -1,4 +1,4 @@
-import { createContext, PropsWithChildren, ReactNode, useState } from 'react';
+import { createContext, PropsWithChildren, ReactNode, useCallback, useState } from 'react';
 
 interface ModalState {
   title?: string | ReactNode;
@@ -28,13 +28,13 @@ interface GlobalModalProviderProps extends PropsWithChildren {}
 export const GlobalModalProvider = ({ children }: GlobalModalProviderProps) => {
   const [modalState, setModalState] = useState(initialModalState);
 
-  const openModal = (modalState: Omit<ModalState, 'isOpen'>) => {
+  const openModal = useCallback((modalState: Omit<ModalState, 'isOpen'>) => {
     setModalState({ ...modalState, isOpen: true });
-  };
+  }, []);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     setModalState(initialModalState);
-  };
+  }, []);
 
   return (
     <GlobalModalContext.Provider value={{ openModal, closeModal }}>
diff --git a/src/queries/keyStore.ts b/src/queries/keyStore.ts
index 5c9afb4..ae05f0a 100644
--- a/src/queries/keyStore.ts
+++ b/src/queries/keyStore.ts
@@ -4,4 +4,10 @@ export const keyStore = createQueryKeyStore({
   plantGuide: {
     searchPlant: null,
   },
+  location: {
+    addNewLocation: null,
+    getAllLocation: null,
+    updateLocation: null,
+    deleteLocation: null,
+  },
 });
diff --git a/src/queries/useAddNewLocation.ts b/src/queries/useAddNewLocation.ts
new file mode 100644
index 0000000..85cfcb9
--- /dev/null
+++ b/src/queries/useAddNewLocation.ts
@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { keyStore } from '@/queries/keyStore.ts';
+import { addNewLocation } from '@/apis/location/addNewLocation.ts';
+import { PlantLocation } from '@/types/plantLocation';
+
+export const useAddNewLocation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: keyStore.location.addNewLocation.queryKey,
+    mutationFn: addNewLocation,
+    onMutate: async (name) => {
+      // Optimistic 업데이트 로직 입니다! 새로운 위치를 추가할 때 응답 결과를 기다리지 않고 바로 추가되는것 처럼 보이도록 했습니다!
+      await queryClient.cancelQueries({ queryKey: keyStore.location.getAllLocation.queryKey });
+
+      const previousLocations = queryClient.getQueriesData({
+        queryKey: keyStore.location.getAllLocation.queryKey,
+      });
+
+      queryClient.setQueryData<PlantLocation[]>(
+        keyStore.location.getAllLocation.queryKey,
+        (oldData) => {
+          return [...(oldData ?? []), { id: -1, name }];
+        },
+      );
+
+      return { previousLocations };
+    },
+
+    onError: (_error, _newLocation, context) => {
+      queryClient.setQueryData(
+        keyStore.location.getAllLocation.queryKey,
+        context?.previousLocations,
+      );
+    },
+
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: keyStore.location.getAllLocation.queryKey });
+    },
+  });
+};
diff --git a/src/queries/useDeleteLocation.ts b/src/queries/useDeleteLocation.ts
new file mode 100644
index 0000000..5498152
--- /dev/null
+++ b/src/queries/useDeleteLocation.ts
@@ -0,0 +1,40 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { keyStore } from '@/queries/keyStore.ts';
+import { deleteLocation } from '@/apis/location/deleteLocation.ts';
+import { PlantLocation } from '@/types/plantLocation';
+
+export const useDeleteLocation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: keyStore.location.deleteLocation.queryKey,
+    mutationFn: deleteLocation,
+    onMutate: async (locationId) => {
+      await queryClient.cancelQueries({
+        queryKey: keyStore.location.getAllLocation.queryKey,
+      });
+
+      const previousLocations = queryClient.getQueryData(keyStore.location.getAllLocation.queryKey);
+
+      queryClient.setQueryData<PlantLocation[]>(
+        keyStore.location.getAllLocation.queryKey,
+        (old) => {
+          return old?.filter((location) => location.id !== locationId);
+        },
+      );
+
+      return { previousLocations };
+    },
+
+    onError: (_err, _variables, context) => {
+      queryClient.setQueryData(
+        keyStore.location.getAllLocation.queryKey,
+        context?.previousLocations,
+      );
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({
+        queryKey: keyStore.location.getAllLocation.queryKey,
+      });
+    },
+  });
+};
diff --git a/src/queries/useGetAllLocation.ts b/src/queries/useGetAllLocation.ts
new file mode 100644
index 0000000..4848c73
--- /dev/null
+++ b/src/queries/useGetAllLocation.ts
@@ -0,0 +1,9 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { keyStore } from '@/queries/keyStore.ts';
+import { getAllLocation } from '@/apis/location/getAllLocation.ts';
+
+export const useGetAllLocation = () =>
+  useSuspenseQuery({
+    queryKey: keyStore.location.getAllLocation.queryKey,
+    queryFn: getAllLocation,
+  });
diff --git a/src/queries/useUpdateLocation.ts b/src/queries/useUpdateLocation.ts
new file mode 100644
index 0000000..5d33fb0
--- /dev/null
+++ b/src/queries/useUpdateLocation.ts
@@ -0,0 +1,50 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateLocation } from '@/apis/location/updateLocation.ts';
+import { keyStore } from '@/queries/keyStore.ts';
+import { PlantLocation } from '@/types/plantLocation';
+
+export const useUpdateLocation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: updateLocation,
+    mutationKey: keyStore.location.updateLocation.queryKey,
+    onMutate: async ({ locationId, name }) => {
+      // TODO: 낙관적 업데이트 로직 구현
+      await queryClient.cancelQueries({
+        queryKey: keyStore.location.getAllLocation.queryKey,
+      });
+
+      const previousLocations = queryClient.getQueryData(keyStore.location.getAllLocation.queryKey);
+
+      queryClient.setQueryData<PlantLocation[]>(
+        keyStore.location.getAllLocation.queryKey,
+        (old) => {
+          return old?.map((location) => {
+            if (location.id === locationId) {
+              return {
+                ...location,
+                name,
+              };
+            }
+            return location;
+          });
+        },
+      );
+
+      return { previousLocations };
+    },
+
+    onError: (_error, _variables, context) => {
+      queryClient.setQueryData(
+        keyStore.location.getAllLocation.queryKey,
+        context?.previousLocations,
+      );
+    },
+
+    onSettled: () => {
+      void queryClient.invalidateQueries({
+        queryKey: keyStore.location.getAllLocation.queryKey,
+      });
+    },
+  });
+};
diff --git a/src/utils/validation/isFalsy.ts b/src/utils/validation/isFalsy.ts
new file mode 100644
index 0000000..362593a
--- /dev/null
+++ b/src/utils/validation/isFalsy.ts
@@ -0,0 +1,7 @@
+export const isFalsy = (value: unknown): boolean => {
+  if (value === 0) return true;
+  if (value === '') return true;
+  if (value === null) return true;
+  if (value === undefined) return true;
+  return value === false;
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 64d2821..43edef8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -84,6 +84,8 @@ export default {
         GrayOpacity600: 'rgba(0, 19, 43, 0.58)',
         BloomingGreen500: '#34C184',
         Blue500: '#3182F6',
+        Red500: 'rgba(240, 68, 82, 1)',
+        DimBackground: 'rgba(0, 0, 0, 0.2)',
       },
       borderRadius: {
         lg: 'var(--radius)',
diff --git a/vitest.config.ts b/vitest.config.ts
index f14646a..b4bf790 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -12,4 +12,9 @@ export default defineConfig({
       reporter: process.env.GITHUB_ACTIONS ? ['text-summary'] : ['text'],
     },
   },
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
 });