[1.4.0] CPM_Arena Production (Beta Final) (#28)

[1.4.0] CPM_Arena Production (Beta Final)
GINK-SS · Jun 18, 2024 · 8966d74 · 8966d74
2 parents 32f0cf5 + 2c23ebd
commit 8966d74
Show file tree

Hide file tree

Showing 18 changed files with 370 additions and 89 deletions.
diff --git 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
@@ -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,20 +95,23 @@
   {
     "id": "빙그레",
     "name": "빙그레 이글스",
+    "shorten": "bg",
     "logo": "/assets/logo/binggrae.svg",
     "years": [1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993]
   },
 
   {
     "id": "삼미",
     "name": "삼미 슈퍼스타즈",
+    "shorten": "sm",
     "logo": "/assets/logo/sammi.webp",
     "years": [1982, 1983, 1984]
   },
 
   {
     "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,33 +123,38 @@
   {
     "id": "쌍방울",
     "name": "쌍방울 레이더스",
+    "shorten": "sb",
     "logo": "/assets/logo/sbw.webp",
     "years": [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
   },
 
   {
     "id": "청보",
     "name": "청보 핀토스",
+    "shorten": "cb",
     "logo": "/assets/logo/chungbo.webp",
     "years": [1985, 1986, 1987]
   },
 
   {
     "id": "키움",
     "name": "키움 히어로즈",
+    "shorten": "kw",
     "logo": "/assets/logo/kiwoom.svg",
     "years": [2019, 2020, 2021, 2022, 2023]
   },
 
   {
     "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 → src/app/components/background/index.tsx b/src/app/components/home/layout/index.tsx → src/app/components/background/index.tsx
@@ -2,16 +2,16 @@ import { ReactNode } from 'react';
 
 import * as S from './styles';
 
-type HomeLayoutProps = {
+type BackgroundProps = {
   children: ReactNode;
 };
 
-const HomeLayout = ({ children }: HomeLayoutProps) => {
+const Background = ({ children }: BackgroundProps) => {
   return (
     <S.Container>
       <S.Content>{children}</S.Content>
     </S.Container>
   );
 };
 
-export default HomeLayout;
+export default Background;
diff --git a/src/app/components/home/layout/styles.ts → src/app/components/background/styles.ts b/src/app/components/home/layout/styles.ts → src/app/components/background/styles.ts
diff --git 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
@@ -0,0 +1,15 @@
+import * as S from './styles';
+
+const Loading = ({ text }: { text: string }) => {
+  return (
+    <S.Container>
+      <S.Description>
+        <S.Spinner />
+
+        <S.Text>{text}</S.Text>
+      </S.Description>
+    </S.Container>
+  );
+};
+
+export default Loading;
diff --git a/src/app/components/loading/styles.ts 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
@@ -1,12 +1,14 @@
+import { useRouter } from 'next/navigation';
 import { IoMenuOutline } from 'react-icons/io5';
 import useTableStore from '@/app/stores/table';
 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);