diff --git a/src/components/commons/button/Button.styled.ts b/src/components/commons/button/Button.styled.ts index 1c10e855..1b334215 100644 --- 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` `; 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 index f285353a..97f0de9c 100644 --- 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) - diff --git a/src/pages/lookup/components/LookupCard.styled.ts b/src/pages/lookup/components/LookupCard.styled.ts index 8cf9087a..1b16959a 100644 --- a/src/pages/lookup/components/LookupCard.styled.ts +++ b/src/pages/lookup/components/LookupCard.styled.ts @@ -4,10 +4,10 @@ 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; @@ -15,16 +15,19 @@ export const LookupCardWrapper = styled.section` 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,9 +101,17 @@ 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` @@ -103,12 +119,5 @@ export const Account = styled.div` ${({ 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 index 594820e9..99af9fb4 100644 --- a/src/pages/lookup/components/LookupCard.tsx +++ b/src/pages/lookup/components/LookupCard.tsx @@ -14,6 +14,8 @@ const LookupCard = ({ paymentStatus, bankName, accountNumber, + dueDate, + price, }: LookupProps) => { const navigate = useNavigate(); @@ -21,12 +23,22 @@ const LookupCard = ({ 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: , + // 예금주랑 가격은 내일 API 명세서 보고 맞추기 + children: ( + + ), }); }; @@ -51,17 +63,19 @@ const LookupCard = ({ {performanceDateArray[0]}년 {performanceDateArray[1]}월 {performanceDateArray[2]}일 - - 관람회차 - {scheduleNumber}회차 - 공연장소 {performanceVenue} - 매수 - {purchaseTicketCount}매 + 관람회차 + + {scheduleNumber}회차 {purchaseTicketCount}매 + + + + 총 금액 + {totalPrice}원 입금상태 @@ -71,12 +85,15 @@ const LookupCard = ({ ) : ( 입금 완료 )} - handleModal(bankName, accountNumber)}> - 계좌번호 - - + {dueDate >= 0 ? ( + handleModal(bankName, accountNumber)}> + 계좌번호 + + ) : ( + <> + )} ); diff --git a/src/pages/lookup/dummyData.ts b/src/pages/lookup/dummyData.ts index f258d216..ebac6ba0 100644 --- 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 index ff0be634..06dcf579 100644 --- 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 index 9172ba84..04446adf 100644 --- 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 ( - {bankName} + + {bankName} ({accountName}) + {number} handleCopyClipBoard(number)} /> - + + + + + } isVisible={isToastVisible} toastBottom={30}> 클립보드에 복사되었습니다! @@ -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;