[7주차] Repick 미션 제출합니다. #3
Open
Conversation
This file contains 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
[feat] vote 페이지 title, line 컴포넌트화
[chore] css 수정 및 중복 Component Layout화
[chore] 중복된 것들 Component화
[feat] 파트, 투표 별 투표 창 보이게 하기
YelynnOh
reviewed
Jun 30, 2023
| userName : '', | ||
| userId : '', | ||
| }, | ||
| effects_UNSTABLE: [persistAtom], |
There was a problem hiding this comment.
effects_UNSTABLE: [persistAtom] 은 처음 봐서 서치를 좀 해봤는데..! 이걸 활용하면 새로 고침해도 데이터를 유지할 수 있네요😮 저도 개발하다가 새로 고침 누르면 초기화되는 것 때문에 번거로웠는데 활용해봐야겠어요:)
참고자료
| ) | ||
| ); | ||
| } | ||
| }; |
|
|
||
| return ( | ||
| <Container> | ||
| <Order order={'2'} /> |
There was a problem hiding this comment.
사용자의 진행상황에 따른 페이지를 가시적으로 볼 수 있도록 설정한 디테일이 정말 좋은 것 같아요!
| const highestScore = transformedLeaders[0].score; | ||
| const highestScoreLeaders = transformedLeaders.filter( | ||
| (leader) => leader.score === highestScore | ||
| ); |
There was a problem hiding this comment.
오옹 이런 식으로 1등이 여러 명인 경우에 같이 처리할 수 있겠네요! 배워갑니다 ㅎㅎ
| console.error(error); | ||
| throw error; | ||
| } | ||
| }; |
moong23
reviewed
Jun 30, 2023
Comment on lines
+36
to
+42
| setUserInfo({ | ||
| id: response.data.user.id, | ||
| part: response.data.user.part, | ||
| team: response.data.user.team, | ||
| userName: response.data.user.username, | ||
| userId: response.data.user.userid, | ||
| }); |
There was a problem hiding this comment.
이부분은
Suggested change
| setUserInfo({ | |
| id: response.data.user.id, | |
| part: response.data.user.part, | |
| team: response.data.user.team, | |
| userName: response.data.user.username, | |
| userId: response.data.user.userid, | |
| }); | |
| setUserInfo(response.data.user); |
와 같이 하고 필요한 data만 꺼내쓰는식으로 해도 될것같다는 생각이 드네요~!
Comment on lines
+67
to
+80
| const Title = styled.div` | ||
| white-space: pre-line; | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| text-shadow: 6.5px 6.5px 6px rgba(0, 0, 0, 20%); | ||
| margin: 200px 0 0 60px; | ||
| `; | ||
| const User = styled.div` | ||
| white-space: pre-line; | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| text-shadow: 6.5px 6.5px 6px rgba(0, 0, 0, 20%); | ||
| margin-left: 60px; | ||
| `; |
There was a problem hiding this comment.
여기 중복 css는 합친다음에 type을 props로 받아서 해결해도 좋을 것 같습니다~!
Comment on lines
+61
to
+88
| if (!selectedTeam) { | ||
| alert('투표할 팀을 선택해주세요.'); | ||
| return; | ||
| } | ||
| let teamName; | ||
| switch (userInfo.team) { | ||
| case 1: | ||
| teamName = 'Repick'; | ||
| break; | ||
| case 2: | ||
| teamName = 'Therapease'; | ||
| break; | ||
| case 3: | ||
| teamName = 'Dan-support'; | ||
| break; | ||
| case 4: | ||
| teamName = 'BariBari'; | ||
| break; | ||
| case 5: | ||
| teamName = 'Hooking'; | ||
| break; | ||
| default: | ||
| teamName = ''; | ||
| } | ||
| if (selectedTeam == teamName) { | ||
| alert('본인은 본인의 팀을 투표할 수 없습니다.'); | ||
| return; | ||
| } |
There was a problem hiding this comment.
요기는 개인 취향차이긴한데
teamList = ['Repick', 'Therapease', ...]와 같이 만들어두고
if (teamList.indexOf(selectedTeam) === userInfo.team){
alert~~~
}
와 같이 작성해도 될 것 같습니다~!
Comment on lines
+52
to
+73
| function shoot() { | ||
| confetti({ | ||
| ...defaults, | ||
| particleCount: 100, | ||
| scalar: 1.2, | ||
| shapes: ['star'] | ||
| }); | ||
|
|
||
| confetti({ | ||
| ...defaults, | ||
| particleCount: 70, | ||
| scalar: 0.75, | ||
| shapes: ['circle'] | ||
| }); | ||
| } | ||
|
|
||
| setTimeout(shoot, 100); | ||
| setTimeout(shoot, 200); | ||
| setTimeout(shoot, 300); | ||
| setTimeout(shoot, 400); | ||
| getLists(); | ||
| }, []); |
|
|
||
| export default function DemoLayout({ children }: { children: React.ReactNode }) { | ||
| const router = useRouter(); | ||
| const [cookies, setCookie, removeCookie] = useCookies(); |
There was a problem hiding this comment.
만약 hook의 구조분해할당을 통해 전달받은 함수중 사용하지 않을 함수나 변수의 경우는 _ 로 대채하면 추후 코드 이해에 좀 더 도움이 될수도 있을 것 같아요~!
Suggested change
| const [cookies, setCookie, removeCookie] = useCookies(); | |
| const [cookies, _ , _] = useCookies(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
안녕하세요 Repick 이예지, 배성준입니다.😇
백엔드와 처음으로 협업하며 api 관련 지식과 기술을 많이 얻을 수 있었습니다.
다들 수고하셨습니다.
배포 링크
7주차 미션 결과
구현
확장성을 고려하여 데이터는 동적으로 구현하였습니다.
필수 요건은 모두 만족했고
async/await을 사용하여 api에 접근했습니다.cookie🍪에refresh token과access token을 저장하여 로그인을 여부 등을 확인했고recoil을 이용하여 현재 유저를 확인했습니다.gitflow를 최대한 이용하여 구현했고디자인은 figma로 직접 디자인했습니다.
figma 참조
더욱 디테일한 구현은 직접 이용하시며 몸소 느껴보시길 바랍니다. 🙏🏻