[김병화] Week6

[KimByeongHwa]

요구사항

기본

• 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어 주세요. (week 1 ~ 3 요구사항 참고)
• 카드 컴포넌트를 클릭하면 해당하는 링크로 새로운 창을 띄워서 이동하게 해주세요.
• 카드 컴포넌트에서 createdAt 데이터 기준으로 현재 Date와 차이에 따라 아래와 같은 규칙으로 설정해 주세요.
• 프로필 영역의 데이터는 https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sample/user”를 활용해 주세요.
• 프로필 데이터가 없는 경우 “로그인” 버튼이 보이게 해주세요.
• 폴더 소유자, 폴더 이름 영역, 링크들에 대한 데이터는 “/api/sample/folder”를 활용해 주세요.
(여기서 폴더란 링크들의 정보가 저장되어 있는 객체를 의미합니다. shared 페이지는 외부 유저에게 자신의 폴더 데이터 하나를 공유할 때 유저가 보게되는 화면 입니다.
디자인 시안에서 “프로필 이미지”는 폴더 소유자의 프로필, “@코드잇”은 폴더 소유자 이름, “⭐️ 즐겨찾기”는 폴더 이름이에요.)

// 반응형 미구현

• Tablet에서 카드 리스트가 화면의 너비 1124px를 기준으로 이상일 때는 3열로 작을 때는 2열로 배치해 주세요.
• Tablet, Mobile에서 검색바, 카드 리스트의 좌우 최소 여백은 32px로 설정해 주세요.

[lunaticscode]

const {name = "", email = "", profileImageSource = ""} = user;

[lunaticscode]

아래 58~63번 라인까지의 코드는 앞으로 쓸일이 많아보이네요. /src/utils로 빼서 사용해주시면 됩니다. getFormatedDate()

[lunaticscode]

이 친구도 /src/utils로 빼주시면 될 것 같습니다.

[lunaticscode]

const [year, month, day] = splitedCreatedAt[0].split('-').map(val => Number(val));
const [hour, minute, second] = splitedCreatedAt[1].split(':').map((val, index) => index === 2 ? Number(val.substring(0,2)) : Number(val) );

const createdDate = new Date(year, month, day, hour, minute, second);