[JR-878] QA사항 처리

apps/jurumarble/src/app/map/components/MapContainer.tsx

@@ -13,11 +13,20 @@ import SvgIcMyLocationFloating from 'src/assets/icons/ic_my_location_floating.sv
 import styled from 'styled-components';
 
 import RegionBottomSheet from './RegionBottomsheet';
-import { useGeoLocation } from '../hooks/useGeoLocation';
 import useDrinksMapService from '../services/useDrinksMapService';
 
+interface Location {
+  latitude: number;
+  longitude: number;
+}
+
 const MapContainer = () => {
   const [delayRender, setDelayRender] = useState(true);
+  const [nowIn, setNowIn] = useState('');
+
+  const onChangeNowIn = (clickRegion: string) => {
+    setNowIn(clickRegion);
+  };
 
   useEffect(() => {
     setTimeout(() => {
@@ -26,9 +35,10 @@ const MapContainer = () => {
   }, []);
 
   const [_, toggleMap] = useToggle();
-  const { location, toggleOnLocation, onLocation } = useGeoLocation();
-  const [on, toggle] = useToggle();
+  const [loading, setLoading] = useState(false);
+
   const mapRef = useRef<kakao.maps.Map>(null);
+  const [on, toggle] = useToggle();
   const [mapXY, setMapXY] = useState({
     startX: 33.64225953272826,
     startY: 119.06076029979886,
@@ -60,23 +70,6 @@ const MapContainer = () => {
     level: 13,
   });
 
-  // useEffect(() => {
-  //   const kakaoMapScript = document.createElement("script");
-  //   kakaoMapScript.async = false;
-  //   kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=700d399006256f95732f06b19c046ba5&autoload=false`;
-  //   document.head.appendChild(kakaoMapScript);
-
-  //   const onLoadKakaoAPI = () => {
-  //     window.kakao.maps.load(() => {
-  //       var container = document.getElementById("map");
-
-  //       var map = new window.kakao.maps.Map(container);
-  //     });
-  //   };
-
-  //   kakaoMapScript.addEventListener("load", onLoadKakaoAPI);
-  // }, []);
-
   const onIdleMap = () => {
     const map = mapRef.current;
     if (map) {
@@ -93,16 +86,69 @@ const MapContainer = () => {
   };
 
   const setChangeMapCenter = (lat: number, lng: number) => {
+    console.log(lat, lng);
     setState({
       center: { lat, lng },
       isPanto: true,
       level: 11,
     });
     setTimeout(() => {
+      console.log('onIdleMap');
       onIdleMap();
     }, 100);
   };
 
+  const [onLocation, toggleOnLocation] = useToggle(false);
+
+  const toggleLocationLoading = () => {
+    if (!onLocation) {
+      setLoading(true);
+    }
+    toggleOnLocation();
+  };
+
+  // location 정보 저장
+  const [location, setLocation] = useState<Location>({
+    latitude: 0,
+    longitude: 0,
+  });
+  // 에러 메세지 저장
+  const [, setError] = useState('');
+
+  // Geolocation의 `getCurrentPosition` 메소드에 대한 성공 callback 핸들러
+  const handleSuccess = (pos: GeolocationPosition) => {
+    const { latitude, longitude } = pos.coords;
+    setChangeMapCenter(latitude, longitude);
+    setLoading(false);
+    setLocation({
+      latitude,
+      longitude,
+    });
+  };
+
+  console.log(location);
+
+  // Geolocation의 `getCurrentPosition` 메소드에 대한 실패 callback 핸들러
+  const handleError = (error: GeolocationPositionError) => {
+    setError(error.message);
+  };
+
+  useEffect(() => {
+    if (!onLocation) {
+      return;
+    }
+    const { geolocation } = navigator;
+
+    // 사용된 브라우저에서 지리적 위치(Geolocation)가 정의되지 않은 경우 오류로 처리합니다.
+    if (!geolocation) {
+      setError('Geolocation is not supported.');
+      return;
+    }
+
+    // Geolocation API 호출
+    geolocation.getCurrentPosition(handleSuccess, handleError);
+  }, [onLocation]);
+
   if (delayRender) {
     return <Loading />;
   }
@@ -112,17 +158,27 @@ const MapContainer = () => {
       <TopBox>
         <SettingWrapper>
           <h1 className="title">
-            여행지 근처의
-            <br /> 우리술을 찾아드려요
+            {nowIn === '' ? (
+              <>
+                여행지 근처의
+                <br /> 우리술을 찾아드려요
+              </>
+            ) : (
+              <>
+                <span className="highlight">{nowIn}</span> 근처에 있는
+                <br /> <span className="highlight">우리술</span>이에요.
+              </>
+            )}
           </h1>
 
           <Button variant="primary" height="40px" width="82px" onClick={toggle}>
             직접 설정
           </Button>
         </SettingWrapper>
         <div className="description">
-          여행지를 설정하면 <br />
-          여행지의 우리술을 확인할 수 있어요
+          여행지를 설정하면 근처에 있는 우리술을
+          <br />
+          추천받을 수 있어요.
         </div>
       </TopBox>
 
@@ -172,7 +228,11 @@ const MapContainer = () => {
               }}
             />
           ))}
-          <MyLocationButton onClick={toggleOnLocation}>
+          <MyLocationButton
+            onClick={() => {
+              toggleLocationLoading();
+            }}
+          >
             <Image
               src={SvgIcMyLocationFloating}
               width={40}
@@ -211,10 +271,12 @@ const MapContainer = () => {
           ),
         )}
       </DrinkBox>
+      {loading && <Loading />}
       <RegionBottomSheet
         setChangeMapCenter={setChangeMapCenter}
         onToggleDrinkSearchModal={toggle}
         on={on}
+        onChangeNowIn={onChangeNowIn}
       />
     </Container>
   );
@@ -232,6 +294,9 @@ const TopBox = styled.section`
     text-align: left;
     ${({ theme }) => theme.typography.headline02};
     padding-bottom: 8px;
+    .highlight {
+      color: ${({ theme }) => theme.colors.main_01};
+    }
   }
 
   .description {

apps/jurumarble/src/app/map/components/RegionBottomsheet.tsx

@@ -8,12 +8,14 @@ interface Props {
   on: boolean;
   onToggleDrinkSearchModal: () => void;
   setChangeMapCenter: (lat: number, lng: number) => void;
+  onChangeNowIn: (nowIn: string) => void;
 }
 
 const RegionBottomSheet = ({
   on,
   onToggleDrinkSearchModal,
   setChangeMapCenter,
+  onChangeNowIn,
 }: Props) => {
   if (!on) {
     return null;
@@ -43,6 +45,7 @@ const RegionBottomSheet = ({
                 onClick={() => {
                   setChangeMapCenter(lat, long);
                   onToggleDrinkSearchModal();
+                  onChangeNowIn(label);
                 }}
               >
                 {label}

apps/jurumarble/src/app/vote/[id]/components/ChipContainer.tsx

@@ -7,6 +7,7 @@ import Path from 'lib/Path';
 import { AorB } from 'lib/apis/vote';
 import { formatDate } from 'lib/utils/formatDate';
 import { useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
 import useGetUserInfo from 'services/useGetUserInfo';
 import SvgIcBookmark from 'src/assets/icons/components/IcBookmark';
 import SvgIcBookmarkActive from 'src/assets/icons/components/IcBookmarkActive';
@@ -127,7 +128,13 @@ const ChipContainer = ({
           //   onToggleNonWriterMenu();
           // }}
           onReport={() => {
-            mutate(voteId);
+            mutate(voteId, {
+              onSuccess: () => {
+                toast.success('신고가 접수되었습니다.', {
+                  toastId: 'report',
+                });
+              },
+            });
 
             onToggleNonWriterMenu();
           }}
@@ -168,6 +175,11 @@ const FlexRow = styled.div`
 
 const Description = styled.div`
   padding-bottom: 20px;
+  white-space: pre-wrap;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   ${({ theme }) => theme.typography.body_long03}
   color: ${({ theme }) => theme.colors.black_02};
 `;

apps/jurumarble/src/app/vote/[id]/components/Comment.tsx

@@ -238,7 +238,13 @@ function Comment({ comment, mutateLike, mutateHate, voteType, postId }: Props) {
             onToggleNonWriterMenu();
           }}
           onReport={() => {
-            mutate(id);
+            mutate(id, {
+              onSuccess: () => {
+                toast.success('신고가 접수되었습니다.', {
+                  toastId: 'report',
+                });
+              },
+            });
             onToggleNonWriterMenu();
           }}
           right="20px"