From 53779e089a917ea67b1c0fd6dd7db4307c7f0b87 Mon Sep 17 00:00:00 2001 From: crolvlee Date: Wed, 10 Jul 2024 17:54:53 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20GNB3=20=EA=B7=B8=EB=A3=B9=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94,=20=ED=83=AD?= =?UTF-8?q?=EB=B0=94=20CSS=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/group/Group.jsx | 5 ++++- src/styles/global-style.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/group/Group.jsx b/src/pages/group/Group.jsx index eecf861..7245e58 100644 --- a/src/pages/group/Group.jsx +++ b/src/pages/group/Group.jsx @@ -10,7 +10,10 @@ const GroupContainer = styled.div` const FixedContainer = styled.div` position: fixed; top: 0; - width: 100%; + width: 100%; // 너비를 100%로 설정 + max-width: 649px; // 최대 너비 제한 + // box-sizing: border-box; + // overflow: hidden; // 넘치는 내용 숨김 `; function GroupLayout() { diff --git a/src/styles/global-style.js b/src/styles/global-style.js index ae2c85d..f342e4c 100644 --- a/src/styles/global-style.js +++ b/src/styles/global-style.js @@ -11,11 +11,12 @@ html, body { margin: 0; padding: 0; display: flex; - flex-direction: row; + // flex-direction: row; background-color: #F2F4F7; justify-content: center; font-family: 'Pretendard'; } + #root { width: 100%; From 9b80f15f5d779633da2f599e2a3ebc8599dc4347 Mon Sep 17 00:00:00 2001 From: crolvlee Date: Sat, 13 Jul 2024 19:33:26 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A3=B9=20=EA=B3=B5?= =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MainLayout.jsx | 12 +- src/pages/group/BasicInfo.jsx | 6 +- src/pages/group/Fee.jsx | 4 +- src/pages/group/Group.jsx | 33 +++--- src/pages/group/Notice.jsx | 106 +++++++----------- src/pages/group/Schedule.jsx | 4 +- .../group/group_components}/GroupHeader.jsx | 0 .../group/group_components}/GroupTabBar.jsx | 0 .../group/group_components/NoticeItem.jsx | 47 ++++++++ 9 files changed, 118 insertions(+), 94 deletions(-) rename src/{components/group => pages/group/group_components}/GroupHeader.jsx (100%) rename src/{components/group => pages/group/group_components}/GroupTabBar.jsx (100%) create mode 100644 src/pages/group/group_components/NoticeItem.jsx diff --git a/src/components/MainLayout.jsx b/src/components/MainLayout.jsx index 987e9cd..cfa9609 100644 --- a/src/components/MainLayout.jsx +++ b/src/components/MainLayout.jsx @@ -2,11 +2,6 @@ import React from 'react'; import MainNavigationBar from './MainNavigationBar'; import styled from 'styled-components'; -const Content = styled.div` - flex: 1; - overflow: auto; -`; - const LayoutContainer = styled.div` display: flex; flex-direction: column; @@ -15,6 +10,11 @@ const LayoutContainer = styled.div` background-color: white; `; +const Content = styled.div` + flex: 1; + overflow: auto; +`; + const MainLayout = ({ children, showMainNav }) => { return ( @@ -26,4 +26,4 @@ const MainLayout = ({ children, showMainNav }) => { ); }; -export default MainLayout; +export default MainLayout; \ No newline at end of file diff --git a/src/pages/group/BasicInfo.jsx b/src/pages/group/BasicInfo.jsx index 06f08d2..d5bf73f 100644 --- a/src/pages/group/BasicInfo.jsx +++ b/src/pages/group/BasicInfo.jsx @@ -1,9 +1,7 @@ -import React from 'react'; - -function BasicInfo() { +const BasicInfo = () => { return (
-

기본 정보

+

기본정보

); } diff --git a/src/pages/group/Fee.jsx b/src/pages/group/Fee.jsx index 7c7f174..85ad53c 100644 --- a/src/pages/group/Fee.jsx +++ b/src/pages/group/Fee.jsx @@ -1,6 +1,4 @@ -import React from 'react'; - -function Fee() { +const Fee = () => { return (

회비

diff --git a/src/pages/group/Group.jsx b/src/pages/group/Group.jsx index 7245e58..b0f57c7 100644 --- a/src/pages/group/Group.jsx +++ b/src/pages/group/Group.jsx @@ -1,33 +1,36 @@ import styled from 'styled-components'; import { Outlet } from 'react-router-dom'; -import GroupHeader from '../../components/group/GroupHeader'; -import GroupTabBar from '../../components/group/GroupTabBar'; - -const GroupContainer = styled.div` - padding-top: 92px; // 헤더와 탭바의 높이를 고려한 여백 -`; +import GroupHeader from './group_components/GroupHeader'; +import GroupTabBar from './group_components/GroupTabBar'; const FixedContainer = styled.div` - position: fixed; + position: sticky; top: 0; - width: 100%; // 너비를 100%로 설정 - max-width: 649px; // 최대 너비 제한 - // box-sizing: border-box; - // overflow: hidden; // 넘치는 내용 숨김 + left: 0; + width: 100%; + background-color: white; + z-index: 1000; +`; + +const ContentContainer = styled.div` + padding: 0 20px; + overflow: hidden; + display: flex; + flex-direction: column; `; -function GroupLayout() { +const Group = () => { return ( <> - + - + ); } -export default GroupLayout; +export default Group; diff --git a/src/pages/group/Notice.jsx b/src/pages/group/Notice.jsx index 12b5d5e..3e0e7f3 100644 --- a/src/pages/group/Notice.jsx +++ b/src/pages/group/Notice.jsx @@ -1,69 +1,49 @@ -import React from 'react'; +import styled from 'styled-components'; +import NoticeItem from './group_components/NoticeItem'; -function Notice() { - return ( -
-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

-

공지

+const Container = styled.div` + background-color: white; + width: 100%; + margin: 0 auto; + position: relative; +`; +// TODO: 플로팅버튼 위치 조정해줘야 함 +const FloatingButton = styled.button` + position: fixed; + bottom: 84px; + right: 20px; + width: 70px; + height: 70px; + border-radius: 50%; + background-color: white; + color: black; + font-size: 32px; + border: none; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 1000; +`; -
+const Notice = () => { + return ( + + {/* TODO: API 연결 필요 */} + + + + + + + + + + + + + ); } diff --git a/src/pages/group/Schedule.jsx b/src/pages/group/Schedule.jsx index 5b58c27..dfaf94b 100644 --- a/src/pages/group/Schedule.jsx +++ b/src/pages/group/Schedule.jsx @@ -1,6 +1,4 @@ -import React from 'react'; - -function Schedule() { +const Schedule = () => { return (

일정

diff --git a/src/components/group/GroupHeader.jsx b/src/pages/group/group_components/GroupHeader.jsx similarity index 100% rename from src/components/group/GroupHeader.jsx rename to src/pages/group/group_components/GroupHeader.jsx diff --git a/src/components/group/GroupTabBar.jsx b/src/pages/group/group_components/GroupTabBar.jsx similarity index 100% rename from src/components/group/GroupTabBar.jsx rename to src/pages/group/group_components/GroupTabBar.jsx diff --git a/src/pages/group/group_components/NoticeItem.jsx b/src/pages/group/group_components/NoticeItem.jsx new file mode 100644 index 0000000..61fa0d9 --- /dev/null +++ b/src/pages/group/group_components/NoticeItem.jsx @@ -0,0 +1,47 @@ +import styled from 'styled-components'; + +const Container = styled.div` + border-bottom: 1px solid rgba(221, 221, 221, 0.5); /* 50% 투명도 */ + padding: 16px 0; +`; + +const NoticeTitle = styled.div` + font-size: 16px; + font-weight: bold; + color: ${({ theme }) => theme.colors.neutral[700]}; + display: flex; + align-items: center; +`; + +const NoticeDate = styled.div` + font-size: 12px; + margin-top: 10px; + color: ${({ theme }) => theme.colors.neutral[400]}; +`; + +const NewTag = styled.div` + background-color: ${({ theme }) => theme.colors.main[500]}; + color: #fff; + width: 12px; + height: 12px; + padding: 2px 2px; + font-size: 10px; + margin-left: 8px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; +`; + +const NoticeItem = ({ title, date, isNew }) => { + return ( + + + {title} {isNew && N} + + {date} + + ); +} + +export default NoticeItem; From d2988a14347992101654b369bc3c7ee64036f4db Mon Sep 17 00:00:00 2001 From: crolvlee Date: Sat, 13 Jul 2024 21:24:36 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A3=B9=20=ED=9A=8C?= =?UTF-8?q?=EB=B9=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/group/Fee.jsx | 83 ++++++++++++++++++- src/pages/group/Group.jsx | 2 +- src/pages/group/Notice.jsx | 5 +- .../group/group_components/ExpenseItem.jsx | 40 +++++++++ .../group/group_components/FeeInfoCard.jsx | 61 ++++++++++++++ .../group/group_components/GroupHeader.jsx | 6 +- .../group/group_components/GroupTabBar.jsx | 6 +- .../group/group_components/NoticeItem.jsx | 3 +- 8 files changed, 193 insertions(+), 13 deletions(-) create mode 100644 src/pages/group/group_components/ExpenseItem.jsx create mode 100644 src/pages/group/group_components/FeeInfoCard.jsx diff --git a/src/pages/group/Fee.jsx b/src/pages/group/Fee.jsx index 85ad53c..eeb9698 100644 --- a/src/pages/group/Fee.jsx +++ b/src/pages/group/Fee.jsx @@ -1,8 +1,85 @@ +import React from 'react'; +import styled from 'styled-components'; +import FeeInfoCard from './group_components/FeeInfoCard'; +import ExpenseItem from './group_components/ExpenseItem'; + +const Container = styled.div` + padding: 20px; + background-color: ${({ theme }) => theme.colors.neutral[100]}; + height: 100vh; +`; + +const CardContainer = styled.div` + padding: 16px; + background-color: ${({ theme }) => theme.colors.main[500]}; + border-radius: 20px 20px 0 0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +`; + +const FeeText = styled.div` + color: white; + padding: 72px 28px 40px; + text-align: center; + font-size: 32px; + font-weight: bold; + border-radius: 20px 20px 0 0; +`; + +const RegisterButton = styled.button` + width: 100%; + padding: 12px; + color: white; + border: none; + border-radius: 20px; + font-size: 16px; + font-weight: 500; + background-color: ${({ theme }) => theme.colors.main[500]}; + color: ${({ theme }) => theme.colors.main[200]}; + cursor: pointer; + margin: 12px 0; +`; + +const ExpenseContainer = styled.div` + background-color: white; + padding: 16px; + border-radius: 0 0 20px 20px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +`; + +const ExpenseContainerTitle = styled.h3` + color: ${({ theme }) => theme.colors.neutral[400]};; + font-size: 16px; + font-weight: 500; + margin-bottom: 16px; +`; + const Fee = () => { return ( -
-

회비

-
+ + + 1,023,130원 + {}} + /> + {}} + /> + 회비 등록하기 + + + + 회비 사용 내역 + + + + + + ); } diff --git a/src/pages/group/Group.jsx b/src/pages/group/Group.jsx index b0f57c7..e1eff5a 100644 --- a/src/pages/group/Group.jsx +++ b/src/pages/group/Group.jsx @@ -13,10 +13,10 @@ const FixedContainer = styled.div` `; const ContentContainer = styled.div` - padding: 0 20px; overflow: hidden; display: flex; flex-direction: column; + height: 100vh; `; const Group = () => { diff --git a/src/pages/group/Notice.jsx b/src/pages/group/Notice.jsx index 3e0e7f3..423b0a4 100644 --- a/src/pages/group/Notice.jsx +++ b/src/pages/group/Notice.jsx @@ -2,9 +2,10 @@ import styled from 'styled-components'; import NoticeItem from './group_components/NoticeItem'; const Container = styled.div` - background-color: white; + background-color: ${({ theme }) => theme.colors.neutral[100]}; width: 100%; - margin: 0 auto; + margin; 0 auto; + height: 100vh; position: relative; `; diff --git a/src/pages/group/group_components/ExpenseItem.jsx b/src/pages/group/group_components/ExpenseItem.jsx new file mode 100644 index 0000000..6e24e83 --- /dev/null +++ b/src/pages/group/group_components/ExpenseItem.jsx @@ -0,0 +1,40 @@ +import styled from 'styled-components'; + +const Container = styled.div` + display: flex; + padding: 12px 0; +// border-bottom: 1px solid #ddd; + align-items: center; + &:last-child { + border-bottom: none; + } +`; + +const ExpenseDate = styled.div` + font-size: 16px; + color: ${({ theme }) => theme.colors.neutral[800]}; +`; + +const ExpenseDescription = styled.div` + font-size: 16px; + margin-left: 16px; + color: ${({ theme }) => theme.colors.neutral[800]}; + flex: 1; +`; + +const ExpenseAmount = styled.div` + font-size: 18px; + font-weight: 600; + color: ${({ theme }) => theme.colors.main[500]}; + margin-left: auto; +`; + +const ExpenseItem = ({ date, description, amount }) => ( + + {date} + {description} + {amount} + +); + +export default ExpenseItem; diff --git a/src/pages/group/group_components/FeeInfoCard.jsx b/src/pages/group/group_components/FeeInfoCard.jsx new file mode 100644 index 0000000..e0a3f5d --- /dev/null +++ b/src/pages/group/group_components/FeeInfoCard.jsx @@ -0,0 +1,61 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + margin: 4px 0; + padding: 12px 16px; + background-color: white; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + position: relative; +`; + +const FeeInfoTextContainer = styled.div` + display: flex; + align-items: center; + flex: 1; + font-size: 16px; + color: ${({ theme }) => theme.colors.neutral[700]}; + position: relative; +`; + +const FeeInfoText = styled.div` + font-weight: 600; + white-space: nowrap; +`; + +const FeeInfoAmount = styled.div` + font-weight: 500; + white-space: nowrap; + position: absolute; + right: 76px; +`; + +const FeeInfoDate = styled.div` + font-weight: 500; + white-space: nowrap; + position: absolute; + right: 12px; +`; + +const FeeInfoButton = styled.div` + background-color: pink; + width: 24px; + height: 24px; +`; + +const FeeInfoCard = ({ label, amount, dueDate, onClick }) => ( + + + {label} + {amount} + {dueDate} + + + +); + +export default FeeInfoCard; diff --git a/src/pages/group/group_components/GroupHeader.jsx b/src/pages/group/group_components/GroupHeader.jsx index 8754f02..a075e9b 100644 --- a/src/pages/group/group_components/GroupHeader.jsx +++ b/src/pages/group/group_components/GroupHeader.jsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -const HeaderContainer = styled.div` +const Container = styled.div` display: flex; align-items: center; padding: 10px 20px; @@ -25,10 +25,10 @@ const Title = styled.h1` function GroupHeader() { return ( - + 중앙가르드 - + ); } diff --git a/src/pages/group/group_components/GroupTabBar.jsx b/src/pages/group/group_components/GroupTabBar.jsx index 63be584..6af10ed 100644 --- a/src/pages/group/group_components/GroupTabBar.jsx +++ b/src/pages/group/group_components/GroupTabBar.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; import styled from 'styled-components'; -const TabNav = styled.nav` +const Container = styled.nav` display: flex; align-items: center; padding: 12px 20px; @@ -36,12 +36,12 @@ const TabItem = styled(NavLink)` function GroupTabBar() { return ( - + 기본 정보 일정 공지 회비 - + ); } diff --git a/src/pages/group/group_components/NoticeItem.jsx b/src/pages/group/group_components/NoticeItem.jsx index 61fa0d9..1d140a6 100644 --- a/src/pages/group/group_components/NoticeItem.jsx +++ b/src/pages/group/group_components/NoticeItem.jsx @@ -2,7 +2,8 @@ import styled from 'styled-components'; const Container = styled.div` border-bottom: 1px solid rgba(221, 221, 221, 0.5); /* 50% 투명도 */ - padding: 16px 0; + background-color: white; + padding: 16px 20px; `; const NoticeTitle = styled.div`