2023-06-10 프론트엔드 코드 리뷰

[scarf005]

Note 콜라비 문서에서 복사

진행 순서

• test: Title, Button 스토리 추가 #443
• feat: 태그 상세 페이지 #444
• feat: 태그관리 페이지 추가 #438
• feat: 도서별태그 페이지 구현 #439

스토리 추가 (#443)

• pnpm ladle serve로 실행
• 후크 사용도 되면 좋겠지만 현실적으로 어려울수도
• utils/에 있는 유틸리티 컴포넌트를 이렇게 정리하면 문서화에 도움이 되겠다

태그상세페이지 (#444)

페이지 밑에 슈퍼태그, 서브태그로 나뉨

• 내 태그는 추가/삭제 버튼으로 구분

• 빈 슈퍼태그일때 가시성이 좋아지면 좋겠다

• 슈퍼와 서브태그 구별이 잘 되야 할것 같다

  • 폴더-파일 아이콘으로 나누기?
  • 펼쳐지는 애니메이션?

• 백엔드에서 프로퍼티 관련 이슈 발생중, 나중에 이슈로 올리기

  • 백엔드 API에서 일관적인 타입을 반환하면 도움이 될듯?

• 메인 CSS를 어떻게 할까?

  • 첫인상이 중요하니 완성하고 배포해야할지도?
  • 자주 업데이트하면 오히려 개선하는 느낌이 들수도?
  • 워드 클라우드 방식도 좋겠다
    

• 특수문자 처리도 해주면 좋을듯

  • 자동 슬러그 처리를 해주자 (특수문자 제거, 공백 -> 언더스코어)

태그관리 페이지 구현 (#438)

• UI가 좀 칙칙하다
• 후크 반환값으로 돌려주는 Dialog가 개선이 필요하다
  • 필요한 파라미터가 지나치게 다양하다
• 아코디언 컴포넌트 추가
  • 전체보기/전체닫기 굳!
  • 모달에서 useIcon? onIconButton? -> Icon 컴포넌트로 대체?
  • 아코디언 접혔을때 오른쪽 화살표, 펼쳐졌을때 아래 화살표 괜찮을듯?
• 리다이렉트때문에 useGetBooksInfoSearch.ts 를 따로 만들었다
  • useEffect를 줄일수 있는 방법이 있으면 좋을지도?
• 태그 관리 페이지
  • 페이지를 통합해서 모든 기능을 페이지를 고치지 않고 사용할 수 있으면 좋겠다
  • '처리되었습니다' 모달 대신 토스트를 추가하면 좋을지도?
  • 아예 모달을 없애버릴까?
  • 태그 이동시 이동을 취소하면 API 요청을 보내지 않기 때문에 onDrop 요청을 인지를 못해서 UI에서 태그가 실종된다
    • 실패하면 자동으로 새로고침? (레이아웃 문제가 있어 무리)
  • 라이브러리 사용도 고려했으나 dnd API 가 dnd kit보다 간편함 (한계는 있음)
• 두 PR이 커밋을 공유하니 겹치는 커밋을 개별 PR로 만들어서 먼저 머지하자

도서별태그 페이지 구현 (#439)

• 도서명이 잘리는게 아쉽다
• 백엔드 API에서 도서 ID 제거 예정 (보안 문제 때문에) -> 청구기호/이름으로 정렬해야 하지 않을까
  • UUID 사용
• 모바일 가독성
  • 가로세로 바꾸기 (flex-direction: column)? -> 오히려 정보가 너무 많아서 눈에 안 들어올지도
  • 어드민은 노트북을 쓰자
  • 비공개 아이콘 (눈이나 자물쇠)을 바꾸기?
• "도서별태그" 명칭 -> "태그 기록"으로?
• 태그 전체 삭제 기능이 필요할까?

그밖에 프론트엔드 아이디어

• zod나 react query로 useApi를 개선해보자
• 토스트 컴포넌트를 만들어보자
• 다음주 회의때 프론트 통합 테스트 공개 예정
• PR body에서 gif 대신 mp4, mov 올려도 OK

태그명

• Regex에 대한 고려? -> 프론트, 백 이중으로 처리하고 slug library사용을 권장
• slug 라이브러리 사용도 고려
• https://www.npmjs.com/package/slugify
• as type? AxiosResponse<Tag>식으로 제네릭 파라미터를 넣어주자
• satisfies에 대해

[chanhihi]

정리 감사합니다. 고생 많으셨습니다.