ADD :: My Application & Tip List Page

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

Hide file tree

Showing 3 changed files with 78 additions and 4 deletions.
diff --git a/src/app/profile/application/page.tsx 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
@@ -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
@@ -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>
+  )
+}