From c213ad88580f6788d5aa1908b5945f27556e2b9b Mon Sep 17 00:00:00 2001
From: Musix <ljw927@naver.com>
Date: Wed, 29 Nov 2023 18:50:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20Style(#294):=20=EB=82=B4=20?=
 =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(user-menu)/mypage/application/page.tsx   | 34 ++++++------
 src/app/(user-menu)/mypage/layout.tsx         |  4 +-
 src/components/_common/SideBar/index.tsx      |  4 +-
 src/components/_common/TabBar/index.tsx       | 54 +++++++++++++++++++
 4 files changed, 76 insertions(+), 20 deletions(-)
 create mode 100644 src/components/_common/TabBar/index.tsx

diff --git a/src/app/(user-menu)/mypage/application/page.tsx b/src/app/(user-menu)/mypage/application/page.tsx
index 4359b65a..24360fbc 100644
--- a/src/app/(user-menu)/mypage/application/page.tsx
+++ b/src/app/(user-menu)/mypage/application/page.tsx
@@ -38,19 +38,19 @@ const MyApplicationPage = () => {
   return (
     <div className="flex gap-30 max-sm:w-400 sm:w-500 md:w-400 lg:w-600 xl:w-750">
       <div className="w-full">
-        <div className="flex justify-between px-20 pb-10 text-25 font-bold lg:text-28 xl:text-30">
+        <div className="flex justify-between px-20 pb-10 text-20 font-bold lg:text-28 xl:text-30">
           내 신청서 관리
-          <div className="flex items-center justify-center gap-20">
-            <div className="flex flex-col items-center justify-center gap-10 text-15 font-bold lg:flex-row lg:text-20 xl:text-25">
-              <div className="h-10 w-10 rounded-full bg-st-green"></div>
+          <div className="flex items-center justify-center gap-10 lg:gap-20">
+            <div className="flex items-center justify-center gap-5 text-12 font-bold lg:flex-row lg:gap-10 lg:text-15 xl:text-25">
+              <div className="h-7 w-7 rounded-full bg-st-green lg:h-10 lg:w-10"></div>
               <span>승인</span>
             </div>
-            <div className="flex flex-col items-center justify-center gap-10 text-15 font-bold lg:flex-row lg:text-20 xl:text-25">
-              <div className="h-10 w-10 rounded-full bg-st-red"></div>
+            <div className="flex items-center justify-center gap-5 text-12 font-bold lg:flex-row lg:gap-10 lg:text-15 xl:text-25">
+              <div className="h-7 w-7 rounded-full bg-st-red lg:h-10 lg:w-10"></div>
               <span>거절</span>
             </div>
-            <div className="flex flex-col items-center justify-center gap-10 text-15 font-bold lg:flex-row lg:text-20 xl:text-25">
-              <div className="h-10 w-10 rounded-full bg-st-primary"></div>
+            <div className="flex items-center justify-center gap-5 text-12 font-bold lg:flex-row lg:gap-10 lg:text-15 xl:text-25">
+              <div className="h-7 w-7 rounded-full bg-st-primary lg:h-10 lg:w-10"></div>
               <span>대기</span>
             </div>
           </div>
@@ -76,24 +76,24 @@ const MyApplicationPage = () => {
                 >
                   <div className="text-20 font-bold lg:text-23 xl:text-25">
                     {application.status === "ACCEPTED" ? (
-                      <div className="flex items-center justify-center gap-10">
+                      <div className="flex items-center justify-center gap-10 text-10 sm:text-16">
                         {application.steadyName}
-                        <div className="h-10 w-10 rounded-full bg-st-green"></div>
+                        <div className="h-5 w-5 rounded-full bg-st-green lg:h-8 lg:w-8"></div>
                       </div>
                     ) : application.status === "REJECTED" ? (
-                      <div className="flex items-center justify-center gap-10">
+                      <div className="flex items-center justify-center gap-10 sm:text-16">
                         {application.steadyName}
-                        <div className="h-10 w-10 rounded-full bg-st-red"></div>
+                        <div className="h-5 w-5 rounded-full bg-st-red lg:h-8 lg:w-8"></div>
                       </div>
                     ) : (
-                      <div className="flex items-center justify-center gap-10">
+                      <div className="flex items-center justify-center gap-10 text-10 sm:text-16">
                         {application.steadyName}
-                        <div className="h-10 w-10 rounded-full bg-st-primary"></div>
+                        <div className="h-5 w-5 rounded-full bg-st-primary lg:h-8 lg:w-8"></div>
                       </div>
                     )}
                   </div>
                   <div className="group flex">
-                    <div className="transform text-15 font-bold text-st-gray-100 transition group-hover:-translate-x-[30px]">
+                    <div className="transform text-10 font-bold text-st-gray-100 transition group-hover:-translate-x-[15px] lg:text-15 lg:group-hover:-translate-x-[30px]">
                       제출일 {application.createdAt.slice(0, 10)}
                     </div>
                     <div
@@ -105,8 +105,8 @@ const MyApplicationPage = () => {
                     >
                       <Icon
                         name="trash"
-                        size={25}
-                        color="text-st-gray-100"
+                        size={20}
+                        color="text-st-gray-100 w-15 h-15 lg:w-20 lg:h-20"
                       />
                     </div>
                   </div>
diff --git a/src/app/(user-menu)/mypage/layout.tsx b/src/app/(user-menu)/mypage/layout.tsx
index c9e9b4e9..f991b1b0 100644
--- a/src/app/(user-menu)/mypage/layout.tsx
+++ b/src/app/(user-menu)/mypage/layout.tsx
@@ -1,4 +1,5 @@
 import SideBar from "@/components/_common/SideBar";
+import TabBar from "@/components/_common/TabBar";
 
 const myPageList = [
   {
@@ -21,11 +22,12 @@ const myPageList = [
 
 const MyPageLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="flex flex-grow gap-50 py-20 max-sm:w-400 sm:w-500 md:w-600 lg:w-800 xl:w-1200">
+    <div className="flex flex-grow flex-col gap-50 py-20 max-sm:w-400 sm:w-500 md:w-600 md:flex-row lg:w-800 xl:w-1200">
       <SideBar
         sidebarItems={myPageList}
         listType="mypage"
       />
+      <TabBar />
       {children}
     </div>
   );
diff --git a/src/components/_common/SideBar/index.tsx b/src/components/_common/SideBar/index.tsx
index 172dfbd2..f4d081e1 100644
--- a/src/components/_common/SideBar/index.tsx
+++ b/src/components/_common/SideBar/index.tsx
@@ -46,8 +46,8 @@ const SideBar = ({
         >
           <div
             className={`${
-              listType === "mypage" ? "min-w-150 lg:w-150 xl:w-200" : "w-200"
-            } h-full rounded-5 p-20 text-18 font-bold transition duration-100 ${
+              listType === "mypage" ? "w-150 lg:w-170 xl:w-200" : "w-200"
+            } h-full rounded-5 p-20 text-10 text-18 font-bold transition duration-100 md:text-12 lg:text-14 xl:text-16 ${
               item.href.split("/")[2] === page
                 ? "bg-st-skyblue-50 text-st-primary"
                 : " hover:bg-st-gray-50"
diff --git a/src/components/_common/TabBar/index.tsx b/src/components/_common/TabBar/index.tsx
new file mode 100644
index 00000000..4cd5bca6
--- /dev/null
+++ b/src/components/_common/TabBar/index.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const TabBar = () => {
+  const path = usePathname();
+
+  return (
+    <div className="flex h-41 justify-between gap-20 border-b-3 border-st-gray-100 sm:h-47 md:hidden">
+      <Link href={"/mypage"}>
+        <div
+          className={`${
+            path === "/mypage" && "border-b-3 border-st-primary text-st-primary"
+          } p-10 text-12 font-bold text-st-gray-100 sm:text-16`}
+        >
+          내 프로필
+        </div>
+      </Link>
+      <Link href={"/mypage/template"}>
+        <div
+          className={`${
+            path === "/mypage/template" &&
+            "border-b-3 border-st-primary text-st-primary"
+          } p-10 text-12 font-bold text-st-gray-100 sm:text-16`}
+        >
+          내 템플릿
+        </div>
+      </Link>
+      <Link href={"/mypage/application"}>
+        <div
+          className={`${
+            path === "/mypage/application" &&
+            "border-b-3 border-st-primary text-st-primary"
+          } p-10 text-12 font-bold text-st-gray-100 sm:text-16`}
+        >
+          내 신청서 관리
+        </div>
+      </Link>
+      <Link href={"/mypage/reviews"}>
+        <div
+          className={`${
+            path === "/mypage/reviews" &&
+            "border-b-3 border-st-primary text-st-primary"
+          } p-10 text-12 font-bold text-st-gray-100 sm:text-16`}
+        >
+          내가 받은 리뷰
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default TabBar;

From f8c023d9bb35e5cbff23e55d3e2df7686c3dc250 Mon Sep 17 00:00:00 2001
From: Musix <ljw927@naver.com>
Date: Thu, 30 Nov 2023 16:24:20 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=93=9D=20Chore(#291):=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(user-menu)/mypage/layout.tsx         | 2 +-
 src/components/{_common => }/TabBar/index.tsx | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/{_common => }/TabBar/index.tsx (100%)

diff --git a/src/app/(user-menu)/mypage/layout.tsx b/src/app/(user-menu)/mypage/layout.tsx
index f991b1b0..3424a18f 100644
--- a/src/app/(user-menu)/mypage/layout.tsx
+++ b/src/app/(user-menu)/mypage/layout.tsx
@@ -1,5 +1,5 @@
+import TabBar from "@/components/TabBar";
 import SideBar from "@/components/_common/SideBar";
-import TabBar from "@/components/_common/TabBar";
 
 const myPageList = [
   {
diff --git a/src/components/_common/TabBar/index.tsx b/src/components/TabBar/index.tsx
similarity index 100%
rename from src/components/_common/TabBar/index.tsx
rename to src/components/TabBar/index.tsx