[프론트엔드 심화]상태 관리와 비동기 처리(3)

📌 1. Modal 컴포넌트란?

**모달(Modal)**은 사용자 인터페이스에서 자주 사용되는 오버레이 UI 컴포넌트로, 특정 작업을 수행하거나 알림을 보여줄 때 현재 페이지 위에 뜨는 창입니다.

✅ 왜 사용하는가?

• 사용자의 집중을 유도하고,
• 백그라운드 요소와의 상호작용을 차단하며,
• 중요한 작업(수정, 삭제 등)에 대해 의사결정을 명확하게 하도록 돕기 위함입니다.

✅ 구성 요소

• 배경 오버레이: 클릭 시 모달 닫기 기능을 할 수 있음
• 내용 영역(Content Box): 제목, 폼, 버튼 등 포함
• 닫기 버튼: X 또는 외부 클릭

---

✨ 2. Modal 동작 방식

상태 관리

React에서는 보통 useState 훅을 통해 **열림/닫힘 상태 (isOpen)**를 관리합니다.

• true: 모달 열림
• false: 모달 닫힘

tsx

복사편집

const [isOpen, setIsOpen] = useState(false);

열기/닫기 로직

• 특정 버튼 클릭 → setIsOpen(true)
• 배경 클릭 또는 닫기 버튼 → setIsOpen(false)

---

🛠 3. Modal 스타일링

모달은 일반적으로 아래와 같은 CSS 요소를 포함합니다:

• 포지셔닝: fixed, top/left 50%, transform: translate(-50%, -50%)
• 배경 오버레이: rgba() 투명도 처리
• 애니메이션: fade-in, scale 등 부드러운 전환 효과

---

📋 4. LoggerModal 컴포넌트란?

LoggerModal은 로그 기록들을 모달 형태로 보여주는 UI입니다. 예를 들어, 게시글 삭제 시 로그가 남았다면 그 기록을 열람할 수 있게 합니다.

주요 특징

• 내부에 여러 LogItem 컴포넌트 포함
• 최근 작업 내역을 모달 안에서 확인 가능
• 사용자 행동 추적 및 UX 향상

---

🧱 5. LogItem 컴포넌트란?

LogItem은 하나의 로그를 의미하는 단위 컴포넌트입니다.

• 예: 2024.04.13 - 게시글 삭제됨

요소

• 날짜/시간
• 작업 내용
• 선택적으로 아이콘 또는 상태 뱃지