diff --git a/apps/what-today/src/components/experiences/DescriptionTextarea.tsx b/apps/what-today/src/components/experiences/DescriptionTextarea.tsx
index 5ccb7d72..24b20f3c 100644
--- a/apps/what-today/src/components/experiences/DescriptionTextarea.tsx
+++ b/apps/what-today/src/components/experiences/DescriptionTextarea.tsx
@@ -8,7 +8,7 @@ function DescriptionTextarea({ error, ...props }: InputProps) {
     <Input.Root className='w-full' error={error}>
       <Input.Label>설명</Input.Label>
       <Input.Wrapper>
-        <Input.Textarea autoHeight className='min-h-100' placeholder='체험에 대한 설명을 입력해 주세요.' {...props} />
+        <Input.Textarea autoHeight className='min-h-300' placeholder='체험에 대한 설명을 입력해 주세요.' {...props} />
       </Input.Wrapper>
       <Input.ErrorMessage />
     </Input.Root>
diff --git a/apps/what-today/src/components/experiences/RecurringScheduleModal.tsx b/apps/what-today/src/components/experiences/RecurringScheduleModal.tsx
new file mode 100644
index 00000000..2f6181d5
--- /dev/null
+++ b/apps/what-today/src/components/experiences/RecurringScheduleModal.tsx
@@ -0,0 +1,255 @@
+import { Button, DatePicker, Popover, TimePicker, useToast } from '@what-today/design-system';
+import type { Dayjs } from 'dayjs';
+import { useState } from 'react';
+
+interface Time {
+  hour: string;
+  minute: string;
+}
+
+export interface Schedule {
+  date?: Dayjs | null;
+  startTime?: Time | null;
+  endTime?: Time | null;
+}
+
+interface RecurringScheduleModalProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSchedulesGenerated: (schedules: Schedule[]) => void;
+}
+
+function timeToMinutes(time: { hour: string; minute: string } | null): number {
+  if (!time) return -1;
+  return parseInt(time.hour, 10) * 60 + parseInt(time.minute, 10);
+}
+
+export default function RecurringScheduleModal({
+  isOpen,
+  onOpenChange,
+  onSchedulesGenerated,
+}: RecurringScheduleModalProps) {
+  const { toast } = useToast();
+  const [selectedDays, setSelectedDays] = useState<number[]>([]);
+  const [startTime, setStartTime] = useState<Time | null>(null);
+  const [endTime, setEndTime] = useState<Time | null>(null);
+  const [startDate, setStartDate] = useState<Dayjs | null>(null);
+  const [endDate, setEndDate] = useState<Dayjs | null>(null);
+
+  const resetForm = () => {
+    setSelectedDays([]);
+    setStartTime(null);
+    setEndTime(null);
+    setStartDate(null);
+    setEndDate(null);
+  };
+
+  const handlePopoverChange = (open: boolean) => {
+    onOpenChange(open);
+
+    // 팝오버가 닫힐 때 폼 초기화
+    if (!open) {
+      resetForm();
+    }
+  };
+
+  const weekdays = [
+    { value: 1, label: '월' },
+    { value: 2, label: '화' },
+    { value: 3, label: '수' },
+    { value: 4, label: '목' },
+    { value: 5, label: '금' },
+    { value: 6, label: '토' },
+    { value: 0, label: '일' },
+  ];
+
+  const toggleDay = (dayValue: number) => {
+    setSelectedDays((prev) => (prev.includes(dayValue) ? prev.filter((d) => d !== dayValue) : [...prev, dayValue]));
+  };
+
+  const handleStartDateChange = (date: Dayjs | null) => {
+    setStartDate(date);
+
+    // 시작 날짜가 설정되고 종료 날짜가 있을 때 검증
+    if (date && endDate) {
+      if (date.isAfter(endDate, 'day')) {
+        toast({
+          title: '날짜 설정 오류',
+          description: '시작 날짜는 종료 날짜보다 빨라야 합니다.',
+          type: 'error',
+        });
+        setEndDate(null); // 종료 날짜 초기화
+      }
+    }
+  };
+
+  const handleEndDateChange = (date: Dayjs | null) => {
+    // 종료 날짜가 설정되고 시작 날짜가 있을 때 검증
+    if (date && startDate) {
+      if (startDate.isAfter(date, 'day')) {
+        toast({
+          title: '날짜 설정 오류',
+          description: '종료 날짜는 시작 날짜보다 늦어야 합니다.',
+          type: 'error',
+        });
+        return; // 변경사항 적용하지 않음
+      }
+    }
+
+    setEndDate(date);
+  };
+
+  const handleStartTimeChange = (time: Time | null) => {
+    setStartTime(time);
+
+    // 시작 시간이 설정되고 종료 시간이 있을 때 검증
+    if (time && endTime) {
+      const startMinutes = timeToMinutes(time);
+      const endMinutes = timeToMinutes(endTime);
+
+      if (startMinutes >= endMinutes) {
+        toast({
+          title: '시간 설정 오류',
+          description: '시작 시간은 종료 시간보다 빨라야 합니다.',
+          type: 'error',
+        });
+        setEndTime(null); // 종료 시간 초기화
+      }
+    }
+  };
+
+  const handleEndTimeChange = (time: Time | null) => {
+    // 종료 시간이 설정되고 시작 시간이 있을 때 검증
+    if (time && startTime) {
+      const startMinutes = timeToMinutes(startTime);
+      const endMinutes = timeToMinutes(time);
+
+      if (startMinutes >= endMinutes) {
+        toast({
+          title: '시간 설정 오류',
+          description: '종료 시간은 시작 시간보다 늦어야 합니다.',
+          type: 'error',
+        });
+        return; // 변경사항 적용하지 않음
+      }
+    }
+
+    setEndTime(time);
+  };
+
+  const generateSchedules = () => {
+    if (!startTime || !endTime || !startDate || !endDate || selectedDays.length === 0) {
+      toast({
+        title: '입력 오류',
+        description: '모든 필드를 입력해주세요.',
+        type: 'error',
+      });
+      return;
+    }
+
+    const newSchedules: Schedule[] = [];
+    let current = startDate.clone();
+    let loopCount = 0;
+
+    while (current.isBefore(endDate) || current.isSame(endDate, 'day')) {
+      loopCount++;
+
+      // 무한루프 방지
+      if (loopCount > 1000) {
+        console.error('무한루프 감지! 중단합니다.');
+        break;
+      }
+
+      const currentDayOfWeek = current.day();
+
+      if (selectedDays.includes(currentDayOfWeek)) {
+        newSchedules.push({
+          date: current.clone(),
+          startTime: { ...startTime },
+          endTime: { ...endTime },
+        });
+      }
+
+      // 매주 반복: 하루씩 증가
+      current = current.add(1, 'day');
+    }
+
+    // 생성된 스케줄을 부모 컴포넌트로 전달
+    onSchedulesGenerated(newSchedules);
+    resetForm();
+    onOpenChange(false);
+
+    toast({
+      title: '일정 생성 완료',
+      description: `${newSchedules.length}개의 일정이 추가되었습니다.`,
+      type: 'success',
+    });
+  };
+
+  return (
+    <Popover.Root direction='fixed-center-center' open={isOpen} onOpenChange={handlePopoverChange}>
+      <Popover.Trigger asChild>
+        <Button
+          className='caption-text h-fit border-gray-100 px-10 py-4'
+          size='sm'
+          variant='outline'
+          onClick={() => onOpenChange(true)}
+        >
+          반복 일정 추가
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content overlay preventInteraction className='rounded-2xl border-gray-50 bg-white p-24'>
+        <div className='flex w-300 flex-col gap-16 md:w-500 xl:w-700'>
+          <div>
+            <label className='mb-2 block text-sm font-medium'>반복 유형</label>
+            <div className='flex items-center gap-8 rounded-xl border border-gray-100 bg-white px-20 py-10'>매주</div>
+          </div>
+
+          <div className='flex flex-col gap-4 md:flex-row'>
+            <div className='flex-1'>
+              <label className='mb-2 block text-sm font-medium'>시작 날짜</label>
+              <DatePicker value={startDate} onChange={handleStartDateChange} />
+            </div>
+            <div className='flex-1'>
+              <label className='mb-2 block text-sm font-medium'>종료 날짜</label>
+              <DatePicker value={endDate} onChange={handleEndDateChange} />
+            </div>
+          </div>
+
+          <div>
+            <label className='mb-2 block text-sm font-medium'>요일 선택</label>
+            <div className='flex flex-wrap gap-4'>
+              {weekdays.map((day) => (
+                <button
+                  key={day.value}
+                  className={`body-text flex size-32 cursor-pointer items-center justify-center rounded-lg border border-gray-100 transition-colors ${
+                    selectedDays.includes(day.value) ? 'bg-gray-50' : ''
+                  }`}
+                  type='button'
+                  onClick={() => toggleDay(day.value)}
+                >
+                  {day.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className='grid grid-cols-2 gap-4'>
+            <div>
+              <label className='mb-2 block text-sm font-medium'>시작 시간</label>
+              <TimePicker className='w-full' value={startTime} onChange={handleStartTimeChange} />
+            </div>
+            <div>
+              <label className='mb-2 block text-sm font-medium'>종료 시간</label>
+              <TimePicker className='w-full' value={endTime} onChange={handleEndTimeChange} />
+            </div>
+          </div>
+
+          <Button className='w-full' size='sm' onClick={generateSchedules}>
+            일정 생성
+          </Button>
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}
diff --git a/apps/what-today/src/components/experiences/ScheduleInput.tsx b/apps/what-today/src/components/experiences/ScheduleInput.tsx
index 9a2e0787..615649ab 100644
--- a/apps/what-today/src/components/experiences/ScheduleInput.tsx
+++ b/apps/what-today/src/components/experiences/ScheduleInput.tsx
@@ -1,5 +1,8 @@
 import { Button, DatePicker, MinusIcon, PlusIcon, TimePicker, useToast } from '@what-today/design-system';
 import type { Dayjs } from 'dayjs';
+import { useState } from 'react';
+
+import RecurringScheduleModal from './RecurringScheduleModal';
 
 interface Time {
   hour: string;
@@ -38,6 +41,21 @@ function isOverlappingSchedule(a: Required<Schedule>, b: Required<Schedule>): bo
 
 export default function ScheduleInput({ value, onChange }: ScheduleInputProps) {
   const { toast } = useToast();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  // 반복 일정으로 생성된 스케줄들을 기존 스케줄에 추가하는 함수
+  const handleSchedulesGenerated = (newSchedules: Schedule[]) => {
+    // 기존 스케줄과 새 스케줄 합치기 (빈 행 제외)
+    const existingSchedules = value.filter((s) => s.date && s.startTime && s.endTime);
+    const allSchedules = [...existingSchedules, ...newSchedules];
+    onChange(allSchedules);
+
+    toast({
+      title: '일정 생성 완료',
+      description: `${newSchedules.length}개의 일정이 추가되었습니다.`,
+      type: 'success',
+    });
+  };
 
   const handleScheduleChange = (index: number, field: keyof Schedule, newValue: Dayjs | Time | null) => {
     const updated = [...value];
@@ -123,57 +141,71 @@ export default function ScheduleInput({ value, onChange }: ScheduleInputProps) {
   })();
 
   return (
-    <div className='flex flex-col gap-12'>
-      {schedules.map((schedule, idx) => {
-        const isLast = idx === schedules.length - 1;
-        const scheduleKey =
-          schedule?.date && schedule?.startTime && schedule?.endTime
-            ? `${schedule.date.format?.('YYYY-MM-DD') ?? 'no-date'}-${schedule.startTime.hour}:${schedule.startTime.minute}-${schedule.endTime.hour}:${schedule.endTime.minute}`
-            : `empty-schedule-${idx}`;
-        const isComplete = schedule.date && schedule.startTime && schedule.endTime;
-
-        return (
-          <div key={scheduleKey} className='flex flex-col items-center gap-8 md:flex-row'>
-            <div className='w-full flex-1'>
-              <DatePicker value={schedule?.date || null} onChange={(date) => handleScheduleChange(idx, 'date', date)} />
-            </div>
-            <div className='flex w-full flex-wrap items-center gap-8 md:w-auto'>
-              <div className='flex-1'>
-                <TimePicker
-                  className='w-full md:w-120'
-                  value={schedule?.startTime || null}
-                  onChange={(time) => handleScheduleChange(idx, 'startTime', time)}
+    <div>
+      <div className='mb-4 flex items-center justify-between'>
+        <p className='mb-4 block'>예약 가능한 시간대</p>
+        <RecurringScheduleModal
+          isOpen={isPopoverOpen}
+          onOpenChange={setIsPopoverOpen}
+          onSchedulesGenerated={handleSchedulesGenerated}
+        />
+      </div>
+
+      <div className='flex flex-col gap-12'>
+        {schedules.map((schedule, idx) => {
+          const isLast = idx === schedules.length - 1;
+          const scheduleKey =
+            schedule?.date && schedule?.startTime && schedule?.endTime
+              ? `${schedule.date.format?.('YYYY-MM-DD') ?? 'no-date'}-${schedule.startTime.hour}:${schedule.startTime.minute}-${schedule.endTime.hour}:${schedule.endTime.minute}`
+              : `empty-schedule-${idx}`;
+          const isComplete = schedule.date && schedule.startTime && schedule.endTime;
+
+          return (
+            <div key={scheduleKey} className='flex flex-col items-center gap-8 md:flex-row'>
+              <div className='w-full flex-1'>
+                <DatePicker
+                  value={schedule?.date || null}
+                  onChange={(date) => handleScheduleChange(idx, 'date', date)}
                 />
               </div>
-              <div className='flex-1'>
-                <TimePicker
-                  className='w-full md:w-120'
-                  value={schedule?.endTime || null}
-                  onChange={(time) => handleScheduleChange(idx, 'endTime', time)}
-                />
+              <div className='flex w-full flex-wrap items-center gap-8 md:w-auto'>
+                <div className='flex-1'>
+                  <TimePicker
+                    className='w-full md:w-120'
+                    value={schedule?.startTime || null}
+                    onChange={(time) => handleScheduleChange(idx, 'startTime', time)}
+                  />
+                </div>
+                <div className='flex-1'>
+                  <TimePicker
+                    className='w-full md:w-120'
+                    value={schedule?.endTime || null}
+                    onChange={(time) => handleScheduleChange(idx, 'endTime', time)}
+                  />
+                </div>
+
+                {/* 마지막 행이 아니거나, 완성된 행이면 삭제 버튼 표시 */}
+                {(!isLast || isComplete) && (
+                  <Button
+                    className='aspect-square w-fit rounded-full bg-gray-200'
+                    variant='none'
+                    onClick={() => handleRemoveSchedule(idx)}
+                  >
+                    <MinusIcon color='white' />
+                  </Button>
+                )}
+
+                {/* 마지막 행이고 비어있으면 플레이스홀더 */}
+                {isLast && (
+                  <Button className='bg-primary-500 aspect-square w-fit rounded-full' variant='none'>
+                    <PlusIcon color='white' />
+                  </Button>
+                )}
               </div>
-
-              {/* 마지막 행이 아니거나, 완성된 행이면 삭제 버튼 표시 */}
-              {(!isLast || isComplete) && (
-                <Button
-                  className='aspect-square w-fit rounded-full bg-gray-200'
-                  variant='none'
-                  onClick={() => handleRemoveSchedule(idx)}
-                >
-                  <MinusIcon color='white' />
-                </Button>
-              )}
-
-              {/* 마지막 행이고 비어있으면 플레이스홀더 */}
-              {isLast && (
-                <Button className='bg-primary-500 aspect-square w-fit rounded-full' variant='none'>
-                  <PlusIcon color='white' />
-                </Button>
-              )}
             </div>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/apps/what-today/src/components/notification/NotificationPopover.tsx b/apps/what-today/src/components/notification/NotificationPopover.tsx
index 7457d330..db5602a4 100644
--- a/apps/what-today/src/components/notification/NotificationPopover.tsx
+++ b/apps/what-today/src/components/notification/NotificationPopover.tsx
@@ -72,6 +72,7 @@ export default function NotificationPopover({ isMobile }: NotificationPopoverPro
       return lastPage.cursorId;
     },
     staleTime: 30 * 1000,
+    enabled: open, // 팝오버가 열렸을 때만 API 요청
   });
 
   /**
diff --git a/apps/what-today/src/pages/experiences/index.tsx b/apps/what-today/src/pages/experiences/index.tsx
index 5f065444..b4666342 100644
--- a/apps/what-today/src/pages/experiences/index.tsx
+++ b/apps/what-today/src/pages/experiences/index.tsx
@@ -150,10 +150,10 @@ export default function CreateExperience() {
       navigate('/');
     },
     onError: (error) => {
-      console.error('체험 등록 실패:', error);
+      const message = error instanceof Error ? error.message : '체험 등록에 실패했습니다.';
       toast({
         title: '체험 등록 실패',
-        description: `체험 등록에 실패했습니다.`,
+        description: message,
         type: 'error',
       });
     },
@@ -237,10 +237,10 @@ export default function CreateExperience() {
       navigate(`/activities/${variables.activityId}`);
     },
     onError: (error) => {
-      console.error('체험 수정 실패:', error);
+      const message = error instanceof Error ? error.message : '체험 수정에 실패했습니다.';
       toast({
         title: '체험 수정 실패',
-        description: `체험 수정에 실패했습니다.`,
+        description: message,
         type: 'error',
       });
     },
@@ -311,7 +311,7 @@ export default function CreateExperience() {
         />
 
         <div>
-          <p className='mb-4 block'>예약 가능한 시간대</p>
+          {/* <p className='mb-4 block'>예약 가능한 시간대</p> */}
           <Controller
             control={control}
             name='schedules'
diff --git a/apps/what-today/src/routes/index.tsx b/apps/what-today/src/routes/index.tsx
index 52568f54..957a5979 100644
--- a/apps/what-today/src/routes/index.tsx
+++ b/apps/what-today/src/routes/index.tsx
@@ -37,8 +37,13 @@ export const router = createBrowserRouter([
         children: [
           { index: true, element: <MainPage /> },
           { path: 'activities/:id', element: <ActivityDetailPage /> },
-          { path: 'experiences/create', element: <CreateExperience /> },
-          { path: 'experiences/create/:id', element: <CreateExperience /> },
+          {
+            loader: authGuardLoader,
+            children: [
+              { path: 'experiences/create', element: <CreateExperience /> },
+              { path: 'experiences/create/:id', element: <CreateExperience /> },
+            ],
+          },
           {
             path: 'mypage',
             loader: authGuardLoader,
diff --git a/packages/design-system/src/components/DatePicker.tsx b/packages/design-system/src/components/DatePicker.tsx
index 30c9c9c3..41456c09 100644
--- a/packages/design-system/src/components/DatePicker.tsx
+++ b/packages/design-system/src/components/DatePicker.tsx
@@ -1,4 +1,6 @@
 import dayjs, { type Dayjs } from 'dayjs';
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import { Calendar } from './calendar';
 import { CalendarIcon } from './icons';
@@ -12,44 +14,60 @@ interface DatePickerProps {
 }
 
 export default function DatePicker({ value, onChange, disabled }: DatePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
   const formattedDate = value ? value.format('YY/MM/DD') : '';
   const today = dayjs().format('YYYY-MM-DD');
 
+  const handleDateChange = (newDate: string) => {
+    onChange(dayjs(newDate));
+    setIsOpen(false); // 날짜 선택 시 팝오버 닫기
+  };
+
   return (
     <div className='relative flex flex-col gap-12 md:flex-row'>
       <div className='relative w-full'>
-        <Popover.Root direction='bottom' disabled={disabled}>
-          <Popover.Trigger>
-            <Input.Root className='w-full' disabled={disabled}>
-              <Input.Wrapper>
-                <Input.Field readOnly placeholder='년 / 월 / 일' value={formattedDate} />
-                <span className='cursor-pointer'>
-                  <Input.Icon>
-                    <CalendarIcon className='size-20' />
-                  </Input.Icon>
-                </span>
-              </Input.Wrapper>
-              <Input.ErrorMessage />
-            </Input.Root>
+        <Popover.Root direction='bottom-right' disabled={disabled} open={isOpen} onOpenChange={setIsOpen}>
+          <Popover.Trigger asChild>
+            <div className='w-full cursor-pointer' onClick={() => !disabled && setIsOpen(true)}>
+              <Input.Root className='w-full' disabled={disabled}>
+                <Input.Wrapper>
+                  <Input.Field readOnly placeholder='년 / 월 / 일' value={formattedDate} />
+                  <span className='cursor-pointer'>
+                    <Input.Icon>
+                      <CalendarIcon className='size-20' />
+                    </Input.Icon>
+                  </span>
+                </Input.Wrapper>
+                <Input.ErrorMessage />
+              </Input.Root>
+            </div>
           </Popover.Trigger>
 
-          <Popover.Content className='mt-8 w-fit rounded-xl border border-gray-100 bg-white p-12'>
-            <Calendar.Root initialDate={today} onDateChange={(newDate) => onChange(dayjs(newDate))}>
-              <Calendar.Header headerClass='my-12' />
-              <Calendar.Grid divider weekdayType='short'>
-                {(day) => {
-                  const isBeforeToday = day.isBefore(dayjs(), 'day');
+          <Popover.Content className='date-picker mt-8 flex justify-end'>
+            <div className='w-300 rounded-xl border border-gray-100 bg-white p-12'>
+              <Calendar.Root initialDate={today} onDateChange={handleDateChange}>
+                <Calendar.Header headerClass='my-12' />
+                <Calendar.Grid divider weekdayType='short'>
+                  {(day) => {
+                    const isBeforeToday = day.isBefore(dayjs(), 'day');
+                    const isSelected = value && day.isSame(value, 'day');
+                    const isToday = day.isSame(dayjs(), 'day');
 
-                  return (
-                    <Calendar.DayCell
-                      dateClass={!isBeforeToday ? 'hover:bg-gray-50' : undefined}
-                      day={day}
-                      dayCellClass={isBeforeToday ? 'opacity-30 pointer-events-none cursor-not-allowed' : undefined}
-                    />
-                  );
-                }}
-              </Calendar.Grid>
-            </Calendar.Root>
+                    return (
+                      <Calendar.DayCell
+                        dateClass={twMerge(
+                          !isBeforeToday && 'hover:bg-gray-50',
+                          isToday && 'bg-transparent text-gray-800 hover:bg-gray-50',
+                          isSelected && 'bg-primary-500 text-white',
+                        )}
+                        day={day}
+                        dayCellClass={isBeforeToday ? 'opacity-30 pointer-events-none cursor-not-allowed' : undefined}
+                      />
+                    );
+                  }}
+                </Calendar.Grid>
+              </Calendar.Root>
+            </div>
           </Popover.Content>
         </Popover.Root>
       </div>
diff --git a/packages/design-system/src/components/popover/PopoverRoot.tsx b/packages/design-system/src/components/popover/PopoverRoot.tsx
index b25a9df9..220a3a14 100644
--- a/packages/design-system/src/components/popover/PopoverRoot.tsx
+++ b/packages/design-system/src/components/popover/PopoverRoot.tsx
@@ -150,8 +150,9 @@ function PopoverRoot({
       const isInContent = contentElementRef.current?.contains(target);
       const isInTrigger = triggerRef.current?.contains(target);
       const isInSelectContent = document.querySelector('.select-content')?.contains(target); // popover위에 Select가 있을 때 항목이 선택되어도 팝오버까지 꺼지지 않도록
+      const isInDatePicker = document.querySelector('.date-picker')?.contains(target); // popover위에 datepicker가 있을 때 항목이 선택되어도 팝오버까지 꺼지지 않도록
 
-      if (!isInContent && !isInTrigger && !isInSelectContent) {
+      if (!isInContent && !isInTrigger && !isInSelectContent && !isInDatePicker) {
         internalSetOpen(false);
       }
     };
diff --git a/packages/design-system/src/pages/MypageProfileHeaderDoc.tsx b/packages/design-system/src/pages/MypageProfileHeaderDoc.tsx
index 8f2522f1..101098e0 100644
--- a/packages/design-system/src/pages/MypageProfileHeaderDoc.tsx
+++ b/packages/design-system/src/pages/MypageProfileHeaderDoc.tsx
@@ -3,7 +3,7 @@ import DocTemplate, { DocCode } from '../layouts/DocTemplate';
 
 /* Playground는 편집 가능한 코드 블록입니다. */
 /* Playground에서 사용할 예시 코드를 작성해주세요. */
-const code = `예시 코드를 작성해주세요.`;
+// const code = `예시 코드를 작성해주세요.`;
 
 export default function MypageProfileHeaderDoc() {
   return (
diff --git a/packages/design-system/src/pages/MypageSummaryCardDoc.tsx b/packages/design-system/src/pages/MypageSummaryCardDoc.tsx
index c45427bc..4cb6bca3 100644
--- a/packages/design-system/src/pages/MypageSummaryCardDoc.tsx
+++ b/packages/design-system/src/pages/MypageSummaryCardDoc.tsx
@@ -3,7 +3,7 @@ import DocTemplate, { DocCode } from '../layouts/DocTemplate';
 
 /* Playground는 편집 가능한 코드 블록입니다. */
 /* Playground에서 사용할 예시 코드를 작성해주세요. */
-const code = `예시 코드를 작성해주세요.`;
+// const code = `예시 코드를 작성해주세요.`;
 
 export default function MypageSummaryCardDoc() {
   return (
diff --git a/packages/design-system/src/pages/OngoingExperienceCardDoc.tsx b/packages/design-system/src/pages/OngoingExperienceCardDoc.tsx
index 1ccd9956..af9eb939 100644
--- a/packages/design-system/src/pages/OngoingExperienceCardDoc.tsx
+++ b/packages/design-system/src/pages/OngoingExperienceCardDoc.tsx
@@ -3,7 +3,7 @@ import DocTemplate, { DocCode } from '../layouts/DocTemplate';
 
 /* Playground는 편집 가능한 코드 블록입니다. */
 /* Playground에서 사용할 예시 코드를 작성해주세요. */
-const code = `예시 코드를 작성해주세요.`;
+// const code = `예시 코드를 작성해주세요.`;
 
 export default function OngoingExperienceCardDoc() {
   return (
diff --git a/packages/design-system/src/pages/UpcomingScheduleDoc.tsx b/packages/design-system/src/pages/UpcomingScheduleDoc.tsx
index 318bc4ea..7e42a5a1 100644
--- a/packages/design-system/src/pages/UpcomingScheduleDoc.tsx
+++ b/packages/design-system/src/pages/UpcomingScheduleDoc.tsx
@@ -4,7 +4,7 @@ import DocTemplate, { DocCode } from '../layouts/DocTemplate';
 
 /* Playground는 편집 가능한 코드 블록입니다. */
 /* Playground에서 사용할 예시 코드를 작성해주세요. */
-const code = `예시 코드를 작성해주세요.`;
+// const code = `예시 코드를 작성해주세요.`;
 
 export default function UpcomingScheduleDoc() {
   return (