[4주차] 과제 이나현

[CSE-pebble]

✨ 구현 기능 명세

React를 이용하여 아래의 기능을 구현하자

<DropDown 구현>

1. Dropdown 생성
2. Dropdown 중 하나를 마우스를 올리면, 색상이 변경되며 해당 리스트에 마우스를 올렸음을 확인할 수 있음
3. Dropdown 중 하나를 클릭하면, 해당 리스트의 글자가 변경되고 Dropdown 박스 안 글자가 변경됨 ❌

<Modal 창 구현> ❌

1. Card 클릭 시, modal 창 생성
2. X 클릭 시 modal 사라짐
3. modal 창이 있는 동안은 scroll 막기

🎁 PR Point

구현하지 못한 기능에는 ❌를 했습니다!

얼레벌레.... 제가 뭘 하고 있는지 모르고 한 것 같아 슬픕니다 🥲

😭 어려웠던 점

1. styled-component를 이렇게 쓰는 것이 맞나 계속 의심하면서 CSS를 작성했습니다,,
2. styled-component 내에서 selector를 이용하여 CSS를 적용해주었는데, 해당 컴포넌트 내의 span 태그에만 CSS를 적용하고 싶었으나 다른 모든 span 태그에도 적용이 되어 당황스러웠습니다... 그래서 이걸 해결하고자 나머지 span 태그에도 각각에 맞는 CSS를 적용해주었는데, CSS가 불필요한 태그까지도 수정해야 해서 제가 코드를 잘못 작성하고 있다는 걸 몸소 느꼈습니다.. ㅠ
3. React를 처음 써보는데, 분명 코어님의 강의를 봤을 때는 100% 이해한 것 같았고 바로 해낼 수 있을 것 같았으나.. 그냥 코어님 강의력이 좋으셨던 것이었습니다.. useState를 거의 하나도 다루지 못했습니다. ㅠㅠ
4. useState를 쓰면서 도대체 여기 있는 컴포넌트에서 발생한 이벤트를 다른 컴포넌트에서 어떻게 알지.... 등 의문의 연속이었던 것 같습니다.

😎 구현 결과물

2023-11-26.000939.mp4