Merge branch 'dev' into 34-update-personal-schedule-ui

Author: gihwan-dev

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

@@ -1,18 +1,62 @@
 import supabase from '@/supabase';
 import { Member } from '@/types/Member';
+interface addGroupShedule {
+  title: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  memo: string;
+  newMemberList: Member[];
+}
 
-export const getOneGroupSchedule = async (scheduleId: string) => {
-  const { data, error } = await supabase.from('group_schedules').select('*').eq('id', +scheduleId);
+export const addGroupScheduleFetch = async ({ startDate, endDate, newMemberList, ...props }: addGroupShedule) => {
+  // 현재 로그인된 사용자를 가져온다.
+  const { data: user, error: userError } = await supabase.auth.getUser();
 
-  if (error) {
-    throw error;
+  if (userError) {
+    throw userError;
   }
 
-  if (!data) {
-    throw new Error('데이터를 찾을 수 없습니다.');
+  // 그룹을 생성한다.
+  const { data: groupInfo, error: groupInfoError } = await supabase
+    .from('groups')
+    .insert({
+      name: props.title,
+      open: true,
+      start_date: startDate,
+      end_date: endDate,
+    })
+    .select()
+    .single();
+
+  if (!groupInfo || groupInfoError) {
+    throw groupInfoError;
   }
 
-  return data[0];
+  // 그룹에 멤버를 추가한다.
+  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;
+  }
+  // 그룹 일정을 생성한다.
+  const { data: groupScheduleData, error: groupScheduleError } = await supabase
+    .from('group_schedules')
+    .insert({ ...props, start_date: startDate, end_date: endDate, group_id: groupInfo.id })
+    .select()
+    .single();
+
+  if (groupScheduleError) {
+    throw groupScheduleError;
+  }
+  return groupScheduleData;
 };
 
 interface UpdateGroupSchedule {
@@ -24,6 +68,25 @@ interface UpdateGroupSchedule {
   scheduleId: string;
 }
 
+interface UpdateGroupScheduleMember {
+  updatedMemberList: Member[];
+  groupId: string;
+}
+
+export const getOneGroupSchedule = async (scheduleId: string) => {
+  const { data, error } = await supabase.from('group_schedules').select('*').eq('id', +scheduleId);
+
+  if (error) {
+    throw error;
+  }
+
+  if (!data) {
+    throw new Error('데이터를 찾을 수 없습니다.');
+  }
+
+  return data[0];
+};
+
 export const updateGroupSchedule = async ({
   name,
   description,
@@ -50,11 +113,6 @@ export const updateGroupSchedule = async ({
   return data;
 };
 
-interface UpdateGroupScheduleMember {
-  updatedMemberList: Member[];
-  groupId: string;
-}
-
 export const updateGroupScheduleMember = async ({ updatedMemberList, groupId }: UpdateGroupScheduleMember) => {
   const { error: deleteError } = await supabase.from('group_user_ralations').delete().eq('group_id', groupId);
   if (deleteError) {

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/Group/GroupForm.tsx

@@ -13,6 +13,7 @@ interface Props {
   endDate?: string;
   memo?: string | null;
   memberList?: Member[];
+  isLoading?: boolean;
   onSubmit: (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => void;
 }
 
@@ -24,6 +25,7 @@ const GroupForm: FC<Props> = ({
   memo = '',
   memberList = [],
   onSubmit,
+  isLoading = false,
 }) => {
   const [member, setMember] = useState<Member[]>(memberList);
 
@@ -43,8 +45,12 @@ const GroupForm: FC<Props> = ({
         <UserInvite member={member} setMember={onClick} />
         <GroupFormMemoInput memo={memo ?? ''} />
       </div>
-      <button type="submit" className="btn btn-outline btn-primary w-full">
-        저장
+      <button
+        disabled={isLoading}
+        type="submit"
+        className={`btn btn-outline btn-primary w-full ${isLoading ? 'disabled' : ''}`}
+      >
+        {isLoading ? <span className="loading" /> : '저장'}
       </button>
     </form>
   );

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

@@ -28,6 +28,8 @@ export default function Calendar() {
   const [selectedEvents, setSelectedEvents] = useState<DB_Events[]>([]);
   const [selectedDate, setSelectedDate] = useState<string | null>(null);
   const { events, addEvents, db_events, addDBEvents } = useEventState();
+  // ! : 외부에서 이벤트 리스트를 받아오게 된다면 zustand 스토어도 필요 없을거 같습니다!
+  const { events, addEvents } = useEventState();
 
   /*
   const handleDateClick = (clickInfo: EventClickArg) => {
@@ -124,6 +126,9 @@ export default function Calendar() {
     };
   }, [updateSize]);
 
+  const [isLoaded, setIsLoaded] = useState(false); // 데이터 로딩 상태
+
+  // !: 이베트를 받아온다면 필요없는 코드가 될 수 있을거 같아요.
   useEffect(() => {
     getPersonalSchedule().then((schedule) => {
       schedule.map((x) => {

src/components/common/Loading/Loading.tsx

@@ -5,6 +5,7 @@ interface Props {
   display: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
   size: 'xs' | 'sm' | 'md' | 'lg';
   color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+  transparent?: boolean;
 }
 
 const styleMap = {
@@ -28,12 +29,10 @@ const styleMap = {
   error: 'text-error',
 };
 
-const Loading: React.FC<Props> = ({ display, size, color }) => {
+const Loading: React.FC<Props> = ({ display, size, color, transparent = false }) => {
   return (
     <div
-      className={
-        'fixed left-0 top-0 z-50 flex h-screen w-screen flex-col items-center justify-center overflow-hidden bg-base-100'
-      }
+      className={`fixed left-0 top-0 z-50 flex h-screen w-screen flex-col items-center justify-center overflow-hidden bg-base-100 ${transparent ? 'bg-opacity-50' : ''}`}
     >
       <Logo />
       <span className={`loading absolute bottom-20 ${styleMap[display]} ${styleMap[size]} ${styleMap[color]}`}></span>