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

[소혜린] Sprint 11 #675

Conversation

miraclee1226
Copy link
Collaborator

요구사항

기본

랜딩 페이지

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

로그인

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

회원가입

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

심화

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

주요 변경사항

  • localStorage에 access token을 저장했습니다.
  • 리액트를 타입스크립트로 마이그레이션 했습니다.
  • 예전에 했던 미션이라 폴더 구조가 엉망입니다 ㅜㅜ 로그인, 회원가입 부분 위주로 피드백 부탁드립니다!
  • react-hook-form을 처음 사용해서 제대로 했는지 모르겠습니다. 피드백 부탁드립니다!

질문

  • 로그인이나 회원가입이 된 경우, 로그인이나 회원가입 페이지로 이동하면 '/'로 리다이렉트 하게끔 했는데, 페이지가 순간적으로 깜빡거리는 현상이 발생합니다. 깜박이지 않게 할 수 있는 방법이 있을까요?

@miraclee1226 miraclee1226 requested a review from Il9 June 14, 2024 05:56
@miraclee1226 miraclee1226 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 14, 2024
Copy link
Collaborator

@Il9 Il9 left a comment

Choose a reason for hiding this comment

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

걱정과 달리 이번 미션 하신 분들 중에서 react hook form을 제일 잘 사용하셨다고 생각합니다.
이번 미션도 수고 많으셨습니다 👍


질문 답변

로그인이나 회원가입이 된 경우, 로그인이나 회원가입 페이지로 이동하면 '/'로 리다이렉트 하게끔 했는데, 페이지가 순간적으로 깜빡거리는 현상이 발생합니다. 깜박이지 않게 할 수 있는 방법이 있을까요?

CenterLine 컴포넌트에 달아드린 코멘트를 확인해보시면 될 것 같습니다.

children: ReactNode
}

const AuthContent = ({ onSubmit, children }: AuthContentProps) => (
Copy link
Collaborator

Choose a reason for hiding this comment

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

AuthContent보단 AuthFormWrapper?같은게 어울릴 것 같습니다
공용으로 사용해야하는 복잡한게 컴포넌트에 있는 것도 아니니 회원가입 로그인 form을 그냥 두개 만드시는 것도 좋은 방법일 것 같네요

Comment on lines +12 to +19
const navigate = useNavigate();

useEffect(() => {
const accessToken = localStorage.getItem("accessToken");
if (accessToken) {
navigate('/');
}
}, [navigate]);
Copy link
Collaborator

Choose a reason for hiding this comment

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

저라면 CenterLIne이라는 컴포넌트가 이 로직을 들고 있을지 상상도 못할 것 같습니다.
이런 방법을 추천드립니다.

@@ -8,25 +7,28 @@ import profile from "../assets/profileIcon.svg";

function Nav() {
const { pathname } = useLocation();
const accessToken = localStorage.getItem("accessToken");
Copy link
Collaborator

Choose a reason for hiding this comment

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

유저와 관련된 값들은 재사용될 확률이 높으니 별도 hook으로 만들어 두시면 좋을 것 같습니다.

@@ -1,6 +1,16 @@
import { useState, useEffect } from 'react';

function usePagination(initialPage = 1, totalCount, pageSize, asyncFunction) {
type AsyncFunction<T> = (...args: any[]) => Promise<T>;
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런건 별도로 선언해두면 좋을 것 같습니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

form 너무 깔끔하고 좋네요

Comment on lines +1 to +16
export interface ProductItem {
createdAt: string;
favoriteCount: number;
ownerId: number;
images: string;
tags: string[];
price: number;
description: string;
name: string;
id: number;
}

export interface Product {
list: ProductItem[];
totalCount?: number;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

ProductItem이 Product가되고
Product가 ProductResponse같은게 되면 더 낫지않을까 싶습니다.

@Il9 Il9 merged commit 624681d into codeit-bootcamp-frontend:React-소혜린 Jun 21, 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