From 37e26600f2441a405b9b937e609d64c514d1558b Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Mon, 30 Sep 2024 12:56:52 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20ChatPage,=20MainPage,=20PleaseP?= =?UTF-8?q?age=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A5=BC=20ListLayoutPage?= =?UTF-8?q?=EB=A1=9C=20=EA=B3=B5=ED=86=B5=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/refresh.svg | 11 +++- frontend/src/common/reset.style.ts | 1 + .../ChattingPreviewContainer.stories.tsx | 14 ---- .../ChattingPreviewContainer.style.ts | 19 ------ .../ChattingPreviewContainer.tsx | 11 ---- .../ChattingPreviewLayout.style.ts | 15 ----- .../ChattingPreviewLayout.tsx | 18 ----- .../src/layouts/HomeLayout.tsx/HomeLayout.tsx | 21 ------ .../layouts/ListPageLayout/ListPageLayout.tsx | 22 +++++++ .../ListPageMain/ListPageMain.style.ts} | 0 .../ListPageMain/ListPageMain.tsx} | 4 +- .../ListpageLayout.style.ts} | 4 +- .../PleaseHeader/PleaseHeader.style.ts | 16 ----- .../PleaseHeader/PleaseHeader.tsx | 14 ---- .../PleaseLayout/PleaseLayout.style.ts | 9 --- .../src/layouts/PleaseLayout/PleaseLayout.tsx | 20 ------ .../PleaseMain/PleaseMain.style.ts | 5 -- .../PleaseLayout/PleaseMain/PleaseMain.tsx | 9 --- .../src/layouts/SelectLayout/SelectLayout.tsx | 4 +- .../DoubleTriHeader/DoubleTriHeader.style.ts} | 2 +- .../DoubleTriHeader/DoubleTriHeader.tsx} | 6 +- .../FixedBottomButtonWrapper.style.ts} | 0 .../FixedBottomButtonWrapper.tsx} | 4 +- .../FixedCreateButtonWrapper.tsx} | 4 +- .../FixedCreationButtonWrapper.style.ts} | 0 .../ListContent/ListContent.style.ts} | 2 +- .../components/ListContent/ListContent.tsx | 8 +++ .../NavigationBarWrapper.style.ts | 6 +- .../TriSectionHeader.style.ts | 6 +- .../TriSectionHeader/TriSectionHeader.tsx | 3 +- .../ChatListSkeleton/ChatCardListSkeleton.tsx | 6 +- .../src/pages/Chatting/ChatPage/ChatPage.tsx | 65 ++++++++++--------- frontend/src/pages/Moim/MainPage/MainPage.tsx | 30 ++++----- .../MoimCardList/MoimCardList.style.ts | 7 -- .../MoimCardList/MoimCardList.tsx | 7 +- .../pages/Please/PleasePage/PleasePage.tsx | 26 ++++---- 36 files changed, 133 insertions(+), 266 deletions(-) delete mode 100644 frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.stories.tsx delete mode 100644 frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts delete mode 100644 frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.tsx delete mode 100644 frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.style.ts delete mode 100644 frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewLayout.tsx delete mode 100644 frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx create mode 100644 frontend/src/layouts/ListPageLayout/ListPageLayout.tsx rename frontend/src/layouts/{HomeLayout.tsx/HomeMain/HomeMain.style.ts => ListPageLayout/ListPageMain/ListPageMain.style.ts} (100%) rename frontend/src/layouts/{HomeLayout.tsx/HomeMain/HomeMain.tsx => ListPageLayout/ListPageMain/ListPageMain.tsx} (54%) rename frontend/src/layouts/{HomeLayout.tsx/HomeLayout.style.ts => ListPageLayout/ListpageLayout.style.ts} (64%) delete mode 100644 frontend/src/layouts/PleaseLayout/PleaseHeader/PleaseHeader.style.ts delete mode 100644 frontend/src/layouts/PleaseLayout/PleaseHeader/PleaseHeader.tsx delete mode 100644 frontend/src/layouts/PleaseLayout/PleaseLayout.style.ts delete mode 100644 frontend/src/layouts/PleaseLayout/PleaseLayout.tsx delete mode 100644 frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.style.ts delete mode 100644 frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.tsx rename frontend/src/layouts/{HomeLayout.tsx/HomeHeader/HomeHeader.style.ts => components/DoubleTriHeader/DoubleTriHeader.style.ts} (93%) rename frontend/src/layouts/{HomeLayout.tsx/HomeHeader/HomeHeader.tsx => components/DoubleTriHeader/DoubleTriHeader.tsx} (60%) rename frontend/src/layouts/{HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.style.ts => components/FixedBottomButtonWrapper/FixedBottomButtonWrapper.style.ts} (100%) rename frontend/src/layouts/{PleaseLayout/PleaseFixedButtonWrapper/PleaseFixedButtonWrapper.tsx => components/FixedBottomButtonWrapper/FixedBottomButtonWrapper.tsx} (55%) rename frontend/src/layouts/{HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.tsx => components/FixedCreationButtonWrapper/FixedCreateButtonWrapper.tsx} (50%) rename frontend/src/layouts/{PleaseLayout/PleaseFixedButtonWrapper/PleaseFixedButtonWrapper.style.ts => components/FixedCreationButtonWrapper/FixedCreationButtonWrapper.style.ts} (100%) rename frontend/src/{pages/Chatting/ChatPage/ChatListSkeleton/ChatCardListSkeleton.style.ts => layouts/components/ListContent/ListContent.style.ts} (76%) create mode 100644 frontend/src/layouts/components/ListContent/ListContent.tsx delete mode 100644 frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.style.ts 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/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/ListPageLayout/ListPageLayout.tsx b/frontend/src/layouts/ListPageLayout/ListPageLayout.tsx new file mode 100644 index 000000000..ac9028e69 --- /dev/null +++ b/frontend/src/layouts/ListPageLayout/ListPageLayout.tsx @@ -0,0 +1,22 @@ +import { PropsWithChildren } from 'react'; +import { useTheme } from '@emotion/react'; +import FixedCreateButtonWrapper from '@_layouts/components/FixedCreationButtonWrapper/FixedCreateButtonWrapper'; +import ListPageMain from './ListPageMain/ListPageMain'; +import * as S from './ListpageLayout.style'; +import DoubleTriHeader from '@_layouts/components/DoubleTriHeader/DoubleTriHeader'; +import TriSectionHeader from '@_layouts/components/TriSectionHeader/TriSectionHeader'; + +function ListPageLayout(props: PropsWithChildren) { + const { children } = props; + + const theme = useTheme(); + + return
{children}
; +} + +ListPageLayout.DoubleTriHeader = DoubleTriHeader; +ListPageLayout.TriHeader = TriSectionHeader; +ListPageLayout.Main = ListPageMain; +ListPageLayout.ListPageFixedButtonWrapper = FixedCreateButtonWrapper; + +export default ListPageLayout; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.style.ts b/frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.style.ts similarity index 100% rename from frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.style.ts rename to frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.style.ts diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.tsx b/frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.tsx similarity index 54% rename from frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.tsx rename to frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.tsx index 04e3fdb56..ea4746c26 100644 --- a/frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.tsx +++ b/frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.tsx @@ -1,8 +1,8 @@ -import * as S from './HomeMain.style'; +import * as S from './ListPageMain.style'; import { PropsWithChildren } from 'react'; -export default function HomeMain(props: PropsWithChildren) { +export default function ListPageMain(props: PropsWithChildren) { const { children } = props; return
{children}
; diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts b/frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts similarity index 64% rename from frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts rename to frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts index cd9a294da..8d8262ad9 100644 --- a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts +++ b/frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts @@ -2,8 +2,6 @@ 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}; + min-height: calc(100vh - ${NAVIGATION_BAR_HEIGHT} - 2rem); background-color: ${theme.colorPalette.grey[100]}; `; 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/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 ab275068c..9c265c9c3 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx @@ -1,6 +1,5 @@ import ChatCardListSkeleton from './ChatListSkeleton/ChatCardListSkeleton'; import ChattingPreview from '../ChattingRoomPage/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 +10,9 @@ 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 ListPageLayout from '@_layouts/ListPageLayout/ListPageLayout'; 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 69e3e48c5..4aeafafdc 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 ListPageLayout from '@_layouts/ListPageLayout/ListPageLayout'; 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 0603f5d60..b1ed907ff 100644 --- a/frontend/src/pages/Please/PleasePage/PleasePage.tsx +++ b/frontend/src/pages/Please/PleasePage/PleasePage.tsx @@ -3,7 +3,6 @@ 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 { common } from '@_common/common.style'; @@ -11,6 +10,7 @@ import { useNavigate } from 'react-router-dom'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import { useTheme } from '@emotion/react'; import RefreshButton from '@_components/RefreshButton/RefreshButton'; +import ListPageLayout from '@_layouts/ListPageLayout/ListPageLayout'; export default function PleasePage() { const { darakbangName } = useNowDarakbangName(); @@ -20,28 +20,28 @@ export default function PleasePage() { return ( - - - + + +

{darakbangName}

- - + + - - + + - + - + - + navigate(GET_ROUTES.nowDarakbang.addPlease())} /> - - + + From 89cd5206ea5b62292cb607e4e22e7606cc47087d Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Mon, 30 Sep 2024 13:22:28 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20ListLayout=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ListPageLayout/ListpageLayout.style.ts | 2 +- frontend/src/pages/Mypage/MyPage.tsx | 41 ++++++++++--------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts b/frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts index 8d8262ad9..0ab7a8319 100644 --- a/frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts +++ b/frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts @@ -2,6 +2,6 @@ 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} - 2rem); + min-height: calc(100vh - ${NAVIGATION_BAR_HEIGHT}); background-color: ${theme.colorPalette.grey[100]}; `; diff --git a/frontend/src/pages/Mypage/MyPage.tsx b/frontend/src/pages/Mypage/MyPage.tsx index dcbd643b2..f7aebbc48 100644 --- a/frontend/src/pages/Mypage/MyPage.tsx +++ b/frontend/src/pages/Mypage/MyPage.tsx @@ -1,5 +1,4 @@ import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper'; -import InformationLayout from '@_layouts/InformationLayout/InformationLayout'; import NavigationBar from '@_components/NavigationBar/NavigationBar'; import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper'; import { common } from '@_common/common.style'; @@ -7,6 +6,8 @@ import useMyInfo from '@_hooks/queries/useMyInfo'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import { useTheme } from '@emotion/react'; import MineInfoCard from './components/MineInfoCard/MineInfoCard'; +import ListPageLayout from '@_layouts/ListPageLayout/ListPageLayout'; +import { Fragment } from 'react'; export default function MyPage() { const { myInfo, isLoading } = useMyInfo(); @@ -15,28 +16,28 @@ export default function MyPage() { if (isLoading) { return
Loading...
; } - - if (!myInfo) { - return
Failed to load my information.
; - } return ( - - - - - {darakbangName} - - - - - - + + + + + + {darakbangName} + + + + + {myInfo && ( + + )} + + - + ); } From 5433d9cd9c47cdb88ee86a23c0da3fb45360b727 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 8 Oct 2024 13:34:20 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20Layout=EB=AA=85=EC=9D=84=20defa?= =?UTF-8?q?ultPageLayout=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DefaultPageLayout.tsx} | 16 +++++----- .../DefaultPageMain/DefaultPageMain.style.ts} | 0 .../DefaultPageMain/DefaultPageMain.tsx} | 4 +-- .../DefaultpageLayout.style.ts} | 0 .../src/pages/Chatting/ChatPage/ChatPage.tsx | 18 +++++------ frontend/src/pages/Moim/MainPage/MainPage.tsx | 30 +++++++++---------- frontend/src/pages/Mypage/MyPage.tsx | 18 +++++------ .../pages/Please/PleasePage/PleasePage.tsx | 26 ++++++++-------- 8 files changed, 56 insertions(+), 56 deletions(-) rename frontend/src/layouts/{ListPageLayout/ListPageLayout.tsx => DefaultPageLayout/DefaultPageLayout.tsx} (54%) rename frontend/src/layouts/{ListPageLayout/ListPageMain/ListPageMain.style.ts => DefaultPageLayout/DefaultPageMain/DefaultPageMain.style.ts} (100%) rename frontend/src/layouts/{ListPageLayout/ListPageMain/ListPageMain.tsx => DefaultPageLayout/DefaultPageMain/DefaultPageMain.tsx} (53%) rename frontend/src/layouts/{ListPageLayout/ListpageLayout.style.ts => DefaultPageLayout/DefaultpageLayout.style.ts} (100%) diff --git a/frontend/src/layouts/ListPageLayout/ListPageLayout.tsx b/frontend/src/layouts/DefaultPageLayout/DefaultPageLayout.tsx similarity index 54% rename from frontend/src/layouts/ListPageLayout/ListPageLayout.tsx rename to frontend/src/layouts/DefaultPageLayout/DefaultPageLayout.tsx index ac9028e69..5cbc34f13 100644 --- a/frontend/src/layouts/ListPageLayout/ListPageLayout.tsx +++ b/frontend/src/layouts/DefaultPageLayout/DefaultPageLayout.tsx @@ -1,12 +1,12 @@ import { PropsWithChildren } from 'react'; import { useTheme } from '@emotion/react'; import FixedCreateButtonWrapper from '@_layouts/components/FixedCreationButtonWrapper/FixedCreateButtonWrapper'; -import ListPageMain from './ListPageMain/ListPageMain'; -import * as S from './ListpageLayout.style'; +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 ListPageLayout(props: PropsWithChildren) { +function DefaultPageLayout(props: PropsWithChildren) { const { children } = props; const theme = useTheme(); @@ -14,9 +14,9 @@ function ListPageLayout(props: PropsWithChildren) { return
{children}
; } -ListPageLayout.DoubleTriHeader = DoubleTriHeader; -ListPageLayout.TriHeader = TriSectionHeader; -ListPageLayout.Main = ListPageMain; -ListPageLayout.ListPageFixedButtonWrapper = FixedCreateButtonWrapper; +DefaultPageLayout.DoubleTriHeader = DoubleTriHeader; +DefaultPageLayout.TriHeader = TriSectionHeader; +DefaultPageLayout.Main = DefaultPageMain; +DefaultPageLayout.ListPageFixedButtonWrapper = FixedCreateButtonWrapper; -export default ListPageLayout; +export default DefaultPageLayout; diff --git a/frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.style.ts b/frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.style.ts similarity index 100% rename from frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.style.ts rename to frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.style.ts diff --git a/frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.tsx b/frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.tsx similarity index 53% rename from frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.tsx rename to frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.tsx index ea4746c26..5534d086e 100644 --- a/frontend/src/layouts/ListPageLayout/ListPageMain/ListPageMain.tsx +++ b/frontend/src/layouts/DefaultPageLayout/DefaultPageMain/DefaultPageMain.tsx @@ -1,8 +1,8 @@ -import * as S from './ListPageMain.style'; +import * as S from './DefaultPageMain.style'; import { PropsWithChildren } from 'react'; -export default function ListPageMain(props: PropsWithChildren) { +export default function DefaultPageMain(props: PropsWithChildren) { const { children } = props; return
{children}
; diff --git a/frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts b/frontend/src/layouts/DefaultPageLayout/DefaultpageLayout.style.ts similarity index 100% rename from frontend/src/layouts/ListPageLayout/ListpageLayout.style.ts rename to frontend/src/layouts/DefaultPageLayout/DefaultpageLayout.style.ts diff --git a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx index 9c265c9c3..8373e6c5b 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx @@ -12,7 +12,7 @@ import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import { useTheme } from '@emotion/react'; import { Fragment } from 'react'; import ListContent from '@_layouts/components/ListContent/ListContent'; -import ListPageLayout from '@_layouts/ListPageLayout/ListPageLayout'; +import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout'; export default function ChatPage() { const theme = useTheme(); @@ -22,16 +22,16 @@ export default function ChatPage() { return ( - - - + + +

{darakbangName}

- - + + - + {isLoading ? ( @@ -51,8 +51,8 @@ export default function ChatPage() { )} - - + + diff --git a/frontend/src/pages/Moim/MainPage/MainPage.tsx b/frontend/src/pages/Moim/MainPage/MainPage.tsx index 4aeafafdc..611de0f80 100644 --- a/frontend/src/pages/Moim/MainPage/MainPage.tsx +++ b/frontend/src/pages/Moim/MainPage/MainPage.tsx @@ -33,7 +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 ListPageLayout from '@_layouts/ListPageLayout/ListPageLayout'; +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/Mypage/MyPage.tsx b/frontend/src/pages/Mypage/MyPage.tsx index f7aebbc48..30eb246c4 100644 --- a/frontend/src/pages/Mypage/MyPage.tsx +++ b/frontend/src/pages/Mypage/MyPage.tsx @@ -6,7 +6,7 @@ import useMyInfo from '@_hooks/queries/useMyInfo'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import { useTheme } from '@emotion/react'; import MineInfoCard from './components/MineInfoCard/MineInfoCard'; -import ListPageLayout from '@_layouts/ListPageLayout/ListPageLayout'; +import DefaultPageLayout from '@_layouts/DefaultPageLayout/DefaultPageLayout'; import { Fragment } from 'react'; export default function MyPage() { @@ -18,23 +18,23 @@ export default function MyPage() { } return ( - - - + + + {darakbangName} - - - + + + {myInfo && ( )} - - + + diff --git a/frontend/src/pages/Please/PleasePage/PleasePage.tsx b/frontend/src/pages/Please/PleasePage/PleasePage.tsx index b1ed907ff..166b2292c 100644 --- a/frontend/src/pages/Please/PleasePage/PleasePage.tsx +++ b/frontend/src/pages/Please/PleasePage/PleasePage.tsx @@ -10,7 +10,7 @@ import { useNavigate } from 'react-router-dom'; import useNowDarakbangName from '@_hooks/queries/useNowDarakbangNameById'; import { useTheme } from '@emotion/react'; import RefreshButton from '@_components/RefreshButton/RefreshButton'; -import ListPageLayout from '@_layouts/ListPageLayout/ListPageLayout'; +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())} /> - - + + From fec853014b69823d8648bf1dde734caaa4f146df Mon Sep 17 00:00:00 2001 From: cys4585 Date: Tue, 15 Oct 2024 15:00:57 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EB=A8=B8=EC=A7=80=20=EC=B6=A9?= =?UTF-8?q?=EB=8F=8C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Chatting/ChatPage/ChatPage.tsx | 2 +- frontend/src/pages/Please/PleasePage/PleasePage.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx index 8373e6c5b..c892a1593 100644 --- a/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/Chatting/ChatPage/ChatPage.tsx @@ -1,5 +1,4 @@ import ChatCardListSkeleton from './ChatListSkeleton/ChatCardListSkeleton'; -import ChattingPreview from '../ChattingRoomPage/ChattingPreview/ChattingPreview'; import DarakbangNameWrapper from '@_components/DarakbangNameWrapper/DarakbangNameWrapper'; import GET_ROUTES from '@_common/getRoutes'; import MissingFallback from '@_components/MissingFallback/MissingFallback'; @@ -13,6 +12,7 @@ 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(); diff --git a/frontend/src/pages/Please/PleasePage/PleasePage.tsx b/frontend/src/pages/Please/PleasePage/PleasePage.tsx index 838b69fe8..166b2292c 100644 --- a/frontend/src/pages/Please/PleasePage/PleasePage.tsx +++ b/frontend/src/pages/Please/PleasePage/PleasePage.tsx @@ -5,7 +5,6 @@ import NavigationBar from '@_components/NavigationBar/NavigationBar'; import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper'; 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'; From 48900be286d54e47a598a7b638c1489d8087ed78 Mon Sep 17 00:00:00 2001 From: cys4585 Date: Tue, 15 Oct 2024 15:16:16 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=EC=95=88=EB=82=B4=EB=A9=B4=EC=A7=84?= =?UTF-8?q?=EB=8B=A4=EC=97=90=EB=8F=84=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layouts/ListLayout/ListLayout.style.ts | 8 ----- .../src/layouts/ListLayout/ListLayout.tsx | 20 ------------ .../ListLayout/ListMain/ListMain.style.ts | 5 --- .../layouts/ListLayout/ListMain/ListMain.tsx | 8 ----- .../src/pages/Bet/BetListPage/BetListPage.tsx | 32 +++++++++++++------ 5 files changed, 22 insertions(+), 51 deletions(-) delete mode 100644 frontend/src/layouts/ListLayout/ListLayout.style.ts delete mode 100644 frontend/src/layouts/ListLayout/ListLayout.tsx delete mode 100644 frontend/src/layouts/ListLayout/ListMain/ListMain.style.ts delete mode 100644 frontend/src/layouts/ListLayout/ListMain/ListMain.tsx diff --git a/frontend/src/layouts/ListLayout/ListLayout.style.ts b/frontend/src/layouts/ListLayout/ListLayout.style.ts deleted file mode 100644 index d4eb07bd6..000000000 --- a/frontend/src/layouts/ListLayout/ListLayout.style.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { NAVIGATION_BAR_HEIGHT } from '@_constants/styles'; -import { css, Theme } from '@emotion/react'; - -export const listLayout = ({ 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/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/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())} /> - - + +