[FE] DEV -> MAIN (#355)

second-hand-team-01 · Jul 25, 2023 · dd7f32e · dd7f32e
2 parents eb538d8 + 33dee0c
commit dd7f32e
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 77 deletions.
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -12,8 +12,6 @@ function App() {
   //   worker.start();
   // }
 
-  console.log(process.env);
-
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />

diff --git a/fe/src/components/commons/FilterBar/FilterBar.tsx b/fe/src/components/commons/FilterBar/FilterBar.tsx
@@ -1,7 +1,9 @@
 import * as S from './FilterBarStyle';
 import { Button, Dropdown } from '@commons/index';
 import { Category } from '@type-store/services/category';
-// import { MenuButtonProps } from '@components/commons/Menu/MenuStyle';
+import { MenuButtonProps } from '@components/commons/Menu/MenuStyle';
+import { useState, useEffect } from 'react';
+
 
 export interface FilterBarProps {
   mainLocation?: string;
@@ -12,6 +14,7 @@ export interface FilterBarProps {
   selectedCategory?: Category;
   handleDeleteBtn?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   openState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  locationPopupHandler?: any;
 }
 
 export const FilterBar = ({
@@ -20,56 +23,48 @@ export const FilterBar = ({
   selectedCategory,
   handleDeleteBtn,
   openState,
-}: // mainLocation,
-// subLocation,
-FilterBarProps) => {
+  mainLocation,
+  subLocation,
+  locationPopupHandler,
+}: FilterBarProps) => {
   if (!openState) return <></>;
 
   const [isOpen, setOpen] = openState;
 
-  // const menuButtonPropsList = [
-  //   {
-  //     shape: 'small',
-  //     state: 'default',
-  //     name: mainLocation,
-  //     onClick: () => setOpen(false),
-  //   },
-  //   subLocation
-  //     ? [
-  //         {
-  //           shape: 'small',
-  //           state: 'default',
-  //           name: subLocation,
-  //           onClick: () => setOpen(false),
-  //         },
-  //       ]
-  //     : [],
-  //   {
-  //     shape: 'small',
-  //     state: 'default',
-  //     name: '내동네 설정하기',
-  //     onClick: () => setOpen(false),
-  //   },
-  // ];
+  const [menuButtonPropsList, setMenuButtonPropsList] = useState<
+    MenuButtonProps[]
+  >([
+    {
+      shape: 'small',
+      state: 'default',
+      name: mainLocation,
+      onClick: () => setOpen(false),
+    },
+
+    {
+      shape: 'small',
+      state: 'default',
+      name: '내동네 설정하기',
+      onClick: () => locationPopupHandler(),
+    },
+  ]);
+
+  useEffect(() => {
+    const newMenu: MenuButtonProps = {
+      shape: 'small',
+      state: 'default',
+      name: subLocation,
+      onClick: () => () => setOpen(false),
+    };
+    if (subLocation) {
+      setMenuButtonPropsList((prev) => [prev[0], newMenu, prev[1]]);
+    }
+  }, [subLocation]);
 
   return (
     <S.FilterBar selectedCategory={selectedCategory}>
       <Dropdown
-        menuButtonPropsList={[
-          {
-            shape: 'small',
-            state: 'default',
-            name: 'ddd',
-            onClick: () => setOpen(false),
-          },
-          {
-            shape: 'small',
-            state: 'default',
-            name: 'ddd2',
-            onClick: () => setOpen(false),
-          },
-        ]}
-        // menuButtonPropsList={menuButtonPropsList}
+        menuButtonPropsList={menuButtonPropsList}
         openState={[isOpen, setOpen]}
         onClick={() => setOpen(true)}
       >

diff --git a/fe/src/components/commons/ImgPreview/ImgElement/ImgElement.tsx b/fe/src/components/commons/ImgPreview/ImgElement/ImgElement.tsx
@@ -14,7 +14,7 @@ export const ImgElement = ({
 }: ImgElementProps) => {
   return (
     <S.ImgWrap>
-      <S.Img src={`${file}`} key={`${file}`} width="80px" height="80px"></S.Img>
+      <S.Img src={file} key={file} width="80px" height="80px" />
       {isFirst ? (
         <>
           <S.CloseBtn onClick={handleDelete}>

diff --git a/fe/src/components/commons/ImgPreview/ImgPreview.tsx b/fe/src/components/commons/ImgPreview/ImgPreview.tsx
@@ -66,18 +66,18 @@ export const ImgPreview = ({ imageState }: ImgPreviewProps) => {
         ></S.FileInput>
         {images.map((image, i) => (
           <ImgElement
-            key={`${image.file}`}
+            key={image.name}
             file={image.fileString}
             isFirst={i === 0 ? true : false}
             handleDelete={({ currentTarget }) => {
               const btn = currentTarget as HTMLButtonElement;
               const img = btn.previousElementSibling as HTMLImageElement;
               const newFiles = images.filter(
-                (file) => `${file.file}` !== img.src
+                (file) => `${file.fileString}` !== img.src
               );
               setImages(newFiles);
             }}
-          ></ImgElement>
+          />
         ))}
       </S.ImgContainer>
       <Dialog

diff --git a/fe/src/components/commons/LocationPopup/LocationPopup.tsx b/fe/src/components/commons/LocationPopup/LocationPopup.tsx
@@ -33,19 +33,21 @@ export const LocationPopup = ({
         </S.AlertTextSection>
         <S.LocationButtonSection>
           <Button
-            title={userInfo.mainLocation.town}
+            title={userInfo.mainLocation.locationName}
             shape="large"
             state="default"
             textAlign="center"
             color="neutralTextStrong"
             icon="plus"
             hasBorder={true}
-            onClick={() => removeLocationHandler(userInfo.mainLocation.town)}
+            onClick={() =>
+              removeLocationHandler(userInfo.mainLocation.locationName)
+            }
           />
           <Button
             title={
-              userInfo.subLocation.town
-                ? userInfo.subLocation.town
+              userInfo.subLocation.locationName
+                ? userInfo.subLocation.locationName
                 : '위치 추가'
             }
             shape="large"

diff --git a/fe/src/pages/HomePage/HomePage.tsx b/fe/src/pages/HomePage/HomePage.tsx
@@ -40,6 +40,7 @@ export const HomePage = () => {
   });
   const { page, categoryIdx } = categoryAndPage;
   const { isLoggedIn, userInfo } = useContext(UserContext);
+
   const { userMainLocationIdx, userMainTown } = userInfo.main;
   const { userSubTown } = userInfo.sub;
 
@@ -67,6 +68,7 @@ export const HomePage = () => {
       page,
       categoryIdx,
       userMainLocationIdx
+      // userInfo.main.locationIdx
     );
     if (error) return setErrorMsg(error.message);
     if (data) {
@@ -177,6 +179,10 @@ export const HomePage = () => {
     });
   };
 
+  const locationPopupHandler = () => {
+    setLocationPopupOpen(true);
+  };
+
   const handleDeleteBtn = () => {
     setCategoryAndPage({
       page: 0,
@@ -192,14 +198,13 @@ export const HomePage = () => {
         headerOption={{
           type: 'filter',
           filterBarOptions: {
+            locationPopupHandler: () => locationPopupHandler(),
             openState: [isLocationDropdownOpen, setLocationDropdownOpen],
             mainLocation: isLoggedIn
               ? userMainTown
               : LOCATION_FALLBACK.locationName,
             subLocation: userSubTown ? userSubTown : null,
-            // region: isLoggedIn
-            //   ? locationName ?? LOCATION_FALLBACK.locationName
-            //   : LOCATION_FALLBACK.locationName,
+            region: isLoggedIn ? userMainTown : LOCATION_FALLBACK.locationName,
             handleFilterBtnClick: () => {
               setCategoryPopupOpen(true);
               !categoryState.data && categoryFetch();
@@ -254,7 +259,7 @@ export const HomePage = () => {
               page: 0,
             })
           }
-        ></CategoryPopup>
+        />
       )}
       {isLocationPopupOpen && (
         <LocationPopup
@@ -288,3 +293,5 @@ export const HomePage = () => {
 // popup에는 removehandler 내려주고
 
 // post를 보내고 selecotor를 닫자
+
+// 이미 로그인을 해서 지역정보를 가지고 있음
diff --git a/fe/src/pages/LoginPage/LoginPage.tsx b/fe/src/pages/LoginPage/LoginPage.tsx
@@ -135,7 +135,6 @@ export const LoginPage = () => {
     });
 
     const userInfo = await response.json();
-    console.log(userInfo);
     if (!response.ok) {
       throw new Error(userInfo.message);
     }
@@ -162,9 +161,9 @@ export const LoginPage = () => {
       const data = await authenticateUser(enteredId, enteredPassword);
       loginHandler(data.token, data.memberInfo);
 
-      const UserLocationInfo = await getUserLocationInfo();
-      const mainLocation = UserLocationInfo.data.main;
-      const subLocation = UserLocationInfo.data.sub;
+      const userLocationInfo = await getUserLocationInfo();
+      const mainLocation = userLocationInfo.data.main;
+      const subLocation = userLocationInfo.data.sub;
 
       setLocationHandler(mainLocation, subLocation);
 

diff --git a/fe/src/pages/SignUpPage/SignUpPage.tsx b/fe/src/pages/SignUpPage/SignUpPage.tsx
@@ -143,6 +143,8 @@ export const SignUpPage = () => {
       subLocation.locationIdx ? subLocation.locationIdx.toString() : ''
     );
 
+    // 이미 등록된 이미지 중복 체크 및 dialog 띄우기
+
     try {
       await signUpUser(formData);
       navigate('/profile');
@@ -171,7 +173,6 @@ export const SignUpPage = () => {
   const locationState = hasSelectedLocation(userInfo);
 
   useEffect(() => {
-    console.log(userInfo.imgFile);
     const identifier = setTimeout(() => {
       setFormIsValid(
         !!idIsValid &&

diff --git a/fe/src/pages/WritePage/WritePage.tsx b/fe/src/pages/WritePage/WritePage.tsx
@@ -182,7 +182,8 @@ export const WritePage = ({ type }: { type: 'write' | 'edit' }) => {
         type: 'nav',
         navbarOptions: {
           title: '내 물건 팔기',
-          leftBtn: <NavbarBtn text="닫기" path="back"></NavbarBtn>,
+          leftBtn: <NavbarBtn text="닫기" path="back" />,
+          /* path 수정하기 기존 유입 경로 넣기 */
           rightBtn: (
             <Button
               title="완료"

diff --git a/fe/src/services/items/items.ts b/fe/src/services/items/items.ts
@@ -125,10 +125,11 @@ const convertAPIItemDetailsToItemDetails = (
     interest,
     view,
     interestChecked,
-    postedAt,
+    lastModifiedAt,
     imageUrl,
   } = details;
 
+  console.log(lastModifiedAt);
   const newDetails = {
     itemIdx,
     title: name,
@@ -145,7 +146,7 @@ const convertAPIItemDetailsToItemDetails = (
     interest,
     view,
     interestChecked,
-    postedAt: new Date(postedAt),
+    postedAt: new Date(lastModifiedAt),
     images: imageUrl,
   };
   return newDetails;
@@ -241,8 +242,8 @@ export const editItemsAPI = async (itemIdx: number, body: ItemReqBody) => {
   formData.append('price', convertedBody.price);
   formData.append('locationIdx', convertedBody.locationIdx);
   formData.append('categoryIdx', convertedBody.categoryIdx);
-  convertedBody.images?.forEach((image, i) => {
-    formData.append(`image${i}`, image);
+  convertedBody.images?.forEach((image) => {
+    formData.append(`image`, image);
   });
 
   try {

diff --git a/fe/src/services/items/write.ts b/fe/src/services/items/write.ts
@@ -86,18 +86,68 @@ export const uploadPostItems = async ({
   return result as Response<PostItemRes>;
 };
 
+export const requiresImageConversion = (images) => {
+  images.some((image) => (image?.file === null ? true : false));
+};
+
+const fetchImageAsData = async (imageUrl) => {
+  const imageData = await fetch(imageUrl);
+
+  if (!imageData.ok) {
+    throw new Error('이미지를 불러오는데 실패했습니다.');
+
+    // TODO: dialog에 에러 전달
+  }
+
+  const blob = await imageData.blob();
+  return blob;
+};
+
 export const uploadEditItems = async (
   itemIdx: number,
   { title, description, images, price, categoryIdx, locationIdx }
 ) => {
-  const body = convertDataToBody(
-    title,
-    description,
-    images,
-    price,
-    categoryIdx as number,
-    locationIdx
-  );
-  const result = await editItemsAPI(itemIdx, body);
-  return result as Response<null>;
+  try {
+    const convertedImages = await Promise.all(
+      images.map(async (image) => {
+        if (!image.file) {
+          const blob = await fetchImageAsData(image.fileString);
+          const urlParts = image.fileString.split('/');
+          const fileName = urlParts[urlParts.length - 1].split('?')[0];
+          const fileReader = new FileReader();
+          fileReader.readAsDataURL(blob);
+          const fileString = await new Promise((resolve) => {
+            fileReader.onloadend = () => {
+              resolve(fileReader.result);
+            };
+          });
+          const file = {
+            file: new File([blob], fileName, { type: blob.type }),
+            fileString: fileString,
+            name: fileName,
+            size: blob.size,
+          };
+
+          return file;
+        }
+        return image;
+      })
+    );
+
+    const body = convertDataToBody(
+      title,
+      description,
+      convertedImages,
+      price,
+      categoryIdx as number,
+      locationIdx
+    );
+
+    const result = await editItemsAPI(itemIdx, body);
+    return result as Response<null>;
+  } catch (error) {
+    // TODO: error 메시지 처리
+    console.error(error);
+    throw error;
+  }
 };