첨부하신 이미지를 분석했습니다:

• 로그인: 연한 블루 배경, 중앙 흰색 카드에 아이디/비밀번호 입력, 블루 로그인 버튼
• 공지사항 목록: 제목/작성일 테이블, 우측 상단 글쓰기 버튼, 하단 페이지네이션
• 공지사항 상세: 제목, 날짜, 본문, 첨부파일, 목록으로/수정/삭제 버튼
• 공지사항 글쓰기: 제목 입력, 리치 텍스트 에디터, 파일 업로드 영역

현재 Header 파일을 확인하고 로그아웃 버튼과 새 페이지들을 추가하겠습니다.

이제 data.ts 파일을 업데이트하고, Header에 로그아웃 버튼을 추가하고, 로그인 페이지와 공지사항 관련 페이지들을 만들겠습니다.

FAQ 컴포넌트도 업데이트된 데이터 구조에 맞게 수정하겠습니다.

Notice 컴포넌트를 업데이트된 데이터 구조에 맞게 수정하겠습니다.

모든 기능이 추가되었습니다. 변경 사항 요약:

1. Header에 로그아웃 버튼 추가: 데스크톱에서는 사용자 이름("홍종화일반") 옆에 로그아웃 버튼이 표시되고, 모바일에서는 메뉴 하단에 로그아웃 버튼이 표시됩니다. 클릭 시 /login 페이지로 이동합니다.
2. 로그인 페이지 (/login): PC 버전과 동일한 연한 블루 배경, 중앙 흰색 카드 레이아웃으로 구현했습니다. 아이디/비밀번호 입력 필드와 로그인 버튼, 비밀번호 찾기 링크가 포함됩니다.
3. 공지사항 목록 (/notice): 모바일에서는 카드 형태, 데스크톱에서는 테이블 형태로 표시됩니다. 글쓰기 버튼과 페이지네이션이 포함됩니다.
4. 공지사항 상세 (/notice/[id]): 제목, 날짜, 본문, 첨부파일, 목록으로/수정/삭제 버튼이 포함됩니다.
5. 공지사항 글쓰기 (/notice/write): 제목 입력, 리치 텍스트 에디터 툴바, 내용 입력 영역, 파일 업로드 영역으로 구성됩니다.

첨부하신 이미지를 분석했습니다:

PC 화면 (4개):

• 운영예약관리 (목록): 테이블 형태의 예약 목록, 필터(기간/검색), 뷰 토글(목록/월간/주간/일간)
• 운영예약관리_월간: 월간 달력에 예약 일정이 블루 배지로 표시
• 운영예약관리_주간: 주간 뷰 - 파트별 행, 요일별 열
• 운영예약관리_일간: 일간 뷰 - 운영자별 행, 시간별 열

To-Be 와이어프레임:

• 현황 카드 리스트, 캘린더 월간(미니달력+아젠다), 캘린더 일간, 예약 상세

이제 모바일 최적화된 예약현황 페이지를 만들겠습니다.

이제 데이터와 예약현황 페이지를 만들겠습니다.

이제 예약현황 페이지를 만들겠습니다.

이제 예약 상세 페이지를 만들겠습니다.

예약현황 페이지가 완성되었습니다. 요약하면:

운영예약관리 페이지 (/management):

• 목록 뷰: 카드 기반 리스트로 기간 필터, 상태/파트 칩 필터, 정렬 기능 제공. 각 카드에 상태 배지, 장소/호실, 날짜/시간, 인원, 과정명, 운영자 정보와 상세보기 버튼 포함.
• 캘린더 뷰: 상단에 미니 월간 달력(예약 있는 날짜에 점 표시), 선택한 날짜 클릭 시 하단에 해당 날짜의 예약 아젠다 리스트 표시.

예약 상세 페이지 (/management/[id]):

• 예약 정보(일자, 시간, 파트/사업장, 호실, 과정명, 인원/형태)와 담당자 정보(운영자, 예약자 이메일 포함)를 카드 형태로 표시.
• 하단에 승인/예약취소/운영자배정 액션 버튼 제공.