fix: 모달 열기 이벤트 동작 안하는 에러 (#675)

* chore: dev환경 webpack 설정 구현 * chore: common환경 webpack 설정 구현 * chore: prod환경 webpack 설정 구현 * chore: 기존 웹팩 환경 파일 제거 * chore: 불필요한 babelrc 파일 제거 * chore: 빌드 명령어 변경 및 사용하지 않는 라이브러리 제거 * chore: 타입체킹에 실패하면 빌드가 되지 않도록 설정 * fix: 페이지 code 스플리팅으로 인한 suspense 오류 해결 * fix: axios 401 에러로 인한 주석 처리 * fix: 간헐적 에러 발생 오류 해결 #674 * refactor: 변경된 모달 컴포넌트 적용 * fix: 모달 content 내용 넘어가는 버그 해결 * fix: modal 버전 업그레이드 및 필요없는 파일 제거
woowacourse-teams · Mar 17, 2024 · 2a5f6dd · 2a5f6dd
1 parent 20e5715
commit 2a5f6dd
Show file tree

Hide file tree

Showing 20 changed files with 786 additions and 691 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -28,7 +28,7 @@
     "@tanstack/react-query-devtools": "^4.36.1",
     "axios": "^1.5.1",
     "browser-image-compression": "^2.0.2",
-    "celuveat-ui-library": "^1.2.8",
+    "celuveat-ui-library": "^1.4.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",
@@ -58,6 +58,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/google.maps": "^3.53.5",
     "@types/jest": "^29.5.3",
+    "@types/node": "^20.11.0",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-slick": "^0.23.11",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,7 +1,29 @@
+import { Suspense } from 'react';
+import { styled } from 'styled-components';
+import LoadingIndicator from '~/components/@common/LoadingIndicator';
+
 import Router from './router/Router';
 
 function App() {
-  return <Router />;
+  return (
+    <Suspense
+      fallback={
+        <StyledProcessing>
+          <LoadingIndicator size={64} />
+        </StyledProcessing>
+      }
+    >
+      <Router />
+    </Suspense>
+  );
 }
 
 export default App;
+
+const StyledProcessing = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 100vh;
+`;
diff --git a/frontend/src/components/@common/Dialog/Dialog.tsx b/frontend/src/components/@common/Dialog/Dialog.tsx
diff --git a/frontend/src/components/@common/Dialog/index.tsx b/frontend/src/components/@common/Dialog/index.tsx
diff --git a/frontend/src/components/@common/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/components/@common/ErrorBoundary/ErrorBoundary.tsx
@@ -1,46 +1,46 @@
-import { Component, ReactElement, ReactNode } from 'react';
-
-interface FallbackRenderProps {
-  resetErrorBoundary: () => void;
-}
-interface Props {
-  children: ReactNode;
-  fallbackRender: ({ resetErrorBoundary }: FallbackRenderProps) => ReactElement;
-  reset: () => void;
-}
-
-interface State {
-  hasError: boolean;
-}
-
-class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(): State {
-    return {
-      hasError: true,
-    };
-  }
-
-  resetErrorBoundary() {
-    const { reset } = this.props;
-    reset();
-    this.setState({ hasError: false });
-  }
-
-  render() {
-    const { hasError } = this.state;
-    const { children, fallbackRender } = this.props;
-
-    if (hasError) {
-      return fallbackRender({ resetErrorBoundary: () => this.resetErrorBoundary() });
-    }
-
-    return children;
-  }
-}
-
-export default ErrorBoundary;
+// import { Component, ReactElement, ReactNode } from 'react';
+
+// interface FallbackRenderProps {
+//   resetErrorBoundary: () => void;
+// }
+// interface Props {
+//   children: ReactNode;
+//   fallbackRender: ({ resetErrorBoundary }: FallbackRenderProps) => ReactElement;
+//   reset: () => void;
+// }
+
+// interface State {
+//   hasError: boolean;
+// }
+
+// class ErrorBoundary extends Component<Props, State> {
+//   constructor(props: Props) {
+//     super(props);
+//     this.state = { hasError: false };
+//   }
+
+//   static getDerivedStateFromError(): State {
+//     return {
+//       hasError: true,
+//     };
+//   }
+
+//   resetErrorBoundary() {
+//     const { reset } = this.props;
+//     reset();
+//     this.setState({ hasError: false });
+//   }
+
+//   render() {
+//     const { hasError } = this.state;
+//     const { children, fallbackRender } = this.props;
+
+//     if (hasError) {
+//       return fallbackRender({ resetErrorBoundary: () => this.resetErrorBoundary() });
+//     }
+
+//     return children;
+//   }
+// }
+
+// export default ErrorBoundary;
diff --git a/frontend/src/components/CelebDropDown/CelebDropDown.tsx b/frontend/src/components/CelebDropDown/CelebDropDown.tsx
@@ -34,7 +34,7 @@ function CelebDropDown() {
         <StyledDropDownWrapper isMobile={isMobile}>
           <StyledSelectContainer>
             {[OPTION_FOR_CELEB_ALL, ...celebOptions].map(celeb => (
-              <DropDown.Option as="li" key={celeb.id} externalClick={selectCeleb(celeb)} isCustom>
+              <DropDown.Option as="li" key={celeb.id} onClick={selectCeleb(celeb)} isCustom>
                 <StyledDropDownOption>
                   <CelebDropDownOption celeb={celeb} />
                 </StyledDropDownOption>

diff --git a/frontend/src/components/Form/SuggestionForm/SuggestionForm.tsx b/frontend/src/components/Form/SuggestionForm/SuggestionForm.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 import { postRevisedInfo } from '~/api/restaurant';
 import TextButton from '~/components/@common/Button';
-import Dialog from '~/components/@common/Dialog';
+
 import { BORDER_RADIUS, FONT_SIZE } from '~/styles/common';
 
 const labels = [
@@ -37,28 +37,26 @@ function SuggestionForm() {
   };
 
   return (
-    <Dialog title="정보 수정 제안">
-      <StyledForm onSubmit={handleSubmit}>
-        <h5>수정 항목</h5>
-        <p>잘못되었거나 수정이 필요한 정보들을 모두 선택해주세요.</p>
-        <StyledUnorderedList>
-          {labels.map(label => (
-            <StyledListItem>
-              <CheckBox value={label} onChange={clickCheckBox} />
-              <span>{label}</span>
-            </StyledListItem>
-          ))}
-          <StyledTextarea placeholder="(선택) 내용을 입력해주세요." onChange={onChangeTextarea} />
-        </StyledUnorderedList>
-        <TextButton
-          type="submit"
-          text="등록하기"
-          onClick={handleSubmit}
-          colorType="light"
-          disabled={!checkedItems.length && !textareaValue}
-        />
-      </StyledForm>
-    </Dialog>
+    <StyledForm onSubmit={handleSubmit}>
+      <h5>수정 항목</h5>
+      <p>잘못되었거나 수정이 필요한 정보들을 모두 선택해주세요.</p>
+      <StyledUnorderedList>
+        {labels.map(label => (
+          <StyledListItem>
+            <CheckBox value={label} onChange={clickCheckBox} />
+            <span>{label}</span>
+          </StyledListItem>
+        ))}
+        <StyledTextarea placeholder="(선택) 내용을 입력해주세요." onChange={onChangeTextarea} />
+      </StyledUnorderedList>
+      <TextButton
+        type="submit"
+        text="등록하기"
+        onClick={handleSubmit}
+        colorType="light"
+        disabled={!checkedItems.length && !textareaValue}
+      />
+    </StyledForm>
   );
 }
 

diff --git a/frontend/src/components/FormModal/FormModal.tsx b/frontend/src/components/FormModal/FormModal.tsx
diff --git a/frontend/src/components/FormModal/index.tsx b/frontend/src/components/FormModal/index.tsx
diff --git a/frontend/src/components/InfoDropDown/InfoDropDown.tsx b/frontend/src/components/InfoDropDown/InfoDropDown.tsx
@@ -1,15 +1,16 @@
+import { styled } from 'styled-components';
 import { useQuery } from '@tanstack/react-query';
-import { DropDown } from 'celuveat-ui-library';
 import { useNavigate } from 'react-router-dom';
-import { styled } from 'styled-components';
-import { getProfile } from '~/api/user';
+import { DropDown, Modal } from 'celuveat-ui-library';
+
 import InfoButton from '~/components/@common/InfoButton';
+import LoginModal from '~/components/LoginModal';
 
-import { ProfileData } from '~/@types/api.types';
-import useCeluveatModal from '~/hooks/useCeluveatModal';
+import { getProfile } from '~/api/user';
+
+import type { ProfileData } from '~/@types/api.types';
 
 function InfoDropDown() {
-  const { openLoginModal } = useCeluveatModal();
   const { data, isSuccess: isLogin } = useQuery<ProfileData>({
     queryKey: ['profile'],
     queryFn: getProfile,
@@ -40,20 +41,22 @@ function InfoDropDown() {
         <StyledDropDownWrapper>
           {isLogin ? (
             <>
-              <DropDown.Option as="li" isCustom externalClick={goMyPage}>
+              <DropDown.Option as="li" isCustom onClick={goMyPage}>
                 <StyledDropDownOption>마이 페이지</StyledDropDownOption>
               </DropDown.Option>
-              <DropDown.Option as="li" isCustom externalClick={goWishList}>
+              <DropDown.Option as="li" isCustom onClick={goWishList}>
                 <StyledDropDownOption>위시리스트</StyledDropDownOption>
               </DropDown.Option>
-              <DropDown.Option as="li" isCustom externalClick={goWithdrawal}>
+              <DropDown.Option as="li" isCustom onClick={goWithdrawal}>
                 <StyledDropDownOption>회원 탈퇴</StyledDropDownOption>
               </DropDown.Option>
             </>
           ) : (
-            <DropDown.Option isCustom externalClick={openLoginModal}>
-              <StyledDropDownOption>로그인</StyledDropDownOption>
-            </DropDown.Option>
+            <Modal.OpenButton modalTitle="로그인 및 회원가입" isCustom modalContent={<LoginModal />}>
+              <DropDown.Option isCustom>
+                <StyledDropDownOption>로그인</StyledDropDownOption>
+              </DropDown.Option>
+            </Modal.OpenButton>
           )}
         </StyledDropDownWrapper>
       </DropDown.Options>
@@ -99,6 +102,8 @@ const StyledDropDownOption = styled.li`
 
   padding: 0 1rem;
 
+  border-radius: 10px;
+
   &:hover {
     background: var(--gray-1);
   }