Merge branch 'dev' into 127--ui--calendarmain

Author: jeongah2651

src/App.tsx

@@ -1,6 +1,7 @@
-import { Calendar } from './components/common/Calendar.tsx';
+import MyCalendarPage from './pages/MyCalendarPage';
 
 function App() {
+
   return (
     <div>
       <header className="relative z-10">
@@ -52,6 +53,7 @@ function App() {
       </main>
     </div>
   );
+
 }
 
 export default App;

src/apis/personalScheduleApi.ts

@@ -0,0 +1,48 @@
+import supabase from '@/supabase';
+import { Events } from '@/utils/index';
+
+export const getPersonalSchedule = async () => {
+  const { data, error } = await supabase.from('personal_schedules').select();
+  if (error) {
+    throw error;
+  }
+  return data;
+};
+
+// 가장 최근 데이터 하나 가져오기
+export const getLastPersonalSchedule = async () => {
+  const { data, error } = await supabase
+    .from('personal_schedules')
+    .select()
+    .order('created_at', { ascending: false })
+    .limit(1)
+    .maybeSingle();
+  if (error) {
+    throw error;
+  }
+  return data;
+};
+
+export const addPersonalSchedule = async ({ start, end, ...props }: Events) => {
+  const { error } = await supabase.from('personal_schedules').insert({ ...props, start_date: start, end_date: end });
+  if (error) {
+    throw error;
+  }
+};
+
+export const updatePersonalSchedule = async (id: number, { start, end, ...props }: Events) => {
+  const { error } = await supabase
+    .from('personal_schedules')
+    .update({ ...props, start_date: start, end_date: end })
+    .eq('id', id);
+  if (error) {
+    throw error;
+  }
+};
+
+export const deletePersonalSchedule = async (id: number) => {
+  const { error } = await supabase.from('personal_schedules').delete().eq('id', id);
+  if (error) {
+    throw error;
+  }
+};

src/assets/icons/IconClose.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+
+interface Props {
+  style: string;
+}
+
+const IconClose: FC<Props> = ({ style }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className={`h-6 w-6 ${style}`}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+    </svg>
+  );
+};
+
+export default IconClose;

src/assets/icons/IconLeaf.tsx

@@ -0,0 +1,12 @@
+const IconLeaf = () => {
+  return (
+    <svg width="46" height="48" viewBox="0 0 46 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M38.3476 42.3332C35.985 42.3332 33.3148 42.3332 30.3858 42.5167C22.9579 42.9754 12.9085 42.165 10.8371 32.1346C7.89185 17.8842 16.4363 6.20248 15.5463 9.04646C8.2155 32.3946 21.7118 37.9143 32.6028 40.7736C35.8879 41.6298 37.7327 41.8286 40.6294 37.5626C44.3514 32.1041 47.7012 21.9055 45.0472 16.9209C39.529 6.66119 19.0093 5.42268 20.2392 1.06498C21.6471 -3.88904 -1.12189 8.74065 0.0432616 32.7004C0.706751 46.3392 13.5234 52.1648 36.082 44.7643C38.3638 44.0151 38.3476 42.3485 38.3476 42.3485V42.3332Z"
+        fill="#B8EA00"
+      />
+    </svg>
+  );
+};
+
+export default IconLeaf;

src/assets/icons/index.tsx

@@ -0,0 +1,7 @@
+import IconClose from './IconClose';
+import IconLeaf from './IconLeaf';
+import IconPlus from './IconPlus';
+import IconSearch from './IconSearch';
+import IconUserPlus from './IconUserPlus';
+
+export { IconClose, IconLeaf, IconPlus, IconSearch, IconUserPlus };

src/components/GroupForm/GroupForm.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import GroupFormNameInput from './GroupFormNameInput';
+import GroupFormDescriptionInput from './GroupFormDescriptionInput';
+import GroupFormDateInput from './GroupFormDateInput';
+import UserInvite from '../common/UserInvite';
+import GroupFormMemoInput from './GroupFormMemoInput';
+
+interface Props {
+  name?: string;
+  description?: string;
+  startDate?: string;
+  endDate?: string;
+  memo?: string;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+}
+
+const GroupForm: FC<Props> = ({
+  name = '',
+  description = '',
+  startDate = new Date().toString(),
+  endDate = new Date().toString(),
+  memo = '',
+  onSubmit,
+}) => {
+  return (
+    <form onSubmit={onSubmit} className="container mx-auto flex max-w-sm flex-1 flex-col gap-4 pb-[50px] pt-4">
+      <div className="flex h-full w-full flex-1 flex-col gap-4">
+        <GroupFormNameInput name={name} />
+        <GroupFormDescriptionInput description={description} />
+        <GroupFormDateInput startDate={startDate} endDate={endDate} />
+        <UserInvite />
+        <GroupFormMemoInput memo={memo} />
+      </div>
+      <button type="submit" className="btn btn-outline btn-primary w-full">
+        저장
+      </button>
+    </form>
+  );
+};
+
+export default GroupForm;

src/components/GroupForm/GroupFormDateInput.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { dateToYYMMDD } from '@/utils/dateUtils';
+
+interface Props {
+  startDate: string;
+  endDate: string;
+}
+
+const GroupFormDateInput: FC<Props> = ({ startDate, endDate }) => {
+  return (
+    <div className="w-full">
+      <label className="label label-text w-full text-start">모임 설정 기간 *</label>
+      <div className="input input-bordered flex w-full flex-row items-center gap-1 p-0">
+        <label className="hidden" htmlFor="group-start-date-input">
+          모임 시작
+        </label>
+        <input
+          className="input border-none"
+          type="date"
+          defaultValue={dateToYYMMDD(new Date(startDate))}
+          id="group-start-date-input"
+          name="startDate"
+        />
+        ~
+        <label className="hidden" htmlFor="group-end-date-input">
+          모임 종료
+        </label>
+        <input
+          className="input border-none"
+          type="date"
+          id="group-end-date-input"
+          defaultValue={dateToYYMMDD(new Date(endDate))}
+          name="endDate"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default GroupFormDateInput;

src/components/GroupForm/GroupFormDescriptionInput.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import InputForm from '../common/InputForm';
+
+interface Props {
+  description: string;
+}
+
+const GroupFormDescriptionInput: FC<Props> = ({ description }) => {
+  return (
+    <InputForm
+      id="group-description-input"
+      type="text"
+      defaultValue={description}
+      placeholder="모임 설명을 입력하세요"
+      onChange={() => {}}
+      title="모임 설명"
+      hint=""
+      name="description"
+    />
+  );
+};
+
+export default GroupFormDescriptionInput;

src/components/GroupForm/GroupFormMemoInput.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+interface Props {
+  memo: string;
+}
+
+const GroupFormMemoInput: FC<Props> = ({ memo }) => {
+  return (
+    <div>
+      <label className="label label-text w-full text-start">메모</label>
+      <textarea
+        id="group-memo-input"
+        className="input input-bordered h-24 w-full"
+        rows={10}
+        placeholder="메모를 입력하세요"
+        defaultValue={memo}
+        onChange={() => {}}
+        title="메모"
+        name="memo"
+      />
+      <p className="label-text-alt">최대 500자 까지 입력할 수 있습니다.</p>
+    </div>
+  );
+};
+
+export default GroupFormMemoInput;

src/components/GroupForm/GroupFormNameInput.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import InputForm from '../common/InputForm';
+
+interface Props {
+  name: string;
+}
+
+const GroupFormNameInput: FC<Props> = ({ name = '' }) => {
+  return (
+    <InputForm
+      id="group-name-input"
+      type="text"
+      defaultValue={name}
+      placeholder="모임명을 입력하세요"
+      onChange={() => {}}
+      title="모임명 *"
+      hint=""
+      name="name"
+    />
+  );
+};
+
+export default GroupFormNameInput;