Merge branch 'feDev' into fe/feat/ErrProcess#447

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": "client@0.1.0"
 }

client/src/App.js

@@ -33,6 +33,7 @@ import ReceiptPage from "./pages/userInfo/ReceiptPage";
 import WatchedListPage from "./pages/contents/WatchedListPage";
 import ResultPage from "./pages/contents/ResultPage";
 import NotFound from "./pages/NotFound";
+import IncomePage from "./pages/userInfo/IncomePage";
 
 function App() {
   const dispatch = useDispatch();
@@ -112,6 +113,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 />} />
         <Route path="/*" element={<NotFound/>} />

client/src/components/contentListItems/ChannelList.js

@@ -140,7 +140,7 @@ export default function ChannelList({ channelInfor, accessToken, userId }) {
         {lectures.map((el) => (
           <HorizonItem lecture={el} channel={channelInfor} />
         ))}
-        {lectures.length===0?<LectureBlank isDark={isDark}>등록된 영상이 없습니다.</LectureBlank>:<></>}
+        {lectures.length===0?<LectureBlank isDark={isDark}>등록된 강의가 없습니다.</LectureBlank>:<></>}
         {page < maxPage && !loading ? <BottomDiv ref={bottomRef} /> : <></>}
       </ListContainer>
     </ListBody>

client/src/components/contentListItems/ChannelNav.js

@@ -49,7 +49,7 @@ export default function ChannelNav({ navigate, setNavigate }) {
   const myid = useSelector(state=>state.loginInfo.myid);
   const { userId } = useParams();
 
-  const navs = ["홈", "동영상", "커뮤니티"];
+  const navs = ["홈", "강의", "커뮤니티"];
   if( myid === Number(userId) ) navs.push('설정');
 
   return (

client/src/components/contentListItems/Tier.js

@@ -0,0 +1,96 @@
+import React,{useState} from "react";
+import { styled } from "styled-components";
+import { useSelector } from "react-redux";
+import tokens from "../../styles/tokens.json";
+import BRONZE from "../../assets/images/icons/tier/bronze.svg"
+import SILVER from "../../assets/images/icons/tier/silver.svg";
+import GOLD from "../../assets/images/icons/tier/gold.svg";
+import PLATINUM from "../../assets/images/icons/tier/platinum.svg";
+import DIAMOND from "../../assets/images/icons/tier/diamond.svg";
+
+const globalTokens = tokens.global;
+
+const TierContainer = styled.div`
+    position: relative;
+`
+const TierImage = styled.img`
+    height: 25px;
+    object-fit: contain;
+    margin-top: ${globalTokens.Spacing4.value}px;
+`
+const ModalBody = styled.div`
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    left: 180%;
+    top: -15px;
+    width: 270px;
+    height: 180px;
+    border: ${globalTokens.ThinHeight.value}px solid ${globalTokens.LightGray.value};
+    border-radius: ${globalTokens.BigRadius.value}px;
+    color: ${(props)=>props.isDark ? globalTokens.White.value : globalTokens.Black.value};
+    background-color: ${(props) =>
+    props.isDark ? globalTokens.Black.value : globalTokens.White.value};
+    padding: ${globalTokens.Spacing12.value}px;
+    z-index: 1;
+`
+const ModalItem = styled.div`
+    height: 35px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: ${globalTokens.Spacing8.value}px;
+`
+const TierName = styled.span`
+    font-size: ${globalTokens.BodyText.value}px;
+    width: 80px;
+`
+const TierDescription = styled.span`
+    font-size: ${globalTokens.SmallText.value}px;
+    font-weight: 500;
+    margin-left: ${globalTokens.Spacing4.value}px;
+`
+
+export default function Tier({ tier }) {
+    const tiers = { BRONZE, SILVER, GOLD, PLATINUM, DIAMOND };
+    const isDark = useSelector((state) => state.uiSetting.isDark);
+    const [isOpen, setIsOpen] = useState(false)
+    const blurHandler = () => {
+        setIsOpen(false)
+    }
+    return (
+      <TierContainer>
+        <button onClick={()=>setIsOpen(!isOpen)} onBlur={blurHandler}>
+            <TierImage src={tiers[tier]}/>
+        </button>
+        {isOpen&&
+        <ModalBody isDark={isDark}>
+          <ModalItem>
+            <TierImage src={BRONZE} />
+            <TierName>Bronze</TierName>
+          </ModalItem>
+          <ModalItem>
+            <TierImage src={SILVER} />
+            <TierName>Silver</TierName>
+            <TierDescription>누적 포인트 100 이상</TierDescription>
+          </ModalItem>
+          <ModalItem>
+            <TierImage src={GOLD} />
+            <TierName>Gold</TierName>
+            <TierDescription>누적 포인트 1000 이상</TierDescription>
+          </ModalItem>
+          <ModalItem>
+            <TierImage src={PLATINUM} />
+            <TierName>Platinum</TierName>
+            <TierDescription>누적 포인트 3000 이상</TierDescription>
+          </ModalItem>
+          <ModalItem>
+            <TierImage src={DIAMOND} />
+            <TierName>Diamond</TierName>
+            <TierDescription>누적 포인트 10000 이상</TierDescription>
+          </ModalItem>
+        </ModalBody>}
+      </TierContainer>
+    );
+}

client/src/components/contentListItems/VerticalItem.js

@@ -73,7 +73,7 @@ const InforContainerRight = styled.div`
     align-items: end;
 `
 const AuthorInfor = styled.div`
-    width: 120px;
+    width: 145px;
     height: 30px;
     overflow: hidden;
     display: flex;
@@ -174,7 +174,6 @@ export default function VerticalItem({ lecture ,channel}) {
           </InforContainerLeft>
           <InforContainerRight>
             <ScoreContainer>
-              <ScoreText isDark={isDark}>{star}/10</ScoreText>
               <StarContainer>
                 <Stars score={star} />
               </StarContainer>

client/src/components/incomePage/IncomeCategory.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { DropdownButton, DropdownButtonIcon, DropdownTextTypo, DropdownWrapper, ReceiptDropdownContainer } from '../receiptPage/ReceiptDropdown.style';
+import { useSelector } from 'react-redux';
+import { styled } from 'styled-components';
+import { TextButton } from '../../atoms/buttons/Buttons';
+import { BodyTextTypo } from '../../atoms/typographys/Typographys';
+import arrowUp from '../../assets/images/icons/arrow/subscribe_arrow_up.svg';
+import arrowDown from '../../assets/images/icons/arrow/subscribe_arrow_down.svg';
+import tokens from '../../styles/tokens.json';
+
+const globalTokens = tokens.global;
+
+const IncomeDropdownWrapper = styled(DropdownWrapper)`
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+`
+const IncomeDropdownButton = styled(DropdownButton)`
+    width: 100px;
+`
+const IncomeDropdownUnitTypo = styled(BodyTextTypo)`
+    margin: ${globalTokens.Spacing4.value}px ${globalTokens.Spacing8.value}px ${globalTokens.Spacing4.value}px ${globalTokens.Spacing4.value}px;
+`
+
+const IncomeCategory = ({year, setYear, month, setMonth}) => {
+    const isDark = useSelector(state=>state.uiSetting.isDark);
+    const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);
+    const [isMonthDropdownOpen, setIsMonthDropdownOpen] = useState(false);
+
+    return (
+        <ReceiptDropdownContainer>
+            <IncomeDropdownWrapper>
+                <IncomeDropdownButton isDark={isDark}>
+                    <DropdownTextTypo isDark={isDark}>{year}</DropdownTextTypo>
+                    <DropdownButtonIcon src={isYearDropdownOpen?arrowUp:arrowDown}/>
+                </IncomeDropdownButton>
+                <IncomeDropdownUnitTypo isDark={isDark}>년</IncomeDropdownUnitTypo>
+                <IncomeDropdownButton isDark={isDark}>
+                <DropdownTextTypo isDark={isDark}>{month}</DropdownTextTypo>
+                    <DropdownButtonIcon src={isMonthDropdownOpen?arrowUp:arrowDown}/>
+                </IncomeDropdownButton>
+                <IncomeDropdownUnitTypo isDark={isDark}>월</IncomeDropdownUnitTypo>
+            </IncomeDropdownWrapper>
+        </ReceiptDropdownContainer>
+    );
+};
+
+export default IncomeCategory;

client/src/components/incomePage/IncomeHeader.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import tokens from '../../styles/tokens.json';
+import { styled } from 'styled-components';
+import { IncomeAmountTypo, IncomeItemContainer, IncomeTitleTypo } from './IncomeItem';
+import { useSelector } from 'react-redux';
+
+const globalTokens = tokens.global;
+
+export const IncomeHeadContainer = styled(IncomeItemContainer)`
+    background-color: ${props=>props.isDark?globalTokens.Black.value:globalTokens.Background.value};
+    border: none;
+`
+export const IncomeTitleHeadContainer = styled(IncomeTitleTypo)`
+    text-align: center;
+    color: ${props=>props.isDark?globalTokens.LightGray.value:globalTokens.Gray.value};
+    font-weight: 400;
+`
+export const IncomeAmountHeadTypo = styled(IncomeAmountTypo)`
+    text-align: center;
+    color: ${props=>props.isDark?globalTokens.LightGray.value:globalTokens.Gray.value};
+`
+
+const IncomeHeader = () => {
+    const isDark = useSelector(state=>state.uiSetting.isDark);
+
+    return (
+        <IncomeHeadContainer isDark={isDark}>
+            <IncomeTitleHeadContainer isDark={isDark}>강의명</IncomeTitleHeadContainer>
+            <IncomeAmountHeadTypo isDark={isDark}>누적 판매 금액</IncomeAmountHeadTypo>
+            <IncomeAmountHeadTypo isDark={isDark}>누적 환불 금액</IncomeAmountHeadTypo>
+            <IncomeAmountHeadTypo isDark={isDark}>실제 이윤</IncomeAmountHeadTypo>
+        </IncomeHeadContainer>
+    );
+};
+
+export default IncomeHeader;

client/src/components/incomePage/IncomeItem.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { styled } from 'styled-components';
+import { ReceiptAmountTypo, ReceiptGrayTypo, ReceiptItemContainer, ReceiptTitleTypo } from '../receiptPage/ReceiptItem.style';
+import { useSelector } from 'react-redux';
+
+export const IncomeItemContainer = styled(ReceiptItemContainer)`
+`
+export const IncomeGrayTypo = styled(ReceiptGrayTypo)`
+`
+export const IncomeTitleTypo = styled(ReceiptTitleTypo)`
+`
+export const IncomeAmountTypo = styled(ReceiptAmountTypo)`
+    width: 130px;
+`
+
+const IncomeItem = ({item}) => {
+    const isDark = useSelector(state=>state.uiSetting.isDark);
+
+    return (
+        <IncomeItemContainer isDark={isDark}>
+            <IncomeTitleTypo isDark={isDark}>{item.videoName}</IncomeTitleTypo>
+            <IncomeAmountTypo isDark={isDark}>{item.totalSaleAmount}원</IncomeAmountTypo>
+            <IncomeAmountTypo isDark={isDark}>{item.refundAmount}원</IncomeAmountTypo>
+            <IncomeAmountTypo isDark={isDark}>{item.totalSaleAmount-item.refundAmount}원</IncomeAmountTypo>
+        </IncomeItemContainer>
+    );
+};
+
+export default IncomeItem;

client/src/components/mainPageItems/Carousel.js

@@ -9,6 +9,12 @@ import { Arrow } from "@egjs/flicking-plugins";
 import "@egjs/flicking-plugins/dist/arrow.css";
 
 const CarouselItemContainer = styled.div`
+    min-width: 400px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 `
 const CarouselImg = styled.img`
     width: 95%;