모달창 구현하기 & util Function vs Custom hooks에 대한 고뇌

[KimKyuHoi]

Pull request

Related issue

• Resolve 모달창 공용 컴포넌트 구현 #110 @KimKyuHoi
• Disccussion 파일 전송 기능 구현 #68

Motivation and context

• 이미지나 동영상을 업로드 하였을때 모달창을 통해 영상이나 이미지를 확인할 수 있어야 합니다.
• 모달창 구현을 통해 계속된 로직 분리를 통해 이전 파일 업로드내에서 고민했었던 util function과 custom hook에 대한 고뇌가 생겼습니다.

Solution

tsDocs를 통해 로직 주석처리를 하였습니다!

• Modal창을 구현하였습니다.

  • createPortal을 사용하여 구현하였습니다.
  • 스토리북을 통하여 공용 컴포넌트 문서화를 하였습니다.
  • Modal창내에서 파일 사이즈 및 파일명을 나타내었습니다.
  • Modal창내에서 로고를 통해 이미지인지 비디오인지 나타내었습니다.

• 로직 분리에 대한 의견 및 고민과 결론 <Utill function이란? && Custom Hooks 란??>

  • util function이란 원시적이되 어느것에 종속되지 않아야합니다.
  • custom hook 같은 경우 일부 react나 state관련 종속될 경우 재사용 목적이 아니라도 사용이 될 수 도 있습니다.
  • handleFileChange, handleRemoveFile 함수같은 경우 useState내에 종속이 되기 때문에 util function에서 커스텀훅으로 교체하였습니다.
  • 일부 file.utils.ts같은 경우 fsd내에서 Lib폴더는 아래와 같습니다.

  lib - 슬라이스 안에 있는 다른 모듈이 필요로 하는 라이브러리 코드.

  • 그러므로 lib폴더로 이동하였습니다.

How has this been tested

2025-02-03.9.11.19.mov

• 리팩후 tested

2025-02-04.10.13.41.mov

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the docs/CONTRIBUTING.md document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[handje]

모달이 예쁘네요! 스타일링 관련 리뷰 내용은 추후에 수정해주셔도 될 것 같습니다 👍