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

[이윤경] week12 #368

Merged

Conversation

Yoon-kyungLee
Copy link
Collaborator

@Yoon-kyungLee Yoon-kyungLee commented Jan 9, 2024

요구사항

기본

  • ‘/folder’ 페이지를 Next.js 프로젝트에 맞게 변경 및 이전 했나요?
  • ‘/shared’ 페이지를 Next.js 프로젝트에 맞게 변경 및 이전 했나요?
  • 다른 페이지로 이동이 필요한 곳에 next/link의 Link를 적용했나요?
  • Input 컴포넌트에 값이 없는 경우 회색의 placeholder값을 볼 수 있나요?
  • Input 컴포넌트에 focus in 하면 파랑색 테두리를 볼 수 있나요?
  • Input 컴포넌트에 눈 모양 아이콘을 누르면 비밀번호 가리기/보기 기능이 토글 되나요?
  • Input 컴포넌트에 값이 에러케이스일 경우 빨강색 테두리와 에러 메세지를 볼 수 있나요?
  • Input 컴포넌트에서 focus out 하면 실행할 함수를 설정할 수 있나요?

주요 변경사항

  • 11주차 기능 구현을 완료하지 못했습니다.( link 추가 부분 observer, search bar 필터 기능)
  • 12주차 마이그레이션과 input 기능 구현하였습니다.(page - folder- [id] 폴더는 아직 구현하지 못해서 folder의 index파일을 동일하게 넣었습니다. 좀 더 공부해보겠습니다.)
  • input 기능에서 onBlur 됐을 때의 함수 실행은 회원가입 이메일 창에서 구현하였습니다.

멘토에게

  • 아직 너무 많이 부족한 실력인 것 같습니다. 일단 타입스크립트, 넥스트를 떠나 기능 구현부터.....ㅠㅠㅠㅠ 흑,,
  • 라벨은... 매운맛을 바라지만 또 순한맛을 바라고.... 제 코드만큼 혼란스럽군여.. (커밋도 차근차근 수정하지 못하다 보니 커밋도 까먹어버렸네요,, 호호 )

@Yoon-kyungLee Yoon-kyungLee added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성 죄송합니다... 순한맛🐏 마음이 많이 여립니다... labels Jan 9, 2024
Copy link
Collaborator

@jlstgt jlstgt left a comment

Choose a reason for hiding this comment

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

Next와 TS로 깔끔하게 마이그레이션 잘 하셨네요. Input도 focus out시 실행할 핸들러를 지정하는 부분은 조금 더 수정이 필요해보이긴 하지만, 잘 구현해주신 것 같습니다. 특히 변수/함수 이름을 적절하게 잘 지으셔서 쉽게 이해할 수 있었습니다. 바쁘시겠지만, 다음 번엔 커밋을 나눠 주시면 더 읽기 쉬울 것 같습니다. 바쁜 스케쥴에도 불구하고 고생하셨습니다!! 👍

const [inputType, setInputType] = useState(type);
const [isError, setIsError] = useState<boolean>(false);

const togglePasswordVisibility = (e: React.MouseEvent<HTMLButtonElement>) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

이름 잘 지으셨네요 👍

errorMessage?: string;
}

function AuthInput({ label, type, placeholder, onValid, errorMessage }: AuthInputProps) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

저번에 말씀드린 대로 실제 <input>은 더 많은 attribute가 있으므로 나머지 모든 prop을 ...rest 등으로 받아서 <input>에 적용해주시면 좋을 것 같습니다.

label: string;
type: "text" | "email" | "password";
placeholder?: string;
onValid?: () => boolean;
Copy link
Collaborator

Choose a reason for hiding this comment

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

onValidonBlur의 역할을 구현하신 것 같은데, 이 이름은 onValid 보다는 onBlur 같은 게 되는 것이 더 적절해 보입니다. Validation check를 수행하는 건 Blur가 되었을 때 일어나는 여러 일 중에 하나이기 때문입니다.

/>
{type === "password" && (
<button className={styles.eyeButton} onClick={togglePasswordVisibility}>
<Image
Copy link
Collaborator

Choose a reason for hiding this comment

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

Next/Image를 사용하셨군요 👍

return (
<nav className={styles.nav}>
<div className={styles.navContainer}>
<Link href="/">
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

}

function AuthInput({ label, type, placeholder, onValid, errorMessage }: AuthInputProps) {
const [inputType, setInputType] = useState(type);
Copy link
Collaborator

Choose a reason for hiding this comment

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

prop으로 받아온 값을 state의 초기값으로 지정하신 것 같네요. 잘 구현해주셨습니다.

/>
</button>
)}
{isError && <p className={styles.errorMessage}>{errorMessage}</p>}
Copy link
Collaborator

@jlstgt jlstgt Jan 10, 2024

Choose a reason for hiding this comment

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

더 정확히 하려면 isError && errorMessage && <p ...가 되어야 될 것 같습니다. errorMessage가 없으면 p 요소 자체가 생성이 안 되면 더 좋을 것 같습니다.

@jlstgt jlstgt merged commit 4898361 into codeit-bootcamp-frontend:part3-이윤경 Jan 10, 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