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

src/app/(user-menu)/mypage/template/page.tsx

@@ -43,10 +43,10 @@ const MyTemplatePage = () => {
   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">
           내 템플릿
           <Link href={"/mypage/template/create"}>
-            <Button className={`${buttonSize.md} bg-st-primary text-st-white`}>
+            <Button className={`${buttonSize.sm} bg-st-primary text-st-white`}>
               템플릿 생성
             </Button>
           </Link>
@@ -59,11 +59,11 @@ const MyTemplatePage = () => {
               onClick={() => handleTemplateDetail(template.id)}
               className="group flex cursor-pointer items-center justify-between p-40 transition hover:scale-105 hover:bg-st-gray-50"
             >
-              <div className="text-20 font-bold lg:text-23 xl:text-25">
+              <div className="text-10 font-bold sm:text-16">
                 {template.title}
               </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]">
                   생성일 {template.createdAt.slice(0, 10)}
                 </div>
                 <div
@@ -75,8 +75,8 @@ const MyTemplatePage = () => {
                 >
                   <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>