From 2ff81fd6ec73073926372fa2032693eb6273502c Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sat, 30 Sep 2023 22:18:19 +0900
Subject: [PATCH 01/12] =?UTF-8?q?[feat]=20api=20=ED=98=B8=EC=B6=9C=20?=
 =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/index.ts | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/api/index.ts b/api/index.ts
index 110fe82..8417ddd 100644
--- a/api/index.ts
+++ b/api/index.ts
@@ -5,27 +5,16 @@ export const fetchData = async <T>(url: string, options?: RequestInit): Promise<
     const response = await fetch(`${baseURL}${url}`, options);
 
     if (response.status === 204) {
-      // error is: "Type 'null' is not assignable to type 'T'."
       return null;
     }
 
-    if (!response.ok) {
-      throw new Error('Failed to fetch data');
-    }
-
-    // TODO:나중에 삭제
     try {
       const data = await response.json();
       return data;
     } catch (e) {
-      if (response.status === 200) {
-        return null;
-      }
+      throw Error('에러 응답값이 없습니다');
     }
-    const data = await response.json();
-    return data;
   } catch (error) {
-    console.error(error);
-    throw new Error('Failed to fetch data');
+    throw new Error('Failed to fetch data', error as Error);
   }
 };

From 10562948a8f8249532fe6134f714e5e90c6462ac Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sat, 30 Sep 2023 23:28:10 +0900
Subject: [PATCH 02/12] =?UTF-8?q?[feat]=20=EB=A9=80=ED=8B=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MultiButton/MultiButton.tsx | 60 ++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 components/MultiButton/MultiButton.tsx

diff --git a/components/MultiButton/MultiButton.tsx b/components/MultiButton/MultiButton.tsx
new file mode 100644
index 0000000..3e8514f
--- /dev/null
+++ b/components/MultiButton/MultiButton.tsx
@@ -0,0 +1,60 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import Button from '../Button/Button';
+import { Option } from '../Radio/Radio';
+
+interface MultiButtonProps {
+  options: Option[];
+  register: UseFormRegisterReturn;
+  onChange?: (value: string) => void;
+}
+
+function MultiButton({ options, register }: MultiButtonProps) {
+  const [selected, setSelected] = React.useState<Option>(options[0]);
+
+  const handleButtonClick = (value: string) => {
+    const selectedButton = options.find((option) => option.value === value);
+
+    if (!selectedButton) {
+      return;
+    }
+
+    setSelected(selectedButton);
+  };
+
+  const getButtonColor = useCallback(
+    (value: string) => {
+      return selected?.value === value ? 'r1' : 'outlined';
+    },
+    [selected]
+  );
+
+  useEffect(() => {
+    const customEvent = {
+      target: {
+        name: register.name,
+        value: selected,
+      },
+    };
+    register.onChange(customEvent);
+  }, [selected, register]);
+
+  return (
+    <div className={`mb-3 grid  gap-0 grid-cols-${options.length}`}>
+      {options.map((option, index) => (
+        <div key={`option-${index}`} className="col-span-1">
+          <Button
+            size="lg"
+            type="button"
+            onClick={() => handleButtonClick(option.value)}
+            color={getButtonColor(option.value)}
+          >
+            {option.label}
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default MultiButton;

From 143978c41a40350cec83fb077a374bc73c9691a2 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sat, 30 Sep 2023 23:32:41 +0900
Subject: [PATCH 03/12] =?UTF-8?q?[feat]=20=EB=AC=B4=ED=95=9C=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MultiButton/MultiButton.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/MultiButton/MultiButton.tsx b/components/MultiButton/MultiButton.tsx
index 3e8514f..fc56270 100644
--- a/components/MultiButton/MultiButton.tsx
+++ b/components/MultiButton/MultiButton.tsx
@@ -37,7 +37,8 @@ function MultiButton({ options, register }: MultiButtonProps) {
       },
     };
     register.onChange(customEvent);
-  }, [selected, register]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected]);
 
   return (
     <div className={`mb-3 grid  gap-0 grid-cols-${options.length}`}>

From ff045a9427fa5245eb97fbb0cf1a37ea8a6c923b Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sat, 30 Sep 2023 23:42:21 +0900
Subject: [PATCH 04/12] =?UTF-8?q?[feat]=20=EC=9E=90=EC=9E=98=ED=95=9C=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Filter/Filter.tsx          | 1 -
 components/Radio/Radio.tsx            | 2 +-
 components/layouts/RoomListLayout.tsx | 1 -
 pages/login.tsx                       | 1 -
 4 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/Filter/Filter.tsx b/components/Filter/Filter.tsx
index 1540c86..11571f8 100644
--- a/components/Filter/Filter.tsx
+++ b/components/Filter/Filter.tsx
@@ -7,7 +7,6 @@ import styles from './Filter.module.scss';
 import { Option } from '../Select/Select';
 import Calendar from '../Calendar/Calendar';
 
-
 const TYPE_OF_HOUSING = [
   {
     value: 'studioChecked',
diff --git a/components/Radio/Radio.tsx b/components/Radio/Radio.tsx
index ef9e8d2..2f435e7 100644
--- a/components/Radio/Radio.tsx
+++ b/components/Radio/Radio.tsx
@@ -2,7 +2,7 @@
 import React, { ChangeEvent } from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
 
-interface Option {
+export interface Option {
   value: string;
   label: string;
 }
diff --git a/components/layouts/RoomListLayout.tsx b/components/layouts/RoomListLayout.tsx
index 9646353..7c6f873 100644
--- a/components/layouts/RoomListLayout.tsx
+++ b/components/layouts/RoomListLayout.tsx
@@ -3,7 +3,6 @@ import Header from '@/components/Header/Header.tsx';
 import useModal from '@/hooks/useModal.ts';
 import Step1 from '@/pages/room/addRoom/step1.tsx';
 
-
 interface AppLayoutProps {
   children: ReactNode;
 }
diff --git a/pages/login.tsx b/pages/login.tsx
index 2efacf0..fa543cb 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -15,7 +15,6 @@ export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
 });
 
 export default function Login() {
-  const router = useRouter();
   const { t } = useTranslation('common');
   const {
     handleSubmit,

From 70b555ce2c5a22599469ed45220d9c81931efa99 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sat, 30 Sep 2023 23:42:39 +0900
Subject: [PATCH 05/12] =?UTF-8?q?[feat]=20multi=20button=20=EC=B2=AB=20?=
 =?UTF-8?q?=EB=A0=8C=EB=94=A9=20=EC=8B=9C=20=EC=B2=AB=EB=B2=88=EC=A7=B8=20?=
 =?UTF-8?q?=EC=98=B5=EC=85=98=EC=9C=BC=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MultiButton/MultiButton.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/MultiButton/MultiButton.tsx b/components/MultiButton/MultiButton.tsx
index fc56270..a7ce52b 100644
--- a/components/MultiButton/MultiButton.tsx
+++ b/components/MultiButton/MultiButton.tsx
@@ -10,7 +10,7 @@ interface MultiButtonProps {
 }
 
 function MultiButton({ options, register }: MultiButtonProps) {
-  const [selected, setSelected] = React.useState<Option>(options[0]);
+  const [selected, setSelected] = React.useState<Option>();
 
   const handleButtonClick = (value: string) => {
     const selectedButton = options.find((option) => option.value === value);
@@ -40,6 +40,11 @@ function MultiButton({ options, register }: MultiButtonProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selected]);
 
+  useEffect(() => {
+    setSelected(options[0]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className={`mb-3 grid  gap-0 grid-cols-${options.length}`}>
       {options.map((option, index) => (

From e25300d3d942488a694181169f00ec837e8a9c71 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sat, 30 Sep 2023 23:42:58 +0900
Subject: [PATCH 06/12] =?UTF-8?q?[feat]=20=EC=9D=BC=EB=8B=A8=20add=20room?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/room/add/add.module.scss |   3 +
 pages/room/add/step1.tsx       | 355 +++++++++++++++++++++++++++++++++
 2 files changed, 358 insertions(+)
 create mode 100644 pages/room/add/add.module.scss
 create mode 100644 pages/room/add/step1.tsx

diff --git a/pages/room/add/add.module.scss b/pages/room/add/add.module.scss
new file mode 100644
index 0000000..e535cea
--- /dev/null
+++ b/pages/room/add/add.module.scss
@@ -0,0 +1,3 @@
+.sub-header {
+  @apply font-pretendard font-semibold text-[16px];
+}
diff --git a/pages/room/add/step1.tsx b/pages/room/add/step1.tsx
new file mode 100644
index 0000000..64cef5c
--- /dev/null
+++ b/pages/room/add/step1.tsx
@@ -0,0 +1,355 @@
+import React, { useState, useEffect, useCallback, use, useMemo } from 'react';
+import { useTranslation } from 'next-i18next';
+import useModal from '@/hooks/useModal.ts';
+import { Stepper, Chip, Select, Typography, Checkbox, Button, Input, Calendar } from '@/components/index.tsx';
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
+import { GuList, DongList } from '@/public/js/guDongList.ts';
+import { Option } from '@/components/Select/Select';
+import Step2 from '@/pages/room/addRoom/step2.tsx';
+import DefaultLayout from '@/components/layouts/DefaultLayout';
+import toast from 'react-hot-toast';
+import MultiButton from '@/components/MultiButton/MultiButton';
+import styles from './add.module.scss';
+
+interface GuDong2 extends Option {
+  gu: string | number;
+  guLabel: string;
+}
+
+interface GuDong {
+  gu: Option;
+  dong: Option;
+}
+
+const MAINTANANCE_FEE_OPTIONS = [
+  {
+    value: 'yes',
+    label: 'YES',
+  },
+  {
+    value: 'no',
+    label: 'NO',
+  },
+];
+
+const INCLUDE_OPTIONS = [
+  {
+    value: 'gasChecked',
+    label: 'Gas',
+  },
+  {
+    value: 'waterChecked',
+    label: 'Water',
+  },
+  {
+    value: 'electricityChecked',
+    label: 'Electricity',
+  },
+  {
+    value: 'cleaningChecked',
+    label: 'Cleaning',
+  },
+];
+
+export default function AddRoom() {
+  const { openModal } = useModal();
+  const filterTranslation = useTranslation('filter');
+  const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
+  const [buttonState, setButtonState] = useState('YES');
+  const [isCalendarShow, setCalendarShow] = useState(false);
+  const [selectedLocations, setSelectedLocations] = useState<GuDong[]>([]);
+
+  const [guValue, setGuValue] = useState<Option>({
+    value: '',
+    label: '',
+  });
+
+  const [dongValue, setDongValue] = useState<GuDong2>({
+    gu: '',
+    guLabel: '',
+    value: '',
+    label: '',
+  });
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  // const filteredDongList = DongList.filter((v) => v.gu === guValue?.value || '');
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    openModal({
+      props: {
+        title: 'Add room',
+        size: 'full',
+        custom: true,
+        customHeader: true,
+      },
+      children: <Step2 step1Data={data} />,
+    });
+  };
+
+  // 옵션 선택 시 실행될 함수, 유효성 검증
+  const handleOptionSelect = useCallback(() => {
+    if (!dongValue.label) return;
+
+    let resultOptions: string[];
+    const option = dongValue.label;
+
+    setSelectedOptions((prevSelectedOptions) => {
+      const isExist = prevSelectedOptions.some((item) => item.includes(option));
+      // Location이 5개 이상 선택 될 경우 Toast 노출
+      if (prevSelectedOptions.length >= 5) {
+        return [...prevSelectedOptions];
+      }
+
+      if (!isExist) {
+        resultOptions = [...prevSelectedOptions, guValue?.label.concat(`, ${option}`)];
+      } else {
+        resultOptions = prevSelectedOptions;
+      }
+      return [...resultOptions];
+    });
+  }, [dongValue.label, guValue?.label]);
+
+  const handleDongChange = useCallback(
+    (option: Option) => {
+      // 선택된 value와 label 값을 이용하여 원하는 작업 수행
+      setDongValue({ ...option, gu: guValue.value, guLabel: guValue.label });
+    },
+    [guValue?.label, guValue?.value]
+  );
+
+  const handleGuChange = useCallback((option: Option) => {
+    setGuValue(option);
+  }, []);
+
+  const handleOptionRemove = (option: string) => {
+    setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((item) => item !== option));
+  };
+  const handleCalendarShow = (isShow: boolean) => {
+    setCalendarShow(isShow);
+  };
+
+  const isNextStep = () => {
+    return (
+      !watch('dong') ||
+      !watch('monthPrice') ||
+      !(watch('depositPrice') || watch('depositChecked')) ||
+      !(watch('availableChecked') || watch('dateAvailable')) ||
+      !((buttonState === 'YES' && watch('maintananceFee')) || buttonState === 'NO')
+    );
+  };
+
+  const handleButtonClick = (value: string) => {
+    setButtonState(value);
+  };
+
+  const getButtonColor = (value: string) => {
+    return buttonState === value ? 'r1' : 'outlined';
+  };
+
+  useEffect(() => {
+    handleOptionSelect();
+  }, [dongValue.label, handleOptionSelect]);
+
+  const gu = watch('gu');
+  const dong = watch('dong');
+  const filteredDongList = useMemo(() => {
+    if (!gu) {
+      return [];
+    }
+
+    return DongList.filter((v) => v.gu === gu.value);
+  }, [gu]);
+
+  useEffect(() => {
+    if (!dong) return;
+
+    if (selectedLocations.length === 5) {
+      toast.error('You can select up to five');
+      return;
+    }
+
+    const isExist = selectedLocations.some((item) => item.dong.value === dong.value);
+
+    if (isExist) {
+      toast.error('Already selected');
+      return;
+    }
+
+    setSelectedLocations((prevSelectedLocations) => {
+      prevSelectedLocations.push({
+        gu: {
+          ...gu,
+        },
+        dong: {
+          ...dong,
+        },
+      });
+
+      return [...prevSelectedLocations];
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dong]);
+
+  // 옵션 제거 시 실행될 함수
+  const removeLocation = (option: string | number) => {
+    setSelectedLocations((prevSelectedLocations) =>
+      prevSelectedLocations.filter((item) => {
+        const value = String(option);
+
+        return item.dong.value !== value;
+      })
+    );
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stepper step={1} totalStep={3} />
+      <div className="mt-[9px] mb-[20px]">
+        <Typography variant="header" fontStyle="semiBold">
+          Fill in the basic informations
+        </Typography>
+      </div>
+      <div className="mb-[32px]">
+        <div className="mb-[4px]">
+          <div className={styles['sub-header']}>Location</div>
+        </div>
+        <div className="grid grid-flow-row gap-[8px]">
+          <Select options={GuList} register={register('gu')} placeholder="Gu" />
+          <Select options={filteredDongList} register={register('dong')} placeholder="Dong" disabled={!watch('gu')} />
+        </div>
+        {/* 선택된 옵션들에 대해 동적으로 Chip 컴포넌트 렌더링 */}
+        {selectedLocations.length > 0 && (
+          <div className="mt-[16px] overflow-x-auto whitespace-nowrap">
+            {selectedLocations.map((option) => {
+              return (
+                <Chip
+                  key={option.dong.value}
+                  label={`${option.gu.label}, ${option.dong.label}`}
+                  onDelete={() => removeLocation?.(option.dong.value)}
+                  clicked
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* 구분선 */}
+      <hr />
+
+      {/* Monthly rent */}
+      <div className="my-[32px]">
+        <div className="mb-[16px]">
+          <div className={styles['sub-header']}>Monthly rent</div>
+        </div>
+        <div className="mb-[8px]">
+          <div className="text-g5 text-[12px] font-normal">Min 0 ￦ - Max 500,000,000 ￦</div>
+        </div>
+        <div className="mb-[28px]">
+          <Input placeholder="Price" type="number" register={register('monthPrice')} />
+        </div>
+      </div>
+
+      {/* Deposit */}
+      <div className="mb-[28px]">
+        <div className="mb-[10px]">
+          <div className={styles['sub-header']}>Deposit</div>
+        </div>
+        <div className="mb-[8px]">
+          <div className="text-g5 text-[12px] font-normal">Min 0 ￦ - Max 500,000,000 ￦</div>
+        </div>
+        <div className="mb-[16px]">
+          <Input
+            placeholder="Price"
+            type="number"
+            register={register('depositPrice')}
+            disabled={watch('depositChecked')}
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-[8px] mt-[12px]">
+          <Checkbox type="outlined" label="No Deposit" register={register('depositChecked')} />
+        </div>
+      </div>
+
+      {/* Maintanance fee */}
+      <div>
+        <div className="mb-[4px] mt-[28px]">
+          <div className="mb-[10px]">
+            <div className={styles['sub-header']}> Maintanance fee</div>
+          </div>
+        </div>
+        <div className="mb-[24px]">
+          <MultiButton options={MAINTANANCE_FEE_OPTIONS} register={register('maintananceFee')} />
+        </div>
+        {watch('maintananceFee')?.value === 'yes' && (
+          <div className="mb-[16px]">
+            <Input
+              placeholder={filterTranslation.t('Price') as string}
+              type="number"
+              register={register('maintananceFee')}
+            />
+          </div>
+        )}
+
+        {/* Maintanance fee - Included */}
+        <div className="mb-[16px]">
+          <div className="text-g5 text-[12px] font-normal">Included (optional)</div>
+        </div>
+        <div className="grid grid-cols-2 gap-[8px] mt-[12px] mb-[40px]">
+          {INCLUDE_OPTIONS.map((item) => {
+            return (
+              <Checkbox
+                key={item.value}
+                type="outlined"
+                label={item.label}
+                register={register(item.value)}
+                checked={watch(item.value)}
+              />
+            );
+          })}
+        </div>
+      </div>
+
+      <hr />
+
+      <div className="mb-[4px] mt-[28px]">
+        <div className="mb-[10px]">
+          <div className={styles['sub-header']}>Date available</div>
+        </div>
+      </div>
+      <section className="mb-[8px]">
+        <Calendar
+          placeholder="MM-DD-YYYY"
+          type="text"
+          register={register('dateAvailable')}
+          disabled={watch('availableChecked')}
+        />
+      </section>
+      <div className={`grid grid-cols-2 gap-[8px] ${isCalendarShow ? 'mb-[533px]' : 'mb-[166px]'} `}>
+        <Checkbox type="outlined" label="Available now" register={register('availableChecked')} />
+      </div>
+      <div className="fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
+        <div className="w-full">
+          <div className="mb-[13px]">
+            <Button
+              size="lg"
+              type="submit"
+              disabled={isNextStep()}
+              onClick={() => {
+                watch('dateAvailable');
+              }}
+            >
+              {filterTranslation.t('Next')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+AddRoom.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <DefaultLayout title="Add Rooms" handleButtonClick={() => window.history.back()}>
+      <div className="pt-[31px]">{page}</div>
+    </DefaultLayout>
+  );
+};

From ccd261fa0d94d1e9c85c5747cdb9fd9f96e2a5e8 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sat, 30 Sep 2023 23:53:10 +0900
Subject: [PATCH 07/12] =?UTF-8?q?[feat]=200=20=EC=9D=B4=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EB=90=A0=20=EA=B2=BD=EC=9A=B0=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=ED=95=B4=EC=A3=BC=EA=B2=8C=EB=81=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Input/Input.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx
index 53ef431..ef911b0 100644
--- a/components/Input/Input.tsx
+++ b/components/Input/Input.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { ChangeEvent, useMemo, useState } from 'react';
 import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
 import styles from './Input.module.scss';
 
@@ -20,20 +20,38 @@ function Input({ placeholder, register, type, error, maxLength, disabled }: Inpu
     }
     return type;
   }, [type, isPasswordShow]);
+  const [inputValue, setInputValue] = useState('' as string);
 
   const togglePasswordVisibility = () => {
     setIsPasswordShow((state) => !state);
   };
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+
+    setInputValue(value === '0' ? '' : value);
+
+    const customEvent = {
+      target: {
+        name: register.name,
+        value: value === '0' ? '' : value,
+      },
+    };
+
+    register.onChange(customEvent);
+  };
+
   return (
     <div className="relative w-full">
       <input
-        className={`${styles.input} ${hasError ? styles.error : ''} ${disabled ? 'bg-g2': 'bg-g0'}`}
+        className={`${styles.input} ${hasError ? styles.error : ''} ${disabled ? 'bg-g2' : 'bg-g0'}`}
         placeholder={placeholder}
         type={inputType}
         maxLength={maxLength}
         disabled={disabled}
         {...register}
+        onChange={handleChange}
+        value={inputValue}
       />
       <button
         className="absolute inset-y-0 right-0 flex items-center mx-4 text-gray-600 h-fit pt-[12px]"

From 85cc29c35b61ebd970361b1bc085ff9633c9f566 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sat, 30 Sep 2023 23:53:28 +0900
Subject: [PATCH 08/12] =?UTF-8?q?[feat]=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=EB=A5=BC=20=EC=A0=84=EB=B6=80=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=ED=95=B4=EC=A3=BC=EC=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/room/add/step1.tsx | 67 ----------------------------------------
 1 file changed, 67 deletions(-)

diff --git a/pages/room/add/step1.tsx b/pages/room/add/step1.tsx
index 64cef5c..ace3928 100644
--- a/pages/room/add/step1.tsx
+++ b/pages/room/add/step1.tsx
@@ -59,19 +59,6 @@ export default function AddRoom() {
   const [isCalendarShow, setCalendarShow] = useState(false);
   const [selectedLocations, setSelectedLocations] = useState<GuDong[]>([]);
 
-  const [guValue, setGuValue] = useState<Option>({
-    value: '',
-    label: '',
-  });
-
-  const [dongValue, setDongValue] = useState<GuDong2>({
-    gu: '',
-    guLabel: '',
-    value: '',
-    label: '',
-  });
-  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
-  // const filteredDongList = DongList.filter((v) => v.gu === guValue?.value || '');
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     openModal({
       props: {
@@ -84,48 +71,6 @@ export default function AddRoom() {
     });
   };
 
-  // 옵션 선택 시 실행될 함수, 유효성 검증
-  const handleOptionSelect = useCallback(() => {
-    if (!dongValue.label) return;
-
-    let resultOptions: string[];
-    const option = dongValue.label;
-
-    setSelectedOptions((prevSelectedOptions) => {
-      const isExist = prevSelectedOptions.some((item) => item.includes(option));
-      // Location이 5개 이상 선택 될 경우 Toast 노출
-      if (prevSelectedOptions.length >= 5) {
-        return [...prevSelectedOptions];
-      }
-
-      if (!isExist) {
-        resultOptions = [...prevSelectedOptions, guValue?.label.concat(`, ${option}`)];
-      } else {
-        resultOptions = prevSelectedOptions;
-      }
-      return [...resultOptions];
-    });
-  }, [dongValue.label, guValue?.label]);
-
-  const handleDongChange = useCallback(
-    (option: Option) => {
-      // 선택된 value와 label 값을 이용하여 원하는 작업 수행
-      setDongValue({ ...option, gu: guValue.value, guLabel: guValue.label });
-    },
-    [guValue?.label, guValue?.value]
-  );
-
-  const handleGuChange = useCallback((option: Option) => {
-    setGuValue(option);
-  }, []);
-
-  const handleOptionRemove = (option: string) => {
-    setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((item) => item !== option));
-  };
-  const handleCalendarShow = (isShow: boolean) => {
-    setCalendarShow(isShow);
-  };
-
   const isNextStep = () => {
     return (
       !watch('dong') ||
@@ -136,18 +81,6 @@ export default function AddRoom() {
     );
   };
 
-  const handleButtonClick = (value: string) => {
-    setButtonState(value);
-  };
-
-  const getButtonColor = (value: string) => {
-    return buttonState === value ? 'r1' : 'outlined';
-  };
-
-  useEffect(() => {
-    handleOptionSelect();
-  }, [dongValue.label, handleOptionSelect]);
-
   const gu = watch('gu');
   const dong = watch('dong');
   const filteredDongList = useMemo(() => {

From f2b7469a94914a3cf40f76fd4604afd0df4ea618 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sun, 1 Oct 2023 00:26:41 +0900
Subject: [PATCH 09/12] =?UTF-8?q?[feat]=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=ED=8F=AC=EC=A7=80=EC=85=98=20top=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Calendar/Calendar.module.scss |  4 ++++
 components/Calendar/Calendar.tsx         | 21 +++++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/components/Calendar/Calendar.module.scss b/components/Calendar/Calendar.module.scss
index a1b821f..ce890b1 100644
--- a/components/Calendar/Calendar.module.scss
+++ b/components/Calendar/Calendar.module.scss
@@ -16,3 +16,7 @@
 .warning {
   @apply text-a1 font-pretendard text-[14px] h-[14px] mt-[4px];
 }
+
+.top-position {
+  @apply absolute bottom-[50px];
+}
diff --git a/components/Calendar/Calendar.tsx b/components/Calendar/Calendar.tsx
index a6dd285..65e00bf 100644
--- a/components/Calendar/Calendar.tsx
+++ b/components/Calendar/Calendar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactCalendar from 'react-calendar';
 import { FieldError, UseFormRegisterReturn } from 'react-hook-form';
 import { format, parse } from 'date-fns';
@@ -26,6 +26,7 @@ export default function Calendar({ placeholder, register, error, disabled, value
   const calendarRef = useRef<HTMLDivElement | null>(null);
   const [dateValue, setDateValue] = useState<string>(value || '');
   const [originDateValue, setOriginDateValue] = useState<string>(value || '');
+  const [scrollPosition, setScrollPosition] = useState<number>(0);
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -34,6 +35,12 @@ export default function Calendar({ placeholder, register, error, disabled, value
       }
     };
 
+    if (calendarRef.current) {
+      const elementRect = calendarRef.current.getBoundingClientRect();
+
+      setScrollPosition(window.innerHeight - Number(elementRect?.bottom));
+    }
+
     // 마운트 시 이벤트 등록
     document.addEventListener('click', handleClickOutside);
 
@@ -45,6 +52,7 @@ export default function Calendar({ placeholder, register, error, disabled, value
 
   const toggleCalendar = () => {
     setIsCalendarShow((state) => !state);
+    setScrollPosition(window.scrollY || document.documentElement.scrollTop);
     handleCalendarShow?.(!isCalendarShow);
   };
 
@@ -69,6 +77,7 @@ export default function Calendar({ placeholder, register, error, disabled, value
     setOriginDateValue(dateValue);
     register.onChange(customEvent);
     toggleCalendar();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dateValue, register]);
 
   const valueToDisplay = dateValue ? parse(dateValue, 'MM-dd-yyyy', new Date()) : '';
@@ -76,7 +85,7 @@ export default function Calendar({ placeholder, register, error, disabled, value
   return (
     <div className="relative w-full" ref={calendarRef}>
       <input
-        className={`${styles.input} ${hasError ? styles.error : ''} ${disabled ? 'bg-g2': 'bg-g0'} `}
+        className={`${styles.input} ${hasError ? styles.error : ''} ${disabled ? 'bg-g2' : 'bg-g0'} `}
         placeholder={placeholder}
         disabled={disabled}
         onClick={toggleCalendar}
@@ -85,7 +94,11 @@ export default function Calendar({ placeholder, register, error, disabled, value
         {...register}
       />
       {isCalendarShow && (
-        <div className="border-[#bdbdbd] border-[1px] absolute bg-g0">
+        <div
+          className={`border-[#bdbdbd] border-[1px] absolute bg-g0 ${
+            scrollPosition < 450 ? styles['top-position'] : ''
+          }`}
+        >
           <ReactCalendar
             value={valueToDisplay}
             onChange={changeDate}
@@ -93,7 +106,7 @@ export default function Calendar({ placeholder, register, error, disabled, value
             next2Label={null}
             maxDetail="month"
             minDetail="month"
-            calendarType="US" // 일요일부터 시작하도록 한다
+            calendarType="gregory" // 일요일부터 시작하도록 한다
             formatShortWeekday={(locale, date) => ['S', 'M', 'T', 'W', 'T', 'F', 'S'][date.getDay()]}
             formatDay={(locale, date) => format(date, 'd')}
             formatMonthYear={(locale, date) => format(date, 'MMMM yyyy')}

From 26cd7839acd9c7b47fe7d086208845839e876d13 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sun, 1 Oct 2023 00:41:45 +0900
Subject: [PATCH 10/12] =?UTF-8?q?[feat]=20validation=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/room/add/step1.tsx | 137 +++++++++++++++++++++++----------------
 1 file changed, 80 insertions(+), 57 deletions(-)

diff --git a/pages/room/add/step1.tsx b/pages/room/add/step1.tsx
index ace3928..79878d3 100644
--- a/pages/room/add/step1.tsx
+++ b/pages/room/add/step1.tsx
@@ -60,29 +60,58 @@ export default function AddRoom() {
   const [selectedLocations, setSelectedLocations] = useState<GuDong[]>([]);
 
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
-    openModal({
-      props: {
-        title: 'Add room',
-        size: 'full',
-        custom: true,
-        customHeader: true,
-      },
-      children: <Step2 step1Data={data} />,
-    });
-  };
+    // openModal({
+    //   props: {
+    //     title: 'Add room',
+    //     size: 'full',
+    //     custom: true,
+    //     customHeader: true,
+    //   },
+    //   children: <Step2 step1Data={data} />,
+    // });
 
-  const isNextStep = () => {
-    return (
-      !watch('dong') ||
-      !watch('monthPrice') ||
-      !(watch('depositPrice') || watch('depositChecked')) ||
-      !(watch('availableChecked') || watch('dateAvailable')) ||
-      !((buttonState === 'YES' && watch('maintananceFee')) || buttonState === 'NO')
-    );
+    console.log('%c 🤩🤩🤩 영우의 로그 : ', 'font-size: x-large; color: #bada55;', '', data);
   };
 
+  // const isNextStep = () => {
+  //   return (
+  //     !watch('dong') ||
+  //     !watch('monthPrice') ||
+  //     !(watch('depositPrice') || watch('noDeposit')) ||
+  //     !(watch('availableNow') || watch('dateAvailable')) ||
+  //     !((buttonState === 'YES' && watch('maintananceFee')) || buttonState === 'NO')
+  //   );
+  // };
+
   const gu = watch('gu');
   const dong = watch('dong');
+  const monthPrice = watch('monthPrice');
+  const depositPrice = watch('depositPrice');
+  const noDeposit = watch('noDeposit');
+  const availableNow = watch('availableNow');
+  const dateAvailable = watch('dateAvailable');
+  const isUseMaintananceFee = watch('isUseMaintananceFee');
+  const maintananceFee = watch('maintananceFee');
+
+  const isDisabledNextStep = useMemo(() => {
+    return (
+      !dong ||
+      !monthPrice ||
+      (!noDeposit && !depositPrice) ||
+      (!availableNow && !dateAvailable) ||
+      (isUseMaintananceFee?.value === 'yes' && !maintananceFee)
+    );
+  }, [
+    availableNow,
+    dateAvailable,
+    depositPrice,
+    dong,
+    isUseMaintananceFee?.value,
+    maintananceFee,
+    monthPrice,
+    noDeposit,
+  ]);
+
   const filteredDongList = useMemo(() => {
     if (!gu) {
       return [];
@@ -165,7 +194,6 @@ export default function AddRoom() {
         )}
       </div>
 
-      {/* 구분선 */}
       <hr />
 
       {/* Monthly rent */}
@@ -190,29 +218,24 @@ export default function AddRoom() {
           <div className="text-g5 text-[12px] font-normal">Min 0 ￦ - Max 500,000,000 ￦</div>
         </div>
         <div className="mb-[16px]">
-          <Input
-            placeholder="Price"
-            type="number"
-            register={register('depositPrice')}
-            disabled={watch('depositChecked')}
-          />
+          <Input placeholder="Price" type="number" register={register('depositPrice')} disabled={watch('noDeposit')} />
         </div>
         <div className="grid grid-cols-2 gap-[8px] mt-[12px]">
-          <Checkbox type="outlined" label="No Deposit" register={register('depositChecked')} />
+          <Checkbox type="outlined" label="No Deposit" register={register('noDeposit')} />
         </div>
       </div>
 
       {/* Maintanance fee */}
-      <div>
-        <div className="mb-[4px] mt-[28px]">
-          <div className="mb-[10px]">
-            <div className={styles['sub-header']}> Maintanance fee</div>
-          </div>
-        </div>
-        <div className="mb-[24px]">
-          <MultiButton options={MAINTANANCE_FEE_OPTIONS} register={register('maintananceFee')} />
+      <div className="mb-[4px] mt-[28px]">
+        <div className="mb-[10px]">
+          <div className={styles['sub-header']}> Maintanance fee</div>
         </div>
-        {watch('maintananceFee')?.value === 'yes' && (
+      </div>
+      <div className="mb-[24px]">
+        <MultiButton options={MAINTANANCE_FEE_OPTIONS} register={register('isUseMaintananceFee')} />
+      </div>
+      {watch('isUseMaintananceFee')?.value === 'yes' && (
+        <>
           <div className="mb-[16px]">
             <Input
               placeholder={filterTranslation.t('Price') as string}
@@ -220,26 +243,26 @@ export default function AddRoom() {
               register={register('maintananceFee')}
             />
           </div>
-        )}
 
-        {/* Maintanance fee - Included */}
-        <div className="mb-[16px]">
-          <div className="text-g5 text-[12px] font-normal">Included (optional)</div>
-        </div>
-        <div className="grid grid-cols-2 gap-[8px] mt-[12px] mb-[40px]">
-          {INCLUDE_OPTIONS.map((item) => {
-            return (
-              <Checkbox
-                key={item.value}
-                type="outlined"
-                label={item.label}
-                register={register(item.value)}
-                checked={watch(item.value)}
-              />
-            );
-          })}
-        </div>
-      </div>
+          {/* Maintanance fee - Included */}
+          <div className="mb-[16px]">
+            <div className="text-g5 text-[12px] font-normal">Included (optional)</div>
+          </div>
+          <div className="grid grid-cols-2 gap-[8px] mt-[12px] mb-[40px]">
+            {INCLUDE_OPTIONS.map((item) => {
+              return (
+                <Checkbox
+                  key={item.value}
+                  type="outlined"
+                  label={item.label}
+                  register={register(item.value)}
+                  checked={watch(item.value)}
+                />
+              );
+            })}
+          </div>
+        </>
+      )}
 
       <hr />
 
@@ -253,11 +276,11 @@ export default function AddRoom() {
           placeholder="MM-DD-YYYY"
           type="text"
           register={register('dateAvailable')}
-          disabled={watch('availableChecked')}
+          disabled={watch('availableNow')}
         />
       </section>
       <div className={`grid grid-cols-2 gap-[8px] ${isCalendarShow ? 'mb-[533px]' : 'mb-[166px]'} `}>
-        <Checkbox type="outlined" label="Available now" register={register('availableChecked')} />
+        <Checkbox type="outlined" label="Available now" register={register('availableNow')} />
       </div>
       <div className="fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
         <div className="w-full">
@@ -265,7 +288,7 @@ export default function AddRoom() {
             <Button
               size="lg"
               type="submit"
-              disabled={isNextStep()}
+              disabled={isDisabledNextStep}
               onClick={() => {
                 watch('dateAvailable');
               }}

From 2336d3799dce8c10671fe63790be457e7abad7d1 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sun, 1 Oct 2023 00:59:12 +0900
Subject: [PATCH 11/12] =?UTF-8?q?=EC=9D=BC=EB=8B=A8=20=EC=A0=84=EB=B6=80?=
 =?UTF-8?q?=20=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/room-dev.ts              |  14 ++++
 api/room.ts                  |  17 ++---
 pages/index.tsx              |  22 +++---
 pages/room/[id].tsx          |   2 +-
 pages/room/add/step1.tsx     |  57 +++++++--------
 pages/room/add/step2.tsx     |  13 ++++
 pages/room/addRoom/step3.tsx | 136 ++++++++++++++++-------------------
 public/types/room.ts         |  19 +++--
 utils/transform.ts           |   4 ++
 9 files changed, 146 insertions(+), 138 deletions(-)
 create mode 100644 api/room-dev.ts
 create mode 100644 pages/room/add/step2.tsx

diff --git a/api/room-dev.ts b/api/room-dev.ts
new file mode 100644
index 0000000..59d44c9
--- /dev/null
+++ b/api/room-dev.ts
@@ -0,0 +1,14 @@
+import { Room, RoomPost } from '@/public/types/room';
+import { fetchData } from './index-dev';
+
+export const fetchRooms = async () => {
+  return fetchData<Room[]>('/api/room');
+};
+
+export const fetchRoom = async (id: string) => {
+  return fetchData<Room>(`/api/room/${id}`);
+};
+
+export const fetchPostRoom = async (data: RoomPost) => {
+  return fetchData<RoomPost>(`/api/v1/rooms`);
+};
diff --git a/api/room.ts b/api/room.ts
index 85327b4..803aa0b 100644
--- a/api/room.ts
+++ b/api/room.ts
@@ -1,15 +1,6 @@
-import { Room, RoomPost } from '@/public/types/room';
-import { fetchData } from './index-dev';
+import { Furnishing } from '@/public/types/room';
+import { fetchData } from './index';
 
-
-export const fetchRooms = async () => {
-  return fetchData<Room[]>('/api/room');
-};
-
-export const fetchRoom = async (id: string) => {
-  return fetchData<Room>(`/api/room/${id}`);
+export const fetchFurnishings = async () => {
+  return fetchData<Furnishing[]>('/api/v1/furnishings');
 };
-
-export const fetchPostRoom = async(data: RoomPost) => {
-  return fetchData<RoomPost>(`/api/v1/rooms`);
-}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 9655f74..f472c34 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import 'tailwindcss/tailwind.css';
 import RoomCard from '@/components/RoomCard/RoomCard';
-import { fetchRooms } from '@/api/room';
+import { fetchRooms } from '@/api/room-dev';
 import { Room } from '@/public/types/room';
 import { NextPage, NextPageContext } from 'next';
 import RoomListLayout from '@/components/layouts/RoomListLayout.tsx';
@@ -43,7 +43,7 @@ function Home() {
     setFilters(() => [...resultFilter]);
   };
 
-  const makeSubmitParam = (data: FieldValues) : FilterType  => {
+  const makeSubmitParam = (data: FieldValues): FilterType => {
     const typeOfHousings = ['studioChecked', 'bedFlatsChecked', 'shareHouseChecked'];
     const furnishings = [
       'bedChecked',
@@ -56,7 +56,7 @@ function Home() {
       'doorLockChecked',
       'tvChecked',
       'kitchenetteChecked',
-      'heaterChecked'
+      'heaterChecked',
     ];
 
     let typeOfHousing = false;
@@ -64,7 +64,7 @@ function Home() {
     let monthRent = false;
     let deposit = false;
     let location = false;
-    let dateAvailable = false
+    let dateAvailable = false;
 
     // typeOfHousing 중 하나라도 체크되면 true
     typeOfHousings.forEach((key) => {
@@ -139,20 +139,20 @@ function Home() {
     let result = false;
     if ((clickedChip || '') !== '' && filters.length > 1) {
       result = filters[0] === option;
-    } else if (filters.length === 1 ) {
-      result = option === filters[0]
+    } else if (filters.length === 1) {
+      result = option === filters[0];
     }
     return result;
   };
   // 옵션 제거 시 실행될 함수
   const handleOptionRemove = (option: string, index: number) => {
-    const resultFilters = filters.filter( (item) => item !== option);
+    const resultFilters = filters.filter((item) => item !== option);
     setFilters(() => [...resultFilters]);
 
     // 선택된 칩이 없거나 클릭된 칩이 삭제된 칩인 경우에 맨 처음 칩을 clickedChip으로 설정
-    //if ((clickedChip || '' )  === '' ||  selectedOptions.length !== filters.length) {
-      if ((clickedChip || '' )  === '') {
-        setClickedChip(filters?.[0]);
+    // if ((clickedChip || '' )  === '' ||  selectedOptions.length !== filters.length) {
+    if ((clickedChip || '') === '') {
+      setClickedChip(filters?.[0]);
     }
   };
 
@@ -184,7 +184,7 @@ function Home() {
       </Typography>
       {rooms.map((room, idx) => (
         // Nav 영역 맨 마지막 부분 잘리는 문제로 추가
-        <div className={`mt-[20px] ${rooms.length-1 === idx ? 'mb-[83px]': ''}`}  key={`room-${idx}`}>
+        <div className={`mt-[20px] ${rooms.length - 1 === idx ? 'mb-[83px]' : ''}`} key={`room-${idx}`}>
           <RoomCard room={room} onClick={() => handleCardClick(idx)} />
         </div>
       ))}
diff --git a/pages/room/[id].tsx b/pages/room/[id].tsx
index 9857571..8a3e0d6 100644
--- a/pages/room/[id].tsx
+++ b/pages/room/[id].tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Button, Header, Space } from '@/components/index.tsx';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
-import { fetchRoom } from '@/api/room';
+import { fetchRoom } from '@/api/room-dev';
 import { useRouter } from 'next/router';
 import { ROOM_TYPE, Room } from '@/public/types/room';
 import { formatAge, formatDate, formatPrice } from '@/utils/transform';
diff --git a/pages/room/add/step1.tsx b/pages/room/add/step1.tsx
index 79878d3..4965364 100644
--- a/pages/room/add/step1.tsx
+++ b/pages/room/add/step1.tsx
@@ -9,6 +9,10 @@ import Step2 from '@/pages/room/addRoom/step2.tsx';
 import DefaultLayout from '@/components/layouts/DefaultLayout';
 import toast from 'react-hot-toast';
 import MultiButton from '@/components/MultiButton/MultiButton';
+import { useRouter } from 'next/router';
+import { formatDateForAPI } from '@/utils/transform';
+import { Furnishing } from '@/public/types/room';
+import { fetchFurnishings } from '@/api/room';
 import styles from './add.module.scss';
 
 interface GuDong2 extends Option {
@@ -52,37 +56,30 @@ const INCLUDE_OPTIONS = [
 ];
 
 export default function AddRoom() {
-  const { openModal } = useModal();
-  const filterTranslation = useTranslation('filter');
   const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
-  const [buttonState, setButtonState] = useState('YES');
-  const [isCalendarShow, setCalendarShow] = useState(false);
   const [selectedLocations, setSelectedLocations] = useState<GuDong[]>([]);
+  const router = useRouter();
+  const [furnishings, setFurnishings] = useState<Furnishing[]>([]);
 
-  const onSubmit: SubmitHandler<FieldValues> = (data) => {
-    // openModal({
-    //   props: {
-    //     title: 'Add room',
-    //     size: 'full',
-    //     custom: true,
-    //     customHeader: true,
-    //   },
-    //   children: <Step2 step1Data={data} />,
-    // });
+  const data = await fetchFurnishings();
 
-    console.log('%c 🤩🤩🤩 영우의 로그 : ', 'font-size: x-large; color: #bada55;', '', data);
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    const params = {
+      locationId: data.dong.value,
+      monthlyRent: data.monthPrice,
+      deposit: data.depositPrice,
+      maintananceFee: data.maintananceFee,
+      availableDate: formatDateForAPI(data.dateAvailable),
+    };
+    router.push(
+      {
+        pathname: '/room/add/step2',
+        query: { data: JSON.stringify(params) },
+      },
+      '/room/add/step2'
+    );
   };
 
-  // const isNextStep = () => {
-  //   return (
-  //     !watch('dong') ||
-  //     !watch('monthPrice') ||
-  //     !(watch('depositPrice') || watch('noDeposit')) ||
-  //     !(watch('availableNow') || watch('dateAvailable')) ||
-  //     !((buttonState === 'YES' && watch('maintananceFee')) || buttonState === 'NO')
-  //   );
-  // };
-
   const gu = watch('gu');
   const dong = watch('dong');
   const monthPrice = watch('monthPrice');
@@ -237,11 +234,7 @@ export default function AddRoom() {
       {watch('isUseMaintananceFee')?.value === 'yes' && (
         <>
           <div className="mb-[16px]">
-            <Input
-              placeholder={filterTranslation.t('Price') as string}
-              type="number"
-              register={register('maintananceFee')}
-            />
+            <Input placeholder="Price" type="number" register={register('maintananceFee')} />
           </div>
 
           {/* Maintanance fee - Included */}
@@ -279,7 +272,7 @@ export default function AddRoom() {
           disabled={watch('availableNow')}
         />
       </section>
-      <div className={`grid grid-cols-2 gap-[8px] ${isCalendarShow ? 'mb-[533px]' : 'mb-[166px]'} `}>
+      <div className="grid grid-cols-2 gap-[8px] mb-[166px]">
         <Checkbox type="outlined" label="Available now" register={register('availableNow')} />
       </div>
       <div className="fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
@@ -293,7 +286,7 @@ export default function AddRoom() {
                 watch('dateAvailable');
               }}
             >
-              {filterTranslation.t('Next')}
+              Next
             </Button>
           </div>
         </div>
diff --git a/pages/room/add/step2.tsx b/pages/room/add/step2.tsx
new file mode 100644
index 0000000..3c5aa63
--- /dev/null
+++ b/pages/room/add/step2.tsx
@@ -0,0 +1,13 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+function Step2() {
+  const router = useRouter();
+  const { query } = router;
+  const data = JSON.parse(query.data as string);
+  console.log('%c 🤩🤩🤩 영우의 로그 : ', 'font-size: x-large; color: #bada55;', data);
+
+  return <div>step2</div>;
+}
+
+export default Step2;
diff --git a/pages/room/addRoom/step3.tsx b/pages/room/addRoom/step3.tsx
index 01e8576..e7def2a 100644
--- a/pages/room/addRoom/step3.tsx
+++ b/pages/room/addRoom/step3.tsx
@@ -1,36 +1,29 @@
 import React, { useState } from 'react';
-import { ImageListType } from "react-images-uploading";
+import { ImageListType } from 'react-images-uploading';
 import ModalBox from '@/components/Modal/ModalBox.tsx';
-import {
-  Stepper,
-  Textarea,
-  Typography,
-  Button,
-  Upload
-} from '@/components/index.tsx';
+import { Stepper, Textarea, Typography, Button, Upload } from '@/components/index.tsx';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
-import { fetchPostRoom } from '@/api/room';
-
+import { fetchPostRoom } from '@/api/room-dev';
 
 // TODO 요기 any 인거 나중에 타입에 맞게 바꿔줘야함...
 interface Step2Props {
   step1Data?: any;
   step2Data?: any;
-};
+}
 
 enum RoomNumber {
-  ONE = "ONE",
-  TWO = "TWO",
-  THREE = "THREE",
-  FOUR = "FOUR",
-  FIVE = "FIVE",
-  SIX = "SIX",
-  SIX_OR_OVER = "SIX_OR_OVER",
-  UNKNOWN_NUMBER = "UNKNOWN_NUMBER"
-};
+  ONE = 'ONE',
+  TWO = 'TWO',
+  THREE = 'THREE',
+  FOUR = 'FOUR',
+  FIVE = 'FIVE',
+  SIX = 'SIX',
+  SIX_OR_OVER = 'SIX_OR_OVER',
+  UNKNOWN_NUMBER = 'UNKNOWN_NUMBER',
+}
 
-/***
+/** *
  * @see   룸등록 Step3
  */
 export default function Step3({ step1Data, step2Data }: Step2Props) {
@@ -40,47 +33,47 @@ export default function Step3({ step1Data, step2Data }: Step2Props) {
   const router = useRouter();
 
   const numberToStringMapping: { [key: number]: string } = {
-    1: "ONE",
-    2: "TWO",
-    3: "THREE",
-    4: "FOUR",
-    5: "FIVE",
-    6: "SIX"
+    1: 'ONE',
+    2: 'TWO',
+    3: 'THREE',
+    4: 'FOUR',
+    5: 'FIVE',
+    6: 'SIX',
   };
 
-  const numberToString = (num: number): string  =>{
-    if (num >= 6) return "SIX_OR_OVER";
-    return numberToStringMapping[num] || "UNKNOWN_NUMBER";
-  }
+  const numberToString = (num: number): string => {
+    if (num >= 6) return 'SIX_OR_OVER';
+    return numberToStringMapping[num] || 'UNKNOWN_NUMBER';
+  };
 
   // TODO any 인거 나중에 바꿔주자
   const makeRoomPostParams = (step1Data: any, step2Data: any, imgageList: any, data: any) => {
-    let result = {
+    const result = {
       // step1
-      locationId: 0 // TEST
-      , monthlyRent: 0
-      , availableDate: "2023-09-27"
-      , deposit: 0
-      , maintenanceFee: 0
-      , gasIncluded: true
-      , waterIncluded: true
-      , electricityIncluded: true
-      , cleaningIncluded: true
-      , furnishingIds: [0]
+      locationId: 0, // TEST
+      monthlyRent: 0,
+      availableDate: '2023-09-27',
+      deposit: 0,
+      maintenanceFee: 0,
+      gasIncluded: true,
+      waterIncluded: true,
+      electricityIncluded: true,
+      cleaningIncluded: true,
+      furnishingIds: [0],
+
+      // step2
+      roomType: step2Data.roomType,
+      bedrooms: RoomNumber.ONE,
+      bathrooms: RoomNumber.ONE,
+      roommates: RoomNumber.ONE,
 
-      //step2
-      , roomType: step2Data.roomType
-      , bedrooms: RoomNumber.ONE
-      , bathrooms: RoomNumber.ONE
-      , roommates: RoomNumber.ONE
-      
       // step3
-      , description: watch('description')
-      , imageIds: [0] // TEST
+      description: watch('description'),
+      imageIds: [0], // TEST
     };
 
     return result;
-  }
+  };
 
   const onSubmit: SubmitHandler<FieldValues> = async (data) => {
     console.log('step1Data', step1Data);
@@ -94,15 +87,15 @@ export default function Step3({ step1Data, step2Data }: Step2Props) {
   };
   const callbackImageList = (_imageList: ImageListType) => {
     setImageList(_imageList);
-  }
-  const roomPostComplete =  () => {
+  };
+  const roomPostComplete = () => {
     try {
       // 라우팅이 안되요,,,, const result = router.push('/');.......
-      window.location.href= window.location.origin;
-    } catch(error) {
+      window.location.href = window.location.origin;
+    } catch (error) {
       console.error('routingError', error);
     }
-  }
+  };
 
   return (
     <>
@@ -125,13 +118,9 @@ export default function Step3({ step1Data, step2Data }: Step2Props) {
             </Typography>
           </div>
           {/* 업로드 버튼으로 사용될 SVG */}
-          <Upload 
-            callbackImageFn={callbackImageList}
-            InitImageComponent={null}
-            multiImage={true}
-          />
+          <Upload callbackImageFn={callbackImageList} InitImageComponent={null} multiImage />
 
-          <hr className="mt-[32px]"/>
+          <hr className="mt-[32px]" />
 
           <div className="mt-[30px]">
             <Typography variant="body" customClassName="text-[16px] font-bold text-g7 mb-[12px]">
@@ -139,7 +128,7 @@ export default function Step3({ step1Data, step2Data }: Step2Props) {
             </Typography>
           </div>
           <div>
-            <Textarea placeholder={"Describe your house to others!"} register={register('description')} maxByte={3000} />
+            <Textarea placeholder="Describe your house to others!" register={register('description')} maxByte={3000} />
           </div>
           <div className="mt-[111px] fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
             <div className="w-full">
@@ -151,17 +140,16 @@ export default function Step3({ step1Data, step2Data }: Step2Props) {
             </div>
           </div>
         </form>
-        {
-          showComplete&&
-            <ModalBox
-              title="Congratulation!"
-              content="Your room is now added to the list!"
-              buttonType="default"
-              buttonName="Complete"
-              overlayClose
-              handleClose={roomPostComplete}
-            />
-        }
+        {showComplete && (
+          <ModalBox
+            title="Congratulation!"
+            content="Your room is now added to the list!"
+            buttonType="default"
+            buttonName="Complete"
+            overlayClose
+            handleClose={roomPostComplete}
+          />
+        )}
       </div>
     </>
   );
diff --git a/public/types/room.ts b/public/types/room.ts
index ce088a0..0c0043a 100644
--- a/public/types/room.ts
+++ b/public/types/room.ts
@@ -25,13 +25,13 @@ export interface Room {
 
 export interface RoomPost {
   locationId: number;
-  roomType: "STUDIO" | "ONE_BED_FLATS" | "SHARE_HOUSE";
-  //bedrooms: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX_OR_OVER";
+  roomType: 'STUDIO' | 'ONE_BED_FLATS' | 'SHARE_HOUSE';
+  // bedrooms: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX_OR_OVER";
   bedrooms: string;
   bathrooms: string;
   roommates: string;
-  //bathrooms: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX" | "SIX_OR_OVER";
-  //roommates: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX" | "SIX_OR_OVER";
+  // bathrooms: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX" | "SIX_OR_OVER";
+  // roommates: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "SIX" | "SIX_OR_OVER";
   deposit: number;
   monthlyRent: number;
   maintenanceFee: number;
@@ -40,8 +40,13 @@ export interface RoomPost {
   electricityIncluded: boolean;
   cleaningIncluded: boolean;
   furnishingIds: Array<number>;
-  //availableDate: Date;
+  // availableDate: Date;
   availableDate: string;
   description: string;
-  imageIds : Array<number>;
-}
\ No newline at end of file
+  imageIds: Array<number>;
+}
+
+export interface Furnishing {
+  id: number;
+  desc: string;
+}
diff --git a/utils/transform.ts b/utils/transform.ts
index 69db3e4..b4a9479 100644
--- a/utils/transform.ts
+++ b/utils/transform.ts
@@ -12,3 +12,7 @@ export const formatAge = (year: number) => {
 export const formatDate = (date: string) => {
   return format(new Date(date), 'MMM dd yyyy');
 };
+
+export const formatDateForAPI = (date: string) => {
+  return format(new Date(date), 'yyyy-MM-dd');
+};

From 3bfcad75fb883afbd91cdedfca391bf71f145ea4 Mon Sep 17 00:00:00 2001
From: ywlee <zestlee1106@gmail.com>
Date: Sun, 1 Oct 2023 01:11:48 +0900
Subject: [PATCH 12/12] =?UTF-8?q?[feat]=20furnishing=20=EC=9D=84=20api=20?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/room/add/step1.tsx | 84 ++++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/pages/room/add/step1.tsx b/pages/room/add/step1.tsx
index 4965364..91d35b5 100644
--- a/pages/room/add/step1.tsx
+++ b/pages/room/add/step1.tsx
@@ -1,25 +1,16 @@
-import React, { useState, useEffect, useCallback, use, useMemo } from 'react';
-import { useTranslation } from 'next-i18next';
-import useModal from '@/hooks/useModal.ts';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Stepper, Chip, Select, Typography, Checkbox, Button, Input, Calendar } from '@/components/index.tsx';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
 import { GuList, DongList } from '@/public/js/guDongList.ts';
 import { Option } from '@/components/Select/Select';
-import Step2 from '@/pages/room/addRoom/step2.tsx';
 import DefaultLayout from '@/components/layouts/DefaultLayout';
 import toast from 'react-hot-toast';
 import MultiButton from '@/components/MultiButton/MultiButton';
 import { useRouter } from 'next/router';
 import { formatDateForAPI } from '@/utils/transform';
-import { Furnishing } from '@/public/types/room';
 import { fetchFurnishings } from '@/api/room';
 import styles from './add.module.scss';
 
-interface GuDong2 extends Option {
-  gu: string | number;
-  guLabel: string;
-}
-
 interface GuDong {
   gu: Option;
   dong: Option;
@@ -36,40 +27,49 @@ const MAINTANANCE_FEE_OPTIONS = [
   },
 ];
 
-const INCLUDE_OPTIONS = [
-  {
-    value: 'gasChecked',
-    label: 'Gas',
-  },
-  {
-    value: 'waterChecked',
-    label: 'Water',
-  },
-  {
-    value: 'electricityChecked',
-    label: 'Electricity',
-  },
-  {
-    value: 'cleaningChecked',
-    label: 'Cleaning',
-  },
-];
-
 export default function AddRoom() {
   const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
   const [selectedLocations, setSelectedLocations] = useState<GuDong[]>([]);
   const router = useRouter();
-  const [furnishings, setFurnishings] = useState<Furnishing[]>([]);
+  const [furnishings, setFurnishings] = useState<Option[] | null>([]);
+
+  const getFurnishings = async () => {
+    try {
+      const data = await fetchFurnishings();
 
-  const data = await fetchFurnishings();
+      if (!data) {
+        return;
+      }
+
+      const mappedFurnishing = data.map((item) => {
+        return {
+          value: item.id,
+          label: item.desc,
+        };
+      });
+
+      setFurnishings(mappedFurnishing);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    getFurnishings();
+  }, []);
 
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    const furnishingIds = Object.keys(data)
+      .filter((key) => key.includes('furnishing-') && data[key])
+      .map((key) => key.replace(/^furnishing-/, ''));
+
     const params = {
       locationId: data.dong.value,
       monthlyRent: data.monthPrice,
       deposit: data.depositPrice,
       maintananceFee: data.maintananceFee,
       availableDate: formatDateForAPI(data.dateAvailable),
+      furnishingIds,
     };
     router.push(
       {
@@ -242,17 +242,17 @@ export default function AddRoom() {
             <div className="text-g5 text-[12px] font-normal">Included (optional)</div>
           </div>
           <div className="grid grid-cols-2 gap-[8px] mt-[12px] mb-[40px]">
-            {INCLUDE_OPTIONS.map((item) => {
-              return (
-                <Checkbox
-                  key={item.value}
-                  type="outlined"
-                  label={item.label}
-                  register={register(item.value)}
-                  checked={watch(item.value)}
-                />
-              );
-            })}
+            {furnishings &&
+              furnishings.map((item) => {
+                return (
+                  <Checkbox
+                    key={item.value}
+                    type="outlined"
+                    label={item.label}
+                    register={register(`furnishing-${item.value}`)}
+                  />
+                );
+              })}
           </div>
         </>
       )}