[김창민]week15 #1037
[김창민]week15 #1037
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
사소하지만 폴더명이 template이 되어야 할 것 같은데 templete이 맞는지 확인해주시면 좋을 것 같아요.
| export type ButtonProps = { | ||
| email: string; | ||
| password: string; | ||
| }; | ||
|
|
||
| export const Button = ({ email, password }: ButtonProps) => { |
There was a problem hiding this comment.
Button 컴포넌트가 이렇게 사용될거라고 예상하기가 어려울 것 같습니다.
Button이라는 컴포넌트의 일반적인 멘탈 모델과 많이 다른 것 같고 동작이 내부에 많이 숨겨져 있는 것 같아요.
| const handleSignInApiRequest = async () => { | ||
| try { | ||
| const response = await axios | ||
| .post("https://bootcamp-api.codeit.kr/api/sign-in", { | ||
| email: email, | ||
| password: password, | ||
| }) | ||
| .then((response) => { | ||
| if (response.status === 200) { | ||
| router.push("/folder"); | ||
| } | ||
| }); | ||
| } catch (error) {} |
There was a problem hiding this comment.
api를 호출하는 부분은 별도의 함수로 분리되면 좋을 것 같습니다.
| email: email, | ||
| password: password, |
There was a problem hiding this comment.
shorthand 문법을 사용해주시면 좋을 것 같습니다.
| router.push("/folder"); | ||
| } | ||
| }); | ||
| } catch (error) {} |
There was a problem hiding this comment.
catch문에서 아무것도 하지 않는게 어색하게 느껴지는 것 같습니다.
| required: { value: true, message: "이메일을 입력해주세요." }, | ||
| pattern: [ | ||
| { | ||
| value: /[a-z0-9]+@[a-z]+.[a-z]{2,3}/, |
There was a problem hiding this comment.
복잡한 정규식은 변수로 분리해주면 좋을 것 같습니다.
There was a problem hiding this comment.
SignInLayout.tsx에 남겨드린 리뷰 참고해주시면 좋을 것 같습니다.
| const inputType = useMemo(() => (isPasswordVisible ? "text" : "password"), [isPasswordVisible]); | ||
| const EyeIcon = useMemo( | ||
| () => ( | ||
| <button className={cx("button")} onClick={() => setIsPasswordVisible(!isPasswordVisible)}> |
There was a problem hiding this comment.
콜백 함수를 넘겨줘서 상태를 변경해주면 좋을 것 같습니다.
| 랜딩: "/", | ||
| 로그인: "/signin", | ||
| 회원가입: "/signup", | ||
| 개인정보처리방침: "/privacy", | ||
| FAQ: "/faq", | ||
| 구글: "https://www.google.com", | ||
| 카카오톡: "https://www.kakaocorp.com/page", |
There was a problem hiding this comment.
꼭 필요하지 않은 한글 코딩은 지양하면 좋을 것 같습니다.
There was a problem hiding this comment.
추가적으로 utils과 constants는 서로 다른 계층으로 구분되는게 좋을 것 같네요.
| const [input, setInput] = useState(initialValue); | ||
| const [error, setError] = useState(""); | ||
|
|
||
| const validate = () => { |
There was a problem hiding this comment.
이런식으로 validation을 담당하는 모듈을 만들어주신건 좋은 것 같습니다.
다만 validation외에 useState의 리턴값을 그대로 외부로 전달하고 있는 건 validation의 역할 그 이상을 하고 있는 것 같아요.
요구사항
기본
[x][로그인페이지] 회원 가입하기”를 클릭하면 ‘/signup’ 페이지로 이동하나요?
[x][로그인페이지] 이메일 input에 placeholder는 “이메일을 입력해 주세요.”, 비밀번호 input에 placeholder는 “비밀번호를 입력해 주세요.”가 보이나요?
[x][로그인페이지]이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해주세요.” 에러 메세지가 보이나요?
[x][로그인페이지] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지가 보이나요?
[x][로그인페이지] 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지가 보이나요?
[x][로그인페이지] 로그인 실패하는 경우, 이메일 input 아래에 “이메일을 확인해주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해주세요.” 에러 메세지가 보이나요?
[x][로그인페이지] 로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행 되나요?
[x][로그인페이지] https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sign-in”으로 { “email”: “[email protected]”, “password”: “sprint101” } POST 요청해서 성공 응답을 받으면 “/folder”로 이동하나요?
[x][회원가입 페이지] “회원 가입하기”를 클릭하면 ‘/signin’ 페이지로 이동하나요?
[x][회원가입 페이지] 이메일 input에 placeholder는 “이메일을 입력해 주세요.”, 비밀번호 input에 placeholder는 “영문, 숫자를 조합해 8자 이상 입력해 주세요. ”비밀번호 확인 input에 placeholder는 “비밀번호와 일치하는 값을 입력해 주세요.”가 보이나요?
[x][회원가입 페이지] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 “올바른 이메일 주소가 아닙니다.” 에러 메세지가 보이나요?
[x][회원가입 페이지] 비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 에러 메세지가 보이나요?
[x][회원가입 페이지] 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않아요.” 에러 메세지가 보이나요?
[x][회원가입 페이지] 회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 에러 메세지가 보이나요?
[x][회원가입 페이지] 회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 실행 되나요?
[x][회원가입 페이지] 이메일 중복 확인은 “/api/check-email” POST 요청해서 확인 할 수 있나요?
[x][회원가입 페이지] 유효한 회원가입 형식의 경우 “/api/sign-up” POST 요청하고 성공 응답을 받으면 “/folder”로 이동하나요?
[x][로그인, 회원가입 페이지 공통] 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지나요?
[x][로그인, 회원가입 페이지 공통] 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?
[x][로그인, 회원가입 페이지 공통] 소셜 로그인에 구글 아이콘 클릭시 ‘https://www.google.com’, 카카오 아이콘 클릭시 ‘https://www.kakaocorp.com/page’로 이동하나요?
-[] - 미구현 [로그인, 회원가입 페이지 공통] 로그인/회원가입시 성공 응답으로 받은 accessToken을 로컬 스토리지에 저장하나요?
-[] - 미구현 [로그인, 회원가입 페이지 공통] 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/folder’ 페이지로 이동하나요?
심화
주요 변경사항
스크린샷
멘토에게
로직만 완성하려면 더 일찍 완성할 수 있었는데 코드를 짜다보니 욕심이 나서 할 수 있는 데까지 컴포넌트로 만드느라 엄청 늦게 제출하게 됐네요...
그래도 처음으로 거의 완벽한 코드를 짠 것 같아서 기쁘고
컴포넌트를 나누는 과정에서 코딩의 흐름을 보는 법과 state 관리에 대해 많이 배운 것 같아서 그나마 뿌듯한 마음입니다ㅠㅠ
초반부 커밋은 갈아엎은 부분이 많아서 10일 이후 작성된 커밋부터 봐주시면 감사할 것 같습니다.