diff --git a/api/roomProps.ts b/api/roomProps.ts
index fb4a032..335b3fb 100644
--- 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>;
-}
\ No newline at end of file
+  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
index b6bedf5..084a4a9 100644
--- 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
index 9ffc401..46d6262 100644
--- 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`}>
diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx
index f1b49c1..c7ea5ad 100644
--- a/components/ProfileCard/index.tsx
+++ b/components/ProfileCard/index.tsx
@@ -11,105 +11,116 @@ import { useRouter } from 'next/router';
 import useModal from '@/hooks/useModal.ts';
 
 interface ProfileCardProps {
-    name : string;
-    age: number;
-    gender : 'Male' | 'Female';
-    imageSrc : string;
-};
+  name: string;
+  age: number;
+  gender: 'Male' | 'Female';
+  imageSrc: string;
+}
 
 interface ListItemProps {
-    IconComponent: React.FC<React.SVGProps<SVGSVGElement>>;
-    text: string;
-    route: string;
-    index: number;
-};
+  IconComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  text: string;
+  route: string;
+  index: number;
+}
 
 export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCardProps) {
-    const { register } = useForm({ mode: 'onChange' });
-    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-    const router = useRouter();
-    const { openModal, closeModal } = useModal();
+  const { register } = useForm({ mode: 'onChange' });
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const router = useRouter();
+  const { openModal, closeModal } = useModal();
 
-    const handleRouting = (route: string) => {
-        router.push(route);
-    }
+  const handleRouting = (route: string) => {
+    router.push(route);
+  };
 
-    const handleProfileEdit = () => {
-        openModal({
-            props: {
-              title: 'Edit profile',
-              size: 'full',
-              custom: true,
-              customHeader: true,
-            },
-            children: <EditProfile _imageSrc={`${imageSrc}`} />,
-          });
-    }
+  const handleProfileEdit = () => {
+    openModal({
+      props: {
+        title: 'Edit profile',
+        size: 'full',
+        custom: true,
+        customHeader: true,
+      },
+      children: <EditProfile _imageSrc={`${imageSrc}`} />,
+    });
+  };
 
-    const ListItem = ({ IconComponent, text, route, index }: ListItemProps) => (
-        <div 
-            className="flex justify-between items-center border border-gray-300 p-[10px]"
-            onMouseOver ={() => { setHoveredIndex(index)} }
-            onMouseOut={() => setHoveredIndex(null)}
-            onTouchStart={() => setHoveredIndex(index)}
-            onTouchEnd={() => setHoveredIndex(null)}
-            onClick={() => handleRouting(route)}
-        >
-            <div className="flex items-center h-[35px]">
-                <IconComponent className="mr-[10px] w-[24px] h-[24px] stroke-g2 stroke-[1px]"/>
-                <div className="text-base text-g6 font-bold">{text}</div>
-            </div>
-            { hoveredIndex === index && <Vector /> }
-        </div>
-    );
-    
-    const items = [
-        { IconComponent: MyPosting, text: "My postings", route: '/userInfo/myPostings'},
-        { IconComponent: ChangePassword, text: "Change password", route: '/resetPassword/step1'},
-        { IconComponent: Logout, text: "Log out", route: "/"},
-    ];
-    
-    const ListContainer = () =>{
-        return (
-            <div className="flex flex-col w-full">
-                {items.map((item, index) => (
-                    <ListItem key={index} {...item} index={index} />
-                ))}
-            </div>
-        )
-    };
-   
+  const ListItem = ({ IconComponent, text, route, index }: ListItemProps) => (
+    <div
+      className="flex justify-between items-center border border-gray-300 p-[10px]"
+      onMouseOver={() => {
+        setHoveredIndex(index);
+      }}
+      onMouseOut={() => setHoveredIndex(null)}
+      onTouchStart={() => setHoveredIndex(index)}
+      onTouchEnd={() => setHoveredIndex(null)}
+      onClick={() => handleRouting(route)}
+    >
+      <div className="flex items-center h-[35px]">
+        <IconComponent className="mr-[10px] w-[24px] h-[24px] stroke-g2 stroke-[1px]" />
+        <div className="text-base text-g6 font-bold">{text}</div>
+      </div>
+      {hoveredIndex === index && <Vector />}
+    </div>
+  );
+
+  const items = [
+    { IconComponent: MyPosting, text: 'My postings', route: '/userInfo/myPostings' },
+    { IconComponent: ChangePassword, text: 'Change password', route: '/resetPassword/step1' },
+    { IconComponent: Logout, text: 'Log out', route: '/' },
+  ];
+
+  const ListContainer = () => {
     return (
-        <>
-            <div className="w-full h-auto border border-gray-300 flex flex-col bg-r1 text-g0 mt-[50px]">
-                <div className="flex w-full">
-                    <div className="ml-[20px] w-[52px] h-[72px] flex items-center justify-center mt-[20px]">
-                        <img src={imageSrc} alt={`${name}'s profile`} />
-                    </div>
-                    <div className="flex flex-col justify-center pl-5 h-[72px] mt-[17px]">
-                        <div className="text-lg font-bold">{name}</div>
-                        <div className="text-base">{age} years old | {gender}</div>
-                    </div>
-                    <div className="ml-auto flex items-center pr-4">
-                        <button className="text-sm text-r5 border border-r5 rounded-full w-[50px] h-[24px]" onClick={handleProfileEdit}>Edit</button>
-                    </div>
-                </div>
-                <Textarea
-                    register={ register('describe') } 
-                    initValue={"Hi, I'm Dennis. I'm 31 years old and I'm from Seoul, South Korea. I'm a software engineer with 5 years of experience in the industry. I'm passionate about building innovative products that make people's lives easier."}
-                    className="bg-r1 mb-[20px] h-[120px] text-[14px]"
-                    readonly={true}
-                />
-            </div>
-            <ListContainer />
-            <hr className="mt-[345px]"/>
-            <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
-                <div className="w-full">
-                    <div className="mb-[13px] space-x-[8px] max-w-max">
-                        <Nav />
-                    </div>
-                </div>
+      <div className="flex flex-col w-full">
+        {items.map((item, index) => (
+          <ListItem key={index} {...item} index={index} />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="w-full h-auto border border-gray-300 flex flex-col bg-r1 text-g0 mt-[50px]">
+        <div className="flex w-full">
+          <div className="ml-[20px] w-[52px] h-[72px] flex items-center justify-center mt-[20px]">
+            <img src={imageSrc} alt={`${name}'s profile`} />
+          </div>
+          <div className="flex flex-col justify-center pl-5 h-[72px] mt-[17px]">
+            <div className="text-lg font-bold">{name}</div>
+            <div className="text-base">
+              {age} years old | {gender}
             </div>
-        </>
+          </div>
+          <div className="ml-auto flex items-center pr-4">
+            <button
+              className="text-sm text-r5 border border-r5 rounded-full w-[50px] h-[24px]"
+              onClick={handleProfileEdit}
+            >
+              Edit
+            </button>
+          </div>
+        </div>
+        <Textarea
+          register={register('describe')}
+          initValue={
+            "Hi, I'm Dennis. I'm 31 years old and I'm from Seoul, South Korea. I'm a software engineer with 5 years of experience in the industry. I'm passionate about building innovative products that make people's lives easier."
+          }
+          className="bg-r1 mb-[20px] h-[120px] text-[14px]"
+          readonly
+        />
+      </div>
+      <ListContainer />
+      <hr className="mt-[345px]" />
+      <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
+        <div className="w-full">
+          <div className="mb-[13px] space-x-[8px] max-w-max">
+            <Nav />
+          </div>
+        </div>
+      </div>
+    </>
   );
 }
diff --git a/components/RoomCard/RoomCard.tsx b/components/RoomCard/RoomCard.tsx
index 6823b1b..0c1be49 100644
--- a/components/RoomCard/RoomCard.tsx
+++ b/components/RoomCard/RoomCard.tsx
@@ -5,9 +5,9 @@ import { formatAge, formatDate, formatPrice } from '@/utils/transform';
 import Dot from '@/public/icons/dot.svg';
 import Like from '@/public/icons/like.svg';
 import Camera from '@/public/icons/camera.svg';
-import Card from '../Card/Card';
 import styles from '@/pages/room/room.module.scss';
-import {useRouter} from 'next/router';
+import { useRouter } from 'next/router';
+import Card from '../Card/Card';
 
 interface CardProps {
   room: Room;
@@ -26,14 +26,14 @@ interface PhotoProps {
 const UserInfo = ({ userInfo }: UserInfoProps) => {
   const router = useRouter();
   const age = formatAge(userInfo.year);
-  
+
   const handleUserClick = () => {
-    router.push("/profile");
-  }
+    router.push('/profile');
+  };
 
   return (
     <div className="flex">
-      <img className="rounded-[40px] w-[40px] h-[40px]" src={userInfo.image} alt="user" onClick={handleUserClick}/>
+      <img className="rounded-[40px] w-[40px] h-[40px]" src={userInfo.image} alt="user" onClick={handleUserClick} />
       <div className="ml-[12px]">
         <div className="text-[16px] text-g7 font-semibold">{userInfo.name}</div>
         <div className="text-a2 text-[12px]">
@@ -48,15 +48,12 @@ const UserInfo = ({ userInfo }: UserInfoProps) => {
 
 const Photo = ({ photos, onClick }: PhotoProps) => {
   return (
-      <div className="relative h-[190px] bg-cover" style={{ backgroundImage: `url(${photos[0]})` }} onClick={onClick}>
-        <div className={`${styles.tag} flex items-center gap-[4px]`}>
-          <Camera
-            xmlns="http://www.w3.org/2000/svg"
-            width="16px" 
-            height="16px"
-          />{`+${(photos || []).length }`}
-        </div>
+    <div className="relative h-[190px] bg-cover" style={{ backgroundImage: `url(${photos[0]})` }} onClick={onClick}>
+      <div className={`${styles.tag} flex items-center gap-[4px]`}>
+        <Camera xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" />
+        {`+${(photos || []).length}`}
       </div>
+    </div>
   );
 };
 
@@ -104,7 +101,7 @@ export default function RoomCard({ room, onClick }: CardProps) {
   return (
     <Card
       title={<UserInfo userInfo={room?.userInfo} />}
-      content={<Photo photos={room.images} onClick={onClick}/>}
+      content={<Photo photos={room.images} onClick={onClick} />}
       footer={<Footer room={room} />}
     />
   );
diff --git a/components/Textarea/Textarea.tsx b/components/Textarea/Textarea.tsx
index 9776ed1..a052793 100644
--- a/components/Textarea/Textarea.tsx
+++ b/components/Textarea/Textarea.tsx
@@ -13,7 +13,7 @@ interface TextareaProps {
 
 const getByteSize = (str: string) => {
   return new Blob([str]).size;
-}
+};
 
 function Textarea({ placeholder, register, maxByte, maxLength, initValue, className, readonly }: TextareaProps) {
   const [byteCount, setByteCount] = useState(0);
@@ -22,7 +22,7 @@ function Textarea({ placeholder, register, maxByte, maxLength, initValue, classN
   const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     let currentText = e.target.value;
     let currentByte = getByteSize(currentText);
-    
+
     // byte 수가 초과 될 경우
     if (maxByte && currentByte >= maxByte) {
       // 초과되는 byte를 제거하기 위해 글자를 줄여나간다.
@@ -51,7 +51,9 @@ function Textarea({ placeholder, register, maxByte, maxLength, initValue, classN
   return (
     <div className="flex flex-col space-y-2">
       <textarea
-        className={`w-full rounded-[2px] resize-none pl-[14px] pt-[14px] focus:border-g6 focus:outline-none ${className || 'border-g4 border-[1px] h-[120px]'}`}
+        className={`w-full rounded-[2px] resize-none pl-[14px] pt-[14px] focus:border-g6 focus:outline-none ${
+          className || 'border-g4 border-[1px] h-[120px]'
+        }`}
         placeholder={placeholder}
         {...register}
         onChange={handleTextareaChange}
@@ -60,12 +62,11 @@ function Textarea({ placeholder, register, maxByte, maxLength, initValue, classN
         readOnly={readonly}
         // readOnly={!!((maxByte && byteCount >= maxByte) || (maxLength && textValue.length >= maxLength)) }
       />
-      { 
-      (maxByte || 0) > 0 &&
-      <div className="text-right text-g5 text-[14px] bold">
-        {byteCount} / {maxByte} byte
-      </div>
-      }
+      {(maxByte || 0) > 0 && (
+        <div className="text-right text-g5 text-[14px] bold">
+          {byteCount} / {maxByte} byte
+        </div>
+      )}
     </div>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index f472c34..b688c75 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -38,6 +38,7 @@ function Home() {
   const makeFilters = (filterParams: FilterType) => {
     const resultFilter: string[] = [];
     Object.keys(filterParams).forEach((key) => {
+      // eslint-disable-next-line no-unused-expressions
       filterParams[`${key}`] && resultFilter.push(commonTranslation.t(`${key}`));
     });
     setFilters(() => [...resultFilter]);
diff --git a/pages/room/add/step2.tsx b/pages/room/add/step2.tsx
index 3c5aa63..bf3de60 100644
--- a/pages/room/add/step2.tsx
+++ b/pages/room/add/step2.tsx
@@ -3,9 +3,8 @@ 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);
+  // const { query } = router;
+  // const data = JSON.parse(query.data as string);
 
   return <div>step2</div>;
 }
diff --git a/pages/room/addRoom/step1.tsx b/pages/room/addRoom/step1.tsx
index 370a202..b612e09 100644
--- a/pages/room/addRoom/step1.tsx
+++ b/pages/room/addRoom/step1.tsx
@@ -1,20 +1,11 @@
 import React, { useState, useEffect, useCallback } 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 { 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 Step2 from '@/pages/room/addRoom/step2.tsx';
 
 interface GuDong extends Option {
   gu: string | number;
@@ -27,12 +18,12 @@ export default function Step1() {
   const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
   const [buttonState, setButtonState] = useState('YES');
   const [isCalendarShow, setCalendarShow] = useState(false);
-  
+
   const [guValue, setGuValue] = useState<Option>({
     value: '',
     label: '',
   });
-  
+
   const [dongValue, setDongValue] = useState<GuDong>({
     gu: '',
     guLabel: '',
@@ -64,7 +55,6 @@ export default function Step1() {
       const isExist = prevSelectedOptions.some((item) => item.includes(option));
       // Location이 5개 이상 선택 될 경우 Toast 노출
       if (prevSelectedOptions.length >= 5) {
-        
         return [...prevSelectedOptions];
       }
 
@@ -88,17 +78,23 @@ export default function Step1() {
   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');
-  }
+    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);
@@ -107,7 +103,7 @@ export default function Step1() {
   const getButtonColor = (value: string) => {
     return buttonState === value ? 'r1' : 'outlined';
   };
-  
+
   useEffect(() => {
     handleOptionSelect();
   }, [dongValue.label, handleOptionSelect]);
@@ -153,7 +149,7 @@ export default function Step1() {
               onChange={handleDongChange}
             />
           </section>
-          <div className={'mb-[32px]'}>
+          <div className="mb-[32px]">
             {/* 선택된 옵션들에 대해 동적으로 Chip 컴포넌트 렌더링 */}
             {selectedOptions.map((option) => {
               return <Chip key={option} label={option} onDelete={() => handleOptionRemove?.(option)} clicked />;
@@ -196,9 +192,9 @@ export default function Step1() {
               Min 0 ₩ - Max 50,000,000 ₩
             </Typography>
           </div>
-          <div className={`mb-[16px]`}>
+          <div className="mb-[16px]">
             <Input
-              placeholder={"Price"}
+              placeholder="Price"
               type="text"
               register={register('depositPrice')}
               disabled={watch('depositChecked')}
@@ -207,7 +203,7 @@ export default function Step1() {
           <div className="grid grid-cols-2 gap-[8px] mt-[12px]">
             <Checkbox
               type="outlined"
-              label={"No Deposit"}
+              label="No Deposit"
               register={register('depositChecked')}
               checked={watch('depositChecked')}
             />
@@ -220,19 +216,18 @@ export default function Step1() {
           <div className="mb-[13px]">
             <div className="mb-3 grid grid-cols-2 gap-0">
               <div className="col-span-1">
-                <Button size="lg" type="button" onClick={() => handleButtonClick('YES')} color={getButtonColor('YES')} >
+                <Button size="lg" type="button" onClick={() => handleButtonClick('YES')} color={getButtonColor('YES')}>
                   YES
                 </Button>
               </div>
               <div className="col-span-1">
-                <Button size="lg" type="button" onClick={() => handleButtonClick('NO')} color={getButtonColor('NO')} >
+                <Button size="lg" type="button" onClick={() => handleButtonClick('NO')} color={getButtonColor('NO')}>
                   NO
                 </Button>
               </div>
             </div>
           </div>
-          {
-            (buttonState === 'YES') &&
+          {buttonState === 'YES' && (
             <div className="mt-[16px] mb-[16px]">
               <Input
                 placeholder={filterTranslation.t('Price') as string}
@@ -244,7 +239,7 @@ export default function Step1() {
                 })}
               />
             </div>
-          }
+          )}
           <div className="flex justify-between items-center mb-[20px]">
             <Typography variant="body" fontStyle="semiBold" customClassName="text-[16px]">
               Included (optional)
@@ -282,8 +277,14 @@ export default function Step1() {
               Date available
             </Typography>
           </div>
-          <section className='mb-[8px]'>
-            <Calendar placeholder="MM-DD-YYYY" type="text" register={register('dateAvailable')} disabled={watch('availableChecked')} handleCalendarShow={handleCalendarShow}/>
+          <section className="mb-[8px]">
+            <Calendar
+              placeholder="MM-DD-YYYY"
+              type="text"
+              register={register('dateAvailable')}
+              disabled={watch('availableChecked')}
+              handleCalendarShow={handleCalendarShow}
+            />
           </section>
           <div className={`grid grid-cols-2 gap-[8px] ${isCalendarShow ? 'mb-[533px]' : 'mb-[166px]'} `}>
             <Checkbox
@@ -296,8 +297,13 @@ export default function Step1() {
           <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') }}
+                <Button
+                  size="lg"
+                  type="submit"
+                  disabled={isNextStep()}
+                  onClick={() => {
+                    watch('dateAvailable');
+                  }}
                 >
                   {filterTranslation.t('Next')}
                 </Button>
diff --git a/pages/room/addRoom/step2.tsx b/pages/room/addRoom/step2.tsx
index 91f75ef..a995478 100644
--- a/pages/room/addRoom/step2.tsx
+++ b/pages/room/addRoom/step2.tsx
@@ -1,14 +1,8 @@
 import React, { useState } from 'react';
-import {
-  Stepper,
-  Stepper2,
-  Typography,
-  Checkbox,
-  Button,
-} from '@/components/index.tsx';
+import { Stepper, Stepper2, Typography, Checkbox, 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'
+import Step3 from '@/pages/room/addRoom/step3.tsx';
 
 interface Step2Props {
   step1Data?: any;
@@ -16,42 +10,42 @@ interface Step2Props {
 
 export default function Step2({ step1Data }: Step2Props) {
   const { openModal } = useModal();
-  const { register, handleSubmit, watch, setValue  } = useForm({ mode: 'onChange' });
-  
+  const { register, handleSubmit, watch, setValue } = useForm({ mode: 'onChange' });
+
   const useButtonState = (initValue: string) => {
     const [value, setValue] = useState(initValue);
     const handleButtonClick = (newValue: string) => setValue(newValue);
-    
+
     return [value, handleButtonClick] as const;
   };
 
   const selectedCheckboxes = watch([
-    "bedChecked",
-    "wardrobeChecked",
-    "tvChecked",
-    "airconditionerChecked",
-    "heaterChecked",
-    "washingMachineChecked",
-    "refrigeratorChecked",
-    "doorLookChecked"
+    'bedChecked',
+    'wardrobeChecked',
+    'tvChecked',
+    'airconditionerChecked',
+    'heaterChecked',
+    'washingMachineChecked',
+    'refrigeratorChecked',
+    'doorLookChecked',
   ]);
 
   const [typeButton, setTypeButton] = useButtonState('Studio');
   const [ynButton, setYnButton] = useButtonState('NO');
-  const [bedroomCount, setBedroomCount ] = useState(2);
-  const [bathroomCount, setBathroomCount ] = useState(1);
-  const [roommatesCount, setRoommatesCount ] = useState(0);
+  const [bedroomCount, setBedroomCount] = useState(2);
+  const [bathroomCount, setBathroomCount] = useState(1);
+  const [roommatesCount, setRoommatesCount] = useState(0);
 
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     const params = {
-      ...data, 
-      roomType: typeButton, 
-      bedRooms: bedroomCount, 
-      bathrooms: bathroomCount, 
+      ...data,
+      roomType: typeButton,
+      bedRooms: bedroomCount,
+      bathrooms: bathroomCount,
       roommates: roommatesCount,
-      furnishingIds: [0] // TEST
-    }
-    
+      furnishingIds: [0], // TEST
+    };
+
     openModal({
       props: {
         title: 'Add room',
@@ -63,22 +57,18 @@ export default function Step2({ step1Data }: Step2Props) {
     });
   };
 
-  const buttons = [
-    { label: 'Studio'},
-    { label: '1bed flat'},
-    { label: 'Share house'}
-  ];
+  const buttons = [{ label: 'Studio' }, { label: '1bed flat' }, { label: 'Share house' }];
 
   const checkBoxes = [
-    {label: "Bed", name: "bedChecked"},
-    {label: "Wardrobe", name: "wardrobeChecked"},
-    {label: "TV", name: "tvChecked"},
-    {label: "Air conditioner", name: "airconditionerChecked"},
-    {label: "Heater", name: "heaterChecked"},
-    {label: "Washing machine", name: "washingMachineChecked"},
-    {label: "Refrigerator", name: "refrigeratorChecked"},
-    {label: "Door lock", name: "doorLookChecked"},
-  ]
+    { label: 'Bed', name: 'bedChecked' },
+    { label: 'Wardrobe', name: 'wardrobeChecked' },
+    { label: 'TV', name: 'tvChecked' },
+    { label: 'Air conditioner', name: 'airconditionerChecked' },
+    { label: 'Heater', name: 'heaterChecked' },
+    { label: 'Washing machine', name: 'washingMachineChecked' },
+    { label: 'Refrigerator', name: 'refrigeratorChecked' },
+    { label: 'Door lock', name: 'doorLookChecked' },
+  ];
 
   const handleButtonClick = (label: string) => {
     setTypeButton(label);
@@ -87,17 +77,17 @@ export default function Step2({ step1Data }: Step2Props) {
   /** 버튼 색상 관련, 클릭 시 색상 조정 */
   const getButtonColor = (label: string) => {
     return typeButton === label ? 'r1' : 'outlined';
-  }
+  };
   const getYNButtonColor = (label: string) => {
     return ynButton === label ? 'r1' : 'outlined';
   };
 
-  // YES, NO 버튼 클릭 시 
+  // YES, NO 버튼 클릭 시
   const handleYNButtonClick = (value: string) => {
     setYnButton(value);
 
     if (value === 'NO') {
-      checkBoxes.forEach(item => {
+      checkBoxes.forEach((item) => {
         setValue(item.name, false);
       });
     }
@@ -106,7 +96,7 @@ export default function Step2({ step1Data }: Step2Props) {
   // + - 버튼 클릭 시 Count 값 콜백
   const handleCountUpdate = (callbackCountUpdate: Function, count: number) => {
     callbackCountUpdate(count);
-  }
+  };
 
   return (
     <>
@@ -125,9 +115,9 @@ export default function Step2({ step1Data }: Step2Props) {
           </div>
           <div className="mb-[32px]">
             <div className="mb-3 grid grid-cols-3 gap-0 text-g0">
-              {buttons.map( (button,index) => (
-                <div key={button.label + index} >
-                  <Button 
+              {buttons.map((button, index) => (
+                <div key={button.label + index}>
+                  <Button
                     size="lg"
                     type="button"
                     color={getButtonColor(button.label)}
@@ -139,7 +129,7 @@ export default function Step2({ step1Data }: Step2Props) {
               ))}
             </div>
           </div>
-        
+
           {/* 경계선~ */}
           <hr />
 
@@ -153,11 +143,11 @@ export default function Step2({ step1Data }: Step2Props) {
               <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
                 Total bedrooms
               </Typography>
-              <Stepper2 
-                disabled={['Studio', '1bed flat'].indexOf(typeButton) > -1} 
-                initCount={typeButton === 'Studio' ? 0 : (typeButton === 'Share house') ? 2 : 1 } 
-                disabledLeft={(typeButton === 'Share house') && bedroomCount <= 2}
-                disabledRight={(typeButton === 'Share house') && bedroomCount >= 20}
+              <Stepper2
+                disabled={['Studio', '1bed flat'].indexOf(typeButton) > -1}
+                initCount={typeButton === 'Studio' ? 0 : typeButton === 'Share house' ? 2 : 1}
+                disabledLeft={typeButton === 'Share house' && bedroomCount <= 2}
+                disabledRight={typeButton === 'Share house' && bedroomCount >= 20}
                 callbackCount={(count) => handleCountUpdate(setBedroomCount, count)}
               />
             </div>
@@ -165,8 +155,8 @@ export default function Step2({ step1Data }: Step2Props) {
               <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
                 Total bathrooms
               </Typography>
-              <Stepper2 
-                initCount={1} 
+              <Stepper2
+                initCount={1}
                 disabledLeft={bathroomCount <= 1}
                 disabledRight={bathroomCount >= 20}
                 callbackCount={(count) => handleCountUpdate(setBathroomCount, count)}
@@ -176,7 +166,7 @@ export default function Step2({ step1Data }: Step2Props) {
               <Typography variant="label" fontStyle="semiBold" customClassName="text-[16px]">
                 Total roommates
               </Typography>
-              <Stepper2 
+              <Stepper2
                 initCount={1}
                 disabledLeft={roommatesCount <= 0}
                 disabledRight={roommatesCount >= 20}
@@ -186,7 +176,7 @@ export default function Step2({ step1Data }: Step2Props) {
           </div>
 
           <hr />
-          
+
           <div className="mb-[4px] mt-[32px]">
             <Typography variant="body" customClassName="text-[16px] font-bold text-g7">
               Furnished
@@ -195,35 +185,46 @@ export default function Step2({ step1Data }: Step2Props) {
           <div className="mb-[16px]">
             <div className="mb-3 grid grid-cols-2 gap-0">
               <div className="col-span-1">
-                <Button size="lg" type="button" onClick={() => handleYNButtonClick('YES')} color={getYNButtonColor('YES')} >
+                <Button
+                  size="lg"
+                  type="button"
+                  onClick={() => handleYNButtonClick('YES')}
+                  color={getYNButtonColor('YES')}
+                >
                   YES
                 </Button>
               </div>
               <div className="col-span-1">
-                <Button size="lg" type="button" onClick={() => handleYNButtonClick('NO')} color={getYNButtonColor('NO')} >
+                <Button
+                  size="lg"
+                  type="button"
+                  onClick={() => handleYNButtonClick('NO')}
+                  color={getYNButtonColor('NO')}
+                >
                   NO
                 </Button>
               </div>
             </div>
           </div>
-          {
-            <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>
-          }
+          <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>
           <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={(ynButton === 'YES' && !Object.values(selectedCheckboxes).some(val => val))}>
+                <Button
+                  size="lg"
+                  type="submit"
+                  disabled={ynButton === 'YES' && !Object.values(selectedCheckboxes).some((val) => val)}
+                >
                   Next
                 </Button>
               </div>
diff --git a/pages/userInfo/editProfile.tsx b/pages/userInfo/editProfile.tsx
index e33ad62..b20810e 100644
--- a/pages/userInfo/editProfile.tsx
+++ b/pages/userInfo/editProfile.tsx
@@ -2,25 +2,19 @@ import React, { useState } from 'react';
 import { FieldValues, SubmitHandler, FieldError, useForm as UseForm } from 'react-hook-form';
 import useModal from '@/hooks/useModal.ts';
 import { isValidEmail } from '@/utils/validCheck.ts';
-import {
-  Textarea,
-  Button,
-  Upload,
-  Input,
-  Calendar
-} from '@/components/index.tsx';
+import { Textarea, Button, Upload, Input, Calendar } from '@/components/index.tsx';
 import ProfileCamera from '@/public/icons/profileCamera.svg';
 
 interface ProfileProps {
-    name?: string;
-    age?: number;
-    gender?: 'Male' | 'Female';
-    _imageSrc : string;
-};
+  name?: string;
+  age?: number;
+  gender?: 'Male' | 'Female';
+  _imageSrc: string;
+}
 
 interface ImageComponentClickProps {
-    imageSrc: string;
-    onClick ?: () => void;
+  imageSrc: string;
+  onClick?: () => void;
 }
 
 export default function EditProfile({ _imageSrc }: ProfileProps) {
@@ -34,7 +28,7 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
     formState: { errors },
   } = UseForm({ mode: 'onChange' });
   const [buttonState, setButtonState] = useState('Male');
-  
+
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     openModal({
       props: {
@@ -49,7 +43,7 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
 
   const isPostingComplete = () => {
     return true;
-  }
+  };
 
   const handleButtonClick = (value: string) => {
     setButtonState(value);
@@ -58,130 +52,136 @@ export default function EditProfile({ _imageSrc }: ProfileProps) {
   const getButtonColor = (value: string) => {
     return buttonState === value ? 'r1' : 'outlined';
   };
-  
-  const genderButtons = [
-    { label: 'Male'},
-    { label: 'Female'},
-    { label: 'Others'}
-  ];
+
+  const genderButtons = [{ label: 'Male' }, { label: 'Female' }, { label: 'Others' }];
 
   const ProfileImage = ({ imageSrc, onClick }: ImageComponentClickProps) => {
     return (
-        <div className="flex justify-center items-center h-[90px] mt-[20px] mb-[36px]" onClick={onClick}>
-            <div style={{ position: 'relative', width: 90, height: 90 }} className="flex items-center justify-center">
-                <div style={{ borderRadius: '50%', overflow: 'hidden', width: '100%', height: '100%' }} className="flex items-center justify-center">
-                    <img src={imageSrc || _imageSrc} className="object-cover" />
-                </div>
-                <div className="absolute border-g2 border-[1px] bottom-0 right-0 bg-g0 flex items-center justify-center" style={{ width: '32px', height: '32px', borderRadius: '50%', overflow: "" }}>
-                    <ProfileCamera className="w-[20px] h-[20px]" />
-                </div>
-            </div>
+      <div className="flex justify-center items-center h-[90px] mt-[20px] mb-[36px]" onClick={onClick}>
+        <div style={{ position: 'relative', width: 90, height: 90 }} className="flex items-center justify-center">
+          <div
+            style={{ borderRadius: '50%', overflow: 'hidden', width: '100%', height: '100%' }}
+            className="flex items-center justify-center"
+          >
+            <img src={imageSrc || _imageSrc} className="object-cover" />
+          </div>
+          <div
+            className="absolute border-g2 border-[1px] bottom-0 right-0 bg-g0 flex items-center justify-center"
+            style={{ width: '32px', height: '32px', borderRadius: '50%', overflow: '' }}
+          >
+            <ProfileCamera className="w-[20px] h-[20px]" />
+          </div>
         </div>
-    )
-  }
-    
+      </div>
+    );
+  };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="h-screen overflow-y-scroll font-pretendard">
-            <Upload 
-                InitImageComponent={ProfileImage}
-                multiImage={false}
-                callbackImageFn={(imageList) => {
-                    if (imageList && imageList[0] && imageList[0].dataURL) {
-                        setImageSrc(imageList[0].dataURL);
-                    }
-                }}
-                style={'center'}
+      <div className="h-screen overflow-y-scroll font-pretendard">
+        <Upload
+          InitImageComponent={ProfileImage}
+          multiImage={false}
+          callbackImageFn={(imageList) => {
+            if (imageList && imageList[0] && imageList[0].dataURL) {
+              setImageSrc(imageList[0].dataURL);
+            }
+          }}
+          style="center"
+        />
+        <div className="mb-[12px]">
+          <div className={subHeader}>Email</div>
+        </div>
+        <div className="mb-[8px]">
+          <Input
+            type="email"
+            placeholder="Your email"
+            register={register('email', {
+              validate: (value) => {
+                return isValidEmail(value, `Invalid email`);
+              },
+            })}
+            error={errors.email as FieldError}
+          />
+        </div>
+        <div className="py-[28px]">
+          <div className="mb-[12px]">
+            <div className={subHeader}>Name</div>
+          </div>
+          <div className="mb-[8px]">
+            <Input
+              placeholder="First Name"
+              type="text"
+              register={register('firstName', {
+                validate: () => {
+                  return true;
+                },
+              })}
             />
-            <div className="mb-[12px]">
-                <div className={subHeader}>Email</div>
-            </div>
-            <div className="mb-[8px]">
-                <Input
-                    type="email"
-                    placeholder="Your email"
-                    register={register('email', {
-                        validate: (value) => {
-                        return isValidEmail(value, `Invalid email`);
-                        },
-                    })}
-                    error={errors.email as FieldError}
-                />
-            </div>
-            <div className="py-[28px]">
-                <div className="mb-[12px]">
-                    <div className={subHeader}>Name</div>
-                </div>
-                <div className="mb-[8px]">
-                    <Input
-                        placeholder="First Name"
-                        type="text"
-                        register={register('firstName', {
-                        validate: () => {
-                            return true;
-                        },
-                        })}
-                    />
-                </div>
-                <div className="mb-[8px]">
-                    <Input
-                        placeholder="Last Name"
-                        type="text"
-                        register={register('lastName', {
-                        validate: () => {
-                            return true;
-                        },
-                        })}
-                    />
-                </div>
-            </div>
-            <div className="mb-[12px]">
-                <div className={subHeader}>Gender</div>
-            </div>
-            <div className="mb-[32px]">
-                <div className="mb-3 grid grid-cols-3 gap-0 text-g0">
-                    {genderButtons.map( (button,index) => (
-                        <div key={button.label + index} >
-                            <Button 
-                                size="lg"
-                                type="button"
-                                color={getButtonColor(button.label)}
-                                onClick={() => handleButtonClick(button.label)}
-                            >
-                            {button.label}
-                            </Button>
-                        </div>
-                        ))}
-                </div>
-            </div>
-            <div className="mb-[12px]">
-                <div className={subHeader}>Date of birth</div>
-            </div>
-            <section className='mb-[8px]'>
-                <Calendar placeholder="MM-DD-YYYY" type="text" register={register('dateAvailable')} disabled={watch('availableChecked')} />
-            </section>
-            <div className="mb-[12px] mt-[32px]">
-                <div className={subHeader}>About you</div>
-            </div>
-            <div className="mb-[250px]">
-                <Textarea placeholder={"Describe you to others!"} register={register('describe')} maxByte={250} className={'h-[172px] text-g7 border-g4 border-[1px]'}/>
-            </div>
-            <div className="mt-[255px] 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={isPostingComplete()} 
-                            onClick={() => {}}
-                        >
-                        {"Complete"}
-                        </Button>
-                    </div>
-                </div>
+          </div>
+          <div className="mb-[8px]">
+            <Input
+              placeholder="Last Name"
+              type="text"
+              register={register('lastName', {
+                validate: () => {
+                  return true;
+                },
+              })}
+            />
+          </div>
+        </div>
+        <div className="mb-[12px]">
+          <div className={subHeader}>Gender</div>
+        </div>
+        <div className="mb-[32px]">
+          <div className="mb-3 grid grid-cols-3 gap-0 text-g0">
+            {genderButtons.map((button, index) => (
+              <div key={button.label + index}>
+                <Button
+                  size="lg"
+                  type="button"
+                  color={getButtonColor(button.label)}
+                  onClick={() => handleButtonClick(button.label)}
+                >
+                  {button.label}
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mb-[12px]">
+          <div className={subHeader}>Date of birth</div>
+        </div>
+        <section className="mb-[8px]">
+          <Calendar
+            placeholder="MM-DD-YYYY"
+            type="text"
+            register={register('dateAvailable')}
+            disabled={watch('availableChecked')}
+          />
+        </section>
+        <div className="mb-[12px] mt-[32px]">
+          <div className={subHeader}>About you</div>
+        </div>
+        <div className="mb-[250px]">
+          <Textarea
+            placeholder="Describe you to others!"
+            register={register('describe')}
+            maxByte={250}
+            className="h-[172px] text-g7 border-g4 border-[1px]"
+          />
+        </div>
+        <div className="mt-[255px] 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={isPostingComplete()} onClick={() => {}}>
+                Complete
+              </Button>
             </div>
+          </div>
         </div>
+      </div>
     </form>
   );
 }
-
diff --git a/pages/userInfo/index.tsx b/pages/userInfo/index.tsx
index 5aea4ce..32cb230 100644
--- a/pages/userInfo/index.tsx
+++ b/pages/userInfo/index.tsx
@@ -2,20 +2,20 @@ import React from 'react';
 import { Nav, ProfileCard } from '@/components/index.tsx';
 
 interface UserProfileProps {
-    imgSrc: string;
+  imgSrc: string;
 }
 
-export default function UserProfile({ imgSrc } : UserProfileProps) {
-    return (
-        <>
-           <ProfileCard age={22} name={'James'} gender='Male' imageSrc={imgSrc} />
-            <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
-                <div className="w-full">
-                    <div className="mb-[13px] space-x-[8px] max-w-max">
-                        <Nav initMenu={3}/>
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-};
+export default function UserProfile({ imgSrc }: UserProfileProps) {
+  return (
+    <>
+      <ProfileCard age={22} name="James" gender="Male" imageSrc={imgSrc} />
+      <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
+        <div className="w-full">
+          <div className="mb-[13px] space-x-[8px] max-w-max">
+            <Nav initMenu={3} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/pages/userInfo/myPostings.tsx b/pages/userInfo/myPostings.tsx
index fe54869..0294364 100644
--- a/pages/userInfo/myPostings.tsx
+++ b/pages/userInfo/myPostings.tsx
@@ -3,75 +3,64 @@ import NoPosting from '@/public/icons/noPosting.svg';
 import Step1 from '@/pages/room/addRoom/step1.tsx';
 import useModal from '@/hooks/useModal';
 import DefaultLayout from '@/components/layouts/DefaultLayout';
-//import { useRouter } from 'next/router';
-
+// import { useRouter } from 'next/router';
 
 // TODO 데이터가 구체화되면 바꿔줘야함
 interface MyPostingProps {
-    roomInfo : any | null;
+  roomInfo: any | null;
 }
 
 export default function MyPosting({ roomInfo }: MyPostingProps) {
-    const { openModal } = useModal();
-    const handleAddPosting = () => {
-        openModal({
-            props: {
-              title: 'Add Rooms',
-              size: 'full',
-              custom: true,
-              customHeader: true,
-            },
-            children: <Step1 />,
-        });
-    };
+  const { openModal } = useModal();
+  const handleAddPosting = () => {
+    openModal({
+      props: {
+        title: 'Add Rooms',
+        size: 'full',
+        custom: true,
+        customHeader: true,
+      },
+      children: <Step1 />,
+    });
+  };
 
-    /**
-     *  룸이 없을 때 보여주는 Component
-     */
-    const NoPostings = () => {
-        const noPostingStyle = 'text-[20px] font-bold mt-[29px] text-center'; 
-        const containerStyle = 'h-screen flex flex-col items-center justify-start mt-[135px]';  // 'justify-start'로 변경
-    
-        return (
-            <div className={containerStyle}>
-                <NoPosting />
-                <div className={noPostingStyle}>
-                    Click here to post and find roommates!
-                </div>
-                <div className="mt-[29px]">
-                <button
-                    className={`font-pretendard text-[16px] font-semibold bg-g0 border border-solid border-r1 rounded-[2px] text-r1 w-[120px] h-[48px]`}
-                    onClick={() => handleAddPosting()}
-                    type={'button'}
-                    data-size={'md'}
-                >
-                    + Add post
-                </button>
-                </div>
-            </div>
-        );
-    };
+  /**
+   *  룸이 없을 때 보여주는 Component
+   */
+  const NoPostings = () => {
+    const noPostingStyle = 'text-[20px] font-bold mt-[29px] text-center';
+    const containerStyle = 'h-screen flex flex-col items-center justify-start mt-[135px]'; // 'justify-start'로 변경
 
-    /**
-     * 룸이 있을 때 보여주는 Component (TODO : 구체화 해줘야함)
-     */
-    const MyRooms = () => {
-        return (
-            <div>
-                호이호이
-            </div>
-        );
-    };
     return (
-        (roomInfo || []).length === 0 ? <NoPostings /> : <MyRooms />
-    )
+      <div className={containerStyle}>
+        <NoPosting />
+        <div className={noPostingStyle}>Click here to post and find roommates!</div>
+        <div className="mt-[29px]">
+          <button
+            className="font-pretendard text-[16px] font-semibold bg-g0 border border-solid border-r1 rounded-[2px] text-r1 w-[120px] h-[48px]"
+            onClick={() => handleAddPosting()}
+            type="button"
+            data-size="md"
+          >
+            + Add post
+          </button>
+        </div>
+      </div>
+    );
+  };
 
+  /**
+   * 룸이 있을 때 보여주는 Component (TODO : 구체화 해줘야함)
+   */
+  const MyRooms = () => {
+    return <div>호이호이</div>;
+  };
+  return (roomInfo || []).length === 0 ? <NoPostings /> : <MyRooms />;
 }
 
 MyPosting.getLayout = function getLayout(page: React.ReactElement) {
-    const handleGoBack = () => {
-        window.history.back();
-    }
-    return <DefaultLayout children={page} title={'My postings'} handleButtonClick={handleGoBack} />;
+  const handleGoBack = () => {
+    window.history.back();
   };
-  
\ No newline at end of file
+  return <DefaultLayout children={page} title="My postings" handleButtonClick={handleGoBack} />;
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 0e558cf..9f59ba9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,7 +19,6 @@ module.exports = {
         g6: '#424242',
         g7: '#212121',
         n700: '#696F8C',
-        
       },
       fontFamily: {
         poppins: ['Poppins', 'sans-serif'],