[test] 서울콘 대응

packages/poi-detail/src/image-carousel/carousel-section.tsx

@@ -4,6 +4,8 @@ import Carousel, { CarouselProps } from './carousel'
 import Placeholder from './placeholder'
 import { BusinessHoursNote, PermanentlyClosedNote } from './note'
 
+export type PoiType = 'attraction' | 'hotel' | 'restaurant'
+
 export interface CarouselSectionProps extends CarouselProps {
   loading: boolean
   currentBusinessHours?:
@@ -18,6 +20,9 @@ export interface CarouselSectionProps extends CarouselProps {
   onBusinessHoursClick?: () => void
   onPlaceholderClick: () => void
   height?: number
+  /** true인 경우, 로그인이 필요한 일부 동작을 막고, 트리플앱으로 연결되는 루트를 차단합니다 */
+  guestMode?: boolean
+  type?: PoiType
 }
 
 export default function CarouselSection({
@@ -29,6 +34,8 @@ export default function CarouselSection({
   onPlaceholderClick,
   onBusinessHoursClick,
   borderRadius,
+  guestMode,
+  type,
   ...props
 }: CarouselSectionProps) {
   return (
@@ -43,9 +50,19 @@ export default function CarouselSection({
     >
       <Container position="relative">
         {images.length > 0 ? (
-          <Carousel images={images} borderRadius={borderRadius} {...props} />
+          <Carousel
+            images={images}
+            borderRadius={borderRadius}
+            guestMode={guestMode}
+            {...props}
+          />
         ) : (
-          <Placeholder onClick={onPlaceholderClick} noContent={loading} />
+          <Placeholder
+            onClick={onPlaceholderClick}
+            noContent={loading}
+            guestMode={guestMode}
+            type={type}
+          />
         )}
         {!permanentlyClosed && onBusinessHoursClick ? (
           <BusinessHoursNote

packages/poi-detail/src/image-carousel/carousel.tsx

@@ -39,6 +39,7 @@ export interface CarouselProps {
   optimized?: boolean
   borderRadius?: number
   height?: number
+  guestMode?: boolean
 }
 
 export default function Carousel({
@@ -50,11 +51,14 @@ export default function Carousel({
   optimized,
   borderRadius = 6,
   height,
+  guestMode,
 }: CarouselProps) {
   const app = useTripleClientMetadata()
   const { trackEvent, trackSimpleEvent } = useEventTrackingContext()
   const [currentPage, setCurrentPage] = useState(0)
-  const visibleImages = app ? images : images.slice(0, SHOW_CTA_FROM_INDEX + 1)
+  const visibleImages = app
+    ? images
+    : images.slice(0, guestMode ? SHOW_CTA_FROM_INDEX : SHOW_CTA_FROM_INDEX + 1)
 
   const handleImageClick = useCallback(
     (event?: MouseEvent, media?: ImageMeta) => {
@@ -125,15 +129,33 @@ export default function Carousel({
     ],
   )
 
-  const ConditionalPageLabel = app
-    ? undefined
-    : ({ currentIndex }: { currentIndex: number }) =>
-        !totalImagesCount || currentIndex === SHOW_CTA_FROM_INDEX ? null : (
-          <PageLabel currentIndex={currentPage} totalCount={totalImagesCount} />
-        )
+  const publicPageLabelRenderer = ({
+    currentIndex,
+  }: {
+    currentIndex: number
+  }) => {
+    if (!totalImagesCount) {
+      return null
+    }
+
+    if (guestMode || currentIndex !== SHOW_CTA_FROM_INDEX) {
+      const totalCount =
+        guestMode && totalImagesCount > SHOW_CTA_FROM_INDEX
+          ? SHOW_CTA_FROM_INDEX
+          : totalImagesCount
+
+      return <PageLabel currentIndex={currentPage} totalCount={totalCount} />
+    }
+
+    return null
+  }
+
+  const ConditionalPageLabel = app ? undefined : publicPageLabelRenderer
 
   const CTA = ({ currentIndex }: { currentIndex: number }) =>
-    !app && currentIndex === SHOW_CTA_FROM_INDEX ? <CtaOverlay /> : null
+    !app && !guestMode && currentIndex === SHOW_CTA_FROM_INDEX ? (
+      <CtaOverlay />
+    ) : null
 
   return (
     <>

packages/poi-detail/src/image-carousel/index.tsx

@@ -14,6 +14,8 @@ type ImageCarouselProps = Pick<
   | 'optimized'
   | 'borderRadius'
   | 'height'
+  | 'guestMode'
+  | 'type'
 >
 
 export default function ImageCarousel(props: ImageCarouselProps) {

packages/poi-detail/src/image-carousel/placeholder.tsx

@@ -2,6 +2,15 @@ import { useTranslation } from '@titicaca/next-i18next'
 import styled, { css } from 'styled-components'
 import { Text, Responsive } from '@titicaca/core-elements'
 
+import { PoiType } from './carousel-section'
+
+const DEFAULT_ICON_URLS: Record<PoiType, string> = {
+  attraction: 'https://assets.triple.guide/images/seoulcon/default/ic_spot.svg',
+  hotel: 'https://assets.triple.guide/images/seoulcon/default/ic_hotel.svg',
+  restaurant:
+    'https://assets.triple.guide/images/seoulcon/default/ic_restaurant.svg',
+}
+
 const ImagePlaceholderContainer = styled.div<{ large?: boolean }>`
   width: 100%;
   overflow: hidden;
@@ -18,8 +27,6 @@ const ImagePlaceholderContainer = styled.div<{ large?: boolean }>`
 `
 
 const PlaceholderIcon = styled.img`
-  width: 60px;
-  height: 60px;
   vertical-align: baseline;
 `
 
@@ -39,22 +46,35 @@ const ImagePlaceholderContent = styled.div<{ large?: boolean }>`
 interface ImagePlaceholderProps {
   large?: boolean
   noContent?: boolean
+  guestMode?: boolean
+  type?: PoiType
   onClick: () => void
 }
 
 function ImagePlaceholder({
   large,
   noContent,
+  guestMode,
+  type,
   onClick,
 }: ImagePlaceholderProps) {
   const { t } = useTranslation('common-web')
 
   return (
     <ImagePlaceholderContainer large={large} onClick={onClick}>
       <ImagePlaceholderContent large={large}>
-        {noContent ? null : (
+        {noContent ? null : guestMode ? (
+          <PlaceholderIcon
+            src={DEFAULT_ICON_URLS[type || 'attraction']}
+            width={40}
+            css={{ opacity: 0.3 }}
+          />
+        ) : (
           <>
-            <PlaceholderIcon src="https://assets.triple.guide/images/[email protected]" />
+            <PlaceholderIcon
+              src="https://assets.triple.guide/images/[email protected]"
+              width={60}
+            />
             <Text size="small" color="gray" alpha={0.3}>
               {t([
                 'igosyi-ceos-beonjjae-sajineul-olryeojuseyo.',
@@ -68,22 +88,30 @@ function ImagePlaceholder({
   )
 }
 
-interface ResponsiveImagePlaceholderProps {
-  onClick: () => void
-  noContent?: boolean
-}
-
 export default function ResponsiveImagePlaceholder({
-  onClick,
   noContent,
-}: ResponsiveImagePlaceholderProps) {
+  guestMode,
+  type,
+  onClick,
+}: Omit<ImagePlaceholderProps, 'large'>) {
   return (
     <>
       <Responsive maxWidth={706}>
-        <ImagePlaceholder noContent={noContent} onClick={onClick} />
+        <ImagePlaceholder
+          noContent={noContent}
+          guestMode={guestMode}
+          type={type}
+          onClick={onClick}
+        />
       </Responsive>
       <Responsive minWidth={707}>
-        <ImagePlaceholder noContent={noContent} large onClick={onClick} />
+        <ImagePlaceholder
+          noContent={noContent}
+          guestMode={guestMode}
+          type={type}
+          large
+          onClick={onClick}
+        />
       </Responsive>
     </>
   )

packages/poi-list-elements/src/carousel-element.tsx

@@ -34,6 +34,7 @@ function PoiCarouselElement<T extends PoiListElementType>({
   imageFrame,
   onImpress,
   optimized,
+  guestMode,
 }: PoiListElementBaseProps<T> & {
   actionButtonElement?: ActionButtonElement
   description?: ReactNode
@@ -43,15 +44,32 @@ function PoiCarouselElement<T extends PoiListElementType>({
   imageFrame?: FrameRatioAndSizes
   onImpress?: () => void
   optimized?: boolean
+  guestMode?: boolean
 }) {
   if (!poi) {
     return null
   }
 
   const { names: regionNames } = region?.source || {}
 
-  const name = nameOverride || names.ko || names.en || names.local
-  const regionName = regionNames?.ko || regionNames?.en || regionNames?.local
+  const name =
+    nameOverride || names.primary || names.ko || names.en || names.local
+  const regionName =
+    regionNames?.primary ||
+    regionNames?.ko ||
+    regionNames?.en ||
+    regionNames?.local
+  const ActionButton = actionButtonElement || (
+    <Container
+      position="absolute"
+      css={{
+        top: '3px',
+        right: '3px',
+      }}
+    >
+      <OverlayScrapButton resource={poi} size={36} />
+    </Container>
+  )
 
   return (
     <Carousel.Item
@@ -91,17 +109,7 @@ function PoiCarouselElement<T extends PoiListElementType>({
           : vicinity}
       </Text>
 
-      {actionButtonElement || (
-        <Container
-          position="absolute"
-          css={{
-            top: '3px',
-            right: '3px',
-          }}
-        >
-          <OverlayScrapButton resource={poi} size={36} />
-        </Container>
-      )}
+      {!guestMode ? ActionButton : null}
 
       {additionalInfo}
     </Carousel.Item>

packages/poi-list-elements/src/compact-poi-list-element.tsx

@@ -17,6 +17,7 @@ import { getTypeNames } from './get-type-names'
 interface CompactPoiListElementBaseProps<T extends PoiListElementType>
   extends PoiListElementBaseProps<T> {
   actionButtonElement?: ActionButtonElement
+  guestMode?: boolean
 }
 
 export type CompactPoiListElementProps<T extends PoiListElementType> =
@@ -41,6 +42,7 @@ export function CompactPoiListElement<T extends PoiListElementType>({
     source: { names, image, areas, vicinity },
   },
   onClick,
+  guestMode,
 }: CompactPoiListElementProps<T>) {
   const [actionButtonWidth, setActionButtonWidth] = useState(0)
   const actionButtonRef = useRef<HTMLDivElement & { width?: number }>(null)
@@ -53,8 +55,26 @@ export function CompactPoiListElement<T extends PoiListElementType>({
 
   const { names: regionNames } = region?.source || {}
 
-  const name = nameOverride || names.ko || names.en || names.local
-  const regionName = regionNames?.ko || regionNames?.en || regionNames?.local
+  const name =
+    nameOverride || names.primary || names.ko || names.en || names.local
+  const regionName =
+    regionNames?.primary ||
+    regionNames?.ko ||
+    regionNames?.en ||
+    regionNames?.local
+  const ActionButton = actionButtonElement ? (
+    <div ref={actionButtonRef}>{actionButtonElement}</div>
+  ) : (
+    <Container
+      position="absolute"
+      css={{
+        top: 0,
+        right: 0,
+      }}
+    >
+      <OutlineScrapButton resource={poi} size={34} />
+    </Container>
+  )
 
   return (
     <ResourceListItem onClick={onClick}>
@@ -86,19 +106,7 @@ export function CompactPoiListElement<T extends PoiListElementType>({
           .join(' · ')}
       </Text>
 
-      {actionButtonElement ? (
-        <div ref={actionButtonRef}>{actionButtonElement}</div>
-      ) : (
-        <Container
-          position="absolute"
-          css={{
-            top: 0,
-            right: 0,
-          }}
-        >
-          <OutlineScrapButton resource={poi} size={34} />
-        </Container>
-      )}
+      {!guestMode ? ActionButton : null}
     </ResourceListItem>
   )
 }

packages/triple-document/src/elements/pois.tsx

@@ -9,6 +9,7 @@ import {
 import { Text } from '@titicaca/core-elements'
 
 import { useResourceClickHandler } from '../prop-context/resource-click-handler'
+import { useGuestMode } from '../prop-context/guest-mode'
 
 import ResourceList from './shared/resource-list'
 import DocumentCarousel from './shared/document-carousel'
@@ -43,6 +44,7 @@ export default function Pois<T extends ExtendedPoiListElementData>({
     pois: T[]
   }
 }) {
+  const guestMode = useGuestMode()
   const onResourceClick = useResourceClickHandler()
 
   const Container = display === 'list' ? ResourceList : DocumentCarousel
@@ -74,6 +76,7 @@ export default function Pois<T extends ExtendedPoiListElementData>({
             display,
             poi,
           })}
+          guestMode={guestMode}
         />
       ))}
     </Container>

packages/triple-document/src/index.ts

@@ -8,6 +8,7 @@ export { Slot } from './elements/tna/slot'
 export { PricePolicyCouponInfo } from './elements/tna/price-policy-coupon-info'
 
 export { useDeepLink } from './prop-context/deep-link'
+export { useGuestMode } from './prop-context/guest-mode'
 export { useImageClickHandler } from './prop-context/image-click-handler'
 export { useImageSource } from './prop-context/image-source'
 export { useLinkClickHandler } from './prop-context/link-click-handler'