Merge pull request #11 from Nexters/feat/#8

[Feat/#8] 공통 레이아웃 설정
Nexters · Jan 26, 2025 · 888ecd2 · 888ecd2
2 parents 6269789 + de945ff
commit 888ecd2
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 20 deletions.
diff --git a/src/app/chats/[chatId]/page.tsx b/src/app/chats/[chatId]/page.tsx
@@ -0,0 +1,11 @@
+import HeaderContent from '@/shared/components/HeaderContent';
+import MainContent from '@/shared/components/MainContent';
+
+export default function ChatPage() {
+  return (
+    <>
+      <HeaderContent>{null}</HeaderContent>
+      <MainContent>{null}</MainContent>
+    </>
+  );
+}
diff --git a/src/app/chats/[chatId]/tarot-reading/[resultId]/page.tsx b/src/app/chats/[chatId]/tarot-reading/[resultId]/page.tsx
@@ -0,0 +1,11 @@
+import HeaderContent from '@/shared/components/HeaderContent';
+import MainContent from '@/shared/components/MainContent';
+
+export default function TarotReadingResultPage() {
+  return (
+    <>
+      <HeaderContent>{null}</HeaderContent>
+      <MainContent>{null}</MainContent>
+    </>
+  );
+}
diff --git a/src/app/global.css b/src/app/global.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,11 @@
-import SUIT from "@/shared/assets/font/font";
-import ReactQueryClientProvider from "@/shared/lib/reactQuery/ReactQueryClientProvider";
-import StyledComponentsRegistry from "@/shared/lib/styledComponents/StyledComponentsRegistry";
-import StyledReset from "@/shared/lib/styledComponents/StyledReset";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import "./global.css";
-import StyledComponentsTheme from "@/shared/lib/styledComponents/StyledComponentsTheme";
+import SUIT from '@/shared/assets/font/font';
+import ResponsiveRootLayout from '@/shared/components/ResponsiveRootLayout';
+import ReactQueryClientProvider from '@/shared/lib/reactQuery/ReactQueryClientProvider';
+import GlobalStyle from '@/shared/lib/styledComponents/GlobalStyle';
+import StyledComponentsRegistry from '@/shared/lib/styledComponents/StyledComponentsRegistry';
+import StyledComponentsTheme from '@/shared/lib/styledComponents/StyledComponentsTheme';
+import StyledReset from '@/shared/lib/styledComponents/StyledReset';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -15,9 +16,10 @@ export default function RootLayout({
       <body>
         <ReactQueryClientProvider>
           <StyledComponentsRegistry>
+            <StyledReset />
+            <GlobalStyle />
             <StyledComponentsTheme>
-              <StyledReset />
-              {children}
+              <ResponsiveRootLayout>{children}</ResponsiveRootLayout>
             </StyledComponentsTheme>
           </StyledComponentsRegistry>
           <ReactQueryDevtools initialIsOpen={false} />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,11 @@
-export default function Home() {
-  return null;
+import HeaderContent from '@/shared/components/HeaderContent';
+import MainContent from '@/shared/components/MainContent';
+
+export default function HomePage() {
+  return (
+    <>
+      <HeaderContent>{null}</HeaderContent>
+      <MainContent>{null}</MainContent>
+    </>
+  );
 }
diff --git a/src/shared/components/HeaderContent/index.tsx b/src/shared/components/HeaderContent/index.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { css } from 'styled-components';
+
+interface HeaderContentProps {
+  children: ReactNode;
+  /**
+   * 시작 부분에 표시할 요소입니다.
+   */
+  startAction?: ReactNode;
+  /**
+   * 끝 부분에 표시할 요소입니다.
+   */
+  endAction?: ReactNode;
+  /**
+   * true일 경우 헤더가 스티키 포지션으로 고정됩니다. (top: 0)
+   */
+  sticky?: boolean;
+  /**
+   * 헤더 구분선 표시 여부
+   */
+  divider?: boolean;
+}
+
+export default function HeaderContent({ children, startAction, endAction, sticky, divider }: HeaderContentProps) {
+  return (
+    <>
+      <header
+        css={css`
+          position: relative;
+          padding: 14px 20px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          ${sticky && `position: sticky; top: 0;`}
+        `}
+      >
+        {startAction ? startAction : <span role="presentation" />}
+        {children}
+        {endAction ? endAction : <span role="presentation" />}
+      </header>
+      {divider && (
+        <hr
+          css={css`
+            margin: 0;
+            block-size: 1px;
+            border: none;
+            width: 100%;
+            background-color: ${(props) => props.theme.colors.grey10};
+            box-shadow: 0 0 0 100vmax ${(props) => props.theme.colors.grey10};
+            clip-path: inset(0px -100vmax);
+          `}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/shared/components/MainContent/index.tsx b/src/shared/components/MainContent/index.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { css } from 'styled-components';
+
+export default function MainContent({ children }: { children: ReactNode }) {
+  return (
+    <main
+      css={css`
+        position: relative;
+        flex: 1;
+      `}
+    >
+      {children}
+    </main>
+  );
+}
diff --git a/src/shared/components/ResponsiveRootLayout/index.tsx b/src/shared/components/ResponsiveRootLayout/index.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { css } from 'styled-components';
+
+export default function ResponsiveRootLayout({ children }: { children: ReactNode }) {
+  return (
+    <div
+      css={css`
+        margin-inline: auto;
+        min-height: 100dvh;
+        display: flex;
+        flex-direction: column;
+        @media screen and (min-width: 450px) {
+          max-width: 600px;
+        }
+      `}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/shared/lib/styledComponents/GlobalStyle.tsx b/src/shared/lib/styledComponents/GlobalStyle.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  word-break: break-all;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+}
+`;
+
+export default GlobalStyle;
diff --git a/src/shared/lib/styledComponents/styled.d.ts b/src/shared/lib/styledComponents/styled.d.ts
@@ -1,6 +1,17 @@
-import "styled-components";
-import { ColorsTypes, FontsTypes } from "./theme";
-declare module "styled-components" {
+import 'styled-components';
+import type { CSSProp } from 'styled-components';
+import { ColorsTypes, FontsTypes } from './theme';
+
+/**
+ * TypeScript 환경에서 css prop을 사용하기 위한 타입 선언
+ * @see {@link https://styled-components.com/docs/api#usage-with-typescript}
+ */
+declare module 'react' {
+  interface Attributes {
+    css?: CSSProp | undefined;
+  }
+}
+declare module 'styled-components' {
   export interface DefaultTheme {
     colors: ColorsTypes;
     fonts: FontsTypes;