Skip to content

Commit 293fc25

Browse files
PuterismPuterism
committed
feat: 공연 정보 프리뷰 상단에 노출되도록 수정
1 parent 3adf646 commit 293fc25

File tree

6 files changed

+66
-67
lines changed

6 files changed

+66
-67
lines changed

‎packages/icon/src/components/ClockMobile.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const ClockMobile = () => {
2+
return (
3+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<path d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z" stroke="#6F7485" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
5+
<path d="M10 6V10.5L13 12" stroke="#6F7485" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
6+
</svg>
7+
)
8+
}

‎packages/icon/src/components/MapMarker.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const MapMarker = () => (
2+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<g clipPath="url(#clip0_15119_91838)">
4+
<path d="M16.6673 8.33333C16.6673 12.4942 12.0515 16.8275 10.5015 18.1658C10.3571 18.2744 10.1813 18.3331 10.0007 18.3331C9.81999 18.3331 9.64421 18.2744 9.49982 18.1658C7.94982 16.8275 3.33398 12.4942 3.33398 8.33333C3.33398 6.56522 4.03636 4.86953 5.28661 3.61929C6.53685 2.36904 8.23254 1.66666 10.0007 1.66666C11.7688 1.66666 13.4645 2.36904 14.7147 3.61929C15.9649 4.86953 16.6673 6.56522 16.6673 8.33333Z" stroke="#6F7485" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
5+
<path d="M10 10.8333C11.3807 10.8333 12.5 9.71405 12.5 8.33334C12.5 6.95262 11.3807 5.83334 10 5.83334C8.61929 5.83334 7.5 6.95262 7.5 8.33334C7.5 9.71405 8.61929 10.8333 10 10.8333Z" stroke="#6F7485" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
6+
</g>
7+
<defs>
8+
<clipPath id="clip0_15119_91838">
9+
<rect width="20" height="20" fill="white" />
10+
</clipPath>
11+
</defs>
12+
</svg>
13+
14+
)

‎packages/icon/src/components/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ import { Message } from './Message';
7373
import { Discord } from './Discord';
7474
import { Question } from './Question';
7575
import { YoutubeLink } from './YoutubeLink';
76+
import { MapMarker } from './MapMarker';
77+
import { ClockMobile } from './ClockMobile';
7678

7779
export {
7880
Apple as AppleIcon,
@@ -150,4 +152,6 @@ export {
150152
Message as MessageIcon,
151153
Discord as DiscordIcon,
152154
YoutubeLink as YoutubeLinkIcon,
155+
MapMarker as MapMarkerIcon,
156+
ClockMobile as ClockMobileIcon,
153157
};

‎packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx

+6-64
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@ interface Props {
2727

2828
const ShowInfoDetail = ({
2929
show: {
30-
date,
31-
startTime,
32-
runningTime,
30+
// date,
31+
// startTime,
32+
// runningTime,
3333
salesStartTime,
3434
salesEndTime,
35-
placeName,
36-
placeStreetAddress,
37-
placeDetailAddress,
35+
// placeName,
36+
// placeStreetAddress,
37+
// placeDetailAddress,
3838
notice,
3939
hostName,
4040
},
@@ -53,64 +53,6 @@ const ShowInfoDetail = ({
5353
{salesStartTime} - {salesEndTime}
5454
</Styled.ShowInfoDescription>
5555
</Styled.ShowInfoGroup>
56-
<Styled.ShowInfoGroup>
57-
<Styled.ShowInfoTitleContainer>
58-
<Styled.ShowInfoTitle>일시</Styled.ShowInfoTitle>
59-
</Styled.ShowInfoTitleContainer>
60-
<Styled.ShowInfoDescription>
61-
<span>
62-
{date} / {startTime}
63-
</span>
64-
<Styled.ShowInfoDescriptionBadge>{runningTime}분</Styled.ShowInfoDescriptionBadge>
65-
</Styled.ShowInfoDescription>
66-
</Styled.ShowInfoGroup>
67-
<Styled.ShowInfoGroup>
68-
<Styled.ShowInfoTitleContainer>
69-
<Styled.ShowInfoTitle>장소</Styled.ShowInfoTitle>
70-
<Styled.ShowInfoTitleButton
71-
type="button"
72-
onClick={() => {
73-
navigator.clipboard.writeText(`${placeStreetAddress} ${placeDetailAddress}`);
74-
alert('공연장 주소가 복사되었어요');
75-
}}
76-
>
77-
<svg
78-
width="14"
79-
height="14"
80-
viewBox="0 0 14 14"
81-
fill="none"
82-
xmlns="http://www.w3.org/2000/svg"
83-
>
84-
<g clipPath="url(#clip0_3914_12951)">
85-
<path
86-
d="M11.666 4.66602H5.83268C5.18835 4.66602 4.66602 5.18835 4.66602 5.83268V11.666C4.66602 12.3103 5.18835 12.8327 5.83268 12.8327H11.666C12.3103 12.8327 12.8327 12.3103 12.8327 11.666V5.83268C12.8327 5.18835 12.3103 4.66602 11.666 4.66602Z"
87-
stroke="#6F7485"
88-
strokeWidth="1.3"
89-
strokeLinecap="round"
90-
strokeLinejoin="round"
91-
/>
92-
<path
93-
d="M2.33268 9.33268C1.69102 9.33268 1.16602 8.80768 1.16602 8.16602V2.33268C1.16602 1.69102 1.69102 1.16602 2.33268 1.16602H8.16602C8.80768 1.16602 9.33268 1.69102 9.33268 2.33268"
94-
stroke="#6F7485"
95-
strokeWidth="1.3"
96-
strokeLinecap="round"
97-
strokeLinejoin="round"
98-
/>
99-
</g>
100-
<defs>
101-
<clipPath id="clip0_3914_12951">
102-
<rect width="14" height="14" fill="white" />
103-
</clipPath>
104-
</defs>
105-
</svg>
106-
주소복사
107-
</Styled.ShowInfoTitleButton>
108-
</Styled.ShowInfoTitleContainer>
109-
<Styled.ShowInfoSubtitle>{placeName}</Styled.ShowInfoSubtitle>
110-
<Styled.ShowInfoDescription>
111-
{placeStreetAddress} / {placeDetailAddress}
112-
</Styled.ShowInfoDescription>
113-
</Styled.ShowInfoGroup>
11456
<Styled.ShowInfoGroup>
11557
<Styled.ShowInfoTitleContainer>
11658
<Styled.ShowInfoTitle>내용</Styled.ShowInfoTitle>

‎packages/ui/src/components/ShowPreview/ShowPreview.styles.ts

+17-1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,20 @@ const ShowName = styled.h2`
8181
text-align: center;
8282
`;
8383

84+
const ShowHeaderInfoList = styled.div`
85+
display: flex;
86+
flex-direction: column;
87+
gap: 6px;
88+
`;
89+
90+
const ShowHeaderInfoItem = styled.div`
91+
display: flex;
92+
align-items: center;
93+
gap: 6px;
94+
${({ theme }) => theme.typo.b3};
95+
color: ${({ theme }) => theme.palette.mobile.grey.g30};
96+
`;
97+
8498
const ShowPreviewContent = styled.div`
8599
padding: 20px 20px 0;
86100
position: relative;
@@ -230,7 +244,7 @@ const ShowInfoDescriptionBadge = styled.div`
230244
border: 1px solid ${({ theme }) => theme.palette.mobile.grey.g50};
231245
${({ theme }) => theme.typo.c1};
232246
color: ${({ theme }) => theme.palette.mobile.grey.g30};
233-
padding: 3px 12px;
247+
padding: 3px 8px;
234248
border-radius: 999px;
235249
position: relative;
236250
top: -1.5px;
@@ -368,6 +382,8 @@ export default {
368382
ShareButton,
369383
ShowImage,
370384
ShowName,
385+
ShowHeaderInfoList,
386+
ShowHeaderInfoItem,
371387
ShowPreviewContent,
372388
ShowPreviewTicketPeriod,
373389
ShowPreviewTicketPeriodInfo,

‎packages/ui/src/components/ShowPreview/index.tsx

+17-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import 'swiper/css/pagination';
44
import { useRef, useState } from 'react';
55
import { Pagination } from 'swiper/modules';
66
import { Swiper, SwiperSlide } from 'swiper/react';
7-
import { BooltiDark, ShareIcon } from '@boolti/icon';
7+
import { BooltiDark, ClockMobileIcon, MapMarkerIcon, ShareIcon } from '@boolti/icon';
88

99
import Styled from './ShowPreview.styles';
1010
import Tab from '../Tab';
@@ -54,7 +54,7 @@ const ShowPreview = ({
5454
onClickLinkMobile,
5555
onClickShareButton,
5656
}: ShowPreviewProps) => {
57-
const { images, name } = show;
57+
const { images, name, date, startTime, runningTime, placeName } = show;
5858

5959
const [noticeOpen, setNoticeOpen] = useState<boolean>(false);
6060
const containerScrollTop = useRef<number | null>(null);
@@ -105,6 +105,21 @@ const ShowPreview = ({
105105
))}
106106
</Swiper>
107107
<Styled.ShowName>{name}</Styled.ShowName>
108+
<Styled.ShowHeaderInfoList>
109+
<Styled.ShowHeaderInfoItem>
110+
<ClockMobileIcon />
111+
<span>
112+
{date} / {startTime}
113+
</span>
114+
<Styled.ShowInfoDescriptionBadge>{runningTime}분</Styled.ShowInfoDescriptionBadge>
115+
</Styled.ShowHeaderInfoItem>
116+
<Styled.ShowHeaderInfoItem>
117+
<MapMarkerIcon />
118+
<span>
119+
{placeName}
120+
</span>
121+
</Styled.ShowHeaderInfoItem>
122+
</Styled.ShowHeaderInfoList>
108123
</Styled.ShowPreviewHeader>
109124
<Styled.ShowPreviewContent>
110125
<Tab

0 commit comments

Comments
 (0)