Merge pull request #6 from whatever-mentoring/feature/Mypage-components

feat: 마이페이지 서브메뉴 탭 컴포넌트 생성

src/App.tsx

@@ -1,7 +1,4 @@
-import { CommentListBox } from 'components/Mypage/CommentListBox';
-import { MyQnaListBox } from 'components/Mypage/MyQnaListBox';
-import { ScrapListBox } from 'components/Mypage/ScrapListBox';
-import { Waitingtab } from 'components/Mypage/WaitingTab';
+import { SubMenuBox } from 'components/Mypage/SubMenuBox';
 import React from 'react';
 
 function App() {
@@ -14,10 +11,21 @@ function App() {
         gap: 30,
       }}
     >
-      <Waitingtab />
-      <CommentListBox />
-      <ScrapListBox />
-      <MyQnaListBox />
+      <SubMenuBox count={5} icon="myQnaIcon">
+        내 질문
+      </SubMenuBox>
+      <SubMenuBox count={5} icon="myCommentIcon">
+        내 댓글
+      </SubMenuBox>
+      <SubMenuBox count={5} icon="myScrapIcon">
+        스크랩
+      </SubMenuBox>
+      <SubMenuBox count={-1} icon="newsLetterIcon">
+        뉴스레터 구독
+      </SubMenuBox>
+      <SubMenuBox count={-1} icon="logoutIcon">
+        로그아웃
+      </SubMenuBox>
     </div>
   );
 }

src/assets/common.ts

@@ -28,11 +28,12 @@ export const Column = styled.div<{
 export const MyPageBoxContainer = styled.div<{
   height?: string;
   padding?: string;
+  borderRadius?: number;
 }>`
   display: flex;
   width: 100%;
   height: ${({ height }) => (height ? height : 'fit-content')};
-  border-radius: 5px;
+  border-radius: ${({ borderRadius }) => (borderRadius ? borderRadius : 5)}px;
   padding: ${({ padding }) => (padding ? padding : 0)};
   background: ${Palette.White};
   box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1);

src/components/Mypage/SubMenuBox.tsx

@@ -0,0 +1,40 @@
+import { MyPageBoxContainer, Row } from 'assets/common';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+
+export const SubMenuBox = ({
+  children,
+  count,
+  icon,
+}: {
+  children: React.ReactNode;
+  count?: number;
+  icon: string;
+}) => {
+  return (
+    <MyPageBoxContainer borderRadius={10} height="75px" padding="25px 15px">
+      <Row
+        alignItems="center"
+        justifyContent="space-between"
+        style={{ width: '100%' }}
+      >
+        <Row gap={19}>
+          <img src={`/img/MypageSubmenuIcons/${icon}.svg`}></img>
+          <Typo.b1>{children}</Typo.b1>
+        </Row>
+        <Row gap={8}>
+          {count !== -1 ? (
+            <Row gap={3}>
+              <Typo.b2 color={Palette.Main}>{count}</Typo.b2>
+              <Typo.b2 color={Palette.Gray4}>개</Typo.b2>
+            </Row>
+          ) : (
+            <></>
+          )}
+
+          <img src="/img/arrow.svg" />
+        </Row>
+      </Row>
+    </MyPageBoxContainer>
+  );
+};