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

merge to main

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

@@ -15,16 +15,12 @@ import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 
 const MyCovletDetailPage = ({ params }: { params: { id: string } }) => {
-  const [covletNumber, setCovletNumber] = useRecoilState(covletNum)
   const [coverletterData, setCoverLetterData] = useRecoilState(covletData)
   const [userInfo, setUser] = useState<memberInfo | null>(null)
   const paramsData = useSearchParams()
   const [feedBackData, setFeedBackData] = useRecoilState(feedbackData)
   const [analySisData, setAnalySisData] = useRecoilState(analysisData)
   const isGuest = paramsData.get('isGuest')
-  console.log(userInfo, '사용자 정보 가져ㅇ기')
-
-  const router = useRouter()
 
   useEffect(() => {
     const fetchData = async () => {

src/app/components/admin/board/ComunityBoard.tsx

@@ -4,10 +4,11 @@ import { boardState } from '@/app/recoil/admin'
 import { leftAngle, rightAngle } from '@/app/ui/IconsPath'
 import { useEffect, useState } from 'react'
 import ReactPaginate from 'react-paginate'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 import { useRecoilState } from 'recoil'
 import Icons from '../../common/Icons'
 import ComunityInfo from './ComunityInfo'
-
 interface ComunityBoardProps {
   boardType: string
 }
@@ -40,6 +41,7 @@ const ComunityBoard = ({ boardType }: ComunityBoardProps) => {
 
   return (
     <div className="flex flex-col w-[1034px] h-[760px] mt-[18px]">
+      <ToastContainer />
       <div className="flex w-[1034px] h-[50px] pl-[38px] border-y border-[#616161] items-center text-black text-lg">
         <div className="font-bold">{COMUNITY_BOARD_H[0]}</div>
         <div className="ml-[112px] ">{COMUNITY_BOARD_H[1]}</div>

src/app/components/admin/board/ComunityInfo.tsx

@@ -1,8 +1,8 @@
 import { useModal } from '@/app/hooks/useModal'
+import { boardState } from '@/app/recoil/admin'
 import TrashBin from '@/app/ui/svg/common/TrashBin'
 import { deletePostAlert } from '@/app/utils/toast'
-import { ToastContainer } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
+import { useRecoilState } from 'recoil'
 import DeleteModal from '../common/DeleteModal'
 
 interface ComunityInfoProps {
@@ -15,6 +15,7 @@ interface ComunityInfoProps {
 
 const ComunityInfo = (userInfo: ComunityInfoProps) => {
   const { createdAt, memberName, title, type, boardId } = userInfo
+  const [boardData, setBoardData] = useRecoilState(boardState)
 
   const { isOpen, openModal, closeModal, handleModalClick } = useModal(false)
 
@@ -26,12 +27,15 @@ const ComunityInfo = (userInfo: ComunityInfoProps) => {
         method: 'DELETE',
       },
     )
-    window.location.reload()
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_NEXT_SERVER}/api/admin/board?page=${0}`,
+    )
+    const resData = await response.json()
+    setBoardData(resData.result)
   }
 
   return (
     <div className="flex flex-col w-[1034px] h-[50px]">
-      <ToastContainer />
       <div className="flex w-[1034px] h-[50px] pl-2 border-b border-[#BDBDBD] items-center text-black text-[16px]">
         <div className="w-[121px] text-center">{createdAt}</div>
         <div className="w-[240px] text-center">{memberName}</div>

src/app/components/admin/containers/ModelContainer.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { MODEL_NAV, MODEL_PATH } from '@/app/constants/admin'
+import { MODEL_NAV } from '@/app/constants/admin'
 import { modelNum } from '@/app/recoil/admin'
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
@@ -10,37 +10,19 @@ import ModelUsage from '../model/ModelUsage'
 const ModelContainer = () => {
   const [titleNum, setTitleNum] = useRecoilState(modelNum)
   const [modelData, setModelData] = useState<ResponseModelData | null>(null)
-  const [trainData, setTrainData] = useState<ResponseTrainData | null>(null)
-  const [versionData, setVersionData] = useState<ResponseModelList | null>(null)
-
   const marginBorder =
     titleNum === 1 ? 'ml-[154px]' : titleNum === 2 ? 'ml-[290px]' : ''
 
   useEffect(() => {
     const fetchData = async () => {
-      const requestOptions = {
-        method: 'GET',
-        headers: {},
-      }
-
-      if (titleNum === 2) {
-        requestOptions.method = 'POST'
-        requestOptions.headers = {
-          'Content-Type': 'application/json',
-        }
-      }
-
       const response = await fetch(
-        `${process.env.NEXT_PUBLIC_NEXT_SERVER}/api/admin/model/${MODEL_PATH[titleNum]}`,
-        requestOptions,
+        `${process.env.NEXT_PUBLIC_NEXT_SERVER}/api/admin/model/service`,
       )
       const resData = await response.json()
-      if (titleNum === 0) setModelData(resData.result)
-      else if (titleNum === 1) setTrainData(resData.result)
-      else setVersionData(resData.result)
+      setModelData(resData.result)
     }
     fetchData()
-  }, [titleNum])
+  }, [])
 
   return (
     <div className="flex flex-col bg-white w-[full] pl-[54px] pt-[27px] pb-[44px]">
@@ -64,12 +46,8 @@ const ModelContainer = () => {
       <div className="w-[1021px] h-0 border border-[#616161] mb-7"></div>
       <div className="flex w-[1013px]">
         {titleNum === 0 && modelData && <ModelUsage modelData={modelData} />}
-        {titleNum === 1 && trainData && (
-          <ModelTrain trainData={trainData} goNext={setTitleNum} />
-        )}
-        {titleNum === 2 && versionData && (
-          <ModelManage modelData={versionData} />
-        )}
+        {titleNum === 1 && <ModelTrain />}
+        {titleNum === 2 && <ModelManage />}
       </div>
     </div>
   )

src/app/components/admin/model/AddTrainModal.tsx

@@ -57,7 +57,7 @@ const AddTrainModal = ({
             <div className="flex gap-x-3 items-center">
               <div>{MODEL_MODAL[2]}</div>
               <div className="font-medium">{modalData.modelName}</div>
-              <div className="w-[44px] flex items-center justify-center h-6 p2 text-base text-center text-white font-light bg-black rounded-2xl">
+              <div className="w-[58px] flex items-center justify-center h-6 p2 text-base text-center text-white font-light bg-black rounded-2xl">
                 v.{modalData.version}
               </div>
             </div>

src/app/components/admin/model/ModelInfoModal.tsx

@@ -1,7 +1,9 @@
 'use client'
 
 import { MODEL_INFO } from '@/app/constants/admin'
+import { versionState } from '@/app/recoil/admin'
 import { changeVersion } from '@/app/utils/toast'
+import { useRecoilState } from 'recoil'
 import Button from '../../common/Button'
 
 interface ModelInfoModalProps {
@@ -12,6 +14,8 @@ interface ModelInfoModalProps {
 }
 
 const ModelInfoModal = ({ closeModal, data, status }: ModelInfoModalProps) => {
+  const [modelVersions, setModelVersions] = useRecoilState(versionState)
+
   const activateModel = async () => {
     const requestOpt = {
       method: 'POST',
@@ -24,8 +28,16 @@ const ModelInfoModal = ({ closeModal, data, status }: ModelInfoModalProps) => {
       requestOpt,
     )
     const resData = await res.json()
-    changeVersion()
+
+    const verRes = await fetch(
+      `${process.env.NEXT_PUBLIC_NEXT_SERVER}/api/admin/model/version?page=${0}`,
+      { method: 'POST' },
+    )
+    const verData = await verRes.json()
+
+    setModelVersions(verData.result)
     closeModal()
+    changeVersion()
   }
   console.log(data, '모델 데이터')
 
@@ -38,7 +50,7 @@ const ModelInfoModal = ({ closeModal, data, status }: ModelInfoModalProps) => {
             <div className="">{MODEL_INFO[1]}</div>
             <div className="font-normal flex items-center gap-x-2.5">
               {data.modelName}
-              <div className="text-white text-base font-medium bg-black rounded-xl w-[50px] h-6 flex items-center justify-center">
+              <div className="text-white text-base font-medium bg-black rounded-xl w-[62px] h-6 flex items-center justify-center">
                 v.{data.version}
               </div>
             </div>

src/app/components/admin/model/ModelManage.tsx

@@ -1,17 +1,17 @@
 import { MODEL_MANAGE_H } from '@/app/constants/admin'
+import { versionState } from '@/app/recoil/admin'
 import { leftAngle, rightAngle } from '@/app/ui/IconsPath'
 import { useEffect, useState } from 'react'
 import ReactPaginate from 'react-paginate'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useRecoilState } from 'recoil'
 import Icons from '../../common/Icons'
 import ModelManageInfo from './ModelManageInfo'
 
-interface ModelManageProps {
-  modelData: ResponseModelList
-}
-
-const ModelManage = ({ modelData }: ModelManageProps) => {
-  const [page, setPage] = useState<number>(1)
-  const [pageData, setPageData] = useState<ModelData[]>([])
+const ModelManage = () => {
+  const [page, setPage] = useState(1)
+  const [pageData, setPageData] = useRecoilState(versionState)
   console.log(pageData, '가져온 페이지 데이터')
 
   const handlePageChange = ({ selected }: { selected: number }) => {
@@ -26,13 +26,14 @@ const ModelManage = ({ modelData }: ModelManageProps) => {
       )
       const resData = await res.json()
 
-      setPageData(resData.result.modelInfo)
+      setPageData(resData.result)
     }
     fetchData()
   }, [page])
 
   return (
     <div className="flex flex-col w-[1010px] h-[720px] items-center">
+      <ToastContainer />
       <div className="text-2xl font-bold mb-6">{MODEL_MANAGE_H[5]}</div>
       <div className="flex font-bold w-[1010px] h-[50px] pl-[16px] border-y border-[#616161] items-center text-black text-lg">
         <div className="">{MODEL_MANAGE_H[0]}</div>
@@ -42,7 +43,7 @@ const ModelManage = ({ modelData }: ModelManageProps) => {
         <div className="ml-[150px]">{MODEL_MANAGE_H[4]}</div>
         <div className="ml-[28px]">{}</div>
       </div>
-      {modelData.modelInfo.map((modelInfo, i) => (
+      {pageData.modelInfo.map((modelInfo, i) => (
         <ModelManageInfo
           key={modelInfo.modelId}
           modelId={modelInfo.modelId}
@@ -65,7 +66,7 @@ const ModelManage = ({ modelData }: ModelManageProps) => {
             <Icons name={rightAngle} />
           </div>
         }
-        pageCount={modelData.totalPage}
+        pageCount={pageData.totalPage}
         onPageChange={handlePageChange}
         activeClassName={'active text-[#486284]'}
       />

src/app/components/admin/model/ModelManageInfo.tsx

@@ -2,8 +2,7 @@ import { useModal } from '@/app/hooks/useModal'
 import TrashBin from '@/app/ui/svg/common/TrashBin'
 import { deleteUserAlert } from '@/app/utils/toast'
 import { useState } from 'react'
-import { ToastContainer } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
+
 import ModelInfoModal from './ModelInfoModal'
 interface ModelManageInfoProps {
   modelId: number
@@ -51,7 +50,6 @@ const ModelManageInfo = (trainInfo: ModelManageInfoProps) => {
 
   return (
     <div className="flex flex-col w-[1034px] h-[50px]" key={modelId}>
-      <ToastContainer />
       <div className="flex w-[1034px] h-[50px] pl-2 border-b border-[#BDBDBD] items-center text-black text-lg">
         <div className="w-[120px] text-center">{learnedDate}</div>
         <div className="w-[268px] text-center">{modelName}</div>

src/app/components/admin/model/ModelTrain.tsx

@@ -1,29 +1,25 @@
 'use client'
 import { MODEL_TRAIN_H } from '@/app/constants/admin'
 import { useModal } from '@/app/hooks/useModal'
-import { modelNum } from '@/app/recoil/admin'
+import { trainState } from '@/app/recoil/admin'
 import { leftAngle, rightAngle } from '@/app/ui/IconsPath'
 import { addTrainData } from '@/app/utils/toast'
 import { useEffect, useState } from 'react'
 import ReactPaginate from 'react-paginate'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
-import { SetterOrUpdater, useRecoilState } from 'recoil'
+import { useRecoilState } from 'recoil'
 import Button from '../../common/Button'
 import Icons from '../../common/Icons'
 import AddTrainData from './AddTrainData'
 import AddTrainModal from './AddTrainModal'
 import ModelTrainInfo from './ModelTrainInfo'
-interface ModelTrainProps {
-  trainData: ResponseTrainData
-  goNext: SetterOrUpdater<number>
-}
-const ModelTrain = ({ trainData, goNext }: ModelTrainProps) => {
+
+const ModelTrain = () => {
   const [isAdd, setIsAdd] = useState(false)
-  const [titleNum, setTitleNum] = useRecoilState(modelNum)
-  const { isOpen, openModal, closeModal, handleModalClick } = useModal(false)
   const [page, setPage] = useState<number>(1)
-  const [pageData, setPageData] = useState<datasetInfoTypes[]>([])
+  const [trainData, setTrainData] = useRecoilState(trainState)
+  const { isOpen, openModal, closeModal, handleModalClick } = useModal(false)
 
   const handlePageChange = ({ selected }: { selected: number }) => {
     setPage(() => selected + 1)
@@ -36,15 +32,19 @@ const ModelTrain = ({ trainData, goNext }: ModelTrainProps) => {
       )
       const resData = await res.json()
 
-      setPageData(resData.result.datasetInfo.datasetInfo)
+      setTrainData(resData.result)
     }
     fetchData()
   }, [page])
 
-  const succeedAdd = () => {
-    addTrainData()
+  const succeedAdd = async () => {
     setIsAdd(false)
-    setTitleNum(1)
+    addTrainData()
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_NEXT_SERVER}/api/admin/model/train/data?page=${page}`,
+    )
+    const resData = await res.json()
+    setTrainData(resData.result)
   }
 
   return isAdd ? (
@@ -65,7 +65,7 @@ const ModelTrain = ({ trainData, goNext }: ModelTrainProps) => {
         <div className="ml-[260px]">{MODEL_TRAIN_H[4]}</div>
       </div>
       <div className="h-[480px] overflow-y-auto scrollbar-hide">
-        {pageData.map((data, i) => (
+        {trainData.datasetInfo.datasetInfo.map((data, i) => (
           <div key={i}>
             <ModelTrainInfo
               createdAt={data.createdAt}

src/app/components/admin/user/UserBoard.tsx

@@ -58,22 +58,24 @@ const UserBoard = () => {
           </div>
         ))
       )}
-      <ReactPaginate
-        className="flex items-center justify-center mt-8 h-[40px] w-full gap-[20px] text-[17px]  text-[#868686] font-semibold"
-        previousLabel={
-          <div className="pt-0.5">
-            <Icons name={leftAngle} />
-          </div>
-        }
-        nextLabel={
-          <div className="pt-0.5">
-            <Icons name={rightAngle} />
-          </div>
-        }
-        pageCount={userData?.totalPage || 1}
-        onPageChange={handlePageChange}
-        activeClassName={'active text-[#486284]'}
-      />
+      <div className='relative h-full'>
+        <ReactPaginate
+          className="flex absolute bottom-[260px] items-center justify-center mt-8 h-[40px] w-full gap-[20px] text-[17px]  text-[#868686] font-semibold"
+          previousLabel={
+            <div className="pt-0.5">
+              <Icons name={leftAngle} />
+            </div>
+          }
+          nextLabel={
+            <div className="pt-0.5">
+              <Icons name={rightAngle} />
+            </div>
+          }
+          pageCount={userData?.totalPage || 1}
+          onPageChange={handlePageChange}
+          activeClassName={'active text-[#486284]'}
+        />
+      </div>
     </div>
   )
 }

src/app/components/board/containers/OtherUserPortfolio.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from 'react'
 import MyCovletCard from '../../mypage/MyCovletCard'
-import MyExpCard from '../../mypage/MyExpCard'
 import UserExpCard from './UserExpCard'
 
 interface OtherUserPortfolioProps {