Merge pull request #199 from ttaerrim/calender-improve

[Feat] Calendar 페이지 기능 구현

app/frontend/src/components/Sidebar/Contents/Mogaco/GroupWrapper.tsx

@@ -0,0 +1,18 @@
+import { UserChip } from '@/components';
+import { sansBold14 } from '@/styles/font.css';
+import { Member } from '@/types';
+
+import * as styles from './index.css';
+
+export function GroupWrapper({
+  nickname,
+  profilePicture,
+}: Pick<Member, 'nickname' | 'profilePicture'>) {
+  return (
+    <div className={styles.groupWrapper}>
+      <UserChip username={nickname} profileSrc={profilePicture} />
+      {/* TODO: group 받아와서 적용 */}
+      <span className={sansBold14}>부스트캠프 웹모바일 8기</span>
+    </div>
+  );
+}

app/frontend/src/components/Sidebar/Contents/Mogaco/InfoWrapper.tsx

@@ -3,26 +3,39 @@ import dayjs from 'dayjs';
 import { ReactComponent as Calendar } from '@/assets/icons/calendar.svg';
 import { ReactComponent as Map } from '@/assets/icons/map.svg';
 import { ReactComponent as People } from '@/assets/icons/people.svg';
+import { MogacoTypes } from '@/types';
 
 import * as styles from './index.css';
 
-export function InfoWrapper() {
+type InfoWrapperProps = Pick<
+  MogacoTypes,
+  'date' | 'maxHumanCount' | 'address'
+> & {
+  participantCount: number;
+};
+
+export function InfoWrapper({
+  date,
+  participantCount,
+  maxHumanCount,
+  address,
+}: InfoWrapperProps) {
   return (
     <div className={styles.infoWrapper}>
       <div className={styles.infoContent}>
         <People className={styles.icon} width={16} height={16} />
-        <div className={styles.infoText}>2/5</div>
+        <div className={styles.infoText}>
+          {participantCount}/{maxHumanCount}
+        </div>
       </div>
       <div className={styles.infoContent}>
         <Map className={styles.icon} width={16} height={16} />
-        <div className={styles.infoText}>
-          서울 관악구 남현3길 71 크레이저 커피
-        </div>
+        <div className={styles.infoText}>{address}</div>
       </div>
       <div className={styles.infoContent}>
         <Calendar className={styles.icon} width={16} height={16} />
         <div className={styles.infoText}>
-          {dayjs('2023-11-7').format('YYYY/MM/DD HH:mm~')}
+          {dayjs(date).format('YYYY/MM/DD HH:mm~')}
         </div>
       </div>
     </div>

app/frontend/src/components/Sidebar/Contents/Mogaco/MogacoInfo.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@/components';
+import { sansRegular16 } from '@/styles/font.css';
+import { Mogaco } from '@/types';
+
+import { GroupWrapper } from './GroupWrapper';
+import * as styles from './index.css';
+import { InfoWrapper } from './InfoWrapper';
+import { TitleWrapper } from './TitleWrapper';
+
+export function MogacoInfo({
+  mogaco,
+  onClickDetailPage,
+}: {
+  mogaco: Mogaco;
+  onClickDetailPage: () => void;
+}) {
+  const {
+    title,
+    contents,
+    date,
+    maxHumanCount,
+    status,
+    address,
+    participants,
+    member,
+  } = mogaco;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <TitleWrapper status={status} title={title} />
+        {/* TODO: group 받아와서 적용 */}
+        <GroupWrapper
+          nickname={member.nickname}
+          profilePicture={member.profilePicture}
+        />
+        <InfoWrapper
+          date={date}
+          participantCount={participants.length}
+          maxHumanCount={maxHumanCount}
+          address={address}
+        />
+        <p className={sansRegular16}>{contents}</p>
+      </div>
+      <Button
+        fullWidth
+        shape="fill"
+        theme="primary"
+        size="large"
+        onClick={onClickDetailPage}
+      >
+        글로 이동하기
+      </Button>
+    </div>
+  );
+}

app/frontend/src/components/Sidebar/Contents/Mogaco/NotifyWrapper.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+import { sansBold18 } from '@/styles/font.css';
+
+export const container = style([
+  sansBold18,
+  {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    whiteSpace: 'pre',
+    lineHeight: 'initial',
+    textAlign: 'center',
+  },
+]);

app/frontend/src/components/Sidebar/Contents/Mogaco/NotifyWrapper.tsx

@@ -0,0 +1,5 @@
+import * as styles from './NotifyWrapper.css';
+
+export function NotifyWrapper({ children }: { children: React.ReactNode }) {
+  return <div className={styles.container}>{children}</div>;
+}

app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx

@@ -1,14 +1,19 @@
 import { Label } from '@/components';
+import { sansBold24 } from '@/styles/font.css';
+import { MogacoTypes } from '@/types';
 
 import * as styles from './index.css';
 
-export function TitleWrapper() {
+export function TitleWrapper({
+  status,
+  title,
+}: Pick<MogacoTypes, 'title' | 'status'>) {
   return (
     <div className={styles.titleWrapper}>
       <Label theme="primary" shape="fill">
-        모집 중
+        {status}
       </Label>
-      <span className={styles.title}>모각코 함께 하기</span>
+      <span className={sansBold24}>{title}</span>
     </div>
   );
 }

app/frontend/src/components/Sidebar/Contents/Mogaco/index.css.ts

@@ -1,12 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 import { vars } from '@/styles';
-import {
-  sansBold12,
-  sansBold24,
-  sansRegular12,
-  sansRegular16,
-} from '@/styles/font.css';
+import { sansRegular12 } from '@/styles/font.css';
 
 export const container = style({
   display: 'flex',
@@ -16,8 +11,12 @@ export const container = style({
   color: vars.color.grayscaleBlack,
   padding: '2rem',
 });
-export const contents = style([sansRegular16, {}]);
-export const group = style([sansBold12, {}]);
+export const groupWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  color: vars.color.grayscale200,
+  gap: '1.6rem',
+});
 export const icon = style({
   fill: vars.color.grayscale200,
 });
@@ -43,8 +42,6 @@ export const infoWrapper = style({
   flexDirection: 'column',
   gap: '0.4rem',
 });
-
-export const title = style([sansBold24, {}]);
 export const titleWrapper = style({
   display: 'flex',
   gap: '0.4rem',

app/frontend/src/components/Sidebar/Contents/Mogaco/index.tsx

@@ -1,27 +1,51 @@
-import { Button } from '@/components';
+import { useNavigate } from 'react-router-dom';
 
-import * as styles from './index.css';
-import { InfoWrapper } from './InfoWrapper';
-import { TitleWrapper } from './TitleWrapper';
+import { useQuery } from '@tanstack/react-query';
+import { useAtom } from 'jotai';
+
+import { LoadingIndicator } from '@/components';
+import { queryKeys } from '@/queries';
+import { mogacoAtom } from '@/stores';
+import { vars } from '@/styles';
+
+import { MogacoInfo } from './MogacoInfo';
+import { NotifyWrapper } from './NotifyWrapper';
 
 export function MogacoSidebarItem() {
-  return (
-    <div className={styles.container}>
-      <div className={styles.wrapper}>
-        <TitleWrapper />
-        <span className={styles.group}>부스트캠프 웹모바일 8기</span>
-        <InfoWrapper />
-        <p className={styles.contents}>
-          사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락
-          팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서
-          부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락 팀이 모입니다
-          사당역에서 부스트캠프 모락 팀이 모입니다 사당역에서 부스트캠프 모락
-          팀이 모입니다
-        </p>
-      </div>
-      <Button fullWidth shape="fill" theme="primary" size="large">
-        글로 이동하기
-      </Button>
-    </div>
-  );
+  const navigate = useNavigate();
+  const [mogacoId] = useAtom(mogacoAtom);
+
+  const { data: mogaco, isLoading } = useQuery({
+    ...queryKeys.mogaco.detail(mogacoId),
+    enabled: Number(mogacoId) !== -1,
+  });
+
+  if (Number(mogacoId) === -1)
+    return (
+      <NotifyWrapper>
+        {`선택된 모임이 없습니다.\n달력이나 지도에서 모임을 선택해 주세요.`}
+      </NotifyWrapper>
+    );
+
+  if (isLoading)
+    return (
+      <NotifyWrapper>
+        <LoadingIndicator color={vars.color.grayscale500} size={30} />
+      </NotifyWrapper>
+    );
+
+  if (!mogaco)
+    return (
+      <NotifyWrapper>
+        {`선택된 모임에 대한 정보가 없습니다.\n다시 시도해 주세요.`}
+      </NotifyWrapper>
+    );
+
+  const { id } = mogaco;
+
+  const onClickDetailPage = () => {
+    navigate(`/mogaco/${id}`);
+  };
+
+  return <MogacoInfo mogaco={mogaco} onClickDetailPage={onClickDetailPage} />;
 }

app/frontend/src/pages/Calendar/CalendarView.css.ts

@@ -1,5 +1,11 @@
 import { style } from '@vanilla-extract/css';
 
-export const container = style({
-  maxWidth: '120rem',
-});
+import { sansRegular14 } from '@/styles/font.css';
+
+export const container = style([
+  sansRegular14,
+  {
+    maxWidth: '120rem',
+    paddingBottom: '4rem',
+  },
+]);

app/frontend/src/pages/Calendar/CalendarView.tsx

@@ -1,19 +1,39 @@
+import { EventClickArg } from '@fullcalendar/core/index.js';
+import koLocale from '@fullcalendar/core/locales/ko';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import FullCalendar from '@fullcalendar/react';
 
+import { vars } from '@/styles';
+
 import * as styles from './CalendarView.css';
 
-export function CalendarView() {
+export function CalendarView({
+  onClickEvent,
+}: {
+  onClickEvent: (dayEvent: EventClickArg) => void;
+}) {
   return (
     <div className={styles.container}>
       <FullCalendar
+        locale={koLocale}
         plugins={[dayGridPlugin]}
         initialView="dayGridMonth"
         weekends
         events={[
-          { title: 'event 1', date: '2023-11-01' },
-          { title: 'event 2', date: '2023-11-02' },
+          {
+            title: '12:00 인천 모각코 이벤트',
+            date: '2023-11-22',
+            id: '1',
+          },
+          {
+            title: '12:00 이수 모각코 이벤트',
+            date: '2023-11-22',
+            id: '2',
+          },
         ]}
+        eventColor={vars.color.subGreen}
+        eventTextColor={vars.color.grayscale500}
+        eventClick={onClickEvent}
       />
     </div>
   );

app/frontend/src/pages/Calendar/index.tsx

@@ -1,22 +1,32 @@
 import { useState } from 'react';
 
+import { EventClickArg } from '@fullcalendar/core/index.js';
+import { useAtom } from 'jotai';
+
 import { MogacoSideBar } from '@/components';
+import { mogacoAtom } from '@/stores';
 
 import { CalendarView } from './CalendarView';
 
 export function Calendar() {
   const [closedSidebar, setClosedSidebar] = useState(true);
-  const onClickCloseSidebar = () => {
+
+  const toggleSidebar = () => {
     setClosedSidebar(!closedSidebar);
   };
 
+  const [, setMogacoId] = useAtom(mogacoAtom);
+
+  const onClickEvent = (dayEvent: EventClickArg) => {
+    const { event } = dayEvent;
+    setClosedSidebar(false);
+    setMogacoId(event.id);
+  };
+
   return (
     <>
-      <CalendarView />
-      <MogacoSideBar
-        closed={closedSidebar}
-        toggleClosed={onClickCloseSidebar}
-      />
+      <CalendarView onClickEvent={onClickEvent} />
+      <MogacoSideBar closed={closedSidebar} toggleClosed={toggleSidebar} />
     </>
   );
 }

app/frontend/src/stores/index.ts

@@ -1 +1,2 @@
+export * from './mogaco';
 export * from './user';

app/frontend/src/stores/mogaco.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const mogacoAtom = atom<string>('-1');