Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[이수지] sprint11 #132

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.

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

@@ -126,7 +126,8 @@ const ItemProfileSection: React.FC<ItemProfileSectionProps> = ({ product }) => {
<MainDetails>
{/* 참고: 더보기 버튼 기능은 추후 요구사항에 따라 추가 예정 */}
<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