Merge pull request #255 from woowacourse-teams/feature/#254

홈, 해주세요 페이지 레이아웃 및 스타일링 수정

frontend/src/components/HomeHeaderContent/HomHeaderContent.tsx

@@ -0,0 +1,11 @@
+import { useTheme } from '@emotion/react';
+import { PropsWithChildren } from 'react';
+import * as S from './HomeHeaderContent.style';
+
+export default function HomeHeaderContent(props: PropsWithChildren) {
+  const { children } = props;
+
+  const theme = useTheme();
+
+  return <h1 css={S.logoStyle({ theme })}>{children}</h1>;
+}

frontend/src/components/HomeHeaderContent/HomeHeaderContent.style.ts

@@ -0,0 +1,5 @@
+import { css, Theme } from '@emotion/react';
+
+export const logoStyle = (props: { theme: Theme }) => css`
+  ${props.theme.typography.h5}
+`;

frontend/src/components/MoimCard/MoimCard.style.ts

@@ -8,6 +8,7 @@ export const cardBox = css`
   width: 100%;
   padding: 2rem 2.4rem;
 
+  background: white;
   border-radius: 2.5rem;
   box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
 `;
@@ -69,7 +70,6 @@ export const detailInfo = (props: { theme: Theme }) => {
   const { theme } = props;
 
   return css`
-    ${theme.typography.b3}
     display: flex;
     flex-direction: column;
     gap: 0.2rem;

frontend/src/components/MoimCard/MoimCard.tsx

@@ -52,9 +52,9 @@ export default function MoimCard(props: MoimCardProps) {
       </div>
 
       <div css={S.detailInfo({ theme })}>
-        <span>{place}</span>
+        <span css={theme.typography.b3}>{place}</span>
 
-        <span>
+        <span css={theme.typography.b3}>
           최대 {maxPeople}명 (현재 {currentPeople}명)
         </span>
       </div>

frontend/src/components/MoimTabBar/MoimTabBar.style.ts

@@ -1,21 +1,20 @@
 import { css, Theme } from '@emotion/react';
 
-export const tabStyle = (props: { theme: Theme }) => {
-  const { theme } = props;
-
+export const tabStyle = () => {
   return css`
     display: flex;
     gap: 12px;
-
-    ${theme.typography.s1}
   `;
 };
 
 export const tabItemStyle = (props: { theme: Theme; isTurnedOn: boolean }) => {
   const { theme, isTurnedOn } = props;
 
-  return css({
-    color: isTurnedOn ? theme.semantic.primary : theme.semantic.disabled,
-    borderBottom: isTurnedOn ? `2px solid ${theme.semantic.primary}` : 'none',
-  });
+  return css`
+    ${theme.typography.s1}
+    color: ${isTurnedOn ? theme.semantic.primary : theme.semantic.disabled};
+    border-bottom: ${isTurnedOn
+      ? `2px solid ${theme.semantic.primary}`
+      : 'none'};
+  `;
 };

frontend/src/components/MoimTabBar/MoimTabBar.tsx

@@ -16,7 +16,7 @@ export default function MoimTabBar(props: MoimTabBarProps) {
   const theme = useTheme();
 
   return (
-    <nav css={S.tabStyle({ theme })}>
+    <nav css={S.tabStyle}>
       {tabs.map((tab, index) => (
         <p
           key={index}

frontend/src/components/PleaseCard/PleaseCard.style.ts

@@ -8,6 +8,7 @@ export const cardBox = css`
   width: 100%;
   padding: 2rem 2.4rem;
 
+  background: white;
   border-radius: 2.5rem;
   box-shadow: rgb(0 0 0 / 24%) 0 3px 8px;
 `;

frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.style.ts

@@ -1,17 +1,17 @@
 import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
-import { css, Theme } from '@emotion/react';
+import { css } from '@emotion/react';
 
 export const headerStyle = css`
   position: fixed;
   top: 0;
 
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+
   width: 100%;
   max-width: ${DISPLAY_MAX_WIDTH};
-  padding: 14px 22px;
+  padding: 14px 22px 0;
 
   background-color: white;
 `;
-
-export const logoStyle = (props: { theme: Theme }) => css`
-  ${props.theme.typography.h5}
-`;

frontend/src/layouts/HomeLayout.tsx/HomeHeader/HomeHeader.tsx

@@ -1,14 +1,8 @@
 import { PropsWithChildren } from 'react';
 import * as S from './HomeHeader.style';
-import { useTheme } from '@emotion/react';
 
 export default function HomeHeader(props: PropsWithChildren) {
   const { children } = props;
-  const theme = useTheme();
 
-  return (
-    <header css={S.headerStyle}>
-      <h1 css={S.logoStyle({ theme })}>{children}</h1>
-    </header>
-  );
+  return <header css={S.headerStyle}>{children}</header>;
 }

frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts

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

frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx

@@ -4,11 +4,14 @@ import HomeFixedButtonWrapper from './HomeFixedButtonWrapper/HomeFixedButtonWrap
 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;
 
-  return <div css={S.containerStyle}>{children}</div>;
+  const theme = useTheme();
+
+  return <div css={S.containerStyle({ theme })}>{children}</div>;
 }
 
 HomeLayout.Header = HomeHeader;

frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.style.ts

@@ -1,6 +1,5 @@
-import { css, Theme } from '@emotion/react';
+import { css } from '@emotion/react';
 
-export const mainStyle = ({ theme }: { theme: Theme }) => css`
+export const mainStyle = () => css`
   padding: 16px 22px;
-  background-color: ${theme.colorPalette.grey[100]};
 `;

frontend/src/layouts/HomeLayout.tsx/HomeMain/HomeMain.tsx

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

frontend/src/layouts/PleaseLayout/PleaseLayout.style.ts

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

frontend/src/layouts/PleaseLayout/PleaseLayout.tsx

@@ -3,11 +3,14 @@ import PleaseHeader from './PleaseHeader/PleaseHeader';
 import PleaseMain from './PleaseMain/PleaseMain';
 import PleaseFixedButtonWrapper from './PleaseFixedButtonWrapper/PleaseFixedButtonWrapper';
 import * as S from './PleaseLayout.style';
+import { useTheme } from '@emotion/react';
 
 function PleaseLayout(props: PropsWithChildren) {
   const { children } = props;
 
-  return <div css={S.containerStyle}>{children}</div>;
+  const theme = useTheme();
+
+  return <div css={S.containerStyle({ theme })}>{children}</div>;
 }
 
 PleaseLayout.Header = PleaseHeader;

frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.style.ts

@@ -1,6 +1,5 @@
-import { css, Theme } from '@emotion/react';
+import { css } from '@emotion/react';
 
-export const mainStyle = ({ theme }: { theme: Theme }) => css`
+export const mainStyle = () => css`
   padding: 16px 22px;
-  background-color: ${theme.colorPalette.grey[100]};
 `;

frontend/src/layouts/PleaseLayout/PleaseMain/PleaseMain.tsx

@@ -1,12 +1,9 @@
-import { useTheme } from '@emotion/react';
 import * as S from './PleaseMain.style';
 
 import { PropsWithChildren } from 'react';
 
 export default function PleaseMain(props: PropsWithChildren) {
   const { children } = props;
 
-  const theme = useTheme();
-
-  return <main css={S.mainStyle({ theme })}>{children}</main>;
+  return <main css={S.mainStyle}>{children}</main>;
 }

frontend/src/pages/MainPage/MainPage.tsx

@@ -1,6 +1,5 @@
 import { Fragment, useState } from 'react';
 import MoimTabBar, { MainPageTab } from '@_components/MoimTabBar/MoimTabBar';
-
 import Button from '@_components/Button/Button';
 import HomeLayout from '@_layouts/HomeLayout.tsx/HomeLayout';
 import HomeMainContent from '@_components/HomeMainContent/HomeMainContent';
@@ -9,6 +8,7 @@ import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/Navi
 import PlusIcon from '@_components/Icons/PlusIcon';
 import ROUTES from '@_constants/routes';
 import { useNavigate } from 'react-router-dom';
+import HomeHeaderContent from '@_components/HomeHeaderContent/HomHeaderContent';
 
 export default function MainPage() {
   const navigate = useNavigate();
@@ -23,7 +23,7 @@ export default function MainPage() {
     <Fragment>
       <HomeLayout>
         <HomeLayout.Header>
-          우아한테크코스
+          <HomeHeaderContent>우아한테크코스</HomeHeaderContent>
           <MoimTabBar currentTab={currentTab} onTabClick={handleTabClick} />
         </HomeLayout.Header>