Description 준비사항
git을 설치해주세요.
git 저장소를 clone합니다.
about_test.md의 설치법을 따라 backend와 frontend npm패키지를 설치하고 서버를 각각 실행합니다.
로컬 서버가 브라우저에서 동작이 잘 되는지 확인합니다.
필수 구현사항
기초 API 요청 확인 및 수정
src/api.js의 엔드포인트를 위 에서 실행시킨 backend서버의 주소로 수정합니다. ex) localhost:4001브라우저에서 검색결과가 잘 나오는지 확인합니다.
(이 작업이 선행되어야 검색 결과를 가지고 아래 작업 진행이 가능합니다)
반응형웹
유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.
992px 이하: 3개
768px 이하: 2개
576px 이하: 1개
디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다.
🔥TIP
크롬 개발자 도구를 이용하여 프로젝트가 어떤 css파일을 사용하고 있는지 확인합니다(src/style.css)
수정하려고 하는 대상(목록 컨테이터, 각 목록 아이템 등)이 어떤 셀렉터를 사용하는지, 현재는 어떤 css가 작성되어 있는지 확인합니다.
css 파일 하단에 mediaquery를 작성합니다. 분기 조건문을 max-width로 작성합니다.
조건에 맞춰 컬럼 갯수가 override되도록 합니다.
다크모드
다크 모드(Dark mode)를 지원하도록 CSS를 수정해야 합니다.
CSS 파일 내의 다크 모드 관련 주석을 제거한 뒤 구현합니다.
모든 글자 색상은 #FFFFFF , 배경 색상은 #000000 로 한정합니다.
🔥TIP
기존 작성된 prefers-color-scheme 스펙을 확인합니다.
주석을 제거하고 결과를 확인합니다.
글자 색상, 배경 색상을 확인하면서 미션대로 수정합니다.
다크모드 토글
기본적으로는 OS의 다크모드의 활성화 여부를 기반으로 동작하게 하되, 유저가 테마를 토글링 할 수 있도록 좌측 상단에 해당 기능을 토글하는 체크박스를 만듭니다.
🔥TIP
참고 자료의 'The Complete Guide to the Dark Mode Toggle'를 참고하여 토글 버튼을 작성합니다.
방법1. input 이벤트 제어, DOM 제어, 로컬스토리지 사용법 등을 각각 학습하여 코드를 작성합니다.
방법2. 코드를 copy & paste하여 원하는 동작이 되는 정도만 작성합니다.
시맵틱 마크업(선택)
(선택 미션입니다)
현재 HTML 코드가 전체적으로 <div> 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다.
참고 자료
You can’t perform that action at this time.
