[♻️Refactor] 9/3 QA 피드백 반영 (#212)

* 🎨 style: 후기, 카카오맵에 스켈레톤UI 적용

* 🐛 fix: 체험 상세 페이지 방문 후 뒤로가기 시 페이지 번호 유지

- 뒤로가기로 메인 페이지가 마운트될 때
  URL 파라미터를 확인하여 페이지 상태값에 반영
  → 사용자가 보던 페이지 번호를 그대로 유지
- 헤더 로고 클릭 시 1페이지로 리셋

* ✨feat : 예약현황 모달 바깥 클릭 시 모달 닫힘

* 🎨 style: 카카오맵 맵 마커 스타일 커스텀

* 🐛 ✨ fix: 예약신청 성공 후 화면 새로고침 -> 관련 캐시 업대이트

* ✨ feat: 주소 복사 기능

* Update README.md

---------

Co-authored-by: jyn <spdlqjdkslel1226@naver.com>

Author: dkslel1225

README.md

@@ -20,7 +20,7 @@
 
 <div align="center">
 <details>
-<summary> 👀 Preview Image</summary>
+<summary> 👀 Preview GIF/MP4</summary>
 
 #### 회원가입/로그인
 ![회원가입_로그인_2배속](https://github.com/user-attachments/assets/27669840-8ad0-4cfc-895b-0731aa1e2e4e)
@@ -34,7 +34,8 @@
 ---
 
 #### 체험 등록
-![체험등록](https://github.com/user-attachments/assets/faa8d167-edcf-4e7b-865f-202c49fa1bf2)
+
+https://github.com/user-attachments/assets/e7392d86-01c6-4a3e-9dea-505839d868ca
 
 #### 마이페이지 내 체험 관리 - 체험 수정
 
@@ -55,6 +56,8 @@
 
 #### 상세페이지
 
+https://github.com/user-attachments/assets/1dcba629-9388-41bc-a9a5-a5c0f5c12bc1
+
 ---
 
 </details>

src/app/my/reserve-calendar/page.tsx

@@ -18,6 +18,7 @@ import Dropdown from '@/shared/components/dropdown/dropdown';
 import AdaptiveModal from '@/shared/components/modal/components/adaptive-modal/adaptive-modal';
 import { useModalStore } from '@/shared/components/modal/libs/stores/useModalStore';
 import NoData from '@/shared/components/no-data/no-data';
+import { cn } from '@/shared/libs/cn';
 import useWindowSize from '@/shared/libs/hooks/useWindowSize';
 import { Activity } from '@/shared/types/activity';
 
@@ -257,8 +258,22 @@ const ReserveCalendarPage = () => {
               onCellClick={handleDateClick}
               calendarRef={calendarRef}
             >
+              {/* 모달 투명 오버레이 - 모달 바깥 클릭 -> closeModal */}
+              {isDesktop && selectedDate && (
+                <div
+                  className="fixed inset-0 z-80"
+                  onClick={() => {
+                    resetSelectedDate();
+                    resetDate();
+                  }}
+                  role="presentation"
+                ></div>
+              )}
               {/* 모달 위치 제어하기 위한 div 태그 */}
-              <div style={modalPosition}>
+              <div
+                style={modalPosition}
+                className={cn(isDesktop && selectedDate && 'z-90')}
+              >
                 {/* 예약 현황 모달 */}
                 <AdaptiveModal extraClassName="shadow-experience-card category-scroll h-[50.8rem] overflow-scroll border border-gray-50 md:h-[39.7rem] lg:h-[44.4rem] lg:w-[32.3rem]">
                   <div className="p-4">

src/features/activities/components/all-activities.tsx

@@ -2,7 +2,8 @@
 
 import { ChevronDown } from 'lucide-react';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
 import { ActivityCard } from '@/features/activities/components/activity-card';
 import useResActivitiesQuery from '@/features/activities/libs/hooks/useResActivitiesQuery';
@@ -63,6 +64,25 @@ const AllActivities = ({ keyword }: AllActivitiesProps) => {
     setPage(1);
   };
 
+  // 첫마운트 시 - 파라미터 반영하여 페이지 상태값 재설정
+  const pageParams = useSearchParams().get('page');
+  useEffect(() => {
+    if (pageParams) {
+      setPage(Number(pageParams)); // * 값이 이전과 동일하면 리렌더X
+    }
+  }, [pageParams]);
+
+  // page 변경 시, page 파라미터 수정 (* URL변경, 리렌더 트리거X)
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    params.set('page', String(page));
+    window.history.replaceState(
+      {},
+      '',
+      `${window.location.pathname}?${params.toString()}`,
+    );
+  }, [page]);
+
   return (
     <div className="px-[2.4rem] md:px-[3rem] lg:px-[4rem]">
       <div className="mb-[1rem] flex items-center justify-between md:mb-[1.6rem] lg:mb-[2rem]">

src/features/activityId/components/map/address-with-map.tsx

@@ -1,12 +1,39 @@
+'use client';
+import { Copy } from 'lucide-react';
+import { useRef } from 'react';
+
 import KakaoMap from '@/features/activityId/components/map/kakao-map';
 import { textStyle } from '@/features/activityId/libs/constants/variants';
 
 const AddressWithMap = ({ address }: { address: string | undefined }) => {
+  const textRef = useRef<HTMLParagraphElement>(null);
+
+  const handleCopy = async () => {
+    if (textRef.current) {
+      const text = textRef.current.innerText;
+      await navigator.clipboard.writeText(text);
+    }
+  };
+
   return (
     <>
       <section className="flex flex-col gap-[0.8rem]">
         <h2 className={textStyle.h2}>오시는 길</h2>
-        <p className="text-[1.4rem] font-semibold text-gray-800">{address}</p>
+        <div className="flex items-center gap-1">
+          <p
+            ref={textRef}
+            className="text-[1.4rem] font-semibold text-gray-800"
+          >
+            {address}
+          </p>
+          <button
+            onClick={handleCopy}
+            className="flex-center trans-colors-200 cursor-pointer gap-1 rounded-2xl p-2.5 text-[1.4rem] text-gray-700 select-none hover:bg-gray-50 active:bg-gray-100"
+          >
+            <Copy strokeWidth={1.5} className="size-[1.8rem]" />
+            복사
+          </button>
+        </div>
         <div
           id="map"
           className="mb-[2rem] h-[18rem] w-full overflow-hidden rounded-[1.6rem] md:h-[38rem] lg:mb-[4rem] lg:h-[45rem] lg:rounded-[2.4rem]"

src/features/activityId/components/map/kakao-map.tsx

@@ -2,16 +2,18 @@
 
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
-import { Map, MapMarker, useKakaoLoader } from 'react-kakao-maps-sdk';
+import { CustomOverlayMap, Map, useKakaoLoader } from 'react-kakao-maps-sdk';
 
 import { ErrorMessage } from '@/shared/components/error-message/error-message';
-import LoadingSpinner from '@/shared/components/loading-spinner/loading-spinner';
+import { DetailKakaoMapSkeleton } from '@/shared/components/skeleton/skeleton';
 
 //현재 로컬에 대한 키를 발급 받은거라, 머지할때는 배포 주소로 다시 받아야 함
 const KakaoMap = ({ address }: { address: string | undefined }) => {
-  const [coordinates, setCoordinates] = useState<
-    { lat: number; lng: number } | { x: number; y: number }
-  >();
+  const [placeName, setPlaceName] = useState<string | null>(null);
+  const [coordinates, setCoordinates] = useState<{
+    lat: number;
+    lng: number;
+  }>();
 
   const [loading, error] = useKakaoLoader({
     appkey: process.env.NEXT_PUBLIC_KAKAO!,
@@ -42,16 +44,23 @@ const KakaoMap = ({ address }: { address: string | undefined }) => {
       const geocoder = new kakao.maps.services.Geocoder();
       geocoder.addressSearch(address, (result, status) => {
         if (status === kakao.maps.services.Status.OK) {
-          const { x, y } = result[0];
+          const { x, y, road_address, address_name } = result[0];
           setCoordinates({ lat: parseFloat(y), lng: parseFloat(x) });
+
+          // 건물 이름 우선, 없으면 전체 주소 사용
+          if (road_address?.building_name) {
+            setPlaceName(road_address.building_name);
+          } else {
+            setPlaceName(address_name);
+          }
         }
       });
     };
 
     tryGeocode();
   }, [loading, error, address]);
 
-  if (loading) return <LoadingSpinner />;
+  if (loading) return <DetailKakaoMapSkeleton />;
   if (error) return <ErrorMessage className="h-full" />;
   if (coordinates) {
     return (
@@ -61,22 +70,27 @@ const KakaoMap = ({ address }: { address: string | undefined }) => {
           center={coordinates}
           style={{ width: '100%', height: '100%' }}
         >
-          <MapMarker position={coordinates}></MapMarker>
+          <CustomOverlayMap position={coordinates}>
+            <div className="border-sub-300 flex-center relative gap-[0.6rem] rounded-full border-2 bg-white p-3 text-[1.4rem] font-semibold text-gray-950 shadow-lg">
+              <Image
+                src={'/images/icons/profile-default.svg'}
+                alt="map-icon"
+                width={30}
+                height={30}
+                className="shrink-0"
+              />
+              <p className="shrink-0 pr-[0.2rem]">{placeName}</p>
+            </div>
+          </CustomOverlayMap>
         </Map>
       </>
     );
   } else {
     return (
-      <div className="flex-center inset-0 flex-col gap-[1rem] md:gap-[4rem]">
-        <div className="mt-[0.6rem] text-[1.4rem] text-gray-500 md:mt-[8rem] md:text-[1.6rem] lg:mt-[12rem] lg:text-3xl">
-          해당 주소를 찾을 수 없습니다
+      <div className="flex-center size-full">
+        <div className="text-[1.4rem] text-gray-500 md:text-[1.8rem]">
+          지도를 찾고 있습니다.
         </div>
-        <Image
-          src="/images/sad-laptop.svg"
-          width={200}
-          height={100}
-          alt="failed-load-map"
-        />
       </div>
     );
   }

src/features/activityId/components/reservation-form/reservation-form.tsx

@@ -92,6 +92,7 @@ const ReservationForm = ({
           setSelectedTime('');
           reset(); // 제출 후 폼 초기화
           submittingRef.current = false;
+          window.location.reload();
         },
         onError: () => {
           submittingRef.current = false;

src/features/activityId/components/reviews.tsx

@@ -2,8 +2,9 @@
 import { useState } from 'react';
 
 import { useReviewsQuery } from '@/features/activityId/libs/hooks/useReviewsQuery';
-import { ErrorMessage, LoadingSpinner } from '@/shared/components';
+import { ErrorMessage } from '@/shared/components';
 import Pagination from '@/shared/components/pagination/pagination';
+import { DetailReviewsSkeleton } from '@/shared/components/skeleton/skeleton';
 import StarImage from '@/shared/components/star/star';
 import { cn } from '@/shared/libs/cn';
 
@@ -17,12 +18,7 @@ const Reviews = ({ activityId }: { activityId: number }) => {
   });
   const isPageNecessary = data && data.totalCount > 0;
 
-  if (isLoading)
-    return (
-      <div className="shadow-experience-card mb-[1.6rem] h-[11rem] w-full md:h-[11.3rem]">
-        <LoadingSpinner />
-      </div>
-    );
+  if (isLoading) return <DetailReviewsSkeleton />;
   if (isError) return <ErrorMessage />;
   return (
     <>

src/shared/components/header/header.tsx

@@ -50,7 +50,7 @@ const Header = () => {
             onClick={(e) => {
               e.preventDefault();
               resetSearch();
-              router.push('/activities');
+              router.push('/activities?page=1');
             }}
           >
             <Image

src/shared/components/skeleton/skeleton.tsx

@@ -144,7 +144,7 @@ export const DetailSubImagesSkeleton = () => {
 // 상세 페이지 카카오 맵 스켈레톤
 export const DetailKakaoMapSkeleton = () => {
   return (
-    <div className="shadow-experience-card h-[18rem] w-[32.7rem] animate-pulse rounded-[1.6rem] bg-gray-200 md:h-[38rem] md:w-[68.8rem] lg:h-[45rem] lg:w-[66.1rem]" />
+    <div className="shadow-experience-card h-[18rem] w-full animate-pulse rounded-[1.6rem] bg-gray-200 md:h-[38rem] lg:h-[45rem]" />
   );
 };
 
@@ -153,11 +153,11 @@ export const DetailReviewsSkeleton = () => {
   return (
     <div className="animate-pulse">
       {/* 후기 리스트 */}
-      <ul className="space-y-[4rem]">
+      <ul className="mb-[11.5rem] space-y-[4rem] lg:mb-[21rem]">
         {Array.from({ length: 3 }, (_, index) => (
           <li key={`review-skeleton-${index}`}>
             <article
-              className={`shadow-experience-card h-[11rem] rounded-[2.4rem] bg-gray-200 p-[2rem] md:h-[11.3rem] ${index === 2 ? 'mb-[3rem]' : 'mb-[4rem]'}`}
+              className={`shadow-experience-card h-[11rem] rounded-[2.4rem] bg-gray-200 p-[2rem] md:h-[11.3rem]`}
             ></article>
           </li>
         ))}