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

[김미소]Week7 #313

Merged
merged 39 commits into from
Apr 3, 2024
Merged

[김미소]Week7 #313

merged 39 commits into from
Apr 3, 2024

Conversation

nightowlzz
Copy link
Collaborator

요구사항

기본

  • [기본] 상단 네비게이션 바, 푸터가 랜딩 페이지와 동일한 스타일과 규칙으로 만들어졌나요? (week 1 ~ 3 요구사항 참고)
  • [기본] 상단 네비게이션 바에 프로필 영역의 데이터는 https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sample/user”를 활용했나요?
  • [기본] 상단 네비게이션 바에 프로필 영역의 데이터가 없는 경우 “로그인” 버튼이 보이도록 만들었나요?
  • [기본] 폴더 소유자, 폴더 이름 영역, 링크들에 대한 데이터는 “/api/sample/folder”를 활용했나요?
  • [기본] Static, no image, Hover 상태 디자인을 보여주는 카드 컴포넌트를 만들었나요?
  • [기본] Hover 상태에서 이미지가 기본 크기의 130%로 커지나요?
  • [기본] 카드 컴포넌트를 클릭하면 해당 링크로 새로운 창을 띄워서 이동하나요?
  • [기본] Tablet에서 카드 리스트가 화면의 너비 1124px를 기준으로 이상일 때는 3열로 작을 때는 2열로 배치되나요?
  • [기본] Tablet, Mobile에서 좌우 최소 여백은 32px 인가요?

심화

주요 변경사항

  • folder페이지 작업,

스크린샷

image

멘토에게

hanseulhee and others added 30 commits October 10, 2023 14:15
[Fix] delete merged branch github action
'emailErrorMessage','passwordErrorMessage'를 추가하여,
'validateEmail','validatePassword'에서 에러메세지 기능을 따로
분리하였습니다.
- 분리되어있던 validation.js 파일 삭제,  signin, signup 파일에 추가하여
  작업
- accessToken 받아, 로그인, 회원가입 떄 확인하고 접근 못하게
  accessControl.js 파일 작업(수정 중)
@nightowlzz nightowlzz requested a review from devToram April 2, 2024 12:35
@nightowlzz nightowlzz added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Apr 2, 2024
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.

수고하셨습니다 :)

Comment on lines +1 to +3
{
"liveServer.settings.port": 3001
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

라이브 서버 세팅은 보통 git 에 올리지는 않습니다!

Copy link
Collaborator

Choose a reason for hiding this comment

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

저번 주에 멘토링 때 잘못말씀드렸었던 부분이에요! src > assets 내부로 옮겨주세요

Copy link
Collaborator

Choose a reason for hiding this comment

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

엇 저는 좋긴한데 ts 를 쓰셨네요! 크게 상관은 없을 거 같습니다!


<FootSocial className="d__flex foot__btn__sns">
{imageSnsArr.map((sns) => (
<SocialLinkButton key={sns.id} {...sns} />
Copy link
Collaborator

Choose a reason for hiding this comment

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

👍

Comment on lines +19 to +26
(async () => {
try {
const data = await headerUserLoginInfo();
setUserInfo(data);
} catch (e) {
console.error("유저 정보를 가지고 올수 없습니다.", e);
}
})();
Copy link
Collaborator

Choose a reason for hiding this comment

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

즉시실행함수로 쓰지 않으시고, 따로 비동기 함수로 빼신 다음 useEffect 에서 해당 함수를 호출하는 식으로 짜시면 더 간결할 거 같아요!

{description}
</EllipsisLine>
<p className="card__date">
{new Date(`${created_at}`).toLocaleString()}
Copy link
Collaborator

Choose a reason for hiding this comment

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

해당 로직이 return 부에 있으면 계속 렌더링 타게 되어서 useMemo 써서 위쪽에서 변수로 내려주면 좋을 거 같아요~

Copy link
Collaborator

Choose a reason for hiding this comment

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

constant 는 정말 상수를 모아두는 곳이라 지금처럼 api 통신을 하는 함수들을 모아두기 위해서는 따로 그냥 api 폴더를 파시는 것도 괜찮을 거 같아요~!

export async function folderListApi() {
try {
const response = await fetch("dummy.json");
const result = response.json();
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
const result = response.json();
const result = await response.json();

Comment on lines +29 to +38
try {
const response = await fetch("dummy.json");
const result = response.json();
if(response.ok) {
return result;
}
} catch (e) {
console.log(e);
return ;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

headerUserLoginInfo 와 앞으로도 전부 동일하다면 따로 api 통신하는 함수를 빼주시고 url 만 파라미터로 받아도 좋을 거 같아요!

Comment on lines +14 to +35
if (minutesDifference < 2) {
return "1 minute ago";
} else if (minutesDifference <= 59) {
return `${minutesDifference} minutes ago`;
} else if (hoursDifference === 1) {
return "1 hour ago";
} else if (hoursDifference <= 23) {
return `${hoursDifference} hours ago`;
} else if (daysDifference === 1) {
return "1 day ago";
} else if (daysDifference <= 30) {
return `${daysDifference} days ago`;
} else if (monthsDifference === 1) {
return "1 month ago";
} else if (monthsDifference <= 11) {
return `${monthsDifference} months ago`;
} else if (yearsDifference === 1) {
return "1 year ago";
} else {
const years = Math.floor(yearsDifference);
return `${years} years ago`;
}
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
if (minutesDifference < 2) {
return "1 minute ago";
} else if (minutesDifference <= 59) {
return `${minutesDifference} minutes ago`;
} else if (hoursDifference === 1) {
return "1 hour ago";
} else if (hoursDifference <= 23) {
return `${hoursDifference} hours ago`;
} else if (daysDifference === 1) {
return "1 day ago";
} else if (daysDifference <= 30) {
return `${daysDifference} days ago`;
} else if (monthsDifference === 1) {
return "1 month ago";
} else if (monthsDifference <= 11) {
return `${monthsDifference} months ago`;
} else if (yearsDifference === 1) {
return "1 year ago";
} else {
const years = Math.floor(yearsDifference);
return `${years} years ago`;
}
if (minutesDifference <= 59) {
return `${minutesDifference} minute${minutesDifference < 2 ? '' : 's'} ago`;
}
if (hoursDifference <= 23) {
return `${hoursDifference} hour${hoursDifference < 2 ? '' : 's'} ago`;
}
if (daysDifference <= 30) {
return `${daysDifference} day${daysDifference < 2 ? '' : 's'} ago`;
}
if (monthsDifference <= 11) {
return `${monthsDifference} month${monthsDifference < 2 ? '' : 's'} ago`;
}
const years = Math.floor(yearsDifference);
return `${years} year${years < 2 ? '' : 's'} ago`;

Copy link
Collaborator

Choose a reason for hiding this comment

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

추가적으로 현재 코드라면 1년 2분 전이면 2분 전이라고 뜨게될 거 같은데, 해당 부분 확인해주세요!

Copy link
Collaborator

Choose a reason for hiding this comment

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

https://date-fns.org/v3.3.1/docs/formatDistance 이것도 활용할 수 있을 거 같아요~

@devToram devToram merged commit bed0b7a into codeit-bootcamp-frontend:part2-김미소 Apr 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants