Merge pull request #33 from Pro-Pofol/feature/#27-Mypage

Feature/#27 mypage

next.config.mjs

@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
+}
 
-export default nextConfig;
+export default nextConfig

src/app/profile/LogoutButton.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Button } from '@/components'
+import { removeCookie } from '@/utils'
+import { useRouter } from 'next/navigation'
+
+export const LogoutButton = () => {
+  const router = useRouter()
+
+  const logout = () => {
+    console.log('logout!!')
+    removeCookie('RF-TOKEN')
+    removeCookie('access_token')
+    removeCookie('Access_Token')
+    router.replace('/')
+  }
+  return (
+    <Button kind="gray" size="small" onClick={logout}>
+      로그아웃
+    </Button>
+  )
+}

src/app/profile/ProfileInfo.tsx

@@ -0,0 +1,124 @@
+import { Arrow, Bag, DefaultProfile, GradientImg, User } from '@/assets'
+import { ApplicationBox, Button, TipBox } from '@/components'
+import { applicationData, tipData } from '@/constants'
+import { getMe } from '@/services'
+import Image from 'next/image'
+import Link from 'next/link'
+import { LogoutButton } from './LogoutButton'
+
+export const ProfileInfo = async () => {
+  const { generation, major, name, oauth_id, profile_image } = await getMe()
+  return (
+    <>
+      <div className="flex justify-center h-[180px] w-full relative">
+        <Image
+          src={GradientImg}
+          alt="Profile Banner"
+          width={1920}
+          height={180}
+          className="w-full h-full object-cover border-b-2 border-gray100"
+          priority
+        />
+        <Image
+          src={profile_image || DefaultProfile}
+          alt="User Profile"
+          width={240}
+          height={240}
+          className="size-[120px] absolute -bottom-[60px] rounded-full border border-gray100"
+          priority
+        />
+      </div>
+      <section className="flex flex-col items-center gap-10 p-[60px_40px_120px] sm:px-6 max-w-[880px] w-full">
+        <div className="flex flex-col items-center gap-1 py-6">
+          <p className="text-titleMedium">{name}</p>
+          <p className="text-bodySmall text-gray600">팔로잉 0 | 팔로워 0</p>
+        </div>
+        <div className="flex gap-3">
+          <LogoutButton />
+          <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>
+          <div className="flex gap-10">
+            <div className="flex flex-col items-center gap-2">
+              <div className="p-3 rounded-xl border border-blue100 bg-blue50">
+                <User size={28} className="text-blue500" />
+              </div>
+              <div className="flex flex-col items-center gap-[2px]">
+                <p className="text-bodySmall">기수</p>
+                <p className="text-labelMedium text-gray600">{generation}기</p>
+              </div>
+            </div>
+            <div className="flex flex-col items-center gap-2">
+              <div className="p-3 rounded-xl border border-blue100 bg-blue50">
+                <Bag size={28} className="text-blue500" />
+              </div>
+              <div className="flex flex-col items-center gap-[2px]">
+                <p className="text-bodySmall">전공</p>
+                <p className="text-labelMedium text-gray600">{major}</p>
+              </div>
+            </div>
+          </div>
+        </article>
+        <div className="w-full h-[1px] bg-gray200"></div>
+        <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="/profile/application"
+              className="flex items-center text-gray600 group"
+            >
+              <p className="text-labelLarge">더보기</p>
+              <Arrow
+                direction="right"
+                size={16}
+                className="group-hover:translate-x-1 transition-transform"
+              />
+            </Link> */}
+          </div>
+          {/* <div className="grid gap-3 grid-cols-2 sm:grid-cols-1">
+            {applicationData.map((value, index) => (
+              <ApplicationBox key={index} {...value} />
+            ))}
+          </div> */}
+          <div className="flex justify-center items-center h-[120px]">
+            <p className="text-bodyLarge text-gray500">
+              아직 공유한 지원서가 없어요.
+            </p>
+          </div>
+        </article>
+        <div className="w-full h-[1px] bg-gray200"></div>
+        <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="/profile/tip"
+              className="flex items-center text-gray600 group"
+            >
+              <p className="text-labelLarge">더보기</p>
+              <Arrow
+                direction="right"
+                size={16}
+                className="group-hover:translate-x-1 transition-transform"
+              />
+            </Link> */}
+          </div>
+          {/* <div className="grid gap-3 grid-cols-2 sm:grid-cols-1">
+            {tipData.map((value, index) => (
+              <TipBox key={index} {...value} />
+            ))}
+          </div> */}
+          <div className="flex justify-center items-center h-[120px]">
+            <p className="text-bodyLarge text-gray500">
+              아직 공유한 지원서 팁이 없어요.
+            </p>
+          </div>
+        </article>
+      </section>
+    </>
+  )
+}

src/app/profile/edit/ProfileEdit.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { BackButton, Button, Input, Select } from '@/components'
+import { Add, DefaultProfile } from '@/assets'
+import Image from 'next/image'
+import { UserType } from '@/types'
+import { majorOption } from '@/constants'
+import { useState } from 'react'
+import { uploadFile } from '@/utils'
+
+interface ImgDataType {
+  img?: File
+  imgString?: string
+}
+
+export const ProfileEdit = ({ myData }: { myData: UserType }) => {
+  const [generation, setGeneration] = useState<string>(`${myData.generation}`)
+  const [major, setMajor] = useState<string>(myData.major)
+  const [imgData, setImgData] = useState<ImgDataType>({
+    imgString: myData.profile_image,
+  })
+
+  const editProfile = () => {}
+
+  return (
+    <>
+      <div className="flex flex-col gap-8">
+        <BackButton />
+        <h3 className="text-titleLarge">프로필 수정</h3>
+      </div>
+      <article className="flex gap-10 items-center">
+        <Image
+          src={imgData.imgString || DefaultProfile}
+          alt="Profile Image"
+          width={240}
+          height={240}
+          priority
+          className="size-[120px] rounded-full border border-gray100"
+        />
+        <input
+          type="file"
+          className="hidden"
+          id="profileImage"
+          onChange={(e) =>
+            uploadFile(
+              e,
+              (file) => setImgData((data) => ({ ...data, img: file })),
+              (str) => setImgData((data) => ({ ...data, imgString: str })),
+            )
+          }
+        />
+        <label
+          htmlFor="profileImage"
+          className="p-12 rounded-full cursor-pointer border border-gray200 bg-gray100"
+        >
+          <Add />
+        </label>
+      </article>
+      <article className="flex flex-col gap-10">
+        <Input
+          label="기수"
+          placeholder="기수를 입력해 주세요."
+          value={generation}
+          change={(e) => setGeneration(e.target.value.slice(0, 2))}
+        />
+        <Select
+          label="전공"
+          placeholder="전공 선택"
+          value={major}
+          options={majorOption}
+          change={setMajor}
+        />
+      </article>
+      <Button size="large" className="w-full" onClick={editProfile}>
+        프로필 수정하기
+      </Button>
+    </>
+  )
+}

src/app/profile/edit/page.tsx

@@ -1,51 +1,13 @@
-'use client'
+import { getMe } from '@/services'
+import { ProfileEdit } from './ProfileEdit'
 
-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()
+export default async function ProfileEditPage() {
+  const myData = await getMe()
 
   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>
+        <ProfileEdit myData={myData} />
       </section>
     </main>
   )