Merge pull request #282 from KakaoFunding/feat/242

Feat/242

src/components/ui/Tabs/index.module.scss

@@ -62,3 +62,22 @@
     }
   }
 }
+
+.funding_history {
+  .wrapper_tab {
+    width: 50%;
+    text-align: center;
+    padding: 14px 0;
+    line-height: 22px;
+    font-weight: 400;
+
+    &.on {
+      font-weight: 700;
+      border-bottom: 4px solid #000;
+
+      .txt_name {
+        color: #000;
+      }
+    }
+  }
+}

src/components/ui/Tabs/index.tsx

@@ -8,7 +8,7 @@ import styles from './index.module.scss';
 type TabProps = {
   initialTabId: Tab['id'];
   tabs: Tab[];
-  mode: 'product_list' | 'product_detail';
+  mode: 'product_list' | 'product_detail' | 'funding_history';
 };
 
 const Tabs = ({ initialTabId = 0, tabs, mode }: TabProps) => {

src/pages/MyPage/FundingHistory/index.module.scss

@@ -0,0 +1,9 @@
+@import 'styles/mixins.module';
+
+.title {
+  @include font(28px, 800);
+
+  margin: 40px 0 30px;
+  line-height: 38px;
+  white-space: pre-line;
+}

src/pages/MyPage/FundingHistory/index.tsx

@@ -1,5 +1,30 @@
+import Tabs from 'components/ui/Tabs';
+
+import { Tab } from 'types/tab';
+
+import styles from './index.module.scss';
+
+const userName = '보경';
 const FundingHistory = () => {
-  return <>펀딩내역</>;
+  const tabs: Tab[] = [
+    {
+      id: 0,
+      name: '내가 등록한 펀딩',
+      content: <>내가 등록한 펀딩</>,
+    },
+    {
+      id: 1,
+      name: '내가 기여한 펀딩',
+      content: <>내가 기여한 펀딩</>,
+    },
+  ];
+
+  return (
+    <>
+      <div className={styles.title}>{`${userName}님의 \n펀딩내역`}</div>
+      <Tabs initialTabId={0} mode="funding_history" tabs={tabs} />
+    </>
+  );
 };
 
 export default FundingHistory;