Merge pull request #78 from KT-vicddory/week6

Week6
KT-vicddory · Jul 30, 2024 · fb92e5d · fb92e5d
2 parents 4322241 + c8ab6d8
commit fb92e5d
Show file tree

Hide file tree

Showing 27 changed files with 110 additions and 90 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/src/app/(main)/@modal/(.)testModal/page.tsx b/src/app/(main)/@modal/(.)testModal/page.tsx
@@ -44,7 +44,7 @@ export default function Modal() {
                 className="w-40 md:w-[200px]"
               />
               <div className="w-60 h-14 text-5xl font-bold mb-3 mt-3 text-[#333333]">
-                궁합테스트
+                성향테스트
               </div>
               <div className="w-60 text-sm font-bold text-[#444444] my-4">
                 나와 어울리는 KT Wiz 선수 알아보기!

diff --git a/src/app/(main)/@questions/questionsModal/page.tsx b/src/app/(main)/@questions/questionsModal/page.tsx
@@ -17,11 +17,11 @@ export default function Questions() {
   const [isModalOpen, setIsModalOpen] = useState(true);
   const pathname = usePathname();
 
-  const closeModal = useCallback(() => {
+  const closeModal = () => {
     setIsModalOpen(false);
     sessionStorage.removeItem('questions');
     sessionStorage.removeItem('positionArr');
-  }, []);
+  };
 
   useEffect(() => {
     if (!isModalOpen) {

diff --git a/src/app/(main)/@result/(.)testResultModal/page.tsx b/src/app/(main)/@result/(.)testResultModal/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import CaptureArea from '@/components/test/result/CaptureArea';
-import { useRef, useEffect, useState, useCallback } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import positionDetails from '@/data/positionDetails';
 import { TPositionStatisticProps } from '@/types';
 import useCaptureResult from '@/utils/useCaptureResult';
@@ -28,9 +28,9 @@ const Page: React.FC = () => {
   const router = useRouter();
   const pathname = usePathname();
 
-  const closeModal = useCallback(() => {
+  const closeModal = () => {
     setIsModalOpen(false);
-  }, []);
+  };
 
   useEffect(() => {
     if (!isModalOpen) {

diff --git a/src/app/(main)/player/batter/catcher/page.tsx b/src/app/(main)/player/batter/catcher/page.tsx
@@ -15,7 +15,7 @@ export default function Catcher() {
   return (
     <>
       <div className="bg-white pt-8 flex justify-center items-center h-min flex-wrap ">
-        <div className="flex flex-wrap flex-row gap-6 p-6 justify-center items-center object-center w-3/4">
+        <div className="flex flex-wrap flex-row gap-6 p-6 justify-start items-center object-center w-3/4">
           {catcherData.map((catcher, index) => (
             <CardFront
               key={index}

diff --git a/src/app/(main)/player/batter/infielder/page.tsx b/src/app/(main)/player/batter/infielder/page.tsx
@@ -15,7 +15,7 @@ export default function Infielder() {
   return (
     <>
       <div className="bg-white pt-8 flex justify-center items-center h-min flex-wrap ">
-        <div className="flex flex-wrap flex-row gap-6 p-6 justify-center items-center object-center w-3/4">
+        <div className="flex flex-wrap flex-row gap-6 p-6 justify-start items-center object-center w-3/4">
           {infielderData.map((infielder, index) => (
             <CardFront
               key={index}

diff --git a/src/app/(main)/player/batter/layout.tsx b/src/app/(main)/player/batter/layout.tsx
@@ -1,5 +1,11 @@
 import Banner from '@/components/player/Banner';
 
+export const metadata = {
+  title: '타자',
+  description:
+    'kt wiz에서 인터랙티브한 선수 카드와 상세 페이지를 확인하세요. 현재 선수의 경기력과 AI가 예측한 미래 성과를 멋진 애니메이션과 함께 제공합니다.',
+};
+
 export default function BatterLayout({
   children,
 }: {

diff --git a/src/app/(main)/player/batter/outfielder/page.tsx b/src/app/(main)/player/batter/outfielder/page.tsx
@@ -15,7 +15,7 @@ export default function Outfielder() {
   return (
     <>
       <div className="bg-white pt-8 flex justify-center items-center h-min flex-wrap ">
-        <div className="flex flex-wrap flex-row gap-6 p-6 justify-center items-center object-center w-3/4">
+        <div className="flex flex-wrap flex-row gap-6 p-6 justify-start items-center object-center w-3/4">
           {outfielderData.map((outfielder, index) => (
             <CardFront
               key={index}

diff --git a/src/app/(main)/player/pitcher/layout.tsx b/src/app/(main)/player/pitcher/layout.tsx
@@ -1,5 +1,11 @@
 import Banner from '@/components/player/Banner';
 
+export const metadata = {
+  title: '투수',
+  description:
+    'kt wiz에서 인터랙티브한 선수 카드와 상세 페이지를 확인하세요. 현재 선수의 경기력과 AI가 예측한 미래 성과를 멋진 애니메이션과 함께 제공합니다.',
+};
+
 export default function PitcherLayout({
   children,
 }: {

diff --git a/src/app/(main)/player/pitcher/page.tsx b/src/app/(main)/player/pitcher/page.tsx
@@ -15,7 +15,7 @@ export default function PitcherMain() {
   return (
     <>
       <div className="bg-white flex justify-center items-center h-min flex-wrap ">
-        <div className="flex flex-wrap flex-row gap-6 p-6 justify-center items-center object-center w-3/4">
+        <div className="flex flex-wrap flex-row gap-6 p-6 justify-start items-center object-center w-3/4">
           {pitcherData.map((pitcher, index) => (
             <CardFront
               key={index}

diff --git a/src/app/(main)/ranking/layout.tsx b/src/app/(main)/ranking/layout.tsx
@@ -1,5 +1,11 @@
 import Banner from '@/components/ranking/Banner';
 
+export const metadata = {
+  title: 'Ranking',
+  description:
+    '경기 승률 예측 AI와 일자별, 연도별 구단 순위 그래프! kt wiz 웹사이트에서 오늘 경기의 승률을 예측하고, 팀의 역사를 한눈에 볼 수 있는 그래프를 확인해보세요.',
+};
+
 export default function RankingLayout({
   children,
 }: {

diff --git a/src/app/(main)/wiznews/@news/(.)[newsId]/page.tsx b/src/app/(main)/wiznews/@news/(.)[newsId]/page.tsx
@@ -2,6 +2,7 @@
 import NewsContent from '@/components/wiznews/NewsContent';
 import { useRouter } from 'next/navigation';
 import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 
 export type TParams = {
   params: { newsId: string };
@@ -23,14 +24,15 @@ export default function InterceptedWizNewsDetail({ params }: TParams) {
     return () => window.removeEventListener('click', clickHandler);
   }, []);
 
-  return (
+  return createPortal(
     <>
       <div
         className="w-full h-full bg-black bg-opacity-30 z-20 fixed top-0 flex justify-center items-center"
         ref={ref}
       >
         <NewsContent newsId={newsId} />
       </div>
-    </>
+    </>,
+    document.body,
   );
 }
diff --git a/src/app/(main)/wiznews/layout.tsx b/src/app/(main)/wiznews/layout.tsx
@@ -1,7 +1,11 @@
-'use client';
 import NewsBanner from '@/components/wiznews/NewsBanner';
 import { ReactNode } from 'react';
-import { createPortal } from 'react-dom';
+
+export const metadata = {
+  title: '위즈 뉴스',
+  description:
+    'AI가 경기 일정에 따라 실감나는 뉴스를 자동으로 생성하는 kt wiz의 새로운 기능! 최신 경기 업데이트와 팀 소식을 놓치지 마세요',
+};
 
 export default function NewsLayout({
   children,
@@ -15,7 +19,7 @@ export default function NewsLayout({
       <div className="min-h-screen bg-black">
         <NewsBanner />
         {children}
-        {typeof document !== 'undefined' && createPortal(news, document.body)}
+        {news}
       </div>
     </>
   );

diff --git a/src/app/(test)/layout.tsx b/src/app/(test)/layout.tsx
@@ -1,5 +1,11 @@
 import { ReactNode } from 'react';
 
+export const metadata = {
+  title: '성향 테스트',
+  description:
+    '나의 성향과 맞는 선수를 찾는 테스트! kt wiz에서 나와 가장 잘 어울리는 선수를 찾아보세요.',
+};
+
 export default function TestLayout({ children }: { children: ReactNode }) {
   return (
     <>

diff --git a/src/app/(test)/test/page.tsx b/src/app/(test)/test/page.tsx
@@ -17,7 +17,7 @@ export default function Test() {
             className="w-40 md:w-[200px]"
           />
           <div className="w-60 h-14 text-5xl font-bold mb-3 mt-3 text-[#333333]">
-            궁합테스트
+            성향테스트
           </div>
           <div className="w-60 text-sm font-bold text-[#444444] my-4">
             나와 어울리는 KT Wiz 선수 알아보기!

diff --git a/src/app/(test)/test/result/page.tsx b/src/app/(test)/test/result/page.tsx
@@ -5,18 +5,9 @@ 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';
-
-const Button = dynamic(() => import('@/components/test/Button'), {
-  ssr: false,
-});
-const ResultPosition = dynamic(
-  () => import('@/components/test/result/ResultPosition'),
-  { ssr: false },
-);
-const TestShare = dynamic(() => import('@/components/test/result/TestShare'), {
-  ssr: false,
-});
+import Button from '@/components/test/Button';
+import ResultPosition from '@/components/test/result/ResultPosition';
+import TestShare from '@/components/test/result/TestShare';
 
 const Page: React.FC = () => {
   const ref = useRef<HTMLDivElement>(null);

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,8 +3,13 @@ import './globals.css';
 import { ReactNode } from 'react';
 
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
+  metadataBase: new URL('https://kt-vicddory-fe.vercel.app/'),
+  title: { template: '%s | kt wiz', default: 'WINNING KT : 빅또리' },
+  description:
+    'kt wiz에서 팬들을 위한 특별 이벤트와 콘텐츠를 즐겨보세요. 야구를 좋아하지 않아도 즐길 수 있는 다양한 즐길거리가 가득!',
+  icons: {
+    icon: '/favicon.png',
+  },
 };
 
 declare global {

diff --git a/src/app/opengraph-image.jpg b/src/app/opengraph-image.jpg
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -188,12 +188,6 @@ export default function Header() {
               </div>
               <div className="w-20"></div>
               <div className="flex flex-col w-20 items-center hover:border-t-2 hover:border-t-red-500 whitespace-nowrap gap-2">
-                <Link
-                  href="/"
-                  className="hover:text-red-90 hover:font-extrabold"
-                >
-                  코칭스텝
-                </Link>
                 <Link
                   href="/player/pitcher"
                   className="hover:text-red-90 hover:font-extrabold"
@@ -218,13 +212,13 @@ export default function Header() {
                   href="/ranking/daily"
                   className="hover:text-red-90 hover:font-extrabold"
                 >
-                  년도별
+                  일자별
                 </Link>
                 <Link
-                  href="/raning/year"
+                  href="/ranking/year"
                   className="hover:text-red-90 hover:font-extrabold"
                 >
-                  일자별
+                  년도별
                 </Link>
               </div>
               <div className="w-20"></div>

diff --git a/src/components/mobile/MobileMenu.tsx b/src/components/mobile/MobileMenu.tsx
@@ -47,8 +47,8 @@ export default function MobileMenu({
           <MobileMenuBtn
             handleMobileOpen={handleMobileOpen}
             title="Player"
-            subtitle={['코칭 스텝', '투수', '타자']}
-            pages={['/player', '/player/pitcher', '/player/batter']}
+            subtitle={['투수', '타자']}
+            pages={['/player/pitcher', '/player/batter']}
           />
           <MobileMenuBtn
             handleMobileOpen={handleMobileOpen}

diff --git a/src/components/player/Banner.tsx b/src/components/player/Banner.tsx
@@ -47,16 +47,7 @@ export default function Banner() {
             {text[pathname]?.subtitle}
           </p>
         </div>
-        <div className="w-3/4 flex justify-between text-base font-extrabold">
-          <BannerBtn
-            url="/player/coach"
-            buttonStyle={`
-              ${
-                pathname === 'coach' ? ' text-white border-b-4' : ''
-              } max-sm:w-[70px]`}
-          >
-            코칭스탭
-          </BannerBtn>
+        <div className="w-3/4 flex justify-around text-base font-extrabold">
           <BannerBtn
             url="/player/pitcher"
             buttonStyle={pathname === 'pitcher' ? ' text-white border-b-4' : ''}
@@ -109,14 +100,6 @@ export default function Banner() {
               <></>
             )}
           </BannerBtn>
-          <BannerBtn
-            url="/player/cheerleader"
-            buttonStyle={
-              pathname === 'cheerleader' ? ' text-white border-b-4' : ''
-            }
-          >
-            응원단
-          </BannerBtn>
         </div>
       </div>
     </>

diff --git a/src/components/test/ModalWrapper.tsx b/src/components/test/ModalWrapper.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 
 export default function ModalWrapper({
   children,
@@ -9,9 +9,9 @@ export default function ModalWrapper({
 }) {
   const [isModalOpen, setIsModalOpen] = useState(true);
 
-  const closeModal = useCallback(() => {
+  const closeModal = () => {
     setIsModalOpen(false);
-  }, []);
+  };
 
   if (!isModalOpen) return null;
 

diff --git a/src/components/test/result/KakaoShare.tsx b/src/components/test/result/KakaoShare.tsx
@@ -5,9 +5,7 @@ import Image from 'next/image';
 
 const KakaoShare = () => {
   const shareUrl =
-    typeof window !== 'undefined'
-      ? 'https://vicddory-frontend.vercel.app/test'
-      : '';
+    typeof window !== 'undefined' ? `${process.env.BASE_URL}/test` : '';
 
   useEffect(() => {
     if (typeof window !== 'undefined') {

diff --git a/src/components/tradingCard/CardBack.tsx b/src/components/tradingCard/CardBack.tsx
@@ -29,7 +29,7 @@ const CardBack: React.FC<CardBackProps> = ({ player, size = 'large' }) => {
           className={`bg-black rounded-lg overflow-hidden relative m-4 shadow-lg items-center justify-center transform transition-transform ${sizeClass}`}
         >
           {/* 선수 이미지 */}
-          <div className={`relative ${photoSize} mx-auto top-3`}>
+          <div className={`relative ${photoSize} mx-auto top-3 rounded-xl`}>
             <Image
               src={player.playerBackImg}
               alt={`${player.korName} Image`}
@@ -111,14 +111,12 @@ const CardBack: React.FC<CardBackProps> = ({ player, size = 'large' }) => {
           className={`bg-black rounded-xl overflow-hidden relative m-4 items-center justify-center transform transition-transform ${sizeClass}`}
         >
           {/* 선수 이미지 */}
-          <div
-            className={`relative ${photoSize} mx-auto  rounded-t-2xl overflow-hidden`}
-          >
+          <div className={`relative ${photoSize} mx-auto rounded-t-2xl`}>
             <Image
               src={player.playerBackImg}
               alt={`${player.korName} Image`}
               layout="fill"
-              className="absolute pt-4 object-cover rounded-2xl"
+              className="absolute pt-4 mt-2 object-cover rounded-xl"
             />
           </div>
           {/*프레임 이미지*/}