[ Team-17 / Ah-puh / FE ] API 적용

[GleamingStar]

현재까지의 작업 상황

• View & OAuth 구현 지난 PR
• 진루 애니메이션 구현
• OAuth 인증을 담당하는 Home.jsx 컴포넌트 추가
• useContext 추가, component/Main.jsx에서 활용
• BE의 API를 호출해 컴포넌트 렌더링

API

• 게임목록 : https://baseball-ahpuh.herokuapp.com/games
  • Intro/TeamSelect.jsx에서 활용
• 점수판(스코어보드) : https://baseball-ahpuh.herokuapp.com/games/1/scores
  • InGame/ScoreBoard.jsx에서 활용
• 라인업 : https://baseball-ahpuh.herokuapp.com/games/1/lineup
  • InGame/LineUp.jsx에서 활용
• 게임정보 : https://baseball-ahpuh.herokuapp.com/games/1?teamId=1
  • InGame.jsx에서 요청, 하위컴포넌트에게 전달, 활용

앞으로 작업할 것

• 백엔드에게 투구 결과 POST
• 1회 초 부터 게임 진행
• 리팩토링을 통한 useReducer 적용 및 useContext 심화 활용

진루 애니메이션

Home

[crongro]

열코하셨군요~
노력의 흔적이 보여서 좋았네요.
리뷰 참고하세요~

[crongro]

코드 들여쓰기가 꽤 깊네요?

[crongro]

비동기 코드 구현시 습관적으로 try/catch 처리를 해보시면 좋겠어요.
catch 에서는 사용자에게 적절한 메시지를 보여주면 좋겠고요.(console로 노출하는것 말고, 별도 뷰에서 메시지를 노출)

[crongro]

res 가 true/false로 오나요? 아니면 res.ok 값이 혹시 있는건 아니죠?

[crongro]

arr은 맥락이 없는 이름이네요. 좀더 구체적인 이름으로.

id를 뽑는 것이면 getId라고만 해도 될 듯.
또는 이렇게 파라미터까지 이어져서 풀네이밍이 되도록~

const getIdBy = (email) => {}

[crongro]

삼항연산자보다 && 를 사용하면 더 간단해질 듯 합니다.

[crongro]

이렇게 객체로 정의해서 관리하는 것은 좋네요.

[crongro]

top, left 값이 어떤 공식에 의해서 결정되면 매우 훌륭할텐데 말이죠.
(가능한지 모름)

[crongro]

이 코드는 useEffect 안으로 옮겨서 선언해도 될 듯.

[crongro]

toggle과 dark가 fetching이후에 처리되는거 맞죠?

[crongro]

에리 처리 좋고요.
실제로 에러 상황을 재현해서 테스트도 해보세요.

[crongro]

요렇게 하시면 더 좋을 듯.

state가 변경될때, Main컴포넌트 하위에 있는 컴포넌트들 중에 context의 상태에 의존하지 않는 컴포넌트들은,
불필요하게 re-rendering 이 되지 않습니다.

const Main = () => {
    <MainContextProvider> 
       <switch><route></route>.....</switch>
   </MainContextProvider>
}

const MainContexProvider = (props) => {
    const [gameId, setGameId] = useState();
	const [teamId, setTeamId] = useState();
	const [loginStatus, setLoginStatus] = useState(false);
	const [userId, setUserId] = useState();
	return (
		<MainContext.Provider value={{ gameId, setGameId, teamId, setTeamId, loginStatus, setLoginStatus, userId, setUserId }}>
			<StyledMain>
				{props.children}
			</StyledMain>
		</MainContext.Provider>
	);
}