멋쟁이 사자처럼 10기 FE 2주차 과제 🦁

반갑습니다 여러분!!☺️ 2주차부터 약 4주간 함께 진행할 10기 운영진 이성인입니다 ☺️ react는 크게 어렵지 않습니다! 다같이 열심히 하시죠 ㅎㅎ

실습 진행방법

기존의 실습들과 동일하게 진행됩니다

• 이 레포를 fork 한다!
• fork하여 이동한 자신의 레포에서 깃크라켄을 통해 클론을 받습니다.
• 클론을 받은 파일을 vs 코드에서 엽니다!
• vs 코드에서 터미널을 열어서 npm run start 를 입력하면 코드가 실행됩니다!

이번 실습은 3차에 걸쳐서 진행됩니다! 마지막까지 열심히 진행해보시죠 ㅎㅎ

실습 1번문제

여러분은 프론트 엔드 작업을 진행하시면서 글자에 효과를 어떻게 주셨나요? 매번 id, class를 통해서 받지 않으셨나요? Text 컴포넌트를 수정하며 다양한 순간에 재사용성이 뛰어난 코드를 만들어봅시다!

제한조건

• text-weight , text-size 를 props를 통해서 입력받아서 수정합니다.

ex)

현재 상태입니다.

다음과 같이 입력받을 때 font-weight, font-size 등이 수정되도록 바꾸어 주세요

실습 2번문제

색상코드를 입력하면 색상과 text가 나오는 카드를 만들어봅시다! 제한된 조건 속에서 진행해 주시길 바랍니다!!
현재 사진입니다! 아래와 같게 만들어주세요!

목표)

다음과 같이 입력 받습니다.

제한조건

• 빈칸을 채워 다음 사진과 같게 구현합니다!
• ColorCard들 사이 간격은 10px 로 합니다.
• ColorCard를 서로다른 props를 통해서 5개 이상 화면에 출력합니다.

실습 3번문제

대망의 끝판왕 MediaCard 컴포넌트를 제작합니다! 무슨 방법을 사용하셔도 괜찮습니다. 최선을 다해서 사진과 유사한 미디어 카드를 만들어주세요! FE는 필수소양은 디자인을 완벽하게 같게 구사하는 능력입니다.

요런 컴포넌트를 만들어 주세요!

제한조건

• styled-component 를 이용합니다.
• 사진의 1번은 url을 props 로 입력받습니다.
• 사진의 2번은 미디어카드의 제목입니다. props를 통해 입력받습니다.
• 사진의 3번은 미디어 카드의 내용입니다. props를 통해 입력받습니다.
• 사진의 4번은 미디어 카드의 버튼의 색 입니다. props를 통해 입력받습니다.
• 서로 다른 props를 입력받은 미디어 카드를 최소 5개 이상 만듭니다.

제출시 필수 사항

• 실습 모든 문제를 포함합니다.
• 실습의 각 문제마다 스크린샷을 포함합니다.
• pr 의 제목은 | [내이름] 제목 |으로 합니다. ex) [이성인] 리엑트는 너무 재밋어!