프로젝트 상세내용 모달 기능을 추가해봤습니다.

[Tanney-102]

안녕하세요 동글님! 손XX의 부탁으로 간단한 모달기능을 구현해 봤습니다. 기존에는 ProjectItem 클릭시 지정한 projectUrl에 대한 링크만 제공을 했었는데요! 설정에 따라 상세 내용을 모달로 상세 내용을 보여주도록 구현했습니다.

상세내용

1. markdown 관련 css 분리(commit: https://github.com/ddongule/ddongule-simple-portfolio/commit/135adf8211e542cebe3863f552fde8b2783a25f7)

   • 기존 css 파일 내 .about 클래스 내용 중 마크다운에 대한 스타일(하이라이팅, 폰트 사이즈 등)을 다루는 부분을 분리해봤습니다.
   • 이 부분은 필히 문제가 없는지 확인부탁드립니다.

2. ModalPortal 컴포넌트 및 관련 훅 구현 (commit: https://github.com/ddongule/ddongule-simple-portfolio/commit/bd1c6e87260a79249c7bc15c699e5850d8aa7080)

   • react portal을 이용해 모달을 구현했습니다.
   • useModal을 통해 modal 조작에 대한 인터페이스를 구현했습니다.

3. project detail modal 기능 구현 (commit: https://github.com/ddongule/ddongule-simple-portfolio/commit/372ff541caa74dcd2d0c9afb7cb618105ce2a9e6, https://github.com/ddongule/ddongule-simple-portfolio/commit/eec6b004dc55b64d6cdd3e59500111f77d1ba52d)

   • useDetailModal 변수에 따라 ProjectItem의 성격(a or button)을 분기하도록 했습니다.
   • 모달 사용 시 src/assets/static/markdown에 있는 md 파일을 가져와 보여주도록 했으며 이때, 기존 프로젝트에 있던 mmd.js 모듈을 이용했습니다.
   • mmd.js를 통해 md 파일을 파싱하면 html string을 반환하기 때문에, 기존에는 직접 돔에 넣어주는 로직을 구현하신 것으로 알고있습니다. 저는 이번에 html-react-parser라는 라이브러리를 사용해 직접 JSX 안에 넣어줬습니다. 확인해보시고 AboutMe 컴포넌트에도 사용을 고려해봐도 좋을 것 같습니다!

4. readme 작성 (commit: https://github.com/ddongule/ddongule-simple-portfolio/commit/a34359a4e79eca71a47860af2d4cfea027f2fa6d)

   • readme 영문, 한글 버전 모두 업데이트했습니다.
   • 영문버전의 경우 문법 오류가 있을 수 있으니(그럴 확률이 높으니) 필히 확인 부탁드립니다.

사용 예시

• md 파일 작성 및 src/assets/static/markdown에 추가

  

• db.json 설정 변경

  

• 실제 프로젝트에 반영 되었는지 확인