Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[오동혁] Week15 #477

Merged

Conversation

ohdong9795
Copy link
Collaborator

@ohdong9795 ohdong9795 commented May 26, 2024

요구사항

기본

  • 링크 공유 페이지의 url path를 ‘/shared/{folderId}’로 변경하고, {folderId}에 해당하는 폴더 데이터가 화면에 보이게 해주세요.
  • 폴더 페이지의 url path를 전체 링크를 보는 경우 ‘/folder’로, 특정 폴더를 보는 경우 ‘/folder/{folderId}’로 변경하고, {folderId}에 해당하는 폴더 데이터가 화면에 보이게 해주세요.
  • https://bootcamp-api.codeit.kr/docs 에서 인증이 필요한(자물쇠 아이콘이 있음) api의 경우 Authorization 리퀘스트 헤더에 “Bearer {accessToken}”을 함께 보내야 합니다.

심화

  • 리퀘스트 헤더에 인증 토큰을 첨부할 때 axios interceptors를 활용해 주세요. (axios를 사용하지 않는다면 이와 유사한 기능을 활용해 주세요.)

주요 변경사항

  • 기본 페이지 signin으로 변경, 토큰 존재시 folder로 이동, folder에서 토큰 없으면 signin으로 이동
  • 샘플 데이터 api 삭제

스크린샷

멘토에게

  • https://5-weekly-mission-umber.vercel.app/
  • 저번에 멘토링 시간에 리뷰를 받아서 이번엔 안받아도 될 것 같습니다.
  • axios interceptors를 사용하는게 심화 조건이였는데 사용안하고 헤더에 토큰 첨부만 했습니다.
  • 실제 현업에서 쿠키, 세션, 토큰등을 사용해서 어떤 방법으로 인증 처리하는지 궁금합니다.

@ohdong9795 ohdong9795 changed the title Part3 오동혁 [오동혁] Week15 May 26, 2024
@ohdong9795 ohdong9795 requested a review from devToram May 26, 2024 11:30
Copy link
Collaborator

@devToram devToram left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다 :)

실제 현업에서 쿠키, 세션, 토큰등을 사용해서 어떤 방법으로 인증 처리하는지 궁금합니다.

제가 했던 프로젝트는 쿠키를 요청때마다 헤더로 middleware 를 통해 전송하는 식으로 구현했어요!
쿠키에 accessToken 을 넣는 식으로 했고, accessToken 내부에 사용자 정보 등이 들어있어서 인증했었습니다!

Comment on lines 30 to 34
interface ItemsProps {
folderData: FetchData<FolderData[]>;
linkData: FetchData<LinkData[]>;
folderData?: FetchData<FoldersData>;
linkData?: FetchData<LinksData>;
shareLinkData?: FetchData<LinkData[]>;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전부 Optional 한 속성이면 Partial<> 써보셔도 좋을 거 같아요~ (의미상으로 맞다면)
https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype

Comment on lines +40 to 93
return (
<>
{!loading &&
error === null &&
(data?.folder.length === 0 ? (
<EmptyDiv>
<EmptySpan>저장된 링크가 없습니다.</EmptySpan>
</EmptyDiv>
) : (
data?.folder.map((item) => (
<Item
key={item.id}
createdAt={item.created_at}
url={item.url}
title={item.title}
description={item.description}
imageSource={item.image_source}
folderData={folderData}
editable={true}
/>
))
))}
</>
);
}

if (shareLinkData) {
const { data, loading, error } = shareLinkData;

return (
<>
{!loading &&
error === null &&
(data?.length === 0 ? (
<EmptyDiv>
<EmptySpan>저장된 링크가 없습니다.</EmptySpan>
</EmptyDiv>
) : (
data?.map((item) => (
<Item
key={item.id}
createdAt={item.created_at}
url={item.url}
title={item.title}
description={item.description}
imageSource={item.image_source}
editable={false}
/>
))
))}
</>
);
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

거의 두 개가 동일해서 합치면 좋을 거 같아요!
const givenData = linkData || shareLinkData 한 뒤에 합치면 될 거 같아요~

loading: folderData.loading,
error: folderData.error,
}}
folderId={folderId ? parseInt(folderId.toString()) : 0}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
folderId={folderId ? parseInt(folderId.toString()) : 0}
folderId={folderId ? parseInt(folderId.toString() ,10) : 0}

parseInt 쓰실 때 왠만하면 인수도 같이 써주셔요!

@devToram devToram merged commit 8c03fab into codeit-bootcamp-frontend:part3-오동혁 May 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants