storybook chromatic 배포 적용 #455

client/package.json

@@ -32,7 +32,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_0323dbd0cc46e9a"
   },
   "eslintConfig": {
     "extends": [
@@ -66,9 +67,12 @@
     "@storybook/react-webpack5": "^7.3.2",
     "@storybook/testing-library": "^0.2.0",
     "babel-plugin-named-exports-order": "^0.0.2",
+    "chromatic": "^7.2.0",
     "eslint-plugin-storybook": "^0.6.13",
     "prop-types": "^15.8.1",
     "storybook": "^7.3.2",
     "webpack": "^5.88.2"
-  }
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "[email protected]"
 }

client/src/App.js

@@ -32,6 +32,7 @@ import RewardPage from "./pages/userInfo/RewardPage";
 import ReceiptPage from "./pages/userInfo/ReceiptPage";
 import WatchedListPage from "./pages/contents/WatchedListPage";
 import ResultPage from "./pages/contents/ResultPage";
+import IncomePage from "./pages/userInfo/IncomePage";
 
 function App() {
   const dispatch = useDispatch();
@@ -111,6 +112,7 @@ function App() {
         <Route path="/channellist" element={<ChannelListPage />} />
         <Route path="/activity/reward" element={<RewardPage />} />
         <Route path="/activity/receipt" element={<ReceiptPage />} />
+        <Route path="/activity/income" element={<IncomePage />} />
         <Route path="/watched" element={<WatchedListPage />} />
         <Route path="/result/:keyword" element={<ResultPage />} />
       </Routes>

client/src/components/receiptPage/ReceiptItem.js

@@ -3,24 +3,67 @@ import { useSelector } from 'react-redux';
 import { IconButtonContainer, IconButtonImg } from '../../atoms/buttons/IconButtons';
 import arrowDown from '../../assets/images/icons/arrow/subscribe_arrow_down.svg';
 import arrowUp from '../../assets/images/icons/arrow/subscribe_arrow_up.svg';
-import { ReceiptAmountTypo, ReceiptGrayTypo, ReceiptItemContainer, ReceiptStatusTypo, ReceiptTitleTypo } from './ReceiptItem.style';
+import { ReceiptAmountTypo, ReceiptCancelButton, ReceiptGrayTypo, ReceiptItemContainer, ReceiptStatusTypo, ReceiptTitleTypo } from './ReceiptItem.style';
 import ReceiptArcodian from './ReceiptArcodian';
+import { cancelWholePurchaseService } from '../../services/receiptServices';
+import { AlertModal } from '../../atoms/modal/Modal'
+import { useToken } from '../../hooks/useToken';
 
 const ReceiptItem = ({item}) => {
+    const refreshToken = useToken();
     const isDark = useSelector(state=>state.uiSetting.isDark);
+    const accessTokens = useSelector(state=>state.loginInfo.accessToken);
     let createDate = item.createdDate;
     let createDay = createDate.split('T')[0];
     let createTime = createDate.split('T')[1];
     const titleName = `${item.orderVideos[0].videoName} 외 ${item.orderCount-1}개`;
     const amount = item.amount;
     const [ isAcordianOpen, setIsAcordianOpen ] = useState(false);
-    console.log(item)
+    const [ is결제취소성공팝업, setIs결제취소성공팝업 ] = useState(false);
+    const [ is결제취소실패팝업, setIs결제취소실패팝업 ] = useState(false); 
+    const [ 결제취소실패content, set결제취소실패content ] = useState('');
+
     const handleArcodianButtonClick = () => {
         setIsAcordianOpen(!isAcordianOpen);
     }
+    //결제 취소 버튼 선택시 동작
+    const handleCancelButtonClick = async () => {
+        const response = await cancelWholePurchaseService(
+            accessTokens.authorization,
+            item.orderId
+        );
+        if(response.status==='success') {
+            setIs결제취소성공팝업(true);
+        } else if(response.data==='만료된 토큰입니다.') {
+            refreshToken(handleCancelButtonClick);
+        } else{
+            set결제취소실패content(response.data);
+            setIs결제취소실패팝업(true);
+        }
+    }
 
     return (
         <>
+        <AlertModal 
+                isModalOpen={is결제취소실패팝업}
+                setIsModalOpen={setIs결제취소실패팝업}
+                isBackdropClickClose={true}
+                content={결제취소실패content}
+                buttonTitle='확인'
+                handleButtonClick={()=>{ setIs결제취소실패팝업(false) }}/>
+            <AlertModal 
+                isModalOpen={is결제취소성공팝업}
+                setIsModalOpen={(setIsModalOpen) => {
+                    setIsModalOpen(false);
+                    window.location.reload();
+                }}
+                isBackdropClickClose={true}
+                content='결제 취소되었습니다.'
+                buttonTitle='확인'
+                handleButtonClick={()=>{
+                    setIs결제취소성공팝업(false);
+                    window.location.reload();
+                }}/>
         <ReceiptItemContainer isDark={isDark} isAcordianOpen={isAcordianOpen}>
             <ReceiptGrayTypo isDark={isDark}>
                 {`${createDay} ${createTime}`}
@@ -39,7 +82,13 @@ const ReceiptItem = ({item}) => {
                 <IconButtonContainer isDark={isDark} onClick={handleArcodianButtonClick}>
                     <IconButtonImg src={isAcordianOpen?arrowUp:arrowDown}/>
                 </IconButtonContainer>
-            }   
+            }
+            { item.orderStatus==='COMPLETED' && 
+                <ReceiptCancelButton 
+                    isDark={isDark}
+                    onClick={handleCancelButtonClick}>
+                        결제취소
+                </ReceiptCancelButton> }
         </ReceiptItemContainer>
         { isAcordianOpen && 
             <ReceiptArcodian orderId={item.orderId} videos={item.orderVideos}/>  }

client/src/components/receiptPage/ReceiptItem.style.js

@@ -1,6 +1,7 @@
 import { styled } from 'styled-components';
 import tokens from '../../styles/tokens.json';
 import { BodyTextTypo } from '../../atoms/typographys/Typographys';
+import { NegativeTextButton } from '../../atoms/buttons/Buttons';
 
 const globalTokens = tokens.global;
 
@@ -29,4 +30,7 @@ export const ReceiptStatusTypo = styled(BodyTextTypo)`
     width: 150px;
     color: ${props=>props.isDark?globalTokens.LightGray.value:globalTokens.Gray.value};
     text-align: center;
+`
+export const ReceiptCancelButton = styled(NegativeTextButton)`
+    width: 100px;
 `

client/src/components/rewardPage/RewardCategory.js

@@ -53,6 +53,12 @@ const RewardCategory = ({category}) => {
                 onClick={()=>{ navigate('/activity/receipt') }}>
                     결제 내역
             </RewardNavItem>
+            <RewardNavItem 
+                isDark={isDark}
+                isSelect={category==='income'?true:false}
+                onClick={()=>{ navigate('/activity/income') }}>
+                    정산 내역
+            </RewardNavItem>
             <BorderBox isDark={isDark}/>
         </RewardNavContainer>
     );

client/src/pages/userInfo/IncomePage.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useToken } from '../../hooks/useToken';
+import { useInView } from 'react-intersection-observer';
+import { PageContainer } from '../../atoms/layouts/PageContainer';
+import { ContentNothing, RewardContentContainer, RewardMainContainer, RewardTitle } from './RewardPage';
+import RewardCategory from '../../components/rewardPage/RewardCategory';
+
+const IncomePage = () => {
+    const isDark = useSelector(state=>state.uiSetting.isDark);
+    const accessToken = useSelector(state=>state.loginInfo.accessToken);
+    const refreshToken = useToken();
+    const [ incomeList, setIncomeList ] = useState([]);
+    const [ page, setPage ] = useState(1);
+    const [ maxPage, setMaxPage ] = useState(10);
+    const [ month, setMonth ] = useState(1);
+    const [ loading, setLoading ] = useState(true);
+    const [ ref, inView ] = useInView();
+
+    return (
+        <PageContainer isDark={isDark}>
+            <RewardMainContainer isDark={isDark}>
+                <RewardTitle isDark={isDark}>나의 활동</RewardTitle>
+                <RewardCategory category='income'/>
+                <RewardContentContainer>
+                { incomeList.length===0 &&
+                    <ContentNothing isDark={isDark}>정산 내역이 없습니다.</ContentNothing> }
+                </RewardContentContainer>
+            </RewardMainContainer>
+        </PageContainer>
+    );
+};
+
+export default IncomePage;

client/src/pages/userInfo/ReceiptPage.js

@@ -20,8 +20,8 @@ const ReceiptPage = () => {
     const accessToken = useSelector(state=>state.loginInfo.accessToken);
     const refreshToken = useToken();
     const [ receiptList, setReceiptList ] = useState([]);
-    let [ page, setPage ] = useState(1);
-    let [ maxPage, setMaxPage ] = useState(10);
+    const [ page, setPage ] = useState(1);
+    const [ maxPage, setMaxPage ] = useState(10);
     const [ month, setMonth ] = useState(1);
     const [ loading, setLoading ] = useState(true);
     const [ ref, inView ] = useInView();

client/src/services/receiptServices.js

@@ -47,4 +47,26 @@ export const cancelOnePurchaseService = async (authorization, orderId, videoId)
             data: err.response.data.message
         }
     }
+}
+//결제 전체 취소
+export const cancelWholePurchaseService = async (authorization, orderId) => {
+    try {
+        const response = await axios.delete(
+            `${ROOT_URL}/orders/${orderId}`,
+            {
+                headers: {
+                    Authorization: authorization
+                }
+            }
+        );
+        return {
+            status: 'success',
+            data: response.data,
+        }
+    } catch (err) {
+        return {
+            status: 'error',
+            data: err.response.data.message,
+        }
+    }    
 }