Conversation
| const formData = new FormData(); | ||
| formData.append("image", data); | ||
| try { | ||
| const res = await axios.post("/images/upload", formData, { |
There was a problem hiding this comment.
인터셉터를 사용하니, 인증 헤더에 대한 부분을 요청시마다 반복적으로 쓰지 않아도 돼서 좋네요👍
| return res.data; | ||
| } catch (err) { | ||
| return false; | ||
| } |
There was a problem hiding this comment.
p5;
현재는 단순히 post 요청 후 에러 발생시 false만 리턴하는 방식이지만,
추후에는 에러의 응답 코드나 에러 메시지 등을 통해 에러를 케이스별로 처리하여
클라이언트에서도 어떤 에러때문에 요청이 실패했는지 알 수 있도록 작성해보면 좋을 것 같아요!
지금은 이렇게만으로도 충분할 것 같긴 합니다!
|
|
||
| export default function AuthContainer({ children }: PropsWithChildren) { | ||
| const pathName = usePathname(); | ||
| const nowPathname = pathName === "/auth/login" ? "login" : "signup"; |
There was a problem hiding this comment.
p4;
지금도 괜찮지만, currentPathname 변수명 추천드립니다!
| } else { | ||
| setIsLogin(true); | ||
| } | ||
| }, [user]); |
There was a problem hiding this comment.
p3;
isLogin 상태를 추가로 관리하는 건 불필요해보입니다!
user라는 상태로도 충분히 계산이 가능해 보입니다.
그럼에도 isLogin이라는 상태가 꼭 필요하다면
useEffect 대신
useMemo로 처리하는 것도 좋을 것 같습니다!
const isLogin = useMemo(() => {
if (!user) return false;
return true;
}, [user])| } else { | ||
| setVisibleHeader(true); | ||
| } | ||
| }, [pathname]); |
There was a problem hiding this comment.
p4;
요것도 visibleHeader를 상태로 만드는 것보다는 변수 처리를 통해
jsx를 리턴하는 것도 좋을 것 같아요!
const isHeaderVisible = pathname?.includes("auth");
if (!isHeaderVisible) return null;
return (
<nav>
...
</nav>
)| priority | ||
| /> | ||
| </Link> | ||
| {pathname?.includes("items") && ( |
There was a problem hiding this comment.
p3;
현재 코드베이스에서는 items가 들어간 path를 찾을 수 없는데 어떤 경우에 나타나는 건가요?
| 로그인 정보를 확인해주세요 | ||
| </div> | ||
| )} | ||
| <NewButton className="rounded-[40px] w-full h-14" activeBtn={false}> |
There was a problem hiding this comment.
p4;
버튼의 상태를 formState.isValid 나 formState.isSubmitting 등을 조합하여 사용해도 좋을 것 같습니다!
|
|
||
| useEffect(() => { | ||
| const resetUser = async () => { | ||
| const me = await getMe(); |
There was a problem hiding this comment.
p5;
크게 상관은 없지만, getMe 보다는 개인적으로 getCurrnetUser() 의 네이밍이 조금 더 직관적인 것 같습니다!
인증을 관련하는 다른 컴포넌트에서도 user라는 이름으로 사용자를 판단하고 있으니, 통일하면 어떨까 싶습니다!
const currentUser = await getCurrentUser();| protocol: "https", | ||
| hostname: "**", | ||
| port: "", | ||
| pathname: "/**", |
There was a problem hiding this comment.
p4;
외부 이미지 호스트 설정에서 모든 https 도메인을 허용할 거면
{
protocol: "https",
hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
port: "",
pathname: "/**",
},
요 부분은 제거해도 괜찮을 것 같습니다!
|
세환님 고생 많으셨습니다! |
구현 내용
로컬스토리지의 변동사항을 감지하는 것이 어려워 컴포넌트가 마운트 될때마다 토큰을 이용해 유저정보를 다시 받아와 랜더링하게 구현했습니다.
미완성 내용