diff --git a/__tests__/utils/date.test.ts b/__tests__/utils/date.test.ts
index 9a00aa75..35b63c5e 100644
--- a/__tests__/utils/date.test.ts
+++ b/__tests__/utils/date.test.ts
@@ -1,26 +1,24 @@
 import {it, expect} from '@jest/globals';
-import date from '@utils/date';
+import {format, decimalToTime, zeroPad, isAfter} from '@utils/date';
 
 it('should return format date', () => {
   const timestamp = 1618225200000;
 
-  expect(date.format(timestamp)).toBe('2021. 04. 12. (월)');
-  expect(date.format(timestamp, 'YYYY년 M월 D일 (dd)')).toBe(
-    '2021년 4월 12일 (월)',
-  );
+  expect(format(timestamp)).toBe('2021. 04. 12. (월)');
+  expect(format(timestamp, 'YYYY년 M월 D일 (dd)')).toBe('2021년 4월 12일 (월)');
 });
 
 it('should return decimal to time', () => {
-  expect(date.decimalToTime(1.5)).toEqual([1, 30]);
-  expect(date.decimalToTime(1.75)).toEqual([1, 45]);
+  expect(decimalToTime(1.5)).toEqual([1, 30]);
+  expect(decimalToTime(1.75)).toEqual([1, 45]);
 });
 
 it('should return zero pad', () => {
-  expect(date.zeroPad(1)).toBe('01');
-  expect(date.zeroPad(10)).toBe('10');
+  expect(zeroPad(1)).toBe('01');
+  expect(zeroPad(10)).toBe('10');
 });
 
 it('should return is after', () => {
-  expect(date.isAfter(new Date(Date.now() - 10000))).toBe(true);
-  expect(date.isAfter(new Date(Date.now() + 10000))).toBe(false);
+  expect(isAfter(new Date(Date.now() - 10000))).toBe(true);
+  expect(isAfter(new Date(Date.now() + 10000))).toBe(false);
 });
diff --git a/package.json b/package.json
index 4c0898e4..e11b0bfe 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react": "18.3.1",
     "react-native": "0.75.2",
     "react-native-config": "^1.5.3",
+    "react-native-date-picker": "^5.0.7",
     "react-native-encrypted-storage": "^4.0.3",
     "react-native-gesture-handler": "^2.18.1",
     "react-native-paper": "^5.12.5",
diff --git a/src/components/common/DatePicker.style.tsx b/src/components/common/DatePicker.style.tsx
deleted file mode 100644
index 472180a0..00000000
--- a/src/components/common/DatePicker.style.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styled from '@emotion/native';
-import {Chip} from 'react-native-paper';
-
-const ChipContainer = styled.View`
-  flex-wrap: wrap;
-  flex-direction: row;
-
-  gap: 8px;
-`;
-
-const DateChip = styled(Chip)`
-  width: 84px;
-  height: 32px;
-
-  background-color: ${props =>
-    props.selected ? props.theme.colors.primary : '#f5f5f5'};
-`;
-
-const S = {ChipContainer, DateChip};
-
-export default S;
diff --git a/src/components/common/DatePicker.tsx b/src/components/common/DatePicker.tsx
index 3660f8f5..22436aff 100644
--- a/src/components/common/DatePicker.tsx
+++ b/src/components/common/DatePicker.tsx
@@ -1,47 +1,22 @@
-import date from '@/utils/date';
-import React, {useState} from 'react';
-import S from './DatePicker.style';
+import React from 'react';
 
-type Props = {
-  onChange: (hour: number, minute: number) => void;
-  hour: number;
-  minute: number;
-  step?: number;
-  range?: [number, number];
-};
-
-const DatePicker = ({
-  onChange,
-  hour,
-  minute,
-  step = 30,
-  range = [0, 24],
-}: Props) => {
-  const [selectedTime, setSelectedTime] = useState({hour, minute});
+import {
+  DatePickerProps,
+  default as RNDatePicker,
+} from 'react-native-date-picker';
 
-  const timeRange = Array.from(
-    {length: ((range[1] - range[0]) * 60) / step},
-    (_, i) => range[0] + (i * step) / 60,
-  );
+type Props = {} & DatePickerProps;
 
+const DatePicker = (props: Props) => {
   return (
-    <S.ChipContainer>
-      {timeRange.map(time => {
-        const [h, m] = date.decimalToTime(time);
-        return (
-          <S.DateChip
-            key={time}
-            onPress={() => {
-              setSelectedTime({hour: h, minute: m});
-              onChange(h, m);
-            }}
-            selected={h === selectedTime.hour && m === selectedTime.minute}
-            disabled={date.isAfter(
-              new Date(new Date().setHours(h, m, 0, 0)),
-            )}>{`${date.zeroPad(h)}:${date.zeroPad(m)}`}</S.DateChip>
-        );
-      })}
-    </S.ChipContainer>
+    <RNDatePicker
+      {...props}
+      modal
+      mode="time"
+      date={new Date('2024-01-01T08:00:00')}
+      confirmText={props.confirmText ?? '확인'}
+      cancelText={props.cancelText ?? '취소'}
+    />
   );
 };
 
diff --git a/src/components/feedPage/Market.tsx b/src/components/feedPage/Market.tsx
index a424baae..911dfafa 100644
--- a/src/components/feedPage/Market.tsx
+++ b/src/components/feedPage/Market.tsx
@@ -1,6 +1,6 @@
 import {MarketType} from '@/types/Market';
 import S from './Market.style';
-import date from '@utils/date';
+import {format} from '@utils/date';
 import React from 'react';
 type Props = {
   market: MarketType;
@@ -21,10 +21,10 @@ const Market = ({market, onPress}: Props) => {
       </S.MarketImageContainer>
       <S.MarketTitle>{market.name}</S.MarketTitle>
       <S.MarketPickupTime>
-        {`픽업: ${date.format(
+        {`픽업: ${format(
           market.pickupStartAt,
           'HH시 mm분',
-        )} ~ ${date.format(market.pickupEndAt, 'HH시 mm분')}`}
+        )} ~ ${format(market.pickupEndAt, 'HH시 mm분')}`}
       </S.MarketPickupTime>
     </S.MarketWrapper>
   );
diff --git a/src/components/orderHistory/HistoryTimeline.tsx b/src/components/orderHistory/HistoryTimeline.tsx
index e07c259a..1f62ad5b 100644
--- a/src/components/orderHistory/HistoryTimeline.tsx
+++ b/src/components/orderHistory/HistoryTimeline.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import date from '@utils/date';
+import {format} from '@utils/date';
 import S from './HistoryTimeline.style';
 
 // TODO: 이미지 경로 수정
@@ -21,7 +21,7 @@ const HistoryTimeline = ({
       <S.TitleLayout>
         <S.CheckIcon source={{uri: checkImageSrc}} width={24} height={24} />
         <S.Title>{title}</S.Title>
-        <S.Timestamp>{date.format(timestamp, 'HH시 mm분')}</S.Timestamp>
+        <S.Timestamp>{format(timestamp, 'HH시 mm분')}</S.Timestamp>
       </S.TitleLayout>
       <S.DescriptionLayout>
         <S.DashedLine dashline={dashline} />
diff --git a/src/components/orderHistory/OrderHistory.tsx b/src/components/orderHistory/OrderHistory.tsx
index 1d00ceaf..6d333ccb 100644
--- a/src/components/orderHistory/OrderHistory.tsx
+++ b/src/components/orderHistory/OrderHistory.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import {Alert, Image} from 'react-native';
 import {OrderType} from '@/types/OrderType';
-import date from '@utils/date';
 import HistoryTimeline from './HistoryTimeline';
 import S from './OrderHistory.style';
+import {format} from '@/utils/date';
 
 const DESCRIPTION_MAX_LENGTH = 30;
 
@@ -97,7 +97,7 @@ const OrderHistory = ({historyList, onPressMarket}: Props) => {
                           </S.OrderDetailButton>
                         </S.OrderDetailButtonContainer>
                       </S.InfoHeader>
-                      <S.CreatedAt>{`${date.format(order.createdAt)}${
+                      <S.CreatedAt>{`${format(order.createdAt)}${
                         status != null ? ` · ${status}` : ''
                       }`}</S.CreatedAt>
                       <S.Description numberOfLines={2}>
@@ -121,7 +121,7 @@ const OrderHistory = ({historyList, onPressMarket}: Props) => {
                         timestamp={order.pendingAt}
                         description={
                           order.doneAt == null
-                            ? `${date.format(
+                            ? `${format(
                                 order.pickupAt,
                                 'HH시 mm분',
                               )}까지 가게로 방문해주세요.`
@@ -133,7 +133,7 @@ const OrderHistory = ({historyList, onPressMarket}: Props) => {
                       <HistoryTimeline
                         title="픽업 완료"
                         timestamp={order.doneAt}
-                        description={`${date.format(
+                        description={`${format(
                           order.doneAt,
                           'HH시 mm분',
                         )}에 픽업이 완료되었습니다.`}
diff --git a/src/components/orderPage/DatePickerCard.style.tsx b/src/components/orderPage/DatePickerCard.style.tsx
index 87aef033..0c29f5e6 100644
--- a/src/components/orderPage/DatePickerCard.style.tsx
+++ b/src/components/orderPage/DatePickerCard.style.tsx
@@ -1,9 +1,45 @@
 import styled from '@emotion/native';
+import {Button, Text} from 'react-native-paper';
+
 import C from './Common.style';
 
-const Card = styled(C.CommonCard)``;
-const HeaderText = styled(C.HeaderText)``;
+const Card = styled(C.CommonCard)`
+  display: flex;
+  justify-content: flex-start;
+  gap: 12px;
+
+  padding: 36px 8px;
+`;
+
+const PlaneText = styled(Text)`
+  padding: 0 8px;
+
+  color: rgb(0, 0, 0);
+  font-family: Pretendard;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 30px;
+`;
+
+const DatePickerButton = styled(Button)`
+  display: flex;
+  flex-direction: row;
+
+  gap: 8px;
+
+  padding: 8px 0;
+`;
+
+const DatePickerText = styled(Text)`
+  color: rgb(0, 0, 0);
+  font-family: Pretendard;
+  font-size: 24px;
+  font-style: bold;
+  font-weight: 600;
+  line-height: 36px;
+`;
 
-const S = {Card, HeaderText};
+const S = {Card, PlaneText, DatePickerButton, DatePickerText};
 
 export default S;
diff --git a/src/components/orderPage/DatePickerCard.tsx b/src/components/orderPage/DatePickerCard.tsx
index 1b21b621..dfc88b24 100644
--- a/src/components/orderPage/DatePickerCard.tsx
+++ b/src/components/orderPage/DatePickerCard.tsx
@@ -1,27 +1,48 @@
 import React, {useState} from 'react';
+import {Icon} from 'react-native-paper';
+
 import {DatePicker} from '@components/common';
+import {format} from '@/utils/date';
+
 import S from './DatePickerCard.style';
 
 const DatePickerCard = () => {
-  const [reservedAt, setReservedAt] = useState({hour: 0, minute: 0});
+  const now = new Date();
 
-  // TODO: fetch marketPickupTime from server
-  const marketPickupAt: [number, number] = [18, 22];
+  const [isOpen, setIsOpen] = useState(false);
+  const [reservedAt, setReservedAt] = useState(now);
 
-  const onChange = (hour: number, minute: number) => {
-    setReservedAt({hour, minute});
+  const onConfirm = (date: Date) => {
+    setReservedAt(date);
+    setIsOpen(false);
   };
 
   return (
-    <S.Card>
-      <S.HeaderText>픽업 시간</S.HeaderText>
+    <>
+      <S.Card>
+        <S.DatePickerButton onPress={() => setIsOpen(true)}>
+          <S.DatePickerText>
+            {format(reservedAt.getTime(), 'a HH : mm')}
+          </S.DatePickerText>
+          <Icon source={'menu-down'} size={24} />
+        </S.DatePickerButton>
+        <S.PlaneText>{'으로 픽업 예약을 확정할게요'}</S.PlaneText>
+      </S.Card>
       <DatePicker
-        onChange={onChange}
-        hour={reservedAt.hour}
-        minute={reservedAt.minute}
-        range={marketPickupAt}
+        title={'예약 시간을 선택해주세요'}
+        open={isOpen}
+        mode="time"
+        date={reservedAt}
+        minimumDate={now}
+        // TODO: 예약 가능 시간 서버에서 받아와야 함
+        maximumDate={new Date(now.getTime() + 24 * 60 * 60 * 1000)}
+        onConfirm={date => {
+          onConfirm(date);
+          setIsOpen(false);
+        }}
+        onCancel={() => setIsOpen(false)}
       />
-    </S.Card>
+    </>
   );
 };
 
diff --git a/src/screens/MarketDetailScreen/MarketDetailPage.tsx b/src/screens/MarketDetailScreen/MarketDetailPage.tsx
index ad583b1c..f3a9a167 100644
--- a/src/screens/MarketDetailScreen/MarketDetailPage.tsx
+++ b/src/screens/MarketDetailScreen/MarketDetailPage.tsx
@@ -8,7 +8,7 @@ import {
   NativeScrollEvent,
   LayoutChangeEvent,
 } from 'react-native';
-import date from '@utils/date';
+import {format} from '@utils/date';
 import Menu from '@/components/marketDetailPage/Menu';
 import S from './MarketDetail.style';
 import {MarketType} from '@/types/Market';
@@ -243,14 +243,14 @@ const MarketDetailPage = ({
           내 자식에게 준다는 마음으로 음식을 만들고 있습니다^^
         </S.MarketDescription>
         <S.MarketTimeDescription>
-          {`픽업 마감까지 ${date.format(pickupEndAt - Date.now(), 'HH시간 mm분')} 남았습니다!`}
+          {`픽업 마감까지 ${format(pickupEndAt - Date.now(), 'HH시간 mm분')} 남았습니다!`}
         </S.MarketTimeDescription>
       </S.MarketMainInfoWrapper>
       <S.MarketSideInfoWrapper>
-        <S.MarketSideInfo>{`픽업: ${date.format(
+        <S.MarketSideInfo>{`픽업: ${format(
           pickupStartAt,
           'HH시 mm분',
-        )} ~ ${date.format(pickupEndAt, 'HH시 mm분')}`}</S.MarketSideInfo>
+        )} ~ ${format(pickupEndAt, 'HH시 mm분')}`}</S.MarketSideInfo>
         <S.MarketSideInfo>{address}</S.MarketSideInfo>
       </S.MarketSideInfoWrapper>
       <S.SideTagBarScrollView
diff --git a/src/screens/PaymentScreen/PaymentPage.tsx b/src/screens/PaymentScreen/PaymentPage.tsx
index 4e238865..8e6c0092 100644
--- a/src/screens/PaymentScreen/PaymentPage.tsx
+++ b/src/screens/PaymentScreen/PaymentPage.tsx
@@ -1,27 +1,19 @@
-import {CartType} from '@/types/OrderType';
-import {RootStackParamList} from '@/types/StackNavigationType';
-import {BottomButton} from '@components/common';
-import {
-  DatePickerCard,
-  PaymentMethod,
-  PaymentSummary,
-} from '@components/orderPage';
+import React, {useMemo} from 'react';
+import {Text} from 'react-native-paper';
+
 import {useNavigation} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useMemo, useState} from 'react';
-import S from './PaymentPage.style';
 
-const paymentMethodKind = {
-  toss: '토스',
-  kakao: '카카오페이',
-} as const;
+import {CartType} from '@/types/OrderType';
+import {RootStackParamList} from '@/types/StackNavigationType';
+import {BottomButton} from '@components/common';
+import {DatePickerCard, PaymentSummary} from '@components/orderPage';
 
-type PaymentMethodKindKeyType = keyof typeof paymentMethodKind;
+import S from './PaymentPage.style';
 
 type Props = {cart: CartType};
 
 const PaymentPage = ({cart}: Props) => {
-  const [method, setMethod] = useState<PaymentMethodKindKeyType>('toss');
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
 
   const {originalPrice, discountPrice} = useMemo(
@@ -40,11 +32,7 @@ const PaymentPage = ({cart}: Props) => {
     <S.PaymentPage>
       <S.ScrollView>
         <DatePickerCard />
-        <PaymentMethod
-          value={method}
-          onChange={setMethod}
-          paymentMethodKind={paymentMethodKind}
-        />
+        <Text>{'// TODO: 결제수단 서버에서 받아와야 함'}</Text>
         <PaymentSummary
           originalPrice={originalPrice}
           discountPrice={discountPrice}
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 409424dd..66274e1f 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -8,7 +8,7 @@ import 'dayjs/locale/ko';
  * @returns 변환된 날짜
  * @example format(1627772400000) // '2021. 07. 31. (토)'
  */
-function format(timestamp: number, template?: string): string {
+export function format(timestamp: number, template?: string): string {
   const date = new Date(timestamp);
 
   return dayjs(date)
@@ -22,7 +22,7 @@ function format(timestamp: number, template?: string): string {
  * @returns `[hour, minute]`
  * @example decimalToTime(1.5) // [1, 30]
  */
-function decimalToTime(decimal: number): [number, number] {
+export function decimalToTime(decimal: number): [number, number] {
   const hour = Math.floor(decimal);
   const minute = Math.floor((decimal - hour) * 60);
 
@@ -35,7 +35,7 @@ function decimalToTime(decimal: number): [number, number] {
  * @returns `string` 2자리 숫자
  * @example zeroPad(1) // '01'
  */
-function zeroPad(num: number): string {
+export function zeroPad(num: number): string {
   return num.toString().padStart(2, '0');
 }
 
@@ -45,15 +45,6 @@ function zeroPad(num: number): string {
  * @returns `boolean` 현재 시간이 target 시간 이후인지 여부
  * @example isAfter(new Date()) // true
  */
-function isAfter(target: Date): boolean {
+export function isAfter(target: Date): boolean {
   return dayjs().isAfter(target);
 }
-
-const date = {
-  format,
-  decimalToTime,
-  zeroPad,
-  isAfter,
-};
-
-export default date;
diff --git a/yarn.lock b/yarn.lock
index 3263cfda..e5bfa412 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3355,6 +3355,7 @@ __metadata:
     react: 18.3.1
     react-native: 0.75.2
     react-native-config: ^1.5.3
+    react-native-date-picker: ^5.0.7
     react-native-encrypted-storage: ^4.0.3
     react-native-gesture-handler: ^2.18.1
     react-native-paper: ^5.12.5
@@ -8684,6 +8685,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-date-picker@npm:^5.0.7":
+  version: 5.0.7
+  resolution: "react-native-date-picker@npm:5.0.7"
+  peerDependencies:
+    react: ">= 17.0.1"
+    react-native: ">= 0.64.3"
+  checksum: 94191bf3ce6e88a3acc4ca5e5514eaa6fc15c61666393d85ca258dba3a3efd9145c8fd31ed0f18676d7f083e17f08c760de8193ad24367a65761330084bcdc6b
+  languageName: node
+  linkType: hard
+
 "react-native-encrypted-storage@npm:^4.0.3":
   version: 4.0.3
   resolution: "react-native-encrypted-storage@npm:4.0.3"