Conversation
| folder: { | ||
| count: number; | ||
| id: number; | ||
| links: { createdAt: string; description: string; id: number; imageSource: string; title: string; url: string }[]; |
There was a problem hiding this comment.
이 부분 따로 Link type 으로 빼도 좋을 거 같아요!
|
|
||
| return url; | ||
| } | ||
|
|
There was a problem hiding this comment.
api.ts 파일은 api 와 관련된 타입을 정의하는 파일인 거 같은데 url 에 파라미터를 넣는 util 함수가 같이 들어간 거 같아요!
따로 빼는 걸 추천드립니다
| return date.getFullYear() + '. ' + (date.getMonth() + 1) + '. ' + date.getDate(); | ||
| } | ||
|
|
||
| export function calcDateDiff(date1: Date, date2: Date) { |
There was a problem hiding this comment.
해당 util 의 로직대로라면 3 years ago 를 리턴하기 위해 minute ~ year 을 다 계산하게 되네요!
diff 를 특정 구간대로 나눠서 year 에 해당하는 시간대인 경우 year 만 계산하는 식으로 하면 약간은 개선될 거 같습니다
(dateFns 와 같은 라이브러리를 사용하시는 것도 추천드려요!)
| } | ||
|
|
||
| function Item({ createdAt, url, title, description, imageSource, folderData, editable }: ItemProps) { | ||
| const [openPopover, setOpenPopover] = useState(false); |
There was a problem hiding this comment.
boolean 값의 변수 이름은 보통 is~, has~ 로 짓는 게 일반적이라 추천드립니다!
| const [openPopover, setOpenPopover] = useState(false); | |
| const [isPopoverOpen, setIsPopoverOpen] = useState(false); |
| {userData ? ( | ||
| !loading && | ||
| error === null && ( |
There was a problem hiding this comment.
삼항 연산자 내부에 조건들이 많아서 가독성이 떨어질 수 있을 거 같아요!
그리고 로직상으로 보면 userData 는 있는데 로딩중이거나 에러가 있을 때의 처리가 안되어있는 거 같습니다
| entries.forEach((entry) => { | ||
| if (entry.isIntersecting) { | ||
| setIsView(true); | ||
| } else { | ||
| setIsView(false); | ||
| } |
There was a problem hiding this comment.
| entries.forEach((entry) => { | |
| if (entry.isIntersecting) { | |
| setIsView(true); | |
| } else { | |
| setIsView(false); | |
| } | |
| entries.forEach((entry) => setIsView(entry.isIntersecting)); |
| {!loading && | ||
| error === null && | ||
| (data?.length === 0 ? ( |
There was a problem hiding this comment.
여러 개의 조건의 경우 따로 위에서 useMemo 를 통해 어떤 걸 의미하는 지 변수화해서 렌더부에서는 변수만 하나 적어주시면 훨씬 렌더부가 간단해져요!
| <FolderNameSpan>{folderName}</FolderNameSpan> | ||
| </> | ||
| ) : ( | ||
| <div></div> |
There was a problem hiding this comment.
꼭 <div></div> 가 필요한 게 아니라면 위에서 삼항연산자가 아닌 && 연산자를 써도 될 거 같아요!
(!loading && error === null) &&
| fetchHeaders = sendRequestParams.headers; | ||
| fetchBody = sendRequestParams.body; | ||
| } | ||
|
|
There was a problem hiding this comment.
해당 부분은 {fetchUrl ~ fetchBody} 와 같이 Object 를 만든 뒤에 뒤에 sendRequestParam 으로 넘겨진 것들을 오버라이딩하는 하는 방식으로 쓰면 간단할 거 같아요! (혹시 이해안되시면 멘토링때 질문주셔요)
| fetchHeaders = fetchHeaders | ||
| ? fetchHeaders | ||
| : typeof fetchBody === 'object' && fetchBody !== null | ||
| ? { 'Content-Type': 'application/json' } | ||
| : {}; | ||
|
|
||
| const option = { | ||
| method: fetchMethod, | ||
| headers: fetchHeaders, | ||
| body: fetchBody ? JSON.stringify(fetchBody) : null, | ||
| }; | ||
|
|
||
| try { | ||
| const response = await fetch(fetchUrl as RequestInfo | URL, option as RequestInit); | ||
| const result = await response.json(); | ||
|
|
||
| setData(result); | ||
| if (response.ok) callback?.(result); | ||
| } catch (e) { | ||
| const error = e as Error; | ||
| setError(error); | ||
| errorCallback?.(e as Error); | ||
| } finally { | ||
| setLoading(false); | ||
| finalCallback?.(); | ||
| } | ||
| })(); |
There was a problem hiding this comment.
특별한 처리가 없는 거 같아서 util 로 빼면 좋을 거 같아요
요구사항
기본
심화
주요 변경사항
아직 landing 페이지와 signin, siginup 페이지가 추가되어있지 않아서 folder 페이지에 접근하는 방법이 직접 url을 이동할 수 밖에 없습니다.
스크린샷
멘토에게
figma: https://www.figma.com/file/dH3gN96jnAtMjxjhV80HM2/Weekly-Mission[5%EA%B8%B0]?type=design&node-id=5353-3261&mode=design&t=E38kNl60hVlTkStZ-0