feat: #2 코스 히스토리 상태값 연결

@types/graphql.d.ts

@@ -183,7 +183,9 @@ declare namespace GQL {
       };
     }
     export namespace Courses {
-      export type Data = Array<GQL.Course>;
+      export type Data = {
+        courses: GQL.Course[];
+      };
     }
     export namespace Course {
       export type Variables = {

components/Course/List/CourseMap/CourseMap.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
+import SpotNavigator from './SpotNavigator';
+import * as $ from './CourseMapView';
 
 export default function CourseMap(): JSX.Element {
-  return null;
+  return (
+    <$.CourseMap>
+      <SpotNavigator />
+    </$.CourseMap>
+  );
 }

components/Course/List/CourseMap/CourseMapView.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const CourseMap = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;

components/Course/List/CourseMap/SpotNavigator/SpotNavigator.tsx

@@ -1,5 +1,22 @@
 import React from 'react';
+import SpotNavigatorItem from './SpotNavigatorItem';
+import { useCurrentStickers } from '~/components/Course/List/SideBar/CourseList/CourseListState';
+import * as $ from './SpotNavigatorView';
 
 export default function SpotNavigator(): JSX.Element {
-  return null;
+  const stickers = useCurrentStickers();
+
+  return (
+    <$.SpotNavigator>
+      <$.List>
+        {stickers.map((sticker, i) => (
+          <SpotNavigatorItem
+            key={`sn-${sticker._id}`}
+            sticker={sticker}
+            index={i}
+          />
+        ))}
+      </$.List>
+    </$.SpotNavigator>
+  );
 }

components/Course/List/CourseMap/SpotNavigator/SpotNavigatorItem.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { getStickerIconWithSugar } from '~/constants/sugar';
+import * as $ from './SpotNavigatorView';
+
+type Props = {
+  index: number;
+  sticker: GQL.Sticker;
+};
+
+export default function SpotNavigatorItem(props: Props): JSX.Element {
+  const { sticker, index } = props;
+  const Sticker = getStickerIconWithSugar(
+    sticker.sweet_percent,
+    sticker.sticker_index
+  );
+
+  return (
+    <$.Item>
+      <$.Navigator>
+        <$.AreaSticker>
+          <Sticker width={56} height={56} />
+        </$.AreaSticker>
+        <$.AreaInfo>
+          <$.Meta>{`스팟 ${index + 1}`}</$.Meta>
+          <$.Name>{sticker.spot.place_name}</$.Name>
+        </$.AreaInfo>
+      </$.Navigator>
+    </$.Item>
+  );
+}

components/Course/List/CourseMap/SpotNavigator/SpotNavigatorState.ts

@@ -0,0 +1,11 @@
+import { makeVar, useReactiveVar } from '@apollo/client';
+
+const currentStickersState = makeVar<GQL.Sticker[]>([]);
+
+export function useCurrentStickers(): GQL.Sticker[] {
+  return useReactiveVar(currentStickersState);
+}
+
+export function updateCurrentStickrs(stickers: GQL.Sticker[]): void {
+  currentStickersState(stickers);
+}

components/Course/List/CourseMap/SpotNavigator/SpotNavigatorView.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+import painter from '~/styles/theme/painter';
+
+export const SpotNavigator = styled.div`
+  position: absolute;
+  left: 0;
+  bottom: 28px;
+  width: 100%;
+  height: 120px;
+  padding: 8px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const List = styled.ul`
+  white-space: nowrap;
+  font-size: 0;
+`;
+
+export const Item = styled.li`
+  display: inline-block;
+  margin: 0 12px;
+  vertical-align: top;
+  &:first-child {
+    margin-left: 16px;
+  }
+  &:last-child {
+    margin-right: 16px;
+  }
+`;
+
+export const Navigator = styled.button.attrs({ type: 'button' })`
+  display: block;
+  width: 344px;
+  height: 104px;
+  padding: 24px;
+  border-radius: 16px;
+  border: 1px solid ${painter.grayscale[3]};
+  box-shadow: 0 0 8px 1px ${painter.grayscale[3]};
+  background-color: #fff;
+  cursor: pointer;
+  &::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+`;
+
+export const AreaSticker = styled.div`
+  float: left;
+  padding-right: 12px;
+`;
+
+export const AreaInfo = styled.div`
+  overflow: hidden;
+  text-align: left;
+`;
+
+export const Meta = styled.div`
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: ${painter.grayscale[8]};
+`;
+
+export const Name = styled.strong`
+  display: block;
+  font-size: 24px;
+  line-height: 32px;
+`;

components/Course/List/Sidebar/Calendar/Calendar.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { useReactiveVar } from '@apollo/client';
 import DatePicker from '~/components/_common/DatePicker';
 import CalendarDate from '~/util/Calendar/CalendarDate';
-import { cursorState } from './CalendarState';
+import { useCursorState } from './CalendarState';
 import * as $ from './CalendarView';
 
 export default function Calendar(): JSX.Element {
-  const cursor = useReactiveVar(cursorState);
+  const [cursor, setCursor] = useCursorState();
   const handleClickDate = (date: CalendarDate) => {
-    console.log(date);
+    setCursor([date.getYear(), date.getMonth(), date.getDate()]);
   };
 
   return (

components/Course/List/Sidebar/Calendar/CalendarState.ts

@@ -1,10 +1,61 @@
-import { makeVar, ReactiveVar } from '@apollo/client';
+import {
+  gql,
+  makeVar,
+  ReactiveVar,
+  useApolloClient,
+  useReactiveVar,
+} from '@apollo/client';
+import { useEffect } from 'react';
+import { changeCurrentCourses } from '~/components/Course/List/SideBar/CourseList/CourseListState';
+
+const GET_COURSES_BY_DATE = gql`
+  query GetCoursesByDate {
+    courses {
+      _id
+      title
+      courseImage
+      is_share
+      stickers(populate: true) {
+        _id
+        is_used
+        sticker_index
+        sweet_percent
+        spot(populate: true) {
+          _id
+          place_name
+          x
+          y
+        }
+      }
+    }
+  }
+`;
 
 type Cursor = [number, number, number];
 
 const now: Date = new Date();
-export const cursorState: ReactiveVar<Cursor> = makeVar([
+export const cursorVar: ReactiveVar<Cursor> = makeVar([
   now.getFullYear(),
   now.getMonth() + 1,
   now.getDate(),
 ]);
+
+export function useCursorState(): [Cursor, (newCursor: Cursor) => void] {
+  const client = useApolloClient();
+  const cursor = useReactiveVar(cursorVar);
+  const setCursor = (newCursor: Cursor) => {
+    cursorVar(newCursor);
+  };
+
+  useEffect(() => {
+    client
+      .query<GQL.Query.Courses.Data>({
+        query: GET_COURSES_BY_DATE,
+      })
+      .then(({ data }) => {
+        changeCurrentCourses(data.courses);
+      });
+  }, [cursor]);
+
+  return [cursor, setCursor];
+}

components/Course/List/Sidebar/CourseList/CourseList.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
 import CourseItem from './CourseItem';
+import { useCurrentCourses } from './CourseListState';
 import * as $ from './CourseListView';
 
-const unixNow = Math.floor(Date.now() / 1000);
-const dummy = [
-  { title: 'abc', spotCount: 0, timestamp: unixNow, isPrivate: true },
-  { title: 'abcd', spotCount: 5, timestamp: unixNow, isPrivate: false },
-  { title: 'abce', spotCount: 2, timestamp: unixNow, isPrivate: true },
-  { title: 'abcf', spotCount: 4, timestamp: unixNow, isPrivate: false },
-  { title: 'abcg', spotCount: 3, timestamp: unixNow, isPrivate: true },
-  { title: 'abch', spotCount: 11, timestamp: unixNow, isPrivate: false },
-];
-
 export default function CourseList(): JSX.Element {
+  const currentCourses = useCurrentCourses();
+
   return (
     <$.CourseList>
-      {dummy.map((dummyItem) => (
-        <CourseItem key={`course-list-${dummyItem.title}`} {...dummyItem} />
+      {currentCourses.map((course) => (
+        <CourseItem
+          key={`cl-${course._id}`}
+          title={course.title}
+          spotCount={course.stickers ? course.stickers.length : 0}
+          timestamp={Math.floor(Date.now() / 1000)}
+          isPrivate={!course.is_share}
+        />
       ))}
     </$.CourseList>
   );

components/Course/List/Sidebar/CourseList/CourseListState.ts

@@ -1,4 +1,24 @@
-import { makeVar, ReactiveVar } from '@apollo/client';
+import { makeVar, ReactiveVar, useReactiveVar } from '@apollo/client';
 
-export const courses: ReactiveVar<GQL.Course[]> = makeVar([]);
-export const currentCourseIndex: ReactiveVar<number> = makeVar(0);
+export const currentCoursesVar: ReactiveVar<GQL.Course[]> = makeVar([]);
+export const currentCourseIndexVar: ReactiveVar<number> = makeVar(0);
+
+export function useCurrentCourses(): GQL.Course[] {
+  return useReactiveVar(currentCoursesVar);
+}
+
+export function useCurrentStickers(): GQL.Sticker[] {
+  const courses = useReactiveVar(currentCoursesVar);
+  const currentCourseIndex = useReactiveVar(currentCourseIndexVar);
+  const course = courses[currentCourseIndex];
+
+  if (!course) {
+    return [];
+  }
+
+  return course.stickers || [];
+}
+
+export function changeCurrentCourses(courses: GQL.Course[]): void {
+  currentCoursesVar(courses);
+}

components/Popup/SpotGenerator/SpotGeneratorState.ts

@@ -1,6 +1,5 @@
 import { makeVar, gql, useMutation } from '@apollo/client';
 import sugar, { toStickerData } from '~/constants/sugar';
-import Storage from '~/lib/storage';
 import createReactiveVarHooks from '~/util/createReactiveVarHooks';
 import type { Sugar } from '~/constants/sugar';
 import type { Props as SpotGeneratorProps } from './SpotGenerator';
@@ -63,32 +62,22 @@ export const CREATE_STICKER = gql`
 `;
 
 export const useCreateSticker = (): CreateSticker => {
-  let partner: string = formPartnerState() || '';
+  // TODO : BE 측 추가 필요
+  // let partner: string = formPartnerState() || '';
   let stickerId: string = formStickerState();
 
-  const [request] = useMutation<
-    GQL.Mutation.CreateSticker.Data,
-    GQL.Mutation.CreateSticker.Variables
-  >(CREATE_STICKER, {
-    onCompleted({ createSticker: data }) {
-      const stickerCard = {
-        id: data._id,
-        stickerId,
-        title: data.spot.place_name,
-        partner,
-        timestamp: Math.floor(Date.now() / 1000),
-      };
-
-      Storage.addStickerCard(stickerCard);
-    },
-  });
+  const [request] =
+    useMutation<
+      GQL.Mutation.CreateSticker.Data,
+      GQL.Mutation.CreateSticker.Variables
+    >(CREATE_STICKER);
 
   const createSticker: CreateSticker = (place: SpotGeneratorProps['place']) => {
     stickerId = formStickerState();
 
     const [sweetPercent, stickerIndex] = toStickerData(stickerId);
 
-    partner = formPartnerState();
+    // partner = formPartnerState();
     request({
       variables: {
         createStickerInput: {