Item Management

+ Project Descriptions #05

서버에서 자동차, 물품, 고객 데이터를 가져와 목록을 표시하고 관리하는 React 애플리케이션

데이터 추가, 수정, 삭제, 검색 하는 기능을 제공하며, MUI Data Grid를 사용하여 데이터를 효과적으로 표시합니다.

- 로그인 화면 -

사용자의 로그인, 로그아웃 상태에 따라 UI를 동적으로 제어하고, 사용자와의 상호작용에 따라 메인 화면을 표시합니다.
ID : user / PW : user 입력 하여 로그인 합니다.

- 메인 화면 기능 -

1. MenuBar : 사용자가 메뉴를 선택할 때마다 해당하는 컴포넌트를 동적으로 렌더링하여 유연하고 확장 가능한 UI를 화면에 보여줍니다.
2. 엑셀 저장: 사용자가 테이블 데이터를 CSV나 Excel과 같은 형식으로 내보내는 기능을 제공합니다.
3. 검색: 사용자가 검색어를 입력할 때마다 해당 검색어를 기반으로 제품 데이터를 가져오는 검색 기능을 설정합니다.
4. 품목 추가: 새로운 자동차를 서버에 추가하고, 성공 시 자동으로 업데이트된 자동차 목록을 다시 가져와 보여줍니다.
5. 품목 수정: 자동차 정보를 업데이트하고, 성공 시 자동으로 업데이트된 자동차 목록을 다시 가져와 보여줍니다.
6. 품목 삭제: 사용자의 확인에 따라 자동차 정보를 삭제하고, 삭제 성공 시 자동으로 업데이트된 자동차 목록을 보여줍니다.
7. 로그아웃: 사용자의 확인에 따라 세션 스토리지에서 토큰을 제거하고, 그에 따라 인증 상태를 업데이트하여 사용자를 로그아웃 상태로 만듭니다.

- 고객 정보표시 -

1. 엑셀 저장: 사용자가 테이블 데이터를 CSV나 Excel과 같은 형식으로 내보내는 기능을 제공합니다.
2. 정보 표시: 아이콘 클릭시 information 목록에 저장된 고객 정보가 표시되어 보여집니다.
3. 고객 수정: 고객 정보를 업데이트하고, 성공 시 자동으로 업데이트된 고객 목록을 다시 가져와 보여줍니다.
4. 고객 삭제: 사용자의 확인에 따라 고객 정보를 삭제하고, 삭제 성공 시 자동으로 업데이트된 고객 목록을 보여줍니다.
5. 텍스트필드: 사용자의 이름, 성별, 연락처, 주소를 입력받아 보여줍니다.
6. 취소: 취소 버튼 클릭시 텍스트 필드가 리셋되어 보여줍니다.
7. 저장: 저장 버튼 클릭시 테이블 목록에 저장되어 보여줍니다.

- 검색 화면 -

상태(State) 정의: const [searchTerm, setSearchTerm] = useState('');: 빈 문자열을 초기값으로 가지는 searchTerm 상태를 선언합니다. 이 상태는 자동차 목록을 검색하는 데 사용됩니다.

검색어 입력 필드: 검색어가 변경될 때마다 onChange 핸들러를 통해 setSearchTerm 함수를 호출하여 searchTerm 상태를 업데이트합니다.

- 품목 추가, 수정, 삭제 -

추가 : 상단 추가 버튼 클릭시, 모달창이 열리면서 입력 필드 내용을 받아 새로운 품목을 서버에 추가하고, 성공 시 자동으로 업데이트된 목록을 다시 가져옵니다.

수정 : 수정 아이콘 클릭시, 모달창이 열리면서 입력 필드 내용을 수정하여 정보를 업데이트하고, 성공 시 자동으로 업데이트된 목록을 다시 가져옵니다.

삭제 : 삭제 아이콘 클릭시, 알림창이 표시 사용자의 확인에 따라 정보를 삭제하고, 삭제 성공 시 자동으로 업데이트된 목록을 다시 가져옵니다.

- 로그아웃 화면 -

로그아웃 함수는 사용자의 확인에 따라 세션 스토리지에서 토큰을 제거하고, 그에 따라 인증 상태를 업데이트하여 사용자를 로그아웃 상태로 만듭니다.