From a1027749cb2326d11ddb87ab3b241a015a87109e Mon Sep 17 00:00:00 2001
From: SeungWoo <wjknn3123@gmail.com>
Date: Mon, 27 May 2024 22:24:53 +0900
Subject: [PATCH] ADD :: Profile Edit Page

---
 src/app/profile/edit/page.tsx | 52 +++++++++++++++++++++++++++++++++++
 src/app/profile/page.tsx      |  8 ++++--
 2 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/app/profile/edit/page.tsx

diff --git a/src/app/profile/edit/page.tsx b/src/app/profile/edit/page.tsx
new file mode 100644
index 0000000..157dd1b
--- /dev/null
+++ b/src/app/profile/edit/page.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { Add, Arrow, DecorationImg_1 } from '@/assets'
+import { Button, Input, Select } from '@/components'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+
+export default function ProfileEditPage() {
+  const router = useRouter()
+
+  return (
+    <main className="min-h-[100dvh] flex justify-center">
+      <section className="flex flex-col gap-16 p-[60px_40px_120px] sm:px-6 max-w-[600px] 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>
+          <h3 className="text-titleLarge">프로필 수정</h3>
+        </div>
+        <article className="flex gap-10 items-center">
+          <Image
+            src={DecorationImg_1}
+            alt="Profile Image"
+            width={240}
+            height={240}
+            priority
+            className="size-[120px] rounded-full border border-gray100"
+          />
+          <button className="p-12 rounded-full border border-gray200 bg-gray100">
+            <Add />
+          </button>
+        </article>
+        <article className="flex flex-col gap-10">
+          <Input label="기수" placeholder="기수를 입력해 주세요." value="8" />
+          <Select
+            label="전공"
+            placeholder="전공 선택"
+            value="Frontend"
+            options={[{ value: 'Frontend', name: 'Frontend' }]}
+            change={() => {}}
+          />
+        </article>
+        <Button size="large" className="w-full">
+          프로필 수정하기
+        </Button>
+      </section>
+    </main>
+  )
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 690cfd1..fe17e57 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -92,9 +92,11 @@ export default function ProfilePage() {
           <Button kind="gray" size="small">
             로그아웃
           </Button>
-          <Button kind="blue" size="small">
-            정보 수정하기
-          </Button>
+          <Link href="/profile/edit">
+            <Button kind="blue" size="small">
+              정보 수정하기
+            </Button>
+          </Link>
         </div>
         <article className="flex flex-col gap-6 w-full">
           <h5 className="text-titleSmall">기본 정보</h5>