Merge pull request #82 from KT-vicddory/week6

Week6
KT-vicddory · Jul 30, 2024 · dea615c · dea615c
2 parents fb92e5d + 3d7b174
commit dea615c
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 28 deletions.
diff --git a/src/app/(main)/@questions/questionsModal/page.tsx b/src/app/(main)/@questions/questionsModal/page.tsx
@@ -1,21 +1,22 @@
 'use client';
 
+import { TQuestionHandlerProps } from '@/types';
+import TestAnswer from '@/components/test/TestAnswer';
+import ProgressBar from '@/components/test/ProgressBar';
 import { useCallback, useEffect, useState } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
-import ProgressBar from '@/components/test/ProgressBar';
-import TestAnswer from '@/components/test/TestAnswer';
-import { TQuestionHandlerProps } from '@/types';
 import ModalLoading from '@/components/test/ModalLoading';
 import ModalTestWrapper from '@/components/test/ModalTestWrapper';
 
 export default function Questions() {
   const router = useRouter();
-  const [questions, setQuestions] = useState<TQuestionHandlerProps[]>([]);
+  const pathname = usePathname();
+
   const [loading, setLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(true);
   const [positionArr, setPositionArr] = useState<string[]>([]);
+  const [questions, setQuestions] = useState<TQuestionHandlerProps[]>([]);
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState<number>(0);
-  const [isModalOpen, setIsModalOpen] = useState(true);
-  const pathname = usePathname();
 
   const closeModal = () => {
     setIsModalOpen(false);

diff --git a/src/app/(main)/@result/(.)testResultModal/page.tsx b/src/app/(main)/@result/(.)testResultModal/page.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import CaptureArea from '@/components/test/result/CaptureArea';
+import dynamic from 'next/dynamic';
+import { TPositionStatisticProps } from '@/types';
 import { useRef, useEffect, useState } from 'react';
 import positionDetails from '@/data/positionDetails';
-import { TPositionStatisticProps } from '@/types';
 import useCaptureResult from '@/utils/useCaptureResult';
-import dynamic from 'next/dynamic';
-import ModalTestWrapper from '@/components/test/ModalTestWrapper';
 import { usePathname, useRouter } from 'next/navigation';
+import CaptureArea from '@/components/test/result/CaptureArea';
+import ModalTestWrapper from '@/components/test/ModalTestWrapper';
 
 const Button = dynamic(() => import('@/components/test/Button'), {
   ssr: false,
@@ -27,6 +27,7 @@ const Page: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(true);
   const router = useRouter();
   const pathname = usePathname();
+  const [playerHref, setPlayerHref] = useState<string>('/');
 
   const closeModal = () => {
     setIsModalOpen(false);
@@ -57,13 +58,21 @@ const Page: React.FC = () => {
     sessionStorage.removeItem('testResult');
   }, []);
 
+  const handlePlayerHrefChange = (href: string) => {
+    setPlayerHref(href);
+  };
+
   return (
     <>
       {pathname === '/testResultModal' ? (
         <ModalTestWrapper>
           <div className="bg-slate-100 h-full overflow-scroll no-scrollbar">
             <div className="flex justify-center flex-col items-center w-[448px] m-auto relative">
-              <CaptureArea ref={ref} closeModal={closeModal} />
+              <CaptureArea
+                ref={ref}
+                closeModal={closeModal}
+                onPlayerHrefChange={handlePlayerHrefChange}
+              />
               <div className="w-full h-[1900px] bg-[#F8A6A7] relative flex flex-col justify-center items-center">
                 <div className="absolute text-[#333333] font-bold top-10">
                   가장 많은 포지션은 뭘까요?
@@ -91,7 +100,7 @@ const Page: React.FC = () => {
                 <TestShare onClick={handleCapture} />
               </div>
               <div className="sticky bottom-0 w-full h-20 bg-[#FFFFFF] flex justify-center items-center pb-6">
-                <Button width={80} text="2xl" href="/test">
+                <Button width={80} text="2xl" href={playerHref}>
                   👉🏻선수 알아보러 가기👈🏻
                 </Button>
               </div>

diff --git a/src/app/(main)/ranking/ai/page.tsx b/src/app/(main)/ranking/ai/page.tsx
@@ -21,7 +21,7 @@ export default async function RankingAi() {
   const koreaTime = new Date(
     new Date().toLocaleString('en-US', { timeZone: 'Asia/Seoul' }),
   );
-  const today = koreaTime.toISOString().split('T')[0];
+  const today = koreaTime.toISOString().split('T')[0].split('-').join('');
   const year = new Date().getFullYear();
   const month = new Date().getMonth() + 1;
   const yearmonth = year + '0' + month;

diff --git a/src/app/(test)/test/result/page.tsx b/src/app/(test)/test/result/page.tsx
@@ -1,18 +1,19 @@
 'use client';
 
-import CaptureArea from '@/components/test/result/CaptureArea';
+import Button from '@/components/test/Button';
+import { TPositionStatisticProps } from '@/types';
 import { useRef, useEffect, useState } from 'react';
 import positionDetails from '@/data/positionDetails';
-import { TPositionStatisticProps } from '@/types';
 import useCaptureResult from '@/utils/useCaptureResult';
-import Button from '@/components/test/Button';
-import ResultPosition from '@/components/test/result/ResultPosition';
 import TestShare from '@/components/test/result/TestShare';
+import CaptureArea from '@/components/test/result/CaptureArea';
+import ResultPosition from '@/components/test/result/ResultPosition';
 
 const Page: React.FC = () => {
   const ref = useRef<HTMLDivElement>(null);
-  const [statistics, setStatistics] = useState<TPositionStatisticProps[]>([]);
   const handleCapture = useCaptureResult(ref);
+  const [playerHref, setPlayerHref] = useState<string>('/');
+  const [statistics, setStatistics] = useState<TPositionStatisticProps[]>([]);
 
   useEffect(() => {
     const fetchStatistics = async () => {
@@ -33,11 +34,15 @@ const Page: React.FC = () => {
     sessionStorage.removeItem('testResult');
   }, []);
 
+  const handlePlayerHrefChange = (href: string) => {
+    setPlayerHref(href);
+  };
+
   return (
     <>
       <div className="bg-slate-100">
         <div className="flex justify-center flex-col items-center h-full max-w-md m-auto">
-          <CaptureArea ref={ref} />
+          <CaptureArea ref={ref} onPlayerHrefChange={handlePlayerHrefChange} />
           <div className="w-full h-[1900px] bg-[#F8A6A7] relative flex flex-col justify-center items-center">
             <div className="absolute text-[#333333] font-bold top-10">
               가장 많은 포지션은 뭘까요?
@@ -65,7 +70,7 @@ const Page: React.FC = () => {
             <TestShare onClick={handleCapture} />
           </div>
           <div className="sticky bottom-0 w-full h-20 bg-[#FFFFFF] flex justify-center items-center pb-6">
-            <Button width={80} text="2xl" href="/test">
+            <Button width={80} text="2xl" href={playerHref}>
               👉🏻선수 알아보러 가기👈🏻
             </Button>
           </div>

diff --git a/src/components/test/result/CaptureArea.tsx b/src/components/test/result/CaptureArea.tsx
@@ -1,25 +1,63 @@
 'use client';
 
-import { useEffect, useState, forwardRef } from 'react';
 import Image from 'next/image';
 import Loading from '@/app/(test)/test/loading';
+import { useEffect, useState, forwardRef } from 'react';
+import CardFront from '@/components/tradingCard/CardFront';
+import catcherData from '#/data/playerFront/catcher_data.json';
+import pitcherData from '#/data/playerFront/pitcher_data.json';
+import infielderData from '#/data/playerFront/infielder_data.json';
+import outfielderData from '#/data/playerFront/outfielder_data.json';
 
 type TCaptureAreaProps = {
   closeModal?: () => void;
+  onPlayerHrefChange?: (href: string) => void;
 };
 
 const CaptureArea = forwardRef<HTMLDivElement, TCaptureAreaProps>(
-  ({ closeModal }, ref) => {
+  ({ closeModal, onPlayerHrefChange }, ref) => {
     const [result, setResult] = useState<{
       position: string;
       response: string;
     } | null>(null);
+    const [player, setPlayer] = useState<any>(null);
 
     useEffect(() => {
       const storedResult = sessionStorage.getItem('testResult');
       if (storedResult) {
         const parsedResult = JSON.parse(storedResult);
         setResult(parsedResult);
+
+        const selectRandomPlayer = (position: string) => {
+          let playerData: any[];
+          switch (position) {
+            case '포수':
+              playerData = catcherData.data.list;
+              break;
+            case '내야수':
+              playerData = infielderData.data.list;
+              break;
+            case '외야수':
+              playerData = outfielderData.data.list;
+              break;
+            case '투수':
+              playerData = pitcherData.data.list;
+              break;
+            default:
+              playerData = [];
+          }
+
+          const randomPlayer =
+            playerData[Math.floor(Math.random() * playerData.length)];
+          setPlayer(randomPlayer);
+          if (onPlayerHrefChange) {
+            onPlayerHrefChange(
+              `/player/batter/catcher/${randomPlayer.backNum}`,
+            );
+          }
+        };
+
+        selectRandomPlayer(parsedResult.position);
       }
     }, []);
 
@@ -44,12 +82,7 @@ const CaptureArea = forwardRef<HTMLDivElement, TCaptureAreaProps>(
         <div className="absolute flex justify-center items-center top-10 w-72 h-9 bg-red-100 rounded-full text-white -mt-7 mb-3">
           당신의 ♥천생연분♥ 야구선수는?
         </div>
-        <Image
-          src="/images/player/playerCardFront/batter/infielder/강민성.jpg"
-          alt="sample"
-          width={252}
-          height={348}
-        />
+        <CardFront player={player} size="medium" />
         <div className="flex flex-col justify-center items-center mt-3 mb-24 mx-5">
           <h1 className="text-2xl font-bold mb-3">⚾️{result.position}⚾️</h1>
           <div className="p-2 bg-white border-4 border-blue-200 rounded w-[400px] md:w-[400px] h-60 flex justify-center items-center">