[Team-13] 야구게임 #45
Merged
[Team-13] 야구게임 #45
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- min27604/baseball/#6
feat: 시작 화면, 게임 화면 라우팅 처리
- min27604/baseball/#2 - 게임 리스트 렌더링 하는 데에 에러 있음
min27604/baseball/#2
게임첫화면 mockData 임시설정
- Component 4곳 구성 - Score, CurrentPlayer, Stadium, LogList Cmponent 생성 - Score, CurrentPlayer 구조완성 - min27604/basball/#11
- img -> backgroundimg로 변경 - min27604/baseball/#11
- Stadium component 내부 구조 설계 및 CSS 작업 - LogList component 폴더 구조 후 상세 작업 진행중 - min27604/baseball/#11
- min27604/baseball/codesquad-members-2021#45
- min27604/baseball/#10 - 게임 목록에 3개씩 보이도록 수정 - 기타 자잘한 border-radius, font-size 등 수정
- min27604/baseball/#10 - vs가 가운데에 고정되도록 홈팀은 오른쪽 정렬 시킴
- min27604/baseball/#10 - 게임 목록에 경기 번호 추가 (MatchNumber 스타일드 컴포넌트)) - useContext를 사용해보는 중
- min27604/baseball/#10 - Styled component였던 Team 컴포넌트를 일반 컴포넌트로 분리
- min27604/baseball/#10 - 서버와 통신하는 방법을 변경하기로 해서 현재까지 진행한 것 일단 타미와 합치기 위해 푸시
PlayScreen UI 구성
- min27604/baseball/#11
- min27604/baseball/#15
- min27604/baseball/#15
* refactor: startScreen 디렉토리 생성 - min27604/baseball/#10 * fix: 디렉토리 생성에 따른 경로 수정 - min27604/baseball/#10 * refactor: context.jsx 파일 분리 및 App단으로 변경 - min27604/baseball/#10 * add: localhost로 fetch 보내는 로직 추가, context를 일단 다시 App으로 넣음 - min27604/baseball/#10 - context를 App에 다시 넣은 이유는, setState 로직이 필요한데 useState를 컴포넌트 안에서만 사용할 수 있어서이다. 나중에 costom hook으로 만들 수 있겠다는 조언을 들었다. - public directory 아래에 json 파일을 만들어 목데이터를 받아왔다.
- Stadium의 PlayPitch 수정 - Stadium의 PlayBoardTemp 수정 - min27604/baseball/#15
PITCH 클릭 시 ballCnt 상태 관리 기능 생성 (ContextAPI 사용)
- min27604/baseball/#15
- min27604/baseball/#15 - API 구조 변경에 따라 수정 필요
- Strike==3 or Ball==4 일 때 아웃과 안타 동작 - min27604/baseball/#15
게임 화면의 양 팀 이름을 서버에서 받아온 데이터를 이용해 표시
- min27604/baseball/#15
- LogList: 한박자 느린 Hitter변경, 현재 타자정보 변경 로직 미구현 - min27604/baseball/#15
- min27604/baseball/#15 - 기존에 isHome과 myTeam / counterTeam 으로 4가지 경우로 처리하던 것을 homeTeam, awayTeam을 이용하는 것으로 수정
…의 hit 변경 임시 성공 - min27604/baseball/#15
현재 투수표시- inning top이면 홈팀 투수, 아니면 원정팀 투수
LogList 안타/아웃 시 totalOutCount++, currHitter 변경, 해당 선수의 hit 변경 임시 성공
- min27604/baseball/#15
이닝, 초, 말 바꿔주는 로직 수정
- min27604/baseball/#15
- min27604/baseball/#15
현재 라운드 정보 표시 (회초, 회말, 공수)
- LogList는 현재 H(타자가 안타를 바로 칠 경우)를 잡지 못함(B4개 ok), (O도 S3개 count해서 잡음) - Stadium에서 S가 3번째 되었을 때 setTimeout으로 한번 보여주고 -> O으로 변경한게 문제로 보임 -min27604/baseball/#15
PlayScreen- LogList 타자 별 Log 출력
crongro
pushed a commit
that referenced
this pull request
May 18, 2021
* Update README.md * Update README.md * Update README.md * docs: FE 초기 폴더구조 * feat: 리액트 기본 환경 설정 * feat:[#3] teamSelect 폴더구성 및 Component 제작 중 * chore * feat : [#5] teamScore 폴더 제작 및 TeamScore Component 제작 완성 * feat: [#3] TeamSelect 초기 버전 제작 완성 및 추가 설정 - Styled-components의 ThemeProvider 적용 - 디렉토리 구조 일부 변경 * chore: .DS_Store 제거 * feat: [#11] GamePlay 컴포넌트 구조 설계 완료 - GamePlay 컴포넌트 CSS 정의 (프로토타입) - GamePlay 컴포넌트를 구성하는 모든 파일 생성 - 기능은 없음 (파일만 생성함) - App.js의 GlobalStyle 수정 - 전역으로 수직 / 수평 가운데 정렬 * feat: [#12] GamePlay - GameScore 컴포넌트 완성 (프로토타입) * feat: [#14] GamePlay - MatchScreen 컴포넌트 완성 (프로토타입) * feat: SituationScreen 프로토타입 완성 및 router 적용 - react router dom 활용 - 존재하지 않는 페이지 임시 생성 * chore: 일부 폴더 구조 변경 (TeamScore, TeamSelect) * refactor: [#24] 전체적인 CSS 보정 및 GamePlay 부분 전반적으로 수정 * feat: [#26] GamePlay - BattleGround 프로토타입 완성 * feat: [#30] Proxy 설정 및 TeamSelect API 적용 작업 중.. * feat: [#28] PlayerListPopup 프로토타입 완성 및 일부 네이밍 변경 - 일부 네이밍 변경 - TeamScore -> TeamScorePopup * style: [#28] PlayerListPopup의 Style 변경 & theme.js 일부 속성 제거 - PlayerListPopup의 StyledPlayerListPopup의 CSS 변경 * feat:[#30] API 적용 * chore * feat: [#33] 재사용 되는 PopupFrame 생성 (초기버전 & 활용) - 이 PopupFrame 컴포넌트를 활용하여 PlayerListPopup & TeamScorePopup 컴포넌트 디자인 변경 - TeamScorePopup는 테이블과 전체적 스타일 변경 필요 * feat: [#35] GamePlay BattleGround Animation 추가 * feat:[#35] 애니메이션 수정 * feat: TeamScorePopup 디자인 전체적 변경 및 임시 팝업 기능 * feat: [#40] GamePlay Component API 조작중 * feat: [#41] Popup 컴포넌트들 애니메이션 적용 및 Context 생성 & 일부 구조 변경 * feat: ([#40] 과는 거리가 먼) OAuth를 위한 Login 관련 컴포넌트 생성+ - 일부 Context에 useReducer로 적용 * feat: [#45] GameScore & MatchScreen 데이터 활용하여 표시 - 라이언 아이콘의 State도 GamePlayProvider로 이동. * feat: Oauth Login 구현 * feat: [#45] Ball, Strike, Out Count 컨트롤 (Pitch 버튼 클릭 시) - 초기 타입 * feat: [#45] BattleGround 컴포넌트 데이터 핸들링 (1) - BattleGround - GameScore: 득점 시 점수 변화 - Round: Round 상태 변화 - MatchScreen: 상황에 따라 선수 데이터 변경 - 대체적으로 GamePlayProvider와 BattleGround, GamePlay가 주로 수정되었습니다 * feat: table API 적용 * feat: 안타 or 아웃에 따라 PUT 요청, 점수판 관련 API 요청은 진행중 * chore * chore: Add background Co-authored-by: dudn1933 <dudn1933@naver.com> Co-authored-by: leehangeul <75162982+dudn1933@users.noreply.github.com>
잘 이해했는지 모르겠네요. |
서버로 보내던 아니던, 관리해야할 상태가 많을거에요. 서버와 동기화는 즉시즉시 해주는 것이 아무래도 좋겠죠. |
crongro
approved these changes
May 18, 2021
crongro
left a comment
crongro
left a comment
There was a problem hiding this comment.
많은 상태를 보니 많이 힘드셨을듯..
이번프로젝트가 좀 그랬던거 같네요.
일부분은 useReducer 를 써보는 경험을 했으면 어땠을까? 싶었어요.
관련된 상태를 reducer로 묶어서 변경하는 방식. 다음에는 한번 꼭 써보세요.
그리고 컴포넌트의 크기가 좀 큰 부분이 보였습니다. 적절한 방법을 동원해서 하위컴포넌트분리, jsx코드안에서의 로직을 미리 계산해서 쓰기 등을 고려해보세요.
| @@ -0,0 +1,68 @@ | |||
| { | |||
There was a problem hiding this comment.
위에 players-modi.json 과 중복적인 데이터가 많은데, 실제 두 개를 같이 쓰는건 아니겠죠?
Comment on lines
+16
to
+31
| const [logArr, setLogArr] = useState([]); | ||
| const [ballCnt, dispatch] = useReducer(ballReducer, boardHistory); | ||
| const [playable, setPlayable] = useState(true); | ||
| const [myTeam, setMyTeam] = useState([]); | ||
| const [myTeamName, setMyTeamName] = useState(''); | ||
| const [counterTeam, setCounterTeam] = useState([]); | ||
| const [counterTeamName, setCounterTeamName] = useState(''); | ||
| const [homeTeam, setHomeTeam] = useState(null); | ||
| const [awayTeam, setAwayTeam] = useState(null); | ||
| const [currInning, setCurrInning] = useState(1); | ||
| const [currPitcher, setCurrPitcher] = useState(null); | ||
| const [currHitter, setCurrHitter] = useState(null); | ||
| const [currTeamLog, setCurrTeamLog] = useState([]); | ||
| const [isHome, setIsHome] = useState(false); | ||
| const [totalOutCount, setTotalOutCount] = useState(0); | ||
| const [inningTop, setInningTop] = useState(true); |
There was a problem hiding this comment.
비슷한 그룹으로 데이터를 묶고, reducer로 데이터 변경작업을 해보는 것도
고려해볼 수 있을 거 같아요.
Comment on lines
+35
to
+62
| logArr, | ||
| setLogArr, | ||
| myTeam, | ||
| setMyTeam, | ||
| myTeamName, | ||
| setMyTeamName, | ||
| counterTeam, | ||
| setCounterTeam, | ||
| counterTeamName, | ||
| setCounterTeamName, | ||
| homeTeam, | ||
| setHomeTeam, | ||
| awayTeam, | ||
| setAwayTeam, | ||
| currPitcher, | ||
| setCurrPitcher, | ||
| currHitter, | ||
| setCurrHitter, | ||
| currInning, | ||
| setCurrInning, | ||
| currTeamLog, | ||
| setCurrTeamLog, | ||
| isHome, | ||
| setIsHome, | ||
| totalOutCount, | ||
| setTotalOutCount, | ||
| inningTop, | ||
| setInningTop, |
There was a problem hiding this comment.
이부분도 그런데, useReducer를 사용하면 각각의 메서드를 모두 context에 태워둘 필요 없이,
몇몇 dispatch 메서드만 context에 담아두고, 하위 컴포넌트에 전달 하면 될 것 같아요.
|
|
||
| return ( | ||
| <ThemeProvider theme={theme}> | ||
| <GlobalContext.Provider value={baseballState.teamInfo}> |
There was a problem hiding this comment.
GlobalContext라고 이름지었으니 이것저것 최상위 root에 존재하는 것을 담은거겠군요.
특정 상태를 보관하는 것이면 구체적인 이름으로 바꾸시면 더 좋겠고요.
| <PlayableContext.Provider value={{ playable, setPlayable }}> | ||
| <GlobalStyle /> | ||
| <BrowserRouter> | ||
| <Switch> |
| <LogHitter> | ||
| {myTeam[idx].battingOrder}번타자 {myTeam[idx].name} | ||
| </LogHitter> | ||
| <> |
There was a problem hiding this comment.
JSX 가 복잡하지 않도록 하면 좋겠죠.
몇몇 로직은 return 앞에서 미리 처리하는 것도 좋고요.
예를들어 logBox?map(...) 이런코드를 분리해서 앞에서 계산을 해둘 수 있을 듯.
Comment on lines
+64
to
+65
| ele.HitInfo !== ' ' && | ||
| (ele.HitInfo === 'S' || ele.HitInfo === 'B') |
| } | ||
| } else if (ele.HitInfo === 'B') { | ||
| bCnt += 1; | ||
| if (bCnt === 4) { |
There was a problem hiding this comment.
S -> 3, B-> 4 이런걸 미리 객체리터럴로 매핑해주는 방법도 있을거 같군요.
| }); | ||
| } else return <></>; | ||
| }; | ||
| const LogBox = () => { |
There was a problem hiding this comment.
안그래도 파일이 크니 가급적 별도 파일로 분리해서 컴포넌트를 선언하면 좋겠어요.
Comment on lines
+18
to
+29
| try { | ||
| const { data } = await axios.get( | ||
| `http://13.209.109.186/baseball/games/${game.gameId}/${teamId}` | ||
| ); | ||
| const [awayInfo, homeInfo] = [data.awayTeam, data.homeTeam]; | ||
| setAwayTeam(awayInfo); | ||
| setHomeTeam(homeInfo); | ||
| homeInfo.userSelected && setIsHome(true); | ||
| history.push('/play-screen'); | ||
| } catch { | ||
| setPlayable(false); | ||
| } |
There was a problem hiding this comment.
에처리는 좋고요.
에러가 발생했을때 사용자에게 어떻게 메시지나 노출되는지?도 고민하면 더 좋고요.
axios 보다는 fetch 로 axios와 같은 것을 만들어보시고요.
useEffect와 같은 커스텀 훅을 한번 만들어보세요.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 질문
리뷰받고 싶은 코드 - 주요 로직
Stadium.jsxLogList.jsxComponent내 PITCH 버튼을 눌렀을 때 변경한 상태를 다른 Component에서 사용하기가 어려웠습니다. 이미 리렌더링이 된 후에 버튼을 누른 상황(playPitch)이 진행해버려서
LogList에서 log출력 시 전상태가 로딩되었습니다. (useEffect로 작성한 상태만 다른 component로 전달이 됨 )
구조 설계 자체가 아예 잘못되었는지, 또 어떤 구조로 개선이 가능할 지 궁금합니다.
📌 느꼈던 점
Tami: 처음 기획했던 의도와 다르게 기능구현이 되지 않자 코드의 효율성이나 모듈화등을 고려하지 않은 채 반복이 많은 코드를 작성하게 아쉽고, 또 타자가 PITCH할 때마다 BE API 에 fetch요청을 하고 싶었는데 그 부분을 못해서 아쉬웠습니다. 그래도 프로젝트를 진행하면서 중간중간 기록물들을 착실히 남겼고 또 서로 격려하며 했기때문에 뿌듯하고 행복했던 2주였습니다🥰
Autumn: API 구조에 대해 이야기를 많이 나누게 됐는데, 어떻게 짜야 좋을지 고민을 많이 했던 시간이었습니다. 리액트에서는 상태가 바뀌었을거라고 생각하고 코드를 짰는데 그렇지 않았던 경우들이 있어서 리액트의 상태변화 흐름에 대해 공부를 많이 하게 됐습니다. 이전에는
useState에 대해 감이 잘 안왔었는데 이번 프로젝트를 통해 조금은 알 것 같은 느낌입니다~!