Skip to content

Conversation

@mulddang2
Copy link
Collaborator

요구사항

기본

회원가입

  • 유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서 성공 응답을 받으면 회원가입이 완료됩니다.
  • 회원가입이 완료되면 “/login”로 이동합니다.
  • 회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

로그인

  • 회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIp”으로 POST 요청을 하면 로그인이 완료됩니다.
  • 로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
  • 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

메인

  • 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

심화

  • 로그인, 회원가입 기능에 react-hook-form을 활용해봅니다.

주요 변경사항

  • 로그인 페이지 관련 기능 구현

스크린샷

  • 로그인 시, UI

image

  • 토큰이 있을 경우, 상단바 UI

image

멘토에게

  • 스타일링은 미적용 되어 있습니다..
  • accessToken 만료 시간이 짧고 보안상 세션 스토리지에 토큰을 저장했습니다.
  • 변경 파일 외에는 템플릿 코드이므로, 커밋에 있는 파일 위주로만 코드 리뷰 부탁드립니다.

@mulddang2 mulddang2 requested a review from GANGYIKIM November 9, 2024 10:40
@mulddang2 mulddang2 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Nov 9, 2024
@mulddang2 mulddang2 self-assigned this Nov 9, 2024
Copy link
Collaborator

@GANGYIKIM GANGYIKIM left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수지님 이번 스프린트 미션 수고하셨습니다~

{/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */}
<SeeMoreButton>
<SeeMoreIcon />
{/* <SeeMoreIcon /> */}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
사용하지 않을 코드는 지워주세요~

{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
axios를 사용하시니 interceptor 기능을 이용해 요청을 보내기전에 토큰을 넣어주는 방식으로 개발하시면 코드 반복도 줄이고 더 좋을 것 같습니다~

https://axios-http.com/docs/interceptors
https://velog.io/@horang-e/Axios-Interceptor%EB%A1%9C-accessToken%EA%B0%B1%EC%8B%A0%ED%95%98%EA%B8%B0-RefreshToken

encodeFileToBase64(selectedFile);
}
};
const { previewImageSrc, handleImagePreview, uploadImage, imageFile } =
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
hook으로 분리하신거 좋습니다 👍

import IconEyeVisible from '@/public/images/icons/eye-visible.svg';
import Logo from '@/public/images/logo/logo.svg';

function LoginPage(): React.ReactElement {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2:
items/[id] 페이지는 화살표함수로 선언하시고 해당 페이지는 함수 선언식으로 작성하셨네요~
같은 page 컴포넌트이므로 한가지 방식으로 통일하시면 좋겠습니다.

e.preventDefault();

try {
const res = await axios.post(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2:
응답값이 any로 추론되니 어떤 값이 올지 명시해주시면 더 좋을 것 같습니다

Suggested change
const res = await axios.post(
const res = await axios.post<{accessToken: string; refreshToken: string;}>(

import IconEyeVisible from '@/public/images/icons/eye-visible.svg';
import Logo from '@/public/images/logo/logo.svg';

function LoginPage(): React.ReactElement {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
useUploadImage 함수처럼 로그인 관련 로직들도 분리하면 가독성이 더 좋아질 것 같아요~

@GANGYIKIM GANGYIKIM merged commit 09efaa3 into codeit-bootcamp-frontend:Next-이수지 Nov 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다..

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants