🥤1. Home
기본 컴포넌트들을 만들었으니 메인 페이지인 Home을 한 번 만들어 보자.
<progress>태그 사용appearance: none을 적용해서 progress에 적용된 기존 디자인을 초기화한 후,webkit-progress-value와webkit-progress-bar요소를 사용해서 스타일을 조정했다. 하지만 이 의사 요소들은 표준 특성이 아니라 웹 환경에 따라 적용되지 않을 수도 있다고 한다. 내 노트북에서는 네이버 웨일, 크롬, 엣지에서 다 잘 구현됐는데 혹시 모르니 이 글을 참고해서 일반 div로 만들어도 괜찮을 듯.
Rechart 라이브러리 사용- 하려고 했는데 새로고침할 때마다 차트가 자기 마음대로 변해서 전에 썼던 chart.js 다시 사용했다. npm을 이용해서 chart.js랑 react-chartjs-2를 함께 설치하면 된다.
- 차트를 div의 가운데로 정렬시키기 위해
margin: auto속성을 적용했는데, 여기에도 styled-components를 적용하면 코드가 너무 복잡해질 것 같아서 App.css 파일에 따로 적용시켰다. 그 외 색이나 파이 모양 같은 건 공식 문서의 예제를 참고했다.
select- 우선은 option을 사용해서 하드코딩 해두었다. 원래 Weekly plan은 주마다 하나씩 div를 4개 만들었었는데, 실제로는 5주라서 div를 하나 더 추가하려고 보니 2개씩 2줄이면 아름다웠던 레이아웃이 영 별로가 될 것 같았다. 그래서 그냥 select로 특정 주를 선택하면 그 주차 체크박스가 나오게 만드는 게 나을 듯하여 계획 변경. 나중에 계획을 직접 추가하고 삭제할 수 있도록 만들 예정이다.
🥤1-1. SideBar
- 메뉴에 focus가 들어오면 색이 변하도록 스타일을 변경했다.
- useNavigate를 사용해서 구현했던 페이지 이동 기능을 Link로 대체했다. useNavigate와 Link의 차이점은, 전자는 함수의 형태로 호출하기 때문에 후자와 달리 조건을 걸 수 있다. 더불어 Link는 DOM에 a 태그로 반영되지만, 외부 링크도 연결할 수 있는 일반 a 태그와는 달리 프로젝트 내에서 페이지를 전환하는 용도로 사용된다고 한다.
- 아직 Header에 있는 토글 버튼과 SideBar를 연결시키지 못했다. 부모 컴포넌트로 state를 끌어 올리고 props로 다시 내려보내는 로직은 알겠는데 코드로 구현이 안 된다. 강의를 다시 들어봐야겠다.
🥤2. My Account
- 일단 원래 프로젝트와 거의 똑같이 하드코딩해두었다. 그때는 부트스트랩을 써서 flex box 적용하기가 정말정말 쉬웠는데, 이번에는 조금 힘들었다...^^ 따로 Form이라는 컴포넌트로 분리한 후, 내부 input에 grid를 적용해서 큰 화면에서는 한 줄에 input 2개가 1fr씩 동일하게, 작은 화면에서는 한 줄에 input 1개만 오도록 미디어 쿼리를 적용했다.
- 마찬가지로 미디어 쿼리를 사용해서 작은 화면에서는 프로필 박스가 위에 오게 order 속성을 주었다.
- 프로필 박스의 링크들은 처음에는 모르고 Link로 만들었다가 외부로 연결이 안 되는 것을 깨닫고 a 태그로 만들었다. Link와 a 태그의 차이점은 상술하였다.
🥤3. 오늘의 문제
- 화면을 작게 줄이면 Header 오른쪽에 있는 dropdown이 Header를 벗어나는 문제가 생겼다. 이를 해결하기 위해 dropdown의 부모인 Header에
overflow: auto속성을 적용하니 화면을 300px 가까이 줄여도 dropdown이 Header 밖으로 나가지 않았다. - 이대로 모든 게 잘 굴러가면 좋았겠지만! Header 밖으로 빠져나가는 요소를 스크롤 바를 만들어서 못 빠져나가게 만드는 바람에 dropdown으로 펼쳐지는 메뉴에도 overflow 속성이 적용되는 문제가 발생했다. 스크롤해야 볼 수 있는 dropdown이라니 이 얼마나 별로인가...!
- 하는 수 없이 overflow를 포기하고 개발자 도구를 열어서 스타일을 살펴 보니, 화면이 줄어들 때 dropdown의 옆에 있는 search input의 크기가 그대로인 것이 보였다. input의 width만 유연하게 줄일 수 있다면 줄어든 공간만큼 dropdown이 옆으로 이동해서 이 문제가 해결될 것 같았다. 그렇게 input에
width: 100%를 적용하니 문제가 풀렸다. 아마도 특정 값으로 고정된 width가 부모 요소(Header)의 크기에 따라 자동으로 조절되어서 이렇게 된 것 같은데, 조금 더 알아봐야겠다.
🥤4. 가벼운 회고
