Merge pull request #172 from imaginer-dev/164---ui-프로필-수정-구현

feat: supabase storage 로 이미지 업로드 기능 추가

Author: jane1107

src/apis/updateUserApi.ts

@@ -19,10 +19,12 @@ interface UpdateUserProfileParams {
 export const updateUserProfile = async ({ id, user_nickname, file }: UpdateUserProfileParams) => {
   let imageUrl: string | null = null;
 
+  console.log(`Updating profile for user: ${id}`);
+
   const bucketName = 'profile';
 
   if (file) {
-    const filePath = `public/${id}_${file.name}`;
+    const filePath = `${id}/profile.${file.name.split('.').pop()}`;
     console.log(`Uploading file to path: ${filePath}`);
 
     const { error: uploadError } = await supabase.storage.from(bucketName).upload(filePath, file, { upsert: true });

src/assets/svgs/ProfileIcon.tsx

@@ -19,9 +19,9 @@ const ProfileIcon = ({
       />
     </svg>
   ) : (
-    <div className="avatar overflow-hidden rounded-full">
-      <div className="w-full rounded">
-        <img src={imageUrl} alt="Profile" />
+    <div className={`avatar h-[49[px]] w-[49px] overflow-hidden rounded-full`}>
+      <div>
+        <img className="object-cover" src={imageUrl} alt="Profile" />
       </div>
     </div>
   );

src/components/common/SideBar/SideBarProfile.tsx

@@ -23,10 +23,7 @@ const SideBarProfile: FC<Props> = ({ userName, imageUrl }) => {
         <Link to="/" className="cursor-pointer rounded-lg bg-base-100 px-3 py-1 font-black hover:opacity-50">
           내 캘린더 보기
         </Link>
-        {/**
-         * // TODO: 버튼 링크 수정 해야함.
-         * */}
-        <Link to="/setting" className="cursor-pointer hover:opacity-50">
+        <Link to="/profile" className="cursor-pointer hover:opacity-50">
           <SettingIcon />
         </Link>
       </div>

src/hooks/useAddGroupSchedule.ts

@@ -13,6 +13,7 @@ export const useAddGroupSchedule = () => {
   const failDialogRef = useRef<DialogElement | null>(null);
 
   const addGroupSchedule = (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => {
+    e.preventDefault();
     const formData = new FormData(e.currentTarget);
     const newGroupSchedule = {
       title: formData.get('name') as string,