diff --git a/HDesign/src/components/Flex/Flex.style.ts b/HDesign/src/components/Flex/Flex.style.ts index 7d2e526a7..672cf2dd6 100644 --- a/HDesign/src/components/Flex/Flex.style.ts +++ b/HDesign/src/components/Flex/Flex.style.ts @@ -14,6 +14,7 @@ export const flexStyle = ({ margin = '0', width = 'auto', height = 'auto', + minHeight, backgroundColor, theme, ...rest @@ -30,6 +31,7 @@ export const flexStyle = ({ margin, width, height, + minHeight, ...rest, backgroundColor: (() => { @@ -38,6 +40,8 @@ export const flexStyle = ({ return theme?.colors.white; case 'gray': return theme?.colors.grayContainer; + case 'lightGray': + return theme?.colors.lightGrayContainer; default: return 'none'; } diff --git a/HDesign/src/components/Flex/Flex.type.ts b/HDesign/src/components/Flex/Flex.type.ts index 22db11365..e70fb4c21 100644 --- a/HDesign/src/components/Flex/Flex.type.ts +++ b/HDesign/src/components/Flex/Flex.type.ts @@ -2,7 +2,7 @@ import {Theme} from '@theme/theme.type'; export type FlexDirectionType = 'row' | 'column' | 'rowReverse' | 'columnReverse'; export type FlexDirectionStrictType = 'row' | 'column' | 'row-reverse' | 'column-reverse'; -export type FlexBackgroundColor = 'gray' | 'white'; +export type FlexBackgroundColor = 'gray' | 'white' | 'lightGray'; export interface FlexProps { justifyContent?: 'flexStart' | 'center' | 'flexEnd' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly'; @@ -16,4 +16,5 @@ export interface FlexProps { height?: string; backgroundColor?: FlexBackgroundColor; theme?: Theme; + minHeight?: string; } diff --git a/HDesign/src/layouts/MainLayout.tsx b/HDesign/src/layouts/MainLayout.tsx index b64e3c546..22012fde8 100644 --- a/HDesign/src/layouts/MainLayout.tsx +++ b/HDesign/src/layouts/MainLayout.tsx @@ -2,7 +2,7 @@ import {PropsWithChildren} from 'react'; import {Flex} from '..'; -type MainLayoutBackground = 'white' | 'gray'; +type MainLayoutBackground = 'white' | 'gray' | 'lightGray'; interface MainLayoutProps extends PropsWithChildren { backgroundColor?: MainLayoutBackground; @@ -18,6 +18,7 @@ export function MainLayout({backgroundColor, children}: MainLayoutProps) { gap="1rem" width="100%" height="100%" + minHeight="100vh" > {children} diff --git a/client/src/GlobalStyle.ts b/client/src/GlobalStyle.ts index ecbfdef56..ab16de8e1 100644 --- a/client/src/GlobalStyle.ts +++ b/client/src/GlobalStyle.ts @@ -156,8 +156,5 @@ export const GlobalStyle = css` #root { display: flex; flex-direction: column; - height: 100%; - - background-color: #f1f0f5; } `; diff --git a/client/src/hooks/useSetBillInput.ts b/client/src/hooks/useSetBillInput.ts index 4f839602a..a14b2a481 100644 --- a/client/src/hooks/useSetBillInput.ts +++ b/client/src/hooks/useSetBillInput.ts @@ -52,6 +52,8 @@ const useSetBillInput = ({setIsAddEditableItem}: UseSetBillInputProps): UseSetBi }, }, ); + } else if (!isEmptyTitle && !isEmptyPrice) { + setIsAddEditableItem(false); } }; diff --git a/client/src/pages/CreateEventPage/CompleteCreateEventPage.tsx b/client/src/pages/CreateEventPage/CompleteCreateEventPage.tsx index 093d2a52a..f7549563f 100644 --- a/client/src/pages/CreateEventPage/CompleteCreateEventPage.tsx +++ b/client/src/pages/CreateEventPage/CompleteCreateEventPage.tsx @@ -21,7 +21,7 @@ const CompleteCreateEventPage = () => { const homePageUrl = getEventPageUrlByEnvironment(eventId ?? '', 'home'); return ( - + { }; return ( - <MainLayout> + <MainLayout backgroundColor="white"> <TopNav> <Back /> </TopNav> diff --git a/client/src/pages/CreateEventPage/SetEventPasswordPage.tsx b/client/src/pages/CreateEventPage/SetEventPasswordPage.tsx index 3cfe6a7ef..2b73f2ff2 100644 --- a/client/src/pages/CreateEventPage/SetEventPasswordPage.tsx +++ b/client/src/pages/CreateEventPage/SetEventPasswordPage.tsx @@ -10,7 +10,7 @@ const SetEventPasswordPage = () => { useSetEventPasswordPage(); return ( - <MainLayout> + <MainLayout backgroundColor="white"> <TopNav> <Back /> </TopNav> diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.style.ts b/client/src/pages/EventPage/AdminPage/AdminPage.style.ts index 1a711bbbd..cf6bb0042 100644 --- a/client/src/pages/EventPage/AdminPage/AdminPage.style.ts +++ b/client/src/pages/EventPage/AdminPage/AdminPage.style.ts @@ -5,7 +5,7 @@ export const receiptStyle = () => display: 'flex', flexDirection: 'column', gap: '1rem', - paddingBottom: '8.75rem', + paddingBottom: '2rem', }); export const titleAndListButtonContainerStyle = () => diff --git a/client/src/pages/EventPage/HomePage/HomePage.tsx b/client/src/pages/EventPage/HomePage/HomePage.tsx index 214526f39..72fc77cb9 100644 --- a/client/src/pages/EventPage/HomePage/HomePage.tsx +++ b/client/src/pages/EventPage/HomePage/HomePage.tsx @@ -13,7 +13,7 @@ const HomePage = () => { const {totalExpenseAmount} = useTotalExpenseAmountStore(); return ( - <div> + <div style={{paddingBottom: '2rem'}}> <Title title={eventName} price={totalExpenseAmount} /> <Tabs tabsContainerStyle={{gap: '1rem'}}> <Tab label="전체 지출 내역" content={<StepList />} />