Skip to content

Commit 888ecd2

Browse files
JxxunnnJxxunnn
authored
Merge pull request #11 from Nexters/feat/#8
[Feat/#8] 공통 레이아웃 설정
2 parents 6269789 + de945ff commit 888ecd2

File tree

10 files changed

+178
-20
lines changed

10 files changed

+178
-20
lines changed

‎src/app/chats/[chatId]/page.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import HeaderContent from '@/shared/components/HeaderContent';
2+
import MainContent from '@/shared/components/MainContent';
3+
4+
export default function ChatPage() {
5+
return (
6+
<>
7+
<HeaderContent>{null}</HeaderContent>
8+
<MainContent>{null}</MainContent>
9+
</>
10+
);
11+
}

‎src/app/chats/[chatId]/tarot-reading/[resultId]/page.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import HeaderContent from '@/shared/components/HeaderContent';
2+
import MainContent from '@/shared/components/MainContent';
3+
4+
export default function TarotReadingResultPage() {
5+
return (
6+
<>
7+
<HeaderContent>{null}</HeaderContent>
8+
<MainContent>{null}</MainContent>
9+
</>
10+
);
11+
}

‎src/app/global.css

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/app/layout.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import SUIT from "@/shared/assets/font/font";
2-
import ReactQueryClientProvider from "@/shared/lib/reactQuery/ReactQueryClientProvider";
3-
import StyledComponentsRegistry from "@/shared/lib/styledComponents/StyledComponentsRegistry";
4-
import StyledReset from "@/shared/lib/styledComponents/StyledReset";
5-
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
6-
import "./global.css";
7-
import StyledComponentsTheme from "@/shared/lib/styledComponents/StyledComponentsTheme";
1+
import SUIT from '@/shared/assets/font/font';
2+
import ResponsiveRootLayout from '@/shared/components/ResponsiveRootLayout';
3+
import ReactQueryClientProvider from '@/shared/lib/reactQuery/ReactQueryClientProvider';
4+
import GlobalStyle from '@/shared/lib/styledComponents/GlobalStyle';
5+
import StyledComponentsRegistry from '@/shared/lib/styledComponents/StyledComponentsRegistry';
6+
import StyledComponentsTheme from '@/shared/lib/styledComponents/StyledComponentsTheme';
7+
import StyledReset from '@/shared/lib/styledComponents/StyledReset';
8+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
89
export default function RootLayout({
910
children,
1011
}: Readonly<{
@@ -15,9 +16,10 @@ export default function RootLayout({
1516
<body>
1617
<ReactQueryClientProvider>
1718
<StyledComponentsRegistry>
19+
<StyledReset />
20+
<GlobalStyle />
1821
<StyledComponentsTheme>
19-
<StyledReset />
20-
{children}
22+
<ResponsiveRootLayout>{children}</ResponsiveRootLayout>
2123
</StyledComponentsTheme>
2224
</StyledComponentsRegistry>
2325
<ReactQueryDevtools initialIsOpen={false} />

‎src/app/page.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1-
export default function Home() {
2-
return null;
1+
import HeaderContent from '@/shared/components/HeaderContent';
2+
import MainContent from '@/shared/components/MainContent';
3+
4+
export default function HomePage() {
5+
return (
6+
<>
7+
<HeaderContent>{null}</HeaderContent>
8+
<MainContent>{null}</MainContent>
9+
</>
10+
);
311
}

‎src/shared/components/HeaderContent/index.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
'use client';
2+
3+
import { ReactNode } from 'react';
4+
import { css } from 'styled-components';
5+
6+
interface HeaderContentProps {
7+
children: ReactNode;
8+
/**
9+
* 시작 부분에 표시할 요소입니다.
10+
*/
11+
startAction?: ReactNode;
12+
/**
13+
* 끝 부분에 표시할 요소입니다.
14+
*/
15+
endAction?: ReactNode;
16+
/**
17+
* true일 경우 헤더가 스티키 포지션으로 고정됩니다. (top: 0)
18+
*/
19+
sticky?: boolean;
20+
/**
21+
* 헤더 구분선 표시 여부
22+
*/
23+
divider?: boolean;
24+
}
25+
26+
export default function HeaderContent({ children, startAction, endAction, sticky, divider }: HeaderContentProps) {
27+
return (
28+
<>
29+
<header
30+
css={css`
31+
position: relative;
32+
padding: 14px 20px;
33+
display: flex;
34+
align-items: center;
35+
justify-content: space-between;
36+
${sticky && `position: sticky; top: 0;`}
37+
`}
38+
>
39+
{startAction ? startAction : <span role="presentation" />}
40+
{children}
41+
{endAction ? endAction : <span role="presentation" />}
42+
</header>
43+
{divider && (
44+
<hr
45+
css={css`
46+
margin: 0;
47+
block-size: 1px;
48+
border: none;
49+
width: 100%;
50+
background-color: ${(props) => props.theme.colors.grey10};
51+
box-shadow: 0 0 0 100vmax ${(props) => props.theme.colors.grey10};
52+
clip-path: inset(0px -100vmax);
53+
`}
54+
/>
55+
)}
56+
</>
57+
);
58+
}

‎src/shared/components/MainContent/index.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use client';
2+
3+
import { ReactNode } from 'react';
4+
import { css } from 'styled-components';
5+
6+
export default function MainContent({ children }: { children: ReactNode }) {
7+
return (
8+
<main
9+
css={css`
10+
position: relative;
11+
flex: 1;
12+
`}
13+
>
14+
{children}
15+
</main>
16+
);
17+
}

‎src/shared/components/ResponsiveRootLayout/index.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use client';
2+
3+
import { ReactNode } from 'react';
4+
import { css } from 'styled-components';
5+
6+
export default function ResponsiveRootLayout({ children }: { children: ReactNode }) {
7+
return (
8+
<div
9+
css={css`
10+
margin-inline: auto;
11+
min-height: 100dvh;
12+
display: flex;
13+
flex-direction: column;
14+
@media screen and (min-width: 450px) {
15+
max-width: 600px;
16+
}
17+
`}
18+
>
19+
{children}
20+
</div>
21+
);
22+
}

‎src/shared/lib/styledComponents/GlobalStyle.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client';
2+
3+
import { createGlobalStyle } from 'styled-components';
4+
5+
const GlobalStyle = createGlobalStyle`
6+
*,
7+
*::before,
8+
*::after {
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
word-break: break-all;
14+
}
15+
16+
button,
17+
input,
18+
select,
19+
textarea {
20+
font-family: inherit;
21+
}
22+
`;
23+
24+
export default GlobalStyle;

‎src/shared/lib/styledComponents/styled.d.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1-
import "styled-components";
2-
import { ColorsTypes, FontsTypes } from "./theme";
3-
declare module "styled-components" {
1+
import 'styled-components';
2+
import type { CSSProp } from 'styled-components';
3+
import { ColorsTypes, FontsTypes } from './theme';
4+
5+
/**
6+
* TypeScript 환경에서 css prop을 사용하기 위한 타입 선언
7+
* @see {@link https://styled-components.com/docs/api#usage-with-typescript}
8+
*/
9+
declare module 'react' {
10+
interface Attributes {
11+
css?: CSSProp | undefined;
12+
}
13+
}
14+
declare module 'styled-components' {
415
export interface DefaultTheme {
516
colors: ColorsTypes;
617
fonts: FontsTypes;

0 commit comments

Comments
 (0)