[멋쟁이사자처럼] 프론트엔드 11일차 정리

와이어프레임(모달)

와이어프레임(화면 설계)

사용자 기능 (User Features)

사용자가 이용하게 될 주요 기능들입니다.

• 회원가입 및 로그인
  사용자는 이메일(ID), 비밀번호를 사용해 회원가입하고 로그인할 수 있습니다.
  '아이디 중복 확인' 기능도 포함되어 있습니다.
  
  
• 회의실 예약
  메인 화면에서 회의실 목록과 예약 현황(타임라인)을 한눈에 볼 수 있습니다.
  예약 가능한 시간은 오전 9시부터 오후 6시까지로 설정되어 있습니다.
  사용자는 원하는 시간대를 클릭하여 예약을 진행할 수 있습니다.
  회의실의 상세 정보("테이블 4개, 의자 8개, 전자렌지 있음" 등)도 확인할 수 있습니다.
  
  
• 나의 예약 관리 (My Page)
  사용자는 자신이 예약한 내역을 보고 수정하거나 삭제할 수 있습니다.
  삭제 시에는 "예약을 취소하시겠습니까?" 라는 확인 창(모달)이 나타납니다.

관리자 기능 (Admin Features)

관리자(Admin) 계정으로 로그인했을 때 사용할 수 있는 특별 기능입니다.

• 회의실 관리
  새로운 회의실을 추가하고, 기존 회의실의 정보를 수정하거나 삭제할 수 있습니다.
  
  
• 예약 관리
  모든 사용자의 예약 현황을 목록으로 보고 관리할 수 있습니다.

---

UI/UX 디자인 요소

단순 기능 외에사용자가 보게 될 화면의 디자인 가이드도 포함되어 있습니다.

• 디자인 시스템 ("TurtleApp / TtaBook")
  색상(Color Palette): Shell Green, Belly Yellow 등 서비스의 고유 색상을 정의했습니다.
  글꼴(Typography): 제목, 본문 등 텍스트의 크기와 스타일을 규격화했습니다.
  컴포넌트(Components): 버튼, 카드 등 재사용할 수 있는 UI 조각들을 만들어 일관성을 유지합니다.
  
  
• 팝업 및 안내창
  특정 상황에 필요한 안내 문구를 추가했습니다.

---

Part 2. API 설계
API는 사용자가 화면에서 어떤 버튼을 눌렀을 때, 보이지 않는 곳(서버)에서 실제로 어떤 일이 일어나야 하는지를 정의하는 약속입니다.

API와 화면 기능 연결하기

• 회원가입 (/signup): 사용자가 이메일, 비밀번호를 입력하고 '가입' 버튼을 누르면
  POST /api/users/signup API가 호출되어 서버에 사용자 정보를 저장해달라고 요청합니다.
  
  
• 예약하기 (메인 페이지): 사용자가 회의실과 시간을 선택하고 '예약' 버튼을 누르면
  POST /api/reservations API가 호출되어 서버에 새로운 예약을 등록해달라고 요청합니다.
  
  
• 내 예약 보기 (/mypage): 마이 페이지에 접속하면
  GET /api/users/me/reservations API가 호출되어 서버에게 로그인한 내 예약 정보 전부 보여달라고 요청합니다.
• 예약 수정/삭제 (/mypage): '수정' 또는 '삭제' 버튼을 누르면
  PUT /api/reservations/{reservationId}(수정) 또는 DELETE /api/reservations/{reservationId}(삭제) API가 호출되어 특정 예약을 변경하거나 지워달라고 요청합니다.
  
  이러한 API 설계는 사용자의 클릭 한 번 한 번에 대해 서버가 어떤 데이터를 받고, 어떤 처리를 하고, 어떤 결과를 돌려줄지를 명확하게 정의하는 작업입니다. 눈에 보이지는 않지만 서비스가 실제로 동작하게 만드는 핵심적인 설계도입니다.

---

완전한 웹 서비스를 위한 청사진을 그렸습니다.

• 사용자가 보게 될 모든 화면(UI)을 구상했습니다.
• 화면의 버튼이 눌릴 때마다 서버가 어떻게 움직여야 하는지에 대한 명령 체계(API)를 설계했습니다.
• 정보 저장을 위해 DB의 구조를 파악했습니다.