Project · 02
CRUD 기반 물품 관리 웹 시스템
2026.01.16 ~ 01.23
문제
저장 후 목록, 폼, 상세 모달 중 어디서 상태를 갱신하는지 불명확했습니다.
내 역할
- 물품 목록 상태의 소유 위치 정리
- 등록·수정·삭제 후 API 응답 기준으로 화면 갱신
- 폼, 목록, 상세 모달 책임 분리
확인 결과
- 등록·수정·삭제 후 화면 상태를 API 응답 기준으로 재정리
- 사용자가 저장 결과를 바로 확인 가능
- 컴포넌트 책임을 설명하기 쉽게 분리
데모 안내
외부 운영 데모는 현재 HTTPS 연결 점검 중입니다. 구현 내용은 GitHub와 설계 문서에서 확인할 수 있습니다.
role
내 역할 · 규모
role
내 역할 · 규모
- 물품 목록 상태의 소유 위치 정리
- 등록·수정·삭제 후 API 응답 기준으로 화면 갱신
- 폼, 목록, 상세 모달 책임 분리
기술 스택
ReactJavaScriptREST APICRUDUI/UX
case flow
문제 · 해결 · 결과
case flow
문제 · 해결 · 결과
핵심 성과
- 등록·수정·삭제 후 화면 상태를 API 응답 기준으로 재정리
- 사용자가 저장 결과를 바로 확인 가능
- 컴포넌트 책임을 설명하기 쉽게 분리
문제
저장 후 목록, 폼, 상세 모달 중 어디서 상태를 갱신하는지 불명확했습니다.
해결
목록 상태의 소유 위치를 정하고 서버 응답 또는 재조회 기준으로 화면을 갱신했습니다.
결과
변경 결과가 즉시 보이고, API 연동 흐름을 설명하기 쉬운 구조가 되었습니다.
architecture
설계 / 문서
architecture
설계 / 문서
아키텍처
- React 화면 컴포넌트와 REST API 연동 흐름 분리
- 목록, 폼, 상세 모달이 같은 서버 데이터를 기준으로 동작
ERD / DB
- 물품, 카테고리, 가격, 등록일 중심
- 목록 조회와 상세 수정 흐름에 맞춰 관리 속성 정리
API 명세
- 물품 등록, 목록 조회, 단건 조회, 수정, 삭제
- 각 요청 뒤 화면 갱신 기준 정리
debugging
트러블슈팅
debugging
트러블슈팅
로컬 상태만 바꾸면 서버 데이터와 달라질 수 있어 API 응답 또는 재조회 기준으로 상태를 맞췄습니다.
features
주요 기능
features
주요 기능
물품 등록/조회/수정/삭제
카테고리별 분류와 검색
물품 상세 모달
REST API 기반 데이터 연동
problem solving
문제 해결 과정
problem solving
문제 해결 과정
문제 상황
저장 후 화면 상태가 즉시 맞지 않고, 컴포넌트 사이 상태 전달이 늘어났습니다.
해결 과정
목록 상태를 상위 흐름에서 관리하고 등록·수정·삭제 뒤 API 응답 기준으로 목록을 다시 맞췄습니다.
배운 점
CRUD도 상태 소유 위치가 흐려지면 유지보수가 어려워지고 사용자 피드백도 늦어집니다.
takeaways
프로젝트에서 배운 것
takeaways
프로젝트에서 배운 것
01
상태 소유 위치가 명확해야 유지보수가 쉬움
02
저장 직후 화면 피드백이 사용자 경험을 좌우함
03
폼, 목록, 모달 책임을 나누면 기능 추가가 쉬움
documents
기획자료 / 첨부 문서
documents