Merge pull request #163 from imaginer-dev/17-sidebar

17 사이드바 UI 수정 및 기능 구현

Author: jeongah2651

src/apis/getAllGroupByUserIdApi.ts

@@ -0,0 +1,21 @@
+import supabase from '@/supabase';
+
+export const getAllGroupByUserIdFetch = async (userId: string) => {
+  const { data, error } = await supabase.from('group_user_ralations').select('*').eq('user_id', userId);
+  if (error) {
+    throw error;
+  }
+  const { data: groupData, error: groupError } = await supabase
+    .from('groups')
+    .select('*')
+    .in(
+      'id',
+      data.map((d) => d.group_id),
+    );
+
+  if (groupError) {
+    throw groupError;
+  }
+
+  return groupData;
+};

src/apis/getUserApi.ts

@@ -0,0 +1,17 @@
+import supabase from '@/supabase';
+
+export const getUserFetch = async () => {
+  const { data: session, error: sessionError } = await supabase.auth.getUser();
+
+  if (!session || sessionError) {
+    throw sessionError;
+  }
+
+  const { data, error } = await supabase.from('profiles').select('*').eq('id', session.user.id).single();
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+};

src/apis/groupScheduleApis.ts

@@ -10,6 +10,13 @@ interface addGroupShedule {
 }
 
 export const addGroupScheduleFetch = async ({ startDate, endDate, newMemberList, ...props }: addGroupShedule) => {
+  // 현재 로그인된 사용자를 가져온다.
+  const { data: user, error: userError } = await supabase.auth.getUser();
+
+  if (userError) {
+    throw userError;
+  }
+
   // 그룹을 생성한다.
   const { data: groupInfo, error: groupInfoError } = await supabase
     .from('groups')
@@ -27,12 +34,15 @@ export const addGroupScheduleFetch = async ({ startDate, endDate, newMemberList,
   }
 
   // 그룹에 멤버를 추가한다.
-  const { error: groupMemberError } = await supabase.from('group_user_ralations').insert(
-    newMemberList.map((member) => ({
-      group_id: groupInfo.id,
-      user_id: member.id,
-    })),
-  );
+  const newRelationSchema = newMemberList.map((member) => ({
+    group_id: groupInfo.id,
+    user_id: member.id,
+  }));
+  newRelationSchema.push({
+    group_id: groupInfo.id,
+    user_id: user.user.id,
+  });
+  const { error: groupMemberError } = await supabase.from('group_user_ralations').insert(newRelationSchema);
   if (groupMemberError) {
     throw groupMemberError;
   }

src/assets/svgs/PencilIcon.tsx

@@ -0,0 +1,22 @@
+export const PencilIcon = () => {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="black" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_1487_633)">
+        <path
+          d="M12.6463 3.365L13.9119 2.09938C14.4611 1.55021 15.3514 1.55021 15.9006 2.09938C16.4498 2.64856 16.4498 3.53894 15.9006 4.08812L5.12414 14.8646C4.72763 15.2611 4.23858 15.5526 3.70117 15.7127L1.6875 16.3125L2.28734 14.2988C2.44742 13.7614 2.73888 13.2724 3.13539 12.8759L12.6463 3.365ZM12.6463 3.365L14.625 5.34374"
+          stroke="#E2E6DA"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1487_633">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default PencilIcon;

src/assets/svgs/ProfileIcon.tsx

@@ -0,0 +1,20 @@
+const ProfileIcon = ({ imageUrl }: { imageUrl: string | null }) => {
+  return imageUrl === null ? (
+    <svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M40.9349 41.947C45.5732 37.5762 48.4688 31.3762 48.4688 24.5C48.4688 11.2624 37.7376 0.53125 24.5 0.53125C11.2624 0.53125 0.53125 11.2624 0.53125 24.5C0.53125 31.3762 3.42681 37.5762 8.06512 41.947C12.3561 45.9906 18.1387 48.4688 24.5 48.4688C30.8613 48.4688 36.6439 45.9906 40.9349 41.947ZM10.1068 38.7886C13.4857 34.5738 18.6777 31.875 24.5 31.875C30.3223 31.875 35.5143 34.5738 38.8932 38.7886C35.219 42.4896 30.1271 44.7812 24.5 44.7812C18.8729 44.7812 13.781 42.4896 10.1068 38.7886ZM33.7188 17.125C33.7188 22.2164 29.5914 26.3438 24.5 26.3438C19.4086 26.3438 15.2812 22.2164 15.2812 17.125C15.2812 12.0336 19.4086 7.90625 24.5 7.90625C29.5914 7.90625 33.7188 12.0336 33.7188 17.125Z"
+        fill="white"
+      />
+    </svg>
+  ) : (
+    <div className="avatar">
+      <div className="w-24 rounded">
+        <img src={imageUrl} />
+      </div>
+    </div>
+  );
+};
+
+export default ProfileIcon;

src/assets/svgs/SettingIcon.tsx

@@ -0,0 +1,14 @@
+const SettingIcon = () => {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.82802 0.25C8.91145 0.25 8.12922 0.912649 7.97854 1.81675L7.88699 2.36602C7.84017 2.64695 7.63707 2.87407 7.37035 2.97395C7.20811 3.0347 7.04853 3.1009 6.89184 3.17235C6.63259 3.29056 6.32822 3.27363 6.09636 3.10801L5.64299 2.78418C4.89714 2.25143 3.87546 2.33599 3.22734 2.9841L2.98413 3.22732C2.33601 3.87544 2.25145 4.89712 2.7842 5.64297L3.10803 6.09633C3.27364 6.32819 3.29057 6.63256 3.17236 6.89182C3.10091 7.04851 3.0347 7.20809 2.97395 7.37034C2.87408 7.63706 2.64695 7.84016 2.36602 7.88698L1.81675 7.97852C0.91265 8.12921 0.25 8.91144 0.25 9.82801V10.172C0.25 11.0885 0.912648 11.8708 1.81675 12.0215L2.36602 12.113C2.64695 12.1598 2.87407 12.3629 2.97395 12.6297C3.03469 12.7919 3.1009 12.9515 3.17234 13.1082C3.29056 13.3674 3.27362 13.6718 3.10801 13.9036L2.78416 14.357C2.25141 15.1029 2.33597 16.1246 2.98408 16.7727L3.2273 17.0159C3.87541 17.664 4.8971 17.7486 5.64295 17.2158L6.09633 16.892C6.32819 16.7264 6.63256 16.7094 6.89182 16.8276C7.04851 16.8991 7.20809 16.9653 7.37034 17.026C7.63706 17.1259 7.84016 17.353 7.88698 17.634L7.97852 18.1832C8.12921 19.0873 8.91144 19.75 9.82801 19.75H10.172C11.0885 19.75 11.8708 19.0874 12.0215 18.1832L12.113 17.634C12.1598 17.3531 12.3629 17.1259 12.6297 17.0261C12.7919 16.9653 12.9515 16.8991 13.1082 16.8277C13.3674 16.7094 13.6718 16.7264 13.9036 16.892L14.357 17.2158C15.1029 17.7486 16.1245 17.664 16.7727 17.0159L17.0159 16.7727C17.664 16.1246 17.7485 15.1029 17.2158 14.357L16.892 13.9037C16.7264 13.6718 16.7094 13.3674 16.8276 13.1082C16.8991 12.9515 16.9653 12.7919 17.026 12.6297C17.1259 12.3629 17.353 12.1598 17.634 12.113L18.1832 12.0215C19.0873 11.8708 19.75 11.0886 19.75 10.172V9.82802C19.75 8.91145 19.0874 8.12922 18.1832 7.97854L17.634 7.88699C17.3531 7.84017 17.1259 7.63707 17.0261 7.37035C16.9653 7.20811 16.8991 7.04854 16.8277 6.89185C16.7094 6.63259 16.7264 6.32822 16.892 6.09636L17.2158 5.64297C17.7486 4.89712 17.664 3.87544 17.0159 3.22732L16.7727 2.9841C16.1246 2.33599 15.1029 2.25143 14.3571 2.78418L13.9037 3.10802C13.6718 3.27364 13.3674 3.29057 13.1082 3.17236C12.9515 3.10091 12.7919 3.0347 12.6297 2.97395C12.3629 2.87408 12.1598 2.64695 12.113 2.36602L12.0215 1.81675C11.8708 0.91265 11.0886 0.25 10.172 0.25H9.82802ZM10 13.75C12.0711 13.75 13.75 12.0711 13.75 10C13.75 7.92893 12.0711 6.25 10 6.25C7.92893 6.25 6.25 7.92893 6.25 10C6.25 12.0711 7.92893 13.75 10 13.75Z"
+        fill="#F9FDF0"
+      />
+    </svg>
+  );
+};
+
+export default SettingIcon;

src/components/common/AppBar.tsx

@@ -1,17 +1,34 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import HistoryBackButton from './HistoryBackButton';
 
 interface AppBarProps {
-  title?: string;
+  title?: string | null;
   backButton?: boolean;
+  IconButton?: ReactNode | null;
+  calendarName?: string | null;
 }
 
-const AppBar: FC<AppBarProps> = ({ title = '', backButton = true }) => {
+const AppBar: FC<AppBarProps> = ({ title = null, backButton = true, IconButton = null, calendarName = null }) => {
   return (
-    <nav className="grid grid-cols-5 py-5">
-      <div className="col-span-1">{backButton ? <HistoryBackButton /> : <span />}</div>
-      <h1 className="col-span-3 text-center">{title}</h1>
-      <span className="col-span-1" />
+    <nav className="grid grid-cols-5 px-5 py-5">
+      <div className="col-span-1">{backButton ? <HistoryBackButton /> : IconButton ?? <span />}</div>
+      {title === null ? (
+        <div className="col-span-2"></div>
+      ) : (
+        <h1 className="col-span-3 my-auto text-center">{title}</h1>
+      )}
+      {calendarName === null ? (
+        <span />
+      ) : (
+        <div
+          style={{
+            backgroundColor: 'rgba(226, 230, 218, 0.5)',
+          }}
+          className="col-span-2 h-full rounded-lg py-1.5 text-center text-sm font-bold"
+        >
+          {calendarName}
+        </div>
+      )}
     </nav>
   );
 };

src/components/common/Calendar.tsx

@@ -36,6 +36,7 @@ export default function Calendar() {
   const calendarRef = useRef<FullCalendar | null>(null);
   const [selectedEvents, setSelectedEvents] = useState<Events[]>([]);
   const [selectedDate, setSelectedDate] = useState<string | null>(null);
+  // ! : 외부에서 이벤트 리스트를 받아오게 된다면 zustand 스토어도 필요 없을거 같습니다!
   const { events, addEvents } = useEventState();
 
   /*
@@ -155,6 +156,7 @@ export default function Calendar() {
 
   const [isLoaded, setIsLoaded] = useState(false); // 데이터 로딩 상태
 
+  // !: 이베트를 받아온다면 필요없는 코드가 될 수 있을거 같아요.
   useEffect(() => {
     if (!isLoaded) {
       getPersonalSchedule().then((schedule) => {

src/components/common/SideBar/HamburgerButton.tsx

@@ -0,0 +1,46 @@
+import { useGetProfile } from '@/react-queries/userGetProfile';
+import SideBarGroupList from './SideBarGroupList';
+import SideBarProfile from './SideBarProfile';
+import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+
+const HamburgerButton = () => {
+  const { data: user, isLoading, isError } = useGetProfile();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isError) {
+      navigate('/login');
+    }
+  }, [isError, navigate]);
+
+  return isLoading ? (
+    <div className="loading"></div>
+  ) : (
+    <header className="relative z-10">
+      <div className="drawer">
+        <input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
+        <label htmlFor="my-drawer-3" aria-label="open sidebar" className="btn-ghost lg:hidden">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            className="inline-block h-6 w-6 stroke-current"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </label>
+        <div className="drawer-side lg:w-80">
+          <label htmlFor="my-drawer-3" aria-label="close sidebar" className="drawer-overlay"></label>
+          <ul className="menu min-h-full w-80 bg-base-200 p-4">
+            <SideBarProfile imageUrl={user?.image_url ?? null} userName={user?.user_name ?? ''} />
+            <SideBarGroupList userId={user?.id ?? ''} />
+          </ul>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HamburgerButton;

src/components/common/SideBar/SideBarGroupList.tsx

@@ -0,0 +1,41 @@
+import PencilIcon from '@/assets/svgs/PencilIcon';
+import { useGetAllGroupByUserId } from '@/react-queries/useGetAllGroupByUserId';
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+interface Props {
+  userId: string;
+}
+
+const SideBarGroupList: FC<Props> = ({ userId }) => {
+  const { data, error, isError, isLoading } = useGetAllGroupByUserId(userId);
+
+  if (isError) {
+    // TODO: 추후 에러 처리
+    console.error(error);
+  }
+  return (
+    <ul>
+      {isLoading && <span className="loading" />}
+      <div className="flex flex-row items-center justify-between border-b border-white py-3">
+        <h2>모임 리스트</h2>
+        <Link to="/add-group" className="text-2xl">
+          +
+        </Link>
+      </div>
+      {data?.map((group) => (
+        <li
+          className="flex flex-row items-center justify-between border-b border-white py-2"
+          key={group.id + 'sidebar-group-list'}
+        >
+          <Link to={`/group/${group.id}`}>{group.name}</Link>
+          <Link to={`/group/${group.id}/edit/${group.id}`}>
+            <PencilIcon />
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default SideBarGroupList;