Merge branch 'develop-frontend' into feat/#202

woowacourse-teams · Aug 5, 2024 · 6280b9a · 6280b9a
2 parents 677c85f + eb1abad
commit 6280b9a
Show file tree

Hide file tree

Showing 36 changed files with 629 additions and 213 deletions.
diff --git a/frontend/src/apis/gets.ts b/frontend/src/apis/gets.ts
@@ -1,4 +1,3 @@
-// ./src/apis/gets.ts
 import { MoimInfo, Participation } from '@_types/index';
 import ApiClient from './apiClient';
 import {
@@ -9,6 +8,7 @@ import {
   GetZzimMine,
 } from './responseTypes';
 import { checkStatus } from './apiconfig';
+import { Filter } from '@_components/MyMoimListFilters/MyMoimListFilters';
 
 export const getMoims = async (): Promise<MoimInfo[]> => {
   const response = await ApiClient.getWithAuth('moim');
@@ -18,6 +18,24 @@ export const getMoims = async (): Promise<MoimInfo[]> => {
   return json.data.moims;
 };
 
+export const getMyMoims = async (
+  filter: Filter['api'],
+): Promise<MoimInfo[]> => {
+  const response = await ApiClient.getWithAuth(`moim/mine?filter=${filter}`);
+  checkStatus(response);
+
+  const json: GetMoims = await response.json();
+  return json.data.moims;
+};
+
+export const getMyZzimMoims = async (): Promise<MoimInfo[]> => {
+  const response = await ApiClient.getWithAuth('moim/zzim');
+  checkStatus(response);
+
+  const json: GetMoims = await response.json();
+  return json.data.moims;
+};
+
 export const getMoim = async (moimId: number): Promise<MoimInfo> => {
   const response = await ApiClient.getWithAuth(`moim/${moimId}`);
   checkStatus(response);

diff --git a/frontend/src/components/HomeMainContent/HomeMainContent.tsx b/frontend/src/components/HomeMainContent/HomeMainContent.tsx
@@ -0,0 +1,22 @@
+import MoimList from '@_components/MoimList/MoimList';
+import { MainPageTab } from '@_components/MoimTabBar/MoimTabBar';
+import MyMoimList from '@_components/MyMoim/MyMoim';
+import MyZzimMoimList from '@_components/MyZzimMoimList/MyZzimMoimList';
+
+interface MoimMainContentProps {
+  currentTab: MainPageTab;
+}
+
+export default function HomeMainContent(props: MoimMainContentProps) {
+  const { currentTab } = props;
+
+  if (currentTab === '모임목록') {
+    return <MoimList />;
+  }
+  if (currentTab === '나의모임') {
+    return <MyMoimList />;
+  }
+  if (currentTab === '찜한모임') {
+    return <MyZzimMoimList />;
+  }
+}
diff --git a/frontend/src/components/Icons/ChattingIcon.tsx b/frontend/src/components/Icons/ChattingIcon.tsx
@@ -0,0 +1,28 @@
+import { useTheme } from '@emotion/react';
+
+interface ChattingIconProps {
+  isActive: boolean;
+}
+
+export default function ChattingIcon(props: ChattingIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.879 18.472L11.337 19.388C10.854 20.204 9.647 20.204 9.163 19.388L8.621 18.472C8.201 17.762 7.991 17.406 7.653 17.21C7.315 17.013 6.89 17.006 6.04 16.991C4.784 16.97 3.997 16.893 3.337 16.619C2.73037 16.3677 2.17917 15.9994 1.71487 15.5351C1.25057 15.0708 0.882274 14.5196 0.631 13.913C0.25 12.995 0.25 11.83 0.25 9.5V8.5C0.25 5.227 0.25 3.59 0.987 2.388C1.39904 1.7152 1.96445 1.14945 2.637 0.737C3.84 0 5.478 0 8.75 0H11.75C15.023 0 16.66 0 17.863 0.737C18.5354 1.14917 19.1008 1.71456 19.513 2.387C20.25 3.59 20.25 5.228 20.25 8.5V9.5C20.25 11.83 20.25 12.995 19.87 13.913C19.6186 14.5197 19.2502 15.071 18.7857 15.5353C18.3212 15.9996 17.7698 16.3678 17.163 16.619C16.503 16.893 15.716 16.969 14.46 16.991C13.61 17.006 13.185 17.013 12.847 17.21C12.509 17.406 12.299 17.761 11.879 18.472Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Icons/HomeIcon.tsx b/frontend/src/components/Icons/HomeIcon.tsx
@@ -0,0 +1,28 @@
+import { useTheme } from '@emotion/react';
+
+interface HomeIconProps {
+  isActive: boolean;
+}
+
+export default function HomeIcon(props: HomeIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.444 7.47307L17.774 17.4731C17.6613 18.1687 17.3072 18.8024 16.774 19.2631C16.2058 19.7161 15.5007 19.9628 14.774 19.9631H5.16402C4.46134 19.9569 3.78312 19.7043 3.24766 19.2492C2.71219 18.7941 2.35346 18.1656 2.23402 17.4731L0.564023 7.47307C0.473584 6.8961 0.553519 6.30527 0.794023 5.77307C1.03445 5.24361 1.42356 4.79544 1.91402 4.48307L8.39402 0.48307C8.86746 0.191034 9.41276 0.036377 9.96902 0.036377C10.5253 0.036377 11.0706 0.191034 11.544 0.48307L18.014 4.48307C18.521 4.78307 18.925 5.23007 19.174 5.76307C19.4301 6.29415 19.524 6.88892 19.444 7.47307Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Icons/MyPageIcon.tsx b/frontend/src/components/Icons/MyPageIcon.tsx
@@ -0,0 +1,28 @@
+import { useTheme } from '@emotion/react';
+
+interface MyPageIconProps {
+  isActive: boolean;
+}
+
+export default function MyPageIcon(props: MyPageIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 20 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.3997 18.6251C19.3338 18.7391 19.2391 18.8338 19.1251 18.8997C19.011 18.9655 18.8816 19.0001 18.75 19.0001H0.749964C0.618376 19 0.48914 18.9652 0.375233 18.8993C0.261326 18.8335 0.166756 18.7388 0.101021 18.6248C0.0352859 18.5108 0.000698664 18.3815 0.000732447 18.2499C0.000766229 18.1183 0.0354198 17.9891 0.101214 17.8751C1.52903 15.4067 3.72934 13.6367 6.29715 12.7976C5.027 12.0415 4.04016 10.8893 3.4882 9.51804C2.93624 8.14678 2.84967 6.63224 3.24178 5.20701C3.6339 3.78178 4.48301 2.52467 5.65874 1.62873C6.83446 0.732786 8.27178 0.247559 9.74996 0.247559C11.2281 0.247559 12.6655 0.732786 13.8412 1.62873C15.0169 2.52467 15.866 3.78178 16.2581 5.20701C16.6503 6.63224 16.5637 8.14678 16.0117 9.51804C15.4598 10.8893 14.4729 12.0415 13.2028 12.7976C15.7706 13.6367 17.9709 15.4067 19.3987 17.8751C19.4647 17.989 19.4995 18.1183 19.4997 18.25C19.4998 18.3816 19.4653 18.511 19.3997 18.6251Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Icons/PleaseIcon.tsx b/frontend/src/components/Icons/PleaseIcon.tsx
@@ -0,0 +1,34 @@
+import { useTheme } from '@emotion/react';
+
+interface PleaseIconProps {
+  isActive: boolean;
+}
+
+export default function PleaseIcon(props: PleaseIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 21 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.5615 16.8749L17.164 13.4765L13.7459 2.19931C13.6487 1.87819 13.4739 1.58599 13.2368 1.34859C12.9998 1.11119 12.7079 0.935908 12.3869 0.838283C12.0659 0.740658 11.7258 0.723698 11.3967 0.788906C11.0677 0.854114 10.7597 0.999477 10.5002 1.21212C10.2408 0.999477 9.93283 0.854114 9.60374 0.788906C9.27465 0.723698 8.93456 0.740658 8.61359 0.838283C8.29263 0.935908 8.00069 1.11119 7.76364 1.34859C7.5266 1.58599 7.35176 1.87819 7.25462 2.19931L3.83649 13.4774L0.438992 16.8749C0.1579 17.1562 0 17.5376 0 17.9352C0 18.3329 0.1579 18.7143 0.438992 18.9956L3.50368 22.0602C3.64297 22.1996 3.80835 22.3101 3.99036 22.3855C4.17237 22.4609 4.36745 22.4997 4.56446 22.4997C4.76147 22.4997 4.95655 22.4609 5.13857 22.3855C5.32058 22.3101 5.48595 22.1996 5.62524 22.0602L10.1515 17.5312C10.2769 17.4053 10.3934 17.271 10.5002 17.129C10.6071 17.271 10.7236 17.4053 10.849 17.5312L15.3752 22.0612C15.5145 22.2005 15.6799 22.311 15.8619 22.3864C16.0439 22.4618 16.239 22.5006 16.436 22.5006C16.633 22.5006 16.8281 22.4618 17.0101 22.3864C17.1921 22.311 17.3575 22.2005 17.4968 22.0612L20.5615 18.9965C20.7008 18.8572 20.8113 18.6918 20.8867 18.5098C20.9621 18.3278 21.001 18.1327 21.001 17.9357C21.001 17.7387 20.9621 17.5436 20.8867 17.3616C20.8113 17.1796 20.7008 17.0142 20.5615 16.8749ZM9.75024 14.8827C9.75174 15.1786 9.69451 15.4718 9.58186 15.7454C9.46921 16.019 9.30338 16.2675 9.09399 16.4765L6.81399 18.7499L3.75024 15.6862L5.02993 14.4056C5.11726 14.3182 5.18167 14.2107 5.21743 14.0924L8.68618 2.63431C8.72136 2.50681 8.80197 2.39658 8.9128 2.32439C9.02363 2.2522 9.15703 2.22305 9.28788 2.24241C9.41872 2.26178 9.53796 2.32833 9.62312 2.42953C9.70829 2.53073 9.7535 2.65958 9.75024 2.79181V14.8827ZM14.1977 18.7621L11.9065 16.4737C11.6971 16.2647 11.5313 16.0162 11.4186 15.7426C11.306 15.469 11.2487 15.1758 11.2502 14.8799V2.78618C11.2503 2.65629 11.297 2.53073 11.3818 2.43237C11.4667 2.33402 11.584 2.26941 11.7125 2.25033C11.841 2.23124 11.9721 2.25895 12.0818 2.32839C12.1916 2.39784 12.2728 2.50441 12.3106 2.62868L15.7793 14.0868C15.8151 14.205 15.8795 14.3126 15.9668 14.3999L17.3252 15.7584L14.1977 18.7621Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+      <path
+        d="M9.51587 1.78125C7.73462 2.39062 8.10962 1.17188 7.17212 4.35938C6.42212 6.90938 4.14087 13.1719 3.09399 15.9844L6.37524 19.7812L9.93774 17.0156H11.719L14.4846 19.7812L17.8596 15.9844L16.3127 13.9688L12.5159 1.78125H9.93774H9.51587Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/MoimCard/MoimCard.stories.tsx b/frontend/src/components/MoimCard/MoimCard.stories.tsx
@@ -22,51 +22,30 @@ export const Default: Story = {
       isZzimed: true,
       moimId: 1,
       authorNickname: '김코딩',
-      status: 'MOIMING',
-      comments: [],
       participants: [
         {
-          nickname: '치코',
-          profile: '',
+          nickname: '김코딩',
+          profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
           role: 'moimer',
         },
         {
-          nickname: '치코',
-          profile: '',
+          nickname: '김디자인',
+          profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
           role: 'moimee',
         },
+      ],
+      description: '코딩하면서 놀아요',
+      status: 'MOIMING',
+      comments: [
         {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
+          commentId: 1,
+          nickname: '김코딩',
+          content: '안녕하세요',
+          dateTime: '2021-10-30 19:00',
+          profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
+          child: [],
         },
       ],
-      description: '코딩하면서 놀아요',
     },
   },
   render: (args) => <MoimCard {...args} />,

diff --git a/frontend/src/components/MoimCard/MoimCard.style.ts b/frontend/src/components/MoimCard/MoimCard.style.ts
@@ -27,6 +27,12 @@ export const cardTitle = (props: { theme: Theme }) => {
   `;
 };
 
+export const heartButton = css`
+  padding: 0;
+  background: none;
+  border: 0;
+`;
+
 export const subjectBox = css`
   display: flex;
   gap: 0.8rem;

diff --git a/frontend/src/components/MoimCard/MoimCard.tsx b/frontend/src/components/MoimCard/MoimCard.tsx
@@ -5,24 +5,44 @@ import { formatHhmmToKorean, formatYyyymmddToKorean } from '@_utils/formatters';
 import { MoimInfo } from '@_types/index';
 import { useTheme } from '@emotion/react';
 import HeartIcon from '@_components/Icons/HeartIcon';
+import useChangeZzim from '@_hooks/mutaions/useChangeZzim';
 
 interface MoimCardProps extends HTMLProps<HTMLDivElement> {
   moimInfo: MoimInfo;
 }
 
 export default function MoimCard(props: MoimCardProps) {
   const {
-    moimInfo: { title, date, time, place, maxPeople, currentPeople, isZzimed },
+    moimInfo: {
+      moimId,
+      title,
+      date,
+      time,
+      place,
+      maxPeople,
+      currentPeople,
+      isZzimed,
+    },
     ...args
   } = props;
 
   const theme = useTheme();
 
+  const { mutate: changeZzim } = useChangeZzim();
+
+  const handleHeartButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    console.log(1);
+    changeZzim(moimId);
+  };
+
   return (
     <div css={S.cardBox} {...args}>
       <div css={S.titleBox}>
         <h2 css={S.cardTitle({ theme })}>{title}</h2>
-        <HeartIcon isFilled={isZzimed} />
+        <button css={S.heartButton} onClick={handleHeartButtonClick}>
+          <HeartIcon isFilled={isZzimed} />
+        </button>
       </div>
 
       <div css={S.subjectBox}>