feat: #2 코스 리스트 마크업 추가

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

@@ -3,12 +3,17 @@ import { useReactiveVar } from '@apollo/client';
 import DatePicker from '~/components/_common/DatePicker';
 import CalendarDate from '~/util/Calendar/CalendarDate';
 import { cursorState } from './CalendarState';
+import * as $ from './CalendarView';
 
 export default function Calendar(): JSX.Element {
   const cursor = useReactiveVar(cursorState);
   const handleClickDate = (date: CalendarDate) => {
     console.log(date);
   };
 
-  return <DatePicker selected={cursor} onClickDate={handleClickDate} />;
+  return (
+    <$.Calendar>
+      <DatePicker selected={cursor} onClickDate={handleClickDate} />
+    </$.Calendar>
+  );
 }

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

@@ -3,7 +3,7 @@ import { makeVar, ReactiveVar } from '@apollo/client';
 type Cursor = [number, number, number];
 
 const now: Date = new Date();
-export const cursorState: ReactiveVar<Cursor> = makeVar<Cursor>([
+export const cursorState: ReactiveVar<Cursor> = makeVar([
   now.getFullYear(),
   now.getMonth() + 1,
   now.getDate(),

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Calendar = styled.div`
+  padding: 0 12px;
+`;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { formatDate } from '~/util';
+import * as $ from './CourseItemView';
+
+type Props = {
+  title: string;
+  spotCount: number;
+  timestamp: number;
+  isPrivate: boolean;
+};
+
+export default function CourseItem({
+  title,
+  spotCount,
+  timestamp,
+  isPrivate,
+}: Props): JSX.Element {
+  const dateStamp = formatDate(timestamp, true);
+
+  const handleClickShare = () => {
+    // TODO;
+  };
+  const handleClickEdit = () => {
+    // TODO;
+  };
+  const handleClickDelete = () => {
+    // TODO;
+  };
+
+  return (
+    <$.CourseItem>
+      <$.AreaInfo>
+        <$.Stickers />
+        <$.Title>{title}</$.Title>
+        <$.Info>
+          <$.SpotCount>총 {spotCount}개 스팟</$.SpotCount>
+          <$.Date>{dateStamp}</$.Date>
+        </$.Info>
+      </$.AreaInfo>
+      {isPrivate && <$.AreaLabel>비공개</$.AreaLabel>}
+      <$.AreaButton>
+        <$.ItemButton onClick={handleClickShare}>
+          <$.ShareIcon />
+        </$.ItemButton>
+        <$.ItemButton onClick={handleClickEdit}>
+          <$.EditIcon />
+        </$.ItemButton>
+        <$.ItemButton onClick={handleClickDelete}>
+          <$.DeleteIcon />
+        </$.ItemButton>
+      </$.AreaButton>
+    </$.CourseItem>
+  );
+}

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

@@ -0,0 +1,102 @@
+import Image from 'next/image';
+import styled from 'styled-components';
+import painter from '~/styles/theme/painter';
+
+export const CourseItem = styled.div`
+  position: relative;
+  padding: 24px 24px 23px;
+  border-radius: 16px;
+  border: 1px solid ${painter.grayscale[1]};
+  box-shadow: 0 0 4px 1px ${painter.grayscale[2]};
+  background-color: ${painter.basic.white};
+  & + & {
+    margin-top: 24px;
+  }
+`;
+
+export const AreaInfo = styled.div`
+  padding-right: 108px;
+`;
+
+export const Stickers = styled.div`
+  height: 40px;
+`;
+
+export const Title = styled.strong`
+  margin-top: 13px;
+  font-size: 24px;
+  color: ${painter.basic.black};
+`;
+
+export const Info = styled.div`
+  margin-top: 4px;
+  height: 20px;
+  font-size: 0;
+  line-height: 20px;
+  color: ${painter.grayscale[8]};
+`;
+
+export const SpotCount = styled.span`
+  display: inline-block;
+  vertical-align: top;
+  font-weight: 700;
+  font-size: 14px;
+`;
+
+export const Date = styled.span`
+  display: inline-block;
+  margin-left: 8px;
+  vertical-align: top;
+  font-size: 14px;
+`;
+
+export const AreaLabel = styled.div`
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${painter.grayscale[6]};
+`;
+
+export const AreaButton = styled.div`
+  position: absolute;
+  top: 24px;
+  right: 24px;
+`;
+
+export const ItemButton = styled.button.attrs({
+  type: 'button',
+})`
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  cursor: pointer;
+  & + & {
+    margin-left: 8px;
+  }
+`;
+
+export const ShareIcon = styled(Image).attrs({
+  width: '24',
+  height: '24',
+  src: '/course/list/share_gray.svg',
+})`
+  display: block;
+`;
+
+export const EditIcon = styled(Image).attrs({
+  width: '24',
+  height: '24',
+  src: '/course/list/pen_gray.svg',
+})`
+  display: block;
+`;
+
+export const DeleteIcon = styled(Image).attrs({
+  width: '24',
+  height: '24',
+  src: '/course/list/trashcan_gray.svg',
+})`
+  display: block;
+`;

components/Course/List/Sidebar/CourseList/CourseItem/index.ts

@@ -0,0 +1 @@
+export { default } from './CourseItem';

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

@@ -1,5 +1,23 @@
 import React from 'react';
+import CourseItem from './CourseItem';
+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 {
-  return null;
+  return (
+    <$.CourseList>
+      {dummy.map((dummyItem) => (
+        <CourseItem key={`course-list-${dummyItem.title}`} {...dummyItem} />
+      ))}
+    </$.CourseList>
+  );
 }

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

@@ -0,0 +1,4 @@
+import { makeVar, ReactiveVar } from '@apollo/client';
+
+export const courses: ReactiveVar<GQL.Course[]> = makeVar([]);
+export const currentCourseIndex: ReactiveVar<number> = makeVar(0);

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const CourseList = styled.div`
+  padding: 40px 24px;
+`;

components/Course/List/Sidebar/SideBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Calendar from './Calendar';
+import CourseList from './CourseList';
 import * as $ from './SideBarView';
 
 export default function SideBar(): JSX.Element {
@@ -9,6 +10,9 @@ export default function SideBar(): JSX.Element {
       <$.AreaCalendar>
         <Calendar />
       </$.AreaCalendar>
+      <$.AreaCourseList>
+        <CourseList />
+      </$.AreaCourseList>
     </$.SideBar>
   );
 }

components/Course/List/Sidebar/SideBarView.tsx

@@ -3,7 +3,7 @@ import painter from '~/styles/theme/painter';
 
 export const SideBar = styled.div`
   height: 100%;
-  padding-top: 48px;
+  background-color: ${painter.grayscale[1]};
   overflow-y: auto;
   user-drag: none;
   user-select: none;
@@ -14,12 +14,15 @@ export const SideBar = styled.div`
 `;
 
 export const AreaTitle = styled.h3`
-  padding: 0 40px;
+  padding: 48px 40px 24px;
   font-size: 28px;
   line-height: 40px;
+  background-color: #fff;
   color: ${painter.grayscale[9]};
 `;
 
 export const AreaCalendar = styled.div`
-  margin-top: 24px;
+  background-color: #fff;
 `;
+
+export const AreaCourseList = styled.div``;

next.config.js

@@ -12,7 +12,7 @@ module.exports = {
     return [
       {
         source: '/course',
-        destination: '/course/history',
+        destination: '/course/list',
         permanent: true,
       },
     ];