Merge pull request #292 from Nexters/bugfix/preview-qa

공연 미리보기 디자인 QA 반영

Author: Puterism

apps/preview/src/pages/ShowInfoDetailPage/index.tsx

@@ -47,6 +47,7 @@ const ShowInfoDetailPage: React.FC = () => {
           longitude,
         }}
         soldTicketCount={soldTicketCount}
+        isAppWebview
         onClickCallLink={callLinkClickHandler}
         onClickMessageLink={messageLinkClickHandler}
         onClickCallLinkMobile={callLinkClickHandler}

packages/ui/src/assets/images/marker.png

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
 
-const Button = styled.button`
+const Button = styled.div`
   position: absolute;
   bottom: 12px;
   right: 12px;
-  cursor: pointer;
   width: 32px;
   height: 32px;
   border-radius: 4px;

packages/ui/src/components/PreviewMap/PreviewMap.styles.ts

@@ -1,37 +1,43 @@
-import { Container, NaverMap, useNavermaps } from 'react-naver-maps';
+import { Container, Marker, NaverMap, useNavermaps } from 'react-naver-maps';
 import { checkIsAndroid, checkIsIOS, checkIsWebView } from '@boolti/bridge';
 
 import Styled from './PreviewMap.styles';
 import { CurvedArrowRightIcon } from '@boolti/icon';
 import { useConfirm } from '../../hooks';
 
+import markerImageUrl from '../../assets/images/marker.png'
+
+
 interface Props {
   latitude: number;
   longitude: number;
   name: string;
+  isAppWebview: boolean;
 }
 
 const CONFIRM_LOCAL_STORAGE_KEY = 'BOOLTI_PREVIEW_MAP_OPEN_NAVER_MAP';
 
-const PreviewMap = ({ latitude, longitude, name }: Props) => {
-  const navermaps = useNavermaps();
+const PreviewMap = ({ latitude, longitude, name, isAppWebview }: Props) => {
   const confirm = useConfirm();
+  const navermaps = useNavermaps();
 
   const openNaverMaps = async () => {
     if (!localStorage.getItem(CONFIRM_LOCAL_STORAGE_KEY)) {
-      const isConfirm = await confirm(
-        <Styled.ConfirmText>
-          길찾기를 위해{'\n'}네이버 지도앱으로 이동합니다.
-          <Styled.ConfirmDescription>* 이 안내는 한 번만 표시됩니다.</Styled.ConfirmDescription>
-        </Styled.ConfirmText>,
-        {
-          cancel: '취소하기',
-          confirm: '이동하기',
-        },
-      );
+      if (!isAppWebview) {
+        const isConfirm = await confirm(
+          <Styled.ConfirmText>
+            길찾기를 위해{'\n'}네이버 지도로 이동합니다.
+            <Styled.ConfirmDescription>* 이 안내는 한 번만 표시됩니다.</Styled.ConfirmDescription>
+          </Styled.ConfirmText>,
+          {
+            cancel: '취소하기',
+            confirm: '이동하기',
+          },
+        );
 
-      if (!isConfirm) {
-        return;
+        if (!isConfirm) {
+          return;
+        }
       }
 
       localStorage.setItem(CONFIRM_LOCAL_STORAGE_KEY, new Date().valueOf().toString());
@@ -69,6 +75,7 @@ const PreviewMap = ({ latitude, longitude, name }: Props) => {
         zIndex: 0,
         borderRadius: 8,
       }}
+      onClick={openNaverMaps}
     >
       <NaverMap
         draggable={false}
@@ -85,8 +92,10 @@ const PreviewMap = ({ latitude, longitude, name }: Props) => {
         mapTypeControl={false}
         zoom={18}
         defaultCenter={new navermaps.LatLng(latitude, longitude)}
-      />
-      <Styled.Button onClick={openNaverMaps}>
+      >
+        <Marker position={new navermaps.LatLng(latitude, longitude)} icon={{ url: markerImageUrl, size: { width: 48, height: 61 } }} />
+      </NaverMap>
+      <Styled.Button>
         <CurvedArrowRightIcon />
       </Styled.Button>
     </Container>

packages/ui/src/components/PreviewMap/index.tsx

@@ -16,7 +16,7 @@ const ShowCastInfo = ({ showCastTeams }: Props) => {
     <Styled.CastInfo>
       {showCastTeams.length > 0 ? (
         showCastTeams.map((team, teamIndex) => (
-          <Styled.ShowInfoGroup key={teamIndex} type="small">
+          <Styled.ShowInfoGroup key={teamIndex}>
             <Styled.ShowInfoTitleContainer>
               <Styled.ShowInfoTitle>{team.name}</Styled.ShowInfoTitle>
             </Styled.ShowInfoTitleContainer>

packages/ui/src/components/ShowPreview/ShowCastInfo.tsx

@@ -21,6 +21,7 @@ interface Props {
     longitude?: number;
   };
   soldTicketCount?: number;
+  isAppWebview?: boolean
   onClickCallLink?: () => void;
   onClickMessageLink?: () => void;
   onClickCallLinkMobile?: () => void;
@@ -42,6 +43,7 @@ const ShowInfoDetail = ({
     detailAddress,
   },
   soldTicketCount,
+  isAppWebview = false,
   onClickCallLink,
   onClickMessageLink,
   onClickCallLinkMobile,
@@ -81,8 +83,16 @@ const ShowInfoDetail = ({
         <Styled.ShowInfoDescription>
           {salesStartTime} - {salesEndTime}
         </Styled.ShowInfoDescription>
+        {isEnded && soldTicketCount !== undefined && (
+          <Styled.ShowTicketInfoDescription>
+            <Styled.TicketIcon>
+              <TicketIcon />
+            </Styled.TicketIcon>{' '}
+            {soldTicketCount}매 판매 완료
+          </Styled.ShowTicketInfoDescription>
+        )}
       </Styled.ShowInfoGroup>
-      <Styled.ShowInfoGroup style={{ paddingBottom: isOverflow ? '0' : '32px' }}>
+      <Styled.ShowInfoGroup style={{ paddingBottom: isOverflow ? '0' : '24px' }}>
         <Styled.ShowInfoTitleContainer>
           <Styled.ShowInfoTitle>내용</Styled.ShowInfoTitle>
         </Styled.ShowInfoTitleContainer>
@@ -122,15 +132,7 @@ const ShowInfoDetail = ({
           </Styled.ShowInfoDescriptionText>
         </Styled.ShowInfoDescription>
         {latitude && longitude && (
-          <PreviewMap latitude={latitude} longitude={longitude} name={placeName} />
-        )}
-        {isEnded && soldTicketCount !== undefined && (
-          <Styled.ShowTicketInfoDescription>
-            <Styled.TicketIcon>
-              <TicketIcon />
-            </Styled.TicketIcon>{' '}
-            {soldTicketCount}매 판매 완료
-          </Styled.ShowTicketInfoDescription>
+          <PreviewMap latitude={latitude} longitude={longitude} name={placeName} isAppWebview={isAppWebview} />
         )}
       </Styled.ShowInfoGroup>
       <Styled.ShowInfoGroup>

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

@@ -17,7 +17,6 @@ const ShowPreviewHeader = styled.div`
   padding-bottom: 32px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
   background: ${({ theme }) => theme.palette.mobile.grey.g90};
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
@@ -43,8 +42,7 @@ const ShowPreviewNavbar = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 44px;
-  padding: 0 20px;
+  padding: 22px 20px 10px;
   background-color: ${({ theme }) => theme.palette.mobile.grey.g90};
 `;
 
@@ -79,7 +77,8 @@ const ShowImage = styled.img`
 const ShowName = styled.h2`
   ${({ theme }) => theme.typo.point.p3};
   color: ${({ theme }) => theme.palette.mobile.grey.g05};
-  text-align: center;
+  margin-top: 24px;
+  margin-bottom: 12px;
 `;
 
 const ShowHeaderInfoList = styled.div`
@@ -165,14 +164,16 @@ const ShowPreviewTicketPeriodText = styled.p`
   color: ${({ theme }) => theme.palette.mobile.grey.g30};
 `;
 
-const ShowInfo = styled.div``;
+const ShowInfo = styled.div`
+  padding: 8px 0;
+`;
 
 const CastInfo = styled.div`
   padding-bottom: 16px;
 `;
 
-const ShowInfoGroup = styled.div<{ type?: 'small' | 'normal' }>`
-  padding: ${({ type = 'normal' }) => (type === 'normal' ? '32px 0' : '24px 0')};
+const ShowInfoGroup = styled.div`
+  padding: 24px 0;
   border-bottom: 1px solid ${({ theme }) => theme.palette.mobile.grey.g85};
 
   &:last-of-type {
@@ -186,7 +187,7 @@ const ShowInfoTitleContainer = styled.div`
   align-items: center;
 
   &:not(:last-child) {
-    margin-bottom: 16px;
+    margin-bottom: 12px;
   }
 `;
 
@@ -200,7 +201,7 @@ const ShowInfoMoreButton = styled.button`
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: 10px 0 32px;
+  padding: 10px 0 24px;
   text-align: center;
   ${({ theme }) => theme.typo.sh1};
   color: ${({ theme }) => theme.palette.mobile.grey.g10};
@@ -284,7 +285,8 @@ const ShowInfoDescriptionBadge = styled.div`
   border: 1px solid ${({ theme }) => theme.palette.mobile.grey.g50};
   ${({ theme }) => theme.typo.c1};
   color: ${({ theme }) => theme.palette.mobile.grey.g30};
-  padding: 3px 8px;
+  padding: 0 8px;
+  height: 22px;
   border-radius: 999px;
   position: relative;
   top: -1.5px;