✨ Add login page

[jun-0411]

📝 작업 내용

• 로그인 페이지 작업을 진행했습니다.
• axios 라이브러리를 이용해서 api 작업을 진행했습니다.
• zustand 라이브러리를 이용해서 로그인시 유저 정보와 인증 토큰이 로컬 스토리지에 저장되게 하였습니다.
• 소셜 로그인 로직을 만들고 소셜 로그인시 콜백되는 페이지를 만들었습니다.

📸 스크린샷 (선택)

🚀 리뷰 요구사항 (선택)

• 헤더 작업을 모니 인증 토큰을 context로 저장하셨는데, zustand를 도입하는건 어떨까요? zustand를 이용하면 유저 정보와 인증 토큰을 한 번에 관리할 수 있어집니다.
• 리드미에 적힌 폴더 구조에는 없지만, type 폴더가 있으면 편리할 것 같아서 폴더를 추가했습니다. type 폴더 사용하지 않고 contants 폴더에 통합하는게 더 좋을까요?
• utils 폴더에 커스텀 훅을 위치했습니다. hooks 폴더를 만들어서 utils와 구분하는게 좋을까요?
• 로그인과 회원가입에 대한 api 구조를 구상해봤습니다. 이건 슬랙에 올릴게요!
• 커밋 메세지 내용이나 깃모지에 부적절한게 있었을까요...?

[young-52]

1. zustand 도입

헤더 작업을 모니 인증 토큰을 context로 저장하셨는데, zustand를 도입하는건 어떨까요? zustand를 이용하면 유저 정보와 인증 토큰을 한 번에 관리할 수 있어집니다.

찬성합니다! 우선 저는 zustand를 써본 적이 없어서 이렇게 작업하고 있었는데, 찾아보니까 도입하면 좋을 것 같다는 생각이 들어요. 헤더 작업하던 것도 zustand를 사용하는 식으로 고쳐보겠습니다.

2. types 폴더 신설

리드미에 적힌 폴더 구조에는 없지만, type 폴더가 있으면 편리할 것 같아서 폴더를 추가했습니다. type 폴더 사용하지 않고 contants 폴더에 통합하는게 더 좋을까요?

저는 types 폴더 만드는 쪽을 더 선호합니다! API가 어찌될지 몰라서 우선 언급은 안 하고 있었는데, 우선 이렇게 써보고 문제가 생기면 그때 또 얘기를 해봅시다 ㅎㅎ

그리고, 앞으로 타입을 선언할 때 type을 쓸지 interface를 쓸지도 정하면 좋을 듯한데, 혹시 type과 interface를 구별하여 사용하신 기준이 있는지 여쭙습니다!

3. hooks 폴더 신설

utils 폴더에 커스텀 훅을 위치했습니다. hooks 폴더를 만들어서 utils와 구분하는게 좋을까요?

유틸 함수와 훅은 분리되면 좋을 것 같아서, utils 폴더의 이름을 hooks로 바꾸었습니다. 아마 나중에 날짜나 시간 다룰 일이 많이 생길 것 같은데, 그때 쓰는 함수를 utils 폴더에 넣어두면 좋을 것 같아요.

4. API 명세

로그인과 회원가입에 대한 api 구조를 구상해봤습니다. 이건 슬랙에 올릴게요!

LGTM!

5. 커밋 메시지

커밋 메세지 내용이나 깃모지에 부적절한게 있었을까요...?

근데 이건 정말 취향의 영역이라… 자기가 한 내용이 잘 요약되면 좋은 게 아니겠습니까 ㅎㅎ
다만 저라면 이렇게 했을 것 같긴 합니다!

• 👽 Add login/signup api logic
  • API 관련 변화니까 👽 이모지 추가
• 🛂 Add auth local stroage
  • 인증 관련 변화니까 🛂 이모지 추가
• 🔗 Add login/signup routers
  • 이것은 좀 애매하긴 한데, 제미나이에 물어보니 🔗나 🔧를 추천하네요. 저라면 그냥 아무거나 쓸 것 같습니다 ㅋㅋㅋㅋ

근데 이건 어디까지나 취향이고, 사실 깃모지 고르느라 공 들일 필요도 없고 하니까, 각자 스타일대로 해도 좋을 것 같아요!

기타 의견

제가 직접 처리한 것

• 그렇게 중요하지 않은 린터 이슈가 있었는데, 린터 통과가 안 되면 병합 허가가 안 나서… 우선 여러 개로 쪼개져 있던 회원가입 라우트를 다시 합쳤습니다.
• '회원가입하러 가기' 버튼에도 전환 효과를 넣었습니다.

앞으로 처리하면 좋을 것

• 소셜 로그인 기능을 구현하면서 같은 SVG가 여러 번 사용되었을 것 같은데요, 이걸 상수로 분리하는 게 나을까 싶기도 합니다.
• useAuth.ts 파일의 useAuth 함수에 관한 의견입니다.
  • 로그인 중 유효하지 않은 이메일이나 비밀번호가 입력되면 alert를 통해 처리하고 있는데요, 팝업창을 띄우는 대신에 아이디/비밀번호 입력란 테두리를 빨간색으로 바꾸면서 사용자에게 아이디/비밀번호가 틀렸음을 알려주는 방식이 더 부드러울 수 있겠다는 생각이 듭니다. 다만 아직 디자이너분도 안 계시고 하니 좀 더 지켜봐도 좋을 것 같아요.
  • 회원가입 중 오류가 발생했을 때, 정확히 어떤 이유로 오류가 발생했는지 사용자에게 알려줄 수 있다면 좋겠다는 생각이 있습니다. 근데 이건 제가 axios 라이브러리를 잘 몰라서 가능할지는 모르겠습니다.
  • 유효하지 않은 토큰이 들어오면 '유저 정보 동기화 중 오류가 발생했습니다.'라는 문구와 함께 로그아웃되는데, 이 문구가 사용자가 보기에 다소 당황스러울 것 같아서 더 사용자 친화적인 문구를 쓸 수 있으면 좋겠다는 생각이 듭니다. 근데 저도 딱히 대안이 없어서 그냥 이렇게 글로만 남깁니다… 시중에서 많이 쓰이는 문구로는 이런 게 있네요.

    개인 정보 보호를 위해 (사용자의 반응이 N분 동안 없어) 자동으로 로그아웃되었습니다.
    다시 로그인해 주세요.