EDIT :: Application & Tip Box Style

Pro-Pofol · May 27, 2024 · 1486f3e · 1486f3e
1 parent a0247b5
commit 1486f3e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -123,12 +123,16 @@ export default function ProfilePage() {
         <article className="flex flex-col gap-6 w-full">
           <div className="flex items-center justify-between w-full">
             <h5 className="text-titleSmall">공유한 지원서 자료</h5>
-            <Link href="#" className="flex items-center text-gray600">
+            <Link href="#" className="flex items-center text-gray600 group">
               <p className="text-labelLarge">더보기</p>
-              <Arrow direction="right" size={16} />
+              <Arrow
+                direction="right"
+                size={16}
+                className="group-hover:translate-x-1 transition-transform"
+              />
             </Link>
           </div>
-          <div className="grid gap-3 grid-cols-2">
+          <div className="grid gap-3 grid-cols-2 sm:grid-cols-1">
             {applicationData.map((value, index) => (
               <ApplicationBox key={index} {...value} />
             ))}
@@ -138,12 +142,16 @@ export default function ProfilePage() {
         <article className="flex flex-col gap-6 w-full">
           <div className="flex items-center justify-between w-full">
             <h5 className="text-titleSmall">공유한 지원서 팁</h5>
-            <Link href="#" className="flex items-center text-gray600">
+            <Link href="#" className="flex items-center text-gray600 group">
               <p className="text-labelLarge">더보기</p>
-              <Arrow direction="right" size={16} />
+              <Arrow
+                direction="right"
+                size={16}
+                className="group-hover:translate-x-1 transition-transform"
+              />
             </Link>
           </div>
-          <div className="grid gap-3 grid-cols-2">
+          <div className="grid gap-3 grid-cols-2 sm:grid-cols-1">
             {tipData.map((value, index) => (
               <TipBox key={index} {...value} />
             ))}

diff --git a/src/components/ApplicationBox.tsx b/src/components/ApplicationBox.tsx
@@ -46,19 +46,19 @@ export const ApplicationBox = ({
   return (
     <Link
       href={`/application/${post_id}`}
-      className="flex flex-col w-full p-8 gap-3 border border-gray100 bg-white rounded-3xl cursor-pointer"
+      className="flex flex-col w-full p-8 sm:p-6 gap-3 border border-gray100 bg-white rounded-3xl cursor-pointer group"
     >
       <div
         className={`px-[11px] w-fit h-fit py-1 rounded-full text-labelLarge ${tagColor[post_post_type]}`}
       >
         {tagToKorean[post_post_type]}
       </div>
       <div className="flex flex-col gap-2">
-        <span className="text-titleMedium text-black truncate">
+        <span className="text-titleMedium sm:text-titleSmall text-black group-hover:text-blue500 truncate transition-colors">
           {post_title}
         </span>
         <div className="flex justify-between items-center flex-wrap text-nowrap">
-          <div className="text-bodySmall text-gray600 flex items-center gap-2">
+          <div className="text-bodySmall sm:text-labelMedium text-gray600 flex items-center gap-2">
             <span>{user_oauth_id}</span>
             <div className="w-0.5 h-0.5 bg-gray600 rounded-full" />
             <span>{dateToString(post_created_at)}</span>

diff --git a/src/components/TipBox.tsx b/src/components/TipBox.tsx
@@ -30,14 +30,14 @@ export const TipBox = ({ title, content, name, date }: TipBoxProps) => {
           </div>
         </div>
       ) : (
-        <div className="p-8 flex flex-col w-full min-w-[240px] gap-2 items-start border border-gray100 bg-white rounded-3xl cursor-pointer">
-          <span className="text-titleSmall text-black truncate w-full">
+        <div className="p-8 sm:p-6 flex flex-col w-full min-w-[240px] gap-2 items-start border border-gray100 bg-white rounded-3xl cursor-pointer group">
+          <span className="text-titleSmall text-black group-hover:text-blue500 transition-colors truncate w-full">
             {title}
           </span>
-          <span className="text-bodySmall text-gray500 line-clamp-2 w-full flex-1">
+          <span className="text-bodySmall sm:text-labelMedium text-gray500 line-clamp-2 w-full flex-1">
             {content}
           </span>
-          <div className="text-bodySmall text-gray600 flex items-center gap-2 w-fit sm:w-full text-nowrap pt-3">
+          <div className="text-bodySmall sm:text-labelMedium text-gray600 flex items-center gap-2 w-fit sm:w-full text-nowrap pt-3">
             <span>{name}</span>
             <div className="w-0.5 h-0.5 bg-gray600 rounded-full" />
             <span>{dateToString(date)}</span>