Merge pull request #16 from junction-asia-2023/feat/schedule-page

feat(schedule): add schedule list page

src/features/app/Router.tsx

@@ -12,6 +12,7 @@ import SettingContainer from '../setting/Container';
 import ErrorContainer from '../shared/error/Container';
 import NotFound from '../shared/error/notfound/NotFound';
 import PreviewContainer from '../preview/Container';
+import ScheduleContainer from '../schedule/Container';
 import EventContainer from '../event/Container';
 
 const router = createRoutesFromElements(
@@ -28,6 +29,7 @@ const router = createRoutesFromElements(
     <Route path="login" element={<LoginContainer />} />
     <Route path="setting" element={<SettingContainer />} />
     <Route path="preview" element={<PreviewContainer />} />
+    <Route path="schedule" element={<ScheduleContainer />} />
     <Route path="event" element={<EventContainer />} />
     <Route path="*" element={<NotFound />} />
   </Route>,

src/features/schedule/Container.tsx

@@ -0,0 +1,35 @@
+import { useLayoutEffect } from 'react';
+import { useAtom } from 'jotai';
+
+import { titleAtom } from '../shared/layout/atom';
+
+import MeetingItem from './components/MeetingItem';
+import WeekSelector from './components/WeekSelector';
+import './style/index.scss';
+import useSchedule from './hooks/useSchedule';
+
+const ScheduleContainer = () => {
+  const [, setTitle] = useAtom(titleAtom);
+  const { dummyMeetings, handleWeekChange } = useSchedule();
+
+  useLayoutEffect(() => {
+    setTitle({ title: 'Schedule', back: true });
+  }, []);
+
+  return (
+    <div className="schedule-container">
+      <WeekSelector onClick={handleWeekChange} />
+      {(dummyMeetings || []).map((x, key) => (
+        <MeetingItem key={key} {...x} />
+      ))}
+      {/* <div className="button-area">
+        <button type="button">
+          <img src={plus} />
+          Add Schedule
+        </button>
+      </div> */}
+    </div>
+  );
+};
+
+export default ScheduleContainer;

src/features/schedule/components/Badge.tsx

@@ -0,0 +1,7 @@
+import { MeetingTypes } from '../type';
+
+const Badge = ({ type }: { type: MeetingTypes }) => {
+  return <span className={`badge badge-${type}`}></span>;
+};
+
+export default Badge;

src/features/schedule/components/MeetingItem.tsx

@@ -0,0 +1,44 @@
+import { Meeting } from '../type';
+
+import calendar from '/svg/Calendar.svg';
+import clock from '/svg/Clock.svg';
+import home from '/svg/Home.svg';
+import users from '/svg/Users.svg';
+import arrow from '/svg/Arrow.svg';
+
+import Badge from './Badge';
+
+const MeetingItem = ({ type, title, date, time, place, people }: Meeting) => {
+  return (
+    <div className="meeting-item">
+      <h2>
+        <span>
+          <Badge type={type} />
+          {title.slice(0, 26)}
+          {title.length > 26 && '⋯'}
+        </span>
+        <img src={arrow} />
+      </h2>
+      <p>
+        <img src={calendar} />
+        {date}
+      </p>
+      <p>
+        <img src={clock} />
+        {time}
+      </p>
+      <p>
+        <img src={home} />
+        {place}
+      </p>
+      {people && (
+        <p>
+          <img src={users} />
+          {people}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default MeetingItem;

src/features/schedule/components/WeekSelector.tsx

@@ -0,0 +1,17 @@
+import calendar from '/svg/Calendar.svg';
+import arrow from '/svg/Arrow.svg';
+
+const WeekSelector = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <div className="week-selector">
+      <img className="arrow arrow-left" src={arrow} onClick={onClick} />
+      <h1>
+        <img src={calendar} />
+        00.00&nbsp;&nbsp;~&nbsp;&nbsp;00.00
+      </h1>
+      <img className="arrow arrow-right" src={arrow} onClick={onClick} />
+    </div>
+  );
+};
+
+export default WeekSelector;

src/features/schedule/constants.ts

@@ -0,0 +1,82 @@
+import { Meeting, MeetingTypes } from './type';
+
+export const dummy: Array<Meeting> = [
+  {
+    type: MeetingTypes.Team,
+    title: 'Team Meeting Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+    people: 'Andreas and 14 others',
+  },
+  {
+    type: MeetingTypes.Business,
+    title: 'Business Trip/Outside Work Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+    people: 'Andreas and 14 others',
+  },
+  {
+    type: MeetingTypes.Personal,
+    title: 'Personal Schedule Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+  },
+  {
+    type: MeetingTypes.Team,
+    title: 'Personal Schedule Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+    people: 'Andreas and 14 others',
+  },
+  {
+    type: MeetingTypes.Business,
+    title: 'Personal Schedule Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: 'Hall A',
+    people: 'Andreas',
+  },
+  {
+    type: MeetingTypes.Business,
+    title: 'Business Trip/Outside Work Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+    people: 'Andreas and 14 others',
+  },
+  {
+    type: MeetingTypes.Personal,
+    title: 'Personal Schedule Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+    people: 'Andreas and 14 others',
+  },
+  {
+    type: MeetingTypes.Team,
+    title: 'Personal Schedule Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+    people: 'Andreas and 14 others',
+  },
+  {
+    type: MeetingTypes.Personal,
+    title: 'Personal Schedule Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+    people: 'Andreas and 14 others',
+  },
+  {
+    type: MeetingTypes.Personal,
+    title: 'Personal Schedule Title',
+    date: 'Wed, Aug 16th 2023',
+    time: '14:00 ~ 17:00',
+    place: '7F Conference Room A',
+  },
+];

src/features/schedule/hooks/useSchedule.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import { dummy } from '../constants';
+import { Meeting } from '../type';
+
+const useSchedule = () => {
+  const [dummyMeetings, setDummyMeetings] = useState<Array<Meeting>>([
+    ...dummy,
+  ]);
+  const handleWeekChange = () => {
+    setDummyMeetings([
+      dummy[Math.floor(Math.random() * 10)],
+      dummy[Math.floor(Math.random() * 10)],
+      dummy[Math.floor(Math.random() * 10)],
+      dummy[Math.floor(Math.random() * 10)],
+    ]);
+  };
+  return { dummyMeetings, handleWeekChange };
+};
+
+export default useSchedule;

src/features/schedule/style/index.scss

@@ -0,0 +1,116 @@
+@import '../../shared/style/color';
+@import '../../shared/style/variable';
+
+.schedule-container {
+  width: 100%;
+  display: grid;
+  gap: 12px;
+  background-color: $background;
+  position: relative;
+
+  h1 {
+    color: #191919;
+    font-size: 16px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+  }
+
+  h1 img {
+    width: 20px;
+    margin-right: 8px;
+  }
+
+  h2 {
+    color: #191919;
+    font-size: 16px;
+    font-weight: 700;
+    padding: 4px 0 6px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  h2 img {
+    width: 16px;
+  }
+
+  .arrow {
+    padding: 0 24px;
+  }
+
+  .arrow-left {
+    transform: rotate(180deg);
+  }
+
+  p {
+    color: #000;
+    font-size: 14px;
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+  }
+
+  p img {
+    margin-right: 8px;
+    width: 16px;
+  }
+
+  .meeting-item {
+    background-color: #ffffff;
+    padding: 8px 16px;
+  }
+
+  .badge {
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    display: inline-block;
+    margin-right: 8px;
+  }
+
+  .badge-team {
+    background-color: #ff0000;
+  }
+
+  .badge-business {
+    background-color: #24b277;
+  }
+
+  .badge-personal {
+    background-color: #0038ff;
+  }
+
+  .week-selector {
+    background-color: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 6px 0;
+  }
+
+  .button-area {
+    border-top: 1px solid #e9e9f1;
+    padding: 16px;
+    background-color: #ffffff;
+    position: fixed;
+    bottom: 0;
+    width: calc($min-width - 32px);
+  }
+
+  button {
+    background-color: $button-background-color;
+    border: 1px solid $button-background-color;
+    color: $button-text-color;
+    font-weight: 500;
+    font-size: 16px;
+    padding: 6px 14px;
+    width: 100%;
+    height: 48px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+}

src/features/schedule/type.ts

@@ -0,0 +1,14 @@
+export enum MeetingTypes {
+  Team = 'team',
+  Business = 'business',
+  Personal = 'personal',
+}
+
+export type Meeting = {
+  type: MeetingTypes;
+  title: string;
+  date: string;
+  time: string;
+  place: string;
+  people?: string;
+};