From fc576eddb05279e144e15a82c1eabff23a5a0e37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=84=EC=9C=A0=EB=AF=BC?=
 <beforeyum@jeon-yumin-ui-noteubug.local>
Date: Thu, 11 Jul 2024 10:52:38 +0900
Subject: [PATCH] =?UTF-8?q?FE-28=20:sparkles:=20=EB=A7=88=EC=9D=B4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pageLayout/MypageLayout/MyPageLayout.tsx  | 77 +++++++++++++++++++
 .../pageLayout/MypageLayout/index.ts          |  2 +-
 src/pages/mypage/index.tsx                    |  2 +-
 .../pageLayout/MypageLayout/MyPageLayout.tsx  | 37 ---------
 4 files changed, 79 insertions(+), 39 deletions(-)
 create mode 100644 src/pageLayout/MypageLayout/MyPageLayout.tsx
 rename src/{pages => }/pageLayout/MypageLayout/index.ts (57%)
 delete mode 100644 src/pages/pageLayout/MypageLayout/MyPageLayout.tsx

diff --git a/src/pageLayout/MypageLayout/MyPageLayout.tsx b/src/pageLayout/MypageLayout/MyPageLayout.tsx
new file mode 100644
index 00000000..8c6029c4
--- /dev/null
+++ b/src/pageLayout/MypageLayout/MyPageLayout.tsx
@@ -0,0 +1,77 @@
+function MyPageLayout() {
+  return (
+    <div className='bg-background-100 w-full relative h-dvh'>
+      <div className='bg-background-100 w-full h-[200px]' />
+      <div className='w-full h-[1900px] flex flex-col items-center bg-blue-100 rounded-3xl relative shadow-3xl'>
+        {/* 프로필 영역 */}
+        <div className='w-[130px] h-[240px] flex flex-col justify-center items-center absolute top-[-50px]'>
+          <div className='w-[120px] h-[120px] rounded-full bg-state-error' />
+          {/* <img
+            className='w-[120px] h-[120px] rounded-[50%]'
+            alt='프로필 사진'
+            src='https://mblogthumb-phinf.pstatic.net/MjAyMjAxMjVfMjg0/MDAxNjQzMTAyOTg0Nzgz.sLrqOJ2S3r6pLboUm5yJTjB_JECC0zO9Tt3y_h86aJcg.w5VER_KDRAW3yRq8-nypsm2aGmKurM5YieSFcr1Vg0Qg.JPEG.minziminzi128/IMG_7374.JPG?type=w800'
+          /> */}
+          <p className='mt-4 mb-6'>선글라스 고양이</p>
+          <div className='w-[100px] h-12 pl-4 pr-3.5 py-1.5 bg-zinc-100 rounded-[100px] justify-start items-center gap-1.5 inline-flex'>
+            <div className="text-neutral-400 text-xl font-medium font-['Pretendard'] leading-loose">로그아웃</div>
+          </div>
+        </div>
+        {/* 오늘으 ㅣ감정 */}
+        <div className='w-[640px] h-[216px] mt-[300px] border border-black'>
+          <p>오늘의 감정</p>
+        </div>
+        {/* 캘린더 */}
+        <div className='w-[640px] h-[648px] mt-[160px] border border-black'>
+          <p>캘린더</p>
+        </div>
+        {/* 감정 차트 - 추후 chart UI로 분리 예정*/}
+        <div className='w-[640px] mt-[160px] flex flex-col gap-6'>
+          <p className='text-black-600 font-semibold text-2xl'>감정 차트</p>
+          <div className='w-[640px] h-[264px] py-6 px-28 flex justify-between'>
+            <div>
+              <div className='flex justify-center items-center w-[180px] h-[180px] bg-gray-200 rounded-full'></div>
+            </div>
+            <div className='inline-flex flex-col justify-start items-start gap-3.5'>
+              <div className='w-[116px] h-8 justify-start items-center gap-4 inline-flex'>
+                <div className='w-4 h-4 bg-emerald-400 rounded-sm'></div>
+                <div>감정</div>
+                <div>35%</div>
+              </div>
+              <div className='w-[116px] h-8 justify-start items-center gap-4 inline-flex'>
+                <div className='w-4 h-4 bg-illust-yellow rounded-sm'></div>
+                <div>감정</div>
+                <div>35%</div>
+              </div>
+              <div className='w-[116px] h-8 justify-start items-center gap-4 inline-flex'>
+                <div className='w-4 h-4 bg-slate-300 rounded-sm'></div>
+                <div>감정</div>
+                <div>35%</div>
+              </div>
+              <div className='w-[116px] h-8 justify-start items-center gap-4 inline-flex'>
+                <div className='w-4 h-4 bg-slate-200 rounded-sm'></div>
+                <div>감정</div>
+                <div>35%</div>
+              </div>
+              <div className='w-[116px] h-8 justify-start items-center gap-4 inline-flex'>
+                <div className='w-4 h-4 bg-slate-100 rounded-sm'></div>
+                <div>감정</div>
+                <div>35%</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='bg-background-100 flex flex-col items-center w-full py-[100px]'>
+        <div className='w-[640px] h-[600px] flex flex-col gap-12'>
+          <div className='inline-flex gap-6'>
+            <p className='text-neutral-400 font-semibold text-2xl'>내 에피그램(10)</p>
+            <p className='text-black-600 font-semibold text-2xl'>내 댓글(110)</p>
+          </div>
+          <div className='w-full'>{/* 댓글 컴포넌트 */}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MyPageLayout;
diff --git a/src/pages/pageLayout/MypageLayout/index.ts b/src/pageLayout/MypageLayout/index.ts
similarity index 57%
rename from src/pages/pageLayout/MypageLayout/index.ts
rename to src/pageLayout/MypageLayout/index.ts
index b6118195..28b6be74 100644
--- a/src/pages/pageLayout/MypageLayout/index.ts
+++ b/src/pageLayout/MypageLayout/index.ts
@@ -1,3 +1,3 @@
 import MyPageLayout from './MyPageLayout';
 
-export default { MyPageLayout };
+export default MyPageLayout;
diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
index 8a470694..63fd34e3 100644
--- a/src/pages/mypage/index.tsx
+++ b/src/pages/mypage/index.tsx
@@ -1,4 +1,4 @@
-import { MyPageLayout } from '../pageLayout/MypageLayout';
+import MyPageLayout from '@/pageLayout/MypageLayout';
 
 export default function mypage() {
   return <MyPageLayout />;
diff --git a/src/pages/pageLayout/MypageLayout/MyPageLayout.tsx b/src/pages/pageLayout/MypageLayout/MyPageLayout.tsx
deleted file mode 100644
index bf5de6e5..00000000
--- a/src/pages/pageLayout/MypageLayout/MyPageLayout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-export default function MyPageLayout() {
-  return (
-    <div className='bg-background-100 w-full relative h-dvh'>
-      <div className='bg-background-100 w-full h-[200px]' />
-      <div className='w-full h-[1900px] flex flex-col items-center bg-blue-100 rounded-3xl relative shadow-3xl'>
-        {/* 프로필 영역 */}
-        <div className='w-[130px] h-[240px] flex flex-col justify-center items-center absolute top-[-50px]'>
-          <div className='w-[120px] h-[120px] rounded-full bg-state-error' />
-          {/* <img
-            className='w-[120px] h-[120px] rounded-[50%]'
-            alt='프로필 사진'
-            src='https://mblogthumb-phinf.pstatic.net/MjAyMjAxMjVfMjg0/MDAxNjQzMTAyOTg0Nzgz.sLrqOJ2S3r6pLboUm5yJTjB_JECC0zO9Tt3y_h86aJcg.w5VER_KDRAW3yRq8-nypsm2aGmKurM5YieSFcr1Vg0Qg.JPEG.minziminzi128/IMG_7374.JPG?type=w800'
-          /> */}
-          <p className='mt-4 mb-6'>선글라스 고양이</p>
-          <div className='w-[100px] h-12 pl-4 pr-3.5 py-1.5 bg-zinc-100 rounded-[100px] justify-start items-center gap-1.5 inline-flex'>
-            <div className="text-neutral-400 text-xl font-medium font-['Pretendard'] leading-loose">로그아웃</div>
-          </div>
-        </div>
-        {/* 오늘으 ㅣ감정 */}
-        <div className='w-[640px] h-[216px] mt-[300px] border border-black'>
-          <p>오늘의 감정</p>
-        </div>
-        {/* 캘린더 */}
-        <div className='w-[640px] h-[648px] mt-[160px] border border-black'>
-          <p>캘린더</p>
-        </div>
-        {/* 감정 차트 */}
-        <div className='w-[640px] h-[344px] mt-[160px] border border-black'>
-          <p>차트</p>
-        </div>
-      </div>
-      <div className='bg-background-100 flex flex-col items-center w-full py-[100px]'>
-        <div className='w-[640px] h-[600px] border border-black' />
-      </div>
-    </div>
-  );
-}