Conversation
| import NavLogin from "./NavLogin"; | ||
| import NavProfile from "./NavProfile"; | ||
|
|
||
| interface NavProps { | ||
| pageType: string; | ||
| pageType?: string; |
There was a problem hiding this comment.
string 보단 유니온타입으로 타입을 명확하게 좁히는건 어떨까요?
타입스크립트에서는 되도록이면 타입을 좁히는게 좋습니다
pageType: "shared" | "..."
| label="비밀번호 확인" | ||
| type="confirmPassword" | ||
| inputValue={confirmPassword} | ||
| setValue={setConfirmPassword} |
There was a problem hiding this comment.
이렇게 setter를 바로 Props로 넘겨주면 Input을 focus out할때 비밀번호 유효성검사를 하지못하는데요
보통 콜백함수 형태로 전달하는편이 좋아요
const 함수 = (e) => {
const {value} = e.target;
// pw value 유효성검사
...
setPassword(value)
}
| const [password, setPassword] = useState(""); | ||
| const [confirmPassword, setConfirmPassword] = useState(""); | ||
|
|
||
| const handleSubmit = async (e: FormEvent) => { |
There was a problem hiding this comment.
각 로그인, 회원가입 post api 추가하려면
handleSubmit 함수내에 로그인, 회원가입 분기처리를 해줘야하는데요
그러면 SignFormProps의 타입도 추가 될거구요
SigninForm, SignupForm으로 로그인과 회원가입의 로직들을 분리하는게 명확해보입니다.
추가로 SignInput 컴포넌트 처럼 Button도 공통화해서 common에 관리를 한다면
SigninForm, SignupForm으로 분리해도 코드 중복을 최소화 할수있겠죠?
다음주 멘토링때 관련해서 설명 드릴게요
function SignInForm() {
... useState()
function handleSubmit(e) {
// signin api ...
}
return (
<SignInput label=email />
<SignInput ... />
<SignInput ... />
<Button buttonType="Primary" text="" ... />
}
| import { ReactNode } from "react"; | ||
|
|
||
| interface SocialProps { | ||
| children: ReactNode; |
There was a problem hiding this comment.
Social 부분도 텍스트형태로만 되어있으니
ReactNode 보다는 아래처럼 타입을 명확하게 좁혀주는게 좋습니다
협업할때 다른사람이 타입만 보고도 알수있으니까요
type: "signin" | "signup"
| setErrorMessage(type === "email" ? "이메일을 입력해주세요" : "비밀번호를 입력해주세요"); | ||
| } | ||
| // 이메일 형식에 맞지 않는 경우 | ||
| else if (type === "email" && !isValidEmail(inputValue)) { |
There was a problem hiding this comment.
(사소하지만) 위 if에서 type email을 체크했는데 else if에서 또 type이 email인지 체크할 필요는 없겠죠?
|
|
||
| interface HeaderProps { | ||
| checkMember: string; | ||
| signSrc: string; |
There was a problem hiding this comment.
이곳도 타입이 string 이면 협업자가 봤을때 어떤 값을 넣어야할지 SignHeader 파일을 뜯어봐야하는데요
type으로 signin or signup으로 체크해준다면 type 칸 에도 자동완성이 되기도 하고 더 명확해지죠
| } | ||
|
|
||
| const SignInput = ({ label, inputType }: InputProps) => { | ||
| const [value, setValue] = useState(""); | ||
| const SignInput = ({ label, type, inputValue, setValue, password, placeholder }: InputProps) => { | ||
| const [isVisible, setIsVisible] = useState(false); | ||
| const [eyeToggle, setEyeToggle] = useState<string>(eyeOn); | ||
| const [errorMessage, setErrorMessage] = useState(""); | ||
| const passwordRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const handleBlur = () => { |
There was a problem hiding this comment.
react-hook-form을 사용한다면 이런 유효성검사 뿐만 아니라
input 값 관리 + 에러 상태도 심플하게 관리할수있어
리팩토링때나 다음 위클리미션때 꼭 사용해보는걸 추천드립니다
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게