Merge pull request #157 from bsideproject/moon

[feat] Room 등록 부분 수정 (router -> Modal)
bsideproject · Sep 21, 2023 · 05fa4a9 · 05fa4a9
2 parents 51910bf + a855445
commit 05fa4a9
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 90 deletions.
diff --git a/components/File/FileUpload.tsx b/components/File/FileUpload.tsx
@@ -2,18 +2,19 @@ import React, { forwardRef, useEffect, useImperativeHandle } from "react";
 import ImageUploading, { ImageListType } from "react-images-uploading";
 import Rectangle from '@/public/icons/rectangle.svg';
 import RectangleCamera from '@/public/icons/rectangleCamera.svg';
-import Close2 from '@/public/icons/close2.svg';
 
+interface FileUploadProps {
+  callbackImageFn?: (imageList: ImageListType) => void;
+};
 
-export default function FileUpload() {
+export default function FileUpload({ callbackImageFn }: FileUploadProps) {
   const [images, setImages] = React.useState<ImageListType>([]);
   const maxNumber = 5;
-
+  
   const onChange = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => {
-    console.log(imageList, addUpdateIndex);
     setImages(imageList);
-
-   };
+    callbackImageFn?.(imageList);
+  };
 
   return (
     <div className="App">
@@ -27,7 +28,6 @@ export default function FileUpload() {
         {({
           imageList,
           onImageUpload,
-          onImageRemoveAll,
           onImageUpdate,
           onImageRemove,
           isDragging,

diff --git a/components/layouts/RoomListLayout.tsx b/components/layouts/RoomListLayout.tsx
@@ -1,13 +1,9 @@
-import React, { useState, useEffect, useCallback, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import Header from '@/components/Header/Header.tsx';
 import useModal from '@/hooks/useModal.ts';
-import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { GetStaticPropsContext } from 'next';
-import { Toast, Chip, Select, Typography, Toggle, Checkbox, Button, Input } from '@/components/index.tsx';
-import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
 import Step1 from '@/pages/room/addRoom/step1.tsx';
-import { GuList, DongList } from '../../public/js/guDongList.ts';
 
 interface AppLayoutProps {
   children: ReactNode;
@@ -20,7 +16,7 @@ export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
 });
 
 function RoomListLayout({ children }: AppLayoutProps) {
-  const { openModal } = useModal();
+  const { openModal, closeModal } = useModal();
   const handleButtonClick = () => {
     openModal({
       props: {
@@ -29,7 +25,7 @@ function RoomListLayout({ children }: AppLayoutProps) {
         custom: true,
         customHeader: true,
       },
-      children: <Step1 />,
+      children: <Step1 closeModal1={closeModal} />,
     });
   };
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -27,12 +27,10 @@ type HomeProps = NextPage & {
 };
 
 function Home() {
-  const roomListTranslation = useTranslation('roomList');
   const commonTranslation = useTranslation('common');
-
   const [rooms, setRooms] = useState<Room[]>([]);
   const [filters, setFilters] = useState<string[]>([]);
-  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  // const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const [clickedChip, setClickedChip] = useState('');
   const router = useRouter();
   const { openModal, closeModal } = useModal();
@@ -160,8 +158,9 @@ function Home() {
     setFilters(() => [...resultFilters]);
 
     // 선택된 칩이 없거나 클릭된 칩이 삭제된 칩인 경우에 맨 처음 칩을 clickedChip으로 설정
-    if ((clickedChip || '' )  === '' ||  selectedOptions.length !== filters.length) {
-      setClickedChip(filters?.[0]);
+    //if ((clickedChip || '' )  === '' ||  selectedOptions.length !== filters.length) {
+      if ((clickedChip || '' )  === '') {
+        setClickedChip(filters?.[0]);
     }
   };
 

diff --git a/pages/room/addRoom/step1.tsx b/pages/room/addRoom/step1.tsx
@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { GetStaticPropsContext } from 'next';
-import Router, { useRouter } from 'next/router';
+import useModal from '@/hooks/useModal.ts';
 import {
   Stepper,
   Chip,
@@ -17,16 +15,16 @@ import { GuList, DongList } from '@/public/js/guDongList.ts';
 import { Option } from '@/components/Select/Select';
 import { GuDong } from '../addRoom';
 import Calendar from '@/components/Calendar/Calendar.tsx';
+import Step2 from '@/pages/room/addRoom/step2.tsx'
 
-export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
-  props: {
-    ...(await serverSideTranslations(locale as string, ['filter', 'common'])),
-  },
-});
+interface roomAddProps {
+  closeModal1?: () => void;
+}
 
-export default function Step1() {
+export default function Step1({ closeModal1 }: roomAddProps) {
+  const { openModal, closeModal } = useModal();
   const filterTranslation = useTranslation('filter');
-  const { register, handleSubmit, watch, setValue } = useForm({ mode: 'onChange' });
+  const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
   const [buttonState, setButtonState] = useState('YES');
   const [isCalendarShow, setCalendarShow] = useState(false);
 
@@ -44,13 +42,15 @@ export default function Step1() {
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const filteredDongList = DongList.filter((v) => v.gu === guValue?.value || '');
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
-    Router.push(
-      {
-      pathname: '/room/addRoom/step2',
-      query: { ...data },
-    },
-    '/room/addRoom/step2'
-    )
+    openModal({
+      props: {
+        title: 'Add room',
+        size: 'full',
+        custom: true,
+        customHeader: true,
+      },
+      children: <Step2 step1Data={data} />,
+    });
   };
 
   // 옵션 선택 시 실행될 함수, 유효성 검증
@@ -59,6 +59,7 @@ export default function Step1() {
 
     let resultOptions: string[];
     const option = dongValue.label;
+
     setSelectedOptions((prevSelectedOptions) => {
       const isExist = prevSelectedOptions.some((item) => item.includes(option));
       // Location이 5개 이상 선택 될 경우 Toast 노출
@@ -70,26 +71,24 @@ export default function Step1() {
       if (!isExist) {
         resultOptions = [...prevSelectedOptions, guValue?.label.concat(`, ${option}`)];
       } else {
-        // TODO translation 사용해서 여기 나중에 바꿔줘야함
         resultOptions = prevSelectedOptions;
       }
       return [...resultOptions];
     });
   }, [dongValue.label, guValue?.label]);
-  /** Dong Select Component 변경될 경우 -> 일반 선언형 함수로 정의할 경우 Rendering 마다 새로운 인스턴스가 생성됨 */
+
   const handleDongChange = useCallback(
     (option: Option) => {
       // 선택된 value와 label 값을 이용하여 원하는 작업 수행
       setDongValue({ ...option, gu: guValue.value, guLabel: guValue.label });
     },
     [guValue?.label, guValue?.value]
   );
-  /** Dong Select Component 변경될 경우 -> 일반 선언형 함수로 정의할 경우 Rendering 마다 새로운 인스턴스가 생성됨 */
+
   const handleGuChange = useCallback((option: Option) => {
-    // 선택된 value와 label 값을 이용하여 원하는 작업 수행
     setGuValue(option);
   }, []);
-  // 옵션 제거 시 실행될 함수
+
   const handleOptionRemove = (option: string) => {
     setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((item) => item !== option));
   };
@@ -112,6 +111,7 @@ export default function Step1() {
   useEffect(() => {
     handleOptionSelect();
   }, [dongValue.label, handleOptionSelect]);
+
   return (
     <>
       <Stepper step={1} totalStep={3} />

diff --git a/pages/room/addRoom/step2.tsx b/pages/room/addRoom/step2.tsx
@@ -1,7 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useTranslation } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { GetStaticPropsContext } from 'next';
+import React, { useState, useEffect } from 'react';
 import Router, { useRouter } from 'next/router';
 import {
   Stepper,
@@ -11,15 +8,15 @@ import {
   Button,
 } from '@/components/index.tsx';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
+import useModal from '@/hooks/useModal.ts';
+import Step3 from '@/pages/room/addRoom/step3.tsx'
 
-export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
-  props: {
-    ...(await serverSideTranslations(locale as string, ['filter', 'common'])),
-  },
-});
+interface Step2Props {
+  step1Data?: any;
+}
 
-export default function Step1() {
-  console.log('useRouter >>', useRouter());
+export default function Step2({ step1Data }: Step2Props) {
+  const { openModal, closeModal } = useModal();
   const { register, handleSubmit, watch, setValue  } = useForm({ mode: 'onChange' });
 
   const useButtonState = (initValue: string) => {
@@ -45,8 +42,18 @@ export default function Step1() {
   const [bedroomCount, setBedroomCount ] = useState(2);
   const [bathroomCount, setBathroomCount ] = useState(1);
   const [roommatesCount, setRoommatesCount ] = useState(0);
-  
+
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    openModal({
+      props: {
+        title: 'Add room',
+        size: 'full',
+        custom: true,
+        customHeader: true,
+      },
+      children: <Step3 step1Data={step1Data} step2Data={data} />,
+    });
+
     Router.push('/room/addRoom/step3');
   };
 
@@ -95,6 +102,11 @@ export default function Step1() {
     callbackCountUpdate(count);
   }
 
+  // useEffect(() => {
+  //   console.log('closeModal >>' , closeModal1);
+  //   closeModal1 && closeModal1();
+  // }, [])
+
   return (
     <>
       <Stepper step={2} totalStep={3} />
@@ -194,16 +206,16 @@ export default function Step1() {
             </div>
           </div>
           {
-            (ynButton === 'YES') && <div className="grid grid-cols-2 gap-[12px] mt-[16px]">
-              {
-               checkBoxes.map(item => (
-                <Checkbox
-                  type="outlined"
-                  label={item.label}
-                  register={register(item.name)}
-                  checked={watch(item.name)}
-                />
-               ))
+            <div className={`grid grid-cols-2 gap-[12px] mt-[16px] ${ynButton ? 'mb-[200px]' : 'mb-[166px]'}`}>
+              { 
+                ynButton === 'YES' && checkBoxes.map(item => (
+                  <Checkbox
+                    type="outlined"
+                    label={item.label}
+                    register={register(item.name)}
+                    checked={watch(item.name)}
+                  />
+                ))
               }
             </div>
           }

diff --git a/pages/room/addRoom/step3.tsx b/pages/room/addRoom/step3.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useRef } from 'react';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { GetStaticPropsContext } from 'next';
+import React, { useState } from 'react';
+import { ImageListType } from "react-images-uploading";
+import ModalBox from '@/components/Modal/ModalBox.tsx';
 import {
   Stepper,
   Textarea,
@@ -9,34 +9,37 @@ import {
   Upload
 } from '@/components/index.tsx';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
-import Rectangle from '@/public/icons/rectangle.svg';
-import RectangleCamera from '@/public/icons/rectangleCamera.svg';
+import Router, { useRouter } from 'next/router';
 
-export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
-  props: {
-    ...(await serverSideTranslations(locale as string, ['filter', 'common'])),
-  },
-});
 
-export default function Step1() {
+interface Step2Props {
+  step1Data?: any;
+  step2Data?: any;
+}
+
+/***
+ * @see   룸등록 Step3
+ */
+export default function Step3({ step1Data, step2Data }: Step2Props) {
   const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
-  const [showUpload, setShowUpload] = useState(false);
-  const uploadRef = useRef(null);
+  const [imageList, setImageList] = useState<ImageListType>([]);
+  const [showComplete, setShowComplete] = useState(false);
 
-
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
-    // 여기
+    console.log('step1 Data', step1Data);
+    console.log('step2 Data', step2Data);
+    console.log('step3 Data', data);
+
+    setShowComplete(true);
+    // roomPostComplete();
   };
 
-  const handleCameraClick = () => {
-    setShowUpload(true);
+  const callbackImageList = (_imageList: ImageListType) => {
+    setImageList(_imageList);
+  }
+  const roomPostComplete = () => {
+    Router.push('/');
   }
-
-  // callback
-  // const handleFilesAdded = (newImages: File[]) => {
-  //   // TODO: 여기서 새로 추가된 이미지를 처리하십시오.
-  //   console.log(newImages);
-  // }
 
   return (
     <>
@@ -59,7 +62,9 @@ export default function Step1() {
             </Typography>
           </div>
           {/* 업로드 버튼으로 사용될 SVG */}
-          <Upload />
+          <Upload 
+            callbackImageFn={callbackImageList}
+          />
 
           <hr className="mt-[32px]"/>
 
@@ -74,14 +79,24 @@ export default function Step1() {
           <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}>
-                  Next
+                <Button size="lg" type="submit" disabled={(imageList || []).length <= 0 || !watch('describe')}>
+                  Complete
                 </Button>
               </div>
             </div>
           </div>
-
         </form>
+        {
+          showComplete&&
+            <ModalBox
+              title="Congratulation!"
+              content="Your room is now added to the list!"
+              buttonType="default"
+              buttonName="Complete"
+              overlayClose
+              handleClose={roomPostComplete}
+            />
+        }
       </div>
     </>
   );