[Feature] 공유 일정 UI 구현

src/features/Calendar/components/CustomCalendar/CalendarModals.tsx

@@ -18,6 +18,7 @@ type CalendarModalsProps = {
   eventActions: {
     onEventColorChange: (eventId: CalendarEvent['id'], color: CalendarEvent['color']) => void
     onEventTitleConfirm: (eventId: CalendarEvent['id'], title: CalendarEvent['title']) => void
+    onEventSharedChange: (eventId: CalendarEvent['id'], isShared: boolean) => void
     onEventTypeChange: (eventId: CalendarEvent['id'], type: 'todo' | 'schedule') => void
     onEventTimingChange: (
       eventId: CalendarEvent['id'],
@@ -91,6 +92,7 @@ const DraftBackedModal = ({
       onDraftChange={setDraftValues}
       onEventColorChange={eventActions.onEventColorChange}
       onEventTitleConfirm={eventActions.onEventTitleConfirm}
+      onEventSharedChange={eventActions.onEventSharedChange}
       onEventTypeChange={eventActions.onEventTypeChange}
       onEventTimingChange={eventActions.onEventTimingChange}
     />

src/features/Calendar/components/CustomCalendar/CustomCalendar.tsx

@@ -100,6 +100,7 @@ const CustomCalendar = ({ onSelectedDateChange }: CustomCalendarProps) => {
     updateEventTiming,
     updateEventType,
     updateEventTitle,
+    updateEventShared,
     toggleEventDone,
     removeEvent,
   } = useCalendarEvents({ initialEvents: apiEvents })
@@ -494,10 +495,11 @@ const CustomCalendar = ({ onSelectedDateChange }: CustomCalendarProps) => {
     () => ({
       onEventColorChange: updateEventColor,
       onEventTitleConfirm: updateEventTitle,
+      onEventSharedChange: updateEventShared,
       onEventTypeChange: updateEventType,
       onEventTimingChange: updateEventTiming,
     }),
-    [updateEventColor, updateEventTitle, updateEventType, updateEventTiming],
+    [updateEventColor, updateEventShared, updateEventTitle, updateEventType, updateEventTiming],
   )
   useEffect(() => {
     onSelectedDateChange?.(selectedDate ?? date)

src/features/Calendar/components/CustomEvent/CustomEvent.style.ts

@@ -98,7 +98,7 @@ export const WeekEventContainer = styled.div<{
 export const EventTitle = styled.div`
   font-weight: 400;
   font-size: 12px;
-  width: 38px;
+  width: 75px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/features/Calendar/components/CustomEvent/CustomMonthEvent.tsx

@@ -3,6 +3,8 @@ import { type MouseEvent, useRef, useState } from 'react'
 import type { EventProps } from 'react-big-calendar'
 import { createPortal } from 'react-dom'
 
+import People from '@/assets/icons/people.svg?react'
+
 import { getColorPalette } from '../../utils/colorPalette'
 import type { CalendarEvent } from '../CustomView/CustomDayView'
 import * as S from './CustomEvent.style'
@@ -116,6 +118,14 @@ const CustomMonthEvent = ({
               onToggleTodo?.(event.id)
             }}
           />
+        ) : event.isShared ? (
+          <People
+            aria-hidden="true"
+            focusable="false"
+            width={10}
+            height={12}
+            color={pointColor ?? 'transparent'}
+          />
         ) : (
           <S.Circle backgroundColor={pointColor} />
         )}

src/features/Calendar/components/CustomEvent/CustomWeekEvent.tsx

@@ -2,6 +2,8 @@ import moment from 'moment'
 import React, { type MouseEvent, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
+import People from '@/assets/icons/people.svg?react'
+
 import { getColorPalette } from '../../utils/colorPalette'
 import type { CalendarEvent } from '../CustomView/CustomDayView'
 import * as S from './CustomEvent.style'
@@ -117,6 +119,14 @@ const CustomWeekEvent: React.FC<CustomWeekEventProps> = ({
               onToggleTodo?.(event.id)
             }}
           />
+        ) : event.isShared ? (
+          <People
+            aria-hidden="true"
+            focusable="false"
+            width={10}
+            height={12}
+            color={pointColor ?? 'transparent'}
+          />
         ) : (
           <S.Circle backgroundColor={pointColor} />
         )}

src/features/Calendar/components/CustomView/CustomWeekView.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import type { NavigateAction, ViewStatic } from 'react-big-calendar'
 import type { EventInteractionArgs } from 'react-big-calendar/lib/addons/dragAndDrop'
 
+import People from '@/assets/icons/people.svg?react'
 import { getColorPalette } from '@/features/Calendar/utils/colorPalette'
 import {
   compareByStart,
@@ -286,6 +287,14 @@ const CustomWeekView: React.ComponentType<WeekProps> & ViewStatic = (({
                       onToggleTodo?.(segment.event.id)
                     }}
                   />
+                ) : segment.event.isShared ? (
+                  <People
+                    aria-hidden="true"
+                    focusable="false"
+                    width={10}
+                    height={12}
+                    color={palette.point ?? 'transparent'}
+                  />
                 ) : (
                   <S.EventDot $color={palette.point} />
                 )}
@@ -346,6 +355,14 @@ const CustomWeekView: React.ComponentType<WeekProps> & ViewStatic = (({
                         onToggleTodo?.(event.id)
                       }}
                     />
+                  ) : event.isShared ? (
+                    <People
+                      aria-hidden="true"
+                      focusable="false"
+                      width={10}
+                      height={12}
+                      color={palette.point ?? 'transparent'}
+                    />
                   ) : (
                     <S.EventDot $color={palette.point} />
                   )}

src/features/Calendar/components/CustomView/dayView/renderers.tsx

@@ -1,6 +1,8 @@
 import moment from 'moment'
 import type { MutableRefObject, Ref } from 'react'
 
+import People from '@/assets/icons/people.svg?react'
+
 import type { CalendarEvent } from '../../../../../shared/types/calendar/types'
 import { TIMED_SLOT_CONFIG } from '../../../domain/constants'
 import { getColorPalette } from '../../../utils/colorPalette'
@@ -79,6 +81,14 @@ export const renderAllDayEventBadges = (
               onToggleTodo?.(event.id)
             }}
           />
+        ) : event.isShared ? (
+          <People
+            aria-hidden="true"
+            focusable="false"
+            width={10}
+            height={12}
+            color={palette.point ?? 'transparent'}
+          />
         ) : (
           <S.Circle backgroundColor={palette.point} />
         )}
@@ -236,6 +246,14 @@ export const renderTimeOverlayColumn = ({
                         onToggleTodo?.(event.id)
                       }}
                     />
+                  ) : event.isShared ? (
+                    <People
+                      aria-hidden="true"
+                      focusable="false"
+                      width={10}
+                      height={12}
+                      color={palette.point ?? 'transparent'}
+                    />
                   ) : (
                     <S.Circle backgroundColor={palette.point} />
                   )}

src/features/Calendar/hooks/useCalendarEvents.ts

@@ -135,6 +135,12 @@ export const useCalendarEvents = (options: UseCalendarEventsOptions = {}) => {
     [],
   )
 
+  const updateEventShared = useCallback((eventId: CalendarEvent['id'], isShared: boolean) => {
+    setEvents((prev) =>
+      prev.map((event) => (event.id === eventId ? { ...event, isShared } : event)),
+    )
+  }, [])
+
   // 서버 응답 후 임시 이벤트 id를 실제 id로 교체
   const updateEventId = useCallback((tempId: CalendarEvent['id'], nextId: CalendarEvent['id']) => {
     setEvents((prev) =>
@@ -171,6 +177,7 @@ export const useCalendarEvents = (options: UseCalendarEventsOptions = {}) => {
     updateEventTiming,
     updateEventType,
     updateEventTitle,
+    updateEventShared,
     updateEventId,
     toggleEventDone,
     removeEvent,

src/shared/constants/scheduleShareFriend.ts

@@ -0,0 +1,12 @@
+import type { ScheduleShareFriend } from '@/shared/types/schedule/shareFriend'
+
+// TODO: 친구 목록 API 연동 필요
+export const MOCK_SCHEDULE_SHARE_FRIENDS: ScheduleShareFriend[] = [
+  { userName: '김철수', userId: '1', email: 'asdf@asdf.com' },
+  { userName: '김철수', userId: '5', email: 'asdf@asdf.com' },
+  { userName: '김철수', userId: '6', email: 'asdf@asdf.com' },
+  { userName: '김철수', userId: '7', email: 'asdf@asdf.com' },
+  { userName: '이영희', userId: '2', email: 'asdf@asdf.com' },
+  { userName: '박민수', userId: '3', email: 'asdf@asdf.com' },
+  { userName: '최지우', userId: '4', email: 'asdf@asdf.com' },
+]

src/shared/hooks/addSchedule/useScheduleFooter.tsx

@@ -8,7 +8,7 @@ import type { CalendarEvent } from '@/shared/types/calendar/types'
 import type { EventColorType, ScheduleEditorFormValues } from '@/shared/types/event/event'
 import type { RecurrenceEventScope } from '@/shared/types/recurrence/recurrence'
 import type { RepeatConfig } from '@/shared/types/recurrence/repeat'
-import SelectColor from '@/shared/ui/common/SelectColor/SelectColor'
+import SelectColor from '@/shared/ui/scheduleTodo/SelectColor/SelectColor'
 
 type UseScheduleFooterProps = {
   repeatConfig: RepeatConfig

src/shared/hooks/addTodo/useTodoFooter.tsx

@@ -6,7 +6,7 @@ import type { CalendarEvent } from '@/shared/types/calendar/types'
 import type { EventColorType } from '@/shared/types/event/event'
 import type { TodoEditorFormProps } from '@/shared/types/modal/todoEditor'
 import type { RepeatConfig } from '@/shared/types/recurrence/repeat'
-import SelectColor from '@/shared/ui/common/SelectColor/SelectColor'
+import SelectColor from '@/shared/ui/scheduleTodo/SelectColor/SelectColor'
 
 type UseTodoFooterProps = {
   repeatConfig: RepeatConfig

src/shared/styles/theme.ts

@@ -8,7 +8,10 @@ export const colors = {
   textColor3: '#757575', // --Text-Color-3
   inputColor: '#F7F7F7',
   red: '#E94B43', // --Red
-
+  share: {
+    base: '#ECEBFF',
+    point: '#594FCA',
+  },
   white: '#FDFDFD', // 메뉴 탭
   background: '#FAFAFA', // 전체 바탕
   black: '#111827', // 모든 블랙 대체

src/shared/types/calendar/types.ts

@@ -14,6 +14,7 @@ export type Event = {
   isAllDay: boolean
   color: EventColorType
   recurrenceGroup: RecurrenceGroup | null
+  isShared?: boolean
 }
 
 export type CalendarEvent = Omit<Event, 'start' | 'end'> & {

src/shared/types/modal/itemEditor.ts

@@ -1,5 +1,7 @@
 import type { EventColorType, RepeatConfigSchema } from '@/shared/types/event/event'
 
+export type ItemType = 'todo' | 'schedule'
+
 export type ItemEditorDraft = {
   title: string
   description: string

src/shared/types/modal/scheduleEditor.ts

@@ -14,10 +14,12 @@ export type ScheduleEditorFormProps = {
   eventId: CalendarEvent['id']
   onClose: () => void
   isEditing?: boolean
+  isShared?: boolean
   headerTitlePortalTarget?: HTMLElement | null
   initialEvent?: CalendarEvent | null
   onEventColorChange?: (eventId: CalendarEvent['id'], color: EventColorType) => void
   onEventTitleConfirm?: (eventId: CalendarEvent['id'], title: string) => void
+  onSharedChange?: (isShared: boolean) => void
   onEventTimingChange?: (
     eventId: CalendarEvent['id'],
     start: Date,

src/shared/types/schedule/shareFriend.ts

@@ -0,0 +1,5 @@
+export type ScheduleShareFriend = {
+  userName: string
+  userId: string
+  email: string
+}

src/shared/types/schedule/types.ts

@@ -0,0 +1,46 @@
+export type PlaceResult = kakao.maps.services.PlacesSearchResultItem
+
+export type PlaceMarker = {
+  id: string
+  placeName: string
+  position: {
+    lat: number
+    lng: number
+  }
+}
+
+export type SearchPlaceSelectionOptions = {
+  closeAfterSelect?: boolean
+  address?: string | null
+}
+
+export type SearchPlaceProps = {
+  selectedLocation?: string
+  onSelectLocation: (location: string, options?: SearchPlaceSelectionOptions) => void
+}
+
+export type SearchState = 'idle' | 'loading' | 'success' | 'zero' | 'error'
+export type ResultsView = 'hidden' | 'inline' | 'expanded'
+
+export type SearchPlacePanelProps = {
+  panelTitle: string
+  panelCaption: string | null
+  panelMessage: string
+  panelPlaces: PlaceResult[]
+  recentSearches: string[]
+  selectedPlaceId: string | null
+  shouldShowRecentSearches: boolean
+  showExpandedResults: boolean
+  showPreviewResults: boolean
+  onRecentSearchClick: (value: string) => void
+  onRemoveRecentSearch: (value: string) => void
+  onSelectPlace: (place: PlaceResult) => void
+}
+
+export type UseSearchPlaceParams = Pick<
+  SearchPlaceProps,
+  'onSelectLocation' | 'selectedLocation'
+> & {
+  isKakaoLoading: boolean
+  kakaoAppKey: string
+}

src/shared/types/scheduleTodo/titleSuggestionInput.ts

@@ -0,0 +1,29 @@
+import type {
+  FieldValues,
+  Path,
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from 'react-hook-form'
+
+export type TitleSuggestionInputFormController<TFieldValues extends FieldValues> = {
+  register: UseFormRegister<TFieldValues>
+  watch: UseFormWatch<TFieldValues>
+  setValue: UseFormSetValue<TFieldValues>
+}
+
+export type TitleSuggestionInputProps<TFieldValues extends FieldValues> = {
+  fieldName: Path<TFieldValues>
+  placeholder?: string
+  suggestions?: string[]
+  autoFocus?: boolean
+  formController?: TitleSuggestionInputFormController<TFieldValues>
+  inputColor?: string
+  onConfirm?: (value: string) => void
+  onLiveChange?: (value: string) => void
+}
+
+export type HighlightedSegment = {
+  text: string
+  highlight?: boolean
+}