diff --git a/src/hooks/useGetSelection.ts b/src/hooks/useGetSelection.ts
index b2319c5..6e400b9 100644
--- a/src/hooks/useGetSelection.ts
+++ b/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 }
diff --git a/src/screen/Search.tsx b/src/screen/Search.tsx
index 3a957cd..d02fb0f 100644
--- a/src/screen/Search.tsx
+++ b/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,11 +125,17 @@ 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: {
@@ -136,7 +143,7 @@ const Search = () => {
                 thumb_2: edges[1].node.thumbnails[0],
                 thumb_3: edges[2].node.thumbnails[0],
                 name: 'test',
-                ...selection,
+                ...vars,
               },
             })
           }}
diff --git a/src/screen/Tutorial/components/HasGuardian.tsx b/src/screen/Tutorial/components/HasGuardian.tsx
index 857607d..62e85c1 100644
--- a/src/screen/Tutorial/components/HasGuardian.tsx
+++ b/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>
diff --git a/src/screen/Tutorial/components/Nickname.tsx b/src/screen/Tutorial/components/Nickname.tsx
index 4b8580f..0fe248d 100644
--- a/src/screen/Tutorial/components/Nickname.tsx
+++ b/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>
diff --git a/src/screen/Tutorial/components/Result.tsx b/src/screen/Tutorial/components/Result.tsx
index 8bf7767..589b0f9 100644
--- a/src/screen/Tutorial/components/Result.tsx
+++ b/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>
diff --git a/src/screen/Tutorial/components/WhichOption.tsx b/src/screen/Tutorial/components/WhichOption.tsx
index 98f2ec2..f3fc2a2 100644
--- a/src/screen/Tutorial/components/WhichOption.tsx
+++ b/src/screen/Tutorial/components/WhichOption.tsx
@@ -2,8 +2,8 @@ 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
@@ -11,13 +11,14 @@ type OptionProps = {
   onChangeElevator: () => void
 }
 const WhichOption: React.FC<OptionProps> = ({
-  selection,
   onChangeParkingLot,
   onChangeWheelchair,
   onChangeToilet,
   onChangePath,
   onChangeElevator,
 }) => {
+  const selection = store((state) => state.selection)
+
   return (
     <Wrapper>
       <SubTitle>필요 시설</SubTitle>
diff --git a/src/screen/Tutorial/components/WhichPlace.tsx b/src/screen/Tutorial/components/WhichPlace.tsx
index 29a3db1..820777a 100644
--- a/src/screen/Tutorial/components/WhichPlace.tsx
+++ b/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>
diff --git a/src/screen/Tutorial/index.tsx b/src/screen/Tutorial/index.tsx
index 90503b8..900257e 100644
--- a/src/screen/Tutorial/index.tsx
+++ b/src/screen/Tutorial/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
+import store from 'store/index'
 import styled, { withTheme } from 'styled-components'
 
 import HasGaurdian from './components/HasGuardian'
@@ -11,16 +12,7 @@ import WhichPlace from './components/WhichPlace'
 import { Selection } from './types/selection'
 
 const Tutorial = () => {
-  const [selection, setSelection] = React.useState<Selection>({
-    needCompanion: false,
-    nickName: '',
-    parkingAvailable: false,
-    wheelChairRentable: false,
-    elevatorAvailable: false,
-    toiletAvailable: false,
-    pathExists: false,
-    categories: [],
-  })
+  const [selection, setSelection] = store((state) => [state.selection, state.setSelection])
 
   const [step, setStep] = React.useState(1)
   const [percent, setPercent] = React.useState(20)
@@ -37,20 +29,13 @@ const Tutorial = () => {
       // selection에서 undefined인 key값을 모두 삭제해야함
 
       const searchParams = new URLSearchParams()
-
       for (const key in selection) {
-        if (key === 'nickName') {
-          window.localStorage.getItem('nickName')
-          let name = window.localStorage.getItem('nickName')
-          console.log('닉네임 로컬 : ', name)
-          continue
-        }
         if (key === 'categories') {
           if (!!selection.categories && selection.categories.length > 0) {
             //set search params
-            for (const category of selection.categories) {
-              searchParams.append('categories', category)
-            }
+            const categories = selection.categories.join(',')
+
+            searchParams.append('categories', categories)
           }
           // searchParams.append('categories', selection.categories.)
 
@@ -68,10 +53,6 @@ const Tutorial = () => {
         }
       }
 
-      console.log([...searchParams.entries()])
-
-      console.log(searchParams.getAll('categories'))
-
       // const searchParams = new URLSearchParams({
       //   elevatorAvailable: 'true',
       // })
@@ -95,42 +76,25 @@ const Tutorial = () => {
   }
 
   const onChangeNeedCompanion = (needCompanion: boolean) => {
-    setSelection((prev) => ({
-      ...prev,
-      needCompanion,
-    }))
+    setSelection({ needCompanion })
   }
 
+  console.log(selection, ' <<<??')
   const onChangeParkingLot = () => {
-    setSelection((prev) => ({
-      ...prev,
-      parkingAvailable: !prev.parkingAvailable,
-    }))
+    setSelection({ parkingAvailable: !selection.parkingAvailable })
   }
   const onChangeWheelchair = () => {
-    setSelection((prev) => ({
-      ...prev,
-      wheelChairRentable: !prev.wheelChairRentable,
-    }))
+    setSelection({ wheelChairRentable: !selection.wheelChairRentable })
   }
   const onChangeToilet = () => {
-    setSelection((prev) => ({
-      ...prev,
-      toiletAvailable: !prev.toiletAvailable,
-    }))
+    setSelection({ toiletAvailable: !selection.toiletAvailable })
   }
   const onChangePath = () => {
-    setSelection((prev) => ({
-      ...prev,
-      pathExists: !prev.pathExists,
-    }))
+    setSelection({ pathExists: !selection.pathExists })
   }
 
   const onChangeElevator = () => {
-    setSelection((prev) => ({
-      ...prev,
-      elevatorAvailable: !prev.elevatorAvailable,
-    }))
+    setSelection({ elevatorAvailable: !selection.elevatorAvailable })
   }
 
   const onClickCategory = (category: string) => {
@@ -138,16 +102,14 @@ const Tutorial = () => {
     if (!prevCategories.includes(category)) {
       const newCategories = [...prevCategories, category]
 
-      setSelection((prev) => ({
-        ...prev,
+      setSelection({
         categories: newCategories,
-      }))
+      })
     } else {
       const newCategories = prevCategories.filter((pCategory) => pCategory !== category)
-      setSelection((prev) => ({
-        ...prev,
+      setSelection({
         categories: newCategories,
-      }))
+      })
     }
   }
 
@@ -158,12 +120,11 @@ const Tutorial = () => {
       </Header>
       <Main>
         {step === 1 ? (
-          <HasGaurdian selection={selection} onChangeNeedCompanion={onChangeNeedCompanion} />
+          <HasGaurdian onChangeNeedCompanion={onChangeNeedCompanion} />
         ) : step === 2 ? (
           <Nickname />
         ) : step === 3 ? (
           <WhichOption
-            selection={selection}
             onChangeParkingLot={onChangeParkingLot}
             onChangeWheelchair={onChangeWheelchair}
             onChangeToilet={onChangeToilet}
@@ -171,7 +132,7 @@ const Tutorial = () => {
             onChangeElevator={onChangeElevator}
           />
         ) : step === 4 ? (
-          <WhichPlace selection={selection} onClickCategory={onClickCategory} />
+          <WhichPlace onClickCategory={onClickCategory} />
         ) : step === 5 ? (
           <Result />
         ) : null}
@@ -184,14 +145,9 @@ const Tutorial = () => {
   )
 }
 
-// const Wrapper = styled.div`
-//   display: flex;
-//   min-height: 100vh;
-//   flex-direction: column;
-// `
-
 const Mx = styled.div`
   display: flex;
+  padding: 2rem;
   min-height: calc(var(--vh, 1vh) * 100);
   flex-direction: column;
 `
@@ -205,7 +161,6 @@ const Header = styled.header`
 const Main = styled.main`
   flex: 1;
 `
-
 const PrevBtn = styled.button`
   width: 100%;
   height: 4.187rem;
diff --git a/src/store/index.ts b/src/store/index.ts
index 3974443..eabb22d 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -2,18 +2,24 @@ import { getIsMobile } from './../utils/index'
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
 
+export interface Selection {
+  categories: string[] | null
+  parkingAvailable: boolean
+  wheelChairRentable: boolean
+  elevatorAvailable: boolean
+  toiletAvailable: boolean
+  pathExists: boolean
+  needCompanion: boolean
+}
+
 export interface IStore {
   isMobile: boolean
   toggle: boolean
-  selection: {
-    categories: string[] | null
-    parkingAvailable: boolean
-    wheelChairRentable: boolean
-    elevatorAvailable: boolean
-    toiletAvailable: boolean
-    pathExists: boolean
-    needCompanion: boolean
-  }
+  myName: string
+  sharedName: string
+  selection: Selection
+  setSelection: (selection: Partial<Selection>) => void
+  setName: ({ key, value }: { key: 'myName' | 'sharedName'; value: string }) => void
   position?: GeolocationPosition | null
   setToggle: (flag?: boolean) => void
   setPosition: (p: GeolocationPosition) => void
@@ -27,6 +33,9 @@ const store = create<Store>()(
       isMobile: getIsMobile(),
       toggle: false,
       position: null,
+      myName: '어드미',
+      sharedName: '어드미',
+      setName: (options) => set((state) => ({ ...state, [options.key]: options.value })),
       selection: {
         categories: null,
         parkingAvailable: false,
@@ -37,6 +46,9 @@ const store = create<Store>()(
         needCompanion: false,
       },
       setPosition: (position: GeolocationPosition) => set((state) => ({ ...state, position })),
+      setSelection: (selection) => {
+        set((state) => ({ ...state, selection: { ...state.selection, ...selection } }))
+      },
       setToggle: (flag) => {
         set((state) => ({ ...state, toggle: flag !== undefined ? flag : !state.toggle }))
       },