[FE] dev -> main (#387)

second-hand-team-01 · Nov 1, 2023 · 6ac949a · 6ac949a
2 parents e9cda22 + 26f9b02
commit 6ac949a
Show file tree

Hide file tree

Showing 44 changed files with 1,217 additions and 618 deletions.
diff --git a/fe/package-lock.json b/fe/package-lock.json
diff --git a/fe/package.json b/fe/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^4.35.3",
+    "@tanstack/react-query-devtools": "^4.35.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,6 +14,7 @@
     "@types/react-dom": "^18.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",
     "styled-components": "5.3.10",

diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -5,21 +5,32 @@ import '@styles/index.css';
 import { RouterProvider } from 'react-router-dom';
 import { router } from './constants/routes';
 import { UserContextProvider } from '@stores/UserContext';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-function App() {
+export const App = () => {
   // if (process.env.NODE_ENV === 'development') {
   //   const { worker } = require('@mocks/browser');
   //   worker.start();
   // }
 
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        suspense: true,
+      },
+    },
+  });
+
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      <UserContextProvider>
-        <RouterProvider router={router} />
-      </UserContextProvider>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <UserContextProvider>
+          <RouterProvider router={router} />
+        </UserContextProvider>
+      </ThemeProvider>
+      <ReactQueryDevtools position="bottom-right" panelPosition="right" />
+    </QueryClientProvider>
   );
-}
-
-export default App;
+};
diff --git a/fe/src/components/commons/Button/Button.tsx b/fe/src/components/commons/Button/Button.tsx
@@ -5,6 +5,9 @@ import { ButtonStyleProps } from './ButtonStyle';
 interface ButtonProps extends ButtonStyleProps {
   onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   onTouchEnd?: (e: React.TouchEvent<HTMLButtonElement>) => void;
+  iconClickHandler?:
+    | ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void)
+    | undefined;
   id?: string;
 }
 
@@ -19,6 +22,7 @@ export const Button = ({
   iconSize,
   onClick,
   onTouchEnd,
+  iconClickHandler,
   hasBorderRadius = true,
   hasBorder = false,
   backgroundColor,
@@ -41,7 +45,14 @@ export const Button = ({
       isIconBtn={!!icon}
     >
       {title && textAlign === 'left' && <span>{title}</span>}
-      {icon && <Icon name={icon} size={iconSize} color={color} />}
+      {icon && (
+        <Icon
+          name={icon}
+          size={iconSize}
+          color={color}
+          iconClickHandler={iconClickHandler}
+        />
+      )}
       {title && textAlign === 'center' && <span>{title}</span>}
       {iconRight && <Icon name={iconRight} size={iconSize} color={color} />}
     </S.Button>

diff --git a/fe/src/components/commons/Dropdown/Dropdown.tsx b/fe/src/components/commons/Dropdown/Dropdown.tsx
@@ -5,7 +5,7 @@ import { Icon, Menu } from '@commons/index';
 import { ParentCoordinate, MenuButtonProps } from '@commons/Menu/MenuStyle';
 
 interface DropdownProps extends DropdownStyleProps {
-  children: ReactElement | string;
+  children: ReactElement | string | null;
   openState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   menuButtonPropsList: MenuButtonProps[];

diff --git a/fe/src/components/commons/FilterBar/FilterBar.tsx b/fe/src/components/commons/FilterBar/FilterBar.tsx
@@ -2,19 +2,19 @@ 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 { useState, useEffect } from 'react';
-
+import { Location } from '@stores/UserContext';
 
 export interface FilterBarProps {
-  mainLocation?: string;
-  subLocation?: string;
-  region?: string;
+  mainLocation?: Location | null;
+  subLocation?: Location | null;
+  region?: string | null;
   handleRegionBtnClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   handleFilterBtnClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   selectedCategory?: Category;
   handleDeleteBtn?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   openState?: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
-  locationPopupHandler?: any;
+  locationPopupHandler?: () => void;
+  locationDropdownClickHandler?: (locationIdx, town) => void;
 }
 
 export const FilterBar = ({
@@ -26,47 +26,53 @@ export const FilterBar = ({
   mainLocation,
   subLocation,
   locationPopupHandler,
+  locationDropdownClickHandler,
 }: FilterBarProps) => {
   if (!openState) return <></>;
 
-  const [isOpen, setOpen] = openState;
+  const [isDropdownOpen, setDropdownOpen] = openState;
 
-  const [menuButtonPropsList, setMenuButtonPropsList] = useState<
-    MenuButtonProps[]
-  >([
+  const menuButtonPropsList: MenuButtonProps[] = [
     {
       shape: 'small',
       state: 'default',
-      name: mainLocation,
-      onClick: () => setOpen(false),
+      name: mainLocation?.town,
+      onClick: () =>
+        locationDropdownClickHandler &&
+        locationDropdownClickHandler(
+          mainLocation?.locationIdx,
+          mainLocation?.town
+        ),
     },
-
+    ...(subLocation
+      ? [
+          {
+            shape: 'small',
+            state: 'default',
+            name: subLocation?.town,
+            onClick: () =>
+              locationDropdownClickHandler &&
+              locationDropdownClickHandler(
+                subLocation?.locationIdx,
+                subLocation?.town
+              ),
+          } as MenuButtonProps,
+        ]
+      : []),
     {
       shape: 'small',
       state: 'default',
       name: '내동네 설정하기',
-      onClick: () => locationPopupHandler(),
+      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={menuButtonPropsList}
-        openState={[isOpen, setOpen]}
-        onClick={() => setOpen(true)}
+        openState={[isDropdownOpen, setDropdownOpen]}
+        onClick={() => setDropdownOpen(true)}
       >
         {region}
       </Dropdown>