test: 카카오링크공유테스트

NolDaGapSeoYang · Mar 30, 2023 · 78f87b8 · 78f87b8
1 parent 3527334
commit 78f87b8
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 4 deletions.
diff --git a/src/GlobalStyle.tsx b/src/GlobalStyle.tsx
@@ -159,6 +159,53 @@ const GlobalStyle = createGlobalStyle`
     padding-right: 2rem;
   }
 
+
+.svg-pi-wrapper {
+  position: relative;
+}
+
+.svg-pi {
+  transform: rotate(-90deg); /* Fix the orientation */
+}
+
+/* Animated spinner version */
+.svg-pi-indicator--spinner {
+  animation: spinner .75s ease-in-out infinite;
+  transform-origin: center;
+}
+
+.svg-pi-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.svg-pi-label__loading {
+  opacity: .5;
+  font-size: 0.75em;
+}
+
+.svg-pi-label__progress {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.svg-pi-label__loading,
+.svg-pi-label__progress {
+  display: block;
+}
+
+/* Spinner animation */
+@keyframes spinner {
+  0% {
+    transform: rotate(0)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}
 `
 
 export default GlobalStyle
diff --git a/src/components/common/Spinner.tsx b/src/components/common/Spinner.tsx
@@ -0,0 +1,66 @@
+const Spinner = (props) => {
+  let {
+    size = 150,
+    progress = 0,
+    trackWidth = 10,
+    trackColor = `#ddd`,
+    indicatorWidth = 10,
+    indicatorColor = `#07c`,
+    indicatorCap = `round`,
+    label = `Loading...`,
+    labelColor = `#333`,
+    spinnerMode = false,
+    spinnerSpeed = 1,
+  } = props
+
+  const center = size / 2,
+    radius = center - (trackWidth > indicatorWidth ? trackWidth : indicatorWidth),
+    dashArray = 2 * Math.PI * radius,
+    dashOffset = dashArray * ((100 - progress) / 100)
+
+  let hideLabel = size < 100 || !label.length || spinnerMode ? true : false
+
+  return (
+    <>
+      <div className='svg-pi-wrapper' style={{ width: size, height: size, margin: '0 auto' }}>
+        <svg className='svg-pi' style={{ width: size, height: size }}>
+          <circle
+            className='svg-pi-track'
+            cx={center}
+            cy={center}
+            fill='transparent'
+            r={radius}
+            stroke={trackColor}
+            strokeWidth={trackWidth}
+          />
+          <circle
+            className={`svg-pi-indicator ${spinnerMode ? 'svg-pi-indicator--spinner' : ''}`}
+            style={{ animationDuration: spinnerSpeed * 1000 }}
+            cx={center}
+            cy={center}
+            fill='transparent'
+            r={radius}
+            stroke={indicatorColor}
+            strokeWidth={indicatorWidth}
+            strokeDasharray={dashArray}
+            strokeDashoffset={dashOffset}
+            strokeLinecap={indicatorCap}
+          />
+        </svg>
+
+        {!hideLabel && (
+          <div className='svg-pi-label' style={{ color: labelColor }}>
+            <span className='svg-pi-label__loading'>{label}</span>
+
+            {!spinnerMode && (
+              <span className='svg-pi-label__progress'>
+                {`${progress > 100 ? 100 : progress}%`}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+export default Spinner
diff --git a/src/screen/Search.tsx b/src/screen/Search.tsx
@@ -6,10 +6,11 @@ import { gql, useQuery } from '@apollo/client'
 import { PER_PAGE } from 'constants/common'
 import useGetSelection from 'hooks/useGetSelection'
 import { GetSearchListQuery, GetSearchListQueryVariables } from 'api/graphql'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import DestinationCard from 'components/Search/DestinationCard'
 import { Loading } from 'routes/Router'
 import { useParams, useSearchParams } from 'react-router-dom'
+import Spinner from 'components/common/Spinner'
 
 const SearchQuery = gql`
   query GetSearchList(
@@ -78,7 +79,7 @@ const Search = () => {
     setToggle: state.setToggle,
     position: state.position,
   }))
-
+  const [isLoading, setIsLoading] = useState(true)
   const selection = useGetSelection()
   const variables = useMemo(() => {
     if (!position?.coords.latitude || !position?.coords.longitude) {
@@ -100,12 +101,17 @@ const Search = () => {
     called,
   } = useQuery<GetSearchListQuery>(SearchQuery, {
     variables,
+    notifyOnNetworkStatusChange: true,
+    onCompleted(data) {
+      console.log(data, 'dd')
+      setIsLoading(false)
+    },
   })
 
   const hasNextPage = places?.pageInfo.hasNextPage
   const edges = useMemo(() => places?.edges, [places?.edges])
 
-  return loading || !called ? (
+  return isLoading || !called ? (
     <Loading text='결과를 불러오고 있어요..' />
   ) : (
     <Wrapper>
@@ -125,6 +131,9 @@ const Search = () => {
         </h3>
         <KakaoIcon
           onClick={() => {
+            console.log(edges[0].node.thumbnails[0])
+            console.log(edges[1].node.thumbnails[0])
+            console.log(edges[2].node.thumbnails[0])
             window.Kakao.Share.sendCustom({
               templateId: 91940,
               templateArgs: {
@@ -133,7 +142,7 @@ const Search = () => {
                 thumb_2: edges[1].node.thumbnails[0],
                 thumb_3: edges[2].node.thumbnails[0],
               },
-              installTalk: true,
+
               callback: () => console.log('???'),
             })
           }}
@@ -169,6 +178,17 @@ const Search = () => {
               />
             ))
           : null}
+        {loading ? (
+          <Spinner
+            trackColor='#a7a7a7'
+            indicatorColor='#4f4f4f'
+            size={50}
+            progress={25}
+            trackWidth={5}
+            indicatorWidth={5}
+            spinnerMode={true}
+          />
+        ) : null}
       </DestinationList>
     </Wrapper>
   )