From e294b4adc989bfac63f96c83ca14fb424039f754 Mon Sep 17 00:00:00 2001
From: HarrySeop <harryseop@gmail.com>
Date: Tue, 5 Aug 2025 04:31:04 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F[#265]=20Refactor:=20?=
 =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EB=B6=80=EB=B6=84=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../activities/ActivitiesDescription.tsx      | 53 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/apps/what-today/src/components/activities/ActivitiesDescription.tsx b/apps/what-today/src/components/activities/ActivitiesDescription.tsx
index f0a0d53c..bd8d26df 100644
--- a/apps/what-today/src/components/activities/ActivitiesDescription.tsx
+++ b/apps/what-today/src/components/activities/ActivitiesDescription.tsx
@@ -1,3 +1,5 @@
+import { Button, ChevronIcon } from '@what-today/design-system';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface ActivitiesDescriptionProps {
@@ -5,14 +7,61 @@ interface ActivitiesDescriptionProps {
   className?: string;
 }
 
+const COLLAPSED_HEIGHT = 300;
+
 /**
  * @description 체험 상세 페이지에서 체험 설명을 보여주는 섹션 컴포넌트입니다.
  */
 export default function ActivitiesDescription({ description, className }: ActivitiesDescriptionProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const checkOverflow = useCallback(() => {
+    if (!contentRef.current) return;
+    const height = contentRef.current.scrollHeight;
+    setIsOverflowing(height > COLLAPSED_HEIGHT);
+  }, []);
+
+  useEffect(() => {
+    checkOverflow();
+  }, [description, checkOverflow]);
+
+  useEffect(() => {
+    if (!contentRef.current) return;
+    const observer = new ResizeObserver(() => {
+      checkOverflow();
+    });
+    observer.observe(contentRef.current);
+    return () => observer.disconnect();
+  }, [checkOverflow]);
+
   return (
-    <section className={twMerge(`flex h-fit w-full flex-col justify-start gap-8`, className)}>
+    <section className={twMerge('flex h-fit w-full flex-col justify-start gap-8', className)}>
       <div className='section-text'>체험 설명</div>
-      <p className='body-text'>{description}</p>
+
+      <div
+        ref={contentRef}
+        className='relative transition-[max-height] duration-500 ease-in-out'
+        style={{
+          maxHeight: isExpanded ? `${contentRef.current?.scrollHeight ?? 1000}px` : `${COLLAPSED_HEIGHT}px`,
+          overflow: !isExpanded && isOverflowing ? 'hidden' : 'visible',
+        }}
+      >
+        <p className='body-text whitespace-pre-line'>{description}</p>
+
+        {isOverflowing && !isExpanded && (
+          <div className='pointer-events-none absolute inset-x-0 bottom-0 h-30 bg-gradient-to-t from-white to-transparent' />
+        )}
+      </div>
+
+      {isOverflowing && (
+        <div className='mt-8 flex justify-center'>
+          <Button size='none' variant='none' onClick={() => setIsExpanded((prev) => !prev)}>
+            <ChevronIcon className='size-20' color='var(--color-gray-200)' direction={isExpanded ? 'top' : 'bottom'} />
+          </Button>
+        </div>
+      )}
     </section>
   );
 }

From 8109c4567cd447d56b9b144f7e1a19ae9954318e Mon Sep 17 00:00:00 2001
From: HarrySeop <harryseop@gmail.com>
Date: Tue, 5 Aug 2025 04:48:11 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F[#265]=20Refactor:=20?=
 =?UTF-8?q?=EC=A7=80=EB=8F=84=20=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=20?=
 =?UTF-8?q?=EB=88=84=EB=A5=BC=EC=8B=9C=20=EC=A7=80=EB=8F=84=EB=A1=9C=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/what-today/src/components/map/index.tsx | 38 ++++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/apps/what-today/src/components/map/index.tsx b/apps/what-today/src/components/map/index.tsx
index 3cfd2f08..0ab1b51a 100644
--- a/apps/what-today/src/components/map/index.tsx
+++ b/apps/what-today/src/components/map/index.tsx
@@ -66,7 +66,7 @@ export default function KakaoMap({ address }: MapProps) {
 
     const places = new window.kakao.maps.services.Places();
 
-    const placeMarker = (lat: number, lng: number, label: string) => {
+    const placeMarker = (lat: number, lng: number, label: string, placeUrl?: string) => {
       const coords = new window.kakao.maps.LatLng(lat, lng);
 
       map.setCenter(coords);
@@ -78,16 +78,24 @@ export default function KakaoMap({ address }: MapProps) {
       });
 
       const overlayHTML = `
-        <div style="
-          background: white;
-          border: 1px solid #ccc;
-          border-radius: 4px;
-          padding: 4px 8px;
-          font-size: 16px;
-          box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-          white-space: nowrap;
-        ">
-          ${label}
+        <div style="pointer-events: auto; cursor: pointer;">
+          <a href="${placeUrl ?? '#'}" target="_blank" rel="noopener noreferrer"
+            style="
+              display: inline-block;
+              background: white;
+              border: 1px solid #ccc;
+              border-radius: 4px;
+              padding: 4px 8px;
+              font-size: 16px;
+              box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+              white-space: nowrap;
+              color: black;
+              text-decoration: none;
+              cursor: pointer;
+            "
+          >
+            ${label}
+          </a>
         </div>
       `;
 
@@ -102,16 +110,16 @@ export default function KakaoMap({ address }: MapProps) {
 
     places.keywordSearch(targetAddress, (data: KakaoMapDatas, status: KakaoMapStatus) => {
       if (status === window.kakao.maps.services.Status.OK && data.length > 0) {
-        const { y, x, place_name } = data[0];
-        placeMarker(Number(y), Number(x), place_name);
+        const { y, x, place_name, place_url } = data[0];
+        placeMarker(Number(y), Number(x), place_name, place_url);
       } else {
         const fallbackKeyword = targetAddress.replace(/\s\d+(-\d+)?$/g, '').trim();
 
         if (fallbackKeyword !== targetAddress) {
           places.keywordSearch(fallbackKeyword, (retryData: KakaoMapDatas, retryStatus: KakaoMapStatus) => {
             if (retryStatus === window.kakao.maps.services.Status.OK && retryData.length > 0) {
-              const { y, x, place_name } = retryData[0];
-              placeMarker(Number(y), Number(x), place_name);
+              const { y, x, place_name, place_url } = retryData[0];
+              placeMarker(Number(y), Number(x), place_name, place_url);
             } else {
               console.warn('2차 주소 검색 실패. 기본 위치로 이동합니다.');
               placeMarker(FALLBACK_LOCATION.lat, FALLBACK_LOCATION.lng, FALLBACK_LOCATION.label);