feature: 결과값 searchparam 우선

NolDaGapSeoYang · Mar 30, 2023 · 3527334 · 3527334
1 parent 6c1a20b
commit 3527334
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
+    integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx"
+    crossorigin="anonymous"></script>
+
+  <script>
+    Kakao.init('391f7206a40e805c09b77bb18110679d'); // 사용하려는 앱의 JavaScript 키 입력
+  </script>
+  <title>Vite + React + TS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/src/hooks/useGetSelection.ts b/src/hooks/useGetSelection.ts
@@ -1,12 +1,14 @@
+import { useSearchParams } from 'react-router-dom'
 import { useCallback } from 'react'
 import store, { IStore } from 'store/index'
 
 const useGetSelection = () => {
+  const [param] = useSearchParams()
   const selectorFn = useCallback(
     (state: IStore) =>
       Object.keys(state.selection).reduce((acc, cur) => {
-        if (state.selection[cur] || cur === 'needCompanion') {
-          return { ...acc, [cur]: state.selection[cur] }
+        if (param.get(cur) || state.selection[cur] || cur === 'needCompanion') {
+          return { ...acc, [cur]: param.get(cur) || state.selection[cur] }
         }
         return { ...acc }
       }, {}),

diff --git a/src/screen/Search.tsx b/src/screen/Search.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { ReactComponent as Kakao } from 'assets/kakao.svg'
+import { ReactComponent as KakaoIcon } from 'assets/kakao.svg'
 
 import store from 'store/index'
 import { gql, useQuery } from '@apollo/client'
@@ -9,6 +9,7 @@ import { GetSearchListQuery, GetSearchListQueryVariables } from 'api/graphql'
 import { useMemo } from 'react'
 import DestinationCard from 'components/Search/DestinationCard'
 import { Loading } from 'routes/Router'
+import { useParams, useSearchParams } from 'react-router-dom'
 
 const SearchQuery = gql`
   query GetSearchList(
@@ -77,6 +78,7 @@ const Search = () => {
     setToggle: state.setToggle,
     position: state.position,
   }))
+
   const selection = useGetSelection()
   const variables = useMemo(() => {
     if (!position?.coords.latitude || !position?.coords.longitude) {
@@ -102,7 +104,7 @@ const Search = () => {
 
   const hasNextPage = places?.pageInfo.hasNextPage
   const edges = useMemo(() => places?.edges, [places?.edges])
-  console.log(loading, 'loading')
+
   return loading || !called ? (
     <Loading text='결과를 불러오고 있어요..' />
   ) : (
@@ -121,7 +123,21 @@ const Search = () => {
           내 주변 가까운 <br />
           {places?.totalCount}개의 추천 관광지
         </h3>
-        <Kakao />
+        <KakaoIcon
+          onClick={() => {
+            window.Kakao.Share.sendCustom({
+              templateId: 91940,
+              templateArgs: {
+                name: '???',
+                thumb_1: edges[0].node.thumbnails[0],
+                thumb_2: edges[1].node.thumbnails[0],
+                thumb_3: edges[2].node.thumbnails[0],
+              },
+              installTalk: true,
+              callback: () => console.log('???'),
+            })
+          }}
+        />
       </div>
 
       <Stickable>