[11주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 49

1. Modal Edit 컴포넌트 생성

먼저 게시글 수정 기능을 위해 Modal Edit 컴포넌트를 생성했다.

모달은 일반 페이지와 달리:

• 화면 위에 떠야 하고
• 배경을 어둡게 처리해야 하며
• 상태로 열고 닫는 제어가 필요하다

그래서 isOpen 상태를 기반으로 렌더링을 제어했다.

 

{isOpen && <ModalEdit />}

 

👉 이 구조 덕분에 재사용 가능한 모달 패턴을 만들 수 있었다.

---

⚙️ 2. Modal Edit 기능 구현

모달 안에서는 다음 기능들을 구현했다:

• 기존 데이터 불러오기
• 입력값 수정
• 저장 버튼 클릭 시 업데이트

특히 중요한 포인트는:

✔ controlled component 사용
✔ 입력값을 state로 관리
✔ API 요청으로 데이터 수정

 

const [title, setTitle] = useState('');

 

---

🎨 3. Modal 스타일링

모달 UI는 사용자 경험에 큰 영향을 준다.

핵심 스타일 요소:

• 중앙 정렬
• 배경 오버레이
• 스크롤 방지

 

.modal-overlay {
position: fixed;
background: rgba(0,0,0,0.5);
}

 

👉 UX를 위해 클릭 시 외부 영역에서 닫히도록 처리한 것도 중요했다.

---

🪵 4. LoggerModal 컴포넌트 생성

로그를 보여주는 별도의 모달(LoggerModal)도 생성했다.

이 컴포넌트는:

• 사용자 행동 기록 확인
• 디버깅용 UI

👉 기능별로 모달을 분리하면서 컴포넌트 구조가 훨씬 깔끔해졌다.

---

📄 5. LogItem 컴포넌트 분리

로그 리스트를 관리하기 위해 LogItem 컴포넌트를 만들었다.

이렇게 분리하면:

• 유지보수 쉬움
• 재사용 가능
• UI 변경 시 영향 최소화

 

<LogItem log={log} />

 

---

🎨 6. LogItem 스타일링

로그 UI는 단순하지만 가독성이 중요했다.

• 날짜
• 내용
• 구분선

👉 작은 UI라도 사용자 입장에서 읽기 쉽게 만드는 것이 핵심이었다.

---

🗑️ 7. 게시판 삭제 기능 구현

마지막으로 게시글 삭제 기능을 추가했다.

삭제 기능에서 중요한 점:

• 확인(alert or modal)
• 상태 업데이트
• 서버 동기화

 

const handleDelete = async () => {
await deletePost(id);
};

 

👉 낙관적 업데이트 vs 서버 응답 후 처리 고민도 해볼 수 있는 부분이었다.

---

💡 느낀 점

이번 구현을 통해 배운 점은 크게 세 가지다:

1. 컴포넌트 분리가 곧 유지보수성이다

Modal, LogItem 등 분리하면서 코드가 훨씬 명확해졌다.

2. UI보다 상태 관리가 더 중요하다

모달은 결국 상태로 제어하는 UI라는 걸 체감했다.

3. 작은 기능도 구조를 고민해야 한다

삭제, 수정 같은 기능도 구조에 따라 복잡도가 크게 달라진다.