[Feature] 공유 일정 UI 구현

[yeonjin719]

🔗 관련 이슈

• closes ✨ [Feature] 공유 일정 필드 추가 #95
• 참고: ✨ [Feature] 공유 일정 필드 추가 #95

---

🧩 작업 요약 (TL;DR)

• 공유 일정 검색 UI와 공유 상태 표시 로직을 정리하고, 캘린더에서 공유 일정을 사람 아이콘으로 표시하도록 개선

---

🔄 변경 유형

• ✨ Feature
• 🐞 Bug Fix
• 🔨 Refactor (기능 변화 없음)
• 🎨 UI / UX
• ⚙️ Setting / Infra
• 🧪 Test
• 📄 Docs

---

📌 주요 변경 사항

• SearchFriend / TitleSuggestionInput 내부 타입, 유틸, 목 데이터를 FSD 구조에 맞게 분리
• 검색 결과가 없을 때 SearchFriend 결과 포탈이 렌더링되지 않도록 처리
• 공유 일정 선택 시 모달 제목 색상을 공유 컬러로 표시
• 공유 일정 상태를 캘린더 이벤트 상태에 반영할 수 있도록 isShared 필드 및 상태 업데이트 흐름 추가
• 월간 / 주간 / 일간 캘린더에서 공유 일정은 기존 동그라미 대신 people.svg 아이콘으로 표시
• people.svg가 기존 일정 포인트 컬러를 그대로 따르도록 currentColor 기반으로 수정
• ItemEditorModal의 draft / registry / type sync 책임을 훅으로 분리

---

🖼️ 스크린샷 / 영상 (선택)

---

🧠 리뷰 요청 포인트

• 로직 설계
• 상태 관리 방식
• 네이밍
• 성능 / 렌더링
• 기타: FSD 기준 파일 위치 및 import 방향

---

⚠️ 체크리스트 (PR 올리기 전)

• 로컬에서 정상 동작 확인
• 기존 기능에 영향 없음
• 불필요한 console.log 제거
• 린트 / 타입 에러 없음
• 관련 이슈 연결 완료

---

🚧 미완 / 후속 작업

• 실제 친구 목록 / 공유 일정 API 연동 시 현재 목 데이터와 isShared 연결 로직을 서버 응답 기준으로 교체 필요

---

💬 기타 참고 사항

@copilot 이 PR을 아래 기준으로 검토해주세요:

.github/instructions/capstone.instructions.md 파일을 지침으로 삼으세요.

• 폴더/파일 위치가 프로젝트 구조 규칙과 일치하는지
• 컴포넌트가 단일 책임 원칙(SRP)을 지키는지
• import 방향이 올바른지 (shared → features 역방향 없음)
• 명명/케이스가 일관적인지 (PascalCase vs camelCase)
• 배럴(index.ts) 사용이 현 패턴을 따르는지

응답은 한국어로, 발견된 위반 항목과 추천 구조를 포함해주세요.

[Copilot]

Pull request overview

한 줄 요약

공유 일정 선택 UI와 isShared 상태 흐름을 에디터→캘린더 이벤트까지 연결하고 표시를 people 아이콘으로 통일했지만, TS 빌드 오류(React 타입 네임스페이스) 및 접근성/alias import 규칙 위반이 있어 수정이 필요합니다.

목적 요약

Issue #95 범위에 맞춰 “일정 공유”를 UI에서 선택/표시할 수 있도록 하고, 해당 공유 상태가 캘린더 이벤트 렌더링(월/주/일)에도 반영되도록 코드 구조를 정리합니다.

Changes:

• 공유 일정 선택 UI(ShareSchedulePanel/SearchFriend) 추가 및 isShared를 이벤트 상태에 반영하는 업데이트 함수/콜백 흐름 추가
• 월/주/일 캘린더에서 공유 일정 표시를 기존 dot 대신 people.svg(currentColor) 아이콘으로 변경
• 장소 검색/반복/색상 선택/에디터 모달 로직을 재배치·분리(훅 추출, 타입/유틸 분리, 공용 컴포넌트 경로 정리)

---

발견된 위반 항목

• src/shared/ui/calendar/CustomTimePicker/CustomTimePicker.tsx: 모듈에서 React.ChangeEvent 사용 시 React 네임스페이스 미-import로 TypeScript 컴파일 에러 가능
• src/shared/ui/scheduleTodo/SearchPlace/SearchPlace.tsx, src/shared/utils/useSearchPlacePanelModel.ts: @/ alias를 쓰는 코드베이스 흐름과 달리 상대경로 import 혼재
• src/shared/ui/calendar/CustomDatePicker/CustomDatePicker.tsx: SVG에 직접 클릭 이벤트를 달아 키보드 조작/포커스 불가(접근성 이슈)
• src/shared/ui/scheduleTodo/SelectColor/SelectColor.tsx: div 기반 클릭 UI로 ARIA/키보드 접근성 부족

---

추천 구조

src/shared/ui/scheduleTodo/SearchPlace/SearchPlace.tsx
  - useSearchPlace import를 "@/shared/utils/useSearchPlace"로 통일

src/shared/utils/useSearchPlacePanelModel.ts
  - types import를 "@/shared/types/schedule/types"로 통일

src/shared/ui/calendar/CustomDatePicker/CustomDatePicker.tsx
  - 월 이동 컨트롤: <button> 기반(aria-label 포함)으로 래핑/교체

src/shared/ui/scheduleTodo/SelectColor/*
  - 트리거/옵션: button 또는 listbox 패턴(aria-expanded 등)으로 전환

---

최소 리팩토링 단계

1. CustomTimePicker에서 React.ChangeEvent 타입 import 방식 수정(빌드 차단 이슈 우선)
2. SearchPlace, useSearchPlacePanelModel의 상대경로 import를 @/ alias로 통일
3. CustomDatePicker의 화살표 컨트롤을 버튼 시맨틱으로 변경 + aria-label 추가
4. SelectColor 드롭다운을 키보드/스크린리더 대응 구조로 개선(button/listbox 등)
5. (선택) 접근성 변경 후 클릭/포커스/닫힘 동작(ESC/밖 클릭) 회귀 확인

---

Reviewed changes

Copilot reviewed 60 out of 74 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/shared/utils/useSearchPlacePanelModel.ts	장소 검색 패널 상태(타이틀/캡션/메시지) 모델링 훅 추가
src/shared/utils/useSearchPlace.ts	카카오 장소 검색 전체 훅(최근검색/패널모델/검색상태) 구성
src/shared/utils/useRecentPlaceSearches.ts	최근 검색어 저장/삭제 훅 분리
src/shared/utils/usePlaceSearch.ts	카카오 검색 요청/취소/상태를 reducer로 캡슐화
src/shared/utils/useEditorTypeSync.ts	ItemEditor의 타입/시간 동기화 로직을 훅으로 분리(+공유 상태 보조)
src/shared/utils/useEditorRegistry.ts	footer/delete/close-guard 레지스트리 로직 훅 분리
src/shared/utils/useEditorDraft.ts	draft 외부/내부 상태 동기화 훅 분리
src/shared/utils/titleSuggestionInput.ts	제목 자동완성 하이라이트 유틸 분리
src/shared/utils/searchPlace.ts	SearchPlace 타입 import 경로를 shared types로 통합
src/shared/utils/scheduleShareFriend.ts	공유 친구 필터링 유틸 추가
src/shared/utils/domVisibility.ts	포탈 UI 위치 계산을 위한 요소 가시성 유틸 추가
src/shared/ui/scheduleTodo/TitleSuggestionInput/TitleSuggestionInput.tsx	타입/유틸 분리 및 공유 시 input 색상 지원 추가
src/shared/ui/scheduleTodo/TitleSuggestionInput/TitleSuggestionInput.style.ts	입력 색상 prop 지원 추가
src/shared/ui/scheduleTodo/TerminationPanel/TerminationPanel.tsx	DatePicker 경로 이동 및 반복 횟수 입력 상한 추가
src/shared/ui/scheduleTodo/TerminationPanel/TerminationPanel.style.ts	입력 width 조정
src/shared/ui/scheduleTodo/SelectColor/SelectColor.tsx	컬러 드롭다운 컴포넌트 신규 추가(에디터 footer에서 사용)
src/shared/ui/scheduleTodo/SelectColor/SelectColor.style.ts	SelectColor 스타일 추가
src/shared/ui/scheduleTodo/SearchPlace/SearchPlacePanel.tsx	SearchPlacePanel 타입/유틸/RecentSearch 경로 정리
src/shared/ui/scheduleTodo/SearchPlace/SearchPlace.tsx	SearchPlace를 scheduleTodo 영역으로 이동 및 훅 사용 방식 변경
src/shared/ui/scheduleTodo/SearchPlace/SearchPlace.style.ts	SearchPlace 신규 스타일 구성
src/shared/ui/scheduleTodo/SearchFriend/SearchFriend.tsx	공유 친구 검색/선택 포탈 UI 신규 추가
src/shared/ui/scheduleTodo/SearchFriend/SearchFriend.style.ts	SearchFriend 스타일 추가
src/shared/ui/scheduleTodo/RepeatTypeGroup/RepeatTypeGroup.tsx	반복 상세 토글 버튼/상태 props 추가
src/shared/ui/scheduleTodo/RepeatTypeGroup/RepeatTypeGroup.style.ts	토글 버튼 스타일/반응형 동작 수정
src/shared/ui/scheduleTodo/RepeatPanel/YearlyRepeatPanel.tsx	yearly 커스텀 반복 패널 신규
src/shared/ui/scheduleTodo/RepeatPanel/WeeklyRepeatPanel.tsx	주간 반복 UI 문구(요일 지정) 추가
src/shared/ui/scheduleTodo/RepeatPanel/RepeatPanel.style.ts	반복 패널 입력/칩 UI 스타일 조정
src/shared/ui/scheduleTodo/RepeatPanel/MonthlyRepeatPanel.tsx	monthly 커스텀 반복 패널 신규
src/shared/ui/scheduleTodo/RepeatPanel/index.ts	RepeatPanel 배럴 export 추가
src/shared/ui/scheduleTodo/RepeatPanel/DailyRepeatPanel.tsx	daily 커스텀 반복 패널 신규
src/shared/ui/scheduleTodo/RecentSearch/RecentSearch.tsx	최근검색 item 컴포넌트 신규(삭제 버튼 포함)
src/shared/ui/scheduleTodo/RecentSearch/RecentSearch.style.ts	RecentSearch 스타일 추가
src/shared/ui/Modals/TodoEditor/TodoTitleField.tsx	TitleSuggestionInput 경로를 scheduleTodo로 변경
src/shared/ui/Modals/TodoEditor/TodoRepeatSection.tsx	반복 상세 패널 토글 UX로 변경 및 컴포넌트 경로 정리
src/shared/ui/Modals/TodoEditor/TodoDateTimeSection.tsx	Date/TimePicker 경로를 calendar로 이동
src/shared/ui/Modals/TodoEditor/index.style.ts	섹션 레이아웃 마진 조정
src/shared/ui/Modals/ScheduleEditor/ShareSchedulePanel.tsx	공유 일정 섹션(UI+선택 친구 목록) 신규 추가
src/shared/ui/Modals/ScheduleEditor/ScheduleTitleField.tsx	공유 일정일 때 제목 색상 변경 지원
src/shared/ui/Modals/ScheduleEditor/ScheduleRepeatSection.tsx	반복 상세 패널 토글 UX로 변경 및 컴포넌트 경로 정리
src/shared/ui/Modals/ScheduleEditor/ScheduleEditorFields.tsx	공유 일정 패널 삽입 및 isShared/onSharedChange 전달
src/shared/ui/Modals/ScheduleEditor/ScheduleEditorContent.tsx	isShared/onSharedChange 플로우 연결
src/shared/ui/Modals/ScheduleEditor/ScheduleDetailsSection.tsx	SearchPlace 경로를 scheduleTodo로 변경
src/shared/ui/Modals/ScheduleEditor/ScheduleDateTimeSection.tsx	Date/TimePicker 경로를 calendar로 이동
src/shared/ui/Modals/ScheduleEditor/index.style.ts	공유 섹션 스타일 추가 및 기존 섹션 padding/gap 조정
src/shared/ui/Modals/ItemEditorModal/index.tsx	draft/registry/typeSync 책임을 훅으로 분리 + 공유 상태/라벨 반영
src/shared/ui/Modals/ItemEditorModal/EditorModalLayout.tsx	submit 버튼 라벨 표시 prop 추가
src/shared/ui/Modals/ItemEditorModal/EditorModalLayout.style.ts	모달 스크롤/푸터/버튼 레이아웃 조정
src/shared/ui/common/SearchPlace/useSearchPlace.ts	기존 SearchPlace 훅 제거(새 shared/utils 훅으로 대체)
src/shared/ui/common/SearchPlace/SearchPlace.types.ts	기존 SearchPlace 타입 제거(shared types로 이동)
src/shared/ui/common/Checkbox/Checkbox.style.tsx	체크박스 미체크 상태 UI(테두리/배경) 수정
src/shared/ui/calendar/CustomTimePicker/CustomTimePicker.tsx	직접 입력형 TimePicker 신규 추가
src/shared/ui/calendar/CustomTimePicker/CustomTimePicker.style.ts	CustomTimePicker 스타일 추가
src/shared/ui/calendar/CustomDatePicker/CustomDatePicker.tsx	커스텀 캘린더 DatePicker 신규 추가
src/shared/ui/calendar/CustomDatePicker/CustomDatePicker.style.ts	CustomDatePicker 스타일 추가
src/shared/ui/calendar/CustomBasisPanel/CustomBasisPanel.tsx	RepeatPanel import 경로를 scheduleTodo로 변경
src/shared/types/scheduleTodo/titleSuggestionInput.ts	TitleSuggestionInput props/타입을 shared types로 분리
src/shared/types/schedule/types.ts	SearchPlace 관련 타입을 shared types로 승격
src/shared/types/schedule/shareFriend.ts	공유 친구 타입 추가
src/shared/types/modal/scheduleEditor.ts	ScheduleEditorFormProps에 isShared/onSharedChange 추가
src/shared/types/modal/itemEditor.ts	ItemType 타입을 shared/types로 이동(재사용)
src/shared/types/calendar/types.ts	Calendar Event에 isShared(optional) 필드 추가
src/shared/styles/theme.ts	공유 일정 색상(theme.colors.share) 추가
src/shared/hooks/addTodo/useTodoFooter.tsx	SelectColor 경로를 scheduleTodo로 변경
src/shared/hooks/addSchedule/useScheduleFooter.tsx	SelectColor 경로를 scheduleTodo로 변경
src/shared/constants/scheduleShareFriend.ts	공유 친구 목 데이터 상수 추가
src/features/Calendar/hooks/useCalendarEvents.ts	이벤트 isShared 업데이트 함수 추가
src/features/Calendar/components/CustomView/dayView/renderers.tsx	공유 일정 표시를 people 아이콘으로 렌더링
src/features/Calendar/components/CustomView/CustomWeekView.tsx	공유 일정 표시를 people 아이콘으로 렌더링
src/features/Calendar/components/CustomEvent/CustomWeekEvent.tsx	공유 일정 표시를 people 아이콘으로 렌더링
src/features/Calendar/components/CustomEvent/CustomMonthEvent.tsx	공유 일정 표시를 people 아이콘으로 렌더링
src/features/Calendar/components/CustomEvent/CustomEvent.style.ts	주간 이벤트 타이틀 width 확장
src/features/Calendar/components/CustomCalendar/CustomCalendar.tsx	eventActions에 shared 업데이트 콜백 연결
src/features/Calendar/components/CustomCalendar/CalendarModals.tsx	ItemEditorModal에 onEventSharedChange 전달
src/assets/icons/people.svg	공유 일정 표시용 아이콘 추가(currentColor 적용)

Comments suppressed due to low confidence (1)

src/shared/ui/scheduleTodo/SearchPlace/SearchPlace.tsx:9

• useSearchPlace를 ../../../utils/useSearchPlace로 상대경로 import 하고 있는데, 이 레포는 @/ 경로 별칭을 광범위하게 사용하고 있어(예: 같은 파일의 다른 import들) 경로 일관성이 깨지고 이동/리팩토링에 취약해집니다. @/shared/utils/useSearchPlace 형태로 alias 기반 import로 통일해주세요.