From 45c6d8f57f9f6c52fe451cde59418d0f57cc8a12 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 8 Oct 2024 00:35:53 +0900 Subject: [PATCH] =?UTF-8?q?refac:=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ShowPreview/ShowCastInfo.tsx | 52 +++++ .../components/ShowPreview/ShowInfoDetail.tsx | 163 +++++++++++++++ .../ShowPreview/ShowTicketPeriod.tsx | 21 ++ .../ui/src/components/ShowPreview/index.tsx | 196 ++---------------- packages/ui/src/components/Tab/index.tsx | 1 + 5 files changed, 250 insertions(+), 183 deletions(-) create mode 100644 packages/ui/src/components/ShowPreview/ShowCastInfo.tsx create mode 100644 packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx create mode 100644 packages/ui/src/components/ShowPreview/ShowTicketPeriod.tsx diff --git a/packages/ui/src/components/ShowPreview/ShowCastInfo.tsx b/packages/ui/src/components/ShowPreview/ShowCastInfo.tsx new file mode 100644 index 0000000..1d12193 --- /dev/null +++ b/packages/ui/src/components/ShowPreview/ShowCastInfo.tsx @@ -0,0 +1,52 @@ +import Styled from './ShowPreview.styles'; + +interface Props { + showCastTeams: Array<{ + name: string; + members?: { + roleName: string; + userNickname: string; + userImgPath: string; + }[]; + }>; +} + +const ShowCastInfo = ({ showCastTeams }: Props) => { + return ( + + {showCastTeams.length > 0 ? ( + showCastTeams.map((team, teamIndex) => ( + + + {team.name} + + + {team.members?.map((member, memberIndex) => ( + + + + {member.userNickname} + {member.roleName} + + + ))} + + + )) + ) : ( + + COMMING SOON + 조금만 기다려주세요! + + )} + + ); +}; + +export default ShowCastInfo; diff --git a/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx b/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx new file mode 100644 index 0000000..6556a89 --- /dev/null +++ b/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx @@ -0,0 +1,163 @@ +import Linkify from 'linkify-react'; +import Styled from './ShowPreview.styles'; +import { CallIcon, MessageIcon } from '@boolti/icon'; +import { useState } from 'react'; +import ShowPreviewNotice from './ShowPreviewNotice'; + +interface Props { + show: { + images: string[]; + name: string; + date: string; + startTime: string; + runningTime: string; + salesStartTime: string; + salesEndTime: string; + placeName: string; + placeStreetAddress: string; + placeDetailAddress: string; + notice: string; + hostName: string; + hostPhoneNumber: string; + }; + hasNoticePage?: boolean; + onClickLink?: () => void; + onClickLinkMobile?: () => void; +} + +const ShowInfoDetail = ({ + show: { + date, + startTime, + runningTime, + placeName, + placeStreetAddress, + placeDetailAddress, + notice, + hostName, + }, + hasNoticePage, + onClickLink, + onClickLinkMobile, +}: Props) => { + const [noticeOpen, setNoticeOpen] = useState(false); + if (noticeOpen) { + return ( + { + setNoticeOpen(false); + }} + /> + ); + } + + return ( + + + + 일시 + + + {date} / {startTime} ({runningTime}분) + + + + + 장소 + { + navigator.clipboard.writeText(`${placeStreetAddress} ${placeDetailAddress}`); + alert('공연장 주소가 복사되었어요'); + }} + > + + + + + + + + + + + + 주소복사 + + + {placeName} + + {placeStreetAddress} / {placeDetailAddress} + + + + + 공연 내용 + {hasNoticePage && ( + { + setNoticeOpen(true); + }} + > + 전체보기 + + )} + + + {notice.split('\n').map((text, index) => ( + + {text} +
+ + ))} + + + + + 공연 관리 문의 + + + {hostName} + + + + + + + + + + + + + + + + + + + + ); +}; + +export default ShowInfoDetail; diff --git a/packages/ui/src/components/ShowPreview/ShowTicketPeriod.tsx b/packages/ui/src/components/ShowPreview/ShowTicketPeriod.tsx new file mode 100644 index 0000000..143c84b --- /dev/null +++ b/packages/ui/src/components/ShowPreview/ShowTicketPeriod.tsx @@ -0,0 +1,21 @@ +import Styled from './ShowPreview.styles'; + +interface Props { + salesStartTime: string; + salesEndTime: string; +} + +const ShowTicketPeriod = ({ salesEndTime, salesStartTime }: Props) => { + return ( + + + 티켓 예매 기간 + + {salesStartTime} - {salesEndTime} + + + + ); +}; + +export default ShowTicketPeriod; diff --git a/packages/ui/src/components/ShowPreview/index.tsx b/packages/ui/src/components/ShowPreview/index.tsx index 8371eeb..b042657 100644 --- a/packages/ui/src/components/ShowPreview/index.tsx +++ b/packages/ui/src/components/ShowPreview/index.tsx @@ -1,15 +1,15 @@ import 'swiper/css'; import 'swiper/css/pagination'; -import { useState } from 'react'; import { Pagination } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; -import Linkify from 'linkify-react'; import Styled from './ShowPreview.styles'; -import ShowPreviewNotice from './ShowPreviewNotice'; -import { CallIcon, MessageIcon } from '@boolti/icon'; + import Tab from '../Tab'; +import ShowCastInfo from './ShowCastInfo'; +import ShowInfoDetail from './ShowInfoDetail'; +import ShowTicketPeriod from './ShowTicketPeriod'; interface ShowPreviewProps { show: { @@ -47,32 +47,7 @@ const ShowPreview = ({ onClickLinkMobile, showCastTeams, }: ShowPreviewProps) => { - const [noticeOpen, setNoticeOpen] = useState(false); - const { - images, - name, - date, - startTime, - runningTime, - salesStartTime, - salesEndTime, - placeName, - placeStreetAddress, - placeDetailAddress, - notice, - hostName, - } = show; - - if (noticeOpen) { - return ( - { - setNoticeOpen(false); - }} - /> - ); - } + const { images, name, salesStartTime, salesEndTime } = show; return ( @@ -98,168 +73,23 @@ const ShowPreview = ({ {name} - - - - 티켓 예매 기간 - - - {salesStartTime} - {salesEndTime} - - - + - - - 일시 - - - {date} / {startTime} ({runningTime}분) - - - - - 장소 - { - navigator.clipboard.writeText( - `${placeStreetAddress} ${placeDetailAddress}`, - ); - alert('공연장 주소가 복사되었어요'); - }} - > - - - - - - - - - - - - 주소복사 - - - {placeName} - - {placeStreetAddress} / {placeDetailAddress} - - - - - 공연 내용 - {hasNoticePage && ( - { - setNoticeOpen(true); - }} - > - 전체보기 - - )} - - - {notice.split('\n').map((text, index) => ( - - {text} -
- - ))} - - - - - 공연 관리 문의 - - - {hostName} - - - - - - - - - - - - - - - - - - - + ), }, { title: '출연진', - content: ( - - {showCastTeams.length > 0 ? ( - showCastTeams.map((team, teamIndex) => ( - - - {team.name} - - - {team.members?.map((member, memberIndex) => ( - - - - {member.userNickname} - {member.roleName} - - - ))} - - - )) - ) : ( - - COMMING SOON - - 조금만 기다려주세요! - - - )} - - ), + content: , }, ]} /> diff --git a/packages/ui/src/components/Tab/index.tsx b/packages/ui/src/components/Tab/index.tsx index 2300274..c633efc 100644 --- a/packages/ui/src/components/Tab/index.tsx +++ b/packages/ui/src/components/Tab/index.tsx @@ -31,6 +31,7 @@ const Tab = ({ tabItems }: Props) => {