Merge branch 'develop-frontend' into feat/#622

frontend/src/common/reset.style.ts

@@ -111,6 +111,7 @@ const reset = css`
 
   body {
     position: relative;
+    overflow-y: scroll;
     ${layout.default}
     margin: 0 auto;
     line-height: 1;

frontend/src/layouts/DefaultPageLayout/DefaultPageLayout.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+import { useTheme } from '@emotion/react';
+import FixedCreateButtonWrapper from '@_layouts/components/FixedCreationButtonWrapper/FixedCreateButtonWrapper';
+import DefaultPageMain from './DefaultPageMain/DefaultPageMain';
+import * as S from './DefaultpageLayout.style';
+import DoubleTriHeader from '@_layouts/components/DoubleTriHeader/DoubleTriHeader';
+import TriSectionHeader from '@_layouts/components/TriSectionHeader/TriSectionHeader';
+
+function DefaultPageLayout(props: PropsWithChildren) {
+  const { children } = props;
+
+  const theme = useTheme();
+
+  return <div css={S.containerStyle({ theme })}>{children}</div>;
+}
+
+DefaultPageLayout.DoubleTriHeader = DoubleTriHeader;
+DefaultPageLayout.TriHeader = TriSectionHeader;
+DefaultPageLayout.Main = DefaultPageMain;
+DefaultPageLayout.ListPageFixedButtonWrapper = FixedCreateButtonWrapper;
+
+export default DefaultPageLayout;

frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.tsx → frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.tsx

@@ -1,8 +1,8 @@
-import * as S from './HomeMain.style';
+import * as S from './DefaultPageMain.style';
 
 import { PropsWithChildren } from 'react';
 
-export default function HomeMain(props: PropsWithChildren) {
+export default function DefaultPageMain(props: PropsWithChildren) {
   const { children } = props;
 
   return <main css={S.mainStyle}>{children}</main>;

frontend/src/layouts/ListLayout/ListLayout.style.ts → frontend/src/layouts/DefaultPageLayout/DefaultpageLayout.style.ts

@@ -1,8 +1,7 @@
 import { NAVIGATION_BAR_HEIGHT } from '@_constants/styles';
 import { css, Theme } from '@emotion/react';
 
-export const listLayout = ({ theme }: { theme: Theme }) => css`
+export const containerStyle = ({ theme }: { theme: Theme }) => css`
   min-height: calc(100vh - ${NAVIGATION_BAR_HEIGHT});
-  margin-bottom: ${NAVIGATION_BAR_HEIGHT};
   background-color: ${theme.colorPalette.grey[100]};
 `;

frontend/src/layouts/SelectLayout/SelectLayout.tsx

@@ -2,8 +2,8 @@ import * as S from './SelectLayout.style';
 
 import { PropsWithChildren } from 'react';
 import SelectBottomWrapper from './SelectBottomWrapper/SelectBottomWrapper';
-import SelectContentContainer from './SelectContentContainer/SelectContentContainer';
 import StickyTriSectionHeader from '@_layouts/components/StickyTriSectionHeader/StickyTriSectionHeader';
+import ListContent from '@_layouts/components/ListContent/ListContent';
 
 function SelectLayout(props: PropsWithChildren) {
   const { children } = props;
@@ -12,7 +12,7 @@ function SelectLayout(props: PropsWithChildren) {
 }
 
 SelectLayout.Header = StickyTriSectionHeader;
-SelectLayout.ContentContainer = SelectContentContainer;
+SelectLayout.ContentContainer = ListContent;
 SelectLayout.BottomButtonWrapper = SelectBottomWrapper;
 
 export default SelectLayout;

frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.style.ts → frontend/src/layouts/components/DoubleTriHeader/DoubleTriHeader.style.ts

@@ -2,7 +2,7 @@ import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
 import { css } from '@emotion/react';
 
 export const headerStyle = css`
-  position: fixed;
+  position: sticky;
   top: 0;
 
   display: flex;

frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.tsx → frontend/src/layouts/components/DoubleTriHeader/DoubleTriHeader.tsx

@@ -1,11 +1,11 @@
 import { PropsWithChildren } from 'react';
-import * as S from './HomeHeader.style';
+import * as S from './DoubleTriHeader.style';
 import StickyTriSectionHeader from '@_layouts/components/StickyTriSectionHeader/StickyTriSectionHeader';
 
-export default function HomeHeader(props: PropsWithChildren) {
+export default function DoubleTriHeader(props: PropsWithChildren) {
   const { children } = props;
 
   return <header css={S.headerStyle}>{children}</header>;
 }
 
-HomeHeader.Top = StickyTriSectionHeader;
+DoubleTriHeader.Top = StickyTriSectionHeader;

frontend/src/layouts/PleaseLayout/PleaseFixedButtonWrapper/PleaseFixedButtonWrapper.tsx → frontend/src/layouts/components/FixedBottomButtonWrapper/FixedBottomButtonWrapper.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import * as S from './PleaseFixedButtonWrapper.style';
+import * as S from './FixedBottomButtonWrapper.style';
 
-export default function PleaseFixedButtonWrapper(props: PropsWithChildren) {
+export default function FixedBottomButtonWrapper(props: PropsWithChildren) {
   const { children } = props;
 
   return <div css={S.fixedWrapperStyle}>{children}</div>;

frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.tsx → frontend/src/layouts/components/FixedCreationButtonWrapper/FixedCreateButtonWrapper.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import * as S from './HomeFixedButtonWrapper.style';
+import * as S from './FixedCreationButtonWrapper.style';
 
-export default function HomeFixedButtonWrapper(props: PropsWithChildren) {
+export default function FixedCreateButtonWrapper(props: PropsWithChildren) {
   const { children } = props;
 
   return <div css={S.fixedWrapperStyle}>{children}</div>;

frontend/src/pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts → frontend/src/layouts/components/ListContent/ListContent.style.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-export const cardListSection = css`
+export const ListSection = css`
   display: flex;
   flex-direction: column;
   gap: 1.2rem;

frontend/src/layouts/components/ListContent/ListContent.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import * as S from './ListContent.style';
+
+export default function ListContent(props: PropsWithChildren) {
+  const { children } = props;
+
+  return <div css={S.ListSection}>{children}</div>;
+}

frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.style.ts

@@ -1,12 +1,10 @@
 import { NAVIGATION_BAR_HEIGHT } from '@_constants/styles';
-import POLICES from '@_constants/poclies';
+
 import { css } from '@emotion/react';
 
 export const navigationBarWrapper = css`
-  position: fixed;
-  z-index: ${POLICES.footerZIndex};
+  position: sticky;
   bottom: 0;
-
   width: 100%;
   height: ${NAVIGATION_BAR_HEIGHT};
 `;