Merge pull request #161 from bsideproject/moon

[feat] UserProfile 우선 커밋!!
bsideproject · Sep 25, 2023 · 3a185d8 · 3a185d8
2 parents ab3d7f9 + 9ad0f1d
commit 3a185d8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>
+        </>
+    )
+};