Merge pull request #38 from 9oorm-Oreum/chore/#33

feat: 오름 공유하기 버튼 navigate 기능 추가
9oorm-Oreum · Nov 17, 2022 · bea6114 · bea6114 · vercel · Nov 17, 2022
2 parents f77e5c9 + 76cb2b3
commit bea6114
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 34 deletions.
diff --git a/src/components/myOreumResult/constants.ts b/src/components/myOreumResult/constants.ts
@@ -1,6 +1,6 @@
 import { OreumType } from '../../api/types';
 
-interface OreumTypeInfo {
+export interface OreumTypeInfo {
   name: string;
   description: string;
 }

diff --git a/src/components/oreumInfo/CarouselPage.tsx b/src/components/oreumInfo/CarouselPage.tsx
@@ -6,19 +6,51 @@ import 'swiper/css/pagination';
 import MyOreumInfo from './MyOreumInfo';
 import CareOreum from './CareOreum';
 import ProtectOreum from './ProtectOreum';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useQuery } from 'react-query';
+import { MyOreumResponse } from '../../api/types';
+import { getMyOreum } from '../../api';
+import { useEffect } from 'react';
+import { OREUM_TYPE_INFO } from '../myOreumResult/constants';
 
 export default function CarouselPage() {
+  const { id } = useParams();
+  const { data: myOreum } = useQuery<Pick<MyOreumResponse, 'type' | 'xpos' | 'ypos' | 'myOreumId'>>(
+    ['myOreum', id],
+    async () => {
+      if (!id) throw new Error('잘못된 접근입니다');
+      const { type, ypos, xpos, myOreumId } = await getMyOreum(+id);
+      return { type, ypos, xpos, myOreumId };
+    },
+    {
+      enabled: !!id,
+      onSuccess: (data) => {
+        console.log(data);
+      },
+    },
+  );
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (id && isNaN(+id)) navigate('/');
+  }, [id]);
+
   return (
     <CarouselBlock>
       <Swiper modules={[Pagination]} spaceBetween={50} slidesPerView={1} pagination={{ type: 'bullets' }}>
         <SwiperSlide>
-          <MyOreumInfo />
+          <MyOreumInfo
+            name={myOreum?.type ? OREUM_TYPE_INFO[myOreum.type].name : ''}
+            description={myOreum?.type ? OREUM_TYPE_INFO[myOreum.type].description : ''}
+            xpos={myOreum ? +myOreum.xpos : -1}
+            ypos={myOreum ? +myOreum.ypos : -1}
+          />
         </SwiperSlide>
         <SwiperSlide>
           <CareOreum />
         </SwiperSlide>
         <SwiperSlide>
-          <ProtectOreum />
+          <ProtectOreum myOreumId={myOreum?.myOreumId ?? -1} />
         </SwiperSlide>
       </Swiper>
     </CarouselBlock>

diff --git a/src/components/oreumInfo/MyOreumInfo.tsx b/src/components/oreumInfo/MyOreumInfo.tsx
@@ -1,35 +1,19 @@
 import { useEffect } from 'react';
-import { useQuery } from 'react-query';
-import { useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
-import { getMyOreum } from '../../api';
-import { MyOreumResponse } from '../../api/types';
 import MyOreumImage from '../common/MyOreumImage';
-import { OREUM_TYPE_INFO } from '../myOreumResult/constants';
 
-export default function MyOreumInfo() {
+interface MyOreumInfoProps {
+  name: string;
+  description: string;
+  ypos: number;
+  xpos: number;
+}
+
+export default function MyOreumInfo({ name, description, ypos, xpos }: MyOreumInfoProps) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const kakao = (window as any).kakao;
 
-  const { id } = useParams();
-  const { data: myOreum } = useQuery<Pick<MyOreumResponse, 'type' | 'xpos' | 'ypos'>>(
-    ['myOreum', id],
-    async () => {
-      if (!id) throw new Error('잘못된 접근입니다');
-      const { type, ypos, xpos } = await getMyOreum(+id);
-      return { type, ypos, xpos };
-    },
-    {
-      enabled: !!id,
-      onSuccess: (data) => {
-        console.log(data);
-      },
-    },
-  );
-  const navigate = useNavigate();
-
   useEffect(() => {
-    if (id && isNaN(+id)) navigate('/');
     const container = document.getElementById('map');
     const options = {
       center: new kakao.maps.LatLng(33.380648, 126.579557),
@@ -41,7 +25,7 @@ export default function MyOreumInfo() {
       new kakao.maps.Size(22.93, 27.33),
     );
     const marker = new kakao.maps.Marker({
-      position: new kakao.maps.LatLng(myOreum?.ypos ?? -1, myOreum?.xpos ?? -1),
+      position: new kakao.maps.LatLng(ypos, xpos),
       image: markerImage, // 마커이미지 설정
     });
     marker.setMap(map);
@@ -52,11 +36,11 @@ export default function MyOreumInfo() {
       <OreumTypeSection>
         <OreumTypeTitle>
           내 오름은
-          <span className='type-name'> {myOreum ? OREUM_TYPE_INFO[myOreum?.type].name : ''}</span>
+          <span className='type-name'> {name}</span>
           이에요
         </OreumTypeTitle>
         <MyOreumImage isSmall className='image' />
-        <div className='type-description'>{myOreum ? OREUM_TYPE_INFO[myOreum?.type].description : ''}</div>
+        <div className='type-description'>{description}</div>
       </OreumTypeSection>
       <OreumPositionSection>
         <OreumPositionTitle>

diff --git a/src/components/oreumInfo/ProtectOreum.tsx b/src/components/oreumInfo/ProtectOreum.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import MyOreumImage from '../common/MyOreumImage';
 import Button from '../home/Button';
 
-export default function ProtectOreum() {
+export default function ProtectOreum({ myOreumId }: { myOreumId: number }) {
   const navigate = useNavigate();
   return (
     <Container>
@@ -19,7 +19,7 @@ export default function ProtectOreum() {
         <Description>만들어진 탐방로는 벗어나지 말아요.</Description>
         <Description>전문 등산 장비는 사용을 자제해 주세요.</Description>
       </DescriptionBlock>
-      <Button onClick={() => navigate('../share/1')}>오름 공유하기</Button>
+      <Button onClick={() => navigate(`/share/${myOreumId}`)}>오름 공유하기</Button>
     </Container>
   );
 }

diff --git a/src/pages/ShareResult.tsx b/src/pages/ShareResult.tsx
@@ -8,6 +8,7 @@ import { useQuery } from 'react-query';
 import { MyOreumResponse } from '../api/types';
 import { getMyOreum } from '../api';
 import { OREUM_TYPE_INFO } from '../components/myOreumResult/constants';
+import { useEffect } from 'react';
 import ShareButton from '../components/shareResult/Button';
 import Button from '../components/home/Button';
 
@@ -106,8 +107,12 @@ export default function ShareResultPage() {
           {
             title: '친구 결과 확인',
             link: {
-              mobileWebUrl: 'https://developers.kakao.com',
-              webUrl: 'https://developers.kakao.com',
+              mobileWebUrl: `${
+                process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '9oorm-oreum-frontend.vercel.app'
+              }/share/${myOreum?.myOreumId}`,
+              webUrl: `${
+                process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '9oorm-oreum-frontend.vercel.app'
+              }/share/${myOreum?.myOreumId}`,
             },
           },
           {
@@ -122,6 +127,10 @@ export default function ShareResultPage() {
     }
   };
 
+  useEffect(() => {
+    if (id && isNaN(+id)) navigate('/');
+  }, [id]);
+
   return (
     <Container>
       <StyledTitle content={myOreum?.nickname ?? ''} />