[feat-46] 선수 정보에 시너지 반영되는 기능 추가 완료 (#47)

* Refactor: 선수 추가 버프 계산 함수 분리 * Feat: 라인업에 존재하는 선수라면 선수 간략 정보에 버프 적용 스텟이 표시되도록 구현 * Feat: 라인업에 존재하는 선수라면 선수 상세 정보에 버프 적용 스텟이 표시되도록 구현 * Design: 테블릿 이하 크기에서 오버롤 필터 디자인 변경 * Feat: 버프 적용 필터 기능 구현 * Feat: 메뉴 창에 시너지 설정 추가 * Design: 모바일 화면에서 양 옆 여백 추가 * Chore: require에서 fetch로 데이터 불러오도록 변경 * Fix: 엔트리 페이지 아닌 곳에서 버프적용 필터가 표시되는 문제 수정 * Design: 투수 구종 등급 가시성 증가 * Docs: 1.6.2 업데이트 내역 추가
GINK-SS · Aug 7, 2024 · 57aa293 · 57aa293
1 parent 0117429
commit 57aa293
Show file tree

Hide file tree

Showing 16 changed files with 291 additions and 92 deletions.
diff --git a/public/storage/update.json b/public/storage/update.json
@@ -1,4 +1,20 @@
 [
+  {
+    "date": "2024.08.07",
+    "version": "1.6.2",
+    "contents": [
+      {
+        "title": "선수 간략 및 상세 정보에 시너지가 반영됩니다.",
+        "descriptions": ["상단에 위치한 버튼을 통해 시너지 반영 여부를 선택할 수 있습니다."]
+      },
+      {
+        "title": "투수 구종 등급의 가시성이 높아집니다."
+      },
+      {
+        "title": "모바일 양 옆에 여백이 추가됩니다."
+      }
+    ]
+  },
   {
     "date": "2024.07.20",
     "version": "1.6.0 - 1.6.1",

diff --git a/src/app/components/common/header/buff-filter.tsx b/src/app/components/common/header/buff-filter.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import classNames from 'classnames';
+import { useShallow } from 'zustand/react/shallow';
+
+import useCommonStore from '@/app/stores/common';
+
+export default function BuffFilter() {
+  const [isBuffActive, setIsBuffActive] = useCommonStore(
+    useShallow((state) => [state.isBuffActive, state.setIsBuffActive])
+  );
+  const pathname = usePathname();
+
+  const onClick = () => {
+    setIsBuffActive();
+  };
+
+  return (
+    pathname.startsWith('/entry/') && (
+      <button
+        className='mr-15 w-50 break-all border-r-1 border-r-slate-200/20 pr-18 laptop:h-30 laptop:w-auto'
+        onClick={onClick}
+      >
+        <span
+          className={classNames('font-bold', {
+            'text-[#F98A58]': isBuffActive,
+            'text-slate-400': !isBuffActive,
+          })}
+        >
+          버프 적용
+        </span>
+      </button>
+    )
+  );
+}
diff --git a/src/app/components/common/header/index.tsx b/src/app/components/common/header/index.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import OverallFilter from './overall-filter';
 import Menu from './menu';
 import Links from './links';
+import BuffFilter from './buff-filter';
 
 export default async function Header() {
   const version = await fetch('https://api.github.com/repos/gink-ss/CPM_ARENA/releases/latest', {
@@ -40,6 +41,8 @@ export default async function Header() {
         </div>
 
         <div data-role='options' className='hidden items-center justify-end tablet:flex'>
+          <BuffFilter />
+
           <OverallFilter />
 
           <Links />

diff --git a/src/app/components/common/header/menu.tsx b/src/app/components/common/header/menu.tsx
@@ -13,13 +13,21 @@ import { GrFormNextLink } from 'react-icons/gr';
 
 import MenuFilter from './menu-filter';
 import useTableStore from '@/app/stores/table';
+import useCommonStore from '@/app/stores/common';
 
 export default function Menu() {
   const [isMenu, openMenu, closeMenu] = useTableStore(
     useShallow((state) => [state.isMenu, state.openMenu, state.closeMenu])
   );
+  const [isBuffActive, setIsBuffActive] = useCommonStore(
+    useShallow((state) => [state.isBuffActive, state.setIsBuffActive])
+  );
   const pathname = usePathname();
 
+  const onBuffActiveClick = () => {
+    setIsBuffActive();
+  };
+
   useEffect(() => {
     closeMenu();
   }, [pathname]);
@@ -54,6 +62,31 @@ export default function Menu() {
               </button>
             </div>
 
+            <div
+              className={classNames('mb-20', {
+                hidden: !pathname.startsWith('/entry/'),
+              })}
+            >
+              <span className='mb-10 block text-18 font-semibold'>시너지 설정</span>
+              <span className='mb-10 block text-12 text-red-300 opacity-80'>
+                시너지 적용 시 선수 정보에 시너지가 반영됩니다.
+              </span>
+
+              <button
+                className={classNames(
+                  'h-40 w-full rounded-lg border-1 p-8 shadow-sm duration-200',
+
+                  {
+                    'bg-slate-100 font-semibold text-[#e56d36]': isBuffActive,
+                    'text-slate-400 opacity-50 hover:bg-slate-300 hover:text-slate-800 hover:opacity-90': !isBuffActive,
+                  }
+                )}
+                onClick={onBuffActiveClick}
+              >
+                {`시너지 설정 ${isBuffActive ? 'ON' : 'OFF'}`}
+              </button>
+            </div>
+
             <MenuFilter />
 
             <div className='mb-20 border-b-1 border-slate-200/10 pb-20'>

diff --git a/src/app/components/common/header/overall-filter.tsx b/src/app/components/common/header/overall-filter.tsx
@@ -56,9 +56,12 @@ export default function OverallFilter() {
       <div
         className={classNames('relative mr-15 flex items-center justify-center border-r-1 border-r-slate-200/20 pr-15')}
       >
-        <div className='flex cursor-pointer items-center justify-end gap-5 py-5 text-17' onClick={onSelectClick}>
-          <span className='font-semibold text-[#F98A58]'>
-            {overallLimit <= 55 ? '전체' : `${overallLimit} 이상`} 보기
+        <div className='flex cursor-pointer items-center justify-end gap-5 text-17' onClick={onSelectClick}>
+          <span className='font-semibold text-[#F98A58] tablet:rounded-full tablet:border-2 tablet:border-[#F98A58] tablet:p-5 laptop:border-none'>
+            {overallLimit <= 55 ? '전체' : `${overallLimit}`}
+          </span>
+          <span className='hidden font-semibold text-[#F98A58] laptop:inline'>
+            {overallLimit <= 55 ? '' : '이상'} 보기
           </span>
           {isOverallFilter ? <IoCaretUp className='text-white/50' /> : <IoCaretDown className='text-white/50' />}
         </div>

diff --git a/src/app/entry/[entryId]/components/entry-description.tsx b/src/app/entry/[entryId]/components/entry-description.tsx
@@ -4,7 +4,7 @@ const descriptionList = ['올스타', '골든 글러브', 'MVP', '오버롤 80
 
 export default function EntryDescription() {
   return (
-    <div className='flex w-full justify-around gap-2 border-t-2 border-t-black tablet:gap-3 tablet:border-t-3'>
+    <div className='flex w-full justify-around gap-2 border-t-2 border-t-black px-1 mobileL:px-0 tablet:gap-3 tablet:border-t-3'>
       {descriptionList.map((description) => (
         <div
           className={classNames(

diff --git a/src/app/entry/[entryId]/components/entry-view.tsx b/src/app/entry/[entryId]/components/entry-view.tsx
@@ -41,7 +41,7 @@ export default function EntryView({ selectedTeams, playersOfSelectedTeams, overa
         ))}
       </div>
 
-      <div data-role='table' className='flex w-full flex-col items-center gap-2 tablet:gap-3'>
+      <div data-role='table' className='flex w-full flex-col items-center gap-2 px-1 mobileL:px-0 tablet:gap-3'>
         {Object.entries(POSITION_LIMIT).map((limit) => {
           const [position, value] = limit;
           const filteredPlayers = playersOfSelectedTeams.filter((player) => player.position === position);

diff --git a/src/app/entry/[entryId]/components/player-card.tsx b/src/app/entry/[entryId]/components/player-card.tsx
@@ -5,11 +5,11 @@ import classNames from 'classnames';
 import TeamLogo from '@/app/components/common/team-logo';
 import usePlayerStore from '@/app/stores/player';
 import useBuffStore from '@/app/stores/buff';
-import { BUFF_LIST, TEAMID_TO_SHORTEN } from '@/app/const';
+import { TEAMID_TO_SHORTEN } from '@/app/const';
+import { getCalculatedBuff } from '@/app/util/calculateBuff';
 
 import { isHitter } from '@/app/util/decideType';
 import { Hitter, HitterPosition, Pitcher, PitcherPosition } from '@/app/stores/player/types';
-import { Records } from '@/app/stores/buff/types';
 import { Team } from '@/app/stores/team/types';
 
 type PlayerCardProps = {
@@ -33,47 +33,6 @@ const PlayerCard = ({ card: { position, player }, order, selectedTeams }: Player
       ? `/assets/player/${TEAMID_TO_SHORTEN[player.team]}_hitter_${hitterHand === '좌' ? 'left' : 'right'}.png`
       : `/assets/player/${TEAMID_TO_SHORTEN[player.team]}_pitcher_${pitcherHand === '좌' ? 'left' : 'right'}.png`;
 
-  const getCalculatedOverall = (player: Hitter | Pitcher) => {
-    let calculatedOverall = player.overall;
-    const records: Records[] = ['all_star', 'golden_glove', 'mvp'];
-    const teamBuffGradesIdx = BUFF_LIST.team.grades.findLastIndex(
-      (grade) => grade <= currentBuff.teams[selectedTeams.findIndex((selectedTeam) => selectedTeam.id === player.team)]
-    );
-
-    calculatedOverall += teamBuffGradesIdx === -1 ? 0 : BUFF_LIST.team.gradeValues[teamBuffGradesIdx];
-    calculatedOverall += records.reduce((acc, curr) => {
-      if (
-        (curr === 'all_star' && !player.all_star) ||
-        (curr === 'golden_glove' && !player.golden_glove) ||
-        (curr === 'mvp' && !(player.mvp_korea || player.mvp_league))
-      ) {
-        return acc;
-      }
-
-      return (
-        acc +
-        (BUFF_LIST[curr].grades.findLastIndex((grade) => grade <= currentBuff[curr]) === -1
-          ? 0
-          : BUFF_LIST[curr].gradeValues[BUFF_LIST[curr].grades.findLastIndex((grade) => grade <= currentBuff[curr])])
-      );
-    }, 0);
-
-    if (isHitter(player)) {
-      if (player.order_type === '밸런스') calculatedOverall += 1;
-      else if (player.order_type === '상위' && order <= 2) calculatedOverall += 2;
-      else if (player.order_type === '클린업' && order <= 5 && order >= 3) calculatedOverall += 2;
-      else if (player.order_type === '하위' && order >= 6) calculatedOverall += 2;
-
-      if (player.order_numbers.includes(order)) calculatedOverall += 1;
-    }
-
-    if (!isHitter(player) && player.position !== position) {
-      calculatedOverall -= 3;
-    }
-
-    return calculatedOverall;
-  };
-
   const onClick = () => {
     if (!player) return;
 
@@ -132,7 +91,7 @@ const PlayerCard = ({ card: { position, player }, order, selectedTeams }: Player
             <>
               <div className='flex flex-col items-start gap-1 font-semibold mobileL:gap-2'>
                 <span className='scale-y-125 text-[2.2vw] drop-shadow-[0_1px_5px_#000] mobileL:text-16'>
-                  {getCalculatedOverall(player)}
+                  {getCalculatedBuff({ player, selectedTeams, order, position, currentBuff }) + player.overall}
                 </span>
                 {player.all_star && (
                   <Image

diff --git a/src/app/entry/[entryId]/components/player-detail.tsx b/src/app/entry/[entryId]/components/player-detail.tsx
@@ -9,19 +9,47 @@ import cpmLogo from '@/public/assets/logo/cpmRealLogo.webp';
 
 import TeamLogo from '@/app/components/common/team-logo';
 import usePlayerStore from '@/app/stores/player';
+import useBuffStore from '@/app/stores/buff';
 import { HITTER_STAT, HITTER_STAT_DETAIL, PITCHER_STAT, PITCHER_STAT_DETAIL } from '@/app/const';
 
+import { getCalculatedBuff } from '@/app/util/calculateBuff';
 import { isHitter } from '@/app/util/decideType';
 import { Team } from '@/app/stores/team/types';
+import useCommonStore from '@/app/stores/common';
 
 const PlayerDetail = ({ selectedTeams }: { selectedTeams: Team[] }) => {
-  const [selectedPlayer, isShowDetail, pinnedPlayer, clearDetail] = usePlayerStore(
-    useShallow((state) => [state.selectedPlayer, state.isShowDetail, state.pinnedPlayer, state.clearDetail])
+  const [selectedPlayer, isShowDetail, pinnedPlayer, hitterLineup, pitcherLineup, clearDetail] = usePlayerStore(
+    useShallow((state) => [
+      state.selectedPlayer,
+      state.isShowDetail,
+      state.pinnedPlayer,
+      state.hitterLineup,
+      state.pitcherLineup,
+      state.clearDetail,
+    ])
   );
+  const currentBuff = useBuffStore((state) => state.currentBuff);
+  const isBuffActive = useCommonStore((state) => state.isBuffActive);
   const [scale, setScale] = useState(1);
   const player =
     isShowDetail.target === 'pinned' ? pinnedPlayer : isShowDetail.target === 'selected' ? selectedPlayer : null;
 
+  const extraPoints =
+    isBuffActive &&
+    player &&
+    ((isHitter(player) && hitterLineup.some((hitter) => hitter.player === player)) ||
+      (!isHitter(player) && pitcherLineup.some((pitcher) => pitcher.player === player)))
+      ? getCalculatedBuff({
+          player,
+          selectedTeams,
+          order: isHitter(player) ? hitterLineup.findIndex((lineup) => lineup.player === player) + 1 : 0,
+          position: isHitter(player)
+            ? hitterLineup.find((hitter) => hitter.player === player)!.position
+            : pitcherLineup.find((pitcher) => pitcher.player === player)!.position,
+          currentBuff,
+        })
+      : 0;
+
   useEffect(() => {
     function handleResize() {
       setScale(window.innerWidth <= 470 ? 0.7 : window.innerWidth <= 560 ? 0.8 : window.innerWidth <= 660 ? 0.9 : 1);
@@ -70,7 +98,7 @@ const PlayerDetail = ({ selectedTeams }: { selectedTeams: Team[] }) => {
         >
           <div className='flex items-center justify-between px-20 py-12'>
             <span className='scale-x-125 scale-y-150 text-30 font-extrabold drop-shadow-[0_0_2px_#222]'>
-              {player.overall}
+              {player.overall + extraPoints}
             </span>
 
             <div className='flex flex-col items-end'>
@@ -96,15 +124,26 @@ const PlayerDetail = ({ selectedTeams }: { selectedTeams: Team[] }) => {
                       <span>{value[0]}</span>
                       <span
                         className={classNames({
-                          'text-[#e643d8]': (player[value[1]] as number) >= 110,
-                          'text-[#a652e3]': (player[value[1]] as number) >= 100 && (player[value[1]] as number) < 110,
-                          'text-[#e35252]': (player[value[1]] as number) >= 90 && (player[value[1]] as number) < 100,
-                          'text-[#fca96a]': (player[value[1]] as number) >= 80 && (player[value[1]] as number) < 90,
-                          'text-[#fceb6a]': (player[value[1]] as number) >= 70 && (player[value[1]] as number) < 80,
-                          'text-white': (player[value[1]] as number) < 70,
+                          'text-[#e643d8]': (player[value[1]] as number) + extraPoints >= 110,
+                          'text-[#a652e3]':
+                            (player[value[1]] as number) + extraPoints >= 100 &&
+                            (player[value[1]] as number) + extraPoints < 110,
+                          'text-[#e35252]':
+                            (player[value[1]] as number) + extraPoints >= 90 &&
+                            (player[value[1]] as number) + extraPoints < 100,
+                          'text-[#fca96a]':
+                            (player[value[1]] as number) + extraPoints >= 80 &&
+                            (player[value[1]] as number) + extraPoints < 90,
+                          'text-[#fceb6a]':
+                            (player[value[1]] as number) + extraPoints >= 70 &&
+                            (player[value[1]] as number) + extraPoints < 80,
+                          'text-white': (player[value[1]] as number) + extraPoints < 70,
                         })}
                       >
-                        {player[value[1]]}
+                        {(player[value[1]] as number) + extraPoints}
+                        <span className='absolute inline-block pl-3 text-white'>
+                          {extraPoints === 0 ? '' : `(+${extraPoints})`}
+                        </span>
                       </span>
                     </div>
                   ))}
@@ -159,15 +198,26 @@ const PlayerDetail = ({ selectedTeams }: { selectedTeams: Team[] }) => {
                       <span>{value[0]}</span>
                       <span
                         className={classNames({
-                          'text-[#e643d8]': (player[value[1]] as number) >= 110,
-                          'text-[#a652e3]': (player[value[1]] as number) >= 100 && (player[value[1]] as number) < 110,
-                          'text-[#e35252]': (player[value[1]] as number) >= 90 && (player[value[1]] as number) < 100,
-                          'text-[#fca96a]': (player[value[1]] as number) >= 80 && (player[value[1]] as number) < 90,
-                          'text-[#fceb6a]': (player[value[1]] as number) >= 70 && (player[value[1]] as number) < 80,
-                          'text-white': (player[value[1]] as number) < 70,
+                          'text-[#e643d8]': (player[value[1]] as number) + extraPoints >= 110,
+                          'text-[#a652e3]':
+                            (player[value[1]] as number) + extraPoints >= 100 &&
+                            (player[value[1]] as number) + extraPoints < 110,
+                          'text-[#e35252]':
+                            (player[value[1]] as number) + extraPoints >= 90 &&
+                            (player[value[1]] as number) + extraPoints < 100,
+                          'text-[#fca96a]':
+                            (player[value[1]] as number) + extraPoints >= 80 &&
+                            (player[value[1]] as number) + extraPoints < 90,
+                          'text-[#fceb6a]':
+                            (player[value[1]] as number) + extraPoints >= 70 &&
+                            (player[value[1]] as number) + extraPoints < 80,
+                          'text-white': (player[value[1]] as number) + extraPoints < 70,
                         })}
                       >
-                        {player[value[1]]}
+                        {(player[value[1]] as number) + extraPoints}
+                        <span className='absolute inline-block pl-3 text-white'>
+                          {extraPoints === 0 ? '' : extraPoints < 0 ? `(${extraPoints})` : `(+${extraPoints})`}
+                        </span>
                       </span>
                     </div>
                   ))}
@@ -195,7 +245,7 @@ const PlayerDetail = ({ selectedTeams }: { selectedTeams: Team[] }) => {
                               'bg-[#1b59f5]': grade === 'D',
                             })}
                           >
-                            {grade}
+                            <span className='drop-shadow-[0px_0px_2px_#000]'>{grade}</span>
                           </div>
                         </div>
                       );
@@ -216,7 +266,7 @@ const PlayerDetail = ({ selectedTeams }: { selectedTeams: Team[] }) => {
                   >
                     <div className='py-4'>{value[0]}</div>
                     <div className='w-full border-y-1 border-b-[#00000020] border-t-[#00000010] bg-gradient-to-br from-[#662315] to-[#5e1d10] py-4 text-center'>
-                      {player[value[1]]}
+                      {(player[value[1]] as number) + extraPoints}
                     </div>
                   </div>
                 ))}
@@ -230,7 +280,7 @@ const PlayerDetail = ({ selectedTeams }: { selectedTeams: Team[] }) => {
                   >
                     <div className='py-4'>{value[0]}</div>
                     <div className='w-full border-y-1 border-b-[#00000020] border-t-[#00000010] bg-gradient-to-br from-[#662315] to-[#5e1d10] py-4 text-center'>
-                      {player[value[1]]}
+                      {(player[value[1]] as number) + extraPoints}
                     </div>
                   </div>
                 ))}