[이동령] 멋쟁이 사자처럼 3번째 과제 제출

[pexe99]

✨ 아래는 클론코딩한 결과 이미지입니다. ✨

📌 전체적인 결과 이미지입니다.

• 햄버거 버튼과 View/Edit 버튼, 각 버튼에 대한 애니메이션 효과와 Footer를 추가 구현하였습니다.
• 햄버거 버튼 focus 시, border에 대한 transition은 추가하였으나, 버튼 클릭 이벤트 발생 시에 component 높이 변화에 따른 transition 적용 방법을 몰라 이에 대한 애니메이션 적용은 구현하지 못했습니다 😢😢

[devHudi]

추가 요구사항까지 반영해주시다니 대단하네요!
지난주 과제 때 보다 훨씬 성장하신 것 같아요 👍
몇가지 수정하면 좋을 만한 점을 코멘트 달아드렸어요. 반영해주셔도 좋고, 참고만 해주셔도 좋습니다 😁

[devHudi]

�컴포넌트의 이름이 아닌 디렉토리명은 PascalCase 대신 camelCase를 사용하는것이 일반적입니다.

Suggested change

	import AlbumBox from "./Component/AlbumBox";
	import Footer from "./Component/Footer";
	import MainBox from "./Component/MainBox";
	import NavigationBar from "./Component/NavigationBar";
	import AlbumBox from "./components/AlbumBox";
	import Footer from "./components/Footer";
	import MainBox from "./components/MainBox";
	import NavigationBar from "./components/NavigationBar";

위와 같이 변경해볼 수 있을 것 같아요.
(그리고 아주아주아주 지극히 취향의 영역이지만 저는 단수형보다는 복수형으로 네이밍 하는 것을 선호합니다. 🤣)

[devHudi]

비어있는 3개의 오브젝트는 무엇인가요? 🧐

[pexe99]

props에 src로 이미지 링크나 경로를 넘겨주지 않았을 경우의 기본 형태 Album Card 3개를 위해 넣어줬습니다 👍 👍 👍

[devHudi]

아무런 스타일이 없는 CardButtonWrap 컴포넌트는 그냥 div 를 사용해도 되겠군요!

[devHudi]

전체적으로 디버깅을 위한 console.log() 가 남아있는 것 같아요. 모두 제거해주시면 좋을 것 같네요 👍👍

[devHudi]

외부에서 card 라는 오브젝트를 가져오지만, 실제로 사용되고 있는 것은 card.src 같아요.
외부에서 card.src 에 해당하는 값을 직접 넣어주면 아래와 같이 조금 더 개선해볼 수 있을 것 같군요!

Suggested change

	function Card({ card }) {
	return <AlbumCard src={card.src} />;
	}
	function Card({ src }) {
	return <AlbumCard src={src} />;
	}

[devHudi]

var 사용 😵

[devHudi]

기본값을 위해 삼항연산자가 반복적으로 사용되고 있는데요, 아래와 같은 방법으로 코드를 좀 더 축약해볼 수 있을 것 같아요.

AS-IS

color: ${(props) => props.color ? props.color : "#212529"};

TO-BE

color: ${(props) => props.color || "#212529"};

이를 단축 평가 (Short circuit evaluation) 이라고 합니다. (참고: http://milooy.github.io/TIL/JavaScript/short-circuit.html#%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6)