[REFACTOR] 로그인 분기를 관리하는 useAuthConditional 훅 구현

[cruelladevil]

🤷 개선할 기능

const { user } = useAuthContext();
const isLoggedIn = !!user;

isLoggedIn 분기를 사용하기 위해 useAuthContext를 호출하는 것을
조금 더 심플하고 하나의 훅에서 관리할 수 있도록 커스텀 훅을 만든다.

🔨 상세 작업 내용

• useAuthConditional 구현

📄 참고 사항

as-is

const { user } = useAuthContext();
const isLoggedIn = !!user;

return {
  {isLoggedIn ? (
    <>
      <Avatar src={shookshook} alt="슉슉이" />
      <Input
        type="text"
        disabled={isPendingPostComment}
        value={newComment}
        onChange={changeNewComment}
        placeholder="댓글 추가..."
        maxLength={200}
      />
    </>
  ) : (
    <>
      <Avatar src={defaultAvatar} alt="익명 프로필" />
      <Input
        type="text"
        onFocus={openLoginModal}
        placeholder="댓글 추가..."
        disabled={isLoginModalOpen}
      />
    </>
  )}
}

to-be

return {
  <AuthConditional
    loggedin={
      <>
        <Avatar src={shookshook} alt="슉슉이" />
        <Input
          type="text"
          disabled={isPendingPostComment}
          value={newComment}
          onChange={changeNewComment}
          placeholder="댓글 추가..."
          maxLength={200}
        />
      </>
    }
    guest={
      <>
        <Avatar src={defaultAvatar} alt="익명 프로필" />
        <Input
          type="text"
          onFocus={openLoginModal}
          placeholder="댓글 추가..."
          disabled={isLoginModalOpen}
        />
      </>
    }
  />
}