Merge pull request #185 from Meetfolio-Project-CodeZ-Team/develop

merge to main

src/app/(route)/coverletter/page.tsx

@@ -43,7 +43,7 @@ export default function CovletMainPage() {
 
   return (
     <section className="flex flex-col items-center min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="w-[1440px] mb-[250px]">
         {covletNumber === 0 && <CovletMain isEdit={false} />}
         {covletNumber === 1 && <CovletSave />}

src/app/(route)/edit-coverletter/[id]/page.tsx

@@ -59,7 +59,7 @@ const EditCoverLetterPage = ({ params }: { params: { id: string } }) => {
 
   return (
     <section className="flex flex-col items-center min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="w-[1440px] mb-[250px]">
         {covletNumber === 0 && <CovletMain isEdit={true} id={params.id} />}
         {covletNumber === 1 && <CovletSave />}

src/app/(route)/edit-experience/[id]/page.tsx

@@ -54,7 +54,7 @@ const EditExperiencePage = ({ params }: { params: { id: string } }) => {
 
   return (
     <section className="flex flex-col items-center min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="w-[1440px] mb-[250px]">
         {experienceNumber === 0 && (
           <ExpInfoContainer isEdit={true} id={params.id} />

src/app/(route)/experience/page.tsx

@@ -54,7 +54,7 @@ export default function ExperiencePage() {
 
   return (
     <section className="flex flex-col items-center min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="w-[1440px] mb-[250px]">
         {experienceNumber === 0 && <ExpInfoContainer isEdit={false} />}
         {experienceNumber === 1 && <ExpKeywordContainer />}

src/app/(route)/mypage/boardDetail/[id]/page.tsx

@@ -41,7 +41,7 @@ export default function BoardDetailPage({
 
   return (
     <section className="flex flex-col min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="flex w-[full] h-[980px] mb-[200px]">
         <UserNavContainer selected={'board'} nickname={userInfo?.memberName} />
         <div className="flex-grow">

src/app/(route)/mypage/myCovletDetail/[id]/page.tsx

@@ -58,7 +58,7 @@ const MyCovletDetailPage = ({ params }: { params: { id: string } }) => {
 
   return (
     <section className="flex flex-col min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="flex w-full h-full mb-[200px]">
         <UserNavContainer
           isGuest={isGuest || ''}

src/app/(route)/mypage/myboard/page.tsx

@@ -25,7 +25,7 @@ export default function MyBoardPage() {
   }, [])
   return (
     <section className="flex flex-col min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="flex w-full h-full mb-[200px]">
         <UserNavContainer selected={'board'} nickname={userInfo?.memberName} />
         <div className="flex-grow ">

src/app/(route)/mypage/mypoint/page.tsx

@@ -81,7 +81,7 @@ export default function MyPointPage() {
   }, [])
   return (
     <section className="flex flex-col min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="flex w-full h-full mb-[200px]">
         <UserNavContainer selected={'points'} nickname={userInfo?.memberName} />
         <div className="flex-grow">

src/app/(route)/mypage/page.tsx

@@ -24,7 +24,7 @@ export default function UserMyPage() {
   }, [])
   return (
     <section className="flex flex-col min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile} />
       <div className="flex w-full h-full mb-[200px]">
         <UserNavContainer
           selected={'portfolio'}

src/app/(route)/mypage/userinfo/page.tsx

@@ -20,7 +20,7 @@ export default function MyUserPage() {
   }, [])
   return (
     <section className="flex flex-col min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="flex w-full h-full mb-[200px]">
         <UserNavContainer selected={'user'} nickname={userInfo?.memberName} />
         <div className="flex-grow">

src/app/(route)/mypage/withdraw/page.tsx

@@ -20,7 +20,7 @@ export default function WithDrawPage() {
   }, [])
   return (
     <section className="flex flex-col min-h-screen relative">
-      <Header nickname={userInfo?.memberName} />
+      <Header nickname={userInfo?.memberName} profile={userInfo?.profile}/>
       <div className="flex w-full h-full mb-[200px]">
         <UserNavContainer selected={'user'} nickname={userInfo?.memberName} />
         <div className="flex-grow">

src/app/api/mypage/mypayment/route.ts

@@ -4,7 +4,9 @@ import { NextResponse } from 'next/server'
 
 export async function GET(request: Request): Promise<NextResponse> {
   let accessToken = getCookie(request, 'accessToken')
-  const data = await getUserPayment(accessToken).then((data) => data)
+  const { searchParams } = new URL(request.url)
+  const page = searchParams.get('page') || '0'
+  const data = await getUserPayment(accessToken, page).then((data) => data)
   console.log(data, '유저 정보 조회 요청이에요')
   return NextResponse.json(data)
 }

src/app/components/coverletter/AiAnalysis.tsx

@@ -5,6 +5,7 @@ import { Doughnut } from 'react-chartjs-2';
 import Chart from 'chart.js/auto';
 import { useModal } from '@/app/hooks/useModal';
 import AnalysisSatisfaction from './AnalysisSatisfaction';
+import JobAnal2 from '../mypage/common/JobAnal2';
 
 interface AnalysisData {
   analysis_id: number
@@ -64,7 +65,7 @@ const AiAnalysis = ({ analysisData }: AiAnalysisProps) => {
     <div className="w-[1000px] h-[1000px] mb-[100px] relative  mt-[30px] items-center justify-center mx-auto bg-gray-50 rounded-[15px]">
       <div className="w-[981px] h-[1000px] left-0 top-0 flex items-center justify-center mx-auto relative ">
         <div className="w-[773px] h-[52px] left-[160px] top-[101px] absolute text-black text-3xl font-bold  leading-[45px]">
-          {userInfo?.memberName}님과 빅데이터의 직무 적합도는{' '}
+          {userInfo?.memberName}님과 {analysisData?.job_keyword}분야의 직무 적합도는{' '}
           {analysisData?.job_suitability}%입니다.
         </div>
         <div className="left-[280px] top-[643px] absolute text-black text-2xl font-bold  leading-9">
@@ -73,19 +74,20 @@ const AiAnalysis = ({ analysisData }: AiAnalysisProps) => {
         <div className="w-[547px] h-[29px] left-[200px] top-[150px] absolute text-black text-2xl font-medium  leading-9">
           👍 조금만 더 노력하면 분명 원하는 목표에 도달할 거예요!
         </div>
-        <div className="w-[180px] h-[124px] left-[511px] top-[320px] absolute text-black text-7xl font-bold  leading-[108px]">
+        <div className="w-[180px] h-[124px] left-[581px] top-[360px] absolute text-black text-7xl font-bold  leading-[108px]">
           {analysisData?.job_suitability}%
         </div>
-        <div className="w-[360px] h-[360px] left-[135px] top-[198px] absolute bg-white justify-center items-center inline-flex">
-          <div className="w-[360px] h-[360px] relative">
-            <div className="w-[360px] h-[360px] left-0 top-0 absolute bg-white" />
-            <div className="w-[300px] h-[300px] left-[40px] top-[40px] absolute bg-blue-400 rounded-full shadow" />
-            <div className="w-[300px] h-[300px] left-[40px] top-[40px] absolute bg-zinc-200 rounded-full" />
-            <div className="w-[85px] h-7 left-[229px] top-[190px] absolute text-black text-xl font-bold  leading-[30px]">
-              {analysisData?.job_keyword}
+        <div className="w-[360px] h-[360px] left-[165px] top-[198px] absolute  justify-center items-center inline-flex">
+              <div className="w-[360px] h-[360px] relative">
+                {/* <div className="w-[360px] h-[360px] left-0 top-0 absolute bg-white" />
+                <div className="w-[300px] h-[300px] left-[40px] top-[40px] absolute bg-blue-400 rounded-full shadow" />
+                <div className="w-[300px] h-[300px] left-[40px] top-[40px] absolute bg-zinc-200 rounded-full" /> */}
+                <div className="w-[85px] h-7 left-[179px] top-[205px] absolute text-black text-xl text-center font-bold  leading-[30px]">
+                  {transKeyword(String(analysisData?.job_keyword))}
+                </div>
+                <JobAnal2 backend={Number(analysisData?.job_suitability)} all={100-Number(analysisData?.job_suitability)}  />
+              </div>
             </div>
-          </div>
-        </div>
         <div className="w-[569px] h-[202px] left-[200px] top-[713px] absolute">
           <div className="w-[569px] h-[202px] left-0 top-0 absolute">
             <div className="w-[120px] h-[120px] left-0 top-[67px] absolute bg-slate-200 rounded-full" />
@@ -131,3 +133,18 @@ const AiAnalysis = ({ analysisData }: AiAnalysisProps) => {
 }
 
 export default AiAnalysis
+
+const transKeyword = (keyword: string) => {
+  switch (keyword) {
+    case 'BACKEND':
+      return '백엔드'
+    case 'AI':
+      return 'AI'
+      case 'WEB':
+      return '웹개발'
+    case 'APP':
+      return '앱개발'
+    case 'DESIGN':
+      return '디자인'
+  }
+}

src/app/components/mypage/BoardCardDetail.tsx

@@ -1,13 +1,12 @@
-import { NULLPOST } from '@/app/constants/board'
+import { useModal } from '@/app/hooks/useModal'
 import { selectedPostId } from '@/app/recoil/board'
-import Like from '@/app/ui/svg/main/Like'
 import { deletePostAlert } from '@/app/utils/toast'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
-import Button from '../common/Button'
-import { useModal } from '@/app/hooks/useModal'
 import DeleteModal from '../admin/common/DeleteModal'
+import Button from '../common/Button'
+import CommentContainer2 from './common/CommentContainer2'
 interface BoardCardDetailProps {
   title?: string
   content?: string
@@ -69,16 +68,17 @@ const BoardCardDetail = ({ nickname }: BoardDetailContainer) => {
   console.log('디테일 가져온 데이터', data)
   console.log('닉네임', nickname)
 
+  const goBack = () => {
+    router.push('/mypage/myboard')
+  }
+
   return (
     <div className="w-full h-[982px] relative">
       {isSelected ? (
         <>
           <div className="w-full h-[982px] left-0 top-0 absolute bg-gray-50" />
-          <div className="w-[1014.23px] h-[747px] left-[71.39px] top-[64px] absolute">
-            <div className="w-[962px] h-[0px] left-0 top-[747px] absolute border border-stone-300"></div>
-            <div className="left-[10px] top-[702px] absolute text-gray-900 text-[22px] font-semibold leading-[33px]">
-              댓글
-            </div>
+          <div className="w-[1014.23px] h-[907px] left-[71.39px] top-[64px] absolute">
+
             <div className="w-[964px] h-[511px] left-[10px] top-[198px] absolute text-gray-900 text-xl font-medium leading-[30px]">
               {data?.content}
             </div>
@@ -94,25 +94,14 @@ const BoardCardDetail = ({ nickname }: BoardDetailContainer) => {
                 </div>
               </div>
             </div>
+            <div className="w-[1002px] h-[119px] left-[0px] top-[703px] absolute">
+          <CommentContainer2
+            postId={selectedId}
+            isLiked={data?.likeStatus === 'ACTIVE'}
+          />
           </div>
-          <div className="w-[962px] h-[119px] left-[71px] top-[833px] absolute">
-            <div className="w-6 h-6 left-[918px] top-[20px] absolute rounded-[10px]" />
-            <div className="w-[204px] h-[42px] left-[16px] top-[20px] absolute">
-              <div className="w-[42px] h-[42px] left-0 top-0 absolute bg-zinc-600 rounded-full" />
-              <div className="w-[147px] h-[42px] left-[50px] top-0 absolute">
-                <div className="w-[83.69px] h-[42px] left-0 top-0 absolute text-black text-[15px] font-bold leading-snug">
-                  {data?.memberName}
-                </div>
-                <div className="w-[54.72px] h-[42px] left-[92.28px] top-0 absolute text-black text-[15px] font-bold leading-snug">
-                  {' '}
-                  3분전
-                </div>
-              </div>
-            </div>
-            <div className="w-[114px] h-[35.89px] left-[16px] top-[68px] absolute text-black text-lg font-medium leading-[27px]">
-              훌륭합니다.
-            </div>
           </div>
+
           <div className="w-[322px] h-[37px] left-[82px] top-[190px] absolute justify-start items-center gap-[19px] inline-flex">
             {data?.peopleNumber && (
               <div className="w-[70px] h-[25px] px-5 bg-blue-400 rounded-[15px] justify-center items-center gap-2 flex">
@@ -162,22 +151,12 @@ const BoardCardDetail = ({ nickname }: BoardDetailContainer) => {
               {data?.memberName}
             </div>
           </div>
-          <div className="w-[97px] h-[33px] left-[84px] top-[713px] absolute">
-            <div className="left-[37px] top-0 absolute text-gray-900 text-[22px] font-semibold leading-[33px]">
-              좋아요
-            </div>
-            <div className="w-[30px] h-[28px] left-0 top-[4px] absolute">
-              <Like
-                color={'black'}
-                size={28}
-                isLiked={isLiked || data?.likeStatus === 'ACTIVE'}
-              />
-            </div>
-          </div>
+
         </>
       ) : (
-        <div className="flex flex-col w-full h-full items-center justify-center text-black text-2xl gap-y-2 font-medium">
-          EMPTY
+        <div className="flex flex-col w-full h-full items-center justify-center text-black text-2xl gap-y-2 font-medium"
+        onClick={goBack}>
+          돌아가기
         </div>
       )}
     </div>

src/app/components/mypage/MyCovletCardDetail.tsx

@@ -3,14 +3,14 @@
 import { useModal } from '@/app/hooks/useModal'
 import {
   analysisData,
-  covletData,
-  feedbackData,
+  covletData
 } from '@/app/recoil/coverletter'
 import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
-import CovletDeleteModal from './common/CovletDeleteModal'
 import DeleteModal from '../admin/common/DeleteModal'
-import { useEffect, useState } from 'react'
+import CovletDeleteModal from './common/CovletDeleteModal'
+import JobAnal2 from './common/JobAnal2'
 
 interface CovletCardDetail {
   coverLetterId: number
@@ -88,10 +88,11 @@ const MyCovletCardDetail = ({
     document.body.removeChild(textArea)
   }
 
-  const jobSuitabilityPercentage = (AnalysisData?.jobSuitability ?? 0) * 100
+  const jobSuitabilityPercentage = (AnalysisData?.jobSuitability ?? 0) * 100;
+
+// 결과를 소수점 아래 없이 정수로 반환합니다
+const roundedPercentage = Math.floor(jobSuitabilityPercentage);
 
-  // 결과를 반올림합니다 (예: 0.25%)
-  const roundedPercentage = Math.round(jobSuitabilityPercentage * 100) / 100
 
   const onEditClick = () => {
     setCoverLetterData({
@@ -361,10 +362,11 @@ const MyCovletCardDetail = ({
           </div>
         )}
         <div onClick={handleModalClick}>
-          {isOpen && (
-            <CovletDeleteModal
+        {isOpen && (
+            <DeleteModal
               closeModal={closeModal}
-              deleteCov={() => deleteCov(coverLetterId)}
+              deleteUser={() => deleteCov(coverLetterId || 0)}
+              text="정말 삭제하시겠습니까?"
             />
           )}
         </div>
@@ -419,26 +421,27 @@ const MyCovletCardDetail = ({
         <div className="w-[1090px] h-[972px] left-[60px] top-[765px] absolute border-2 border-gray-300 rounded-[15px]">
           <div className="w-[981px] h-[1000px] left-0 top-0 flex items-center justify-center mx-auto relative ">
             <div className="w-[773px] h-[52px] left-[160px] top-[101px] absolute text-black text-3xl font-bold  leading-[45px]">
-              {userInfo?.memberName}님과 빅데이터의 직무 적합도는{' '}
-              {AnalysisData?.jobSuitability}%입니다.
+              {userInfo?.memberName}님과 {jobKeyword}{' '}분야의 직무 적합도는{' '}
+              {roundedPercentage}%입니다.
             </div>
             <div className="left-[280px] top-[643px] absolute text-black text-2xl font-bold  leading-9">
               {userInfo?.memberName} 님은 이런 역량이 두드러져요!
             </div>
             <div className="w-[547px] h-[29px] left-[200px] top-[150px] absolute text-black text-2xl font-medium  leading-9">
               👍 조금만 더 노력하면 분명 원하는 목표에 도달할 거예요!
             </div>
-            <div className="w-[180px] h-[124px] left-[511px] top-[320px] absolute text-black text-7xl font-bold  leading-[108px]">
-              {AnalysisData?.jobSuitability}%
+            <div className="w-[180px] h-[124px] left-[581px] top-[360px] absolute text-black text-6xl font-bold  leading-[108px]">
+              {roundedPercentage}%
             </div>
-            <div className="w-[360px] h-[360px] left-[135px] top-[198px] absolute bg-white justify-center items-center inline-flex">
+            <div className="w-[360px] h-[360px] left-[155px] top-[198px] absolute  justify-center items-center inline-flex">
               <div className="w-[360px] h-[360px] relative">
-                <div className="w-[360px] h-[360px] left-0 top-0 absolute bg-white" />
+                {/* <div className="w-[360px] h-[360px] left-0 top-0 absolute bg-white" />
                 <div className="w-[300px] h-[300px] left-[40px] top-[40px] absolute bg-blue-400 rounded-full shadow" />
-                <div className="w-[300px] h-[300px] left-[40px] top-[40px] absolute bg-zinc-200 rounded-full" />
-                <div className="w-[85px] h-7 left-[229px] top-[190px] absolute text-black text-xl font-bold  leading-[30px]">
+                <div className="w-[300px] h-[300px] left-[40px] top-[40px] absolute bg-zinc-200 rounded-full" /> */}
+                <div className="w-[85px] h-7 left-[180px] top-[205px] absolute text-black text-center text-xl font-bold  leading-[30px]">
                   {jobKeyword}
                 </div>
+                <JobAnal2 backend={Number(roundedPercentage)} all={100-Number(roundedPercentage)}  />
               </div>
             </div>
             <div className="w-[569px] h-[202px] left-[200px] top-[713px] absolute">