Merge branch 'fix/css'

src/hooks/useGetSelection.ts

@@ -7,14 +7,35 @@ const useGetSelection = () => {
   const selectorFn = useCallback(
     (state: IStore) =>
       Object.keys(state.selection).reduce((acc, cur) => {
-        if (param.get(cur) || state.selection[cur] || cur === 'needCompanion') {
-          const value = param.get(cur) || state.selection[cur]
-          const obj = {
-            [cur]: cur === 'needCompanion' ? value === 'true' : value,
+        if (cur === 'categories') {
+          let categories = param.get(cur) || state.selection[cur]
+          if (typeof categories === 'string') {
+            categories = categories.split(',')
           }
           return {
             ...acc,
-            ...obj,
+            [cur]: categories,
+          }
+        } else if (
+          param.get(cur) === 'true' ||
+          state.selection[cur] === 'true' ||
+          cur === 'needCompanion'
+        ) {
+          const value = (param.get(cur) || state.selection[cur]) === 'true'
+          const obj = {
+            [cur]: value,
+          }
+          if (cur === 'needCompanion') {
+            return {
+              ...acc,
+              [cur]: !!(param.get(cur) || state.selection[cur]),
+            }
+          }
+          if (value) {
+            return {
+              ...acc,
+              ...obj,
+            }
           }
         }
         return { ...acc }

src/screen/Search.tsx

@@ -12,7 +12,7 @@ import { Loading } from 'routes/Router'
 import { useParams, useSearchParams } from 'react-router-dom'
 import Spinner from 'components/common/Spinner'
 
-const SearchQuery = gql`
+export const SearchQuery = gql`
   query GetSearchList(
     $before: String
     $after: String
@@ -75,9 +75,10 @@ const SearchQuery = gql`
 `
 
 const Search = () => {
-  const { setToggle, position } = store((state) => ({
+  const { setToggle, position, myName } = store((state) => ({
     setToggle: state.setToggle,
     position: state.position,
+    myName: state.myName,
   }))
   const [isLoading, setIsLoading] = useState(true)
   const selection = useGetSelection()
@@ -124,19 +125,25 @@ const Search = () => {
         className='px'
       >
         <h3 className='title-large'>
-          내 주변 가까운 <br />
+          {myName ? `${myName}님` : '내'} 주변 가까운 <br />
           {places?.totalCount}개의 추천 관광지
         </h3>
         <div
           onClick={() => {
+            let vars = { ...selection }
+            if (vars.categories?.length) {
+              vars.categories = vars.categories.join(',')
+            }
+            console.log(selection, 'selection')
+
             window.Kakao.Share.sendCustom({
               templateId: 91940,
               templateArgs: {
                 thumb_1: edges[0].node.thumbnails[0],
                 thumb_2: edges[1].node.thumbnails[0],
                 thumb_3: edges[2].node.thumbnails[0],
                 name: 'test',
-                ...selection,
+                ...vars,
               },
             })
           }}

src/screen/Tutorial/components/HasGuardian.tsx

@@ -2,11 +2,12 @@ import React from 'react'
 import styled from 'styled-components'
 import { ReactComponent as Picture } from 'assets/picture.svg'
 import { Selection } from '../types/selection'
+import store from 'store/index'
 type HasGaurdianProps = {
-  selection: Selection // 동행 여부 변경
   onChangeNeedCompanion: (needCompanion: boolean) => void
 }
-const HasGaurdian: React.FC<HasGaurdianProps> = ({ selection, onChangeNeedCompanion }) => {
+const HasGaurdian: React.FC<HasGaurdianProps> = ({ onChangeNeedCompanion }) => {
+  const selection = store((state) => state.selection)
   return (
     <Wrapper>
       <SubTitle>동행 여부</SubTitle>

src/screen/Tutorial/components/Nickname.tsx

@@ -1,17 +1,8 @@
-import React from 'react'
 import styled from 'styled-components'
-import { useState, type ChangeEventHandler } from 'react'
-import { ReactComponent as Picture } from 'assets/picture.svg'
+import store from 'store/index'
 
 const Nickname = () => {
-  const [nickName, setNickName] = useState('')
-
-  const handleNickName: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setNickName((prev) => e.target.value)
-    window.localStorage.setItem('nickName', e.target.value) // 추후 막아두기 글자수 제한 넣어서
-  }
-
-  // const
+  const [name, setName] = store((state) => [state.myName, state.setName])
 
   return (
     <Wrapper>
@@ -23,8 +14,10 @@ const Nickname = () => {
             name='nickName'
             id='nickName'
             type='name'
+            defaultValue={name}
+            maxLength={5}
             placeholder='닉네임을 입력해주세요'
-            onChange={handleNickName}
+            onChange={(event) => setName({ key: 'myName', value: event.target.value })}
           />
         </label>
       </InputBox>

src/screen/Tutorial/components/Result.tsx

@@ -1,19 +1,67 @@
-import React from 'react'
+import { useQuery } from '@apollo/client'
+import { GetSearchListQuery } from 'api/graphql'
+import { PER_PAGE } from 'constants/common'
+import useGetSelection from 'hooks/useGetSelection'
+import React, { useMemo, useState } from 'react'
+import { Loading } from 'routes/Router'
+import store from 'store/index'
 
 import styled from 'styled-components'
+import { SearchQuery } from '../../Search'
 import Item from './Item'
 
 const Result = () => {
-  let name = window.localStorage.getItem('nickName')
-  return (
+  const [isLoading, setIsLoading] = useState(true)
+  const { selection, setToggle, position } = store((state) => ({
+    setToggle: state.setToggle,
+    position: state.position,
+    selection: state.selection,
+  }))
+  const variables = useMemo(() => {
+    const vars = Object.keys(selection).reduce((acc, cur) => {
+      if (cur === 'needCompanion') {
+        return { ...acc, [cur]: selection[cur] }
+      } else if (!selection[cur]) {
+        return { ...acc }
+      }
+      return { ...acc, [cur]: selection[cur] }
+    }, {})
+    if (!position?.coords.latitude || !position?.coords.longitude) {
+      return { ...vars, first: PER_PAGE }
+    }
+    return {
+      ...vars,
+      coordinates: {
+        latitude: position?.coords.latitude,
+        longitude: position?.coords.longitude,
+      },
+      first: PER_PAGE,
+    }
+  }, [position])
+  console.log(variables, 'variables')
+  const {
+    data: { places } = {},
+    fetchMore,
+    loading,
+    called,
+  } = useQuery<GetSearchListQuery>(SearchQuery, {
+    variables,
+    notifyOnNetworkStatusChange: true,
+    onCompleted(data) {
+      setIsLoading(false)
+    },
+  })
+  const name = store((state) => state.myName)
+  return isLoading || !called ? (
+    <Loading text='결과를 불러오고 있어요..' />
+  ) : (
     <Wrapper>
       {/* <div>
         <span>자연경관</span>
       </div> */}
       <Item />
       <Title>
-        {name}에게 어울리는 <br />
-        총 20개의 <br />
+        {name}에게 어울리는 <br />총 {places?.totalCount}개의 <br />
         편안한 여행지를 찾았어요
       </Title>
     </Wrapper>

src/screen/Tutorial/components/WhichOption.tsx

@@ -2,22 +2,23 @@ import React from 'react'
 import styled from 'styled-components'
 import { Selection } from '../types/selection'
 import { ReactComponent as Picture } from 'assets/picture.svg'
+import store from 'store/index'
 type OptionProps = {
-  selection: Selection // 옵션 선택 여부 변경
   onChangeParkingLot: () => void
   onChangeWheelchair: () => void
   onChangeToilet: () => void
   onChangePath: () => void
   onChangeElevator: () => void
 }
 const WhichOption: React.FC<OptionProps> = ({
-  selection,
   onChangeParkingLot,
   onChangeWheelchair,
   onChangeToilet,
   onChangePath,
   onChangeElevator,
 }) => {
+  const selection = store((state) => state.selection)
+
   return (
     <Wrapper>
       <SubTitle>필요 시설</SubTitle>

src/screen/Tutorial/components/WhichPlace.tsx

@@ -2,12 +2,13 @@ import React from 'react'
 import styled from 'styled-components'
 import { Selection } from '../types/selection'
 import { ReactComponent as Picture } from 'assets/picture.svg'
+import store from 'store/index'
 type PlaceProps = {
-  selection: Selection
   onClickCategory: (category: string) => void
 }
 
-const WhichPlace: React.FC<PlaceProps> = ({ selection, onClickCategory }) => {
+const WhichPlace: React.FC<PlaceProps> = ({ onClickCategory }) => {
+  const selection = store((state) => state.selection)
   return (
     <Wrapper>
       <SubTitle>필요 시설</SubTitle>