[Setting/#10] Modal 세팅

[Seojegyeong]

🚨 관련 이슈

#10

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

1. 모달 시스템

전역에서 모달을 관리하고 호출할 수 있도록 Zustand와 Provider를 사용했습니다.

• 전역 상태 관리(useModalStore) : zustand를 활용해서 모달의 상태 전역으로 관리
• modal provider(ModalProvider) : Root layout에서 동작함(Root Layout 생성함). 현재 필요한 모달 컴포넌트 동적으로 렌더링함
• 베이스 modal(Modal.tsx) : 모든 모달의 뼈대가 되는 공통 UI 컴포넌트

* 모달 생성 및 등록 방법 *

• MODAL_TYPES에 상수를 추가
• MODAL_COMPONENTS에 해당 컴포넌트를 매핑
• useModalStore의 openModal 사용해서 모달 열기

2. 개인정보 동의 모달 구현

회원가입에서 사용될 약관 동의 모달을 구현

• Markdown 연동: 약관 상세 내용을 별도의 Markdown 파일로 관리
• Markdown 문서를 렌더링하기 위해 react-markdown 라이브러리 설치

3. index.html

파비콘을 기본 vite.svg → 프로젝트 로고 SVG로 변경
모달 렌더링을 위한 #modal-root DOM을 추가했습니다.

📂 폴더 구조

src
├── assets
│   └── docs                  # 약관 내용 마크다운 파일
│       ├── marketing-agreement.md
│       └── privacy-collection.md
├── components
│   ├── modal                 # 모달 관련 컴포넌트 폴더
│   │   ├── Modal.tsx             # 베이스 공통 모달 UI
│   │   ├── ModalProvider.tsx     # 전역 모달 렌더링 Provider
│   │   └── privacyModal          
│   │       ├── AgreementItem.tsx     # 약관 개별 항목
│   │       └── PrivacyModal.tsx      # 개인정보 동의 모달
└── store
    └── useModalStore.ts      # 모달 전역 상태 관리

UI 스크린샷

• 개인정보 동의 체크박스 및 "내용보기" 클릭 시 모달 나오는 구조입니다!

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

• 모달 시스템 세팅만 목표로 했으나, 시스템 검증을 위한 예시로 '개인정보 동의 모달'까지 함께 구현하게 되어 PR의 범위가 넓어졌습니다. 다음 작업부터는 단위를 더 작게 쪼개어 진행하겠습니다....
• 개인정보 수집 및 마케팅 동의와 관련된 내용은 재선님이 보내주신 참고 이미지를 바탕으로 임의로 작성했습니다. 피드백 부탁드립니다!

[jjjsun]

P4: 개인정보 동의전까지 비활성화하는 방법도 좋은것같습니다! 고생하셨어요!

[YermIm]

P3: 개인정보 수집 동의에 체크한 뒤, 내용보기를 눌러 다시 모달에 들어갔을 때 이전에 체크했던 상태가 초기화되어 보입니다. 이미 동의한 내용에 대해서 모달을 다시 열어도 유지되는 것이 사용자 입장에서 편할 것 같습니다!