Merge pull request #175 from zestlee1106/feature/api-fix

Feature/api fix
bsideproject · Sep 30, 2023 · b630229 · b630229
2 parents 55c363b + 6201d1f
commit b630229
Show file tree

Hide file tree

Showing 14 changed files with 511 additions and 505 deletions.
diff --git a/api/roomProps.ts b/api/roomProps.ts
@@ -1,18 +1,18 @@
 export interface RoomPostProps {
-    locationId: string;
-    roomType: "STUDIO" | "ONE_BED_FLATS" | "SHARE_HOUSE";
-    bedrooms: "ONE" | "TWO" | "THREE" | "FOUR" | "FIVE" | "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;
-    gasIncluded: boolean;
-    waterIncluded: boolean;
-    electricityIncluded: boolean;
-    cleaningIncluded: boolean;
-    furnishingIds: Array<number>;
-    availableDate: Date;
-    description: string;
-    imageIds : Array<number>;
-}
+  locationId: string;
+  roomType: 'STUDIO' | 'ONE_BED_FLATS' | 'SHARE_HOUSE';
+  bedrooms: 'ONE' | 'TWO' | 'THREE' | 'FOUR' | 'FIVE' | '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;
+  gasIncluded: boolean;
+  waterIncluded: boolean;
+  electricityIncluded: boolean;
+  cleaningIncluded: boolean;
+  furnishingIds: Array<number>;
+  availableDate: Date;
+  description: string;
+  imageIds: Array<number>;
+}
diff --git a/components/File/FileUpload.tsx b/components/File/FileUpload.tsx
@@ -1,25 +1,25 @@
-import React, { ReactElement, ComponentType } from "react";
-import ImageUploading, { ImageListType } from "react-images-uploading";
+import React, { ReactElement, ComponentType } from 'react';
+import ImageUploading, { ImageListType } from 'react-images-uploading';
 import Rectangle from '@/public/icons/rectangle.svg';
 import RectangleCamera from '@/public/icons/rectangleCamera.svg';
 import styles from '@/components/File/FileUpload.module.scss';
 
 interface ImageComponentClickProps {
-  imageSrc : string;
-  onClick : () => void;
+  imageSrc: string;
+  onClick: () => void;
 }
 
 interface FileUploadProps {
   multiImage: boolean;
   callbackImageFn?: (imageList: ImageListType) => void;
   InitImageComponent: React.ComponentType<ImageComponentClickProps> | null;
-  style ?: 'center' | 'left' | 'default';
-};
+  style?: 'center' | 'left' | 'default';
+}
 
 export default function FileUpload({ callbackImageFn, InitImageComponent, multiImage, style }: FileUploadProps) {
   const [images, setImages] = React.useState<ImageListType>([]);
   const maxNumber = 5;
-  
+
   const onChange = (imageList: ImageListType) => {
     const lastImage = imageList.slice(-1);
     multiImage ? setImages(imageList) : setImages(lastImage);
@@ -28,53 +28,55 @@ export default function FileUpload({ callbackImageFn, InitImageComponent, multiI
 
   return (
     <div className="App">
-      { 
-        <ImageUploading
-            multiple
-            value={images}
-            onChange={onChange}
-            maxNumber={maxNumber}
-        >
-        {({
-          imageList,
-          onImageUpload,
-          onImageUpdate,
-          onImageRemove,
-          isDragging,
-          dragProps
-        }) => (
-          // write your building UI
-          <div className={`upload__image-wrapper ${styles[`${style || 'default'}`] }`}>
-            {
-              InitImageComponent === null ?
-              <div className={`relative w-[108px] h-[110px] mt-[8px]`} {...dragProps}> 
+      {
+        <ImageUploading multiple value={images} onChange={onChange} maxNumber={maxNumber}>
+          {({ imageList, onImageUpload, onImageUpdate, onImageRemove, isDragging, dragProps }) => (
+            // write your building UI
+            <div className={`upload__image-wrapper ${styles[`${style || 'default'}`]}`}>
+              {InitImageComponent === null ? (
+                <div className="relative w-[108px] h-[110px] mt-[8px]" {...dragProps}>
                   <Rectangle className="z-0" />
-                  <RectangleCamera 
-                    className={`absolute z-10 top-[45px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 hover:cursor-pointer ${isDragging ? "bg-r1": ""}`} 
-                    onClick={() => { (imageList || []).length < 5 && onImageUpload()}}
+                  <RectangleCamera
+                    className={`absolute z-10 top-[45px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 hover:cursor-pointer ${
+                      isDragging ? 'bg-r1' : ''
+                    }`}
+                    onClick={() => {
+                      (imageList || []).length < 5 && onImageUpload();
+                    }}
                   />
-                  <span className={`absolute z-10 top-[67px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 text-g4 semibold text-[12px] ${isDragging ? "text-r1": ""}`}>{(imageList || []).length}/{maxNumber}</span>
-              </div>
-              : <InitImageComponent imageSrc={(imageList || []).length > 0 ? imageList[0].dataURL || '': ''} onClick={onImageUpload}/>
-            }
-            &nbsp;
-            {/* <button onClick={onImageRemoveAll}>Remove all images</button> */}
-            { multiImage &&      
-              imageList.map((image, index) => (
-                <div key={index} className="image-item relative w-[108px] h-[108px] mt-[8px]">
-                  <img src={image.dataURL} alt="" className="top-0 left-0 w-full h-full object-cover" />
-                  <button 
-                    className="absolute top-0 right-0 bg-g5 text-g1 w-5 h-5 -translate-y-[0.5%] cursor-pointer leading-[4px]" 
-                    onClick={() => onImageRemove(index)}
-                  > x
-                  </button>
+                  <span
+                    className={`absolute z-10 top-[67px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 text-g4 semibold text-[12px] ${
+                      isDragging ? 'text-r1' : ''
+                    }`}
+                  >
+                    {(imageList || []).length}/{maxNumber}
+                  </span>
                 </div>
-              ))
-            }
-          </div>
-        )}
-      </ImageUploading>
-    }
+              ) : (
+                <InitImageComponent
+                  imageSrc={(imageList || []).length > 0 ? imageList[0].dataURL || '' : ''}
+                  onClick={onImageUpload}
+                />
+              )}
+              &nbsp;
+              {/* <button onClick={onImageRemoveAll}>Remove all images</button> */}
+              {multiImage &&
+                imageList.map((image, index) => (
+                  <div key={index} className="image-item relative w-[108px] h-[108px] mt-[8px]">
+                    <img src={image.dataURL} alt="" className="top-0 left-0 w-full h-full object-cover" />
+                    <button
+                      className="absolute top-0 right-0 bg-g5 text-g1 w-5 h-5 -translate-y-[0.5%] cursor-pointer leading-[4px]"
+                      onClick={() => onImageRemove(index)}
+                    >
+                      {' '}
+                      x
+                    </button>
+                  </div>
+                ))}
+            </div>
+          )}
+        </ImageUploading>
+      }
     </div>
   );
 }
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
@@ -3,14 +3,14 @@ import Like from '@/public/icons/like.svg';
 import Home from '@/public/icons/home.svg';
 import Chat from '@/public/icons/chat.svg';
 import Me from '@/public/icons/me.svg';
-import styles from './Nav.module.scss';
 import { useRouter } from 'next/router';
+import styles from './Nav.module.scss';
 
 const defaultStrokeColor = 'stroke-g4 stroke-[1.5px]';
 const activeStrokeColor = 'stroke-r1 stroke-[1.5px]';
 
 interface NavProps {
-  initMenu ?: number;
+  initMenu?: number;
 }
 
 const menus = [
@@ -32,18 +32,18 @@ const menus = [
   },
 ];
 
-export default function Nav({ initMenu } : NavProps) {
+export default function Nav({ initMenu }: NavProps) {
   const [activeMenu, setActiveMenu] = useState(initMenu || 0); // 초기 활성 메뉴 인덱스
   const [hoverMenu, setHoverMenu] = useState(-1); // 초기화
   const router = useRouter();
   const handleNavClicked = (index: number) => {
     setActiveMenu(index);
-    if (index ===0) {
+    if (index === 0) {
       router.push('/');
     } else if (index === 3) {
       router.push('userInfo');
     }
-  }
+  };
 
   return (
     <div className={`${styles.container} grid grid-cols-4 bg-g0 w-full h-[66px] text-center`}>