Merge pull request #180 from TEAM-BEAT/fix/#178/FixLookupDesign

[Fix/#178] 예매 조회 페이지 변경사항 반영
TEAM-BEAT · Jul 16, 2024 · 597955a · 597955a
2 parents 16a6c02 + 896ca05
commit 597955a
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 36 deletions.
diff --git a/src/components/commons/button/Button.styled.ts b/src/components/commons/button/Button.styled.ts
@@ -101,13 +101,9 @@ export const DefaultBtn = styled.button<DefaultBtnPropTypes>`
             `;
       case "blue":
         return css`
-          width: 32.7rem;
-          height: 5.6rem;
-
           color: ${({ theme }) => theme.colors.white};
 
           background-color: ${({ theme }) => theme.colors.blue_400};
-          ${({ theme }) => theme.fonts["body1-normal-semi"]};
         `;
     }
   }}

diff --git a/src/pages/book/components/paidBook/PaidBook.tsx b/src/pages/book/components/paidBook/PaidBook.tsx
@@ -68,7 +68,7 @@ const PaidBook = ({ id, title, bankName, accountNumber, price }: PaidBookProps)
         </S.DepositContainer>
 
         <S.FloatingWrapper>
-          <Button variant="blue" onClick={handleDepositClick}>
+          <Button variant="blue" size="xlarge" onClick={handleDepositClick}>
             토스로 송금하기
           </Button>
           <S.GigButtonBox onClick={navigateGig}>

diff --git a/src/pages/lookup/components/LookupCard.styled.ts b/src/pages/lookup/components/LookupCard.styled.ts
@@ -4,27 +4,30 @@ import { IconArrowRight } from "@assets/svgs";
 export const LookupCardWrapper = styled.section`
   display: flex;
   flex-direction: column;
-  gap: 1.2rem;
+  gap: 0.8rem;
   width: 21.4rem;
   height: 19.8rem;
-  padding: 1.8rem 2rem;
+  padding: 1.4rem 2rem;
 
   background-color: ${({ theme }) => theme.colors.gray_800};
   border-radius: 0.6rem;
 `;
 
 export const LookupTitleWrapper = styled.button`
   display: flex;
+  width: 17.5rem;
 `;
 
 export const LookupTitle = styled.div`
-  display: flex;
+  display: block;
+  flex: 1;
   width: 17.3rem;
   overflow: hidden;
 
   color: ${({ theme }) => theme.colors.gray_0};
   ${({ theme }) => theme.fonts["body2-normal-medi"]};
   white-space: nowrap;
+  text-align: start;
   text-overflow: ellipsis;
 `;
 
@@ -34,7 +37,9 @@ export const TitleArrowRightIcon = styled(IconArrowRight)`
   width: 1.8rem;
   height: 1.8rem;
 
-  fill: ${({ theme }) => theme.colors.gray_400};
+  path {
+    fill: ${({ theme }) => theme.colors.gray_400};
+  }
 `;
 
 export const BoxDivider = styled.div`
@@ -47,9 +52,10 @@ export const BoxDivider = styled.div`
 `;
 
 export const ContextLayout = styled.section`
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.7rem;
   height: 12.2rem;
 `;
 
@@ -75,7 +81,9 @@ export const Text = styled.div`
 
 export const DepositLayout = styled.section`
   display: flex;
-  gap: 0.8rem;
+  gap: 1.3rem;
+  align-items: center;
+  justify-content: center;
 `;
 
 export const CheckingDeposit = styled.div`
@@ -93,22 +101,23 @@ export const CheckedDeposit = styled.div`
 `;
 
 export const AccountLayout = styled.button`
+  position: absolute;
+  right: 0;
+  bottom: -1.3rem;
   display: flex;
-  gap: 0.4rem;
   align-items: center;
+  width: 5.7rem;
+  padding: 0.4rem 0.8rem;
+
+  background-color: ${({ theme }) => theme.colors.gray_700};
+  border: 1px solid ${({ theme }) => theme.colors.gray_500};
+  border-radius: 0.4rem;
 `;
 
 export const Account = styled.div`
   width: 4rem;
 
   ${({ theme }) => theme.fonts["caption2-medi"]};
 
-  color: ${({ theme }) => theme.colors.gray_400};
-`;
-
-export const ArrowRightIcon = styled(IconArrowRight)`
-  width: 0.8rem;
-  height: 0.8rem;
-
-  fill: ${({ theme }) => theme.colors.gray_400};
+  color: ${({ theme }) => theme.colors.gray_100};
 `;
diff --git a/src/pages/lookup/components/LookupCard.tsx b/src/pages/lookup/components/LookupCard.tsx
@@ -14,19 +14,31 @@ const LookupCard = ({
   paymentStatus,
   bankName,
   accountNumber,
+  dueDate,
+  price,
 }: LookupProps) => {
   const navigate = useNavigate();
 
   const createdAtString = createdAt.slice(0, 10);
   const createDataArray = createdAtString.split("-");
 
   const performanceDateArray = performanceDate.split("-");
+  const totalPrice = (price * purchaseTicketCount).toLocaleString("ko-KR");
 
   const { openModal } = useModal();
 
   const handleModal = (bank: string, number: string) => {
     openModal({
-      children: <BankAccount bankName={bank} number={number} />,
+      // 예금주랑 가격은 내일 API 명세서 보고 맞추기
+      children: (
+        <BankAccount
+          bankName={bank}
+          number={number}
+          accountName="전희주"
+          accountNumber={accountNumber}
+          price={5000}
+        />
+      ),
     });
   };
 
@@ -51,17 +63,19 @@ const LookupCard = ({
             {performanceDateArray[0]}년 {performanceDateArray[1]}월 {performanceDateArray[2]}일
           </S.Text>
         </S.Context>
-        <S.Context>
-          <S.SubTitle>관람회차</S.SubTitle>
-          <S.Text>{scheduleNumber}회차</S.Text>
-        </S.Context>
         <S.Context>
           <S.SubTitle>공연장소</S.SubTitle>
           <S.Text>{performanceVenue}</S.Text>
         </S.Context>
         <S.Context>
-          <S.SubTitle>매수</S.SubTitle>
-          <S.Text>{purchaseTicketCount}매</S.Text>
+          <S.SubTitle>관람회차</S.SubTitle>
+          <S.Text>
+            {scheduleNumber}회차 {purchaseTicketCount}매
+          </S.Text>
+        </S.Context>
+        <S.Context>
+          <S.SubTitle>총 금액</S.SubTitle>
+          <S.Text>{totalPrice}원</S.Text>
         </S.Context>
         <S.Context>
           <S.SubTitle>입금상태</S.SubTitle>
@@ -71,12 +85,15 @@ const LookupCard = ({
             ) : (
               <S.CheckedDeposit>입금 완료</S.CheckedDeposit>
             )}
-            <S.AccountLayout onClick={() => handleModal(bankName, accountNumber)}>
-              <S.Account>계좌번호</S.Account>
-              <S.ArrowRightIcon />
-            </S.AccountLayout>
           </S.DepositLayout>
         </S.Context>
+        {dueDate >= 0 ? (
+          <S.AccountLayout onClick={() => handleModal(bankName, accountNumber)}>
+            <S.Account>계좌번호</S.Account>
+          </S.AccountLayout>
+        ) : (
+          <></>
+        )}
       </S.ContextLayout>
     </S.LookupCardWrapper>
   );

diff --git a/src/pages/lookup/dummyData.ts b/src/pages/lookup/dummyData.ts
@@ -16,6 +16,7 @@ export const dummyData = [
     dueDate: 2,
     paymentStatus: false, // 입금 확인중
     createdAt: "2023-11-18T12:34:56.789Z",
+    price: 5000,
   },
   {
     userId: 1,
@@ -34,6 +35,7 @@ export const dummyData = [
     dueDate: -1, // -1이면 관람완료!
     paymentStatus: true, // 입금 완료
     createdAt: "2023-11-18T12:34:56.789Z",
+    price: 2000,
   },
   {
     userId: 1,
@@ -52,5 +54,6 @@ export const dummyData = [
     dueDate: 0, // -1이면 관람완료!
     paymentStatus: true, // 입금 완료
     createdAt: "2023-11-18T12:34:56.789Z",
+    price: 7000,
   },
 ];
diff --git a/src/pages/lookup/types/lookupType.ts b/src/pages/lookup/types/lookupType.ts
@@ -15,6 +15,7 @@ export interface LookupProps {
   dueDate: number;
   paymentStatus: boolean;
   createdAt: string;
+  price: number;
   handleBtn?: () => void;
   handleAccount?: () => void;
 }
diff --git a/src/pages/modalTest/BankAccount.tsx b/src/pages/modalTest/BankAccount.tsx
@@ -8,9 +8,12 @@ import styled from "styled-components";
 interface BankNumberProps {
   bankName: string;
   number: string;
+  accountName: string;
+  accountNumber: string;
+  price: number;
 }
 
-const BankAccount = ({ bankName, number }: BankNumberProps) => {
+const BankAccount = ({ bankName, number, accountName, accountNumber, price }: BankNumberProps) => {
   const { showToast, isToastVisible } = useToast();
 
   const handleCopyClipBoard = (text: string) => {
@@ -19,19 +22,33 @@ const BankAccount = ({ bankName, number }: BankNumberProps) => {
     showToast();
   };
 
+  const handleDepositClick = () => {
+    window.open(
+      `supertoss://send?bank=${bankName}&accountNo=${accountNumber}&origin=linkgen&amount=${price}`
+    );
+  };
+
   const { closeModal } = useModal();
   return (
     <Wrapper>
       <Container>
-        <Text>{bankName}</Text>
+        <Text>
+          {bankName} ({accountName})
+        </Text>
         <Box>
           <Text>{number}</Text>
           <StyledIconCopy onClick={() => handleCopyClipBoard(number)} />
         </Box>
       </Container>
-      <Button size="large" variant="gray" onClick={closeModal}>
-        닫기
-      </Button>
+      <BtnWrapper>
+        <Button size="small" variant="gray" onClick={closeModal}>
+          닫기
+        </Button>
+        <Button size="small" variant="blue" onClick={handleDepositClick}>
+          토스로 송금
+        </Button>
+      </BtnWrapper>
+
       <Toast icon={<IconCheck />} isVisible={isToastVisible} toastBottom={30}>
         클립보드에 복사되었습니다!
       </Toast>
@@ -65,6 +82,11 @@ const Box = styled.div`
   justify-content: center;
 `;
 
+const BtnWrapper = styled.section`
+  display: flex;
+  gap: 0.7rem;
+`;
+
 const StyledIconCopy = styled(IcomCopy)`
   box-sizing: content-box;
   width: 2.4rem;