From 2bf918440a7eaba5dd71ebdbe47f50a39fd64b16 Mon Sep 17 00:00:00 2001
From: Legitgoons <cksxkr5193@naver.com>
Date: Thu, 30 May 2024 22:08:12 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20ProfileHeader=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WebView에서 ProfileHeader가 사용되지 않는 것이 확정되어 삭제하였습니다.
---
 src/widgets/profile-header/index.ts              |  1 -
 src/widgets/profile-header/ui/ProfileHeader.scss | 15 ---------------
 src/widgets/profile-header/ui/ProfileHeader.tsx  | 13 -------------
 src/widgets/profile-header/ui/index.ts           |  1 -
 4 files changed, 30 deletions(-)
 delete mode 100644 src/widgets/profile-header/index.ts
 delete mode 100644 src/widgets/profile-header/ui/ProfileHeader.scss
 delete mode 100644 src/widgets/profile-header/ui/ProfileHeader.tsx
 delete mode 100644 src/widgets/profile-header/ui/index.ts

diff --git a/src/widgets/profile-header/index.ts b/src/widgets/profile-header/index.ts
deleted file mode 100644
index 17a1afb..0000000
--- a/src/widgets/profile-header/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ProfileHeader } from './ui';
diff --git a/src/widgets/profile-header/ui/ProfileHeader.scss b/src/widgets/profile-header/ui/ProfileHeader.scss
deleted file mode 100644
index e5bb4f1..0000000
--- a/src/widgets/profile-header/ui/ProfileHeader.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.profile-header {
-  width: 100%;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background-color: white;
-  margin-top: 3.45px;
-  padding-left: 3px;
-
-  .name {
-    text-align: center;
-  }
-}
diff --git a/src/widgets/profile-header/ui/ProfileHeader.tsx b/src/widgets/profile-header/ui/ProfileHeader.tsx
deleted file mode 100644
index 457eb1f..0000000
--- a/src/widgets/profile-header/ui/ProfileHeader.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import './ProfileHeader.scss';
-
-interface ProfileHeaderProps {
-  name: string;
-}
-
-export const ProfileHeader = ({ name }: ProfileHeaderProps) => {
-  return (
-    <header className='profile-header'>
-      <p className='name h4md'>{name}</p>
-    </header>
-  );
-};
diff --git a/src/widgets/profile-header/ui/index.ts b/src/widgets/profile-header/ui/index.ts
deleted file mode 100644
index 3e07504..0000000
--- a/src/widgets/profile-header/ui/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ProfileHeader } from './ProfileHeader';

From 4f19f73ed2a0c959b281fb3d04b692d07e8e97c2 Mon Sep 17 00:00:00 2001
From: Legitgoons <cksxkr5193@naver.com>
Date: Thu, 30 May 2024 22:52:11 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20SkeletonProfileUser=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../profile-user/ui/SkeletonProfileUser.scss  | 82 +++++++++++++++++++
 .../profile-user/ui/SkeletonProfileUser.tsx   | 29 +++++++
 2 files changed, 111 insertions(+)
 create mode 100644 src/widgets/profile-user/ui/SkeletonProfileUser.scss
 create mode 100644 src/widgets/profile-user/ui/SkeletonProfileUser.tsx

diff --git a/src/widgets/profile-user/ui/SkeletonProfileUser.scss b/src/widgets/profile-user/ui/SkeletonProfileUser.scss
new file mode 100644
index 0000000..d122c21
--- /dev/null
+++ b/src/widgets/profile-user/ui/SkeletonProfileUser.scss
@@ -0,0 +1,82 @@
+.skeleton-profile-user-wrapper {
+  height: 260px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0px 20px 34.5px 0px #dddddd40;
+
+  .skeleton-profile-top-container {
+    height: 148px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .skeleton-proile {
+      @include skeletonAnimation();
+      background-color: $gray2;
+      position: relative;
+      width: 81px;
+      height: 81px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .skeleton-user-name {
+      @include skeletonAnimation();
+      background-color: $gray2;
+      width: 53px;
+      height: 14px;
+      border-radius: 4px;
+    }
+
+    .skeleton-profile-btn {
+      @include skeletonAnimation();
+      background-color: $gray2;
+      width: 68px;
+      height: 26px;
+      border-radius: 6px;
+    }
+  }
+
+  .skeleton-profile-count-container {
+    width: 220px;
+    height: 41px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+    padding-top: 28px;
+
+    .skeleton-profile-count {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+
+      .skeleton-count-number {
+        @include skeletonAnimation();
+        background-color: $gray2;
+        width: 26px;
+        height: 26px;
+        border-radius: 6px;
+      }
+      .skeleton-count-text {
+        @include skeletonAnimation();
+        background-color: $gray2;
+        width: 33px;
+        height: 14px;
+        border-radius: 4px;
+      }
+    }
+
+    .count-divider {
+      width: 0.5px;
+      height: 36px;
+      background-color: $gray4;
+    }
+  }
+}
diff --git a/src/widgets/profile-user/ui/SkeletonProfileUser.tsx b/src/widgets/profile-user/ui/SkeletonProfileUser.tsx
new file mode 100644
index 0000000..4593c71
--- /dev/null
+++ b/src/widgets/profile-user/ui/SkeletonProfileUser.tsx
@@ -0,0 +1,29 @@
+import './SkeletonProfileUser.scss';
+
+export const SkeletonProfileUser = () => {
+  return (
+    <section className='skeleton-profile-user-wrapper'>
+      <section className='skeleton-profile-top-container'>
+        <div className='skeleton-proile' />
+        <div className='skeleton-user-name' />
+        <div className='skeleton-profile-btn'></div>
+      </section>
+      <section className='skeleton-profile-count-container'>
+        <div className='skeleton-profile-count'>
+          <div className='skeleton-count-number' />
+          <div className='skeleton-count-text' />
+        </div>
+        <div className='count-divider' />
+        <div className='skeleton-profile-count'>
+          <div className='skeleton-count-number' />
+          <div className='skeleton-count-text' />
+        </div>
+        <div className='count-divider' />
+        <div className='skeleton-profile-count'>
+          <div className='skeleton-count-number' />
+          <div className='skeleton-count-text' />
+        </div>
+      </section>
+    </section>
+  );
+};

From 83ff013c2aff5a51ec090d199eacd3ebfbe92272 Mon Sep 17 00:00:00 2001
From: Legitgoons <cksxkr5193@naver.com>
Date: Thu, 30 May 2024 22:53:21 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20ProfileUser=EC=97=90=20SkeletonProf?=
 =?UTF-8?q?ileUser=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/profile-user/ui/ProfileUser.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/widgets/profile-user/ui/ProfileUser.tsx b/src/widgets/profile-user/ui/ProfileUser.tsx
index 6835105..af9601e 100644
--- a/src/widgets/profile-user/ui/ProfileUser.tsx
+++ b/src/widgets/profile-user/ui/ProfileUser.tsx
@@ -5,6 +5,7 @@ import { useGetUser } from '../api';
 import { ProfileCount } from './ProfileCount';
 import './ProfileUser.scss';
 import { ProfileUserImage } from './ProfileUserImage';
+import { SkeletonProfileUser } from './SkeletonProfileUser';
 
 interface ProfileUserProps {
   userId: number;
@@ -15,7 +16,12 @@ export const ProfileUser = ({ userId, isOwner }: ProfileUserProps) => {
   const { data, isLoading, isError, refetchUser } = useGetUser(userId);
 
   if (isLoading) {
-    return <div>스켈레톤 들어갈곳</div>;
+    return (
+      <>
+        <PageHeader page='' prevPageLink='/' />
+        <SkeletonProfileUser />
+      </>
+    );
   }
 
   if (isError || !data) {