Merge pull request #136 from bsideproject/moon

[feat] Room 등록 Step2 껍데기 우선 커밋...
bsideproject · Sep 11, 2023 · 2ff7c36 · 2ff7c36
2 parents 471b02c + 92a26b6
commit 2ff7c36
Show file tree

Hide file tree

Showing 4 changed files with 229 additions and 16 deletions.
diff --git a/pages/room/addRoom/step1.tsx b/pages/room/addRoom/step1.tsx
@@ -40,15 +40,9 @@ export default function Step1() {
     label: '',
   });
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
-  const [showToast, setShowToast] = useState(false);
-  const [showMessage, setMessage] = useState<string>('');
-  const filteredDongList = DongList.filter((v) => v.gu === guValue.value);
+  const filteredDongList = DongList.filter((v) => v.gu === guValue?.value || '');
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
-    // durl
-  };
-
-  const handleToastVisibleChange = (visible: boolean) => {
-    setShowToast(visible);
+
   };
 
   // 옵션 선택 시 실행될 함수, 유효성 검증
@@ -61,18 +55,14 @@ export default function Step1() {
       const isExist = prevSelectedOptions.some((item) => item.includes(option));
       // Location이 5개 이상 선택 될 경우 Toast 노출
       if (prevSelectedOptions.length >= 5) {
-        setShowToast(true);
-        // TODO translation 사용해서 여기 나중에 바꿔줘야함
-        setMessage('You can select up to five');
+
         return [...prevSelectedOptions];
       }
 
       if (!isExist) {
         resultOptions = [...prevSelectedOptions, guValue?.label.concat(`, ${option}`)];
       } else {
-        setShowToast(true);
         // TODO translation 사용해서 여기 나중에 바꿔줘야함
-        setMessage('Already selected');
         resultOptions = prevSelectedOptions;
       }
       return [...resultOptions];
@@ -84,7 +74,7 @@ export default function Step1() {
       // 선택된 value와 label 값을 이용하여 원하는 작업 수행
       setDongValue({ ...option, gu: guValue.value, guLabel: guValue.label });
     },
-    [guValue.label, guValue.value]
+    [guValue?.label, guValue?.value]
   );
   /** Dong Select Component 변경될 경우 -> 일반 선언형 함수로 정의할 경우 Rendering 마다 새로운 인스턴스가 생성됨 */
   const handleGuChange = useCallback((option: Option) => {

diff --git a/pages/room/addRoom/step2.tsx b/pages/room/addRoom/step2.tsx
@@ -0,0 +1,223 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { GetStaticPropsContext } from 'next';
+import {
+  Stepper,
+  Select,
+  Typography,
+  Checkbox,
+  Button,
+} 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 { GuDong } from '../addRoom';
+
+export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
+  props: {
+    ...(await serverSideTranslations(locale as string, ['filter', 'common'])),
+  },
+});
+
+export default function Step1() {
+  const filterTranslation = useTranslation('filter');
+  const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
+  const [guValue, setGuValue] = useState<Option>({
+    value: '',
+    label: '',
+  });
+  // const modalSetter = React.useContext(ModalSetterContext);
+  const [dongValue, setDongValue] = useState<GuDong>({
+    gu: '',
+    guLabel: '',
+    value: '',
+    label: '',
+  });
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  const onSubmit: SubmitHandler<FieldValues> = (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 {
+        // TODO translation 사용해서 여기 나중에 바꿔줘야함
+        resultOptions = prevSelectedOptions;
+      }
+      return [...resultOptions];
+    });
+  }, [dongValue.label, guValue?.label]);
+
+  useEffect(() => {
+    handleOptionSelect();
+  }, [dongValue.label, handleOptionSelect]);
+
+  return (
+    <>
+      <Stepper step={2} totalStep={3} />
+      <div className="h-screen overflow-y-scroll">
+        <div className="mt-[9px] mb-[20px]" key="filter">
+          <Typography variant="header" fontStyle="semiBold">
+            Fill in the details
+          </Typography>
+        </div>
+        <form onSubmit={handleSubmit(onSubmit)} className="w-6/7 sm:w-1/2 md:w-3/7 lg:w-1/4 xl:w-1/5">
+          <div className="mb-[4px]">
+            <Typography variant="body" customClassName="text-[16px] font-bold text-g7">
+              Type of housing
+            </Typography>
+          </div>
+          <div className="mb-[13px]">
+            <div className="mb-3 grid grid-cols-3 gap-0 text-g0">
+              <div className="col-span-1 text-[16px] text-g0">
+                <Button size="lg" type="button" disabled={false}>
+                  Studio
+                </Button>
+              </div>
+              <div className="col-span-1 text-[16px] bg-g0">
+                <Button size="lg" type="button" disabled={false}>
+                  1bed flat
+                </Button>
+              </div>
+              <div className="col-span-1 text-[16px]">
+                <Button size="lg" type="button" disabled={false}>
+                  Share house
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="py-[28px]">
+            <div className="mb-[4px]">
+              <Typography variant="body" customClassName="text-[16px] font-bold text-g7">
+                House Information
+              </Typography>
+            </div>
+            <div className="flex justify-between items-center mb-[20px]">
+              <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
+                Total bedrooms
+              </Typography>
+            </div>
+            <div className="mb-[8px]">
+              <Select
+                options={[]}
+                register={register('dateAvailable')}
+                placeholder={"Select"}
+              />
+              <Select
+                options={[]}
+                register={register('dateAvailable')}
+                placeholder={"Select"}
+              />
+              <Select
+                options={[]}
+                register={register('dateAvailable')}
+                placeholder={"Select"}
+              />
+            </div>
+          </div>
+          <div className="flex justify-between items-center mb-[20px]">
+            <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
+              Total Roomates
+            </Typography>
+          </div>
+          <Select
+            options={[]}
+            register={register('dateAvailable')}
+            placeholder={"Select"}
+          />
+          <div className="mb-[4px]">
+            <Typography variant="body" customClassName="text-[16px] font-bold text-g7">
+              Furnishing
+            </Typography>
+          </div>
+          <div className="flex justify-between items-center mb-[20px]">
+            <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
+              Not furnished
+            </Typography>
+          </div>
+          <div className="grid grid-cols-2 gap-[8px] mt-[12px]">
+            <Checkbox
+              type="outlined"
+              label="Bed"
+              register={register('gasChecked')}
+              checked={watch('gasChecked')}
+            />
+            <Checkbox
+              type="outlined"
+              label="Wardrobe"
+              register={register('waterChecked')}
+              checked={watch('waterChecked')}
+            />
+            <Checkbox
+              type="outlined"
+              label="TV"
+              register={register('electricityChecked')}
+              checked={watch('electricityChecked')}
+            />
+            <Checkbox
+              type="outlined"
+              label="Air conditioner"
+              register={register('cleaningChecked')}
+              checked={watch('cleaningChecked')}
+            />
+             <Checkbox
+              type="outlined"
+              label="Heater"
+              register={register('electricityChecked')}
+              checked={watch('electricityChecked')}
+            />
+            <Checkbox
+              type="outlined"
+              label="Washing machine"
+              register={register('cleaningChecked')}
+              checked={watch('cleaningChecked')}
+            />
+             <Checkbox
+              type="outlined"
+              label="Stove"
+              register={register('electricityChecked')}
+              checked={watch('electricityChecked')}
+            />
+            <Checkbox
+              type="outlined"
+              label="Refrigerator"
+              register={register('cleaningChecked')}
+              checked={watch('cleaningChecked')}
+            />
+             <Checkbox
+              type="outlined"
+              label="Door lock"
+              register={register('electricityChecked')}
+              checked={watch('electricityChecked')}
+            />
+          </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">
+              <div className="mb-[13px]">
+                <Button size="lg" type="submit" disabled={false}>
+                  {filterTranslation.t('Next')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+}
diff --git a/public/locales/en/filter.json b/public/locales/en/filter.json
@@ -7,7 +7,7 @@
   "minMax": "Min 0 ￦ - Max 500,000,000 ￦ ",
   "min": "Min",
   "max": "Max",
-  "monthRent": "Monthly rent",
+  "monthlyRent": "Monthly rent",
   "includeMainFee": "Include maintenance fee",
   "dateAvailable": "Date available",
   "viewRooms": "View rooms available now",

diff --git a/public/locales/ko/filter.json b/public/locales/ko/filter.json
@@ -8,7 +8,7 @@
   "minMax": "Min 0 ￦ - Max 500,000,000 ￦ ",
   "min": "Min",
   "max": "Max",
-  "monthRent": "Monthly rent",
+  "monthlyRent": "Monthly rent",
   "includeMainFee": "Include maintenance fee",
   "dateAvailable": "Date available",
   "viewRoomsAvailable": "View rooms available now",