[week4/mission] 첫 커스텀 훅 만들어보기, 로그인 / 회원가입 기능 구현해보기 (feat. 유효성 검사) #23
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
duwlsssss
approved these changes
Apr 11, 2025
| console.log("회원가입 성공: ", response.data); | ||
| navigate("/login"); | ||
| } catch (e) { | ||
| console.error("에러 발생: ", e); |
Contributor
There was a problem hiding this comment.
나중에 에러를 시용자에게 어떻게 시각적으로 표현할지 생각해봐도 좋겠어용
Comment on lines
+38
to
+41
| // 오류가 하나라도 있거나, 입력값이 비어있으면 버튼을 비활성화 | ||
| const isDisabled = | ||
| Object.values(errors || {}).some((error) => error.length > 0) || // 오류가 있으면 true | ||
| Object.values(values).some((value) => value === ""); // 입력값이 비어있으면 true |
Comment on lines
+6
to
+11
| <div className="w-20 h-10 flex justify-center items-center rounded-md bg-black text-white cursor-pointer"> | ||
| 로그인 | ||
| </div> | ||
| <div className="w-20 h-10 flex justify-center items-center rounded-md bg-pink-600 text-white cursor-pointer"> | ||
| 회원가입 | ||
| </div> |
| </div> | ||
| {/* 소셜 로그인 */} | ||
| <div className="w-60 h-10 flex items-center justify-between px-3 border-2 border-white rounded-md mb-5"> | ||
| <img src="/images/GoogleLogo.svg" alt="google_logo" className="w-6" /> |
Contributor
There was a problem hiding this comment.
애플리케이션 내부에서 동적으로 불러올 이미지는 src/assets/images 폴더 만들어서 넣는 게 좋을 것 같아요!
Vite를 쓸 때 src안에 있는 이미지는 Vite/Webpack이 최적화해서 번들링 최적화를 해주기 때문에
로고, favicon, Open Graph 등의 이미지 등만 public에 넣는 걸 추천합니당
Comment on lines
+24
to
+30
| {step === "email" && ( | ||
| <EmailInput nextStep={() => setStep("password")} /> | ||
| )} | ||
| {step === "password" && ( | ||
| <PasswordInput nextStep={() => setStep("profile")} /> | ||
| )} | ||
| {step === "profile" && <ProfileInput />} |
Comment on lines
+6
to
+27
| const schema = z | ||
| .object({ | ||
| email: z.string().email({ message: "올바른 이메일 형식이 아닙니다." }), | ||
| password: z | ||
| .string() | ||
| .min(8, { | ||
| message: "비밀번호는 8자 이상이어야 합니다.", | ||
| }) | ||
| .max(20, { | ||
| message: "비밀번호는 20자 이하이어야 합니다.", | ||
| }), | ||
| confirmPassword: z.string(), | ||
| name: z.string().min(1, { | ||
| message: "이름을 입력해주세요.", | ||
| }), | ||
| }) | ||
| .refine((data) => data.password === data.confirmPassword, { | ||
| path: ["confirmPassword"], | ||
| message: "비밀번호가 일치하지 않습니다.", | ||
| }); | ||
|
|
||
| export type FormFields = z.infer<typeof schema>; |
Contributor
There was a problem hiding this comment.
이 파일에서 스키마 부분은 schema 폴더 만들어서 빼는 게 나을 것 같아요!
oortmealy
approved these changes
May 2, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✏️ 작업 내용
#️⃣ 연관된 이슈
#20
📷 작업 결과
💡 함께 공유하고 싶은 부분
🤔 질문
✅ 워크북 체크리스트
✅ 컨벤션 체크리스트