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}/> - } - - {/* <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} + /> + )} + + {/* <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'],