From 9fe70b980e7e63998758c627b194ada3f8384437 Mon Sep 17 00:00:00 2001 From: chaeyeonan Date: Thu, 14 Sep 2023 19:38:06 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20mypage=20=EB=A9=94=EC=9D=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20submenu=20tab=20box?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/img/arrow.svg | 9 +++++++++ public/img/newsletter.svg | 3 +++ src/App.tsx | 4 +++- src/assets/common.ts | 3 ++- src/components/Mypage/SubMenuBox.tsx | 27 +++++++++++++++++++++++++++ 5 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 public/img/arrow.svg create mode 100644 public/img/newsletter.svg create mode 100644 src/components/Mypage/SubMenuBox.tsx diff --git a/public/img/arrow.svg b/public/img/arrow.svg new file mode 100644 index 0000000..6640ab8 --- /dev/null +++ b/public/img/arrow.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/newsletter.svg b/public/img/newsletter.svg new file mode 100644 index 0000000..23f5f1a --- /dev/null +++ b/public/img/newsletter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/App.tsx b/src/App.tsx index 503be6a..0772b3f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import { CommentListBox } from 'components/Mypage/CommentListBox'; import { MyQnaListBox } from 'components/Mypage/MyQnaListBox'; import { ScrapListBox } from 'components/Mypage/ScrapListBox'; +import { SubMenuBox } from 'components/Mypage/SubMenuBox'; import { Waitingtab } from 'components/Mypage/WaitingTab'; import React from 'react'; @@ -15,9 +16,10 @@ function App() { }} > + - + ); } diff --git a/src/assets/common.ts b/src/assets/common.ts index 7ea64f7..ac818c2 100644 --- a/src/assets/common.ts +++ b/src/assets/common.ts @@ -16,11 +16,12 @@ export const Row = 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); diff --git a/src/components/Mypage/SubMenuBox.tsx b/src/components/Mypage/SubMenuBox.tsx new file mode 100644 index 0000000..82e329c --- /dev/null +++ b/src/components/Mypage/SubMenuBox.tsx @@ -0,0 +1,27 @@ +import { MyPageBoxContainer, Row } from 'assets/common'; +import { Palette } from 'styles/Palette'; +import Typo from 'styles/Typo'; + +export const SubMenuBox = () => { + return ( + + + + + 뉴스레터 구독 + + + + 5 + 개 + + + + + + ); +}; From 91119287c8535327c520825559a138f482465db3 Mon Sep 17 00:00:00 2001 From: chaeyeonan Date: Thu, 14 Sep 2023 20:50:15 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20mypage=20submenubox=20icon,=20count?= =?UTF-8?q?,=20=EB=A9=94=EB=89=B4=20props=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/img/MypageSubmenuIcons/logoutIcon.svg | 5 ++++ .../img/MypageSubmenuIcons/myCommentIcon.svg | 9 +++++++ public/img/MypageSubmenuIcons/myQnaIcon.svg | 8 ++++++ public/img/MypageSubmenuIcons/myScrapIcon.svg | 3 +++ .../newsLetterIcon.svg} | 0 src/App.tsx | 24 ++++++++++------- src/components/Mypage/SubMenuBox.tsx | 27 ++++++++++++++----- 7 files changed, 60 insertions(+), 16 deletions(-) create mode 100644 public/img/MypageSubmenuIcons/logoutIcon.svg create mode 100644 public/img/MypageSubmenuIcons/myCommentIcon.svg create mode 100644 public/img/MypageSubmenuIcons/myQnaIcon.svg create mode 100644 public/img/MypageSubmenuIcons/myScrapIcon.svg rename public/img/{newsletter.svg => MypageSubmenuIcons/newsLetterIcon.svg} (100%) diff --git a/public/img/MypageSubmenuIcons/logoutIcon.svg b/public/img/MypageSubmenuIcons/logoutIcon.svg new file mode 100644 index 0000000..f378141 --- /dev/null +++ b/public/img/MypageSubmenuIcons/logoutIcon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/img/MypageSubmenuIcons/myCommentIcon.svg b/public/img/MypageSubmenuIcons/myCommentIcon.svg new file mode 100644 index 0000000..db02fca --- /dev/null +++ b/public/img/MypageSubmenuIcons/myCommentIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/MypageSubmenuIcons/myQnaIcon.svg b/public/img/MypageSubmenuIcons/myQnaIcon.svg new file mode 100644 index 0000000..cdd3dbb --- /dev/null +++ b/public/img/MypageSubmenuIcons/myQnaIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/img/MypageSubmenuIcons/myScrapIcon.svg b/public/img/MypageSubmenuIcons/myScrapIcon.svg new file mode 100644 index 0000000..2dd6c10 --- /dev/null +++ b/public/img/MypageSubmenuIcons/myScrapIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/newsletter.svg b/public/img/MypageSubmenuIcons/newsLetterIcon.svg similarity index 100% rename from public/img/newsletter.svg rename to public/img/MypageSubmenuIcons/newsLetterIcon.svg diff --git a/src/App.tsx b/src/App.tsx index 0772b3f..641c3aa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,4 @@ -import { CommentListBox } from 'components/Mypage/CommentListBox'; -import { MyQnaListBox } from 'components/Mypage/MyQnaListBox'; -import { ScrapListBox } from 'components/Mypage/ScrapListBox'; import { SubMenuBox } from 'components/Mypage/SubMenuBox'; -import { Waitingtab } from 'components/Mypage/WaitingTab'; import React from 'react'; function App() { @@ -15,11 +11,21 @@ function App() { gap: 30, }} > - - - - - + + 내 질문 + + + 내 댓글 + + + 스크랩 + + + 뉴스레터 구독 + + + 로그아웃 + ); } diff --git a/src/components/Mypage/SubMenuBox.tsx b/src/components/Mypage/SubMenuBox.tsx index 82e329c..bef3f5c 100644 --- a/src/components/Mypage/SubMenuBox.tsx +++ b/src/components/Mypage/SubMenuBox.tsx @@ -2,7 +2,15 @@ import { MyPageBoxContainer, Row } from 'assets/common'; import { Palette } from 'styles/Palette'; import Typo from 'styles/Typo'; -export const SubMenuBox = () => { +export const SubMenuBox = ({ + children, + count, + icon, +}: { + children: React.ReactNode; + count?: number; + icon: string; +}) => { return ( { style={{ width: '100%' }} > - - 뉴스레터 구독 + + {children} - - 5 - 개 - + {count !== -1 ? ( + + {count} + 개 + + ) : ( + <> + )} +