From 1f9588485b5868bb8e5abac01c4b2f37f9630abf Mon Sep 17 00:00:00 2001
From: Musix <ljw927@naver.com>
Date: Thu, 30 Nov 2023 16:53:30 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Style(#291):=20=ED=85=9C?=
 =?UTF-8?q?=ED=94=8C=EB=A6=BF=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mypage/template/create/page.tsx           | 12 +++++-----
 .../mypage/template/edit/[id]/page.tsx        | 22 +++++++++----------
 src/components/TabBar/index.tsx               |  4 +++-
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/app/(user-menu)/mypage/template/create/page.tsx b/src/app/(user-menu)/mypage/template/create/page.tsx
index 383c7cc6..069691e2 100644
--- a/src/app/(user-menu)/mypage/template/create/page.tsx
+++ b/src/app/(user-menu)/mypage/template/create/page.tsx
@@ -81,7 +81,7 @@ const CreateTemplatePage = () => {
   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">
           템플릿 생성
           <Button
             className={`${buttonSize.sm} bg-st-primary text-st-white`}
@@ -96,14 +96,14 @@ const CreateTemplatePage = () => {
             {question.map((item, index) => (
               <div
                 key={index}
-                className="flex h-70 w-full items-center gap-30 rounded-10 p-10 shadow-lg"
+                className="flex h-50 w-full items-center gap-20 rounded-10 p-10 shadow-lg lg:h-70 lg:gap-30"
               >
-                <div className="h-60 w-10 rounded-full bg-st-skyblue-50"></div>
+                <div className="h-40 w-7 rounded-full bg-st-skyblue-50 lg:h-60 lg:w-10"></div>
                 <input
                   type="text"
                   placeholder="질문을 입력해 주세요."
                   value={item.value}
-                  className="h-50 w-full text-20 text-st-black outline-none"
+                  className="h-50 w-full text-15 text-st-black outline-none lg:text-20"
                   onChange={(event) => handleInputChange(event, item.id)}
                 />
                 <div
@@ -122,7 +122,7 @@ const CreateTemplatePage = () => {
                   <Icon
                     name="cross"
                     size={20}
-                    color=""
+                    color="w-15 h-15 lg:w-20 lg:h-20"
                   />
                 </div>
               </div>
@@ -130,7 +130,7 @@ const CreateTemplatePage = () => {
           </div>
         </div>
         <div className="h-5 w-full bg-st-gray-400"></div>
-        <div className="mt-20 flex w-full justify-end gap-20">
+        <div className="mt-20 flex w-full justify-end gap-10 lg:gap-20">
           <Button
             onClick={() => backToTemplate()}
             className={`${buttonSize.sm} bg-st-red text-st-white`}
diff --git a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
index 72eb004b..61331d6d 100644
--- a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
+++ b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
@@ -111,18 +111,18 @@ const EditTemplatePage = () => {
   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">
           {data?.title} 템플릿
           {isModify ? (
-            <div className="flex justify-center gap-20">
+            <div className="flex justify-center gap-10 lg:gap-20">
               <Button
-                className={`${buttonSize.lg} bg-st-red text-st-white`}
+                className={`${buttonSize.sm} bg-st-red text-st-white`}
                 onClick={() => handleDeleteTemplate(templateId)}
               >
                 템플릿 삭제
               </Button>
               <Button
-                className={`${buttonSize.lg} bg-st-primary text-st-white`}
+                className={`${buttonSize.sm} bg-st-primary text-st-white`}
                 onClick={() => handleAddQuestion(content)}
               >
                 질문 추가
@@ -143,16 +143,16 @@ const EditTemplatePage = () => {
             {question.map((item, index) => (
               <div
                 key={index}
-                className="flex h-70 w-full items-center gap-30 rounded-10 p-10 shadow-lg"
+                className="flex h-50 w-full items-center gap-20 rounded-10 p-10 shadow-lg lg:h-70 lg:gap-30"
               >
-                <div className="h-60 w-10 rounded-full bg-st-skyblue-50"></div>
+                <div className="h-40 w-7 rounded-full bg-st-skyblue-50 lg:h-60 lg:w-10"></div>
                 <input
                   type="text"
                   placeholder="질문을 입력해 주세요."
                   value={item.value}
                   disabled={!isModify}
                   onChange={(event) => handleInputChange(event, item.id)}
-                  className="h-50 w-5/6 bg-st-white text-20 text-st-black outline-none"
+                  className="h-50 w-5/6 bg-st-white text-15 text-st-black outline-none lg:text-20"
                 />
                 {isModify && (
                   <div
@@ -171,7 +171,7 @@ const EditTemplatePage = () => {
                     <Icon
                       name="cross"
                       size={20}
-                      color=""
+                      color="w-15 h-15 lg:w-20 lg:h-20"
                     />
                   </div>
                 )}
@@ -180,18 +180,18 @@ const EditTemplatePage = () => {
           </div>
         </div>
         <div className="h-5 w-full bg-st-gray-400"></div>
-        <div className="mt-20 flex w-full justify-end gap-20">
+        <div className="mt-20 flex w-full justify-end gap-10 lg:gap-20">
           {isModify && (
             <>
               <Button
                 onClick={() => backToTemplate()}
-                className={`${buttonSize.lg} bg-st-red text-st-white`}
+                className={`${buttonSize.sm} bg-st-red text-st-white`}
               >
                 취소하기
               </Button>
               <Button
                 onClick={() => openModal()}
-                className={`${buttonSize.lg} bg-st-primary text-st-white`}
+                className={`${buttonSize.sm} bg-st-primary text-st-white`}
               >
                 수정완료
               </Button>
diff --git a/src/components/TabBar/index.tsx b/src/components/TabBar/index.tsx
index 4cd5bca6..ad6006c8 100644
--- a/src/components/TabBar/index.tsx
+++ b/src/components/TabBar/index.tsx
@@ -6,6 +6,8 @@ import { usePathname } from "next/navigation";
 const TabBar = () => {
   const path = usePathname();
 
+  console.log(path);
+
   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"}>
@@ -20,7 +22,7 @@ const TabBar = () => {
       <Link href={"/mypage/template"}>
         <div
           className={`${
-            path === "/mypage/template" &&
+            path.split("/")[2] === "template" &&
             "border-b-3 border-st-primary text-st-primary"
           } p-10 text-12 font-bold text-st-gray-100 sm:text-16`}
         >