From f7e1cb9c4bccc195b2fc01d28afcbe1c4658e9bf Mon Sep 17 00:00:00 2001 From: Sinji Date: Wed, 10 Jul 2024 02:19:15 +0900 Subject: [PATCH 01/22] =?UTF-8?q?feat:=20=EB=B9=84=ED=9A=8C=EC=9B=90=20?= =?UTF-8?q?=EC=98=88=EB=A7=A4=20=EC=A1=B0=ED=9A=8C=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/lookup/Lookup.styled.ts | 5 ++ src/pages/lookup/Lookup.tsx | 12 +++- .../lookup/components/LookupCard.styled.ts | 56 +++++++++++++++++++ src/pages/lookup/components/LookupCard.tsx | 38 +++++++++++++ .../lookup/components/LookupWrapper.styled.ts | 29 ++++++++++ src/pages/lookup/components/LookupWrapper.tsx | 22 ++++++++ .../nonExistent/NonExistent.styled.ts | 0 .../components/nonExistent/NonExistent.tsx | 7 +++ src/pages/lookup/dummyData.ts | 54 ++++++++++++++++++ 9 files changed, 222 insertions(+), 1 deletion(-) create mode 100644 src/pages/lookup/Lookup.styled.ts create mode 100644 src/pages/lookup/components/LookupCard.styled.ts create mode 100644 src/pages/lookup/components/LookupCard.tsx create mode 100644 src/pages/lookup/components/LookupWrapper.styled.ts create mode 100644 src/pages/lookup/components/LookupWrapper.tsx create mode 100644 src/pages/lookup/components/nonExistent/NonExistent.styled.ts create mode 100644 src/pages/lookup/components/nonExistent/NonExistent.tsx create mode 100644 src/pages/lookup/dummyData.ts diff --git a/src/pages/lookup/Lookup.styled.ts b/src/pages/lookup/Lookup.styled.ts new file mode 100644 index 00000000..20c180cf --- /dev/null +++ b/src/pages/lookup/Lookup.styled.ts @@ -0,0 +1,5 @@ +import styled from "styled-components"; + +export const LookupWrapper = styled.section` + width: auto; +`; diff --git a/src/pages/lookup/Lookup.tsx b/src/pages/lookup/Lookup.tsx index c8409f0a..b4abe4b3 100644 --- a/src/pages/lookup/Lookup.tsx +++ b/src/pages/lookup/Lookup.tsx @@ -1,5 +1,15 @@ +import * as S from "./Lookup.styled"; +import { dummyData } from "./dummyData"; + +import NonExistent from "./components/nonExistent/NonExistent"; +import LookupWrapper from "./components/LookupWrapper"; + const Lookup = () => { - return
Lookup
; + return ( + + {dummyData.length ? : } + + ); }; export default Lookup; diff --git a/src/pages/lookup/components/LookupCard.styled.ts b/src/pages/lookup/components/LookupCard.styled.ts new file mode 100644 index 00000000..e349b748 --- /dev/null +++ b/src/pages/lookup/components/LookupCard.styled.ts @@ -0,0 +1,56 @@ +import styled from "styled-components"; + +export const LookupCardWrapper = styled.section` + display: flex; + flex-direction: column; + gap: 1.2rem; + width: 21.4rem; + height: 19.8rem; + padding: 2rem; + + background-color: ${({ theme }) => theme.colors.gray_800}; + border-radius: 0.6rem; +`; + +export const LookupTitle = styled.h1` + display: flex; + + color: ${({ theme }) => theme.colors.gray_0}; + + ${({ theme }) => theme.fonts["body2-normal-medi"]}; +`; + +export const BoxDivider = styled.div` + display: flex; + width: 100%; + + color: ${({ theme }) => theme.colors.gray_700}; + + border-top: 0.1rem solid; +`; + +export const ContextLayout = styled.section` + display: flex; + flex-direction: column; + gap: 0.4rem; + height: 12.2rem; +`; + +export const Context = styled.section` + display: flex; + gap: 1.2rem; +`; + +export const SubTitle = styled.div` + display: flex; + + ${({ theme }) => theme.fonts["caption2-medi"]}; + color: ${({ theme }) => theme.colors.gray_400}; +`; + +export const Text = styled.div` + display: flex; + + ${({ theme }) => theme.fonts["caption2-medi"]}; + color: ${({ theme }) => theme.colors.gray_0}; +`; diff --git a/src/pages/lookup/components/LookupCard.tsx b/src/pages/lookup/components/LookupCard.tsx new file mode 100644 index 00000000..1da8afc5 --- /dev/null +++ b/src/pages/lookup/components/LookupCard.tsx @@ -0,0 +1,38 @@ +import * as S from "./LookupCard.styled"; + +const LookupCard = () => { + return ( + + Title + + + + 제목 + 내용 + + + 제목 + 내용 + + + 제목 + 내용 + + + 제목 + 내용 + + + 제목 + 내용 + + + 제목 + 내용 + + + + ); +}; + +export default LookupCard; diff --git a/src/pages/lookup/components/LookupWrapper.styled.ts b/src/pages/lookup/components/LookupWrapper.styled.ts new file mode 100644 index 00000000..d00d773f --- /dev/null +++ b/src/pages/lookup/components/LookupWrapper.styled.ts @@ -0,0 +1,29 @@ +import styled from "styled-components"; + +export const LookupLayout = styled.section` + display: flex; + width: auto; +`; + +// layout + contextBox => 얘를 map 돌리기 +export const LookupContainer = styled.section` + display: flex; + gap: 0.8rem; + width: auto; + padding: 2.4rem; +`; + +// 사진 및 취소하기 버튼 +export const LookupCardLeft = styled.section` + display: flex; + flex-direction: column; + gap: 0.8rem; +`; + +export const TempImage = styled.div` + width: 10.5rem; + height: 15.4rem; + + background-color: ${({ theme }) => theme.colors.white}; + border-radius: 0.6rem; +`; diff --git a/src/pages/lookup/components/LookupWrapper.tsx b/src/pages/lookup/components/LookupWrapper.tsx new file mode 100644 index 00000000..9df15775 --- /dev/null +++ b/src/pages/lookup/components/LookupWrapper.tsx @@ -0,0 +1,22 @@ +import * as S from "./LookupWrapper.styled"; + +import Button from "@components/commons/button/Button"; +import LookupCard from "./LookupCard"; + +const LookupWrapper = () => { + return ( + + + + + + + + + + ); +}; + +export default LookupWrapper; diff --git a/src/pages/lookup/components/nonExistent/NonExistent.styled.ts b/src/pages/lookup/components/nonExistent/NonExistent.styled.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/lookup/components/nonExistent/NonExistent.tsx b/src/pages/lookup/components/nonExistent/NonExistent.tsx new file mode 100644 index 00000000..d1f5d07d --- /dev/null +++ b/src/pages/lookup/components/nonExistent/NonExistent.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const NonExistent = () => { + return
; +}; + +export default NonExistent; diff --git a/src/pages/lookup/dummyData.ts b/src/pages/lookup/dummyData.ts new file mode 100644 index 00000000..52016d9c --- /dev/null +++ b/src/pages/lookup/dummyData.ts @@ -0,0 +1,54 @@ +export const dummyData = [ + { + userId: 1, + bookingId: 1, + scheduleId: 1, + performanceTitle: "실리카겔 락앤롤", + performanceVenue: "공연 장소", + performanceDate: "2023-12-28", + posterImage: "이미지 url", + purchaseTicketCount: 2, + scheduleNumber: "FIRST", + bookerName: "서지우", + bookerPhoneNumber: "010-2222-7196", + bankName: "부산", + accountNumber: "924232-22-234232", + dueDate: 2, + paymentStatus: false, // 입금 확인중 + createdAt: "2023-11-18T12:34:56.789Z", + }, + { + userId: 1, + bookingId: 2, + scheduleId: 3, + performanceTitle: "실리카겔 락앤롤", + performanceDate: "2023-12-29", + posterImage: "이미지 url", + purchaseTicketCount: 2, + scheduleNumber: "SECOND", + bookerName: "서지우", + bookerPhoneNumber: "010-2222-7196", + bankName: "국민", + accountNumber: "922332-12-232324", + dueDate: -1, // -1이면 관람완료! + paymentStatus: true, // 입금 완료 + createdAt: "2023-11-18T12:34:56.789Z", + }, + { + userId: 1, + bookingId: 1, + scheduleId: 1, + performanceTitle: "아주대학교 스파이더스 정기공연", + performanceDate: "2023-12-29", + posterImage: "이미지 url", + purchaseTicketCount: 2, + scheduleNumber: "SECOND", + bookerName: "윤신지", + bookerPhoneNumber: "010-2222-0000", + bankName: "국민", + accountNumber: "031701-00-014842", + dueDate: -1, // -1이면 관람완료! + paymentStatus: true, // 입금 완료 + createdAt: "2023-11-18T12:34:56.789Z", + }, +]; From 8e97de154b319603d693d608b383da065655c741 Mon Sep 17 00:00:00 2001 From: Sinji Date: Wed, 10 Jul 2024 05:12:40 +0900 Subject: [PATCH 02/22] =?UTF-8?q?feat:=20=EC=98=88=EB=A7=A4=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=98=88=EB=A7=A4?= =?UTF-8?q?=ED=95=9C=20=EA=B3=B5=EC=97=B0=20=EC=9E=88=EC=9D=84=20=EC=8B=9C?= =?UTF-8?q?=20=20UI=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/IconArrowRight.tsx | 1 - src/pages/lookup/Lookup.styled.ts | 1 + src/pages/lookup/Lookup.tsx | 10 +++- .../lookup/components/LookupCard.styled.ts | 49 +++++++++++++++++-- src/pages/lookup/components/LookupCard.tsx | 47 ++++++++++++------ .../lookup/components/LookupWrapper.styled.ts | 2 +- src/pages/lookup/components/LookupWrapper.tsx | 4 +- src/pages/lookup/dummyData.ts | 10 ++-- 8 files changed, 98 insertions(+), 26 deletions(-) diff --git a/src/assets/svgs/IconArrowRight.tsx b/src/assets/svgs/IconArrowRight.tsx index 53e471af..b072eacb 100644 --- a/src/assets/svgs/IconArrowRight.tsx +++ b/src/assets/svgs/IconArrowRight.tsx @@ -3,7 +3,6 @@ import type { SVGProps } from "react"; const SvgIconArrowRight = (props: SVGProps) => ( { return ( - {dummyData.length ? : } + {dummyData.length ? ( + <> + {dummyData.map((item) => ( + + ))} + + ) : ( + + )} ); }; diff --git a/src/pages/lookup/components/LookupCard.styled.ts b/src/pages/lookup/components/LookupCard.styled.ts index e349b748..2ae71642 100644 --- a/src/pages/lookup/components/LookupCard.styled.ts +++ b/src/pages/lookup/components/LookupCard.styled.ts @@ -1,4 +1,5 @@ import styled from "styled-components"; +import { IconArrowRight } from "@assets/svgs"; export const LookupCardWrapper = styled.section` display: flex; @@ -6,18 +7,19 @@ export const LookupCardWrapper = styled.section` gap: 1.2rem; width: 21.4rem; height: 19.8rem; - padding: 2rem; + padding: 1.8rem 2rem; background-color: ${({ theme }) => theme.colors.gray_800}; border-radius: 0.6rem; `; export const LookupTitle = styled.h1` - display: flex; + overflow: hidden; color: ${({ theme }) => theme.colors.gray_0}; - ${({ theme }) => theme.fonts["body2-normal-medi"]}; + white-space: nowrap; + text-overflow: ellipsis; `; export const BoxDivider = styled.div` @@ -43,6 +45,7 @@ export const Context = styled.section` export const SubTitle = styled.div` display: flex; + width: 4rem; ${({ theme }) => theme.fonts["caption2-medi"]}; color: ${({ theme }) => theme.colors.gray_400}; @@ -54,3 +57,43 @@ export const Text = styled.div` ${({ theme }) => theme.fonts["caption2-medi"]}; color: ${({ theme }) => theme.colors.gray_0}; `; + +export const DepositLayout = styled.section` + display: flex; + gap: 0.8rem; +`; + +export const CheckingDeposit = styled.div` + display: flex; + + ${({ theme }) => theme.fonts["caption2-medi"]}; + color: ${({ theme }) => theme.colors.red}; +`; + +export const CheckedDeposit = styled.div` + display: flex; + + ${({ theme }) => theme.fonts["caption2-medi"]}; + color: ${({ theme }) => theme.colors.green}; +`; + +export const AccountLayout = styled.button` + display: flex; + gap: 0.4rem; + align-items: center; +`; + +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}; +`; diff --git a/src/pages/lookup/components/LookupCard.tsx b/src/pages/lookup/components/LookupCard.tsx index 1da8afc5..d250677f 100644 --- a/src/pages/lookup/components/LookupCard.tsx +++ b/src/pages/lookup/components/LookupCard.tsx @@ -1,34 +1,53 @@ import * as S from "./LookupCard.styled"; -const LookupCard = () => { +const LookupCard = ({ ...item }) => { + const createdAt = item.createdAt.slice(0, 10); + const createDataArray = createdAt.split("-"); + + const performanceDateArray = item.performanceDate.split("-"); + return ( - Title + {item.performanceTitle} - 제목 - 내용 + 예매일 + + {createDataArray[0]}년 {createDataArray[1]}월 {createDataArray[2]}일 + - 제목 - 내용 + 관람일 + + {performanceDateArray[0]}년 {performanceDateArray[1]}월 {performanceDateArray[2]}일 + - 제목 - 내용 + 관람회차 + {item.scheduleNumber}회차 - 제목 - 내용 + 공연장소 + {item.performanceVenue} - 제목 - 내용 + 매수 + {item.purchaseTicketCount}매 - 제목 - 내용 + 입금상태 + + {item.paymentStatus ? ( + 입금 확인 중 + ) : ( + 입금 완료 + )} + + 계좌번호 + + + diff --git a/src/pages/lookup/components/LookupWrapper.styled.ts b/src/pages/lookup/components/LookupWrapper.styled.ts index d00d773f..79d71873 100644 --- a/src/pages/lookup/components/LookupWrapper.styled.ts +++ b/src/pages/lookup/components/LookupWrapper.styled.ts @@ -10,7 +10,7 @@ export const LookupContainer = styled.section` display: flex; gap: 0.8rem; width: auto; - padding: 2.4rem; + padding: 0.8rem 2.4rem; `; // 사진 및 취소하기 버튼 diff --git a/src/pages/lookup/components/LookupWrapper.tsx b/src/pages/lookup/components/LookupWrapper.tsx index 9df15775..a4fa8dbe 100644 --- a/src/pages/lookup/components/LookupWrapper.tsx +++ b/src/pages/lookup/components/LookupWrapper.tsx @@ -3,7 +3,7 @@ import * as S from "./LookupWrapper.styled"; import Button from "@components/commons/button/Button"; import LookupCard from "./LookupCard"; -const LookupWrapper = () => { +const LookupWrapper = ({ ...item }) => { return ( @@ -13,7 +13,7 @@ const LookupWrapper = () => { 취소하기 - + ); diff --git a/src/pages/lookup/dummyData.ts b/src/pages/lookup/dummyData.ts index 52016d9c..9be29db7 100644 --- a/src/pages/lookup/dummyData.ts +++ b/src/pages/lookup/dummyData.ts @@ -4,7 +4,7 @@ export const dummyData = [ bookingId: 1, scheduleId: 1, performanceTitle: "실리카겔 락앤롤", - performanceVenue: "공연 장소", + performanceVenue: "신지 집", performanceDate: "2023-12-28", posterImage: "이미지 url", purchaseTicketCount: 2, @@ -22,9 +22,10 @@ export const dummyData = [ bookingId: 2, scheduleId: 3, performanceTitle: "실리카겔 락앤롤", + performanceVenue: "지우 집", performanceDate: "2023-12-29", posterImage: "이미지 url", - purchaseTicketCount: 2, + purchaseTicketCount: 4, scheduleNumber: "SECOND", bookerName: "서지우", bookerPhoneNumber: "010-2222-7196", @@ -36,9 +37,10 @@ export const dummyData = [ }, { userId: 1, - bookingId: 1, + bookingId: 3, scheduleId: 1, - performanceTitle: "아주대학교 스파이더스 정기공연", + performanceTitle: "아주대학교 스파이더스 정기공연!!!!!!!", + performanceVenue: "채현 집", performanceDate: "2023-12-29", posterImage: "이미지 url", purchaseTicketCount: 2, From 21dc02474f061f73c0c6dfd73110ce11ec6a7652 Mon Sep 17 00:00:00 2001 From: Sinji Date: Wed, 10 Jul 2024 06:02:59 +0900 Subject: [PATCH 03/22] =?UTF-8?q?feat:=20=EA=B3=84=EC=A2=8C=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EC=84=A0=ED=83=9D=20=EC=8B=9C=20alert=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20UI=20->=20=ED=98=84=EC=9E=AC=20=EB=B0=94=EA=B9=A5?= =?UTF-8?q?=20=ED=84=B0=EC=B9=98=EC=8B=9C=20state=20=EB=AF=B8=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EB=B2=84=ED=8A=BC=EA=B3=BC=20title=20?= =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=EC=95=88=20=EB=90=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/lookup/components/LookupCard.tsx | 40 +++++++++++++----- src/pages/lookup/components/LookupWrapper.tsx | 41 ++++++++++++++++++- 2 files changed, 70 insertions(+), 11 deletions(-) diff --git a/src/pages/lookup/components/LookupCard.tsx b/src/pages/lookup/components/LookupCard.tsx index d250677f..31e5184b 100644 --- a/src/pages/lookup/components/LookupCard.tsx +++ b/src/pages/lookup/components/LookupCard.tsx @@ -1,14 +1,34 @@ import * as S from "./LookupCard.styled"; -const LookupCard = ({ ...item }) => { - const createdAt = item.createdAt.slice(0, 10); - const createDataArray = createdAt.split("-"); +interface LookupCardProps { + createdAt: string; + performanceDate: string; + performanceTitle: string; + scheduleNumber: string; + performanceVenue: string; + purchaseTicketCount: number; + paymentStatus: boolean; + handleAccount: () => void; +} - const performanceDateArray = item.performanceDate.split("-"); +const LookupCard = ({ + createdAt, + performanceDate, + performanceTitle, + scheduleNumber, + performanceVenue, + purchaseTicketCount, + paymentStatus, + handleAccount, +}: LookupCardProps) => { + const createdAtString = createdAt.slice(0, 10); + const createDataArray = createdAtString.split("-"); + + const performanceDateArray = performanceDate.split("-"); return ( - {item.performanceTitle} + {performanceTitle} @@ -25,25 +45,25 @@ const LookupCard = ({ ...item }) => { 관람회차 - {item.scheduleNumber}회차 + {scheduleNumber}회차 공연장소 - {item.performanceVenue} + {performanceVenue} 매수 - {item.purchaseTicketCount}매 + {purchaseTicketCount}매 입금상태 - {item.paymentStatus ? ( + {paymentStatus ? ( 입금 확인 중 ) : ( 입금 완료 )} - + 계좌번호 diff --git a/src/pages/lookup/components/LookupWrapper.tsx b/src/pages/lookup/components/LookupWrapper.tsx index a4fa8dbe..7893992d 100644 --- a/src/pages/lookup/components/LookupWrapper.tsx +++ b/src/pages/lookup/components/LookupWrapper.tsx @@ -1,9 +1,38 @@ import * as S from "./LookupWrapper.styled"; +import { useEffect, useState } from "react"; + +import useModal from "@hooks/useModal"; import Button from "@components/commons/button/Button"; import LookupCard from "./LookupCard"; const LookupWrapper = ({ ...item }) => { + const { openAlert, closeAlert } = useModal(); + + const [accountModal, setAccountModal] = useState(false); + + const handleAccountModal = () => { + setAccountModal(true); + }; + + const handleAlert = () => { + openAlert({ + title: `${item.accountNumber}`, + subTitle: "얼럿입니다.", + okCallback: () => { + setAccountModal(false); + }, + }); + }; + + useEffect(() => { + if (accountModal) { + handleAlert(); + } else { + closeAlert(); + } + }, [accountModal]); + return ( @@ -13,7 +42,17 @@ const LookupWrapper = ({ ...item }) => { 취소하기 - + ); From c652ddae5278fe84a936574b36683284fc889f8a Mon Sep 17 00:00:00 2001 From: Sinji Date: Wed, 10 Jul 2024 14:26:07 +0900 Subject: [PATCH 04/22] =?UTF-8?q?feat:=20=EA=B3=84=EC=A2=8C=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=EB=AA=A8=EB=8B=AC=20=EC=83=9D=EC=84=B1=20(?= =?UTF-8?q?=ED=98=84=EC=9E=AC=20children=20=EC=95=88=20=EB=90=A8=20/=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=B0=94=EA=B9=A5=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=EC=8B=9C=20=EC=98=A4=EB=A5=98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/lookup/components/LookupWrapper.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/lookup/components/LookupWrapper.tsx b/src/pages/lookup/components/LookupWrapper.tsx index 7893992d..a2079641 100644 --- a/src/pages/lookup/components/LookupWrapper.tsx +++ b/src/pages/lookup/components/LookupWrapper.tsx @@ -16,15 +16,17 @@ const LookupWrapper = ({ ...item }) => { }; const handleAlert = () => { + // 이 부분 도영 오빠가 children 받을 수 있는 빈 모달 만들어주면 복사 가능하도록 변경 openAlert({ title: `${item.accountNumber}`, - subTitle: "얼럿입니다.", okCallback: () => { setAccountModal(false); }, }); }; + // 현재 모달 바깥을 선택했을 때 account가 false로 변하지 않아 새로 열리지 않는데, + // 디자인 측에서 모달 바깥 선택하지 못하게 한다는 의견이 있어 일단 두겠습니다! useEffect(() => { if (accountModal) { handleAlert(); From 5652f6fbb2feffd0be89182cd86b01f65b668494 Mon Sep 17 00:00:00 2001 From: Sinji Date: Wed, 10 Jul 2024 14:57:28 +0900 Subject: [PATCH 05/22] =?UTF-8?q?feat:=20=EC=B7=A8=EC=86=8C=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?=20=EC=A0=84=ED=99=94=EB=B2=88=ED=98=B8=20=EB=B0=94=ED=85=80?= =?UTF-8?q?=EC=8B=9C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/lookup/Lookup.tsx | 39 ++++++++++++++++++- src/pages/lookup/components/LookupCard.tsx | 14 +------ src/pages/lookup/components/LookupWrapper.tsx | 18 +++------ src/typings/lookupType.ts | 12 ++++++ 4 files changed, 56 insertions(+), 27 deletions(-) create mode 100644 src/typings/lookupType.ts diff --git a/src/pages/lookup/Lookup.tsx b/src/pages/lookup/Lookup.tsx index 79fbd94d..0c406f42 100644 --- a/src/pages/lookup/Lookup.tsx +++ b/src/pages/lookup/Lookup.tsx @@ -1,20 +1,55 @@ +import React, { useState } from "react"; import * as S from "./Lookup.styled"; import { dummyData } from "./dummyData"; import NonExistent from "./components/nonExistent/NonExistent"; import LookupWrapper from "./components/LookupWrapper"; +import ActionBottomSheet from "@components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet"; +import PhoneNumber from "@components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber"; +import OuterLayout from "@components/commons/bottomSheet/OuterLayout"; + +import Button from "@components/commons/button/Button"; + const Lookup = () => { + const [isOpen, setIsOpen] = useState(false); + + const handleSheetOpen = () => { + setIsOpen(true); + }; + + const handleSheetClose = () => { + setIsOpen(false); + }; + return ( {dummyData.length ? ( <> {dummyData.map((item) => ( - + + + {isOpen && ( + + + + + + + )} + ))} ) : ( - + )} ); diff --git a/src/pages/lookup/components/LookupCard.tsx b/src/pages/lookup/components/LookupCard.tsx index 31e5184b..4aba666a 100644 --- a/src/pages/lookup/components/LookupCard.tsx +++ b/src/pages/lookup/components/LookupCard.tsx @@ -1,15 +1,5 @@ import * as S from "./LookupCard.styled"; - -interface LookupCardProps { - createdAt: string; - performanceDate: string; - performanceTitle: string; - scheduleNumber: string; - performanceVenue: string; - purchaseTicketCount: number; - paymentStatus: boolean; - handleAccount: () => void; -} +import { LookupProps } from "@typings/lookupType"; const LookupCard = ({ createdAt, @@ -20,7 +10,7 @@ const LookupCard = ({ purchaseTicketCount, paymentStatus, handleAccount, -}: LookupCardProps) => { +}: LookupProps) => { const createdAtString = createdAt.slice(0, 10); const createDataArray = createdAtString.split("-"); diff --git a/src/pages/lookup/components/LookupWrapper.tsx b/src/pages/lookup/components/LookupWrapper.tsx index a2079641..8866996b 100644 --- a/src/pages/lookup/components/LookupWrapper.tsx +++ b/src/pages/lookup/components/LookupWrapper.tsx @@ -6,7 +6,9 @@ import useModal from "@hooks/useModal"; import Button from "@components/commons/button/Button"; import LookupCard from "./LookupCard"; -const LookupWrapper = ({ ...item }) => { +import { LookupProps } from "@typings/lookupType"; + +const LookupWrapper = ({ handleBtn, ...item }: LookupProps) => { const { openAlert, closeAlert } = useModal(); const [accountModal, setAccountModal] = useState(false); @@ -40,21 +42,11 @@ const LookupWrapper = ({ ...item }) => { - - + ); diff --git a/src/typings/lookupType.ts b/src/typings/lookupType.ts new file mode 100644 index 00000000..812dc3b7 --- /dev/null +++ b/src/typings/lookupType.ts @@ -0,0 +1,12 @@ +export interface LookupProps { + createdAt: string; + performanceDate: string; + performanceTitle: string; + scheduleNumber: string; + performanceVenue: string; + purchaseTicketCount: number; + paymentStatus: boolean; + accountNumber: string; + handleBtn?: () => void; + handleAccount?: () => void; +} From 24a6a4dbcbd3f7eff0d01e9104419691c49857d1 Mon Sep 17 00:00:00 2001 From: Sinji Date: Thu, 11 Jul 2024 00:19:54 +0900 Subject: [PATCH 06/22] =?UTF-8?q?fix:=20=EC=B7=A8=EC=86=8C=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EB=88=84=EB=A5=B4=EB=A9=B4=20?= =?UTF-8?q?=EB=A7=88=EC=A7=80=EB=A7=89=20=EB=B2=88=ED=98=B8=EB=A7=8C=20?= =?UTF-8?q?=EB=82=98=EC=98=A4=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/lookup/Lookup.tsx | 12 ++++++------ src/pages/lookup/dummyData.ts | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pages/lookup/Lookup.tsx b/src/pages/lookup/Lookup.tsx index 0c406f42..6f3b26e3 100644 --- a/src/pages/lookup/Lookup.tsx +++ b/src/pages/lookup/Lookup.tsx @@ -12,14 +12,14 @@ import OuterLayout from "@components/commons/bottomSheet/OuterLayout"; import Button from "@components/commons/button/Button"; const Lookup = () => { - const [isOpen, setIsOpen] = useState(false); + const [selectedBookingId, setSelectedBookingId] = useState(0); - const handleSheetOpen = () => { - setIsOpen(true); + const handleSheetOpen = (bookingId: number) => { + setSelectedBookingId(bookingId); }; const handleSheetClose = () => { - setIsOpen(false); + setSelectedBookingId(0); }; return ( @@ -28,8 +28,8 @@ const Lookup = () => { <> {dummyData.map((item) => ( - - {isOpen && ( + handleSheetOpen(item.bookingId)} /> + {selectedBookingId === item.bookingId && ( Date: Thu, 11 Jul 2024 02:00:04 +0900 Subject: [PATCH 07/22] =?UTF-8?q?feat:=20=EC=98=88=EB=A7=A4=ED=95=9C=20?= =?UTF-8?q?=EA=B3=B5=EC=97=B0=20X=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/empty.svg | 9 ++++ src/assets/svgs/Empty.tsx | 52 +++++++++++++++++++ src/assets/svgs/index.tsx | 9 ++-- src/pages/lookup/Lookup.styled.ts | 4 +- src/pages/lookup/Lookup.tsx | 15 ++++-- .../nonExistent/NonExistent.styled.ts | 34 ++++++++++++ .../components/nonExistent/NonExistent.tsx | 10 +++- src/typings/lookupType.ts | 16 ++++-- yarn.lock | 44 ---------------- 9 files changed, 134 insertions(+), 59 deletions(-) create mode 100644 public/svgs/empty.svg create mode 100644 src/assets/svgs/Empty.tsx diff --git a/public/svgs/empty.svg b/public/svgs/empty.svg new file mode 100644 index 00000000..5af139f7 --- /dev/null +++ b/public/svgs/empty.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svgs/Empty.tsx b/src/assets/svgs/Empty.tsx new file mode 100644 index 00000000..4991a839 --- /dev/null +++ b/src/assets/svgs/Empty.tsx @@ -0,0 +1,52 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgEmpty = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgEmpty; diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 403d4544..85f71328 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -1,15 +1,18 @@ +export { default as Empty } from "./Empty"; +export { default as IcHamburgar } from "./IcHamburgar"; export { default as IcomCopy } from "./IcomCopy"; +export { default as IconArrowDown } from "./IconArrowDown"; export { default as IconArrowLeft } from "./IconArrowLeft"; export { default as IconArrowRight } from "./IconArrowRight"; -export { default as IconArrowDown } from "./IconArrowDown"; export { default as IconBnk } from "./IconBnk"; +export { default as IconCalendar } from "./IconCalendar"; export { default as IconCheck } from "./IconCheck"; +export { default as IconEyeOff } from "./IconEyeOff"; export { default as IconHanna } from "./IconHanna"; export { default as IconIbk } from "./IconIbk"; export { default as IconIm } from "./IconIm"; export { default as IconKabank } from "./IconKabank"; export { default as IconKb } from "./IconKb"; -export { default as IconEyeOff } from "./IconEyeOff"; export { default as IconLogo } from "./IconLogo"; export { default as IconMinus } from "./IconMinus"; export { default as IconNonghyup } from "./IconNonghyup"; @@ -24,5 +27,3 @@ export { default as IconToss } from "./IconToss"; export { default as IconWoochaegook } from "./IconWoochaegook"; export { default as IconWoori } from "./IconWoori"; export { default as IconXButton } from "./IconXButton"; -export { default as IcHamburgar } from "./IcHamburgar"; -export { default as IconCalendar } from "./IconCalendar"; diff --git a/src/pages/lookup/Lookup.styled.ts b/src/pages/lookup/Lookup.styled.ts index b82f9cbf..2ec5eece 100644 --- a/src/pages/lookup/Lookup.styled.ts +++ b/src/pages/lookup/Lookup.styled.ts @@ -2,5 +2,7 @@ import styled from "styled-components"; export const LookupWrapper = styled.section` width: auto; - margin: 1.6rem 0; + padding: 1.6rem 0; + + background-color: ${({ theme }) => theme.colors.gray_900}; `; diff --git a/src/pages/lookup/Lookup.tsx b/src/pages/lookup/Lookup.tsx index 6f3b26e3..5ad74fc5 100644 --- a/src/pages/lookup/Lookup.tsx +++ b/src/pages/lookup/Lookup.tsx @@ -1,25 +1,30 @@ import React, { useState } from "react"; import * as S from "./Lookup.styled"; -import { dummyData } from "./dummyData"; - import NonExistent from "./components/nonExistent/NonExistent"; import LookupWrapper from "./components/LookupWrapper"; +import { dummyData } from "./dummyData"; + +import { LookupProps } from "@typings/lookupType"; + import ActionBottomSheet from "@components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet"; import PhoneNumber from "@components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber"; import OuterLayout from "@components/commons/bottomSheet/OuterLayout"; import Button from "@components/commons/button/Button"; -const Lookup = () => { - const [selectedBookingId, setSelectedBookingId] = useState(0); +// dummyData 빈 배열일 경우 경우 (주석 처리하면서 사용) +// const dummyData: LookupProps[] = []; + +const Lookup: React.FC = () => { + const [selectedBookingId, setSelectedBookingId] = useState(null); const handleSheetOpen = (bookingId: number) => { setSelectedBookingId(bookingId); }; const handleSheetClose = () => { - setSelectedBookingId(0); + setSelectedBookingId(null); }; return ( diff --git a/src/pages/lookup/components/nonExistent/NonExistent.styled.ts b/src/pages/lookup/components/nonExistent/NonExistent.styled.ts index e69de29b..fa226daf 100644 --- a/src/pages/lookup/components/nonExistent/NonExistent.styled.ts +++ b/src/pages/lookup/components/nonExistent/NonExistent.styled.ts @@ -0,0 +1,34 @@ +import styled from "styled-components"; +import { Empty } from "@assets/svgs"; + +export const NonExistentWrapper = styled.section` + flex-direction: column; + align-items: center; + justify-content: center; + width: 37.4rem; + height: 71.2rem; + padding: 2.4rem; + + background-color: ${({ theme }) => theme.colors.gray_900}; +`; + +export const NonExistenLayout = styled.section` + position: absolute; + top: 19.2rem; + display: flex; + flex-direction: column; + gap: 2.4rem; + align-items: center; + width: 32.6rem; +`; + +export const EmptyImg = styled(Empty)` + width: 15rem; + height: 15rem; +`; + +export const EmptyText = styled.div` + color: ${({ theme }) => theme.colors.gray_300}; + ${({ theme }) => theme.fonts["body2-normal-medi"]}; + text-align: center; +`; diff --git a/src/pages/lookup/components/nonExistent/NonExistent.tsx b/src/pages/lookup/components/nonExistent/NonExistent.tsx index d1f5d07d..7668f8ae 100644 --- a/src/pages/lookup/components/nonExistent/NonExistent.tsx +++ b/src/pages/lookup/components/nonExistent/NonExistent.tsx @@ -1,7 +1,15 @@ import React from "react"; +import * as S from "./NonExistent.styled"; const NonExistent = () => { - return
; + return ( + + + + 아직 예매한 공연이 없어요. + + + ); }; export default NonExistent; diff --git a/src/typings/lookupType.ts b/src/typings/lookupType.ts index 812dc3b7..ff0be634 100644 --- a/src/typings/lookupType.ts +++ b/src/typings/lookupType.ts @@ -1,12 +1,20 @@ export interface LookupProps { - createdAt: string; - performanceDate: string; + userId: number; + bookingId: number; + scheduleId: number; performanceTitle: string; - scheduleNumber: string; performanceVenue: string; + performanceDate: string; + posterImage: string; purchaseTicketCount: number; - paymentStatus: boolean; + scheduleNumber: string; + bookerName: string; + bookerPhoneNumber: string; + bankName: string; accountNumber: string; + dueDate: number; + paymentStatus: boolean; + createdAt: string; handleBtn?: () => void; handleAccount?: () => void; } diff --git a/yarn.lock b/yarn.lock index 40992b87..a89f90f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5891,7 +5891,6 @@ __metadata: prettier-linter-helpers: "npm:^1.0.0" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" - react-player: "npm:^2.16.0" react-router-dom: "npm:^6.24.0" shelljs: "npm:^0.8.5" storybook: "npm:^8.1.11" @@ -6842,13 +6841,6 @@ __metadata: languageName: node linkType: hard -"deepmerge@npm:^4.0.0": - version: 4.3.1 - resolution: "deepmerge@npm:4.3.1" - checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044 - languageName: node - linkType: hard - "default-browser-id@npm:3.0.0": version: 3.0.0 resolution: "default-browser-id@npm:3.0.0" @@ -9828,13 +9820,6 @@ __metadata: languageName: node linkType: hard -"load-script@npm:^1.0.0": - version: 1.0.0 - resolution: "load-script@npm:1.0.0" - checksum: 10c0/9919c777fe83f8a3a917f65c9c3ab186ad8b194248c57f413ef6e610194abc8484d123a6838d77ab33e5fa1a05a676b5dfe779c38cfe602bdd27c239423d0acd - languageName: node - linkType: hard - "locate-path@npm:^3.0.0": version: 3.0.0 resolution: "locate-path@npm:3.0.0" @@ -10069,13 +10054,6 @@ __metadata: languageName: node linkType: hard -"memoize-one@npm:^5.1.1": - version: 5.2.1 - resolution: "memoize-one@npm:5.2.1" - checksum: 10c0/fd22dbe9a978a2b4f30d6a491fc02fb90792432ad0dab840dc96c1734d2bd7c9cdeb6a26130ec60507eb43230559523615873168bcbe8fafab221c30b11d54c1 - languageName: node - linkType: hard - "memoizerific@npm:^1.11.3": version: 1.11.3 resolution: "memoizerific@npm:1.11.3" @@ -11416,13 +11394,6 @@ __metadata: languageName: node linkType: hard -"react-fast-compare@npm:^3.0.1": - version: 3.2.2 - resolution: "react-fast-compare@npm:3.2.2" - checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367 - languageName: node - linkType: hard - "react-is@npm:18.1.0": version: 18.1.0 resolution: "react-is@npm:18.1.0" @@ -11451,21 +11422,6 @@ __metadata: languageName: node linkType: hard -"react-player@npm:^2.16.0": - version: 2.16.0 - resolution: "react-player@npm:2.16.0" - dependencies: - deepmerge: "npm:^4.0.0" - load-script: "npm:^1.0.0" - memoize-one: "npm:^5.1.1" - prop-types: "npm:^15.7.2" - react-fast-compare: "npm:^3.0.1" - peerDependencies: - react: ">=16.6.0" - checksum: 10c0/ee0f4cd3bd468b28af38dbbb65cae1659218153956f43c0bdd15cd8b38aaaf151deec43b93b7dd887c0ac28242a4ba7e9d01823351e78ba60ae04d5fb51defb4 - languageName: node - linkType: hard - "react-remove-scroll-bar@npm:^2.3.4": version: 2.3.6 resolution: "react-remove-scroll-bar@npm:2.3.6" From 9e2538c7c6713773942cd0e27a896ff7aee78337 Mon Sep 17 00:00:00 2001 From: imddoy Date: Thu, 11 Jul 2024 06:27:16 +0900 Subject: [PATCH 08/22] =?UTF-8?q?feat:=20eye=20input=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/icon_eye_on.svg | 10 + src/assets/svgs/IconEyeOn.tsx | 20 + src/assets/svgs/index.tsx | 1 + .../input/textField/TextField.styled.ts | 7 + .../commons/input/textField/TextField.tsx | 23 +- src/pages/test/TestPage.tsx | 7 +- yarn.lock | 20313 +++++++++------- 7 files changed, 12128 insertions(+), 8253 deletions(-) create mode 100644 public/svgs/icon_eye_on.svg create mode 100644 src/assets/svgs/IconEyeOn.tsx diff --git a/public/svgs/icon_eye_on.svg b/public/svgs/icon_eye_on.svg new file mode 100644 index 00000000..36cf499d --- /dev/null +++ b/public/svgs/icon_eye_on.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svgs/IconEyeOn.tsx b/src/assets/svgs/IconEyeOn.tsx new file mode 100644 index 00000000..c1011c27 --- /dev/null +++ b/src/assets/svgs/IconEyeOn.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgIconEyeOn = (props: SVGProps) => ( + + + + + + + + + + +); +export default SvgIconEyeOn; diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx index 3b52f8a9..81efbf1c 100644 --- a/src/assets/svgs/index.tsx +++ b/src/assets/svgs/index.tsx @@ -8,6 +8,7 @@ export { default as IconBnk } from "./IconBnk"; export { default as IconCalendar } from "./IconCalendar"; export { default as IconCheck } from "./IconCheck"; export { default as IconEyeOff } from "./IconEyeOff"; +export { default as IconEyeOn } from "./IconEyeOn"; export { default as IconHanna } from "./IconHanna"; export { default as IconIbk } from "./IconIbk"; export { default as IconIm } from "./IconIm"; diff --git a/src/components/commons/input/textField/TextField.styled.ts b/src/components/commons/input/textField/TextField.styled.ts index c0867bf6..e921e45d 100644 --- a/src/components/commons/input/textField/TextField.styled.ts +++ b/src/components/commons/input/textField/TextField.styled.ts @@ -50,6 +50,13 @@ export const TextUnit = styled.p` ${({ theme }) => theme.fonts["body2-normal-medi"]}; `; +export const ToggleVisibilityIcon = styled.section` + position: absolute; + right: 1.6rem; + + width: 2.4rem; +`; + export const TextCap = styled.p` ${Generators.flexGenerator("row", "center", "end")} diff --git a/src/components/commons/input/textField/TextField.tsx b/src/components/commons/input/textField/TextField.tsx index 1e51ef41..a56446ab 100644 --- a/src/components/commons/input/textField/TextField.tsx +++ b/src/components/commons/input/textField/TextField.tsx @@ -1,5 +1,6 @@ -import React, { ChangeEvent, InputHTMLAttributes, useRef } from "react"; +import React, { ChangeEvent, InputHTMLAttributes, useRef, useState } from "react"; import * as S from "./TextField.styled"; +import { IconEyeOff, IconEyeOn } from "@assets/svgs"; export interface TextFieldProps extends InputHTMLAttributes { onChange: (e: React.ChangeEvent) => void; @@ -9,9 +10,11 @@ export interface TextFieldProps extends InputHTMLAttributes { unit?: "time" | "ticket" | "amount"; // 단위 : "분", "매", "원" filter?: (value: string) => string; cap?: false | true; + onToggleClick?: () => void; } const TextField = ({ + type = "input", name, value, onChange, @@ -21,11 +24,13 @@ const TextField = ({ unit, filter, cap, + onToggleClick, ...rest }: TextFieldProps) => { const label = unit === "time" ? "분" : unit === "ticket" ? "매" : "원"; const inputRef = useRef(null); + const [isPasswordVisible, setIsPasswordVisible] = useState(type !== "password"); // 비밀번호 입력값 보이기/숨기기 // 값 입력될 떄 const handleOnInput = (e: ChangeEvent) => { @@ -70,6 +75,11 @@ const TextField = ({ } }; + // 비밀번호 입력값 보이기 여부 관리 + const handlePasswordVisibility = () => { + setIsPasswordVisible((prev) => !prev); + }; + return ( @@ -80,10 +90,19 @@ const TextField = ({ onChange={handleOnInput} maxLength={maxLength} placeholder={placeholder} + type={isPasswordVisible ? "text" : "password"} // 비밀번호 보이기 여부를 위해 타입에 조건을 걸음 {...rest} /> - {!narrow && !unit && value && } + {!narrow && !unit && value && type !== "password" && ( + + )} {unit && {label}} + {type === "password" && ( + + )} {maxLength && cap && {`${(value as string).length}/${maxLength}`}} diff --git a/src/pages/test/TestPage.tsx b/src/pages/test/TestPage.tsx index 952142d9..502adb13 100644 --- a/src/pages/test/TestPage.tsx +++ b/src/pages/test/TestPage.tsx @@ -18,6 +18,7 @@ const TestPage = () => { const [round, setRound] = useState(1); const [selectedDate, setSelectedDate] = useState(null); const { showToast, isToastVisible } = useToast(); + const [pwdStatus, setPwdStatus] = useState(false); const handleChangeInput = (e: ChangeEvent) => { setInputValue(e.target.value); @@ -34,14 +35,16 @@ const TestPage = () => { const handleDateChange = (value: Dayjs | null) => { setSelectedDate(value); }; - console.log(selectedDate); + console.log(inputValue); return (