From 2c23ebdbd0826985ac786a9f4dadf6d717ef59f9 Mon Sep 17 00:00:00 2001 From: Sangmin Lee Date: Tue, 18 Jun 2024 12:57:42 +0900 Subject: [PATCH] =?UTF-8?q?[refac-25]=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C=20?= =?UTF-8?q?(#27)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Feat: 로딩 컴포넌트 구현 * Chore: 팀 축약어 데이터 추가 * Chore: 레이아웃 디자인 컴포넌트명 변경 * Refactor: 첫 로드 시에 데이터 불러오기 기능 분리 * Feat: 해당 아레나 페이지 분리 * Refactor: 기존 페이지 토글 관련 코드 수정 * Fix: 선수 선택하고 뒤로가기 이후 새로운 표 생성했을 때 선택된 선수 정보와 시너지가 유지됐던 문제 수정 * Fix: 오버롤 필터 동작하지 않는 문제 수정 * Feat: 각 포지션 별 선수가 가득차지 않았을 경우, 올스타나 골글, mvp가 존재하면 표시되도록 변경 * Feat: Dynamic MetaData 설정 구현 - metaData siteName 수정 * Fix: 같은 팀이 중복으로 설정되는 문제 수정 * Chore: strictMode 해제 * Fix: 참조 컴포넌트명 수정 --- next.config.mjs | 1 + public/storage/teams.json | 21 ++++ .../{home/layout => background}/index.tsx | 6 +- .../{home/layout => background}/styles.ts | 0 src/app/components/home/submitBtn/index.tsx | 16 ++- src/app/components/loading/index.tsx | 15 +++ src/app/components/loading/styles.ts | 57 +++++++++ src/app/components/menu/index.tsx | 6 +- src/app/components/tablePosition/index.tsx | 117 +++++++++++------- src/app/init.tsx | 31 +++++ src/app/layout.tsx | 7 +- src/app/lineup/[lineupId]/lineupPage.tsx | 55 ++++++++ src/app/lineup/[lineupId]/page.tsx | 77 ++++++++++++ src/app/lineup/page.tsx | 5 + src/app/page.tsx | 34 ++--- src/app/stores/player/types.ts | 1 + src/app/stores/table/index.ts | 7 -- src/app/stores/table/types.ts | 3 - 18 files changed, 370 insertions(+), 89 deletions(-) rename src/app/components/{home/layout => background}/index.tsx (64%) rename src/app/components/{home/layout => background}/styles.ts (100%) create mode 100644 src/app/components/loading/index.tsx create mode 100644 src/app/components/loading/styles.ts create mode 100644 src/app/init.tsx create mode 100644 src/app/lineup/[lineupId]/lineupPage.tsx create mode 100644 src/app/lineup/[lineupId]/page.tsx create mode 100644 src/app/lineup/page.tsx diff --git a/next.config.mjs b/next.config.mjs index a4bee02..5b7eeda 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,5 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { + reactStrictMode: false, compiler: { styledComponents: true, }, diff --git a/public/storage/teams.json b/public/storage/teams.json index 73c25a0..beacfe4 100644 --- a/public/storage/teams.json +++ b/public/storage/teams.json @@ -2,6 +2,7 @@ { "id": "KIA", "name": "KIA 타이거즈", + "shorten": "ka", "logo": "/assets/logo/kia.svg", "years": [ 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, @@ -11,12 +12,14 @@ { "id": "kt", "name": "kt 위즈", + "shorten": "kt", "logo": "/assets/logo/kt.svg", "years": [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023] }, { "id": "LG", "name": "LG 트윈스", + "shorten": "lg", "logo": "/assets/logo/lg.svg", "years": [ 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, @@ -26,24 +29,28 @@ { "id": "MBC", "name": "MBC 청룡", + "shorten": "mb", "logo": "/assets/logo/mbc.webp", "years": [1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989] }, { "id": "NC", "name": "NC 다이노스", + "shorten": "nc", "logo": "/assets/logo/nc.svg", "years": [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023] }, { "id": "OB", "name": "OB 베어스", + "shorten": "ob", "logo": "/assets/logo/ob.svg", "years": [1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998] }, { "id": "SK", "name": "SK 와이번스", + "shorten": "sk", "logo": "/assets/logo/sk.svg", "years": [ 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, @@ -53,18 +60,21 @@ { "id": "SSG", "name": "SSG 랜더스", + "shorten": "sg", "logo": "/assets/logo/ssg.svg", "years": [2021, 2022, 2023] }, { "id": "넥센", "name": "넥센 히어로즈", + "shorten": "nx", "logo": "/assets/logo/nexen.svg", "years": [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018] }, { "id": "두산", "name": "두산 베어스", + "shorten": "ds", "logo": "/assets/logo/doosan.svg", "years": [ 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, @@ -74,6 +84,7 @@ { "id": "롯데", "name": "롯데 자이언츠", + "shorten": "lt", "logo": "/assets/logo/lotte.svg", "years": [ 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, @@ -84,6 +95,7 @@ { "id": "빙그레", "name": "빙그레 이글스", + "shorten": "bg", "logo": "/assets/logo/binggrae.svg", "years": [1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993] }, @@ -91,6 +103,7 @@ { "id": "삼미", "name": "삼미 슈퍼스타즈", + "shorten": "sm", "logo": "/assets/logo/sammi.webp", "years": [1982, 1983, 1984] }, @@ -98,6 +111,7 @@ { "id": "삼성", "name": "삼성 라이온즈", + "shorten": "ss", "logo": "/assets/logo/samsung.svg", "years": [ 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, @@ -109,6 +123,7 @@ { "id": "쌍방울", "name": "쌍방울 레이더스", + "shorten": "sb", "logo": "/assets/logo/sbw.webp", "years": [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }, @@ -116,6 +131,7 @@ { "id": "청보", "name": "청보 핀토스", + "shorten": "cb", "logo": "/assets/logo/chungbo.webp", "years": [1985, 1986, 1987] }, @@ -123,6 +139,7 @@ { "id": "키움", "name": "키움 히어로즈", + "shorten": "kw", "logo": "/assets/logo/kiwoom.svg", "years": [2019, 2020, 2021, 2022, 2023] }, @@ -130,12 +147,14 @@ { "id": "태평양", "name": "태평양 돌핀스", + "shorten": "tp", "logo": "/assets/logo/pacific.webp", "years": [1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995] }, { "id": "한화", "name": "한화 이글스", + "shorten": "hw", "logo": "/assets/logo/hanwha.svg", "years": [ 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, @@ -145,6 +164,7 @@ { "id": "해태", "name": "해태 타이거즈", + "shorten": "ht", "logo": "/assets/logo/haitai.svg", "years": [ 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000 @@ -153,6 +173,7 @@ { "id": "현대", "name": "현대 유니콘스", + "shorten": "hd", "logo": "/assets/logo/hyundai.svg", "years": [1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007] } diff --git a/src/app/components/home/layout/index.tsx b/src/app/components/background/index.tsx similarity index 64% rename from src/app/components/home/layout/index.tsx rename to src/app/components/background/index.tsx index 1ad30e7..ff1690e 100644 --- a/src/app/components/home/layout/index.tsx +++ b/src/app/components/background/index.tsx @@ -2,11 +2,11 @@ import { ReactNode } from 'react'; import * as S from './styles'; -type HomeLayoutProps = { +type BackgroundProps = { children: ReactNode; }; -const HomeLayout = ({ children }: HomeLayoutProps) => { +const Background = ({ children }: BackgroundProps) => { return ( {children} @@ -14,4 +14,4 @@ const HomeLayout = ({ children }: HomeLayoutProps) => { ); }; -export default HomeLayout; +export default Background; diff --git a/src/app/components/home/layout/styles.ts b/src/app/components/background/styles.ts similarity index 100% rename from src/app/components/home/layout/styles.ts rename to src/app/components/background/styles.ts diff --git a/src/app/components/home/submitBtn/index.tsx b/src/app/components/home/submitBtn/index.tsx index b46e7c2..8656e2b 100644 --- a/src/app/components/home/submitBtn/index.tsx +++ b/src/app/components/home/submitBtn/index.tsx @@ -1,3 +1,4 @@ +import { useRouter } from 'next/navigation'; import useYearStore from '@/app/stores/year'; import usePlayerStore from '@/app/stores/player'; import useTableStore from '@/app/stores/table'; @@ -6,14 +7,23 @@ import * as S from './styles'; const SubmitBtn = () => { const { selectedYear, closeYearList } = useYearStore(); - const { selectedTeams, closeTeamList } = usePlayerStore(); - const { showTable, closeMenu } = useTableStore(); + const { allTeams, selectedTeams, closeTeamList, setSelectedPlayer, setSelectedLineUp } = usePlayerStore(); + const { closeMenu, setOverallLimit } = useTableStore(); + const router = useRouter(); const onSubmit = () => { closeYearList(); closeTeamList(); closeMenu(); - showTable(); + setOverallLimit(69); + setSelectedPlayer(null); + setSelectedLineUp(null); + + router.push( + `/lineup/${selectedYear}${selectedTeams + .map((selectedTeam) => allTeams.find((team) => team.id === selectedTeam)?.shorten) + .join('')}` + ); }; return ( diff --git a/src/app/components/loading/index.tsx b/src/app/components/loading/index.tsx new file mode 100644 index 0000000..d7bae20 --- /dev/null +++ b/src/app/components/loading/index.tsx @@ -0,0 +1,15 @@ +import * as S from './styles'; + +const Loading = ({ text }: { text: string }) => { + return ( + + + + + {text} + + + ); +}; + +export default Loading; diff --git a/src/app/components/loading/styles.ts b/src/app/components/loading/styles.ts new file mode 100644 index 0000000..b420f40 --- /dev/null +++ b/src/app/components/loading/styles.ts @@ -0,0 +1,57 @@ +import styled from 'styled-components'; + +export const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + user-select: none; +`; + +export const Description = styled.div` + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + + @media (max-width: 400px) { + gap: 10px; + } +`; + +export const Spinner = styled.span` + display: inline-block; + width: 24px; + height: 24px; + border: 5px solid #fff; + border-bottom-color: transparent; + border-radius: 50%; + box-sizing: border-box; + animation: rotation 1s linear infinite; + + @keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + @media (max-width: 400px) { + width: 18px; + height: 18px; + border-width: 4px; + } +`; + +export const Text = styled.span` + display: block; + font-weight: 400; + font-size: 20px; + letter-spacing: 1.5px; + + @media (max-width: 400px) { + font-size: 15px; + } +`; diff --git a/src/app/components/menu/index.tsx b/src/app/components/menu/index.tsx index 1c35cc5..8108b79 100644 --- a/src/app/components/menu/index.tsx +++ b/src/app/components/menu/index.tsx @@ -1,3 +1,4 @@ +import { useRouter } from 'next/navigation'; import { IoMenuOutline } from 'react-icons/io5'; import useTableStore from '@/app/stores/table'; import usePlayerStore from '@/app/stores/player'; @@ -5,8 +6,9 @@ import usePlayerStore from '@/app/stores/player'; import * as S from './styles'; const Menu = () => { - const { isMenu, openMenu, closeTable, overallLimit, setOverallLimit } = useTableStore(); + const { isMenu, openMenu, overallLimit, setOverallLimit } = useTableStore(); const { setSelectedPlayer, setSelectedLineUp } = usePlayerStore(); + const router = useRouter(); const onBtnClick = () => { openMenu(); @@ -19,7 +21,7 @@ const Menu = () => { }; const onReStart = () => { - closeTable(); + router.replace('/'); setOverallLimit(69); setSelectedPlayer(null); setSelectedLineUp(null); diff --git a/src/app/components/tablePosition/index.tsx b/src/app/components/tablePosition/index.tsx index e714c2c..e99b72e 100644 --- a/src/app/components/tablePosition/index.tsx +++ b/src/app/components/tablePosition/index.tsx @@ -1,3 +1,4 @@ +import { ReactNode, useEffect, useState } from 'react'; import Image from 'next/image'; import { AnimatePresence } from 'framer-motion'; import { Hitter, Pitcher, PositionLimit } from '@/app/stores/player/types'; @@ -9,6 +10,7 @@ import PlayerDetail from '../playerDetail'; import PlayerSimpleInfo from '../playerSimpleInfo'; import LineUpInfo from '../lineUpInfo'; import Menu from '../menu'; +import Loading from '../loading'; import * as S from './styles'; @@ -17,6 +19,8 @@ const TablePosition = () => { const { isShowDetail, selectedTeams, selectedPlayer, clearDetail, allTeams, allHitters, allPitchers } = usePlayerStore(); const { isMenu, overallLimit, closeMenu } = useTableStore(); + const [isLoading, setIsLoading] = useState(true); + const [tableComponent, setTableComponent] = useState(); const positionLimit: PositionLimit = { 포수: 2, '1루수': 2, @@ -31,6 +35,74 @@ const TablePosition = () => { const hitterPositionOrder = ['포수', '1루수', '2루수', '3루수', '유격수', '외야수']; const pitcherPositionOrder = ['선발', '계투', '마무리']; + useEffect(() => { + if (!selectedTeams.length) return; + + const makeTimeout = async () => { + await new Promise((resolve) => setTimeout(resolve, 300)); + setIsLoading(false); + }; + + setTableComponent( + selectedTeams.map((selectedTeam, idx) => ( + + + + team.id === selectedTeam)?.logo || ''} + alt={selectedTeam} + layout='fill' + style={{ filter: 'drop-shadow(3px 3px 0 #333)' }} + /> + + + {allTeams.find((team) => team.id === selectedTeam)?.name} + + + {hitArrangePlayers( + allHitters.filter( + (hitter) => + hitter.year === selectedYear && + hitter.team === selectedTeam && + (hitter.overall >= overallLimit || + hitter.all_star || + hitter.mvp_korea || + hitter.mvp_league || + hitter.golden_glove) + ) + ).map((group, index) => ( + + {group.players.map((player, iindex) => ( + + ))} + + ))} + + {pitchArrangePlayers( + allPitchers.filter( + (pitcher) => + pitcher.year === selectedYear && + pitcher.team === selectedTeam && + (pitcher.overall >= overallLimit || + pitcher.all_star || + pitcher.mvp_korea || + pitcher.mvp_league || + pitcher.golden_glove) + ) + ).map((group, index) => ( + + {group.players.map((player, iindex) => ( + + ))} + + ))} + + )) + ); + + makeTimeout(); + }, [selectedTeams, overallLimit]); + const hitArrangePlayers = (players: (Hitter | Pitcher)[]) => { const arranged = hitterPositionOrder.map((position) => ({ position, @@ -78,6 +150,8 @@ const TablePosition = () => { } }; + if (isLoading) return ; + return ( <> @@ -110,48 +184,7 @@ const TablePosition = () => { ))} - {selectedTeams.map((selectedTeam, idx) => ( - - - - team.id === selectedTeam)?.logo || ''} - alt={selectedTeam} - layout='fill' - style={{ filter: 'drop-shadow(3px 3px 0 #333)' }} - /> - - - {allTeams.find((team) => team.id === selectedTeam)?.name} - - - {hitArrangePlayers( - allHitters.filter( - (hitter) => - hitter.year === selectedYear && hitter.team === selectedTeam && hitter.overall >= overallLimit - ) - ).map((group, index) => ( - - {group.players.map((player, iindex) => ( - - ))} - - ))} - - {pitchArrangePlayers( - allPitchers.filter( - (pitcher) => - pitcher.year === selectedYear && pitcher.team === selectedTeam && pitcher.overall >= overallLimit - ) - ).map((group, index) => ( - - {group.players.map((player, iindex) => ( - - ))} - - ))} - - ))} + {tableComponent} diff --git a/src/app/init.tsx b/src/app/init.tsx new file mode 100644 index 0000000..a4eeefd --- /dev/null +++ b/src/app/init.tsx @@ -0,0 +1,31 @@ +'use client'; + +import { ReactNode, useEffect, useState } from 'react'; +import { usePathname } from 'next/navigation'; +import usePlayerStore from './stores/player'; +import Loading from './components/loading'; +import Background from './components/background'; + +const Init = ({ children }: { children: ReactNode }) => { + const { fetchAllTeams, fetchAllHitters, fetchAllPitchers } = usePlayerStore(); + const [isLoading, setIsLoading] = useState(true); + const pathname = usePathname(); + + const fetchData = async () => { + await fetchAllTeams(); + await fetchAllHitters(); + await fetchAllPitchers(); + }; + + useEffect(() => { + fetchData().then(() => setIsLoading(false)); + }, []); + + return ( + + {isLoading ? pathname === '/' ? null : : children} + + ); +}; + +export default Init; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1478f17..0cdd3a1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import StyledComponentsRegistry from './lib/registry'; import { Analytics } from '@vercel/analytics/react'; import { SpeedInsights } from '@vercel/speed-insights/next'; import { GoogleAnalytics } from '@next/third-parties/google'; +import Init from './init'; const notoSansKR = Noto_Sans_KR({ subsets: ['latin'], @@ -21,7 +22,7 @@ export const metadata: Metadata = { url: '/', title: '컴프매 아레나 도우미 | com2usManager Arena Helper', description: '연도와 팀을 선택 후 나만의 라인업을 구성해 보세요! 선수 정보부터 전력까지 한눈에 확인할 수 있습니다.', - siteName: '컴프매 아레나 도우미 - 컴투스프로야구for매니저', + siteName: '컴프매 아레나 도우미 | com2usManager Arena Helper', images: [ { url: '/assets/metaImg.png', @@ -53,7 +54,9 @@ export default function RootLayout({ return ( - {children} + + {children} + diff --git a/src/app/lineup/[lineupId]/lineupPage.tsx b/src/app/lineup/[lineupId]/lineupPage.tsx new file mode 100644 index 0000000..64832fc --- /dev/null +++ b/src/app/lineup/[lineupId]/lineupPage.tsx @@ -0,0 +1,55 @@ +'use client'; + +import TablePosition from '@/app/components/tablePosition'; +import NotFound from '@/app/not-found'; +import usePlayerStore from '@/app/stores/player'; +import useYearStore from '@/app/stores/year'; +import { useParams } from 'next/navigation'; +import { useEffect, useState } from 'react'; + +export default function LineupPage() { + const { lineupId } = useParams<{ lineupId: string }>(); + const { selectedYear, setYear } = useYearStore(); + const { allTeams, selectedTeams, setTeams, setSelectedTeamsReset } = usePlayerStore(); + const [status, setStatus] = useState('pending'); + + const init = () => { + const paramYear = +lineupId.slice(0, 4); + const paramTeams = lineupId.slice(4).match(/.{1,2}/g); + + if (isNaN(paramYear) || paramYear < 1982 || paramYear > 2023 || !paramTeams || new Set(paramTeams).size !== 5) { + setStatus('invalid'); + return; + } + + if (selectedTeams.length && selectedYear) { + setStatus('valid'); + return; + } + + for (let idx = 0; idx < 5; idx += 1) { + const selectedTeam = allTeams.find((team) => team.shorten === paramTeams[idx]); + + if (!selectedTeam || !selectedTeam.years.includes(paramYear)) { + setSelectedTeamsReset(); + setStatus('invalid'); + return; + } + + setTeams({ + id: selectedTeam.id, + index: idx, + action: 'ADD', + }); + } + + setYear(paramYear); + setStatus('valid'); + }; + + useEffect(() => { + init(); + }, []); + + return status === 'invalid' ? : status === 'valid' ? : null; +} diff --git a/src/app/lineup/[lineupId]/page.tsx b/src/app/lineup/[lineupId]/page.tsx new file mode 100644 index 0000000..66bb712 --- /dev/null +++ b/src/app/lineup/[lineupId]/page.tsx @@ -0,0 +1,77 @@ +import { Metadata, ResolvingMetadata } from 'next'; +import LineupPage from './lineupPage'; + +type MetaProps = { + params: { lineupId: string }; +}; + +export async function generateMetadata({ params }: MetaProps, parent: ResolvingMetadata): Promise { + const lineupId = params.lineupId; + const paramYear = +lineupId.slice(0, 4); + const paramTeams = lineupId.slice(4).match(/.{1,2}/g); + const shortenData = { + ka: { name: 'KIA', start: 2001, end: 2023 }, + kt: { name: 'kt', start: 2015, end: 2023 }, + lg: { name: 'LG', start: 1990, end: 2023 }, + mb: { name: 'MBC', start: 1982, end: 1989 }, + nc: { name: 'NC', start: 2013, end: 2023 }, + ob: { name: 'OB', start: 1982, end: 1998 }, + sk: { name: 'SK', start: 2000, end: 2020 }, + sg: { name: 'SSG', start: 2021, end: 2023 }, + nx: { name: '넥센', start: 2008, end: 2018 }, + ds: { name: '두산', start: 1999, end: 2023 }, + lt: { name: '롯데', start: 1982, end: 2023 }, + bg: { name: '빙그레', start: 1986, end: 1993 }, + sm: { name: '삼미', start: 1982, end: 1984 }, + ss: { name: '삼성', start: 1982, end: 2023 }, + sb: { name: '쌍방울', start: 1991, end: 1999 }, + cb: { name: '청보', start: 1985, end: 1987 }, + kw: { name: '키움', start: 2019, end: 2023 }, + tp: { name: '태평양', start: 1988, end: 1995 }, + hw: { name: '한화', start: 1994, end: 2023 }, + ht: { name: '해태', start: 1982, end: 2000 }, + hd: { name: '현대', start: 1996, end: 2007 }, + } as { [key: string]: { name: string; start: number; end: number } }; + const selectedTeams = []; + + if (isNaN(paramYear) || paramYear < 1982 || paramYear > 2023 || !paramTeams || new Set(paramTeams).size !== 5) { + return { + title: (await parent).title, + }; + } + + for (let idx = 0; idx < 5; idx += 1) { + const selectedTeam = shortenData[paramTeams[idx]]; + + if (!selectedTeam || selectedTeam.start > paramYear || selectedTeam.end < paramYear) { + return { + title: (await parent).title, + }; + } + + selectedTeams.push(selectedTeam.name); + } + + return { + title: `${params.lineupId.slice(0, 4)}년 아레나 [${selectedTeams.join(' ')}] | 컴프매 아레나 도우미`, + description: `${params.lineupId.slice(0, 4)}년 [${selectedTeams.join(' ')}] 아레나 - 최적의 라인업을 구성해보세요!`, + openGraph: { + url: `/lineup/${lineupId}`, + title: `${params.lineupId.slice(0, 4)}년 아레나 [${selectedTeams.join(' ')}] | 컴프매 아레나 도우미`, + description: `${params.lineupId.slice(0, 4)}년 [${selectedTeams.join( + ' ' + )}] 아레나 - 최적의 라인업을 구성해보세요!`, + }, + twitter: { + site: `/lineup/${lineupId}`, + title: `${params.lineupId.slice(0, 4)}년 아레나 [${selectedTeams.join(' ')}] | 컴프매 아레나 도우미`, + description: `${params.lineupId.slice(0, 4)}년 [${selectedTeams.join( + ' ' + )}] 아레나 - 최적의 라인업을 구성해보세요!`, + }, + }; +} + +export default function Page() { + return ; +} diff --git a/src/app/lineup/page.tsx b/src/app/lineup/page.tsx new file mode 100644 index 0000000..667f75f --- /dev/null +++ b/src/app/lineup/page.tsx @@ -0,0 +1,5 @@ +import { redirect } from 'next/navigation'; + +export default function Lineup() { + redirect('/'); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index ff2ccf5..429a172 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,41 +1,21 @@ 'use client'; -import { useEffect } from 'react'; -import usePlayerStore from './stores/player'; -import useTableStore from './stores/table'; +import { motion } from 'framer-motion'; import MainTitle from './components/home/title'; import Selection from './components/home/selection'; import SubmitBtn from './components/home/submitBtn'; -import HomeLayout from './components/home/layout'; -import TablePosition from './components/tablePosition'; import Footer from './components/footer'; -import { motion } from 'framer-motion'; export default function Home() { - const { fetchAllTeams, fetchAllHitters, fetchAllPitchers } = usePlayerStore(); - const { isShow: isShowTable } = useTableStore(); - - useEffect(() => { - fetchAllTeams(); - fetchAllHitters(); - fetchAllPitchers(); - }, []); - return ( - - {isShowTable ? ( - - ) : ( - - + + - + - + -