fix: 마이페이지 ui

Readme-Monster · May 17, 2024 · d27e791 · d27e791
1 parent 85ce5a4
commit d27e791
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 46 deletions.
diff --git a/src/components/MyPage/NoData/index.tsx b/src/components/MyPage/NoData/index.tsx
@@ -8,7 +8,7 @@ const NoData = () => {
     navigate("/editor");
   };
   return (
-    <div className="flex flex-col items-center justify-center h-full">
+    <div className="flex flex-col items-center justify-center mt-[30px]">
       <svg width="120" height="100" viewBox="0 0 184 152" aria-hidden focusable="false">
         <g fill="none" fillRule="evenodd">
           <g transform="translate(24 31.67)">
@@ -36,9 +36,9 @@ const NoData = () => {
           </g>
         </g>
       </svg>
-      <h3 className="text-textBlue font-semibold cursor-pointer" onClick={handleClickToBuild}>
+      <p className="text-textBlue font-semibold cursor-pointer mb-0" onClick={handleClickToBuild}>
         생성하러 가기
-      </h3>
+      </p>
     </div>
   );
 };

diff --git a/src/components/MyPage/UserInfo/index.tsx b/src/components/MyPage/UserInfo/index.tsx
@@ -6,6 +6,7 @@ import { useRouter } from "pages/routing";
 import { app, db } from "../../../firebaseApp";
 import { deleteDoc, doc } from "firebase/firestore";
 import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
+import { Edit } from "@carbon/icons-react";
 
 const UserInfo = ({ userInfo }: { userInfo: UserInfoProps }) => {
   const auth = getAuth(app);
@@ -60,39 +61,37 @@ const UserInfo = ({ userInfo }: { userInfo: UserInfoProps }) => {
   }, []);
 
   return (
-    <>
-      <h2 className="text-textBlue font-semibold">마이페이지</h2>
-      <div className="flex flex-col md:flex-row items-center w-full">
-        <div className="w-full md:w-4/5 flex flex-col md:flex-row mb-4 md:mb-0">
+    <div className="w-full h-full p-[10px]">
+      <div className="w-full h-full flex flex-row items-center gap-[10px] mb-[10px]">
+        <div className="w-full flex flex-col">
+          <p className="text-textBlue font-semibold mb-0 text-xl">{userInfo.name}</p>
+          <p className="text-textPrimary dark:text-textWhite mb-0 text-lg">{userInfo.email}</p>
+          <p className="text-textSecondary dark:text-textWhite mb-0">
+            저장 섹션 수 : <b className="text-textPrimary dark:text-textWhite">{userInfo.sections.length ?? 0}</b>
+          </p>
+        </div>
+        <div className="max-w-[90px] h-[90px] relative">
           {userImg && (
             <label htmlFor="imageInput" className="cursor-pointer">
-              <img className="w-28 h-28 md:w-28 md:h-auto bg-slate-400 rounded-full" src={userImg} alt="Profile" />
+              <img className="min-w-[90px] min-h-[90px] bg-slate-400 rounded-full" src={userImg} alt="Profile" />
             </label>
           )}
-
           <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" id="imageInput" />
-        </div>
-        <div className="w-full lg:w-1/5">
-          <div className="flex flex-row justify-between font-semibold">
-            <div className="flex flex-col items-center dark:text-textWhite">
-              <h5>생성(개수)</h5>
-              <p>{userInfo.sections.length ?? 0}</p>
-            </div>
+          <div
+            onClick={handleImageChange}
+            className="w-[25px] h-[25px] bg-white rounded-full border flex flex-Center absolute right-3 bottom-[-1px] cursor-pointer"
+          >
+            <Edit size={12} />
           </div>
         </div>
       </div>
-      <div className="w-full flex flex-col p-2">
-        <h4 className="text-textBlue font-semibold">{userInfo.name}</h4>
-        <h5 className="text-textPrimary dark:text-textWhite">{userInfo.email}</h5>
-      </div>
-
       <button
-        className="w-full h-12 border-1 border-[#FF4A50] hover:border-gray-500 text-center font-semibold text-[#FF4A50] hover:text-gray-500"
+        className="w-full h-12 border-1 border-[#FF4A50] hover:border-gray-500 text-center font-semibold text-[#FF4A50] hover:text-gray-500 rounded-[8px] mt-[20px]"
         onClick={handleDeleteUser}
       >
         탈퇴하기
       </button>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/MyPage/UserPrevious/index.tsx b/src/components/MyPage/UserPrevious/index.tsx
@@ -93,34 +93,35 @@ const UserPreviousList = ({
   }, [userSectionList]);
 
   return (
-    <div className="w-full h-full flex flex-col gap-2 pt-3 ">
+    <div className="w-full h-[100%]  overflow-scroll hide-scrollbar">
       {newUserSectionList?.length > 0 ? (
         newUserSectionList?.map((userData, i) => {
           const { dateType, data } = userData;
           return (
-            <div key={i} className="w-full flex flex-col gap-2 relative">
-              <div className="left-0 px-2 py-1 text-xs font-semibold dark:text-slate-50">{dateType}</div>
+            <div key={i} className="w-full max-h-[100] flex flex-col relative gap-[10px]">
+              <div className="left-0 px-2 py-1 font-semibold dark:text-slate-50">{dateType}</div>
               {data.map(list => {
                 return (
                   <div
                     key={list.id}
-                    className="relative w-full h-20 flex justify-center items-center bg-gray-800 dark:bg-slate-300 hover:scale-95 overflow-visible transition-transform ease-in-out duration-500 cursor-pointer z-0"
+                    className="
+                    w-full h-auto
+                     flex flex-row items-center justify-between
+                     bg-gray-50 dark:bg-slate-300 
+                    hover:bg-slate-100
+                     cursor-pointer z-0
+                     rounded-[8px] p-[20px]
+                     "
                     onClick={() => handleOnClick(list.id)}
                   >
-                    <h1
-                      className="text-2xl font-extrabold sm:text-2xl text-slate-50 dark:text-textPrimary truncate"
-                      data-testid="title"
-                    >
-                      {list.editSections[0].title}
-                    </h1>
-                    <div
-                      className="absolute top-2 right-1 px-2 py-1 text-xs text-white bg-gray-600 rounded-full z-10"
-                      onClick={event => handleDeleteClick(event, list.id)}
-                    >
-                      <TrashCan size={22} color="red" />
+                    <div>
+                      <p className="text-textSecondary">{handleConvertDate(list.saveDate?.seconds)}</p>
+                      <p className="text-lg text-textPrimary dark:text-textPrimary truncate mb-0" data-testid="title">
+                        {list.editSections[0].title}
+                      </p>
                     </div>
-                    <div className="absolute top-2 left-1 px-2 py-1 text-xs text-white bg-gray-600 rounded-full z-40">
-                      {handleConvertDate(list.saveDate?.seconds)}
+                    <div className=" text-xs text-white" onClick={event => handleDeleteClick(event, list.id)}>
+                      <TrashCan size={22} className="fill-textPrimary" />
                     </div>
                   </div>
                 );

diff --git a/src/pages/BoardPage/index.tsx b/src/pages/BoardPage/index.tsx
@@ -92,7 +92,7 @@ const BoardPage = () => {
           </div>
         </div>
       </section>
-      <div className="max-w-screen-xl mx-auto px-4 py-14 flex flex-col gap-[15px]">
+      <div className="max-w-[1200px] mx-auto px-4 py-14 flex flex-col gap-[15px]">
         {comments.map((item, index) => (
           <div key={index} className="bg-gray-100 rounded p-4">
             <p className="text-gray-500 text-sm">{new Date(item.registrationDate.seconds * 1000).toLocaleString()}</p>

diff --git a/src/pages/builder/ReadmeBuilder.tsx b/src/pages/builder/ReadmeBuilder.tsx
@@ -26,7 +26,7 @@ const ReadmeBuilder = () => {
   return (
     <div className="w-full h-[calc(100vh_-_70px)] flex flex-col">
       <div className="w-full h-full">
-        <div className="max-w-full h-full p-[24px] pt-[20px] flex flex-row gap-[30px] ">
+        <div className="max-w-full h-full p-[24px] flex flex-row gap-[30px] ">
           <div className="max-w-[380px] w-full h-full md:block hidden">
             <SectionsContainer />
           </div>

diff --git a/src/pages/myPage/index.tsx b/src/pages/myPage/index.tsx
@@ -76,12 +76,13 @@ const MyPage = () => {
   }, []);
 
   return (
-    <section className="w-full h-[calc(100vh_-_70px)] flex justify-center ">
-      <div className="flex flex-col items-center justify-center gap-1 p-10 w-2/5 h-full ">
-        <div className="w-full h-full flex flex-col items-center justify-center">
+    <section className="w-full h-[calc(100%_-_70px)] flex flex-Center">
+      <div className="w-[650px] max-h-full p-[24px]">
+        <h1 className="text-center text-xl dark:text-textWhite font-bold mb-[30px]">마이페이지</h1>
+        <div className="w-full flex flex-col items-center justify-center">
           <UserInfo userInfo={userInfo} />
         </div>
-        <div className="w-full h-full overflow-y-scroll hide-scrollbar">
+        <div className="w-full max-h-full my-[30px]">
           <UserPreviousList
             userInfo={userInfo}
             userSectionList={userInfo.sections}