Skip to content

Conversation

@huiseong29
Copy link
Collaborator

요구사항

기본

  • 네모 박스 안의 화면을 TypeScript로 마이그레이션해 주세요.

심화

  • any타입을 최소한으로 써주세요

주요 변경사항

  • landing, login, signup 페이지 tsx 변환 및 img 깨짐 현상 해결
  • Link 태그로 변환

스크린샷

랜딩페이지

랜딩페이지1
랜딩페이지2

로그인

로그인

회원가입

회원가입

멘토에게

@huiseong29 huiseong29 self-assigned this May 23, 2025
@huiseong29 huiseong29 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 23, 2025
Copy link
Collaborator

@dongqui dongqui left a comment

Choose a reason for hiding this comment

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

희성님, 근래 정말 열심히 달리시는군요! 🏃 👍

아직 타입스크립트 활용은 많이 없는 거 같습니다. 아마 기존의 코드를 옮기느냐고 시간을 많이 소비하셨을 거 같아요! 타입스크립트 환경은 만들어 졌으니 스프린트 진행중 차근차근 적용해 보시면 될 거 같습니다!

validateEmail(email) === "" && validatePassword(password) === "";

const handleLogin = async (e) => {
const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

타입을 잘 찾아서 써주셨네요! 👍

validateAll();
}, [validateAll]);

const handleBlur = (type: "email" | "nickname" | "password" | "confirm") => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

controlled/uncontrolled 컴포넌트 개념을 알아두시면 좋습니다!

지금 같은 경우 세부적으로 핸들링해야할 때는 controlled로 구현하시는 것이 좋을 수 있습니다.
아니면 react-hook-form 같은 라이브러리를 사용하시는 것도 좋아요 :)

Copy link
Collaborator

Choose a reason for hiding this comment

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

타입스크립트를 쓰시니 zod도 궁합이 좋습니다!!

const password = passwordRef.current?.value.trim() ?? "";
const passwordConfirm = passwordConfirmRef.current?.value.trim() ?? "";

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
Copy link
Collaborator

Choose a reason for hiding this comment

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

중복되는 코드, 로직이 많습니다 😢 아마 리엑트로 옮기느냐고 정신이 없으셨을 거 같아요!
ref로 직접 접근하기 때문에 이벤트마다 따로 처리하느냐고 중복되는 느낌도 있는 거 같습니다.

여유가 되실 때 천천히 리팩토링 해보셔도 좋을 거 같아요 :)

@dongqui dongqui merged commit 1b13e87 into codeit-bootcamp-frontend:React-김희성 May 23, 2025
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