Fix: 리스트 수정 이미지 첨부 오류 해결 (#82)

* Chore: Emoji 이미지 추가 * Fix: 리스트 수정 이미지 수정 시 오류 해결 * Fix: 라벨 삭제시 생기는 에러 해결 * Refactor: 불필요 코드 제거 * 실수로 삭제한 코드 복구
8-Sprinters · Feb 24, 2024 · 4227321 · 4227321
1 parent b12a5bc
commit 4227321
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 56 deletions.
diff --git a/public/images/ocean.png b/public/images/ocean.png
diff --git a/public/images/sparkle.png b/public/images/sparkle.png
diff --git a/public/images/wave.png b/public/images/wave.png
diff --git a/src/app/_api/list/updateList.ts b/src/app/_api/list/updateList.ts
@@ -5,33 +5,33 @@ import axios from 'axios';
 interface UploadItemImagesProps {
   listId: number;
   listData: ListEditType;
-  isItemChanged: boolean;
   imageData: ItemImagesType;
   imageFileList: File[];
 }
 
-const updateList = async ({ listId, listData, isItemChanged, imageData, imageFileList }: UploadItemImagesProps) => {
+const updateList = async ({ listId, listData, imageData, imageFileList }: UploadItemImagesProps) => {
   // 이미지 제외 리스트 정보들 수정 요청
   const listResponse = await axiosInstance.patch<ListEditType>(`/lists/${listId}`, listData);
 
-  if (isItemChanged) {
-    //PresignedUrl 생성 요청
-    const imageResponse = await axiosInstance.post<PresignedUrlListType>('/lists/upload-url', imageData);
+  // 에러난 경우 & 이미지 수정 없는 경우 return
+  if (listResponse.status !== 204 || imageData.extensionRanks.length === 0) return;
 
-    //PresignedUrl에 이미지 업로드
-    for (let i = 0; i < imageResponse.data.length; i++) {
-      const result = await axios.put(imageResponse.data[i].presignedUrl, imageFileList[i], {
-        headers: {
-          'Content-Type': imageFileList[i]?.type,
-        },
-      });
-      if (result.status !== 200) return;
-    }
+  //PresignedUrl 생성 요청
+  const imageResponse = await axiosInstance.post<PresignedUrlListType>('/lists/upload-url', imageData);
 
-    //서버에 성공 완료 알림
-    if (imageFileList.length !== 0) {
-      await axiosInstance.post('/lists/upload-complete', imageData);
-    }
+  //PresignedUrl에 이미지 업로드
+  for (let i = 0; i < imageResponse.data.length; i++) {
+    const result = await axios.put(imageResponse.data[i].presignedUrl, imageFileList[i], {
+      headers: {
+        'Content-Type': imageFileList[i]?.type,
+      },
+    });
+    if (result.status !== 200) return;
+  }
+
+  //서버에 성공 완료 알림
+  if (imageFileList.length !== 0) {
+    await axiosInstance.post('/lists/upload-complete', imageData);
   }
 };
 

diff --git a/src/app/list/[listId]/edit/page.tsx b/src/app/list/[listId]/edit/page.tsx
@@ -8,7 +8,6 @@ import { useRouter, useParams } from 'next/navigation';
 import CreateItem from '@/app/list/create/_components/CreateItem';
 import CreateList from '@/app/list/create/_components/CreateList';
 
-import { useUser } from '@/store/useUser';
 import updateList from '@/app/_api/list/updateList';
 import getListDetail from '@/app/_api/list/getListDetail';
 import getCategories from '@/app/_api/category/getCategories';
@@ -21,10 +20,8 @@ export type FormErrors = FieldErrors<ListEditType>;
 export default function EditPage() {
   const router = useRouter();
   const param = useParams<{ listId: string }>();
-  const { user: owner } = useUser();
 
   const [step, setStep] = useState<'list' | 'item'>('list');
-  const [isItemChanged, setIsItemChanged] = useState(false);
 
   const { data: listDetailData } = useQuery<ListDetailType>({
     queryKey: [QUERY_KEYS.getListDetail, param?.listId],
@@ -64,17 +61,24 @@ export default function EditPage() {
     const listData: ListEditType = {
       ...originData,
       items: originData.items.map(({ imageUrl, ...rest }) => {
-        return {
-          ...rest,
-          imageUrl: '',
-        };
+        if (typeof imageUrl === 'string') {
+          return {
+            ...rest,
+            imageUrl,
+          };
+        } else {
+          return {
+            ...rest,
+            imageUrl: '',
+          };
+        }
       }),
     };
 
     const imageData: ItemImagesType = {
       listId: Number(param?.listId),
       extensionRanks: originData.items
-        .filter(({ imageUrl }) => imageUrl !== '')
+        .filter(({ imageUrl }) => typeof imageUrl !== 'string')
         .map(({ rank, imageUrl }) => {
           return {
             rank: rank,
@@ -85,7 +89,7 @@ export default function EditPage() {
     };
 
     const imageFileList: File[] = originData.items
-      .filter(({ imageUrl }) => imageUrl !== '')
+      .filter(({ imageUrl }) => typeof imageUrl !== 'string')
       .map(({ imageUrl }) => imageUrl?.[0] as File);
 
     return { listData, imageData, imageFileList };
@@ -100,7 +104,6 @@ export default function EditPage() {
     const updateData = {
       listId: Number(param?.listId) || 0,
       listData: listData,
-      isItemChanged: isItemChanged,
       imageData: imageData,
       imageFileList: imageFileList,
     };
@@ -160,9 +163,6 @@ export default function EditPage() {
             onSubmitClick={handleSubmit}
             isSubmitting={isUpdatingList || isSuccess}
             type="edit"
-            setItemChanged={() => {
-              setIsItemChanged(true);
-            }}
           />
         )}
       </FormProvider>

diff --git a/src/app/list/create/_components/CreateItem.tsx b/src/app/list/create/_components/CreateItem.tsx
@@ -10,16 +10,9 @@ interface CreateItemProps {
   onSubmitClick: () => void;
   isSubmitting: boolean;
   type: 'create' | 'edit';
-  setItemChanged?: () => void;
 }
 
-export default function CreateItem({
-  onBackClick,
-  onSubmitClick,
-  isSubmitting,
-  type,
-  setItemChanged,
-}: CreateItemProps) {
+export default function CreateItem({ onBackClick, onSubmitClick, isSubmitting, type }: CreateItemProps) {
   const {
     formState: { isValid },
   } = useFormContext();
@@ -44,7 +37,7 @@ export default function CreateItem({
           최소 3개, 최대 10개까지 아이템을 추가할 수 있어요. <br />
           아이템의 순서대로 순위가 정해져요.
         </p>
-        <Items type={type} setItemChanged={setItemChanged} />
+        <Items type={type} />
       </div>
     </div>
   );

diff --git a/src/app/list/create/_components/item/ImageUploader.tsx b/src/app/list/create/_components/item/ImageUploader.tsx
@@ -5,14 +5,13 @@ import * as styles from './ImageUploader.css';
 interface ImageUploaderProps {
   index: number;
   children: ReactNode;
-  handleImageAdd?: () => void;
 }
 
-export default function ImageUploader({ index, children, handleImageAdd }: ImageUploaderProps) {
+export default function ImageUploader({ index, children }: ImageUploaderProps) {
   return (
     <>
       <label className={styles.label} htmlFor={`${index}-image`}>
-        <ImageIcon onClick={handleImageAdd} />
+        <ImageIcon />
       </label>
       {children}
     </>

diff --git a/src/app/list/create/_components/item/ItemLayout.tsx b/src/app/list/create/_components/item/ItemLayout.tsx
@@ -22,7 +22,6 @@ interface ItemLayoutProps {
   linkPreview: ReactNode;
   imageInput: ReactNode;
   imagePreview: ReactNode;
-  handleImageAdd?: () => void;
 }
 
 export default function ItemLayout({
@@ -37,7 +36,6 @@ export default function ItemLayout({
   linkPreview,
   imageInput,
   imagePreview,
-  handleImageAdd,
 }: ItemLayoutProps) {
   return (
     <div>
@@ -59,9 +57,7 @@ export default function ItemLayout({
             <div className={styles.toolbar}>
               <div className={styles.fileButtons}>
                 {linkModal}
-                <ImageUploader index={index} handleImageAdd={handleImageAdd}>
-                  {imageInput}
-                </ImageUploader>
+                <ImageUploader index={index}>{imageInput}</ImageUploader>
               </div>
               {itemLength > MIN_ITEM_COUNT && (
                 <button onClick={handleDeleteItem}>

diff --git a/src/app/list/create/_components/item/Items.tsx b/src/app/list/create/_components/item/Items.tsx
@@ -133,11 +133,6 @@ export default function Items({ type, setItemChanged }: ItemsProps) {
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}
                     >
-                      {/* {titleError?.type !== 'required' && (
-                        <p key={item.id} className={styles.itemTitleError}>
-                          {titleError?.message}
-                        </p>
-                      )} */}
                       <ItemLayout
                         index={index}
                         handleDeleteItem={() => {
@@ -233,7 +228,6 @@ export default function Items({ type, setItemChanged }: ItemsProps) {
                             />
                           )
                         }
-                        handleImageAdd={setItemChanged}
                       />
                     </div>
                   )}

diff --git a/src/app/list/create/_components/item/LinkPreview.tsx b/src/app/list/create/_components/item/LinkPreview.tsx
@@ -22,7 +22,7 @@ export default function LinkPreview({ handleClearButtonClick, url }: LinkPreview
       role="button"
     >
       <LinkIcon fill="#61646B" />
-
+      <p className={styles.domainText}>{url}</p>
       <button className={styles.clearButton} onClick={handleClearClick}>
         <ClearBlackIcon alt="링크 삭제 버튼" />
       </button>

diff --git a/src/app/list/create/_components/list/LabelInput.tsx b/src/app/list/create/_components/list/LabelInput.tsx
@@ -89,7 +89,7 @@ function LabelInput({ name, placeholder, rules }: LabelInputProps) {
                   name,
                   labels.filter((l: string) => l !== label)
                 );
-                setError(name, {});
+                clearErrors(name);
               }}
             />
           </div>
-Original file line number
+Diff line change
@@ Expand Up @@
                       name,
                       labels.filter((l: string) => l !== label)
                     );
-                    setError(name, {});
+                    clearErrors(name);
                   }}
                 />
               </div>
@@ Expand Down @@