From 9ad0f1dedcb72f3736caadb905d3be79079af81a Mon Sep 17 00:00:00 2001
From: JAEMOONLEE <leejaemoon@lotte.net>
Date: Mon, 25 Sep 2023 09:23:14 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20UserProfile=20=EC=9A=B0=EC=84=A0=20?=
 =?UTF-8?q?=EC=BB=A4=EB=B0=8B!!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Nav/Nav.tsx           |  1 -
 components/RoomCard/RoomCard.tsx | 18 +++++++++++++-----
 pages/profile/index.tsx          | 26 ++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 pages/profile/index.tsx

diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
index 9be37df..d82c91c 100644
--- a/components/Nav/Nav.tsx
+++ b/components/Nav/Nav.tsx
@@ -35,7 +35,6 @@ export default function Nav() {
     <div className={`${styles.container} grid grid-cols-4 bg-g0 w-full h-[66px] text-center`}>
       {menus.map((menu, index) => {
         const IconComponent = menu.icon;
-
         return (
           <div
             className="my-[9px] align-middle items-center cursor-pointer"
diff --git a/components/RoomCard/RoomCard.tsx b/components/RoomCard/RoomCard.tsx
index 296b41d..573c1f9 100644
--- a/components/RoomCard/RoomCard.tsx
+++ b/components/RoomCard/RoomCard.tsx
@@ -7,6 +7,9 @@ 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 useModal from '@/hooks/useModal.ts';
+import UserProfile from '@/pages/profile/index.tsx';
+import {useRouter} from 'next/router';
 
 interface CardProps {
   room: Room;
@@ -19,14 +22,20 @@ interface UserInfoProps {
 
 interface PhotoProps {
   photos: string[];
+  onClick?: () => void;
 }
 
 const UserInfo = ({ userInfo }: UserInfoProps) => {
+  const router = useRouter();
   const age = formatAge(userInfo.year);
+  
+  const handleUserClick = () => {
+    router.push("/profile");
+  }
 
   return (
     <div className="flex">
-      <img className="rounded-[40px] w-[40px] h-[40px]" src={userInfo.image} alt="user" />
+      <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]">
@@ -39,9 +48,9 @@ const UserInfo = ({ userInfo }: UserInfoProps) => {
   );
 };
 
-const Photo = ({ photos }: PhotoProps) => {
+const Photo = ({ photos, onClick }: PhotoProps) => {
   return (
-      <div className="relative h-[190px] bg-cover" style={{ backgroundImage: `url(${photos[0]})` }}>
+      <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"
@@ -97,9 +106,8 @@ export default function RoomCard({ room, onClick }: CardProps) {
   return (
     <Card
       title={<UserInfo userInfo={room?.userInfo} />}
-      content={<Photo photos={room.images} />}
+      content={<Photo photos={room.images} onClick={onClick}/>}
       footer={<Footer room={room} />}
-      onClick={onClick}
     />
   );
 }
diff --git a/pages/profile/index.tsx b/pages/profile/index.tsx
new file mode 100644
index 0000000..c9052cf
--- /dev/null
+++ b/pages/profile/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export default function UserProfile() {
+    return (
+        <>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+            <h1>hi~~</h1>
+        </>
+    )
+};