Merge pull request #123 from MUIT-UMC/114/refactor-디테일-수정

ddhi7 · web-flow · commit bab5ba8773f1 · 2025-02-20T17:55:01.000+09:00
예매절차 디테일
diff --git a/src/components/buy/Step1.jsx b/src/components/buy/Step1.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import {useLocation,  useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { useParams } from 'react-router-dom';
 
@@ -30,6 +30,10 @@ const Step1 = () => {
         setPeopleCount(event.target.value);
     };
 
+    const handleNextStep = () => {
+      navigate("./step2", { state: { peopleCount,ticketInfo, } }); // 인원 정보 전달
+  };
+
     return (
       <Container>
         <LeftSection>
@@ -60,7 +64,7 @@ const Step1 = () => {
               </TicketRow>
             </TicketDetails>
           </Info>
-          <Button onClick={() => navigate("./step2")}>예약하기</Button>
+          <Button  onClick={handleNextStep}>예약하기</Button>
         </RightSection>
       </Container>
     );
diff --git a/src/components/buy/Step2.jsx b/src/components/buy/Step2.jsx
@@ -7,13 +7,16 @@ import { useParams } from 'react-router-dom';
 import useCustomFetch from "../../hooks/useCustomFetch";
 //const token = import.meta.env.VITE_APP_ACCESS_TOKEN;
 const token = localStorage.getItem("accessToken");
-
+import { useLocation } from "react-router-dom";
 
 // Step2 - 할인 선택
 const Step2 = () => {
 
   const {amateurId} = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
+  const peopleCount = location.state?.peopleCount || 1;
+  const [selectedTicketId, setSelectedTicketId] = useState("1");
     
   const url = `/tickets/${amateurId}/ticketInfo`;
   const { data, error, loading } = useCustomFetch(url, {
@@ -27,6 +30,26 @@ const Step2 = () => {
 
   const ticketInfo = data.result;
 
+
+  // 🎯 선택된 티켓 정보 찾기
+  const selectedTicket = ticketInfo.tickets.find(ticket => ticket.amateurTicketId === selectedTicketId);
+  const ticketPrice = selectedTicket ? selectedTicket.price : 0;
+
+  // 🎯 할인 선택 핸들러
+  const handleDiscountChange = (event) => {
+    setSelectedTicketId(event.target.value);
+  };
+  const handleNextStep = () => {
+    navigate('../step3', {
+      state: {
+        peopleCount,
+        selectedTicketId,
+        ticketInfo,
+      },
+    });
+  };
+  
+
     return (
         <Container>
         <Sidebar>
@@ -44,13 +67,25 @@ const Step2 = () => {
             <DiscountTitle>할인 선택</DiscountTitle>
             <Options>
               <Option>
-                <RadioButton type="radio" name="discount" defaultChecked /> 할인 없음
+                <RadioButton type="radio" 
+                  name="discount" 
+                  value="1" 
+                  checked={selectedTicketId === "1"} 
+                  onChange={handleDiscountChange} /> 할인 없음
               </Option>
               <Option>
-                <RadioButton type="radio" name="discount" /> 홍대생 할인
+                <RadioButton type="radio" 
+                  name="discount" 
+                  value="2" 
+                  checked={selectedTicketId === "2"} 
+                  onChange={handleDiscountChange} /> 홍대생 할인
               </Option>
               <Option>
-                <RadioButton type="radio" name="discount" /> 지인 할인
+                <RadioButton  type="radio" 
+                  name="discount" 
+                  value="2" 
+                  checked={selectedTicketId === "2"} 
+                  onChange={handleDiscountChange} /> 지인 할인
               </Option>
             </Options>
           </DiscountBox>
@@ -62,25 +97,21 @@ const Step2 = () => {
             </Row>
             <Row>
               <Label>인원</Label>
-              <Value>1</Value>
+              <Value>{peopleCount}</Value>
             </Row>
             <Row>
               <Label>티켓 금액</Label>
-              <Value>{ticketInfo.tickets.price}</Value>
-            </Row>
-            <Row>
-              <Label>할인</Label>
-              <Value active>0원</Value>
+              <Value>{ticketPrice.toLocaleString()}원</Value>
             </Row>
             <Row>
               <Label>배송료</Label>
               <Value>-</Value>
             </Row>
             <TotalRow>
             <TotalLabel>총 결제 금액</TotalLabel>
-            <TotalValue>{ticketInfo.tickets.price}</TotalValue>
+            <TotalValue>{(ticketPrice * peopleCount).toLocaleString()}원</TotalValue>
           </TotalRow>
-          <Button onClick={() => navigate('../step3')} active>다음</Button>  {/* 이전 페이지로 이동 */}
+          <Button onClick={handleNextStep} active>다음</Button>  {/* 이전 페이지로 이동 */}
         <Button onClick={() => navigate('..')}>이전</Button>  {/* 다음 페이지로 이동 */}
           </Summary>
         </Content>
diff --git a/src/components/buy/Step3.jsx b/src/components/buy/Step3.jsx
@@ -7,12 +7,15 @@ import { useParams } from 'react-router-dom';
 import useCustomFetch from "../../hooks/useCustomFetch";
 //const token = import.meta.env.VITE_APP_ACCESS_TOKEN;
 const token = localStorage.getItem("accessToken");
+import { useLocation } from "react-router-dom";
 
 
 // Step3 - 배송 선택 및 주문자 확인
 const Step3 = () => {
   const {amateurId} = useParams();
   const navigate = useNavigate();
+    const location = useLocation();
+    const { peopleCount = 1, selectedTicketId = '1' } = location.state || {};
   
   const url = `/tickets/${amateurId}/ticketInfo`;
   const { data, error, loading } = useCustomFetch(url, {
@@ -27,6 +30,25 @@ const Step3 = () => {
 
   const ticketInfo = data.result;
   const memberInfo = data.result.reserveConfirmMemberDTO;
+
+  // 선택된 티켓 정보 찾기
+  const selectedTicket = ticketInfo.tickets.find(
+    (ticket) => ticket.amateurTicketId === selectedTicketId
+  );
+  const ticketPrice = selectedTicket ? selectedTicket.price : 0;
+  // 총 결제 금액 계산
+  const totalAmount = ticketPrice * peopleCount;
+
+  const handleNextStep = () => {
+    navigate('../step4', {
+      state: {
+        peopleCount,
+        selectedTicketId,
+        ticketInfo,
+      },
+    });
+  };
+  
       
      return (
       <Container>
@@ -40,7 +62,6 @@ const Step3 = () => {
           <LeftContent>
         <Title>{ticketInfo.name}</Title>
         <Subtitle>{ticketInfo.place}</Subtitle>
-        <DateRange>{ticketInfo.schedule}</DateRange>
         <DiscountBox>
           <DiscountTitle>티켓 수령 방법</DiscountTitle>
           <Options>
@@ -75,25 +96,21 @@ const Step3 = () => {
           </Row>
           <Row>
             <Label>인원</Label>
-            <Value>1</Value>
+            <Value>{peopleCount}</Value>
           </Row>
           <Row>
             <Label>티켓 금액</Label>
-            <Value>{ticketInfo.tickets.price}</Value>
-          </Row>
-          <Row>
-            <Label>할인</Label>
-            <Value active>-3000원</Value>
+            <Value>{ticketPrice.toLocaleString()}원</Value>
           </Row>
           <Row>
             <Label>배송료</Label>
             <Value>0원 (현장수령)</Value>
           </Row>
           <TotalRow>
           <TotalLabel>총 결제 금액</TotalLabel>
-          <TotalValue>{ticketInfo.tickets.price}</TotalValue>
+          <TotalValue>{totalAmount.toLocaleString()}원</TotalValue>
         </TotalRow>
-        <Button onClick={() => navigate('../step4')} active>다음</Button>  {/* 이전 페이지로 이동 */}
+        <Button onClick={handleNextStep} active>다음</Button>  {/* 이전 페이지로 이동 */}
       <Button onClick={() => navigate('../step2')}>이전</Button>  {/* 다음 페이지로 이동 */}
       </Summary>
         </Content>
diff --git a/src/components/buy/Step4.jsx b/src/components/buy/Step4.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
 
 // const token = import.meta.env.VITE_APP_ACCESS_TOKEN;
@@ -10,10 +10,10 @@ const Step4 = () => {
   const navigate = useNavigate();
   const { amateurId } = useParams();
   const [accountName, setAccountName] = useState("");
-  const [quantity] = useState(1);
   const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const isButtonActive = accountName.trim().length > 0;
+  const isButtonActive = accountName.trim().length > 0;  
+  const location = useLocation();
+  const { peopleCount, selectedTicketId,ticketInfo } = location.state || {};
 
   const handleSubmit = async () => {
     if (!isButtonActive || isSubmitting) return;
@@ -31,7 +31,7 @@ const Step4 = () => {
         },
         body: JSON.stringify({
           accountName,
-          quantity: 1,
+          quantity: peopleCount,
         }),
       });
   
@@ -50,6 +50,13 @@ const Step4 = () => {
       setIsSubmitting(false);
     }
   };
+    // 선택된 티켓 정보 찾기
+    const selectedTicket = ticketInfo.tickets.find(
+      (ticket) => ticket.amateurTicketId === selectedTicketId
+    );
+    const ticketPrice = selectedTicket ? selectedTicket.price : 0;
+    // 총 결제 금액 계산
+    const totalAmount = ticketPrice * peopleCount;
 
   return (
     <Container>
@@ -61,9 +68,8 @@ const Step4 = () => {
       </Sidebar>
       <Content>
         <LeftContent>
-          <Title>실종</Title>
-          <Subtitle>홍익대학교 학생회관 3층 소극장</Subtitle>
-          <DateRange>2024.10.03~2024.10.05</DateRange>
+          <Title>{ticketInfo.name}</Title>
+          <Subtitle>{ticketInfo.place}</Subtitle>
           <DiscountBox>
             <DiscountTitle>결제수단</DiscountTitle>
             <Options>
@@ -84,29 +90,26 @@ const Step4 = () => {
         <Summary>
           <Row>
             <Label>일시</Label>
-            <Value>2024.10.03 (목) 19:00</Value>
+            <Value>{ticketInfo.schedule}</Value>
           </Row>
           <Row>
             <Label>인원</Label>
-            <Value>1</Value>
+            <Value>{peopleCount}</Value>
           </Row>
           <Row>
             <Label>티켓 금액</Label>
-            <Value>10,000원</Value>
-          </Row>
-          <Row>
-            <Label>할인</Label>
-            <Value $active>-3000원</Value>
+            <Value>{ticketPrice.toLocaleString()}원</Value>
           </Row>
           <Row>
             <Label>배송료</Label>
             <Value>0원 (현장수령)</Value>
           </Row>
           <TotalRow>
             <TotalLabel>총 결제 금액</TotalLabel>
-            <TotalValue>7,000원</TotalValue>
+            <TotalValue>{totalAmount.toLocaleString()}원</TotalValue>
           </TotalRow>
-          <Button onClick={handleSubmit} $active={isButtonActive && !isSubmitting} disabled={isSubmitting}>
+          <Button 
+          onClick={handleSubmit} >
             {isSubmitting ? '결제 처리 중...' : '다음'}
           </Button>
           <PreButton onClick={() => navigate('../step3')}>이전</PreButton>
@@ -196,18 +199,6 @@ line-height: 25px; /* 156.25% */
   margin-bottom: 3px;
 `;
 
-const DateRange = styled.div`
- color: #919191;
-
-/* Body-tiny-md */
-font-family: Inter;
-font-size: 14px;
-font-style: normal;
-font-weight: 500;
-line-height: 18px; /* 128.571% */
-  margin-bottom: 20px;
-`;
-
 const DiscountBox = styled.div`
 display: flex;
 width: 376px;
@@ -378,8 +369,8 @@ line-height: normal;
 
 const Button = styled.button`
 border-radius: 3px;
-border: 1px solid  ${({ active }) => (active ? "#A00000" : "#919191")};
-background: ${({ active }) => (active ? "#A00000" : "#919191")};
+border: 1px solid ;
+background: #A00000;
 display: flex;
 width: 400px;
 height: 40px;
diff --git a/src/pages/small-theater/SmallDetail.jsx b/src/pages/small-theater/SmallDetail.jsx
@@ -40,22 +40,19 @@ function SmallDetail() {
 
   const imageUrls = musical.notice.imgUrls; 
   const poster =  musical.posterImgUrl
-  const detailImg=DetailImg;
   const details = [
     { label: "장소", value: musical.place},
     { label: "공연 기간", value: musical.schedule },
     { label: "공연 시간", value: musical.runtime },
     { label: "관람 연령", value:musical.age },
     { label: "출연", value: musical.starring },
-    { label: "가격", value: <Price>
-      <div className="item">
-        <div className="type">일반예매</div>
-        <div className="price">10,000원</div>
-      </div>
-      <div className="item">
-        <div className="type">지인, 홍대생 할인</div>
-        <div className="price">7,000원</div>
-      </div>
+    { label: "가격", value:  <Price>
+      {musical.tickets.map((ticket, index) => (
+        <div className="item" key={index}>
+          <div className="type">{ticket.ticketName}</div>
+          <div className="price">{ticket.price}원</div>
+        </div>
+      ))}
     </Price> }, // 가격 상세 구현 필요
     { label: "티켓 수", value: "200매 (표가 없을 시 구매 불가)" },
   ];
