Merge pull request #93 from IT-Cotato/fix/#19-ui_fix

[Feat] 프로필 모달창 UI 구현 및 요일 UI 수정
IT-Cotato · Feb 17, 2025 · a9d42dc · a9d42dc
2 parents 8532828 + 587932b
commit a9d42dc
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 26 deletions.
diff --git a/src/assets/images/no_student.png b/src/assets/images/no_student.png
diff --git a/src/components/Modal/ProfileModal.tsx b/src/components/Modal/ProfileModal.tsx
@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react';
 import { getProfileModal } from '../../api/roomList.api';
 import { formatPhoneNumber } from '../../utils/FormatPhoneNumber';
+import { IoClose } from 'react-icons/io5';
 
 type ModalProps = {
   setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   id: number;
+  profileImg: string;
 };
 
-const ProfileModal = ({ setModalOpen, id }: ModalProps) => {
+const ProfileModal = ({ setModalOpen, id, profileImg }: ModalProps) => {
   const [profile, setProfile] = useState({
     role: '',
     username: '',
@@ -31,20 +33,33 @@ const ProfileModal = ({ setModalOpen, id }: ModalProps) => {
   }, []);
 
   return (
-    <div className="flex flex-col py-5 w-1/3 min-w-[300px] h-3/5 bg-primary_100 rounded-[16px]">
-      <div className="flex justify-center gap-32 w-full">
-        <button onClick={() => setModalOpen(false)}>창 닫기</button>
-        <div className="flex bg-primary_50 rounded-[8px] py-2 px-3 gap-1">
-          <p className="text-body3 font-semibold text-primary_700 m-0">{profile.role}</p>
-        </div>
+    <div className="flex w-[340px] flex-col p-4 gap-2.5 bg-white rounded-[16px]">
+      <div className="flex items-center justify-between">
+        <div className="w-4" />
+        <h1 className="font-semibold text-lg leading-8">프로필</h1>
+        <IoClose size={20} onClick={() => setModalOpen(false)} />
       </div>
-      <div className="flex flex-1 flex-col justify-center items-center">
+
+      <div className="flex flex-1 flex-col gap-6 justify-center items-center bg-primary_100 rounded-2xl py-6">
         <img src={profile.profileImageUrl} className="w-20 h-20 rounded-full" />
-        <p className="text-[22px] font-bold leading-9 pt-6">{profile.username}</p>
-        <p className="text-caption1 leading-[22px] text-gray-500">{profile.statusMessage}</p>
-        <p className="text-body3 tracking-[-0.048px] leading-7 text-gray-500">
-          {formatPhoneNumber(profile.phoneNumber)}
-        </p>
+        <div>
+          <p className="text-[22px] font-bold leading-9">{profile.username}</p>
+          <p className="text-caption1 leading-[22px] text-gray-500">{profile.statusMessage}</p>
+        </div>
+      </div>
+
+      <div className="flex justify-between items-center">
+        <div className="flex gap-1 items-center px-3 py-2 bg-primary_100 rounded-lg">
+          <img className="h-6 w-6" src={profileImg} />
+          <p className="text-primary_700 text-body3 font-semibold leading-[22px]">
+            {profile.role === 'STUDENT' ? '학생' : '선생님'}
+          </p>
+        </div>
+
+        <div className="flex gap-2 items-center px-2">
+          <p className="text-base font-semibold leading-7">전화번호</p>
+          <p className="text-body3 leading-7 text-gray-500">{formatPhoneNumber(profile.phoneNumber)}</p>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/RoomInfoContent.tsx b/src/components/RoomInfoContent.tsx
@@ -4,6 +4,7 @@ import student_boy from '../assets/images/student_boy.png';
 import student_girl from '../assets/images/student_girl.png';
 import teacher_man from '../assets/images/teacher_man.png';
 import teacher_woman from '../assets/images/teacher_woman.png';
+import no_student from '../assets/images/no_student.png';
 import { useEffect, useState } from 'react';
 import Modal from './Modal/Modal';
 import ProfileModal from './Modal/ProfileModal';
@@ -31,7 +32,7 @@ const RoomInfoContent = ({ room, roleInfo }: RoomProps) => {
         setProfileImg(teacher_man);
       else if ((roleInfo === 'STUDENT' || roleInfo === 'PARENT') && room.opponent.gender === '여성')
         setProfileImg(teacher_woman);
-    } else setProfileImg('');
+    } else setProfileImg(no_student);
   });
 
   return (
@@ -42,19 +43,24 @@ const RoomInfoContent = ({ room, roleInfo }: RoomProps) => {
             setProfileOpen(false);
           }}
         >
-          {room.opponent && <ProfileModal setModalOpen={setProfileOpen} id={room.opponent.id} />}
+          {room.opponent && (
+            <ProfileModal setModalOpen={setProfileOpen} id={room.opponent.id} profileImg={profileImg} />
+          )}
         </Modal>
       )}
       <div
-        className="flex items-center p-3 rounded-2xl cursor-pointer"
+        className="flex w-[60px] h-[60px] p-3 rounded-2xl cursor-pointer items-center justify-center"
         onClick={() => setProfileOpen(true)}
         style={{ backgroundColor: bgColor }}
       >
-        <img className="w-9 h-9" src={profileImg} />
+        <img className="h-9 max-w-9" src={profileImg} />
       </div>
-      <div className="flex flex-col text-gray-900 cursor-pointer" onClick={() => navigate(`/user/${room.roomId}`)}>
+      <div
+        className="flex flex-col gap-1 text-gray-900 cursor-pointer"
+        onClick={() => navigate(`/user/${room.roomId}`)}
+      >
         <h1 className="text-base font-semibold leading-7">{room.roomName}</h1>
-        <div className="flex gap-1.5 text-body4 leading-7 font-medium">
+        <div className="flex flex-wrap gap-1.5 gap-y-0 text-body4 leading-6 font-medium">
           <div className="flex">
             <h3 className="text-gray-500">#</h3>
             <h3 className="text-primary_700 ">{room.subject}</h3>

diff --git a/src/pages/Room/RoomDetail.tsx b/src/pages/Room/RoomDetail.tsx
@@ -41,18 +41,23 @@ const RoomDetail = () => {
         </div>
         <div className="flex flex-col tracking-[-0.042px]">
           {/* 요일&과목명 */}
-          <div className="flex text-body4 font-medium gap-[6px] items-center">
+          <div className="flex flex-wrap text-body4 font-medium gap-[6px] items-center">
             <div>
               <span className="text-gray-500">#</span>
               <span className="text-primary_700">{roomDetail.subject}</span>
             </div>
             {roomDetail.lessonDays &&
-              roomDetail.lessonDays.map((day, index) => (
-                <li key={index} className="list-none">
-                  <span className="text-gray-500">#</span>
-                  <span className="text-primary_700">{day.lessonDay}요일</span>
-                </li>
-              ))}
+              roomDetail.lessonDays
+                .sort((a, b) => {
+                  const dayOrder = ['월', '화', '수', '목', '금', '토', '일'];
+                  return dayOrder.indexOf(a.lessonDay) - dayOrder.indexOf(b.lessonDay);
+                })
+                .map((day, index) => (
+                  <li key={index} className="list-none">
+                    <span className="text-gray-500">#</span>
+                    <span className="text-primary_700">{day.lessonDay}요일</span>
+                  </li>
+                ))}
           </div>
           <div className="flex gap-[6px] text-body4 text-gray-500 items-center">
             <div className="flex gap-[2px]">