[6주차] 조재희/[feat] 대시보드 페이지 UI 구현#51
Hidden character warning
Conversation
| const CheckIcon = () => ( | ||
| <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| d="M10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875ZM13.8496 8.22461L9.34961 12.7246C9.22754 12.8467 9.06348 12.915 8.89258 12.915C8.72168 12.915 8.55762 12.8467 8.43555 12.7246L6.15039 10.4395C5.89648 10.1855 5.89648 9.77051 6.15039 9.51660C6.4043 9.26270 6.81934 9.26270 7.07324 9.51660L8.89258 11.3359L12.9268 7.30176C13.1807 7.04785 13.5957 7.04785 13.8496 7.30176C14.1035 7.55566 14.1035 7.96484 13.8496 8.22461Z" | ||
| fill="#171717" | ||
| /> | ||
| </svg> | ||
| ); |
There was a problem hiding this comment.
파일 안에 가볍게 그림을 그려 파일을 넣는 것보다 훨씬 조작도 간편하고 성능도 향상 시키는 좋은 방법이 있다는 것을 알게 되었습니다.
그리고 이 부분은 나중에 파일이 커지거나 다른 위치에서도 사용이 되는 경우에는 다른 파일로 쪼개도 좋을 거 같습니다.
Leets-review
left a comment
Leets-review
left a comment
There was a problem hiding this comment.
고생하셨습니다!! 👍🏻
아래 몇 가지 코멘트 남겨두었으니 확인 부탁드립니다 :)
| return ( | ||
| <button className={`btn-${label}`} onClick={onClick}> | ||
| {label} | ||
| <button |
There was a problem hiding this comment.
이 Button은 여러 곳에서 공통으로 쓰일 것 같아서요!
기본 type이 없으면 form 안에서 의도치 않게 submit으로 동작할 수 있어서, 기본값을 button으로 두고 필요한 곳에서만 submit을 넘기는 방식도 좋을 것 같습니다 :)
| if (location.state?.deleted) { | ||
| setShowToast(true); | ||
| // state 정리 — 새로고침 시 토스트 재표시 방지 | ||
| window.history.replaceState({}, ''); |
There was a problem hiding this comment.
여기서 직접 window.history를 만지는 것보다 React Router의 navigate로 state를 비워주는 쪽이 더 자연스러울 것 같아요!
이미 useNavigate를 쓰고 있어서 replace 옵션으로 정리해도 괜찮을 것 같습니다.
| {inquiries.map((item, idx) => ( | ||
| <tr | ||
| key={item.id} | ||
| onClick={() => navigate(`/inquiry/${item.id}`)} |
There was a problem hiding this comment.
행 전체를 클릭해서 상세로 이동하는 구조라서요!
키보드로도 접근할 수 있게 버튼/링크로 감싸거나 tabIndex, onKeyDown 처리를 같이 넣어주면 더 좋을 것 같습니다 :)
4 participants
1. 과제 요구사항 중 구현한 내용
2. 핵심 변경 사항
3. 실행 및 검증 결과
npm run dev로 정상 실행됨. ESLint 오류 없음, 빌드 성공 (npm run build).4. 완료 사항
5. 추가 사항
closed #50제출 체크리스트
{이름}/main브랜치다{이름}/{숫자}주차브랜치다Reviewer가 참고할 내용