design(#10): 마이페이지 UI 최종

Help-M-Ssaem · Aug 12, 2024 · 5de09df · 5de09df
1 parent e115201
commit 5de09df
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 21 deletions.
diff --git a/src/components/auth/MemberListCount.tsx b/src/components/auth/MemberListCount.tsx
@@ -14,6 +14,7 @@ import Comment from '../board/Comment'
 import Board from '../board/Board'
 import DiscussionBoard from '../discussion/DiscussionBoard'
 import WorryBoard from '../worry/WorryBoard'
+import Container from '../common/Container'
 
 const TABS = [
   '내가 쓴 게시글',
@@ -42,35 +43,50 @@ const MemberListCount = ({ id }: MemberListCountProps) => {
         return (
           boardList &&
           boardList.result.map((item: BoardI, index: number) => (
-            <Board key={index} board={item} />
+            <div>
+              <Board key={index} board={item} />
+              <div className="h-[1px] bg-main my-7.5" />
+            </div>
           ))
         )
       case '내가 쓴 토론글':
         return (
           discussionList &&
           discussionList.result.map((item: DiscussionBoardI, index: number) => (
-            <DiscussionBoard key={index} discussionBoard={item} />
+            <div>
+              <DiscussionBoard key={index} discussionBoard={item} />
+              <div className="h-[1px] bg-main my-7.5" />
+            </div>
           ))
         )
       case '내가 쓴 고민글':
         return (
           waitingWorryList &&
           waitingWorryList.result.map((item: WorryI, index: number) => (
-            <WorryBoard key={index} worryBoard={item} />
+            <div>
+              <WorryBoard key={index} worryBoard={item} />
+              <div className="h-[1px] bg-main my-7.5" />
+            </div>
           ))
         )
       case '내가 해결한 고민':
         return (
           solvedWorryList &&
           solvedWorryList.result.map((item: WorryI, index: number) => (
-            <WorryBoard key={index} worryBoard={item} />
+            <div>
+              <WorryBoard key={index} worryBoard={item} />
+              <div className="h-[1px] bg-main my-7.5" />
+            </div>
           ))
         )
       case '내가 쓴 댓글':
         return (
           commentList &&
           commentList.result.map((item: CommentI, index: number) => (
-            <Comment key={index} comment={item} />
+            <div>
+              <Comment key={index} comment={item} />
+              <div className="h-[1px] bg-main my-7.5" />
+            </div>
           ))
         )
       default:
@@ -97,7 +113,7 @@ const MemberListCount = ({ id }: MemberListCountProps) => {
         ))}
       </div>
 
-      <div className="px-7.5 pb-7.5 rounded-7.5">{renderList()}</div>
+      <Container color="purple">{renderList()}</Container>
     </div>
   )
 }

diff --git a/src/components/auth/UserProfile.tsx b/src/components/auth/UserProfile.tsx
@@ -13,13 +13,14 @@ const UserProfile = ({ profile }: UserProfileProps) => {
 
   return (
     <div className="flex flex-col items-center gap-4">
-      <Image
-        src={profileImgUrl}
-        alt="profile"
-        width={194}
-        height={194}
-        className="rounded-full object-cover"
-      />
+      <div className="relative w-[194px] h-[194px]">
+        <Image
+          src={profileImgUrl}
+          alt="profile"
+          fill
+          className="rounded-full object-cover"
+        />
+      </div>
       <div className="flex flex-col items-center gap-2.5">
         <div className="text-title1 text-maindark font-bold">{nickName} 님</div>
         <div className="flex gap-2.5">

diff --git a/src/components/board/Board.tsx b/src/components/board/Board.tsx
@@ -36,7 +36,7 @@ const Board = ({ board }: BoardProps) => {
 
   return (
     <div
-      className="flex justify-between items-center my-7.5 cursor-pointer"
+      className="flex justify-between items-center cursor-pointer"
       onClick={() => handleBoardClick(id)}
     >
       <div className="flex flex-col justify-between gap-5">

diff --git a/src/components/board/BoardPage.tsx b/src/components/board/BoardPage.tsx
@@ -51,12 +51,12 @@ const BoardPage = () => {
             onClick={() => {}}
           />
         </div>
-        <div className="h-[1px] bg-main" />
+        <div className="h-[1px] bg-main mb-7.5" />
         {boardList &&
           boardList.result.map((board: BoardI) => (
             <div key={board.id}>
               <Board board={board} />
-              <div className="h-[1px] bg-main" />
+              <div className="h-[1px] bg-main my-7.5" />
             </div>
           ))}
 

diff --git a/src/components/worry/WorryBoard.tsx b/src/components/worry/WorryBoard.tsx
@@ -24,7 +24,7 @@ const WorryBoard = ({ worryBoard }: WorryBoardProps) => {
 
   return (
     <div
-      className="flex justify-between items-center my-7.5 cursor-pointer"
+      className="flex justify-between items-center cursor-pointer"
       onClick={() => {
         router.push(`/worry/${id}`)
       }}

diff --git a/src/components/worry/WorryPage.tsx b/src/components/worry/WorryPage.tsx
@@ -80,12 +80,12 @@ const WorryPage = () => {
             setStrFromMbti={setWaitingStrFromMbti}
             setStrToMbti={setWaitingStrToMbti}
           />
-          <div className="h-[1px] bg-main" />
+          <div className="h-[1px] bg-main mb-7.5" />
           {waitingWorryList &&
             waitingWorryList.result.map((worry: WorryI) => (
               <div key={worry.id}>
                 <WorryBoard worryBoard={worry} />
-                <div className="h-[1px] bg-main" />
+                <div className="h-[1px] bg-main my-7.5" />
               </div>
             ))}
 
@@ -110,12 +110,12 @@ const WorryPage = () => {
             setStrFromMbti={setSolvedStrFromMbti}
             setStrToMbti={setSolvedStrToMbti}
           />
-          <div className="h-[1px] bg-main" />
+          <div className="h-[1px] bg-main mb-7.5" />
           {solvedWorryList &&
             solvedWorryList.result.map((worry: WorryI) => (
               <div key={worry.id}>
                 <WorryBoard worryBoard={worry} />
-                <div className="h-[1px] bg-main" />
+                <div className="h-[1px] bg-main my-7.5" />
               </div>
             ))}