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

Feature/#27 :: 내가 공유한 지원서 & 팁 연동 완료
Pro-Pofol · Jun 12, 2024 · c891a79 · c891a79
2 parents a619bfd + a9f9ba0
commit c891a79
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 74 deletions.
diff --git a/src/app/profile/ProfileInfo.tsx b/src/app/profile/ProfileInfo.tsx
@@ -1,14 +1,33 @@
 import { Arrow, Bag, DefaultProfile, GradientImg, User } from '@/assets'
 import { ApplicationBox, Button, TipBox } from '@/components'
-import { applicationData, tipData } from '@/constants'
-import { getMe } from '@/services'
+import { getMe, getRecommend, recommendTip } from '@/services'
 import Image from 'next/image'
 import Link from 'next/link'
 import { LogoutButton } from './LogoutButton'
+import { TipBoxType } from '@/types'
 
 export const ProfileInfo = async () => {
   const { generation, user_major, name, oauth_id, profile_image } =
     await getMe()
+  const applicationData = await getRecommend().then((value) =>
+    value.data.posts
+      .filter(({ post_writer_id }) => oauth_id === post_writer_id)
+      .sort(
+        (a, b) =>
+          new Date(b.post_created_at).getTime() -
+          new Date(a.post_created_at).getTime(),
+      ),
+  )
+  const tipData: TipBoxType[] = await recommendTip().then(
+    (value: TipBoxType[]) =>
+      value
+        .filter(({ writer_id }) => oauth_id === writer_id)
+        .sort(
+          (a, b) =>
+            new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+        ),
+  )
+
   return (
     <>
       <div className="flex justify-center h-[180px] w-full relative">
@@ -69,55 +88,70 @@ export const ProfileInfo = async () => {
         <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>
+            {applicationData.length > 4 && (
+              <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>
+          {applicationData.length ? (
+            <div className="grid gap-3 grid-cols-2 sm:grid-cols-1">
+              {applicationData.slice(0, 4).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>
+            {tipData.length > 4 && (
+              <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>
+          {tipData.length ? (
+            <div className="grid gap-3 grid-cols-2 sm:grid-cols-1">
+              {tipData.slice(0, 4).map((value, index) => (
+                <TipBox
+                  name={value.writer_id}
+                  date={`${value.created_at}`}
+                  key={index}
+                  {...value}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="flex justify-center items-center h-[120px]">
+              <p className="text-bodyLarge text-gray500">
+                아직 공유한 지원서 팁이 없어요.
+              </p>
+            </div>
+          )}
         </article>
       </section>
     </>

diff --git a/src/app/profile/application/page.tsx b/src/app/profile/application/page.tsx
@@ -1,23 +1,23 @@
-'use client'
+import { ApplicationBox, BackButton } from '@/components'
+import { getMe, getRecommend } from '@/services'
 
-import { Arrow } from '@/assets'
-import { ApplicationBox } from '@/components'
-import { applicationData } from '@/constants'
-import { useRouter } from 'next/navigation'
-
-export default function MyApplicationPage() {
-  const router = useRouter()
+export default async function MyApplicationPage() {
+  const { oauth_id } = await getMe()
+  const applicationData = await getRecommend().then((value) =>
+    value.data.posts
+      .filter(({ post_writer_id }) => oauth_id === post_writer_id)
+      .sort(
+        (a, b) =>
+          new Date(b.post_created_at).getTime() -
+          new Date(a.post_created_at).getTime(),
+      ),
+  )
 
   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>
+          <BackButton />
           <div className="flex flex-col gap-2">
             <h3 className="text-titleLarge">공유한 지원서 자료</h3>
             <p className="text-bodySmall text-gray600">8개 내 지원서 자료</p>

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -1,10 +1,57 @@
 import { Suspense } from 'react'
 import { ProfileInfo } from './ProfileInfo'
+import { Button } from '@/components'
+import { LogoutButton } from './LogoutButton'
+import { Bag, User } from '@/assets'
 
 export default async function ProfilePage() {
   return (
     <main className="flex flex-col items-center">
-      <Suspense fallback={<>loading profile...</>}>
+      <Suspense
+        fallback={
+          <>
+            <div className="flex justify-center h-[180px] w-full relative animate-pulse">
+              <div className="w-full h-full object-cover border-b-2 border-gray100 bg-gray50" />
+              <div className="size-[120px] absolute -bottom-[60px] rounded-full border border-gray100 bg-gray100" />
+            </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">
+                <div className="h-9 w-20 bg-gray100 rounded-lg"></div>
+                <div className="h-6 w-32 bg-gray100 rounded-lg"></div>
+              </div>
+              <div className="flex gap-3">
+                <LogoutButton />
+                <Button kind="blue" size="small">
+                  정보 수정하기
+                </Button>
+              </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>
+                      <div className="h-5 w-8 bg-gray100 rounded-lg"></div>
+                    </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>
+                      <div className="h-5 w-8 bg-gray100 rounded-lg"></div>
+                    </div>
+                  </div>
+                </div>
+              </article>
+            </section>
+          </>
+        }
+      >
         <ProfileInfo />
       </Suspense>
     </main>

diff --git a/src/app/profile/tip/page.tsx b/src/app/profile/tip/page.tsx
@@ -1,31 +1,37 @@
-'use client'
+import { BackButton, TipBox } from '@/components'
+import { getMe, recommendTip } from '@/services'
+import { TipBoxType } from '@/types'
 
-import { Arrow } from '@/assets'
-import { TipBox } from '@/components'
-import { tipData } from '@/constants'
-import { useRouter } from 'next/navigation'
-
-export default function MyTipPage() {
-  const router = useRouter()
+export default async function MyTipPage() {
+  const { oauth_id } = await getMe()
+  const tipData: TipBoxType[] = await recommendTip().then(
+    (value: TipBoxType[]) =>
+      value
+        .filter(({ writer_id }) => oauth_id === writer_id)
+        .sort(
+          (a, b) =>
+            new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+        ),
+  )
 
   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>
+          <BackButton />
           <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} />
+            <TipBox
+              name={value.writer_id}
+              date={`${value.created_at}`}
+              key={index}
+              {...value}
+            />
           ))}
         </article>
       </section>

diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { Arrow } from '@/assets'
 import { useRouter } from 'next/navigation'