Conversation
feat: Add routing features
Add crypto util
[baz-feat] 게임 페이지 구현
Week4 baz joy
[baz-feat] 결과 페이지 구현
joi0104
left a comment
joi0104
left a comment
There was a problem hiding this comment.
코드가 너무 깔끔하네여... 그리고 서비스 제목이 취향저격입니다 ㅎㅎㅎ
| import styled from 'styled-components'; | ||
| import OceanBackground from 'components/index/OceanBackground'; | ||
| import qs from 'qs'; | ||
| const IndexPage = ({location}) => { |
There was a problem hiding this comment.
useHistory 처럼 useLocation 훅을 사용하면 prop로 받을 필요가 없을 것 같아요!
| <Route exact path="/game" component={GamePage} /> | ||
| <Route exact path="/result" component={ResultPage} /> | ||
| <Route path="/" component={IndexPage} /> |
There was a problem hiding this comment.
이 부분을 좀 흥미로웠는데요! 제가 로직을 잘 이해못해서 그런지 모르겠지만. 저는 보통 path="/" 에 exact 를 걸어두는데, 이 코드에서는 path="/" 제외한 곳에 exact 가 걸려있더라구요! 근데 이러면 일일이 Route 가 생성될때마다 exact 를 걸어주거나 하는등 유지보수 측면에서 안좋아 보이는데, exact 옵션을 저렇게 주신 이유가 있을까요?
There was a problem hiding this comment.
저도 이렇게 써본적은 없는데 이렇게 '/'에 exact를 안넣고 마지막에 위치시키면 약간 404페이지 느낌으로 아무 route에나 접근해도 IndexPage띄울순 있겠군요! 가끔씩 404페이지 따로 없을때 이렇게 써봐야겠네요ㅎㅎ
| <IndexStateContext.Provider value={state}> | ||
| <IndexDispatchContext.Provider value={dispatch}> |
There was a problem hiding this comment.
오 저는 보통 하나의 context에 state와 dispatch를 묶어서 보냈는데 이렇게 분리시키는것도 좋아보이네요
| type FlagType = 'initial' | 'correct' | 'incorrect'; | ||
|
|
||
| const ResultPage = ({ location: { state } }) => { | ||
| const [ocean] = useState<OceanInfo>(state.ocean); |
There was a problem hiding this comment.
useState는 해당 컴포넌트에서 값이 변경되는지를 계속 검사하기 때문에 변경되지 않는값이면 useRef가 더 적합할것 같아요!
| const name = '민수르'; | ||
| const messages = { | ||
| initial: `"${ocean.name}"에 같이 가고 싶은 사람에게 링크를 공유하세요!`, | ||
| correct: `바다 좀 볼 줄 아는군? ${name}와 함께 "${ocean.name}" 보러 가자구~`, |
5 participants
힐링에 맞춰서 전국 해수욕장을 찾은 뒤 가장 가고 싶은 해수욕장을 고르는 이상형 월드컵입니다~
이 결과를 바탕으로 다른 사람과 내가 같은 곳에 가고싶은지 알수도 있게 하려고 했어요!