Merge branch 'main' of https://github.com/bsideproject/KoLiving_FE

components/Modal/ModalBox.tsx

@@ -6,7 +6,6 @@ import useModal from '../../hooks/useModal.ts';
 import useOutSideClick from '../../hooks/useOutSideClick.ts';
 import Button from '../Button/Button.tsx';
 import Header from '../Header/Header.tsx';
-import DefaultLayout from '../layouts/DefaultLayout.tsx';
 
 function Modal({
   children,
@@ -15,6 +14,7 @@ function Modal({
   title = '',
   content = '',
   custom = false,
+  customHeader = false,
   buttonType = 'none',
   handleClose,
   buttonName = '',
@@ -78,6 +78,14 @@ function Modal({
   const goBack = () => {
     closeModal();
   };
+  const defaultHeader = () => {
+    let result = <Header type="title" title={title} right="close" logoColor="black" handleButtonClick={goBack} />;
+    // TODO 나중에 여기 layoutHeader쪽 Component를 받는 거로 변경
+    if (customHeader) {
+      result = <Header type="back" logoColor="black" bgColor="white" title="Add rooms" handleButtonClick={goBack} />;
+    }
+    return result;
+  };
 
   return size === 'md' ? (
     <div className={styles.overlay}>
@@ -102,7 +110,7 @@ function Modal({
     </div>
   ) : (
     <div className={styles.full}>
-      <Header type="title" title={title} right="close" logoColor="black" handleButtonClick={goBack} />
+      {defaultHeader()}
       <div className="mt-[62px] px-[20px] text-g6 text-[16px] font-light">{custom ? children : content}</div>
     </div>
   );

components/Modal/ModalContainer.tsx

@@ -12,6 +12,7 @@ export interface ModalProps {
   title?: string;
   content?: string;
   custom?: boolean;
+  customHeader?: boolean;
   buttonType?: 'none' | 'both' | 'outline' | 'default';
   handleClose?: () => void;
   buttonName?: string;

components/Typography/Typography.module.scss

@@ -7,7 +7,7 @@
 }
 
 .body {
-  @apply font-pretendard;
+  @apply font-pretendard ;
 }
 
 .label {

components/layouts/RoomListLayout.tsx

@@ -1,13 +1,36 @@
-import React, { ReactNode } from 'react';
+import React, { useState, useEffect, useCallback, 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 { GuList, DongList } from '../../public/js/guDongList.ts';
+import Step1 from '@/pages/room/addRoom/step1.tsx';
 
 interface AppLayoutProps {
   children: ReactNode;
 }
 
+export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
+  props: {
+    ...(await serverSideTranslations(locale as string, ['filter', 'common'])),
+  },
+});
+
 function RoomListLayout({ children }: AppLayoutProps) {
+  const { openModal } = useModal();
   const handleButtonClick = () => {
-    alert('add!!');
+    openModal({
+      props: {
+        title: 'Add Rooms',
+        size: 'full',
+        custom: true,
+        customHeader: true,
+      },
+      children: <Step1 />,
+    });
   };
 
   return (

pages/index.tsx

@@ -1,6 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { GetStaticPropsContext } from 'next';
-import { useTranslation } from 'next-i18next';
 import 'tailwindcss/tailwind.css';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import RoomCard from '@/components/RoomCard/RoomCard';
@@ -109,7 +108,6 @@ function Home() {
   };
 
   const getChildData = async (childData: any) => {
-    console.log('childData', childData);
     const filteredChips = makeSubmitParam(childData) as FilterType;
     makeFilters(filteredChips);
     await selectRooms();
@@ -121,6 +119,7 @@ function Home() {
         title: 'Filters',
         size: 'full',
         custom: true,
+        customHeader: false,
       },
       children: <Filter closeModal={closeModal} getChildData={getChildData} roomsLength={(rooms || []).length} />,
     });