[7주차] REDDI 미션 제출합니다. #6
Conversation
Feature/2 vote page
Feature/3 part vote page
feat: login & signup 페이지 구성
Feature/1 login page
Feature/4 vote api
Feature/5 auth api
Feature/4 vote api
feat: 비밀번호 제한 추가
Feature/6 vote api 2
chore: alert 추가
feat: 본인이 속한 팀 투표 불가능
| import client from "./client"; | ||
|
|
||
| //프론트 투표 결과 get | ||
| export const getFrontResult = async () => { | ||
| const response = await client.get(`/api/partleader/front/result`); | ||
| // console.log(response.data); | ||
| return response.data.data; | ||
| }; | ||
|
|
||
| //백 투표 결과 get | ||
| export const getBackResult = async () => { | ||
| const response = await client.get(`/api/partleader/back/result`); | ||
| // console.log(response.data); | ||
| return response.data.data; | ||
| }; | ||
|
|
||
| //데모데이 투표 결과 get | ||
| export const getProjectResult = async () => { | ||
| const response = await client.get(`/api/project/result`); | ||
| // console.log(response.data); | ||
| return response.data.data; | ||
| }; |
There was a problem hiding this comment.
같은 로직이여서 url을 외부에서 매개변수로 받아서 통일시켜주는 것도 좋을 것 같아요 ㅎㅎ
| }, | ||
| onError: (error) => { | ||
| alert("사용중인 아이디입니다. 아이디를 다시 설정해주세요"); | ||
| setFormData((prevFormData) => ({ ...prevFormData, username: "" })); |
| onClick={() => { | ||
| setIsClicked(list.id); | ||
| setClickedTeamName(list.name); | ||
| if (user.teamName === list.name) | ||
| alert("본인이 속한 팀은 투표할 수 없습니다"); | ||
| }} | ||
| > |
There was a problem hiding this comment.
오 생각치 못한 로직이네여 ㅋㅋㅋ 저희는 저희팀도 투표 가능해서 투표 겁나했어요..^^
| }; | ||
| const voteLeaderMutation = useMutation(voteLeader, { | ||
| onSuccess: (data) => { | ||
| // console.log(data); | ||
| alert("파트장 투표가 완료되었습니다."); | ||
| router.push({ | ||
| pathname: "/result", | ||
| query: { | ||
| isFront: isFront, | ||
| isTeam: false, | ||
| }, | ||
| }); | ||
| }, | ||
| onError: (error) => { | ||
| console.log(error); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
react-query 로직들은 따로 빼서 관리하는게 가독성에 좋을 것 같아요!
| headers: { | ||
| Authorization: `Bearer ${info.accessToken}`, | ||
| }, |
There was a problem hiding this comment.
accessToken을 사용하는 api가 많아지면 인스턴스화 할 때 헤더에 붙여줘도 좋을 것 같아요!
| import axios from "axios"; | ||
|
|
||
| const client = axios.create({ | ||
| baseURL: process.env.NEXT_PUBLIC_API_URL, |
There was a problem hiding this comment.
서버 url env로 빼두셨군요! 저희는 하드코딩으로 넣었는데 이렇게 env로 빼두면 나중에 수정하기 좋을 것 같네요~!
|
|
||
| export default function Login() { | ||
| const router = useRouter(); | ||
| const [isLoginState, setIsLoginState] = useRecoilState(isLogin); |
| console.log(formData); | ||
|
|
||
| // 비밀번호 입력 로직 | ||
| const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,}$/; |
| const { data: voteList } = useQuery( | ||
| ["voteList"], | ||
| () => (isFrontVote ? getFrontList() : getBackList()), | ||
| { | ||
| onSuccess: (data) => { | ||
| setPartLeaderList(data); | ||
| console.log(data); | ||
| }, | ||
| onError: (error) => { | ||
| console.log(error); | ||
| }, | ||
| }, |
There was a problem hiding this comment.
api통신 관련 부분은 api폴더로 따로 빼주셔도 좋을 것 같아요!
| }, | ||
| }); | ||
|
|
||
| const handleSubmit = (e) => { |
There was a problem hiding this comment.
입력값 유효성 검사 정규식 처리에 아이디, 이메일 중복 확인까지 진행하신 점이 넘 좋은 것 같아요! 사소한 사항이라면 제출 시에 한 번에 유효성을 확인하다보니 정말 만약,, 모든 항목을 제멋대로 입력했을 경우에는 회원가입 버튼 클릭을 너무 자주하게 되다보니 onBlur 되었을 시에 판단하거나 alert창이 아니라 다른 방식을 통해 알려줘도 좋을 것 같습니다ㅎㅎ
| }, | ||
| }); | ||
| }, | ||
| onError: (error) => { |
There was a problem hiding this comment.
실행 화면에서 어느 파트로 로그인해도 두 파트의 투표 화면을 모두 들어갈 수 있더라구요! 맞는 파트로 들어갔을 경우에는 제대로 투표가 진행되지만 다른 파트의 투표를 진행했을 경우에는 콘솔창에 에러만 뜨고 사용자에게는 별다른 반응이 나타나지 않는 것 같아서..! 아예 로그인 파트에 따라 파트장 투표를 들어갔을 때에 뜨는 페이지를 다르게 하거나 잘못 투표 혹은 에러가 났을 시에도 알림을 나타날 수 있도록 해주면 좋을 것 같아요~!
| .buttons { | ||
| width: fit-content; | ||
| height: 44px; | ||
| padding: 10px 20px; | ||
| border-radius: 20px; | ||
| color: white; | ||
| font-size: 20px; | ||
|
|
||
| } |
There was a problem hiding this comment.
정말 소소하지만...ㅎㅎ button align-items에 센터 정렬 추가해줘도 좋을 것 같아요!! 제 화면에서만 그런 것인지 모르겠지만 묘하게 아래로 내려와 있는 듯 해 의견 드려봅니다
| style={{ marginLeft: "10px" }} | ||
| className={styles.buttons} | ||
| onClick={handleCheckUsername} | ||
| disabled={!formData.username} //id 에 입력이 있을때만 인증 가능 |
| const voteCliked = (id, name) => () => { | ||
| if (name === userTeamName) { | ||
| alert("본인이 속한 팀은 투표할 수 없습니다."); | ||
| return; |
There was a problem hiding this comment.
본인이 속한 팀이 투표할 수 없게한 detail 세심하고 좋은 것 같습니다!
| const [userDataState, setUserDataState] = useRecoilState(userData); | ||
| const signInMutation = useMutation(signIn, { | ||
| onSuccess: async (data) => { | ||
| console.log(data); |
| ? "FE 파트장 투표 결과" | ||
| : isTeamResult | ||
| ? "데모데이 투표 결과" | ||
| : "BE 파트장 투표 결과"} |
| alert("사용중인 이메일입니다. 이메일을 다시 설정해주세요"); | ||
| setFormData((prevFormData) => ({ ...prevFormData, email: "" })); | ||
| }, | ||
| }); |
There was a problem hiding this comment.
로그인 과정에서 이메일 중복 확인 등 세심하게 예외처리해주신 점 좋은 것 같습니당
배포주소
REDDI-vote
인증과정
회원가입과 로그인 시 JWT로 인증을 하였습니다. 로그인 이후 accesstoken을 받아와서 userinfo api 를 호출 하였고, 이를 전역적으로 관리하여 이후 헤더에 accesstoken을 넣어 서버와 통신을 하였습니다.
디자인
협동과제 피그마 디자인과 최대한 비슷하게 구현했습니다. 피그마에서 확인이 불가능한 hover나 버튼이 클릭됐을 때 등의 디자인은 전체 디자인을 해치지 않을 수 있도록 색을 지정해 디자인하였습니다. 직접 디자인할 생각을 못했는데, 갓챠팀 과제를 보니 새로운 디자인을 구현해봤어도 좋은 경험이 됐을 것 같아서 조금 아쉽습니다.ㅎㅎ
API 통신
react-query의 useQuery, useMutation을 이용해 서버와 통신하였습니다. 둘 다 react-query 사용에 익숙하지 않아서 처음에 조금 헤매기도 했지만 이번 과제를 통해 좀 더 사용법을 익힐 수 있었고, 메인 프로젝트에서는 이번에 신경쓰지 못했던 부분도 더 신경써서 코드 구현을 할 수 있을 것 같습니다.
느낀점
동현 & 이진: 처음으로 백엔드 팀원들과 협업하면서 서로 소통도 해보고 합을 맞춰볼 수 있었습니다. 필요한 부분이 있으면 백엔드 팀원에게 요청하였고, 빠르게 해주셔서 원활하게 프로젝트 진행이 가능했습니다. 앞으로 메인 프로젝트를 함께 진행해야하는 만큼 이번 과제를 통해 서로 알아갈 수 있어서 좋았던 것 같습니다. 저번 과제에서는 Nextjs13을, 이번 과제에서 코드를 Nextjs12를 처음 사용해보면서 메인 프로젝트에 어떤 걸 사용할지 함께 상의하며 의미있게 과제를 진행할 수 있었습니다. 처음 사용해본 만큼 조금 미숙하게 처리한 부분들이 있지만 메인 프로젝트때는 조금 더 효율적이고 깔끔한 코드를 작성하고 싶습니다.
구현화면