Merge pull request #8 from Spaces-Place/dusqo

임대 컴포넌트 분리
Spaces-Place · Nov 19, 2024 · fd9e39b · fd9e39b
2 parents 97bd8e0 + 47f06bd
commit fd9e39b
Show file tree

Hide file tree

Showing 16 changed files with 317 additions and 284 deletions.
diff --git 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
@@ -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>
+  );
+
diff --git a/src/components/RenderStepIndicator.js 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
@@ -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>
+);
diff --git a/src/components/TimeSelection.js 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>
+);
diff --git a/src/components/steps/BookingStep1.js 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
diff --git a/src/components/steps/BookingStep2.js 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>
+  );
diff --git a/src/components/steps/BookingStep3.js 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>
+  );
diff --git a/src/components/steps/BookingStep4.js 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>
+  );
diff --git a/src/constants/bookingIndex.js 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: '가상계좌'
+  };
diff --git 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" },