Dev -> main (#403)

second-hand-team-01 · Nov 14, 2023 · 00bdb51 · 00bdb51
2 parents b6bcf3b + efd1a69
commit 00bdb51
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 44 deletions.
diff --git a/fe/src/components/commons/BottomSheet/BottomSheet.tsx b/fe/src/components/commons/BottomSheet/BottomSheet.tsx
@@ -17,11 +17,11 @@ interface BottomSheetProps {
   title?: string;
   hasSearchInput?: boolean;
   inputValue?: string;
+  modalRootId?: string;
   handleInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   handleBackdropClick?: () => void;
 }
 
-// input이 없는 경우가 있습니다(회원가입)
 export const BottomSheet = ({
   isOpen = false,
   leftBtn,
@@ -32,9 +32,10 @@ export const BottomSheet = ({
   inputValue,
   handleInputChange,
   handleBackdropClick,
+  modalRootId = 'modal-root',
 }: BottomSheetProps) => {
   return isOpen ? (
-    <Portal id="modal-root">
+    <Portal id={modalRootId}>
       <S.BottomSheet hasSearchInput={hasSearchInput}>
         <S.Header>
           <S.HeaderTop>

diff --git a/fe/src/components/commons/FilterBar/FilterBar.tsx b/fe/src/components/commons/FilterBar/FilterBar.tsx
@@ -44,7 +44,7 @@ export const FilterBar = ({
           mainLocation?.town
         ),
     },
-    ...(subLocation
+    ...(subLocation?.town
       ? [
           {
             shape: 'small',

diff --git a/fe/src/components/commons/LocationPopup/LocationPopup.tsx b/fe/src/components/commons/LocationPopup/LocationPopup.tsx
@@ -11,7 +11,8 @@ interface LocationPopupProps {
   removeUserLocationHandler: (
     selectedLocationIdx,
     userMainLocationIdx,
-    userSubLocationIdx
+    userSubLocationIdx,
+    event: React.MouseEvent<HTMLElement>
   ) => void;
   locationSelectorHandler: () => void;
 }
@@ -30,6 +31,7 @@ export const LocationPopup = ({
       title="동네 설정"
       isOpen={isLocationPopupOpen}
       handleBackdropClick={locationPopupHandler}
+      modalRootId="popup-root"
       leftBtn={{
         text: '닫기',
         onClick: locationPopupHandler,
@@ -63,11 +65,12 @@ export const LocationPopup = ({
                 userInfo.main.town
               )
             }
-            iconClickHandler={() =>
+            iconClickHandler={(event) =>
               removeUserLocationHandler(
                 userInfo.main.locationIdx,
                 userInfo.main.locationIdx,
-                userInfo.sub.locationIdx
+                userInfo.sub.locationIdx,
+                event
               )
             }
           />
@@ -98,11 +101,12 @@ export const LocationPopup = ({
             }
             iconClickHandler={
               userInfo.sub.town
-                ? () =>
+                ? (event) =>
                     removeUserLocationHandler(
                       userInfo.sub.locationIdx,
                       userInfo.main.locationIdx,
-                      userInfo.sub.locationIdx
+                      userInfo.sub.locationIdx,
+                      event
                     )
                 : () => locationSelectorHandler()
             }

diff --git a/fe/src/components/commons/LocationSelector/LocationSelector.tsx b/fe/src/components/commons/LocationSelector/LocationSelector.tsx
@@ -27,6 +27,7 @@ export const LocationSelector = ({
     <>
       <BottomSheet
         isOpen={isLocationSelectorOpen}
+        modalRootId="selector-root"
         handleBackdropClick={locationSelectorHandler}
         leftBtn={{
           text: '닫기',

diff --git a/fe/src/pages/HomePage/HomePage.tsx b/fe/src/pages/HomePage/HomePage.tsx
@@ -29,9 +29,6 @@ export const HomePage = () => {
   const [isDialogOpen, setDialogOpen] = useState(false);
   const userInfo = useContext(UserInfoContext);
   const userInfoDispatch = useContext(UserInfoDispatchContext);
-  const [selectedLocation, setSelectedLocation] = useState(
-    userInfo?.isLoggedIn ? userInfo?.main : LOCATION_FALLBACK
-  );
 
   const [isLocationDropdownOpen, setLocationDropdownOpen] = useState(false);
   const [isLocationPopupOpen, setLocationPopupOpen] = useState(false);
@@ -47,16 +44,6 @@ export const HomePage = () => {
     fetchLocationData();
   }, []);
 
-  useEffect(() => {
-    if (
-      userInfo?.isLoggedIn &&
-      (selectedLocation?.locationIdx !== userInfo?.main?.locationIdx ||
-        selectedLocation?.locationIdx !== userInfo?.sub?.locationIdx)
-    ) {
-      setSelectedLocation(userInfo?.main);
-    }
-  }, [userInfo?.main?.locationIdx]);
-
   const addUserLocationHandler = async (newLocation, userMainLocation) => {
     if (newLocation.locationIdx === userMainLocation.locationIdx) {
       setIsLocationSelectorOpen(false);
@@ -84,10 +71,17 @@ export const HomePage = () => {
             },
           },
         });
-      setSelectedLocation({
-        locationIdx: putUserLocationRes.sub.locationIdx,
-        town: putUserLocationRes.sub.town,
-      });
+      userInfoDispatch &&
+        userInfoDispatch({
+          type: 'SET_USER_SELECTED_LOCATION',
+          payload: {
+            locationIdx: putUserLocationRes.sub.locationIdx,
+            town: putUserLocationRes.sub.town,
+          },
+        });
+
+      setIsLocationSelectorOpen(false);
+      setLocationPopupOpen(true);
     } catch (error) {
       return error;
     }
@@ -96,8 +90,10 @@ export const HomePage = () => {
   const removeUserLocationHandler = async (
     selectedLocationIdx,
     userMainLocationIdx,
-    userSubLocationIdx
+    userSubLocationIdx,
+    event
   ) => {
+    event.stopPropagation();
     if (
       userMainLocationIdx === selectedLocationIdx &&
       userSubLocationIdx === null
@@ -106,9 +102,14 @@ export const HomePage = () => {
       return;
     }
 
+    const newUserLocationIdx =
+      selectedLocationIdx === userMainLocationIdx
+        ? userSubLocationIdx
+        : userMainLocationIdx;
+
     try {
       const putUserLocationRes = await putUserLocation(
-        userSubLocationIdx,
+        newUserLocationIdx,
         null
       );
 
@@ -123,34 +124,46 @@ export const HomePage = () => {
             sub: { locationIdx: null, town: null },
           },
         });
-      setSelectedLocation({
-        locationIdx: putUserLocationRes.main.locationIdx,
-        town: putUserLocationRes.main.town,
-      });
+      userInfoDispatch &&
+        userInfoDispatch({
+          type: 'SET_USER_SELECTED_LOCATION',
+          payload: {
+            locationIdx: putUserLocationRes.main.locationIdx,
+            town: putUserLocationRes.main.town,
+          },
+        });
     } catch (error) {
       return (error as Error).message;
     }
   };
 
   // locationPopup에서 지역 선택했을 때
   const locationPopupClickHandler = (locationIdx, town) => {
-    if (selectedLocation?.locationIdx === locationIdx) {
+    if (userInfo?.selectedLocation?.locationIdx === locationIdx) {
       setLocationPopupOpen(false);
       return;
     }
 
-    setSelectedLocation({ locationIdx: locationIdx, town: town });
+    userInfoDispatch &&
+      userInfoDispatch({
+        type: 'SET_USER_SELECTED_LOCATION',
+        payload: { locationIdx: locationIdx, town: town },
+      });
     setLocationPopupOpen(false);
   };
 
   // locationDropdown에서 지역을 클릭했을 때, 새로운 지역에 대한 item 받아오기
   const locationDropdownClickHandler = (locationIdx, town) => {
-    if (selectedLocation?.locationIdx === locationIdx) {
+    if (userInfo?.selectedLocation?.locationIdx === locationIdx) {
       setLocationDropdownOpen(false);
       return;
     }
 
-    setSelectedLocation({ locationIdx: locationIdx, town: town });
+    userInfoDispatch &&
+      userInfoDispatch({
+        type: 'SET_USER_SELECTED_LOCATION',
+        payload: { locationIdx: locationIdx, town: town },
+      });
     setLocationDropdownOpen(false);
   };
 
@@ -194,7 +207,7 @@ export const HomePage = () => {
               : LOCATION_FALLBACK,
             subLocation:
               userInfo?.isLoggedIn && userInfo?.sub ? userInfo?.sub : null,
-            region: selectedLocation?.town,
+            region: userInfo?.selectedLocation?.town,
             handleFilterBtnClick: () => {
               setCategoryPopupOpen(true);
             },
@@ -207,7 +220,7 @@ export const HomePage = () => {
         <S.Home>
           <HomeList
             selectedCategory={selectedCategory}
-            selectedLocationIdx={selectedLocation?.locationIdx}
+            selectedLocationIdx={userInfo?.selectedLocation?.locationIdx}
           />
           <S.FloatingBtn>
             <Button
@@ -228,7 +241,7 @@ export const HomePage = () => {
       {isLocationPopupOpen && (
         <LocationPopup
           userInfo={userInfo}
-          selectedLocation={selectedLocation}
+          selectedLocation={userInfo?.selectedLocation}
           isLocationPopupOpen={isLocationPopupOpen}
           locationPopupClickHandler={locationPopupClickHandler}
           locationPopupHandler={locationPopupHandler}
@@ -255,7 +268,7 @@ export const HomePage = () => {
         }}
         handleBackDropClick={() => setDialogOpen(false)}
       >
-        "동네는 최소 1개 이상 선택해야해요"
+        동네는 최소 1개 이상 선택해야해요
       </Dialog>
     </>
   );

diff --git a/fe/src/pages/SalesHistoryPage/SalesHistoryPage.tsx b/fe/src/pages/SalesHistoryPage/SalesHistoryPage.tsx
@@ -33,13 +33,18 @@ export const SalesHistoryPage = () => {
     if (error || !data || !data.items) {
       return <Error>{error?.message}</Error>;
     }
-    if (data.items.length === 0) {
+    if (data.items.length === 0 && status === '판매중') {
       return (
         <Error button="상품 등록하기" onClick={() => navigate('/write')}>
           아직 등록된 판매 상품이 없어요.
         </Error>
       );
     }
+
+    if (data.items.length === 0 && status === '판매완료') {
+      return <Error>아직 판매 완료된 상품이 없어요.</Error>;
+    }
+
     return data?.items.map((item: ListItemProps) => (
       <ListItem
         key={item.itemIdx}

diff --git a/fe/src/stores/UserContext.tsx b/fe/src/stores/UserContext.tsx
@@ -9,6 +9,7 @@ interface UserInfo {
   imgUrl: string | null;
   main?: Location | null;
   sub?: Location | null;
+  selectedLocation?: Location | null;
 }
 
 export interface Location {
@@ -21,7 +22,7 @@ type UserContextDispatch = Dispatch<UserAction>;
 type UserAction =
   | { type: 'LOGIN'; payload: UserInfo }
   | { type: 'SET_LOCATION'; payload: { main: Location; sub: Location } }
-  | { type: 'SET_USER_LOCATION'; payload: Location }
+  | { type: 'SET_USER_SELECTED_LOCATION'; payload: Location }
   | { type: 'LOGOUT'; payload: null };
 
 export const reducer = (state: UserInfo, { type, payload }) => {
@@ -48,9 +49,13 @@ export const reducer = (state: UserInfo, { type, payload }) => {
         },
       };
 
-    case 'SET_USER_LOCATION':
+    case 'SET_USER_SELECTED_LOCATION':
       return {
-        ...payload,
+        ...state,
+        selectedLocation: {
+          locationIdx: payload?.locationIdx,
+          town: payload?.town,
+        },
       };
 
     case 'LOGOUT':
@@ -86,6 +91,10 @@ const initialUserInfo: UserInfo = {
     locationIdx: null,
     town: null,
   },
+  selectedLocation: {
+    locationIdx: null,
+    town: null,
+  },
 };
 
 export const UserInfoContext = createContext<UserInfo | null>(null);
@@ -97,7 +106,10 @@ export const UserContextProvider = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const [userInfo, dispatch] = useReducer(reducer, initialUserInfo);
+  const [userInfo, dispatch] = useReducer<React.Reducer<UserInfo, UserAction>>(
+    reducer,
+    initialUserInfo
+  );
 
   useEffect(() => {
     const storedUserLoggedInInformation = localStorage.getItem('loginToken');
@@ -128,6 +140,13 @@ export const UserContextProvider = ({
             },
           },
         });
+        dispatch({
+          type: 'SET_USER_SELECTED_LOCATION',
+          payload: {
+            locationIdx: data.data.main.locationIdx,
+            town: data.data.main.town,
+          },
+        });
       });
     }
   }, []);