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 #674

Conversation

tkddbs587
Copy link
Collaborator

@tkddbs587 tkddbs587 commented Jun 14, 2024

요구사항

회원가입

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

로그인

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

메인

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

심화

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

주요 변경사항

  • tailwind css 써보고 싶어서 루트 페이지 index.tsx 파일에만 써봤습니다

스크린샷

로그인 스크린샷 2024-06-14 오후 2 05 12
회원가입 스크린샷 2024-06-14 오후 2 04 33 스크린샷 2024-06-14 오후 2 03 17
�로컬 스토리지 스크린샷 2024-06-14 오후 2 05 59

멘토에게

  • 제가 스프린트 빼먹은 게 좀 있어서 Next.js-이영훈-sprint10 브랜치에 이어서 작업했습니다
  • 스프린트 미션 4에서 썼던 바닐라 자바스크립트로 로그인, 회원가입 폼 유효성 검사하는거 그대로 쓰려다가 리액트식으로 바꿔봤습니다
  • 그래서 utils 폴더 validateForm.ts에 로그인, 회원가입 폼에 각 인풋의 유효성 검사 로직은 빼놓았는데 LoginSignupForm.tsx 파일에 나머지 로직이 너무 몰려있는거 같아서 어떻게 하면 코드가 아름답게 분리될지 모르겠습니다 🤔
  • api.js 파일에 데이터 관련 함수 다 몰려있는데 이건 제가 주말간 리팩토링 해보려고 합니다!
  • 데이터 다루는게 아직 익숙하지 않아서 try catch로 사용하고 싶은데 어떻게 에러처리 로직을 짜야할지 팁좀 주시면 감사하겠습니다!
  • 로컬스토리지에 저장된 토큰을 불러오는 과정에서 window객체를 그냥 쓰니까 바로 에러가 나더라구요 혹시 Next.js에서는 무조건 useEffect 안에서만 window객체에 접근할 수 있는건지 궁금합니다!
  • 저번 코드리뷰 반영해서 .env.local에 base url 환경변수 적용했습니다!
  • 루트 페이지는 sprint1 에서 아직 안가져와서 미완성입니다
  • 반응형 디자인도 아직 미완성입니다

@tkddbs587 tkddbs587 requested a review from jyh0521 June 14, 2024 05:10
@tkddbs587 tkddbs587 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Jun 14, 2024
Copy link
Collaborator

@jyh0521 jyh0521 left a comment

Choose a reason for hiding this comment

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

과제 하느라 고생하셨습니다! 잘 만들어주셨네요 👍

@@ -1,7 +1,7 @@
const BASE_URL = "https://panda-market-api.vercel.app";
const BASE_URL = process.env.NEXT_PUBLIC_API;
Copy link
Collaborator

Choose a reason for hiding this comment

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

.env 적용해주신거 좋네요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

적용 했습니다 감사합니다!


return (
<Link href={`/addboard/${id}`}>
<div className={styles.ArticleCard}>
<div className={styles.section_top}>
<div className={styles.title}>{title}</div>
{image ? (
{image && (
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 Author

Choose a reason for hiding this comment

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

이것도 적용 했습니다 감사합니다!

)}
</div>
<div className={styles.section_bottom}>
<div className={styles.section_left}>
<Image src="../images/logo.svg" alt="" width={24} height={24} />
<div className={styles.profile_name}>{nickname}</div>
<div className={styles.date}>{formattedDate}</div>
<div className={styles.date}>{getFormattedDate(createdAt)}</div>
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 Author

Choose a reason for hiding this comment

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

말씀해주신대로 적용 해봤습니다 감사합니다!

comment: Comment;
handleDeleteComment: (id: number) => void;
}) => {
const [kebabButton, setKebabButton] = useState(false);
Copy link
Collaborator

Choose a reason for hiding this comment

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

케밥버튼을 껐다 키기 위한 상태 같은데, 이런 경우는 좀 더 명시적으로 visible이나 open 같은 이름을 붙여주시는 것도 추천드려요. kebabButtonVisible, kebabButtonOpen 이런식으로요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아 넵 참고해서 수정하겠습니다!

@@ -60,7 +72,11 @@ const ArticleFeedComments = ({ id }: { id: string }) => {
<div className={styles.comments}>
{comments.length
? comments.map((comment) => (
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 Author

Choose a reason for hiding this comment

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

아 여기 까먹고 빼먹었네요 감사합니다!

const pathname = router.pathname;
const { pathname } = router;

const [accessToken, setAccessToken] = useState<string | null>(null);
Copy link
Collaborator

Choose a reason for hiding this comment

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

null 대신 undefined를 사용하시는 것도 추천드려요! 그러면 useState<string | undefined>(); 이렇게 선언 가능해집니다. 이러면 새로운 null 타입을 사용하지 않고도 처리할 수 있다는 장점이 있습니다.

혹은 string 이기 때문에 아예 초기값을 빈 문자열로 넣어주고 타입추론을 활용해서 useState(''); 이렇게 선언하시는 것도 좋아보여요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

오오 감사합니다 수정해보겠습니다!

}

#top_banner {
background-image: url("./image/상단배너이미지.png");
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 Author

Choose a reason for hiding this comment

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

아 이 CSS 파일은 스프린트 1에서 그대로 가져와서 테일윈드로 변경하려고했던 파일인데 까먹고 삭제를 안했네요 😅 삭제하겠습니다!


.footer {
height: 160px;
background-color: #111827;
Copy link
Collaborator

Choose a reason for hiding this comment

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

컬러 변수 사용이 누락됐네요.

Comment on lines +3 to +4
const formattedDate = date.toISOString().split("T")[0];
return formattedDate;
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런 경우에는 새로운 변수에 할당하지 않고 바로 return 해주시는것도 괜찮습니다.
return date.toISOString().split("T")[0]; 이런식으로요!

Copy link
Collaborator Author

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.

유효성 검사해주실때, .trim 함수를 적용해주시면 좋을 것 같습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵 적용하겠습니다! 코드 리뷰 감사합니다!

@jyh0521
Copy link
Collaborator

jyh0521 commented Jun 15, 2024

그래서 utils 폴더 validateForm.ts에 로그인, 회원가입 폼에 각 인풋의 유효성 검사 로직은 빼놓았는데 LoginSignupForm.tsx 파일에 나머지 로직이 너무 몰려있는거 같아서 어떻게 하면 코드가 아름답게 분리될지 모르겠습니다 🤔

  • 리뷰에도 남겼지만, 해당 파일을 둘로 쪼개는 방법도 추천드려요 ㅎㅎ

데이터 다루는게 아직 익숙하지 않아서 try catch로 사용하고 싶은데 어떻게 에러처리 로직을 짜야할지 팁좀 주시면 감사하겠습니다!

  • 에러 핸들링은 멘토링때 말씀드린 걸로 대신하겠습니다!

로컬스토리지에 저장된 토큰을 불러오는 과정에서 window객체를 그냥 쓰니까 바로 에러가 나더라구요 혹시 Next.js에서는 무조건 useEffect 안에서만 window객체에 접근할 수 있는건지 궁금합니다!

  • 이것도 멘토링 시간에 말씀드린 걸로 대신할게요 ㅎㅎ

저번 코드리뷰 반영해서 .env.local에 base url 환경변수 적용했습니다!

  • 잘해주셨습니다!

@jyh0521 jyh0521 merged commit fce7726 into codeit-bootcamp-frontend:Next.js-이영훈 Jun 15, 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