[Feat] 선착순 밸런스 게임 구현 #158

sooyeoniya · 2024-08-15T10:13:25Z

🖥️ Preview

메인 페이지 API 연동

2024-08-15.6.30.15.mov

선착순 밸런스 게임 구현

2024-08-15.6.43.57.mov

✏️ 한 일

❗️ 발생한 이슈 (해결 방안)

✏️ 선착순 밸런스 게임 상태 관리
나머지는 위키에 정리해서 올리겠습니다! 좀만 기다려주세용 😭ㅠㅠ
이슈 별로 브랜치 많이 못나눈 점에 대해 사과드립니다 ..🥺

❓ 논의가 필요한 사항

선착순 밸런스 게임 진행 전과 진행 중에 대한 카운트 다운을 API로 시간을 연동하게 되면 밤 10시까지 게임 시작하기를 기다려야 하는데, 데모할 때 밤 10시까지 기다릴 수는 없다고 생각해서 임시로 시간 따로 설정해두었습니다. (preCountdown, runCountdown) 만약 발표 날에 시연하게 되면 선착순 밸런스 게임을 어떻게 실시간으로 보여줄 수 있을지 고민해보면 좋을 것 같습니다!

✔️ 앞으로 할 일

github-actions · 2024-08-15T13:50:35Z

빌드를 성공했습니다! 🎉

github-actions · 2024-08-15T13:57:08Z

빌드를 성공했습니다! 🎉

github-actions · 2024-08-15T15:37:39Z

빌드를 성공했습니다! 🎉

github-actions · 2024-08-15T15:40:35Z

빌드를 성공했습니다! 🎉

github-actions · 2024-08-16T02:18:12Z

빌드를 성공했습니다! 🎉

github-actions · 2024-08-16T07:28:11Z

빌드를 성공했습니다! 🎉

github-actions · 2024-08-16T07:56:17Z

빌드를 실패했습니다. ❌ 자세한 내용은 로그를 참고해주세요.

github-actions · 2024-08-16T08:03:14Z

빌드를 성공했습니다! 🎉

jhj2713

복잡한 스펙이었는데 구현하느라 고생 많았어유ㅠㅠ👍

jhj2713 · 2024-08-15T10:56:13Z

client/src/constants/Rush/rushCard.ts

+    [key in (typeof CARD_DAYS)[keyof typeof CARD_DAYS]]: {
+        [CARD_OPTION.LEFT_OPTIONS]: CardColor;
+        [CARD_OPTION.RIGHT_OPTIONS]: CardColor;
+    };


요것도 따로 interface로 빼줘도 좋을 것 같아용 CardColorType 같은 식으로요!

반영했습니다 🤩

jhj2713 · 2024-08-15T11:08:52Z

client/src/contexts/rushGameContext.tsx

+                gameState,
+                preCountdown,
+                runCountdown,
+                updateCardOptions,
+                updateUserStatusAndSelectedOption,
+                getSelectedCardInfo,
+                getOptionRatio,
+                fetchRushBalance,


너무 많은 setter가 내려가는 것 같아서 요거 나중에 flux 패턴 적용해서 action dispatch 하게 해주면 더 깔끔해지고 좋을 것 같아요!

알겠습니다! 조만간 한 번 적용해서 리팩토링 해볼게여!!

jhj2713 · 2024-08-15T11:26:34Z

client/src/contexts/rushGameContext.tsx

+            switch (gameState.phase) {
+                case CARD_PHASE.NOT_STARTED:
+                    if (rushData.serverTime && currentEvent?.startDateTime) {
+                        const preCountdown = Math.max(
+                            0,
+                            Math.floor((startTime - serverTime) / 1000)
+                        );
+                        setInitialPreCountdown(preCountdown);
+                    }
+                    break;
+                case CARD_PHASE.IN_PROGRESS:
+                    if (rushData.serverTime && currentEvent?.endDateTime) {
+                        const runCountdown = Math.max(0, Math.floor((endTime - serverTime) / 1000));
+                        setInitialRunCountdown(runCountdown);
+                    }
+                    break;
+            }


Suggested change

switch (gameState.phase) {

case CARD_PHASE.NOT_STARTED:

if (rushData.serverTime && currentEvent?.startDateTime) {

const preCountdown = Math.max(

0,

Math.floor((startTime - serverTime) / 1000)

);

setInitialPreCountdown(preCountdown);

}

break;

case CARD_PHASE.IN_PROGRESS:

if (rushData.serverTime && currentEvent?.endDateTime) {

const runCountdown = Math.max(0, Math.floor((endTime - serverTime) / 1000));

setInitialRunCountdown(runCountdown);

}

break;

}

if (gameState.phase === CARD_PHASE.NOT_STARTED && rushData.serverTime && currentEvent?.startDateTime) {

const preCountdown = Math.max(

0,

Math.floor((startTime - serverTime) / 1000)

);

setInitialPreCountdown(preCountdown);

} else if (gameState.phase === CARD_PHASE.IN_PROGRESS && rushData.serverTime && currentEvent?.endDateTime) {

const runCountdown = Math.max(0, Math.floor((endTime - serverTime) / 1000));

setInitialRunCountdown(runCountdown);

}

switch랑 if문 같이 쓰는 것보다 이렇게 조건 묶어주는게 더 간단하지 않을까욥?

jhj2713 · 2024-08-15T11:39:13Z

client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx

+    );
+}
+
+function OptionDisplay({


OptionDisplay는 컴포넌트 파일로 따로 빼도 좋지 않을까용? 필요한 데이터는 다 props로 받고 있어서 이 파일에 있을 이유가 딱히 없어보여서요!

FinalResult 컴포넌트에도 유사한 OptionDisplay가 있어서 둘 다 다른 이름의 컴포넌트로 분리했습니다!! (RushCurrentOptionDisplay, RushResultOptionDisplay)

jhj2713 · 2024-08-15T11:40:33Z

client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx

+function ReloadButton({ onClick }: { onClick: () => void }) {
+    return (
+        <button onClick={onClick}>
+            <Reload />
+        </button>
+    );
+}


요건 진짜 개인적인 의견인데 이정도는 공통화까지는 안 해도 되지 않을까 싶어욥,,! button 태그 하나 감싸주는건데 컴포넌트로 빼게 되면 오히려 컴포넌트 선언문이 길어지게 돼서용

jhj2713 · 2024-08-15T11:51:08Z

client/src/features/RushGame/RushGameSections/FinalResult.tsx

+    LOSING: "아쉽네요, 다음 기회를 다시 노려봐요.",
+};
+
+type WinStatus = "Win" | "Lose" | "Tie";


win, lose, tie를 상수로 빼서 사용하면 어떨까용

jhj2713 · 2024-08-15T11:53:56Z

client/src/contexts/rushGameContext.tsx

+
+    const fetchRushBalance = useCallback(async (): Promise<void> => {
+        try {
+            const rushBalanceData = await RushAPI.getRushBalance(cookies[COOKIE_TOKEN_KEY]);


아 그리구 fetch 요청하는 부분은 사용하는 컴포넌트로 빼고 context 에서는 setting하는 dispatch 함수만 빼서 값을 넣어주는 용도로만 사용하는게 어떨까용? 지금 provider가 값을 가공해서 넣어주는 용도 외에 데이터 패칭으로도 쓰이니까 너무 많은 일을 한다는 생각이 들어서요!

이건 진짜 개인적인 생각이에유,,, 여러번 사용되는 코드라 재사용을 위해서 context에 선언하는게 나은거면 이렇게 해도 좋은 것 같다구 생각합니당

제가 RushGame 관련 컴포넌트 중에 두 개 이상에서 동일한 호출이 발생하는 경우에 공통으로 분리해주기 위해서 context로 따로 추출한건데, 앞서 말씀해주신 flux 패턴 관련해서 적용할 때 따로 뺄지 말지 한 번 더 고민해볼게용! 저도 사실 구현하면서 뭔가 provider 코드가 너무 길어진다는 느낌이 들어서 리팩토링할 필요가 있다고 느끼긴 했어요ㅠㅠ 좋은 의견 감사합니다 🤩

jhj2713 · 2024-08-15T14:29:53Z

client/src/hooks/useAuth.ts

+    useEffect(() => {
+        if (inviteUser) {
+            setCookie(COOKIE_KEY.INVITE_USER, inviteUser);
+        }
+    }, [inviteUser]);
+
+    useEffect(() => {
+        if (authToken && isSuccessGetAuthToken) {
+            setCookie(COOKIE_KEY.ACCESS_TOKEN, authToken.accessToken);


setCookie 할 때 path 설정 해줘야하지 않았나용,,? 저번에 그래야 path에 구애받지 않고 cookie를 쓸 수 있었던 것 같아서용

우선 루트로 잘 만들어지긴 하는데 setCookie부분 다 path 명시해둘게용

jhj2713 · 2024-08-16T08:15:32Z

client/src/features/Main/Headline.tsx

+    // DATA RESET TEST API
+    const { fetchData: getRushTodayEventTest } = useFetch<RushEventStatusCodeResponse, string>(
+        (token) => RushAPI.getRushTodayEventTest(token)
+    );


요건 나중에 삭제 하는거죵?

네 맞습니당~ 나중에는 그냥 백엔드에서 직접 해준다고 우선 제 쪽에서 테스트용으로 쓰라고 준거에용

갑자기 또 이 테스트 API만 아래 400 Bad Request 오류 뜨네요,,
{errorCode: "JWT_PARSE_EXCEPTION", message: "Json 파싱 오류입니다."}
뭔가 테스트 API가 종종 이런 오류가 있는 것 같은데, 실질적으로 최종 배포될 때는 없애는게 맞고,
지금 dev에서는 그냥 주석 처리하고 개발하면서 데이터 리셋할 때 주석 해제하고 사용해도 될 것 같은데 어떻게 생각하시나용?

오류 관련해서 슬랙 확인했는데 아마 token 안 넣어서 그런 것 같아용 슬랙으로 보내준 사진 보니까 token이 undefined로 넘어가더라구요!

백엔드가 token 유효검사 뺐다고 하니깐 그냥 두고 나중에 main 푸시할때만 빼도 될 것 같아용

조아용~ 제쪽에서두 토큰 뺐습니다! 첨에 메인 페이지 들어갈 때 토큰이 기본적으로 없으면 저런 오류나는 것 같아서 매번 이벤트 페이지 가서 토큰 넣어줘야 하는거 번거로웠는데 다행입니다 :)

jhj2713 · 2024-08-16T08:21:02Z

client/src/features/Main/Rush.tsx

+            setStartDateTime(rushData.eventStartDate);
+            setEndDateTime(rushData.eventEndDate);
+
+            const events = rushData.events.map((event, idx) => {
+                const rushEvent = RUSH_EVENT_DATA[idx];
+                const eventEndTime = getMsTime(event.endDateTime);
+
+                return {
+                    id: event.rushEventId,
+                    date: event.startDateTime,
+                    image: rushEvent?.image || "",
+                    prizeName: rushEvent?.prizeName || "",
+                    isPastEvent: serverDateTime > eventEndTime,
+                    isTodayEvent:
+                        event.rushEventId === rushData.todayEventId &&
+                        serverDateTime <= eventEndTime,
+                };
+            });
+            setRushEvents(events);


요 데이터들 굳이 다른 state로 관리 안 하고 바로 가져다 써도 되지 않을까용?

Suggested change

setStartDateTime(rushData.eventStartDate);

setEndDateTime(rushData.eventEndDate);

const events = rushData.events.map((event, idx) => {

const rushEvent = RUSH_EVENT_DATA[idx];

const eventEndTime = getMsTime(event.endDateTime);

return {

id: event.rushEventId,

date: event.startDateTime,

image: rushEvent?.image || "",

prizeName: rushEvent?.prizeName || "",

isPastEvent: serverDateTime > eventEndTime,

isTodayEvent:

event.rushEventId === rushData.todayEventId &&

serverDateTime <= eventEndTime,

};

});

setRushEvents(events);

const { eventStartDate, eventEndDate, todayEventId, rushEventId, image, prizeName } = rushData;

const events = useMemo(() => rushData.events.map((event, idx) => {

const rushEvent = RUSH_EVENT_DATA[idx];

const eventEndTime = getMsTime(event.endDateTime);

return {

id: event.rushEventId,

date: event.startDateTime,

image: rushEvent?.image || "",

prizeName: rushEvent?.prizeName || "",

isPastEvent: serverDateTime > eventEndTime,

isTodayEvent:

event.rushEventId === rushData.todayEventId &&

serverDateTime <= eventEndTime,

};

}), [rushData])

어차피 useFetch가 반환하는 값이 state니까 따로 state 안 만들고 약간 요런식으로 해서 useEffect 내부가 아니라 컴포넌트 내부에서 바로 사용해도 괜찮지 않을까 싶어서요,,!

반영했습니다! 유사하게 구현한 Main/Headline.tsx, Main/Lottery.tsx 부분에도 구조분해할당해서 바로 내부에서 호출하도록 변경했습니다! 굳이 state를 또 만들 필요는 없었던 것 같네용

github-actions · 2024-08-18T07:03:17Z

빌드를 성공했습니다! 🎉

jhj2713 · 2024-08-18T07:21:54Z

client/src/hooks/useToggleContents.ts

+    duration = 5000,
+    useDuration = true,


duration이 undefined인 경우 duration을 사용하지 않는다고 판단하면 되지 않나용? useDuration을 추가로 선언한 이유가 따로 있으신가욥?

그냥 toggle 함수만 필요한 부분에서는 duration이 없어야 하는데, duration이 기본값 5000으로 설정되어있으면 undefined인 경우로 처리가 안돼서 따로 boolean 값으로 설정해준거긴 합니다만, 아니면 아예 아래 코드처럼 해놓으면 useDuration이 필요 없을 것 같기도 하고여? toggle 함수만 사용할 부분에는 그냥 props 넘길 때 duration 자체를 -1로 두고, duration가 0보다 작을 때는 타이머가 작동 안하게 해도 될까요? 뭔가 -1이라는 것 자체가 맘에는 안들긴 하는데, 이렇게하면 잘 작동하는 것 같아용! (아예 props 넘길 때 duration 을 undefined로 설정하고 if 조건문에서 (duration !== undefined && duration > 0) 이렇게도 설정해봤는데, 이렇게 했는데두 5초 타이머가 작동 되네용 ㅠㅠ,, 이건 뭐가 문제인지...)

사실 duration 이 필요없는 부분에서는 그냥 toggle 함수만 필요하기 때문에 아예 컴포넌트 자체에서 그냥 toggle 함수 부분만 따로 빼서 적용해도 되는데, 괜히 훅으로 묶어서 써보겠다고 해서 골머리 아프네용 ㅠㅠ

어떤 방식이 더 좋을지 추천해주시면 감사하겠습니다 ! :)

제가 생각한 수정 코드

// 토글 함수만 사용하는 부분 const { toggleContents, toggle } = useToggleContents({ duration: -1 });

// 5초 타이머 동작 후 토글되는 로직이 필요한 부분 const { toggleContents } = useToggleContents();

import { useCallback, useEffect, useState } from "react"; interface UseToggleContentsProps { initialStatus?: boolean; duration?: number; // 요기 수정 (useDuration 제거) } export default function useToggleContents({ initialStatus = true, duration = 5000, }: UseToggleContentsProps = {}) { const [toggleContents, setToggleContents] = useState(initialStatus); const toggle = useCallback(() => { setToggleContents((prev) => !prev); }, []); useEffect(() => { if (duration && duration > 0) { // 요기 수정 (useDuration 제거) const timer = setTimeout(() => { toggle(); }, duration); return () => clearTimeout(timer); } }, [duration, toggle]); // 요기 수정 (useDuration 제거) return { toggleContents, toggle }; }

아하 기본값 설정때매 undefined 처리가 안되는군용 그 부분을 생각 못했네욥,, 그럼 useDuration 사용해서 원래 코드처럼 붙기처리 하는게 맞을 것 같아용 근데 그러면 굳이 if 문에 duration 조건까지 넣어줄 필요는 없지 않을까요?? useDuration이 timer를 쓰겠다는 의미를 가지고 있으니까요!

useEffect(() => { if (useDuration) { const timer = setTimeout(() => { toggle(); }, duration); return () => clearTimeout(timer); } }, [useDuration, duration, toggle]);

요런식으로용

맞네용! 반영했고 동작 잘 되는거 확인했습니다!

github-actions · 2024-08-18T07:59:06Z

빌드를 성공했습니다! 🎉

sooyeoniya added 30 commits August 4, 2024 17:09

feat: 밸런스 게임 카드 데이터 상수화

565ca29

feat: 선칙순 밸런스 게임 RushCardDescription 컴포넌트 UI 구현

40d385b

feat: 선착순 밸런스 게임 RushCard 컴포넌트 UI 구현

f25b85c

feat: 선착순 밸런스 게임 RushCardComparison 컴포넌트 UI 구현

e60991d

fix: CARD_COLOR 타입 오류 수정

6787f39

feat: CARD_TYPE 상수 선언

e754349

feat: RushCard 컴포넌트 데이터 동적 업데이트 방식 적용

1f05f0c

refactor: RushCard 컴포넌트 내부 객체 타입 명시

f2add85

feat: RushCardComparison 상수 데이터 연동 및 RushCard로 Props 전달

b48ba8c

chore: 필요 없는 테스트용 컴포넌트 호출 제거

481123e

fix: RushCard 컴포넌트 내부 ReactNodes[] 렌더링 시 key Props 추가

2b609f9

feat: RushCardDescription 컴포넌트 mock 데이터 임시 연동

1230052

fix: 불필요한 import 제거

fd9e8fd

fix: 브랜치 충돌 해결 및 머지

df7f0c5

Merge branch 'dev' into feat/#82-rush-card

b647820

feat: Rush 타입 선언 및 Fetch API 구현

e225a98

chore: Rush API 관련 주석 삭제

d259f5e

fix: Rush API POST 응답 상태 처리 코드 삭제

bdcdecc

feat: Main 페이지 Rush 이벤트 경품 API 연동

f3d9921

feat: Rush 이벤트 경품 isPastEvent, isTodayEvent 로직 수정

8e5954f

feat: date util 포맷 함수 추가 및 공통 파싱 로직 분리

3c78a9b

feat: Main 페이지 Rush 이벤트 기간 API 연동

ebbc15c

feat: RushEvent 컴포넌트 storybook 작성

1554c64

feat: Lottery 타입 API 명세 반영 및 API 연동

edea461

feat: date util 연도 추가

252c1e3

fix: 빌드 오류 해결

cc81296

refactor: formatEventDate 함수 빼기

5d8e753

refactor: Notice fetch API 함수 분리

585d852

rename: rushEventData 상수 이름 변경

3ef0416

feat: Main Headline 임시 API 연동 (추후 전체 기간에 대한 API로 연동)

0c8322a

sooyeoniya added 4 commits August 15, 2024 17:56

chore: 프로그래스바 컴포넌트 내부 컨벤션 통일

cb915bb

rename: RushGame 관련 폴더명 변경

527def5

refactor: RushGame 관련 상수 데이터 및 타입 수정

9f63c0a

chore: 게임 진행 카운트 다운 시간 변경

8a53a53

sooyeoniya added the feat 기능 구현 label Aug 15, 2024

sooyeoniya requested a review from jhj2713 August 15, 2024 10:13

sooyeoniya self-assigned this Aug 15, 2024

fix: 충돌 해결 및 토큰 경로 수정

1d074ca

refactor: useAuth 훅 재구현

c02924a

refactor: getMsTime 유틸 반영

06ec8b9

refactor: fetchWithTimeout 반영

d88b744

chore: 카운트 변경

ebf96db

refactor: useFetch 훅 반영

3d3b90d

refactor: Notice/index.tsx 내부 useFetch 훅 반영 시 promise.all 빼고 리팩토링

df54ecd

fix: EventDateData 타입 오류 수정

6db3ea4

jhj2713 reviewed Aug 16, 2024

View reviewed changes

refactor: PR 리뷰 반영

508e696

jhj2713 reviewed Aug 18, 2024

View reviewed changes

refactor: useToggleContents 훅 관련 PR 리뷰 반영

fdad436

sooyeoniya merged commit 3da2799 into dev Aug 18, 2024
2 checks passed

[Feat] 선착순 밸런스 게임 구현 #158

[Feat] 선착순 밸런스 게임 구현 #158

Conversation

sooyeoniya commented Aug 15, 2024 • edited Loading

🖥️ Preview

메인 페이지 API 연동

선착순 밸런스 게임 구현

✏️ 한 일

❗️ 발생한 이슈 (해결 방안)

❓ 논의가 필요한 사항

✔️ 앞으로 할 일

github-actions bot commented Aug 15, 2024

github-actions bot commented Aug 15, 2024

github-actions bot commented Aug 15, 2024

github-actions bot commented Aug 15, 2024

github-actions bot commented Aug 16, 2024

github-actions bot commented Aug 16, 2024

github-actions bot commented Aug 16, 2024

github-actions bot commented Aug 16, 2024

jhj2713 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sooyeoniya Aug 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sooyeoniya Aug 18, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Aug 18, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Aug 18, 2024

sooyeoniya commented Aug 15, 2024 •

edited

Loading

sooyeoniya Aug 16, 2024 •

edited

Loading

sooyeoniya Aug 18, 2024 •

edited

Loading