팀11 FE 최종피드백

1. 메인페이지에 뒤로가기 버튼이 존재하는 부분

• 앱 기반의 디자인을 하셨는데, 그렇다면 각 네비게이션 첫 페이지에서는 뒤로가기가 존재하지 않아야 할 것으로 보입니다. 뒤로가기는 네비게이션의 스택이 쌓이는 디테일 페이지에서부터 있어야 할 것으로 보입니다.

• 또한 디테일페이지 등에서는 뒤로가기와 홈 두개가 같이 존재하는 형태로 만들고, 가운데 앱의 로고는 제외한다던지 하는 UI적 관점은 있을 수 있을 것 같습니다.

1. 개인적으로는 기본메뉴와 옵션의 구분이 잘 안되는것 같아요.

• 조금 더 명확하게 구분이 된다면 좋을 것 같아요. 옵션의 경우 태그와 같은 형태로 한다던지 등등..(바로 아래 사진 참조)

1. 필터는 AND 조건인가요?
1. ‘차가운'만 적용하였을 경우에는 나오는 리스트가 ‘새콤한' 까지 클릭하였을 경우 아무것도 조회가 되지 않네요. 아마도 AND 조건인것 같은데, OR이 조금 더 맞지 않을까요??

password.tsx 를 보다가…

1. 두 가지 경우에 대한 함수인것 같은데, 분리하는것이 더 적합하지 않았을까요??

const handleEyeClick = useCallback((name: string) => {
    name === INPUT_PASSWORD
      ? setIsTypePassword((isTypePassword) => !isTypePassword)
      : setIsTypeConfirmPassword(
          (isTypeConfirmPassword) => !isTypeConfirmPassword
        )
  }, [])

1. validate를 별도의 파일로 분리하는것도 좋을 것 같습니다 :)

const validate = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value, name } = e.target
    e.target.value = value.slice(0, 10)

    if (name === INPUT_PASSWORD) {
      setErrors({ ...errors, [name]: '' })
      if (!REGEX_PASSWORD.test(value)) {
        setErrors({ ...errors, [name]: MESSAGE_PASSWORD })
      }
      if (passwordConfirm === e.target.value) {
        setErrors({ ...errors, [INPUT_PASSWORD_CONFIRM]: '' })
      }
      setPassword(e.target.value)
    }
    if (name === INPUT_PASSWORD_CONFIRM) {
      setErrors({ ...errors, [name]: '' })
      if (!REGEX_PASSWORD.test(value)) {
        setErrors({ ...errors, [name]: MESSAGE_PASSWORD })
      }
      if (password !== e.target.value) {
        setErrors({ ...errors, [name]: ERROR_PASSWORD_CONFIRM })
      }
      setPasswordConfirm(e.target.value)
    }
  }

1. 아마도 로그인을 하지 않았을 경우 접근하지 못하는 페이지로 보이는데, submit에서 한번 더 체크(!user.id)를 해야하는 이유가 있나요?

const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    const isError = Object.keys(errors).some(
      (key) => errors[key as keyof typeof errors] !== ''
    )
    if (!user.id) {
      router.replace('/login')
      return
    }
    if (password && !isError) {
      patchPassword({ userId: user.id, password })
      router.back()
    }
  }

1. 불필요한 a 태그가 있는것 같습니다.

<Link href={HOME_URL}>
          <a>
            <Logo>
              <Image
                src={SMALL_LOGO}
                width="100rem"
                height="60rem"
                alt={SMALL_LOGO}
              />
            </Logo>
          </a>
        </Link>

1. 컴포넌트에 더미.json과 컴포넌트가 공존하는것 같은데, 분리가 필요해 보이는 것 같습니다.

1. 목적에 따라 나누어서 함수구현된 부분은 좋은 것 같습니다 🙂

const handleEditMenuClick = () => {
    setIsModalOpen(true)
  }

  const handleEditMenuClose = () => {
    setIsModalOpen(false)
  }

1. 비슷한 코드의 반복이 있다면 hooks로 만들수 있지 않을까? 의 고민이 필요해 보입니다 :)

const handleTitleChange = (e: React.FormEvent<HTMLInputElement>) => {
    title = e.currentTarget.value
    handleOnChange()
  }

  const handleOriginalTitleChange = (e: React.FormEvent<HTMLInputElement>) => {
    originalTitle = e.currentTarget.value
    handleOnChange()
  }