From 9b49995df17a8ac5487e15183c0ff4f6988e792b Mon Sep 17 00:00:00 2001
From: SeungWoo <wjknn3123@gmail.com>
Date: Mon, 27 May 2024 20:26:11 +0900
Subject: [PATCH] ADD :: My Application & Tip List Page

---
 src/app/profile/application/page.tsx | 34 ++++++++++++++++++++++++++++
 src/app/profile/page.tsx             | 14 ++++++++----
 src/app/profile/tip/page.tsx         | 34 ++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 src/app/profile/application/page.tsx
 create mode 100644 src/app/profile/tip/page.tsx

diff --git a/src/app/profile/application/page.tsx b/src/app/profile/application/page.tsx
new file mode 100644
index 0000000..8123973
--- /dev/null
+++ b/src/app/profile/application/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { Arrow } from '@/assets'
+import { ApplicationBox } from '@/components'
+import { useRouter } from 'next/navigation'
+import { applicationData } from '../page'
+
+export default function MyApplicationPage() {
+  const router = useRouter()
+
+  return (
+    <main className="min-h-[100dvh] p-[60px_0_120px] flex justify-center">
+      <section className="flex flex-col gap-10 px-10 sm:px-6 max-w-[1280px] w-full">
+        <div className="flex flex-col gap-8">
+          <button
+            onClick={() => router.back()}
+            className="p-2 rounded-lg border border-gray200 group hover:bg-gray50 transition-colors w-fit"
+          >
+            <Arrow className="group-hover:-translate-x-1 transition-transform" />
+          </button>
+          <div className="flex flex-col gap-2">
+            <h3 className="text-titleLarge">공유한 지원서 자료</h3>
+            <p className="text-bodySmall text-gray600">8개 내 지원서 자료</p>
+          </div>
+        </div>
+        <article className="grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-3">
+          {applicationData.map((value, index) => (
+            <ApplicationBox key={index} {...value} />
+          ))}
+        </article>
+      </section>
+    </main>
+  )
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 569c8c0..690cfd1 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -4,7 +4,7 @@ import { ApplicationPreviewType } from '@/types'
 import Image from 'next/image'
 import Link from 'next/link'
 
-const applicationData: ApplicationPreviewType[] = [
+export const applicationData: ApplicationPreviewType[] = [
   {
     post_id: 0,
     post_title: '개인적으로 완벽한 포트폴리오',
@@ -39,7 +39,7 @@ const applicationData: ApplicationPreviewType[] = [
   },
 ]
 
-const tipData = [
+export const tipData = [
   {
     title: '지원서 작성 팁 3가지',
     content:
@@ -123,7 +123,10 @@ 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 group">
+            <Link
+              href="/profile/application"
+              className="flex items-center text-gray600 group"
+            >
               <p className="text-labelLarge">더보기</p>
               <Arrow
                 direction="right"
@@ -142,7 +145,10 @@ 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 group">
+            <Link
+              href="/profile/tip"
+              className="flex items-center text-gray600 group"
+            >
               <p className="text-labelLarge">더보기</p>
               <Arrow
                 direction="right"
diff --git a/src/app/profile/tip/page.tsx b/src/app/profile/tip/page.tsx
new file mode 100644
index 0000000..5b1fc50
--- /dev/null
+++ b/src/app/profile/tip/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { Arrow } from '@/assets'
+import { TipBox } from '@/components'
+import { useRouter } from 'next/navigation'
+import { tipData } from '../page'
+
+export default function MyTipPage() {
+  const router = useRouter()
+
+  return (
+    <main className="min-h-[100dvh] p-[60px_0_120px] flex justify-center">
+      <section className="flex flex-col gap-10 px-10 sm:px-6 max-w-[1280px] w-full">
+        <div className="flex flex-col gap-8">
+          <button
+            onClick={() => router.back()}
+            className="p-2 rounded-lg border border-gray200 group hover:bg-gray50 transition-colors w-fit"
+          >
+            <Arrow className="group-hover:-translate-x-1 transition-transform" />
+          </button>
+          <div className="flex flex-col gap-2">
+            <h3 className="text-titleLarge">공유한 지원서 팁</h3>
+            <p className="text-bodySmall text-gray600">8개 내 지원서 팁</p>
+          </div>
+        </div>
+        <article className="grid grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-3">
+          {tipData.map((value, index) => (
+            <TipBox key={index} {...value} />
+          ))}
+        </article>
+      </section>
+    </main>
+  )
+}