Merge pull request #297 from Team-Blitz-Steady/style/#294/my-application

💄 Style(#294): 내 신청서 반응형 구현

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>

src/app/(user-menu)/mypage/layout.tsx

@@ -1,3 +1,4 @@
+import TabBar from "@/components/TabBar";
 import SideBar from "@/components/_common/SideBar";
 
 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>
   );

src/components/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;

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"