[박성재] Week7 #347

Batrnan · 2024-04-10T15:33:56Z

요구사항

기본

[기본] 상단 네비게이션 바, 푸터가 랜딩 페이지와 동일한 스타일과 규칙으로 만들어졌나요? (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 인가요?

심화

주요 변경사항

스크린샷

멘토에게

늦게라도 제출할 수 있게 해주셔서 정말 감사합니다..

devToram

조금 늦더라도 제출을 하는 게 중요하죠!!!
수고 많으셨고, 8주차도 늦더라도 꼭 제출해주세요 👍

devToram · 2024-04-12T11:35:59Z

src/api/index.js

+export const TWITTER_URL = "https://www.twitter.com/";
+export const INSTAGRAM_URL = "https://www.instagram.com/";
+
+export const getUser = async () => {


아래 getFolderUser 와 fetchURL 을 제외하고는 똑같아서 공통화해보시면 좋을 거 같아요!

export getUser = async(url) => { ... fetch(url) .. }

요런 식으로요!

devToram · 2024-04-12T11:36:50Z

src/Folder.jsx

src 안에 바로 있는데 pages 같은 폴더로 한 번 묶어주면 좋을 거 같아요!

devToram · 2024-04-12T11:37:59Z

src/components/Card.jsx

+const displayCreatedAt = (createdAt) => {
+  const date = new Date(createdAt);
+  const now = Date.now();
+  const milliSeconds = now - date;
+
+  const seconds = milliSeconds / 1000;
+  const minutes = seconds / 60;
+  const hours = minutes / 60;
+  const days = hours / 24;
+  const months = days / 30;
+  const years = months / 12;
+
+  if (seconds < 60) {
+    return "방금 전";
+  } else if (minutes < 60) {
+    return `${Math.floor(minutes)}분 전`;
+  } else if (hours < 24) {
+    return `${Math.floor(hours)}시간 전`;
+  } else if (days < 30) {
+    return `${Math.floor(days)}일 전`;
+  } else if (months < 12) {
+    return `${Math.floor(months)}달 전`;
+  } else {
+    return `${Math.floor(years)}년 전`;
+  }
+};


이 부분은 함수와 상관없이, 그냥 숫자계산만 해주는 부분이라 util 폴더로 빼주면 좋을 거 같아요!
utils > displayCreatedAt.ts

devToram · 2024-04-12T11:39:40Z

src/components/Card.jsx

+
+const Card = ({ data }) => {
+  const { createdAt, description, imageSource, url } = data;
+  if (!data) return;


jsx 를 파일 최하단에서도 return 하고, 여기서도 return 하면 헷갈릴 수 있으니,
아래 return 부를 return ({data && <.... /> }) 로 묶어주면 좋을 거 같습니다!

devToram · 2024-04-12T11:40:00Z

src/components/Card.jsx

+  const { createdAt, description, imageSource, url } = data;
+  if (!data) return;
+
+  let time = displayCreatedAt(createdAt);


변하지 않는 값이라 const 추천드려요!

Suggested change

let time = displayCreatedAt(createdAt);

const time = displayCreatedAt(createdAt);

devToram · 2024-04-12T11:42:33Z

src/components/Card.jsx

+        <div className='description'>
+          <span>{time}</span>
+          <p>{description}</p>
+          <span>{new Date(createdAt).toLocaleDateString()}</span>


렌더부에서 연산을 해주면 계속 재연산되어서 좋지 않아요!
위에서 변수로 선언해주고, 렌더부에서는 갖다 쓰시기만 하는 걸 추천드립니다

Suggested change

<span>{new Date(createdAt).toLocaleDateString()}</span>

// 위쪽

const displayDate = new Date(createdAt).toLocaleDateString()

// 아래 렌더부

<span>{displayDate}</span>

devToram · 2024-04-12T11:44:05Z

src/components/CardsBox.jsx

+      {linkDatas.map((data) => {
+        return <Card key={data.id} data={data} />;
+      })}


한 줄로 리턴할 때는 return 을 안써주는 게 더 가독성이 좋아요! 특히 렌더부에서요!

Suggested change

{linkDatas.map((data) => {

return <Card key={data.id} data={data} />;

})}

{linkDatas.map((data) => <Card key={data.id} data={data} />)}

devToram · 2024-04-12T11:44:26Z

src/components/Footer.jsx

+const Footer = () => {
+  return (
+    <div className='Footer'>


className 규칙 통일해주세요!

Suggested change

const Footer = () => {

return (

<div className='Footer'>

const Footer = () => {

return (

<div className='footer'>

devToram · 2024-04-12T11:44:58Z

src/components/Header.jsx

+import "./Header.css";
+
+const Header = ({ user }) => {
+  let { email, profileImageSource } = user;


Suggested change

let { email, profileImageSource } = user;

const { email, profileImageSource } = user;

devToram · 2024-04-12T11:52:40Z

src/components/Info.jsx

+  if (!folderUser || !folderUser.folder) {
+    return null;
+  }
+  const { name } = folderUser.folder;
+  if (!folderUser.folder.owner) {
+    return null;
+  }
+  const { name: ownerName, profileImageSource } = folderUser.folder.owner;


위에 말씀드렸듯 중간에 return 을 하는 것보다는 아래처럼 해보면 어떨까합니다!

Suggested change

if (!folderUser || !folderUser.folder) {

return null;

}

const { name } = folderUser.folder;

if (!folderUser.folder.owner) {

return null;

}

const { name: ownerName, profileImageSource } = folderUser.folder.owner;

const { name, owner } = folderUser.folder

const { name: ownerName, profileImageSource } = owner

const isUserInfoExist = name && ownerName && profileImageSource

return (

isUserInfoExist && {

<div className="Info">

<img src={profileImageSource} alt="profileImageSource" />

<p>@{ownerName}</p>

<h1>{name}</h1>

</div>

}

)

Sjae and others added 2 commits April 9, 2024 19:46

7주차 위클리 미션

a3b72ea

카드 애니메이션 추가

b94b23e

Batrnan requested a review from devToram April 10, 2024 15:34

Batrnan added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Apr 10, 2024

devToram approved these changes Apr 12, 2024

View reviewed changes

devToram merged commit 195a8d4 into codeit-bootcamp-frontend:part2-박성재 Apr 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[박성재] Week7 #347

[박성재] Week7 #347

Batrnan commented Apr 10, 2024

devToram left a comment

devToram Apr 12, 2024

devToram Apr 12, 2024

devToram Apr 12, 2024

devToram Apr 12, 2024

devToram Apr 12, 2024

devToram Apr 12, 2024

devToram Apr 12, 2024

devToram Apr 12, 2024

devToram Apr 12, 2024

devToram Apr 12, 2024

	let time = displayCreatedAt(createdAt);
	const time = displayCreatedAt(createdAt);

-          <span>{new Date(createdAt).toLocaleDateString()}</span>
+         // 위쪽
+         const displayDate = new Date(createdAt).toLocaleDateString()
+         // 아래 렌더부
+          <span>{displayDate}</span>

	let { email, profileImageSource } = user;
	const { email, profileImageSource } = user;

-  if (!folderUser || !folderUser.folder) {
-    return null;
-  }
-  const { name } = folderUser.folder;
-  if (!folderUser.folder.owner) {
-    return null;
-  }
-  const { name: ownerName, profileImageSource } = folderUser.folder.owner;
+  const { name, owner } = folderUser.folder
+  const { name: ownerName, profileImageSource } = owner
+  const isUserInfoExist = name && ownerName && profileImageSource
+  return (
+     isUserInfoExist && {
+       <div className="Info">
+      <img src={profileImageSource} alt="profileImageSource" />
+      <p>@{ownerName}</p>
+      <h1>{name}</h1>
+    </div>
+     }
+  )

[박성재] Week7 #347

[박성재] Week7 #347

Conversation

Batrnan commented Apr 10, 2024

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

devToram left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment