Conversation
[feat] vote 페이지 title, line 컴포넌트화
[chore] css 수정 및 중복 Component Layout화
[chore] 중복된 것들 Component화
[feat] 파트, 투표 별 투표 창 보이게 하기
| 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
left a comment
moong23
left a comment
There was a problem hiding this comment.
안녕하세요 hooking팀입니다~!
코드량이 상당하네요...
많은 양의 코드에도 불구하고 로직도 꼼꼼하고 예외 처리도 잘 해주신것같습니다!!
고생많으셨습니다~!!!!
| 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.
이부분은
| 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만 꺼내쓰는식으로 해도 될것같다는 생각이 드네요~!
| 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로 받아서 해결해도 좋을 것 같습니다~!
| 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~~~
}
와 같이 작성해도 될 것 같습니다~!
| 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의 구조분해할당을 통해 전달받은 함수중 사용하지 않을 함수나 변수의 경우는 _ 로 대채하면 추후 코드 이해에 좀 더 도움이 될수도 있을 것 같아요~!
| const [cookies, setCookie, removeCookie] = useCookies(); | |
| const [cookies, _ , _] = useCookies(); |
4 participants
안녕하세요 Repick 이예지, 배성준입니다.😇
백엔드와 처음으로 협업하며 api 관련 지식과 기술을 많이 얻을 수 있었습니다.
다들 수고하셨습니다.
배포 링크
7주차 미션 결과
구현
확장성을 고려하여 데이터는 동적으로 구현하였습니다.
필수 요건은 모두 만족했고
async/await을 사용하여 api에 접근했습니다.cookie🍪에refresh token과access token을 저장하여 로그인을 여부 등을 확인했고recoil을 이용하여 현재 유저를 확인했습니다.gitflow를 최대한 이용하여 구현했고디자인은 figma로 직접 디자인했습니다.
figma 참조
더욱 디테일한 구현은 직접 이용하시며 몸소 느껴보시길 바랍니다. 🙏🏻