[Poi-list-elements] POI 리스트에서 스크랩 버튼을 숨길 수 있도록 함

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,6 +44,7 @@ function PoiCarouselElement<T extends PoiListElementType>({
   imageFrame?: FrameRatioAndSizes
   onImpress?: () => void
   optimized?: boolean
+  guestMode?: boolean
 }) {
   if (!poi) {
     return null
@@ -57,6 +59,17 @@ function PoiCarouselElement<T extends PoiListElementType>({
     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
@@ -96,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)
@@ -60,6 +62,19 @@ export function CompactPoiListElement<T extends PoiListElementType>({
     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}>
@@ -91,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'

packages/triple-document/src/prop-context/guest-mode.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react'
+
+const GuestModeContext = createContext<boolean | undefined>(undefined)
+
+/**
+ * guestMode
+ * true인 경우, 로그인이 필요한 동작(스크랩, 리뷰쓰기)등이 불가능하며, 앱으로 연결되는 루트를 차단합니다.
+ */
+export const GuestModeProvider = GuestModeContext.Provider
+
+export function useGuestMode() {
+  return useContext(GuestModeContext)
+}

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

@@ -21,6 +21,7 @@ import { DeepLinkProvider } from './prop-context/deep-link'
 import { MediaConfigProvider } from './prop-context/media-config'
 import ELEMENTS from './elements'
 import useEventResourceTracker from './use-resource-event-tracker'
+import { GuestModeProvider } from './prop-context/guest-mode'
 
 export function TripleDocument({
   children,
@@ -34,6 +35,7 @@ export function TripleDocument({
   videoAutoPlay,
   hideVideoControls,
   optimized = false,
+  guestMode,
 }: {
   customElements?: ElementSet
   children: TripleElementData[]
@@ -97,33 +99,36 @@ export function TripleDocument({
                 hideVideoControls={hideVideoControls}
                 optimized={optimized}
               >
-                {children.map(({ type, value }, i) => {
-                  const RegularElement = ELEMENTS[type]
-                  const CustomElement = customElements[type]
+                <GuestModeProvider value={guestMode}>
+                  {children.map(({ type, value }, i) => {
+                    const RegularElement = ELEMENTS[type]
+                    const CustomElement = customElements[type]
 
-                  const Element = CustomElement || RegularElement
+                    const Element = CustomElement || RegularElement
 
-                  return (
-                    Element && (
-                      <Element
-                        key={i}
-                        value={value}
-                        {...(CustomElement
-                          ? {
-                              onResourceClick: resourceClickHandler,
-                              onImageClick,
-                              onLinkClick: linkClickHandler,
-                              ImageSource: imageSourceComponent,
-                              deepLink,
-                              videoAutoPlay,
-                              hideVideoControls,
-                              optimized,
-                            }
-                          : {})}
-                      />
+                    return (
+                      Element && (
+                        <Element
+                          key={i}
+                          value={value}
+                          {...(CustomElement
+                            ? {
+                                onResourceClick: resourceClickHandler,
+                                onImageClick,
+                                onLinkClick: linkClickHandler,
+                                ImageSource: imageSourceComponent,
+                                deepLink,
+                                videoAutoPlay,
+                                hideVideoControls,
+                                optimized,
+                                guestMode,
+                              }
+                            : {})}
+                        />
+                      )
                     )
-                  )
-                })}
+                  })}
+                </GuestModeProvider>
               </MediaConfigProvider>
             </DeepLinkProvider>
           </ImageSourceProvider>

packages/triple-document/src/types.ts

@@ -46,6 +46,7 @@ export type TripleDocumentContext = {
   onTNAProductsFetch?: TnaProductsFetcher
   imageSourceComponent?: ImageSourceType
   deepLink?: string
+  guestMode?: boolean
 } & MediaConfig
 
 export interface ElementSet {