feat(client): 정산 수수료 페이지 마크업 (#375)

* feat: 정산 수수료 페이지 마크업 * feat: Footer 컴포넌트에 수수료 안내 링크 추가 * feat: 메인페이지 물음표 플로팅 버튼 추가 * feat: 정산관리 페이지에 정산수수료안내 링크버튼 추가
woowacourse-teams · Sep 29, 2021 · 266cbd8 · 266cbd8
1 parent 606add2
commit 266cbd8
Show file tree

Hide file tree

Showing 11 changed files with 162 additions and 4 deletions.
diff --git a/client/main/src/App.tsx b/client/main/src/App.tsx
@@ -26,6 +26,7 @@ import { useWindowResize } from './utils/useWindowResize';
 import SettlementPage from './pages/Settlement/SettlementPage';
 import SettlementRegisterPage from './pages/Settlement/Register/SettlementRegisterPage';
 import MyPointPage from './pages/MyPoint/MyPointPage';
+import FeeGuide from './pages/FeeGuide/FeeGuide';
 
 export interface ParamTypes {
   oauthProvider: OAuthProvider;
@@ -118,6 +119,8 @@ const App = () => {
         <Route path="/refund/cert" component={RefundCertificationPage} />
         <Route path="/refund/confirm" component={RefundConfirmPage} />
 
+        <Route path="/fee-guide" component={FeeGuide} />
+
         <Redirect from="*" to="/" />
       </Switch>
       <Footer />

diff --git a/client/main/src/components/Footer/Footer.styles.tsx b/client/main/src/components/Footer/Footer.styles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { SIZE } from '../../constants/device';
 
+import { SIZE } from '../../constants/device';
 import PALETTE from '../../constants/palette';
 
 export const StyledFooter = styled.footer`

diff --git a/client/main/src/components/Footer/Footer.tsx b/client/main/src/components/Footer/Footer.tsx
@@ -11,8 +11,11 @@ const Footer = () => {
       </p>
       <p>
         [고객센터] 전화번호 070 - 8098 - 2158 | 이메일
-        <a href="mailto://thank.you.for.tyf@gmail.com"> thank.you.for.tyf@gmail.com</a> |
-        <Anchor to="/refund"> 도네이션 환불하기</Anchor>
+        <a href="mailto://thank.you.for.tyf@gmail.com"> thank.you.for.tyf@gmail.com</a>
+        &nbsp;|&nbsp;
+        <Anchor to="/refund">충전금액 환불</Anchor>
+        &nbsp;|&nbsp;
+        <Anchor to="/fee-guide">정산 수수료 안내</Anchor>
       </p>
       <p>© Thank You For ___ all rights reserved</p>
     </StyledFooter>

diff --git a/client/main/src/components/Help/HelpButton/HelpButton.styles.ts b/client/main/src/components/Help/HelpButton/HelpButton.styles.ts
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+import { DEVICE } from '../../../constants/device';
+import PALETTE from '../../../constants/palette';
+
+export const StyledHelpButton = styled.a`
+  position: sticky;
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  margin-left: auto;
+  margin-right: 2rem;
+
+  bottom: 3rem;
+  background-color: ${PALETTE.WHITE_400};
+  border-radius: 100%;
+  border: 3px solid ${PALETTE.GRAY_300};
+  cursor: pointer;
+  transition: transform 0.5s ease;
+
+  ::after {
+    content: '?';
+    width: 100%;
+    height: 100%;
+    color: ${PALETTE.GRAY_400};
+    font-weight: 700;
+    font-size: 1.75rem;
+    line-height: 2.5rem;
+    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  :hover {
+    transform: translateY(-0.375rem);
+    background-color: ${PALETTE.GRAY_100};
+  }
+
+  :active {
+    background-color: ${PALETTE.GRAY_200};
+  }
+
+  @media ${DEVICE.DESKTOP_LARGE} {
+    position: fixed;
+    right: 3rem;
+  }
+`;
diff --git a/client/main/src/components/Help/HelpButton/HelpButton.tsx b/client/main/src/components/Help/HelpButton/HelpButton.tsx
@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+import { StyledHelpButton } from './HelpButton.styles';
+
+const HelpButton = () => {
+  return (
+    <Link to="/fee-guide">
+      <StyledHelpButton />
+    </Link>
+  );
+};
+
+export default HelpButton;
diff --git a/client/main/src/pages/FeeGuide/FeeGuide.stories.tsx b/client/main/src/pages/FeeGuide/FeeGuide.stories.tsx
@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import FeeGuide from './FeeGuide';
+
+export default {
+  title: 'pages/FeeGuide',
+} as Meta;
+
+const Template: Story = (args) => <FeeGuide {...args} />;
+
+export const Default = Template.bind({});
diff --git a/client/main/src/pages/FeeGuide/FeeGuide.styles.ts b/client/main/src/pages/FeeGuide/FeeGuide.styles.ts
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+import Template from '../../components/@atom/Template/Template';
+import Kakaopay from '../../assets/icons/kakao-pay.svg';
+
+export const StyledTemplate = styled(Template)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: calc(100vh - 3.5rem);
+  justify-content: center;
+  max-width: 30rem;
+`;
+
+export const FeeTable = styled.table`
+  margin: 4rem 0;
+  text-align: center;
+  border-collapse: separate;
+  border-spacing: 1.5rem;
+  line-height: 1.25rem;
+
+  td {
+    vertical-align: middle;
+    padding-bottom: 0.5rem;
+  }
+`;
+
+export const KakaoIcon = styled.img.attrs({ src: Kakaopay, alt: 'kakaopay logo' })`
+  width: 3rem;
+  aspect-ratio: 71 / 29;
+  margin-top: 0.5rem;
+`;
diff --git a/client/main/src/pages/FeeGuide/FeeGuide.tsx b/client/main/src/pages/FeeGuide/FeeGuide.tsx
@@ -0,0 +1,42 @@
+import { useHistory } from 'react-router';
+import SubTitle from '../../components/@atom/SubTitle/SubTitle.styles';
+import Title from '../../components/@atom/Title/Title.styles';
+import OutlineButton from '../../components/@molecule/OutlineButton/OutlineButton.styles';
+import { StyledTemplate, FeeTable, KakaoIcon } from './FeeGuide.styles';
+
+const FeeGuide = () => {
+  const history = useHistory();
+
+  return (
+    <StyledTemplate>
+      <SubTitle>정산 시 수수료 안내</SubTitle>
+      <FeeTable>
+        <tbody>
+          <tr>
+            <td>원천세 등의 세금</td>
+            <td>3.3%</td>
+          </tr>
+          <tr>
+            <td>
+              결제대행사 수수료
+              <br />
+              <KakaoIcon />
+            </td>
+            <td>3.2%</td>
+          </tr>
+          <tr>
+            <td>
+              Thank You For ___ 수수료
+              <br />
+              (서버유지비 등 운영비)
+            </td>
+            <td>0.5%</td>
+          </tr>
+        </tbody>
+      </FeeTable>
+      <OutlineButton onClick={history.goBack}>돌아가기</OutlineButton>
+    </StyledTemplate>
+  );
+};
+
+export default FeeGuide;
diff --git a/client/main/src/pages/Main/Main.styles.ts b/client/main/src/pages/Main/Main.styles.ts
@@ -6,6 +6,10 @@ import Logo from '../../components/@molecule/Logo/Logo';
 import OutlineButton from '../../components/@molecule/OutlineButton/OutlineButton.styles';
 import { DEVICE } from '../../constants/device';
 import RightArrow from '../../assets/icons/right-arrow.svg';
+import IconButton from '../../components/@atom/IconButton/IconButton';
+import PALETTE from '../../constants/palette';
+import { Z_INDEX } from '../../constants/style';
+import { Link } from 'react-router-dom';
 
 export const MainTemplate = styled(Template)`
   padding: 5rem 0 6.25rem;

diff --git a/client/main/src/pages/Main/MainPage.tsx b/client/main/src/pages/Main/MainPage.tsx
@@ -1,6 +1,6 @@
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 
 import CreatorList from '../../components/Main/CreatorList/CreatorList';
 import Spinner from '../../components/Spinner/Spinner';
@@ -18,6 +18,7 @@ import HeroContentDesktop from '../../assets/images/hero-content-desktop.svg';
 import Logo from '../../components/@molecule/Logo/Logo';
 import MainImage from '../../assets/images/hero-content.svg';
 import Transition from '../../components/@atom/Transition/Transition.styles';
+import HelpButton from '../../components/Help/HelpButton/HelpButton';
 
 const MainPage = () => {
   const history = useHistory();
@@ -65,6 +66,7 @@ const MainPage = () => {
           </Transition>
         </section>
       )}
+      <HelpButton />
       <DownIcon />
     </MainTemplate>
   );

diff --git a/client/main/src/pages/Settlement/SettlementPage.tsx b/client/main/src/pages/Settlement/SettlementPage.tsx
@@ -1,6 +1,7 @@
 import { Suspense, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import Transition from '../../components/@atom/Transition/Transition.styles';
+import HelpButton from '../../components/Help/HelpButton/HelpButton';
 
 import SettlementInfo from '../../components/Settlement/Info/SettlementInfo';
 import SettlementRegisterForm from '../../components/Settlement/Register/SettlementRegisterForm';
@@ -39,6 +40,7 @@ const SettlementPage = () => {
             <Settlement />
           </Transition>
         </Suspense>
+        <HelpButton />
       </section>
     </StyledTemplate>
   );