fix: 토픽 작성자는 투표 불가 (#217)

* chore: add react-toastify

* feat: add zIndex type to theme

* feat: Toast container

* feat: show toast and reset slide

* fix: make handleVote return Promise<boolean>

package.json

@@ -25,6 +25,7 @@
     "react-hook-form": "^7.49.2",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.16.0",
+    "react-toastify": "^10.0.4",
     "react-uid": "^2.3.3",
     "styled-components": "^6.0.8",
     "styled-normalize": "^8.0.7",

src/App.tsx

@@ -3,6 +3,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { StyleSheetManager, ThemeProvider } from 'styled-components';
 
+import { StyledToastConatiner } from '@components/commons/Toast/Toast';
+
 import GlobalStyle from '@styles/global';
 import { theme } from '@styles/theme';
 
@@ -22,6 +24,7 @@ const App = () => {
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
           <GlobalStyle />
+          <StyledToastConatiner limit={1} />
           <Router />
         </ThemeProvider>
       </QueryClientProvider>

src/assets/styles/theme.ts

@@ -49,6 +49,7 @@ export const zIndex = {
 };
 
 export type ColorsTypes = typeof colors;
+export type ZIndexTypes = typeof zIndex;
 
 export const theme: DefaultTheme = {
   colors,

src/components/Home/ChoiceSlider/ChoiceSlider.tsx

@@ -8,7 +8,7 @@ import { Choice } from '@interfaces/api/topic';
 import { getScreenWidth } from '@utils/screenWidth';
 
 interface ChoiceSliderProps {
-  onVote: (choiceOption: Choice['choiceOption']) => void;
+  onVote: (choiceOption: Choice['choiceOption']) => Promise<boolean>;
   choices: Choice[];
 }
 
@@ -28,17 +28,27 @@ const ChoiceSlider = ({ onVote, choices }: ChoiceSliderProps) => {
       translateX: -(screenWidth / 2 + 7.5 + screenWidth),
       opacity: 0,
     },
+    reset: {
+      translateX: 0,
+      opacity: 1,
+    },
   };
 
-  const handleDragEnd = (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+  const handleDragEnd = async (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
     if (info.velocity.x > 0 && info.offset.x > screenWidth / 2 + 7.5) {
       // A 슬라이드
       controls.start('A');
-      onVote(choices[0].choiceOption);
+      const result = await onVote(choices[0].choiceOption);
+      if (!result) {
+        controls.start('reset');
+      }
     } else if (info.velocity.x < 0 && info.offset.x < -(screenWidth / 2 + 7.5)) {
       // B 슬라이드
       controls.start('B');
-      onVote(choices[1].choiceOption);
+      const result = await onVote(choices[1].choiceOption);
+      if (!result) {
+        controls.start('reset');
+      }
     }
   };
 

src/components/Home/TopicCard/TopicCard.tsx

@@ -6,6 +6,7 @@ import { useLatestComment } from '@apis/comment/useComment';
 import useVoteTopic from '@apis/topic/useVoteTopic';
 import ProfileImg from '@components/commons/ProfileImg/ProfileImg';
 import Text from '@components/commons/Text/Text';
+import { Toast } from '@components/commons/Toast/Toast';
 import ChoiceSlider from '@components/Home/ChoiceSlider/ChoiceSlider';
 import CommentBox from '@components/Home/CommentBox/CommentBox';
 import Timer from '@components/Home/Timer/Timer';
@@ -18,6 +19,8 @@ import { colors } from '@styles/theme';
 
 import { LeftDoubleArrowIcon, RightDoubleArrowIcon } from '@icons/index';
 
+import { ResponseError } from '@apis/fetch';
+
 import TopicComments from '../TopicComments/TopicComments';
 
 import {
@@ -68,12 +71,22 @@ const TopicCard = ({ topic }: TopicCardProps) => {
   };
 
   const handleOnVote = async (choiceOption: Choice['choiceOption']) => {
-    const data = await voteMutation.mutateAsync({
-      topicId: topic.topicId,
-      choiceOption: choiceOption,
-      votedAt: new Date().getTime() / 1000,
-    });
-    setLatestComment(data.latestComment);
+    try {
+      const data = await voteMutation.mutateAsync({
+        topicId: topic.topicId,
+        choiceOption: choiceOption,
+        votedAt: new Date().getTime() / 1000,
+      });
+      setLatestComment(data.latestComment);
+      return true;
+    } catch (error) {
+      if (error instanceof ResponseError) {
+        if (error.errorData.abCode === 'VOTED_BY_AUTHOR') {
+          Toast.error('토픽을 작성한 사람은 투표할 수 없어요');
+        }
+      }
+      return false;
+    }
   };
 
   return (

src/components/commons/Toast/Toast.tsx

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { ToastContainer, ToastOptions, toast } from 'react-toastify';
+import styled, { keyframes } from 'styled-components';
+
+import 'react-toastify/dist/ReactToastify.css';
+
+const toastifyTrackProgress = keyframes`
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+`;
+
+export const StyledToastConatiner = styled(ToastContainer)`
+  /* stylelint-disable-next-line selector-class-pattern */
+  .Toastify__toast {
+    padding: 50px 0 8px;
+    color: ${({ theme }) => theme.colors.white};
+    text-align: center;
+    background-color: ${({ theme }) => theme.colors.purple};
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    .Toastify__toast-body {
+      padding: 0;
+    }
+  }
+
+  /* .Toastify__toast--info {
+  } */
+
+  /* .Toastify__toast--success {
+  } */
+
+  /* .Toastify__toast--error {
+  } */
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .Toastify__progress-bar {
+    animation: ${toastifyTrackProgress} linear 1;
+  }
+`;
+
+const defaultToastOption: ToastOptions = {
+  position: 'top-center',
+  autoClose: 3000,
+  hideProgressBar: true,
+  closeOnClick: true,
+  draggable: true,
+  pauseOnHover: false,
+  closeButton: false,
+};
+
+export const Toast = {
+  info: (message: ReactNode, options: ToastOptions = {}) => {
+    toast.info(message, {
+      icon: false,
+      ...defaultToastOption,
+      ...options,
+    });
+  },
+  success: (message: ReactNode, options: ToastOptions = {}) => {
+    toast.success(message, {
+      ...defaultToastOption,
+      //   icon: <Icon name="check-circle" stroke={white} />,
+      ...options,
+    });
+  },
+  error: (message: ReactNode, options: ToastOptions = {}) => {
+    toast.error(message, {
+      ...defaultToastOption,
+      icon: false,
+      ...options,
+    });
+  },
+};

src/interfaces/styled.d.ts

@@ -1,8 +1,9 @@
 import 'styled-components';
-import { ColorsTypes } from '@styles/theme';
+import { ColorsTypes, ZIndexTypes } from '@styles/theme';
 
 declare module 'styled-components' {
   export interface DefaultTheme {
     colors: ColorsTypes;
+    zIndex: ZIndexTypes;
   }
 }

src/routes/B/BTopic.tsx

@@ -50,6 +50,7 @@ const BTopic = () => {
       votedAt: new Date().getTime() / 1000,
     });
     setLatestComment(data.latestComment);
+    return true;
   };
 
   const handleCommentBoxClick = () => {

yarn.lock

@@ -4769,6 +4769,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -8157,6 +8162,13 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-toastify@^10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.4.tgz#6ecdbbf923a07fc45850e69b0566efc7bf733283"
+  integrity sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA==
+  dependencies:
+    clsx "^2.1.0"
+
 react-uid@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/react-uid/-/react-uid-2.3.3.tgz#6a485ccc868555997f3506c6db97a3e735d97adf"