diff --git a/src/App.js b/src/App.js
index cba1912..bb77057 100644
--- a/src/App.js
+++ b/src/App.js
@@ -123,6 +123,7 @@ function App() {
   <Route path='/booking' element={<Booking /> } />
   <Route path='/intro' element={<IntroPage /> } />
   <Route path='/ownerpage' element={<OwnerMypage />} />
+
 </Routes>
 </div>
 
diff --git a/src/components/PeopleInput.js b/src/components/PeopleInput.js
new file mode 100644
index 0000000..7909f78
--- /dev/null
+++ b/src/components/PeopleInput.js
@@ -0,0 +1,18 @@
+import { CONSTANTS } from '../constants/bookingIndex';
+
+// 공통으로 사용되는 인풋 컴포넌트들
+export const PeopleInput = ({ bookingData, handleInputChange }) => (
+    <div>
+      <label className="step1-number-label">인원</label>
+      <input
+        type="number"
+        name="numberOfPeople"
+        value={bookingData.numberOfPeople}
+        onChange={handleInputChange}
+        min={CONSTANTS.MIN_PEOPLE}
+        max={CONSTANTS.MAX_PEOPLE}
+        className="step1-number-input"
+      />
+    </div>
+  );
+  
\ No newline at end of file
diff --git a/src/components/RenderStepIndicator.js b/src/components/RenderStepIndicator.js
new file mode 100644
index 0000000..02519c5
--- /dev/null
+++ b/src/components/RenderStepIndicator.js
@@ -0,0 +1,24 @@
+import { CONSTANTS } from '../constants/bookingIndex.js';
+
+export const RenderStepIndicator = ({step}) => (
+  <div className="booking-content">
+    <div className="booking-date">
+      {Array.from({ length: CONSTANTS.STEPS }, (_, i) => i + 1).map((stepNum) => (
+        <div
+          key={stepNum}
+          className={`w-8 h-8 rounded-full flex items-center justify-center ${
+            step >= stepNum ? 'bg-blue-500 text-white' : 'bg-gray-200'
+          }`}
+        >
+          {stepNum}
+        </div>
+      ))}
+    </div>
+    <div className="booking-date-box">
+      <div
+        className="booking-date-round"
+        style={{ width: `${(step / CONSTANTS.STEPS) * 100}%` }}
+      />
+    </div>
+  </div>
+);
diff --git a/src/components/RequirmentsInput.js b/src/components/RequirmentsInput.js
new file mode 100644
index 0000000..f95c6e3
--- /dev/null
+++ b/src/components/RequirmentsInput.js
@@ -0,0 +1,12 @@
+export const RequirementsInput = ({ bookingData, handleInputChange }) => (
+  <div>
+    <label className="step1-requirements-label">요청사항</label>
+    <textarea
+      name="requirements"
+      value={bookingData.requirements}
+      onChange={handleInputChange}
+      className="step1-requirements-textarea"
+      rows="3"
+    />
+  </div>
+);
\ No newline at end of file
diff --git a/src/components/TimeSelection.js b/src/components/TimeSelection.js
new file mode 100644
index 0000000..aa776bc
--- /dev/null
+++ b/src/components/TimeSelection.js
@@ -0,0 +1,36 @@
+export const TimeSelect = ({ label, name, value, onChange, options }) => (
+    <div>
+      <label className={`step1-${name}-label`}>{label}</label>
+      <select 
+        name={name}
+        value={value}
+        onChange={onChange}
+        className={`step1-${name}-select`}
+      >
+        <option value="">선택해주세요</option>
+        {options.map(({ value, label }) => (
+          <option key={value} value={value}>{label}</option>
+        ))}
+      </select>
+    </div>
+  );
+  
+
+export const TimeSelection = ({ bookingData, handleInputChange, timeOptions }) => (
+  <div className="step1-startTime">
+    <TimeSelect
+      label="시작 시간"
+      name="startTime"
+      value={bookingData.startTime}
+      onChange={handleInputChange}
+      options={timeOptions}
+    />
+    <TimeSelect
+      label="종료 시간"
+      name="endTime"
+      value={bookingData.endTime}
+      onChange={handleInputChange}
+      options={timeOptions}
+    />
+  </div>
+);
\ No newline at end of file
diff --git a/src/components/steps/BookingStep1.js b/src/components/steps/BookingStep1.js
new file mode 100644
index 0000000..5b43132
--- /dev/null
+++ b/src/components/steps/BookingStep1.js
@@ -0,0 +1,40 @@
+import { PeopleInput } from "../PeopleInput";
+import {TimeSelection} from "../TimeSelection";
+import {RequirementsInput} from "../RequirmentsInput";
+import {generateTimeOptions} from "../../utils/timeUtils";
+
+// Step 컴포넌트들
+export const BookingStep1 = ({ bookingData, handleInputChange }) => (
+    <div className="booking-step">
+      <h2 className="step1-text">예약정보입력</h2>
+      <div className="space">
+        <div>
+          <label className="step1-data">날짜</label>
+          <input 
+            type="date"
+            name="date"
+            value={bookingData.date}
+            onChange={handleInputChange}
+            className="step1-input-date"
+            min={new Date().toISOString().split('T')[0]}
+          />
+        </div>
+        <TimeSelection 
+          bookingData={bookingData}
+          handleInputChange={handleInputChange}
+          timeOptions={generateTimeOptions()}
+        />
+        <PeopleInput 
+          bookingData={bookingData}
+          handleInputChange={handleInputChange}
+        />
+        <RequirementsInput 
+          bookingData={bookingData}
+          handleInputChange={handleInputChange}
+        />
+      </div>
+    </div>
+  );
+
+
+  export default BookingStep1
\ No newline at end of file
diff --git a/src/components/steps/BookingStep2.js b/src/components/steps/BookingStep2.js
new file mode 100644
index 0000000..2be4267
--- /dev/null
+++ b/src/components/steps/BookingStep2.js
@@ -0,0 +1,40 @@
+import { PAYMENT_METHODS } from "../../constants/bookingIndex";
+
+// Step 2: 예약자 정보
+export const BookingStep2 = ({ bookingData, handleInputChange }) => (
+    <div className="booking-step">
+      <h2 className="step2-info">예약자 정보</h2>
+      <div className="step2-box">
+        <div>
+          <label className="step2-name-label">이름</label>
+          <input
+            type="text"
+            name="name"
+            value={bookingData.name}
+            onChange={handleInputChange}
+            className="step2-name-input"
+          />
+        </div>
+        <div>
+          <label className="step2-phone-label">연락처</label>
+          <input
+            type="tel"
+            name="phone"
+            value={bookingData.phone}
+            onChange={handleInputChange}
+            className="step2-phone-input"
+          />
+        </div>
+        <div>
+          <label className="step2-email-label">이메일</label>
+          <input
+            type="email"
+            name="email"
+            value={bookingData.email}
+            onChange={handleInputChange}
+            className="step2-email-input"
+          />
+        </div>
+      </div>
+    </div>
+  );
\ No newline at end of file
diff --git a/src/components/steps/BookingStep3.js b/src/components/steps/BookingStep3.js
new file mode 100644
index 0000000..a0d1df8
--- /dev/null
+++ b/src/components/steps/BookingStep3.js
@@ -0,0 +1,40 @@
+import { PAYMENT_METHODS } from "../../constants/bookingIndex";
+
+// Step 3: 결제 정보
+export const BookingStep3 = ({ bookingData, handleInputChange, totalPrice }) => (
+    <div className="booking-step">
+      <h2 className="step3-info">결제 정보</h2>
+      <div className="step3-booking">
+        <div className="step3-money">
+          <h3 className="step3-money-text">결제 금액</h3>
+          <p className="step3-money-detail">
+            {bookingData.startTime} - {bookingData.endTime}
+          </p>
+          <p className="step3-money-small-text">{totalPrice.toLocaleString()}원</p>
+        </div>
+        <div>
+          <label className="step3-paymentMethod-label">결제수단</label>
+          <select
+            name="paymentMethod"
+            value={bookingData.paymentMethod}
+            onChange={handleInputChange}
+            className="step3-paymentMethod-select"
+          >
+            {Object.entries(PAYMENT_METHODS).map(([value, label]) => (
+              <option key={value} value={value}>{label}</option>
+            ))}
+          </select>
+        </div>
+        <div className="step3-flexItem">
+          <input
+            type="checkbox"
+            name="agreement"
+            checked={bookingData.agreement}
+            onChange={handleInputChange}
+            className="step3-flexItem-checkbox"
+          />
+          <label className="step3-text-label">예약 정책에 동의 합니다.</label>
+        </div>
+      </div>
+    </div>
+  );
\ No newline at end of file
diff --git a/src/components/steps/BookingStep4.js b/src/components/steps/BookingStep4.js
new file mode 100644
index 0000000..605ad58
--- /dev/null
+++ b/src/components/steps/BookingStep4.js
@@ -0,0 +1,31 @@
+import { PAYMENT_METHODS } from "../../constants/bookingIndex";
+
+// Step 4: 예약 확인
+export const BookingStep4 = ({ bookingData, bookingInfo, totalPrice }) => (
+    <div className="booking-step">
+      <h2 className="step4-text">예약 확인</h2>
+      <div className="step4-round">
+        <div>
+          <h3 className="step4-booking-info">예약정보</h3>
+          <p>공간: {bookingInfo.title}</p>
+          <p>날짜: {bookingData.date}</p>
+          <p>시간: {bookingData.startTime} ~ {bookingData.endTime}</p>
+          <p>인원: {bookingData.numberOfPeople}명</p>
+          {bookingData.requirements && (
+            <p>요청사항: {bookingData.requirements}</p>
+          )}
+        </div>
+        <div>
+          <h3 className="step4-booking-people">예약자 정보</h3>
+          <p>이름: {bookingData.name}</p>
+          <p>연락처: {bookingData.phone}</p>
+          <p>이메일: {bookingData.email}</p>
+        </div>
+        <div>
+          <h3 className="step4-booking-payment">결제 정보</h3>
+          <p>결제 금액: {totalPrice.toLocaleString()}원</p>
+          <p>결제 수단: {PAYMENT_METHODS[bookingData.paymentMethod]}</p>
+        </div>
+      </div>
+    </div>
+  );
\ No newline at end of file
diff --git a/src/constants/bookingIndex.js b/src/constants/bookingIndex.js
new file mode 100644
index 0000000..e7d2856
--- /dev/null
+++ b/src/constants/bookingIndex.js
@@ -0,0 +1,33 @@
+
+
+// 상수정의
+export const CONSTANTS = {
+    HOURLY_RATE: 5000,
+    MAX_PEOPLE: 10,
+    MIN_PEOPLE: 1,
+    STEPS: 4,
+  };
+
+
+//  초기 상태 정의
+export const initialBookingData = {
+    date: '',
+    startTime: '',
+    endTime: '',
+    numberOfPeople: 1,
+    requirements: '',
+    name: '',
+    phone: '',
+    email: '',
+    paymentMethod: 'card',
+    agreement: false
+  };
+
+
+//  결제수단 매핑
+export const PAYMENT_METHODS = {
+    kakao: '카카오페이머니',
+    card: '신용/체크카드',
+    transfer: '계좌이체',
+    vbank: '가상계좌'
+  };
\ No newline at end of file
diff --git a/src/constants/type/ItemType.js b/src/constants/type/ItemType.js
index c39e50f..3f63b4b 100644
--- a/src/constants/type/ItemType.js
+++ b/src/constants/type/ItemType.js
@@ -11,12 +11,12 @@ import { FaBookOpenReader } from "react-icons/fa6";
 
 // 카테고리별 아이템 매핑
 const ItemType = [
-    { type: 'playing', title: "악기연주(합주실)", icon: <GiGuitar size={40} color="#000000" />, label:"악기연주(합주실)", isNew: true,to: "/rehearsal" },
-    { type: 'party', title: '파티룸', icon: <GiPartyPopper size={40} color="#000000" />, label:"파티룸", to: "/party" },
-    { type: 'dance', title: "댄스연습실", icon: <GiBandana size={40} color="#000000" />, label:"댄스연습실", to: "/dance" },
-    { type: 'karaoke', title: "노래방", icon: <IoIosMicrophone size={40} color="#000000" />, label:"노래방", to: "/karaoke" },
-    { type: 'studio', title: "스튜디오", icon: <IoVideocamSharp size={40} color="#000000" />, label:"스튜디오", to: "/studio" },
-    { type: 'camping', title: "캠핑장", icon: <FaCampground size={40} color="#000000" />, label:"캠핑장", to: "/camping" },
+    { type: 'PLAYING', title: "악기연주(합주실)", icon: <GiGuitar size={40} color="#000000" />, label:"악기연주(합주실)", isNew: true,to: "/playing" },
+    { type: 'PARTY', title: '파티룸', icon: <GiPartyPopper size={40} color="#000000" />, label:"파티룸", to: "/party" },
+    { type: 'DANCE', title: "댄스연습실", icon: <GiBandana size={40} color="#000000" />, label:"댄스연습실", to: "/dance" },
+    { type: 'KARAOKE', title: "노래방", icon: <IoIosMicrophone size={40} color="#000000" />, label:"노래방", to: "/karaoke" },
+    { type: 'STUDIO', title: "스튜디오", icon: <IoVideocamSharp size={40} color="#000000" />, label:"스튜디오", to: "/studio" },
+    { type: 'CAMPING', title: "캠핑장", icon: <FaCampground size={40} color="#000000" />, label:"캠핑장", to: "/camping" },
     { type: 'gym', title: "헬스장", icon: <FaDumbbell size={40} color="#000000" />, label:"헬스장", to: "/gym" },
     { type: 'office', title: "사무실", icon: <PiOfficeChairDuotone size={40} color="#000000" />, label:"사무실",to: "/office" },
     { type: 'accommodation', title: "숙박", icon: <MdHotel size={40} color="#000000" />, label:"숙박",to: "/accommodation" },
diff --git a/src/pages/booking.js b/src/pages/booking.js
index 1fa87f5..d020c53 100644
--- a/src/pages/booking.js
+++ b/src/pages/booking.js
@@ -1,249 +1,15 @@
 import { useState } from "react";
 import { useLocation } from 'react-router-dom';
 import "../styles/booking.css"
+import {calculatePrice} from '../utils/timeUtils';
+import { CONSTANTS, initialBookingData } from '../constants/bookingIndex';
+import { RenderStepIndicator } from '../components/RenderStepIndicator';
+import { BookingStep1 } from '../components/steps/BookingStep1';
+import { BookingStep2 } from '../components/steps/BookingStep2';
+import { BookingStep3 } from '../components/steps/BookingStep3';
+import { BookingStep4 } from '../components/steps/BookingStep4';
 
-// 상수 정의
-const CONSTANTS = {
-  HOURLY_RATE: 5000,
-  MAX_PEOPLE: 10,
-  MIN_PEOPLE: 1,
-  STEPS: 4,
-};
 
-// 초기 상태 정의
-const initialBookingData = {
-  date: '',
-  startTime: '',
-  endTime: '',
-  numberOfPeople: 1,
-  requirements: '',
-  name: '',
-  phone: '',
-  email: '',
-  paymentMethod: 'card',
-  agreement: false
-};
-
-// 결제 수단 매핑
-const PAYMENT_METHODS = {
-  kakao: '카카오페이머니',
-  card: '신용/체크카드',
-  transfer: '계좌이체',
-  vbank: '가상계좌'
-};
-
-// 시간 옵션 생성 유틸리티 함수
-const generateTimeOptions = () => 
-  Array.from({ length: 24 }, (_, i) => ({
-    value: `${i.toString().padStart(2, '0')}:00`,
-    label: `${i.toString().padStart(2, '0')}:00`
-  }));
-
-// 공통으로 사용되는 인풋 컴포넌트들
-const PeopleInput = ({ bookingData, handleInputChange }) => (
-  <div>
-    <label className="step1-number-label">인원</label>
-    <input
-      type="number"
-      name="numberOfPeople"
-      value={bookingData.numberOfPeople}
-      onChange={handleInputChange}
-      min={CONSTANTS.MIN_PEOPLE}
-      max={CONSTANTS.MAX_PEOPLE}
-      className="step1-number-input"
-    />
-  </div>
-);
-
-const RequirementsInput = ({ bookingData, handleInputChange }) => (
-  <div>
-    <label className="step1-requirements-label">요청사항</label>
-    <textarea
-      name="requirements"
-      value={bookingData.requirements}
-      onChange={handleInputChange}
-      className="step1-requirements-textarea"
-      rows="3"
-    />
-  </div>
-);
-
-const TimeSelection = ({ bookingData, handleInputChange, timeOptions }) => (
-  <div className="step1-startTime">
-    <TimeSelect
-      label="시작 시간"
-      name="startTime"
-      value={bookingData.startTime}
-      onChange={handleInputChange}
-      options={timeOptions}
-    />
-    <TimeSelect
-      label="종료 시간"
-      name="endTime"
-      value={bookingData.endTime}
-      onChange={handleInputChange}
-      options={timeOptions}
-    />
-  </div>
-);
-
-const TimeSelect = ({ label, name, value, onChange, options }) => (
-  <div>
-    <label className={`step1-${name}-label`}>{label}</label>
-    <select 
-      name={name}
-      value={value}
-      onChange={onChange}
-      className={`step1-${name}-select`}
-    >
-      <option value="">선택해주세요</option>
-      {options.map(({ value, label }) => (
-        <option key={value} value={value}>{label}</option>
-      ))}
-    </select>
-  </div>
-);
-
-// Step 컴포넌트들
-const BookingStep1 = ({ bookingData, handleInputChange }) => (
-  <div className="booking-step">
-    <h2 className="step1-text">예약정보입력</h2>
-    <div className="space">
-      <div>
-        <label className="step1-data">날짜</label>
-        <input 
-          type="date"
-          name="date"
-          value={bookingData.date}
-          onChange={handleInputChange}
-          className="step1-input-date"
-          min={new Date().toISOString().split('T')[0]}
-        />
-      </div>
-      <TimeSelection 
-        bookingData={bookingData}
-        handleInputChange={handleInputChange}
-        timeOptions={generateTimeOptions()}
-      />
-      <PeopleInput 
-        bookingData={bookingData}
-        handleInputChange={handleInputChange}
-      />
-      <RequirementsInput 
-        bookingData={bookingData}
-        handleInputChange={handleInputChange}
-      />
-    </div>
-  </div>
-);
-  
-  // Step 2: 예약자 정보
-  const BookingStep2 = ({ bookingData, handleInputChange }) => (
-    <div className="booking-step">
-      <h2 className="step2-info">예약자 정보</h2>
-      <div className="step2-box">
-        <div>
-          <label className="step2-name-label">이름</label>
-          <input
-            type="text"
-            name="name"
-            value={bookingData.name}
-            onChange={handleInputChange}
-            className="step2-name-input"
-          />
-        </div>
-        <div>
-          <label className="step2-phone-label">연락처</label>
-          <input
-            type="tel"
-            name="phone"
-            value={bookingData.phone}
-            onChange={handleInputChange}
-            className="step2-phone-input"
-          />
-        </div>
-        <div>
-          <label className="step2-email-label">이메일</label>
-          <input
-            type="email"
-            name="email"
-            value={bookingData.email}
-            onChange={handleInputChange}
-            className="step2-email-input"
-          />
-        </div>
-      </div>
-    </div>
-  );
-  
-  // Step 3: 결제 정보
-  const BookingStep3 = ({ bookingData, handleInputChange, totalPrice }) => (
-    <div className="booking-step">
-      <h2 className="step3-info">결제 정보</h2>
-      <div className="step3-booking">
-        <div className="step3-money">
-          <h3 className="step3-money-text">결제 금액</h3>
-          <p className="step3-money-detail">
-            {bookingData.startTime} - {bookingData.endTime}
-          </p>
-          <p className="step3-money-small-text">{totalPrice.toLocaleString()}원</p>
-        </div>
-        <div>
-          <label className="step3-paymentMethod-label">결제수단</label>
-          <select
-            name="paymentMethod"
-            value={bookingData.paymentMethod}
-            onChange={handleInputChange}
-            className="step3-paymentMethod-select"
-          >
-            {Object.entries(PAYMENT_METHODS).map(([value, label]) => (
-              <option key={value} value={value}>{label}</option>
-            ))}
-          </select>
-        </div>
-        <div className="step3-flexItem">
-          <input
-            type="checkbox"
-            name="agreement"
-            checked={bookingData.agreement}
-            onChange={handleInputChange}
-            className="step3-flexItem-checkbox"
-          />
-          <label className="step3-text-label">예약 정책에 동의 합니다.</label>
-        </div>
-      </div>
-    </div>
-  );
-  
-  // Step 4: 예약 확인
-  const BookingStep4 = ({ bookingData, bookingInfo, totalPrice }) => (
-    <div className="booking-step">
-      <h2 className="step4-text">예약 확인</h2>
-      <div className="step4-round">
-        <div>
-          <h3 className="step4-booking-info">예약정보</h3>
-          <p>공간: {bookingInfo.title}</p>
-          <p>날짜: {bookingData.date}</p>
-          <p>시간: {bookingData.startTime} ~ {bookingData.endTime}</p>
-          <p>인원: {bookingData.numberOfPeople}명</p>
-          {bookingData.requirements && (
-            <p>요청사항: {bookingData.requirements}</p>
-          )}
-        </div>
-        <div>
-          <h3 className="step4-booking-people">예약자 정보</h3>
-          <p>이름: {bookingData.name}</p>
-          <p>연락처: {bookingData.phone}</p>
-          <p>이메일: {bookingData.email}</p>
-        </div>
-        <div>
-          <h3 className="step4-booking-payment">결제 정보</h3>
-          <p>결제 금액: {totalPrice.toLocaleString()}원</p>
-          <p>결제 수단: {PAYMENT_METHODS[bookingData.paymentMethod]}</p>
-        </div>
-      </div>
-    </div>
-  );
 
 // BookingForm 메인 컴포넌트
 export default function BookingForm() {
@@ -254,12 +20,7 @@ export default function BookingForm() {
   const [bookingData, setBookingData] = useState(initialBookingData);
   const [totalPrice, setTotalPrice] = useState(0);
 
-  const calculatePrice = (start, end) => {
-    if (!start || !end) return 0;
-    const [startHour, endHour] = [start, end].map(time => 
-      parseInt(time.split(':')[0]));
-    return Math.max(0, endHour - startHour) * CONSTANTS.HOURLY_RATE;
-  };
+
 
   const handleInputChange = (e) => {
     const { name, value, type, checked } = e.target;
@@ -289,34 +50,12 @@ export default function BookingForm() {
     }
   };
 
-  const renderStepIndicator = () => (
-    <div className="booking-content">
-      <div className="booking-date">
-        {Array.from({ length: CONSTANTS.STEPS }, (_, i) => i + 1).map((stepNum) => (
-          <div
-            key={stepNum}
-            className={`w-8 h-8 rounded-full flex items-center justify-center ${
-              step >= stepNum ? 'bg-blue-500 text-white' : 'bg-gray-200'
-            }`}
-          >
-            {stepNum}
-          </div>
-        ))}
-      </div>
-      <div className="booking-date-box">
-        <div
-          className="booking-date-round"
-          style={{ width: `${(step / CONSTANTS.STEPS) * 100}%` }}
-        />
-      </div>
-    </div>
-  );
 
   return (
     <>
     <div className="bookingheader"></div>
       <div className="booking-container">
-      {renderStepIndicator()}
+      <RenderStepIndicator currentStep={step} totalStep={CONSTANTS.STEPS} />
       <form onSubmit={handleSubmit}>
         {step === 1 && <BookingStep1 bookingData={bookingData} handleInputChange={handleInputChange} />}
         {step === 2 && <BookingStep2 bookingData={bookingData} handleInputChange={handleInputChange} />}
diff --git a/src/pages/spaceDetail.js b/src/pages/spaceDetail.js
index 5bfa455..a812301 100644
--- a/src/pages/spaceDetail.js
+++ b/src/pages/spaceDetail.js
@@ -22,7 +22,7 @@ export default function SpaceDetail({type: propType}) {
         {
             id: 1,
             name: "숲속 글램핑 파크",
-            space_type: "camping",
+            space_type: "CAMPING",
             location: "강원도 춘천시",
             price: "월 500,000원",
             space_size: "500평",
@@ -39,7 +39,7 @@ export default function SpaceDetail({type: propType}) {
         {
             id: 2,
             name: "사운드웨이브 스튜디오",
-            space_type: "rehearsal",
+            space_type: "PLAYING",
             location: "서울시 마포구",
             price: "월 800,000원",
             space_size: "50평",
diff --git a/src/pages/spaceList.js b/src/pages/spaceList.js
index 671bcb8..f845a51 100644
--- a/src/pages/spaceList.js
+++ b/src/pages/spaceList.js
@@ -13,7 +13,7 @@ export default function SpaceList({type:propType}) {
     const spacesData = [
         {
             id: 1,
-            space_type: 'camping',
+            space_type: 'CAMPING',
             vendor_id: 'camping_lover',
             name: '숲속 글램핑 파크',
             open_time: '09:00',
@@ -49,7 +49,7 @@ export default function SpaceList({type:propType}) {
         },
         {
             id: 2,
-            space_type: 'rehearsal',
+            space_type: 'PLAYING',
             vendor_id: 'music_master',
             name: '사운드웨이브 스튜디오',
             open_time: '10:00',
diff --git a/src/styles/spaceList.css b/src/styles/spaceList.css
index 853caf7..6f4b308 100644
--- a/src/styles/spaceList.css
+++ b/src/styles/spaceList.css
@@ -25,7 +25,8 @@
 .space-box {
   width: calc(25% - 40px);
   height: 420px;
-  border-radius: 20px;
+  border-radius: 24px;
+  padding: 8px;
   margin: 10px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
@@ -33,6 +34,7 @@
 }
 
 .space-box:hover {
+  cursor: pointer;
   transform: translateY(-8px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }
@@ -52,7 +54,7 @@
 }
 
 /* 합주실 타입 스타일 */
-.space-box.rehearsal-box {
+.space-box {
   background: linear-gradient(135deg, #ffe6d5, #d4f0ff);
 }
 
@@ -68,9 +70,9 @@
 /* 카드 내부 콘텐츠 스타일 */
 .list-with-box {
   width: 92%;
-  height: 92%;
+  height: 93%;
   background: rgba(255, 255, 255, 0.95);
-  border-radius: 18px;
+  border-radius: 16px;
   padding: 20px;
   display: flex;
   flex-direction: column;
diff --git a/src/utils/timeUtils.js b/src/utils/timeUtils.js
new file mode 100644
index 0000000..c27811b
--- /dev/null
+++ b/src/utils/timeUtils.js
@@ -0,0 +1,17 @@
+import { CONSTANTS } from '../constants/bookingIndex';
+
+// 시간 옵션 생성 유틸리티 함수
+export const generateTimeOptions = () => 
+    Array.from({ length: 24 }, (_, i) => ({
+      value: `${i.toString().padStart(2, '0')}:00`,
+      label: `${i.toString().padStart(2, '0')}:00`
+    }));
+
+    
+export const calculatePrice 
+= (start, end) => {
+    if (!start || !end) return 0;
+    const [startHour, endHour] = [start, end].map(time => 
+        parseInt(time.split(':')[0]));
+    return Math.max(0, endHour - startHour) * CONSTANTS.HOURLY_RATE;
+    };
\ No newline at end of file