diff --git a/frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx b/frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx
index 0a00a9a2..d86235ef 100644
--- a/frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx
+++ b/frontend/apps/client/src/features/discussion/ui/DiscussionRank/index.tsx
@@ -24,7 +24,7 @@ const DiscussionRank = () => {
   return (
     <SegmentControl
       className={segmentControlStyle}
-      defaultValue='participant'
+      initialValue='participant'
       segmentOptions={segmentOptions}
       style='weak'
     >
diff --git a/frontend/apps/client/src/features/shared-schedule/api/index.ts b/frontend/apps/client/src/features/shared-schedule/api/index.ts
index ccc6d6d1..bdf44f22 100644
--- a/frontend/apps/client/src/features/shared-schedule/api/index.ts
+++ b/frontend/apps/client/src/features/shared-schedule/api/index.ts
@@ -2,7 +2,7 @@ import { MINUTE_IN_MILLISECONDS } from '@endolphin/core/utils';
 import { request } from '@utils/fetch';
 
 import type {
-  AttendType,
+  OngoingScheduleAttendType,
   OngoingSchedulesResponse,
   UpcomingScheduleDetailsResponse,
   UpcomingSchedulesResponse, 
@@ -34,7 +34,7 @@ export const schedulesApi = {
   getOngoingSchedules: async (
     page: number,
     size: number,
-    attendType: AttendType,
+    attendType: OngoingScheduleAttendType,
   ): Promise<OngoingSchedulesResponse> => {
     const response = await request.get(ENDPOINT_PREFIX + '/ongoing', {
       params: {
diff --git a/frontend/apps/client/src/features/shared-schedule/api/keys.ts b/frontend/apps/client/src/features/shared-schedule/api/keys.ts
index 4dc047f1..ea34187d 100644
--- a/frontend/apps/client/src/features/shared-schedule/api/keys.ts
+++ b/frontend/apps/client/src/features/shared-schedule/api/keys.ts
@@ -1,4 +1,4 @@
-import type { AttendType } from '../model';
+import type { OngoingScheduleAttendType } from '../model';
 
 export const sharedScheduleKey = ['shared-schedule'];
 
@@ -8,7 +8,7 @@ export const upcomingDetailsQueryKey = (discussionId: string) => ['upcomingDetai
 
 export const ongoingQueryKey = {
   all: [...sharedScheduleKey, 'ongoing'],
-  detail: (page: number, size: number, type: AttendType) => 
+  detail: (page: number, size: number, type: OngoingScheduleAttendType) => 
     [...ongoingQueryKey.all, page, size, type],
 };
 
diff --git a/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts b/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts
index 0621afff..987199e3 100644
--- a/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts
+++ b/frontend/apps/client/src/features/shared-schedule/api/prefetch.ts
@@ -1,6 +1,7 @@
 import type { QueryClient } from '@tanstack/react-query';
 
-import { type AttendType, FINISHED_SCHEDULE_FETCH_SIZE } from '../model';
+import type { OngoingScheduleAttendType } from '../model';
+import { FINISHED_SCHEDULE_FETCH_SIZE } from '../model';
 import { sharedSchedulesQueryOptions } from './queryOptions';
 
 export const prefetchUpcomingSchedules = async (queryClient: QueryClient) => {
@@ -11,7 +12,7 @@ export const prefetchOngoingSchedules = async (
   queryClient: QueryClient,
   page: number,
   size: number,
-  attendType: AttendType,
+  attendType: OngoingScheduleAttendType,
 ) => {
   await queryClient.prefetchQuery(sharedSchedulesQueryOptions.ongoing(page, size, attendType));
 };
diff --git a/frontend/apps/client/src/features/shared-schedule/api/queries.ts b/frontend/apps/client/src/features/shared-schedule/api/queries.ts
index 851d5d1d..f5f0c030 100644
--- a/frontend/apps/client/src/features/shared-schedule/api/queries.ts
+++ b/frontend/apps/client/src/features/shared-schedule/api/queries.ts
@@ -5,7 +5,10 @@ import type {
   UpcomingScheduleDetailsResponse,
   UpcomingSchedulesResponse, 
 } from '../model';
-import type { AttendType, OngoingSchedulesResponse } from '../model/ongoingSchedules';
+import type { 
+  OngoingScheduleAttendType,
+  OngoingSchedulesResponse, 
+} from '../model/ongoingSchedules';
 import { sharedSchedulesQueryOptions } from './queryOptions';
 
 export const useUpcomingQuery = () => useQuery<UpcomingSchedulesResponse>(
@@ -18,7 +21,11 @@ export const useUpcomingDetailsQuery = (discussionId: string) => (
   )
 );
 
-export const useOngoingQuery = (page: number, size: number, attendType: AttendType) => 
+export const useOngoingQuery = (
+  page: number, 
+  size: number, 
+  attendType: OngoingScheduleAttendType,
+) => 
   useQuery<OngoingSchedulesResponse>(
     sharedSchedulesQueryOptions.ongoing(page, size, attendType),
   );
@@ -26,4 +33,4 @@ export const useOngoingQuery = (page: number, size: number, attendType: AttendTy
 export const useFinishedQuery = (page: number, size: number, year: number) =>
   useQuery<FinishedSchedulesResponse>(
     sharedSchedulesQueryOptions.finished(page, size, year),
-  );
+  );
\ No newline at end of file
diff --git a/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts b/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts
index 2f7e1df3..9c555467 100644
--- a/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts
+++ b/frontend/apps/client/src/features/shared-schedule/api/queryOptions.ts
@@ -1,7 +1,7 @@
 
 import { keepPreviousData } from '@tanstack/react-query';
 
-import type { AttendType } from '../model';
+import type { OngoingScheduleAttendType } from '../model';
 import { schedulesApi } from '.';
 import {
   finishedQueryKey,
@@ -19,7 +19,7 @@ export const sharedSchedulesQueryOptions = {
     queryKey: upcomingDetailsQueryKey(discussionId),
     queryFn: () => schedulesApi.getUpcomingScheduleDetail(discussionId),
   }),
-  ongoing: (page: number, size: number, attendtype: AttendType) => ({
+  ongoing: (page: number, size: number, attendtype: OngoingScheduleAttendType) => ({
     queryKey: ongoingQueryKey.detail(page, size, attendtype),
     queryFn: () => schedulesApi.getOngoingSchedules(page, size, attendtype),
   }),
@@ -28,4 +28,4 @@ export const sharedSchedulesQueryOptions = {
     queryFn: () => schedulesApi.getFinishedSchedules(page, size, year),
     placeholderData: keepPreviousData,
   }),
-};
+};
\ No newline at end of file
diff --git a/frontend/apps/client/src/features/shared-schedule/model/ongoingSchedules.ts b/frontend/apps/client/src/features/shared-schedule/model/ongoingSchedules.ts
index 8d2f33af..d5c92679 100644
--- a/frontend/apps/client/src/features/shared-schedule/model/ongoingSchedules.ts
+++ b/frontend/apps/client/src/features/shared-schedule/model/ongoingSchedules.ts
@@ -21,7 +21,7 @@ export const OngoingSchedulesResponseSchema = z.object({
   ongoingDiscussions: z.array(OngoingScheduleSchema),
 });
 
-export type AttendType = 'HOST' | 'ATTENDEE' | 'ALL';
+export type OngoingScheduleAttendType = 'HOST' | 'ATTENDEE' | 'ALL';
 
 export type OngoingSchedulesResponse = z.infer<typeof OngoingSchedulesResponseSchema>;
 export type OngoingSchedule = z.infer<typeof OngoingScheduleSchema>;
diff --git a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx
index 19b592d7..e45c2b28 100644
--- a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx
+++ b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/OngoingScheduleList.tsx
@@ -1,7 +1,9 @@
 import { vars } from '@endolphin/theme';
 import { Flex, Pagination, Text } from '@endolphin/ui';
 import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useAtom } from 'jotai';
+
+import { ongoingSegmentAtomFamily } from '@/store/home';
 
 import { prefetchOngoingSchedules } from '../../api/prefetch';
 import { useOngoingQuery } from '../../api/queries';
@@ -30,16 +32,16 @@ interface OngoingScheduleListProps {
   segmentOption: OngoingSegmentOption;
 }
 
-// TODO: useEffect 뺄 수 있으면 다른 걸로 대체
 const OngoingScheduleList = ({ segmentOption }: OngoingScheduleListProps) => {
   const queryClient = useQueryClient();
-  const [currentPage, handlePageChange] = useState(1);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const { data, isPending } = useOngoingQuery(currentPage, PAGE_SIZE, segmentOption.value );
-  if (isPending) return <div>pending...</div>;
-  if (!data || data.ongoingDiscussions.length === 0) 
-    return <NoDataAlt segmentValue={segmentOption.value} />;
+  const [segmentAtom, setSegmentAtom] = useAtom(ongoingSegmentAtomFamily(segmentOption.value));
+  const setPage = (page: number) => setSegmentAtom((prev) => ({ ...prev, page }));
+  const setListIndex = (index: number) => setSegmentAtom((prev) => ({ ...prev, listIndex: index }));
 
+  const { data, isPending } = useOngoingQuery(segmentAtom.page, PAGE_SIZE, segmentOption.value);
+
+  if (isPending) return <div>pending...</div>;
+  if (!data?.ongoingDiscussions.length) return <NoDataAlt segmentValue={segmentOption.value} />;
   return (
     <div className={mainContainerStyle}>
       <Flex
@@ -50,30 +52,28 @@ const OngoingScheduleList = ({ segmentOption }: OngoingScheduleListProps) => {
       >
         <ScheduleItems
           schedules={data.ongoingDiscussions}
-          selectedIndex={selectedIndex}
-          setSelectedIndex={setSelectedIndex}
+          selectedIndex={segmentAtom.listIndex}
+          setSelectedIndex={setListIndex}
         />
         <Pagination
           className={paginationStyle}
-          currentPage={currentPage}
+          currentPage={segmentAtom.page}
           onPageButtonHover={(page) =>
-            prefetchOngoingSchedules(queryClient, page, PAGE_SIZE, segmentOption.value )}
+            prefetchOngoingSchedules(queryClient, page, PAGE_SIZE, segmentOption.value)}
           onPageChange={(page: number) => {
-            setSelectedIndex(0);
-            handlePageChange(page); 
+            setListIndex(0);
+            setPage(page);
           }}
           totalPages={data.totalPages}
         />
       </Flex>
-      <ScheduleDetails discussionId={data.ongoingDiscussions[selectedIndex].discussionId} />
+      <ScheduleDetails discussionId={data.ongoingDiscussions[segmentAtom.listIndex].discussionId} />
     </div>
   );
 };
 
 interface ScheduleItemsProps {
-  schedules: NonNullable<
-    ReturnType<typeof useOngoingQuery>['data']
-  >['ongoingDiscussions'];
+  schedules: NonNullable<ReturnType<typeof useOngoingQuery>['data']>['ongoingDiscussions'];
   selectedIndex: number;
   setSelectedIndex: (index: number) => void;
 }
diff --git a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx
index ac227071..71aaf2fe 100644
--- a/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx
+++ b/frontend/apps/client/src/features/shared-schedule/ui/OngoingSchedules/index.tsx
@@ -1,11 +1,14 @@
-
-import { Flex, SegmentControl, Text  } from '@endolphin/ui';
+import { Flex, SegmentControl, Text } from '@endolphin/ui';
 import { useQueryClient } from '@tanstack/react-query';
+import { useAtom } from 'jotai';
+
+import { ongoingSegmentValueAtom } from '@/store/home';
 
 import { prefetchOngoingSchedules } from '../../api/prefetch';
 import { useOngoingQuery } from '../../api/queries';
 import { sharedSchedulesQueryOptions } from '../../api/queryOptions';
-import { type AttendType, ONGOING_SCHEDULE_FETCH_SIZE } from '../../model/';
+import type { OngoingScheduleAttendType } from '../../model/';
+import { ONGOING_SCHEDULE_FETCH_SIZE } from '../../model/';
 import { ongoingFallbackContainerStyle } from '../Fallbacks/index.css';
 import OngoingFallback from '../Fallbacks/OngoingFallback';
 import { containerStyle, segmentControlStyle, titleStyle } from './index.css';
@@ -13,7 +16,7 @@ import OngoingScheduleList, { PAGE_SIZE } from './OngoingScheduleList';
 
 export interface OngoingSegmentOption {
   label: string;
-  value: AttendType;
+  value: OngoingScheduleAttendType;
 }
 
 const segmentOptions: OngoingSegmentOption[] = [
@@ -29,12 +32,15 @@ const OngoingSchedules = () => (
     justify='flex-start'
     width='full'
   >
-    <Text className={titleStyle} typo='h2'>확정되지 않은 일정</Text>
+    <Text className={titleStyle} typo='h2'>
+      확정되지 않은 일정
+    </Text>
     <Content />
   </Flex>
 );
 
 const Content = () => {
+  const [segmentValue, setSegmentValue] = useAtom(ongoingSegmentValueAtom);
   const queryClient = useQueryClient();
   const { data, isPending } = useOngoingQuery(1, 6, 'ALL');
   if (!data || isPending) return <div className={ongoingFallbackContainerStyle} />;
@@ -44,26 +50,28 @@ const Content = () => {
     );
     return <OngoingFallback />;
   }
-  
+
   return (
     <SegmentControl
       className={segmentControlStyle}
-      defaultValue='ALL'
-      onButtonHover={(value) => prefetchOngoingSchedules(
-        // TODO: segmentOption value의 타입을 제네릭으로 지정할 수 있게 구현 (as 변환 리팩토룅)
-        queryClient, 1, PAGE_SIZE, value as AttendType,
-      )}
+      initialValue={segmentValue}
+      onButtonHover={(value) =>
+        prefetchOngoingSchedules(
+          queryClient,
+          1,
+          PAGE_SIZE,
+          value,
+        )}
+      onValueChange={(value) => setSegmentValue(value)}
       segmentOptions={segmentOptions}
     >
       {segmentOptions.map((option, idx) => (
         <SegmentControl.Content key={`${option.value}-${idx}`} value={option.value}>
-          <OngoingScheduleList 
-            segmentOption={option} 
-          />
+          <OngoingScheduleList segmentOption={option} />
         </SegmentControl.Content>
       ))}
     </SegmentControl>
   );
 };
 
-export default OngoingSchedules;
\ No newline at end of file
+export default OngoingSchedules;
diff --git a/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx b/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx
index cbb473e7..a0ac07ff 100644
--- a/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx
+++ b/frontend/apps/client/src/pages/UpcomingScheduleDetailPage/index.tsx
@@ -1,8 +1,8 @@
 import { formatDateToDdayString } from '@endolphin/core/utils';
 import { Chip, Flex, Text } from '@endolphin/ui';
+import { useUpcomingDetailsQuery } from '@features/shared-schedule/api/queries';
 import { useParams } from '@tanstack/react-router';
 
-import { useUpcomingDetailsQuery } from '@/features/shared-schedule/api/queries';
 import TimelineScheduleModal from '@/features/timeline-schedule/ui';
 
 import Header from './Header';
@@ -60,4 +60,4 @@ const TopBarContent = ({
   </Flex>
 );
 
-export default UpcomingScheduleDetailPage;
+export default UpcomingScheduleDetailPage;
\ No newline at end of file
diff --git a/frontend/apps/client/src/routes/_main/discussion/candidate/$id.lazy.tsx b/frontend/apps/client/src/routes/_main/discussion/candidate/$id.lazy.tsx
deleted file mode 100644
index 9ce4ea69..00000000
--- a/frontend/apps/client/src/routes/_main/discussion/candidate/$id.lazy.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createLazyFileRoute, useLocation } from '@tanstack/react-router';
-
-import GlobalNavBar from '@/layout/GlobalNavBar';
-import CandidateSchedulePage from '@/pages/CandidateSchedulePage';
-
-const CandidateSchedule = () => {
-  const { state } = useLocation();
-  const { candidate } = state ?? {};
-  if (!candidate) return <div />;
-
-  return (
-    <>
-      <GlobalNavBar></GlobalNavBar>
-      <CandidateSchedulePage {...candidate} />
-    </>
-  );
-};
-
-export const Route = createLazyFileRoute('/_main/discussion/candidate/$id')({
-  component: CandidateSchedule,
-});
diff --git a/frontend/apps/client/src/routes/_main/my-calendar/index.lazy.tsx b/frontend/apps/client/src/routes/_main/my-calendar/index.lazy.tsx
deleted file mode 100644
index baff0985..00000000
--- a/frontend/apps/client/src/routes/_main/my-calendar/index.lazy.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createLazyFileRoute } from '@tanstack/react-router';
-
-import GlobalNavBar from '@/layout/GlobalNavBar';
-import MyCalendarPage from '@/pages/MyCalendarPage';
-
-const MyCalendar = () => (
-  <>
-    <GlobalNavBar>
-      <GlobalNavBar.NewDiscussionLink />
-    </GlobalNavBar>
-    <MyCalendarPage />
-  </>
-);
-
-export const Route = createLazyFileRoute('/_main/my-calendar/')({
-  component: MyCalendar,
-});
diff --git a/frontend/apps/client/src/routes/_main/upcoming-schedule/index.lazy.tsx b/frontend/apps/client/src/routes/_main/upcoming-schedule/index.lazy.tsx
deleted file mode 100644
index 102273af..00000000
--- a/frontend/apps/client/src/routes/_main/upcoming-schedule/index.lazy.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createLazyFileRoute } from '@tanstack/react-router';
-
-import GlobalNavBar from '@/layout/GlobalNavBar';
-import UpcomingSchedulePage from '@/pages/UpcomingSchedulePage';
-
-const UpcomingSchedule = () => (
-  <>
-    <GlobalNavBar>
-      <GlobalNavBar.MyCalendarLink />
-      <GlobalNavBar.NewDiscussionLink />
-    </GlobalNavBar>
-    <UpcomingSchedulePage />
-  </>
-);
-export const Route = createLazyFileRoute('/_main/upcoming-schedule/')({
-  component: UpcomingSchedule,
-});
diff --git a/frontend/apps/client/src/routes/login/index.lazy.tsx b/frontend/apps/client/src/routes/login/index.lazy.tsx
deleted file mode 100644
index 22540ecf..00000000
--- a/frontend/apps/client/src/routes/login/index.lazy.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createLazyFileRoute } from '@tanstack/react-router';
-
-import LoginPage from '@/pages/LoginPage';
-
-const Login = () => (
-  <LoginPage />
-);
-
-export const Route = createLazyFileRoute('/login/')({
-  component: Login,
-});
-
diff --git a/frontend/apps/client/src/store/home/index.ts b/frontend/apps/client/src/store/home/index.ts
new file mode 100644
index 00000000..de8b17fc
--- /dev/null
+++ b/frontend/apps/client/src/store/home/index.ts
@@ -0,0 +1,20 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+
+import type { OngoingScheduleAttendType } from '@/features/shared-schedule/model';
+
+export const ongoingSegmentValueAtom = atom<OngoingScheduleAttendType>('ALL');
+
+export interface OngoingSegmentStateAtom {
+  listIndex: number;
+  page: number;
+}
+
+export const ongoingSegmentAtomFamily = atomFamily((_: OngoingScheduleAttendType) => 
+  atom({
+    listIndex: 0,
+    page: 1,
+  } as OngoingSegmentStateAtom),
+);
+
+export const ongoingListIndexAtom = atom(0);
diff --git a/frontend/packages/ui/src/components/SegmentControl/Content.tsx b/frontend/packages/ui/src/components/SegmentControl/Content.tsx
index 0d519759..dfb93c76 100644
--- a/frontend/packages/ui/src/components/SegmentControl/Content.tsx
+++ b/frontend/packages/ui/src/components/SegmentControl/Content.tsx
@@ -4,12 +4,16 @@ import type { PropsWithChildren } from 'react';
 import { contentContainerStyle } from './index.css';
 import { useSegmentControlContext } from './SegmentControlContext';
 
-export interface ContentProps extends PropsWithChildren {
-  value: string;
+export interface ContentProps<SegmentValue extends string> extends PropsWithChildren {
+  value: SegmentValue;
   className?: string;
 }
-
-const Content = ({ value, className, children }: ContentProps) => {
+ 
+const Content = <SegmentValue extends string>({
+  value, 
+  className, 
+  children, 
+}: ContentProps<SegmentValue>) => {
   const { selectedValue } = useSegmentControlContext();
   if (selectedValue !== value) return null;
   return <section className={clsx(contentContainerStyle, className)}>{children}</section>;
diff --git a/frontend/packages/ui/src/components/SegmentControl/ControlButton.tsx b/frontend/packages/ui/src/components/SegmentControl/ControlButton.tsx
index 8a4b036d..5ff154a9 100644
--- a/frontend/packages/ui/src/components/SegmentControl/ControlButton.tsx
+++ b/frontend/packages/ui/src/components/SegmentControl/ControlButton.tsx
@@ -2,23 +2,23 @@ import Button from '../Button';
 import type { SegmentControlProps, SegmentOption } from '.';
 import { useSegmentControlContext } from './SegmentControlContext';
 
-interface ControlButtonProps {
-  segmentOption: SegmentOption;
-  segmentControlStyle: SegmentControlProps['style'];
-  onButtonHover?: (value: string) => void;
+interface ControlButtonProps<SegmentValue extends string> {
+  segmentOption: SegmentOption<SegmentValue>;
+  segmentControlStyle: SegmentControlProps<SegmentValue>['style'];
+  onButtonHover?: SegmentControlProps<SegmentValue>['onButtonHover'];
 }
-
-const ControlButton = ({ 
+ 
+const ControlButton = <SegmentValue extends string>({ 
   segmentOption, 
   segmentControlStyle,
   onButtonHover,
-}: ControlButtonProps ) => {
-  const { selectedValue, handleSelect } = useSegmentControlContext();
+}: ControlButtonProps<SegmentValue> ) => {
+  const { selectedValue, onSelect } = useSegmentControlContext();
   const { label, value } = segmentOption;
   return (
     <Button
       as='li'
-      onClick={() => handleSelect(value)}
+      onClick={() => onSelect(value)}
       onMouseEnter={() => onButtonHover?.(value)}
       radius='max'
       size='lg'
diff --git a/frontend/packages/ui/src/components/SegmentControl/SegmentControl.stories.tsx b/frontend/packages/ui/src/components/SegmentControl/SegmentControl.stories.tsx
index 72d98310..44066f9b 100644
--- a/frontend/packages/ui/src/components/SegmentControl/SegmentControl.stories.tsx
+++ b/frontend/packages/ui/src/components/SegmentControl/SegmentControl.stories.tsx
@@ -6,7 +6,7 @@ const meta: Meta<typeof SegmentControl> = {
   title: 'Components/SegmentControl',
   component: SegmentControl,
   argTypes: {
-    defaultValue: {
+    initialValue: {
       control: 'text',
     },
     shadow: {
@@ -24,13 +24,13 @@ export const Default: StoryObj<typeof SegmentControl> = {
       { label: '라벨2', value: 'value2' },
       { label: '라벨3', value: 'value3' },
     ],
-    defaultValue: 'value1',
+    initialValue: 'value1',
   },
 };
 
 export const WithContent = () => (
   <SegmentControl
-    defaultValue='value1'
+    initialValue='value1'
     segmentOptions={[
       { label: '라벨1', value: 'value1' },
       { label: '라벨2', value: 'value2' },
diff --git a/frontend/packages/ui/src/components/SegmentControl/SegmentControlContext.ts b/frontend/packages/ui/src/components/SegmentControl/SegmentControlContext.ts
index e9dcea26..50e39231 100644
--- a/frontend/packages/ui/src/components/SegmentControl/SegmentControlContext.ts
+++ b/frontend/packages/ui/src/components/SegmentControl/SegmentControlContext.ts
@@ -2,7 +2,7 @@ import { createStateContext } from '@endolphin/core/utils';
 
 interface SegmentControlContextProps {
   selectedValue: string;
-  handleSelect: (value: string) => void;
+  onSelect: (value: string) => void;
 }
 
 export const {
diff --git a/frontend/packages/ui/src/components/SegmentControl/index.tsx b/frontend/packages/ui/src/components/SegmentControl/index.tsx
index d6ca8759..ff8f53a4 100644
--- a/frontend/packages/ui/src/components/SegmentControl/index.tsx
+++ b/frontend/packages/ui/src/components/SegmentControl/index.tsx
@@ -7,38 +7,56 @@ import ControlButton from './ControlButton';
 import { controlButtonContainerStyle } from './index.css';
 import { SegmentControlProvider } from './SegmentControlContext';
 
-export interface SegmentOption {
+export interface SegmentOption<SegmentValue extends string> {
   label: string;
-  value: string;
+  value: SegmentValue;
 }
-export interface SegmentControlProps extends PropsWithChildren {
-  segmentOptions: SegmentOption[];
+export interface SegmentControlProps<
+  SegmentValue extends string = string,
+> extends PropsWithChildren {
+  segmentOptions: SegmentOption<SegmentValue>[];
   style?: 'weak' | 'filled';
   shadow?: boolean;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
+  initialValue?: SegmentOption<SegmentValue>['value'];
+  onValueChange?: (value: SegmentOption<SegmentValue>['value']) => void;
   className?: string;
-  onButtonHover?: (value: string) => void;
+  onButtonHover?: (value: SegmentOption<SegmentValue>['value']) => void;
 };
 
-const SegmentControl = ({
+/**
+ * 여러 옵션 중 하나를 선택할 수 있는 세그먼트 컨트롤 UI를 렌더링합니다.
+ *
+ * @template T - 선택값(value)의 타입
+ * @param segmentOptions - label: 세그먼트의 이름, value: 옵션의 식별자로 사용되는 유니크 값
+ * @param style - 컨트롤 버튼의 기본 스타일
+ * @param shadow - 버튼에 그림자 효과를 줄지 여부
+ * @param initialValue - 세그먼트 컨트롤의 초기 선택값
+ * @param onValueChange - 선택이 변경될 때 호출되는 콜백
+ * @param className - 최상위 컨테이너에 적용할 CSS 클래스
+ * @param onButtonHover - 버튼 hover 시 호출되는 콜백
+ * @param children - 선택값에 따라 렌더링할 하위 콘텐츠
+ * @returns {JSX.Element}
+ */
+const SegmentControl = <SegmentValue extends string>({
   segmentOptions,
   style = 'filled',
   shadow = true,
-  defaultValue = segmentOptions[0]?.value ?? '',
+  initialValue = segmentOptions[0]?.value,
   onValueChange,
   children,
   className,
   onButtonHover,
-}: SegmentControlProps) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue);
-  const handleSelect = (value: string) => {
+}: SegmentControlProps<SegmentValue>) => {
+  const [selectedValue, setSelectedValue] = useState(initialValue);
+  const onSelect = (value: SegmentValue) => {
     setSelectedValue(value);
     onValueChange?.(value);
   };
-
+  
   return (
-    <SegmentControlProvider initialValue={{ selectedValue, handleSelect }}>
+    <SegmentControlProvider 
+      initialValue={{ selectedValue, onSelect: onSelect as (value: string) => void }}
+    >
       <Flex className={className} direction='column'>
         <Flex
           as='ul'
@@ -46,7 +64,7 @@ const SegmentControl = ({
           direction='row'
         >
           {segmentOptions.map((segmentOption, idx) => (
-            <ControlButton 
+            <ControlButton<SegmentValue>
               key={`${segmentOption.value}-${idx}`}
               onButtonHover={onButtonHover}
               segmentControlStyle={style}