Merge pull request #162 from bsideproject/moon

[feat] UserProfile 부분 우선 커밋
bsideproject · Sep 25, 2023 · 246c329 · 246c329
2 parents 3a185d8 + 0620cee
commit 246c329
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 27 deletions.
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
@@ -4,10 +4,15 @@ 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';
 
 const defaultStrokeColor = 'stroke-g4 stroke-[1.5px]';
 const activeStrokeColor = 'stroke-r1 stroke-[1.5px]';
 
+interface NavProps {
+  initMenu ?: number;
+}
+
 const menus = [
   {
     name: 'Rooms',
@@ -27,9 +32,18 @@ const menus = [
   },
 ];
 
-export default function Nav() {
-  const [activeMenu, setActiveMenu] = useState(0); // 초기 활성 메뉴 인덱스
+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) {
+      router.push('/');
+    } else if (index === 3) {
+      router.push('profile');
+    }
+  }
 
   return (
     <div className={`${styles.container} grid grid-cols-4 bg-g0 w-full h-[66px] text-center`}>
@@ -39,7 +53,7 @@ export default function Nav() {
           <div
             className="my-[9px] align-middle items-center cursor-pointer"
             key={menu.name}
-            onClick={() => setActiveMenu(index)}
+            onClick={() => handleNavClicked(index)}
             onMouseEnter={() => setHoverMenu(index)}
             onMouseLeave={() => setHoverMenu(-1)}
           >

diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Textarea } from '@/components/index.tsx';
+import { useForm } from 'react-hook-form';
+
+interface ProfileCardProps {
+    name : string;
+    age: number;
+    gender : 'Male' | 'Female';
+    imageSrc : string;
+}
+
+export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCardProps) {
+    const { register } = useForm({ mode: 'onChange' });
+
+    return (
+        <div className="w-full h-auto border border-gray-300 flex flex-col bg-r1 text-g0">  {/* flex-direction 변경 */}
+            <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 mb-[132px]">
+                    <button className="text-sm text-r5 border border-r5 rounded-full w-[50px] h-[24px]">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-[110px] text-[14px]"
+                readonly={true}
+            />
+        </div>
+  );
+}
diff --git a/components/RoomCard/RoomCard.tsx b/components/RoomCard/RoomCard.tsx
@@ -7,8 +7,6 @@ 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 {

diff --git a/components/Textarea/Textarea.tsx b/components/Textarea/Textarea.tsx
@@ -3,19 +3,21 @@ import { UseFormRegisterReturn } from 'react-hook-form';
 
 interface TextareaProps {
   placeholder?: string;
-  value?: string;
   maxByte?: number;
   maxLength?: number;
   register: UseFormRegisterReturn;
+  initValue?: string;
+  className?: string;
+  readonly?: boolean;
 }
 
 const getByteSize = (str: string) => {
   return new Blob([str]).size;
 }
 
-function Textarea({ placeholder, register, maxByte, maxLength }: TextareaProps) {
+function Textarea({ placeholder, register, maxByte, maxLength, initValue, className, readonly }: TextareaProps) {
   const [byteCount, setByteCount] = useState(0);
-  const [textValue, setTextValue] = useState('');
+  const [textValue, setTextValue] = useState(initValue || '');
 
   const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     let currentText = e.target.value;
@@ -49,11 +51,13 @@ function Textarea({ placeholder, register, maxByte, maxLength }: TextareaProps)
   return (
     <div className="flex flex-col space-y-2">
       <textarea
-        className="w-full h-[120px] rounded-[2px] border-g4 border-[1px] resize-none pl-[14px] pt-[14px] focus:border-g6 focus:outline-none"
+        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}
         maxLength={maxLength}
+        value={textValue}
+        readOnly={readonly}
         // readOnly={!!((maxByte && byteCount >= maxByte) || (maxLength && textValue.length >= maxLength)) }
       />
       { 

diff --git a/components/index.tsx b/components/index.tsx
@@ -21,3 +21,4 @@ export { default as Toast } from '@/components/Toast/Toast.tsx';
 export { default as Upload } from '@/components/File/FileUpload.tsx';
 export { default as Calendar } from '@/components/Calendar/Calendar.tsx';
 export { default as FileUpload } from '@/components/File/FileUpload.tsx';
+export { default as ProfileCard } from '@/components/ProfileCard/index.tsx';
diff --git a/pages/profile/index.tsx b/pages/profile/index.tsx
@@ -1,26 +1,17 @@
 import React from 'react';
+import { Nav, ProfileCard } from '@/components/index.tsx';
 
 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>
+           <ProfileCard  age={22} name={'James'} gender='Male' imageSrc='https://picsum.photos/700/700/?image=10' />
+            <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/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
         r2: '#FE75B9',
         r3: '#FFD3DD',
         r4: '#DD5D18',
+        r5: '#FFD39C',
         a1: '#F42500',
         a2: '#717D96',
         g0: '#FFFFFF',
@@ -18,6 +19,7 @@ module.exports = {
         g6: '#424242',
         g7: '#212121',
         n700: '#696F8C',
+
       },
       fontFamily: {
         poppins: ['Poppins', 'sans-serif'],