diff --git a/frontend/src/common/assets/refresh.svg b/frontend/src/common/assets/refresh.svg index 6a9f30923..ebb7d37b3 100644 --- a/frontend/src/common/assets/refresh.svg +++ b/frontend/src/common/assets/refresh.svg @@ -1,4 +1,11 @@ - - + + + + + + + + + diff --git a/frontend/src/common/reset.style.ts b/frontend/src/common/reset.style.ts index ab4045a8b..975029632 100644 --- a/frontend/src/common/reset.style.ts +++ b/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; diff --git a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.stories.tsx b/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.stories.tsx deleted file mode 100644 index e4c3b6f11..000000000 --- a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import ChattingPreviewContainer from './ChattingPreviewContainer'; - -const meta: Meta = { - component: ChattingPreviewContainer, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: {}, -}; diff --git a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts b/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts deleted file mode 100644 index 0c9b383b5..000000000 --- a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Theme, css } from '@emotion/react'; - -export const Container = ({ theme }: { theme: Theme }) => css` - overflow-y: scroll; - display: flex; - flex-direction: column; - gap: 2rem; - align-items: center; - justify-content: flex-start; - - width: 100%; - padding: 28px 28px 130px; - - background-color: ${theme.colorPalette.grey[100]}; - - &::-webkit-scrollbar { - display: none; - } -`; diff --git a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.tsx b/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.tsx deleted file mode 100644 index d96dfb366..000000000 --- a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as S from './ChattingPreviewContainer.style'; - -import { PropsWithChildren } from 'react'; -import { useTheme } from '@emotion/react'; - -export default function ChattingPreviewContainer(props: PropsWithChildren) { - const { children } = props; - const theme = useTheme(); - - return
{children}
; -} diff --git a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.style.ts b/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.style.ts deleted file mode 100644 index 0dbbc0181..000000000 --- a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.style.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Theme, css } from '@emotion/react'; - -export const layoutStyle = ({ theme }: { theme: Theme }) => css` - overflow-y: scroll; - display: flex; - flex-direction: column; - - height: 100vh; - - background-color: ${theme.colorPalette.grey[100]}; - - &::-webkit-scrollbar { - display: none; - } -`; diff --git a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.tsx b/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.tsx deleted file mode 100644 index a4334a13c..000000000 --- a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as S from './ChattingPreviewLayout.style'; - -import ChattingPreviewContainer from './ChattingPreviewContainer/ChattingPreviewContainer'; -import { PropsWithChildren } from 'react'; -import StickyTriSectionHeader from '@_layouts/components/StickyTriSectionHeader/StickyTriSectionHeader'; -import { useTheme } from '@emotion/react'; - -function ChattingPreviewLayout(props: PropsWithChildren) { - const { children } = props; - const theme = useTheme(); - - return
{children}
; -} - -ChattingPreviewLayout.Header = StickyTriSectionHeader; -ChattingPreviewLayout.ContentContainer = ChattingPreviewContainer; - -export default ChattingPreviewLayout; diff --git a/frontend/src/layouts/DefaultPageLayout/DefaultPageLayout.tsx b/frontend/src/layouts/DefaultPageLayout/DefaultPageLayout.tsx new file mode 100644 index 000000000..5cbc34f13 --- /dev/null +++ b/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
{children}
; +} + +DefaultPageLayout.DoubleTriHeader = DoubleTriHeader; +DefaultPageLayout.TriHeader = TriSectionHeader; +DefaultPageLayout.Main = DefaultPageMain; +DefaultPageLayout.ListPageFixedButtonWrapper = FixedCreateButtonWrapper; + +export default DefaultPageLayout; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.style.ts b/frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.style.ts similarity index 100% rename from frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.style.ts rename to frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.style.ts diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.tsx b/frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.tsx similarity index 53% rename from frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.tsx rename to frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.tsx index 04e3fdb56..5534d086e 100644 --- a/frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.tsx +++ b/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
{children}
; diff --git a/frontend/src/layouts/ListLayout/ListLayout.style.ts b/frontend/src/layouts/DefaultPageLayout/DefaultpageLayout.style.ts similarity index 66% rename from frontend/src/layouts/ListLayout/ListLayout.style.ts rename to frontend/src/layouts/DefaultPageLayout/DefaultpageLayout.style.ts index d4eb07bd6..0ab7a8319 100644 --- a/frontend/src/layouts/ListLayout/ListLayout.style.ts +++ b/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]}; `; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts b/frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts deleted file mode 100644 index cd9a294da..000000000 --- a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NAVIGATION_BAR_HEIGHT } from '@_constants/styles'; -import { css, Theme } from '@emotion/react'; - -export const containerStyle = ({ theme }: { theme: Theme }) => css` - min-height: calc(100vh - ${NAVIGATION_BAR_HEIGHT} - 5.6rem); - margin-top: 9.6rem; - margin-bottom: ${NAVIGATION_BAR_HEIGHT}; - background-color: ${theme.colorPalette.grey[100]}; -`; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx b/frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx deleted file mode 100644 index 34d6f9d4c..000000000 --- a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as S from './HomeLayout.style'; - -import HomeFixedButtonWrapper from './HomeFixedButtonWrapper/HomeFixedButtonWrapper'; -import HomeHeader from './HomeHeader/HomeHeader'; -import HomeMain from './HomeMain/HomeMain'; -import { PropsWithChildren } from 'react'; -import { useTheme } from '@emotion/react'; - -function HomeLayout(props: PropsWithChildren) { - const { children } = props; - - const theme = useTheme(); - - return
{children}
; -} - -HomeLayout.Header = HomeHeader; -HomeLayout.Main = HomeMain; -HomeLayout.HomeFixedButtonWrapper = HomeFixedButtonWrapper; - -export default HomeLayout; diff --git a/frontend/src/layouts/ListLayout/ListLayout.tsx b/frontend/src/layouts/ListLayout/ListLayout.tsx deleted file mode 100644 index 8d93f0073..000000000 --- a/frontend/src/layouts/ListLayout/ListLayout.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import FixedButtonWrapper from '@_layouts/components/FixedButtonWrapper/FixedButtonWrapper'; -import StickyTriSectionHeader from '@_layouts/components/StickyTriSectionHeader/StickyTriSectionHeader'; -import { PropsWithChildren } from 'react'; -import ListMain from './ListMain/ListMain'; -import * as S from './ListLayout.style'; -import { useTheme } from '@emotion/react'; - -function ListLayout(props: PropsWithChildren) { - const { children } = props; - - const theme = useTheme(); - - return
{children}
; -} - -ListLayout.Header = StickyTriSectionHeader; -ListLayout.Main = ListMain; -ListLayout.PlusButtonWrapper = FixedButtonWrapper; - -export default ListLayout; diff --git a/frontend/src/layouts/ListLayout/ListMain/ListMain.style.ts b/frontend/src/layouts/ListLayout/ListMain/ListMain.style.ts deleted file mode 100644 index 1055fce91..000000000 --- a/frontend/src/layouts/ListLayout/ListMain/ListMain.style.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { css } from '@emotion/react'; - -export const main = () => css` - padding: 16px 22px 80px; -`; diff --git a/frontend/src/layouts/ListLayout/ListMain/ListMain.tsx b/frontend/src/layouts/ListLayout/ListMain/ListMain.tsx deleted file mode 100644 index 21bcff97b..000000000 --- a/frontend/src/layouts/ListLayout/ListMain/ListMain.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { PropsWithChildren } from 'react'; -import * as S from './ListMain.style'; - -export default function ListMain(props: PropsWithChildren) { - const { children } = props; - - return
{children}
; -} diff --git a/frontend/src/layouts/PleaseLayout/PleaseHeader/PleaseHeader.style.ts b/frontend/src/layouts/PleaseLayout/PleaseHeader/PleaseHeader.style.ts deleted file mode 100644 index 85d0edc44..000000000 --- a/frontend/src/layouts/PleaseLayout/PleaseHeader/PleaseHeader.style.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { css, Theme } from '@emotion/react'; - -export const headerStyle = css` - position: fixed; - top: 0; - - width: 100%; - max-width: 600px; - padding: 14px 22px; - - background-color: white; -`; - -export const logoStyle = (props: { theme: Theme }) => css` - ${props.theme.typography.h5} -`; diff --git a/frontend/src/layouts/PleaseLayout/PleaseHeader/PleaseHeader.tsx b/frontend/src/layouts/PleaseLayout/PleaseHeader/PleaseHeader.tsx deleted file mode 100644 index 57b138e71..000000000 --- a/frontend/src/layouts/PleaseLayout/PleaseHeader/PleaseHeader.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { PropsWithChildren } from 'react'; -import * as S from './PleaseHeader.style'; -import { useTheme } from '@emotion/react'; - -export default function PleaseHeader(props: PropsWithChildren) { - const { children } = props; - const theme = useTheme(); - - return ( -
-

{children}

-
- ); -} diff --git a/frontend/src/layouts/PleaseLayout/PleaseLayout.style.ts b/frontend/src/layouts/PleaseLayout/PleaseLayout.style.ts deleted file mode 100644 index 7505c3c83..000000000 --- a/frontend/src/layouts/PleaseLayout/PleaseLayout.style.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NAVIGATION_BAR_HEIGHT } from '@_constants/styles'; -import { css, Theme } from '@emotion/react'; - -export const containerStyle = ({ theme }: { theme: Theme }) => css` - min-height: calc(100vh - ${NAVIGATION_BAR_HEIGHT} - 5.6rem); - margin-top: 5.6rem; - margin-bottom: ${NAVIGATION_BAR_HEIGHT}; - background-color: ${theme.colorPalette.grey[100]}; -`; diff --git a/frontend/src/layouts/PleaseLayout/PleaseLayout.tsx b/frontend/src/layouts/PleaseLayout/PleaseLayout.tsx deleted file mode 100644 index ec7a74e09..000000000 --- a/frontend/src/layouts/PleaseLayout/PleaseLayout.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { PropsWithChildren } from 'react'; -import PleaseMain from './PleaseMain/PleaseMain'; -import PleaseFixedButtonWrapper from './PleaseFixedButtonWrapper/PleaseFixedButtonWrapper'; -import * as S from './PleaseLayout.style'; -import { useTheme } from '@emotion/react'; -import StickyTriSectionHeader from '@_layouts/components/StickyTriSectionHeader/StickyTriSectionHeader'; - -function PleaseLayout(props: PropsWithChildren) { - const { children } = props; - - const theme = useTheme(); - - return
{children}
; -} - -PleaseLayout.Header = StickyTriSectionHeader; -PleaseLayout.Main = PleaseMain; -PleaseLayout.HomeFixedButtonWrapper = PleaseFixedButtonWrapper; - -export default PleaseLayout; diff --git a/frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.style.ts b/frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.style.ts deleted file mode 100644 index a2272d79d..000000000 --- a/frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.style.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { css } from '@emotion/react'; - -export const mainStyle = () => css` - padding: 16px 22px 80px; -`; diff --git a/frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.tsx b/frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.tsx deleted file mode 100644 index dc6f122ee..000000000 --- a/frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import * as S from './PleaseMain.style'; - -import { PropsWithChildren } from 'react'; - -export default function PleaseMain(props: PropsWithChildren) { - const { children } = props; - - return
{children}
; -} diff --git a/frontend/src/layouts/SelectLayout/SelectLayout.tsx b/frontend/src/layouts/SelectLayout/SelectLayout.tsx index f2b5a4e24..f1fcb0190 100644 --- a/frontend/src/layouts/SelectLayout/SelectLayout.tsx +++ b/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; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.style.ts b/frontend/src/layouts/components/DoubleTriHeader/DoubleTriHeader.style.ts similarity index 93% rename from frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.style.ts rename to frontend/src/layouts/components/DoubleTriHeader/DoubleTriHeader.style.ts index 1368155e1..64895e32a 100644 --- a/frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.style.ts +++ b/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; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.tsx b/frontend/src/layouts/components/DoubleTriHeader/DoubleTriHeader.tsx similarity index 60% rename from frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.tsx rename to frontend/src/layouts/components/DoubleTriHeader/DoubleTriHeader.tsx index 21b062c59..3d36133e4 100644 --- a/frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.tsx +++ b/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
{children}
; } -HomeHeader.Top = StickyTriSectionHeader; +DoubleTriHeader.Top = StickyTriSectionHeader; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.style.ts b/frontend/src/layouts/components/FixedBottomButtonWrapper/FixedBottomButtonWrapper.style.ts similarity index 100% rename from frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.style.ts rename to frontend/src/layouts/components/FixedBottomButtonWrapper/FixedBottomButtonWrapper.style.ts diff --git a/frontend/src/layouts/PleaseLayout/PleaseFixedButtonWrapper/PleaseFixedButtonWrapper.tsx b/frontend/src/layouts/components/FixedBottomButtonWrapper/FixedBottomButtonWrapper.tsx similarity index 55% rename from frontend/src/layouts/PleaseLayout/PleaseFixedButtonWrapper/PleaseFixedButtonWrapper.tsx rename to frontend/src/layouts/components/FixedBottomButtonWrapper/FixedBottomButtonWrapper.tsx index d868701e4..4ac372d5a 100644 --- a/frontend/src/layouts/PleaseLayout/PleaseFixedButtonWrapper/PleaseFixedButtonWrapper.tsx +++ b/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
{children}
; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.tsx b/frontend/src/layouts/components/FixedCreationButtonWrapper/FixedCreateButtonWrapper.tsx similarity index 50% rename from frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.tsx rename to frontend/src/layouts/components/FixedCreationButtonWrapper/FixedCreateButtonWrapper.tsx index f4e0fdde3..acc6371c0 100644 --- a/frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.tsx +++ b/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
{children}
; diff --git a/frontend/src/layouts/PleaseLayout/PleaseFixedButtonWrapper/PleaseFixedButtonWrapper.style.ts b/frontend/src/layouts/components/FixedCreationButtonWrapper/FixedCreationButtonWrapper.style.ts similarity index 100% rename from frontend/src/layouts/PleaseLayout/PleaseFixedButtonWrapper/PleaseFixedButtonWrapper.style.ts rename to frontend/src/layouts/components/FixedCreationButtonWrapper/FixedCreationButtonWrapper.style.ts diff --git a/frontend/src/pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts b/frontend/src/layouts/components/ListContent/ListContent.style.ts similarity index 76% rename from frontend/src/pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts rename to frontend/src/layouts/components/ListContent/ListContent.style.ts index e57f33377..1476f7ece 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts +++ b/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; diff --git a/frontend/src/layouts/components/ListContent/ListContent.tsx b/frontend/src/layouts/components/ListContent/ListContent.tsx new file mode 100644 index 000000000..6df025246 --- /dev/null +++ b/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
{children}
; +} diff --git a/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.style.ts b/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.style.ts index e948fedf5..1dd937bdc 100644 --- a/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.style.ts +++ b/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}; `; diff --git a/frontend/src/layouts/components/TriSectionHeader/TriSectionHeader.style.ts b/frontend/src/layouts/components/TriSectionHeader/TriSectionHeader.style.ts index d2a230991..f72698eff 100644 --- a/frontend/src/layouts/components/TriSectionHeader/TriSectionHeader.style.ts +++ b/frontend/src/layouts/components/TriSectionHeader/TriSectionHeader.style.ts @@ -2,8 +2,10 @@ import { css, Theme } from '@emotion/react'; export const getTriSectionHeaderStyle = ({ borderBottomColor, + theme, }: { borderBottomColor?: string; + theme: Theme; }) => { return css` position: relative; @@ -13,7 +15,9 @@ export const getTriSectionHeaderStyle = ({ justify-content: space-between; height: 5rem; - margin: 0 2rem; + padding: 0 2rem; + + background-color: ${theme.colorPalette.white[100]}; ${borderBottomColor && `border-bottom: 1px solid ${borderBottomColor};`} diff --git a/frontend/src/layouts/components/TriSectionHeader/TriSectionHeader.tsx b/frontend/src/layouts/components/TriSectionHeader/TriSectionHeader.tsx index e72ce3de0..6575d511a 100644 --- a/frontend/src/layouts/components/TriSectionHeader/TriSectionHeader.tsx +++ b/frontend/src/layouts/components/TriSectionHeader/TriSectionHeader.tsx @@ -8,8 +8,9 @@ interface TriSectionHeaderProps extends PropsWithChildren { } function TriSectionHeader(props: TriSectionHeaderProps) { const { children, borderBottomColor } = props; + const theme = useTheme(); return ( -
+
{children}
); diff --git a/frontend/src/pages/Bet/BetListPage/BetListPage.tsx b/frontend/src/pages/Bet/BetListPage/BetListPage.tsx index 9a5b5a1c2..cf9a8ea37 100644 --- a/frontend/src/pages/Bet/BetListPage/BetListPage.tsx +++ b/frontend/src/pages/Bet/BetListPage/BetListPage.tsx @@ -2,34 +2,46 @@ import GET_ROUTES from '@_common/getRoutes'; import NavigationBar from '@_components/NavigationBar/NavigationBar'; import PlusButton from '@_components/PlusButton/PlusButton'; import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper'; -import ListLayout from '@_layouts/ListLayout/ListLayout'; import { useTheme } from '@emotion/react'; import { Fragment } from 'react'; import { useNavigate } from 'react-router-dom'; import BetList from './components/BetList/BetList'; +import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout'; +import RefreshButton from '@_components/RefreshButton/RefreshButton'; +import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper'; +import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; +import { common } from '@_common/common.style'; export default function BetListPage() { const navigate = useNavigate(); + const { darakbangName } = useNowDarakbangName(); const theme = useTheme(); return ( - - -

안내면진다

- + + + +

+ {darakbangName} +

+ + + + + - + - + - + navigate(GET_ROUTES.nowDarakbang.betCreation())} /> - - + + diff --git a/frontend/src/pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.tsx b/frontend/src/pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.tsx index cd40fc786..649b1171d 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.tsx +++ b/frontend/src/pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.tsx @@ -1,9 +1,9 @@ +import ListContent from '@_layouts/components/ListContent/ListContent'; import ChatCardSkeleton from './ChatCardSkeleton/ChatCardSkeleton'; -import * as S from './ChatCardListSkeleton.style'; export default function ChatCardListSkeleton() { return ( -
+ @@ -12,6 +12,6 @@ export default function ChatCardListSkeleton() { -
+ ); } diff --git a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx index 01c7343e6..c892a1593 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx @@ -1,6 +1,4 @@ import ChatCardListSkeleton from './ChatListSkeleton/ChatCardListSkeleton'; -import ChattingPreview from './components/ChattingPreview/ChattingPreview'; -import ChattingPreviewLayout from '@_layouts/ChattingPreviewLayout/ChattingPreviewLayout'; import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper'; import GET_ROUTES from '@_common/getRoutes'; import MissingFallback from '@_components/MissingFallback/MissingFallback'; @@ -11,6 +9,10 @@ import useChatPreviews from '@_hooks/queries/useChatPreiview'; import { useNavigate } from 'react-router-dom'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import { useTheme } from '@emotion/react'; +import { Fragment } from 'react'; +import ListContent from '@_layouts/components/ListContent/ListContent'; +import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout'; +import ChattingPreview from './components/ChattingPreview/ChattingPreview'; export default function ChatPage() { const theme = useTheme(); @@ -19,36 +21,41 @@ export default function ChatPage() { const navigate = useNavigate(); return ( - - - -

- {darakbangName} -

- - - - {isLoading ? ( - - ) : chatPreviews && chatPreviews.length > 0 ? ( - chatPreviews?.map((chatPreview) => ( - - navigate( - GET_ROUTES.nowDarakbang.chattingRoom(chatPreview.moimId), - ) - } - key={chatPreview.moimId} - /> - )) - ) : ( - - )} - + + + + +

+ {darakbangName} +

+ + + + + + {isLoading ? ( + + ) : chatPreviews && chatPreviews.length > 0 ? ( + chatPreviews?.map((chatPreview) => ( + + navigate( + GET_ROUTES.nowDarakbang.chattingRoom(chatPreview.moimId), + ) + } + key={chatPreview.moimId} + /> + )) + ) : ( + + )} + + + - + ); } diff --git a/frontend/src/pages/Moim/MainPage/MainPage.tsx b/frontend/src/pages/Moim/MainPage/MainPage.tsx index 9039b31f3..503ad0695 100644 --- a/frontend/src/pages/Moim/MainPage/MainPage.tsx +++ b/frontend/src/pages/Moim/MainPage/MainPage.tsx @@ -15,7 +15,6 @@ import { import Button from '@_components/Button/Button'; import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper'; import GET_ROUTES from '@_common/getRoutes'; -import HomeLayout from '@_layouts/HomeLayout.tsx/HomeLayout'; import HomeMainContent from './components/HomeMainContent/HomeMainContent'; import Modal from '@_components/Modal/Modal'; import NavigationBar from '@_components/NavigationBar/NavigationBar'; @@ -34,6 +33,7 @@ import { useNavigate } from 'react-router-dom'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import useServeToken from '@_hooks/mutaions/useServeToken'; import { useTheme } from '@emotion/react'; +import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout'; export default function MainPage() { const navigate = useNavigate(); @@ -143,10 +143,10 @@ export default function MainPage() { }, [darakbangMenuOption]); return ( - - - - + + + +
{ @@ -161,29 +161,29 @@ export default function MainPage() { height="15" />
- + - + - - + + {isDarakbangMenuOpened && darakbangMenu} - + - + - + - + navigate(GET_ROUTES.nowDarakbang.addMoim())} /> - - + + diff --git a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.style.ts b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.style.ts deleted file mode 100644 index 1671b7dbf..000000000 --- a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.style.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { css } from '@emotion/react'; - -export const cardListSection = css` - display: flex; - flex-direction: column; - gap: 1.2rem; -`; diff --git a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.tsx b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.tsx index 613e8d379..6f571b464 100644 --- a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.tsx +++ b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.tsx @@ -1,9 +1,8 @@ -import * as S from './MoimCardList.style'; - import GET_ROUTES from '@_common/getRoutes'; import MoimCard from './MoimCard/MoimCard'; import { MoimInfo } from '@_types/index'; import { useNavigate } from 'react-router-dom'; +import ListContent from '@_layouts/components/ListContent/ListContent'; interface MoimCardListProps { moimInfos: MoimInfo[]; @@ -19,7 +18,7 @@ export default function MoimCardList(props: MoimCardListProps) { }; return ( -
+ {moimInfos.map((moimInfo) => { return ( ); })} -
+ ); } diff --git a/frontend/src/pages/Please/PleasePage/PleasePage.tsx b/frontend/src/pages/Please/PleasePage/PleasePage.tsx index efd6b9eef..166b2292c 100644 --- a/frontend/src/pages/Please/PleasePage/PleasePage.tsx +++ b/frontend/src/pages/Please/PleasePage/PleasePage.tsx @@ -3,14 +3,14 @@ import { Fragment } from 'react'; import GET_ROUTES from '@_common/getRoutes'; import NavigationBar from '@_components/NavigationBar/NavigationBar'; import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper'; -import PleaseLayout from '@_layouts/PleaseLayout/PleaseLayout'; import PleaseList from '@_pages/Please/PleasePage/components/PleaseList/PleaseList'; import PlusButton from '@_components/PlusButton/PlusButton'; -import RefreshButton from '@_components/RefreshButton/RefreshButton'; import { common } from '@_common/common.style'; import { useNavigate } from 'react-router-dom'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import { useTheme } from '@emotion/react'; +import RefreshButton from '@_components/RefreshButton/RefreshButton'; +import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout'; export default function PleasePage() { const { darakbangName } = useNowDarakbangName(); @@ -20,28 +20,28 @@ export default function PleasePage() { return ( - - - -

+ + + +

{darakbangName}

- - + + - - + + - + - + - + navigate(GET_ROUTES.nowDarakbang.addPlease())} /> - - + +