refactor: 변경된 모달 컴포넌트 적용

woowacourse-teams · Jan 14, 2024 · 07c89d6 · 07c89d6
1 parent a2ab9ea
commit 07c89d6
Show file tree

Hide file tree

Showing 14 changed files with 420 additions and 516 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.6",
     "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/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/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);
   }

diff --git a/frontend/src/components/LoginModal/LoginModal.tsx b/frontend/src/components/LoginModal/LoginModal.tsx
@@ -1,15 +1,12 @@
 import { styled } from 'styled-components';
 import LoginButton from '~/components/@common/LoginButton';
-import Dialog from '../@common/Dialog';
 
 function LoginModal() {
   return (
-    <Dialog title="로그인 및 회원가입">
-      <StyledLoginModalContent>
-        <LoginButton type="kakao" />
-        <LoginButton type="google" />
-      </StyledLoginModalContent>
-    </Dialog>
+    <StyledLoginModalContent>
+      <LoginButton type="kakao" />
+      <LoginButton type="google" />
+    </StyledLoginModalContent>
   );
 }
 

diff --git a/frontend/src/components/RestaurantReviewItem/RestaurantReviewItem.tsx b/frontend/src/components/RestaurantReviewItem/RestaurantReviewItem.tsx
@@ -2,6 +2,7 @@
 import { styled, css } from 'styled-components';
 import { useQuery } from '@tanstack/react-query';
 
+import { Modal } from 'celuveat-ui-library';
 import ThumpUpIcon from '~/assets/icons/etc/thumb-up.svg';
 import SpeakerphoneIcon from '~/assets/icons/etc/speakerphone.svg';
 
@@ -15,7 +16,7 @@ import { getProfile } from '~/api/user';
 import { getReviewImgUrl, lookImage } from '~/utils/image';
 
 import type { ProfileData, RestaurantReview } from '~/@types/api.types';
-import useCeluveatModal from '~/hooks/useCeluveatModal';
+import { ReviewDeleteForm, ReviewForm, ReviewReportForm } from '~/components/ReviewForm';
 
 interface RestaurantReviewItemProps {
   review: RestaurantReview;
@@ -29,8 +30,6 @@ function RestaurantReviewItem({ review }: RestaurantReviewItemProps) {
 
   const { getReviewIsLiked, toggleRestaurantReviewLike } = useRestaurantReview();
 
-  const { openReviewFormModal } = useCeluveatModal();
-
   const isUsersReview = profileData?.memberId === review.memberId;
 
   return (
@@ -46,23 +45,21 @@ function RestaurantReviewItem({ review }: RestaurantReviewItemProps) {
 
         {isUsersReview && (
           <StyledButtonContainer>
-            <button
-              type="button"
-              onClick={() => {
-                openReviewFormModal({ type: 'update', reviewId: review.id });
-              }}
+            <Modal.OpenButton
+              isCustom
+              modalTitle="리뷰 수정하기"
+              modalContent={<ReviewForm type="update" reviewId={review.id} />}
             >
-              수정
-            </button>
+              <button type="button">수정</button>
+            </Modal.OpenButton>
             <StyledLine />
-            <button
-              type="button"
-              onClick={() => {
-                openReviewFormModal({ type: 'delete', reviewId: review.id });
-              }}
+            <Modal.OpenButton
+              isCustom
+              modalTitle="리뷰 삭제하기"
+              modalContent={<ReviewDeleteForm reviewId={review.id} />}
             >
-              삭제
-            </button>
+              <button type="button">삭제</button>
+            </Modal.OpenButton>
           </StyledButtonContainer>
         )}
       </StyledProfileAndButton>
@@ -92,14 +89,16 @@ function RestaurantReviewItem({ review }: RestaurantReviewItemProps) {
               <ThumpUpIcon stroke={getReviewIsLiked(review.id) ? '#ff7b54' : '#3a3b3c'} />
               <StyledReviewText isLiked={getReviewIsLiked(review.id)}>{review.likeCount}</StyledReviewText>
             </StyledReviewButton>
-            <StyledReviewButton
-              onClick={() => {
-                openReviewFormModal({ type: 'report', reviewId: review.id });
-              }}
+            <Modal.OpenButton
+              isCustom
+              modalTitle="리뷰 신고하기"
+              modalContent={<ReviewReportForm reviewId={review.id} />}
             >
-              <SpeakerphoneIcon stroke="#3a3b3c" />
-              <StyledReviewText>신고</StyledReviewText>
-            </StyledReviewButton>
+              <StyledReviewButton>
+                <SpeakerphoneIcon stroke="#3a3b3c" />
+                <StyledReviewText>신고</StyledReviewText>
+              </StyledReviewButton>
+            </Modal.OpenButton>
           </>
         )}
       </StyledReviewButtonsWrapper>

diff --git a/frontend/src/components/RestaurantReviewWrapper/RestaurantReviewWrapper.tsx b/frontend/src/components/RestaurantReviewWrapper/RestaurantReviewWrapper.tsx
@@ -1,5 +1,6 @@
 import { styled } from 'styled-components';
 
+import { Modal } from 'celuveat-ui-library';
 import Pencil from '~/assets/icons/pencil.svg';
 
 import RestaurantReviewList from '~/components/RestaurantReviewList';
@@ -8,34 +9,30 @@ import useRestaurantReview from '~/hooks/server/useRestaurantReview';
 
 import { FONT_SIZE } from '~/styles/common';
 import { REVIEW_SHOW_COUNT } from '~/constants/options';
-import { ReviewFormType } from '~/@types/review.types';
-import useCeluveatModal from '~/hooks/useCeluveatModal';
+
+import { ReviewForm } from '~/components/ReviewForm';
 
 function RestaurantReviewWrapper() {
   const { restaurantReviewsData } = useRestaurantReview();
-  const { openReviewFormModal } = useCeluveatModal();
 
   const { totalElementsCount: reviewCount } = restaurantReviewsData;
   const isMoreReviews = reviewCount > REVIEW_SHOW_COUNT;
 
-  const onClickOpenModal = (reviewFormType: ReviewFormType) => () => {
-    openReviewFormModal({ type: reviewFormType });
-  };
-
   return (
     <StyledRestaurantReviewWrapper>
       <StyledReviewCountText>리뷰 {reviewCount ? `${reviewCount}개` : '없음'}</StyledReviewCountText>
       <RestaurantReviewList isSummary />
       <StyledButtonContainer>
-        <StyledButton type="button" onClick={onClickOpenModal('create')}>
-          <Pencil width={20} />
-          리뷰 작성하기
-        </StyledButton>
+        <Modal.OpenButton isCustom modalTitle="리뷰 작성하기" modalContent={<ReviewForm type="create" />}>
+          <StyledButton type="button">
+            <Pencil width={20} />
+            리뷰 작성하기
+          </StyledButton>
+        </Modal.OpenButton>
         {isMoreReviews && (
-          <StyledButton
-            type="button"
-            onClick={onClickOpenModal('all')}
-          >{`리뷰 ${reviewCount}개 모두 보기`}</StyledButton>
+          <Modal.OpenButton isCustom modalTitle="리뷰 모두 보기" modalContent={<RestaurantReviewList />}>
+            <StyledButton type="button">{`리뷰 ${reviewCount}개 모두 보기`}</StyledButton>
+          </Modal.OpenButton>
         )}
       </StyledButtonContainer>
     </StyledRestaurantReviewWrapper>

diff --git a/frontend/src/components/SuggestionButton/SuggestionButton.tsx b/frontend/src/components/SuggestionButton/SuggestionButton.tsx
@@ -1,15 +1,15 @@
+import { Modal } from 'celuveat-ui-library';
 import { styled } from 'styled-components';
 import Pencil from '~/assets/icons/pencil.svg';
-import useCeluveatModal from '~/hooks/useCeluveatModal';
 
 function SuggestionButton() {
-  const { openSuggestionModal } = useCeluveatModal();
-
   return (
-    <StyledButton type="button" onClick={openSuggestionModal}>
-      <Pencil width={16} />
-      <div>정보 수정 제안하기</div>
-    </StyledButton>
+    <Modal.OpenButton isCustom modalTitle="정보 수정 제안하기" modalContent={<SuggestionButton />}>
+      <StyledButton type="button">
+        <Pencil width={16} />
+        <div>정보 수정 제안하기</div>
+      </StyledButton>
+    </Modal.OpenButton>
   );
 }
 

diff --git a/frontend/src/hooks/server/useRestaurantReview.ts b/frontend/src/hooks/server/useRestaurantReview.ts
@@ -4,6 +4,8 @@ import { useParams } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';
 
 import { useState } from 'react';
+
+import { useModalStore } from 'celuveat-ui-library';
 import {
   deleteRestaurantReview,
   getRestaurantReview,
@@ -16,7 +18,6 @@ import {
 import useToastState from '~/hooks/store/useToastState';
 
 import type { RestaurantReviewData, RestaurantReviewPatchBody } from '~/@types/api.types';
-import useCeluveatModal from '../useCeluveatModal';
 
 const useRestaurantReview = () => {
   const queryClient = useQueryClient();
@@ -35,7 +36,7 @@ const useRestaurantReview = () => {
     shallow,
   );
 
-  const { closeModal } = useCeluveatModal();
+  const { closeModal } = useModalStore();
 
   const errorHandler = (error: AxiosError) => {
     switch (error.response.status) {

diff --git a/...rc/hooks/server/useToggleLikeNotUpdate.ts → ...c/hooks/server/useToggleLikeNotUpdate.tsx b/...rc/hooks/server/useToggleLikeNotUpdate.ts → ...c/hooks/server/useToggleLikeNotUpdate.tsx
@@ -1,14 +1,19 @@
+import { AxiosError } from 'axios';
 import { shallow } from 'zustand/shallow';
+import { useModalStore } from 'celuveat-ui-library';
 import { Query, useMutation, useQueryClient } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
-import { Restaurant } from '../../@types/restaurant.types';
-import useToastState from '~/hooks/store/useToastState';
-import useBooleanState from '~/hooks/useBooleanState';
+
 import { postRestaurantLike } from '~/api/user';
-import useCeluveatModal from '../useCeluveatModal';
+
+import useBooleanState from '~/hooks/useBooleanState';
+import useToastState from '~/hooks/store/useToastState';
+
+import type { Restaurant } from '~/@types/restaurant.types';
+
+import LoginModal from '~/components/LoginModal';
 
 const useToggleLikeNotUpdate = (restaurant: Restaurant) => {
-  const { openLoginModal } = useCeluveatModal();
+  const { openModal } = useModalStore();
 
   const { value: isLiked, toggle: toggleIsLiked } = useBooleanState(restaurant.isLiked ?? true);
   const { onSuccess, onFailure, close } = useToastState(
@@ -28,7 +33,7 @@ const useToggleLikeNotUpdate = (restaurant: Restaurant) => {
 
     onError: (error: AxiosError) => {
       if (error.response.status < 500) {
-        openLoginModal();
+        openModal({ title: '로그인 하기', content: <LoginModal /> });
         toggleIsLiked();
       } else {
         onFailure(error.response.data as string);
@@ -46,7 +51,7 @@ const useToggleLikeNotUpdate = (restaurant: Restaurant) => {
           query.queryKey[0] === 'restaurants' && query.queryKey[1]?.type !== 'wish-list',
       });
     },
-   });
+  });
 
   const toggleRestaurantLike = () => {
     toggleLike.mutate(restaurant.id);