💄 Style(#291): 템플릿 페이지 반응형

Team-Blitz-Steady · Nov 30, 2023 · 1f95884 · 1f95884
1 parent 308464b
commit 1f95884
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git 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,15 +122,15 @@ const CreateTemplatePage = () => {
                   <Icon
                     name="cross"
                     size={20}
-                    color=""
+                    color="w-15 h-15 lg:w-20 lg:h-20"
                   />
                 </div>
               </div>
             ))}
           </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
@@ -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
@@ -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`}
         >