From 5f641dce44931d54159e94ee0ac1ba29220254bc Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Tue, 21 Jan 2025 21:49:24 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20styled-components=EC=9D=98=20css?= =?UTF-8?q?=20prop=EC=97=90=20=EB=8C=80=ED=95=9C=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=84=A0=EC=96=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/lib/styledComponents/styled.d.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/shared/lib/styledComponents/styled.d.ts diff --git a/src/shared/lib/styledComponents/styled.d.ts b/src/shared/lib/styledComponents/styled.d.ts new file mode 100644 index 0000000..7817758 --- /dev/null +++ b/src/shared/lib/styledComponents/styled.d.ts @@ -0,0 +1,11 @@ +import type { CSSProp } from 'styled-components'; + +/** + * TypeScript 환경에서 css prop을 사용하기 위한 타입 선언 + * @see {@link https://styled-components.com/docs/api#usage-with-typescript} + */ +declare module 'react' { + interface Attributes { + css?: CSSProp | undefined; + } +} From 2c69a0113b8e7fb151c729aded68d2fb41e4eb63 Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Tue, 21 Jan 2025 21:50:42 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=EC=B5=9C=EC=83=81=EC=9C=84=20?= =?UTF-8?q?=EB=A0=88=EB=B2=A8=EC=97=90=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20ResponsiveRo?= =?UTF-8?q?otLayout=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 3 ++- .../components/ResponsiveRootLayout/index.tsx | 24 +++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 src/shared/components/ResponsiveRootLayout/index.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index efcec8a..97874b7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,3 +1,4 @@ +import ResponsiveRootLayout from '@/shared/components/ResponsiveRootLayout'; import ReactQueryClientProvider from '@/shared/lib/reactQuery/ReactQueryClientProvider'; import StyledComponentsRegistry from '@/shared/lib/styledComponents/StyledComponentsRegistry'; import StyledReset from '@/shared/lib/styledComponents/StyledReset'; @@ -14,7 +15,7 @@ export default function RootLayout({ - {children} + {children} diff --git a/src/shared/components/ResponsiveRootLayout/index.tsx b/src/shared/components/ResponsiveRootLayout/index.tsx new file mode 100644 index 0000000..1446558 --- /dev/null +++ b/src/shared/components/ResponsiveRootLayout/index.tsx @@ -0,0 +1,24 @@ +'use client'; + +import { ReactNode } from 'react'; +import { css } from 'styled-components'; + +export default function ResponsiveRootLayout({ children }: { children: ReactNode }) { + return ( +
+ {children} +
+ ); +} From 9d2b6dece15fb92fbf45cfa6f562df5ba8b54bfd Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Tue, 21 Jan 2025 21:54:19 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=20=EC=A0=84=EC=97=AD=20css=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 일관성 있는 레이아웃 스타일 - 페이지 배경색 추가 --- src/app/global.css | 15 +++++++++++++++ src/app/layout.tsx | 1 + 2 files changed, 16 insertions(+) create mode 100644 src/app/global.css diff --git a/src/app/global.css b/src/app/global.css new file mode 100644 index 0000000..fede371 --- /dev/null +++ b/src/app/global.css @@ -0,0 +1,15 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + word-break: break-all; +} + +@media screen and (min-width: 450px) { + body { + background-color: rgb(245, 245, 245); + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 97874b7..2248af6 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,3 +1,4 @@ +import '@/app/global.css'; import ResponsiveRootLayout from '@/shared/components/ResponsiveRootLayout'; import ReactQueryClientProvider from '@/shared/lib/reactQuery/ReactQueryClientProvider'; import StyledComponentsRegistry from '@/shared/lib/styledComponents/StyledComponentsRegistry'; From cfe5c3defe932ae1dbdf39332862d988fd577254 Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Tue, 21 Jan 2025 21:56:03 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=EC=BB=A8?= =?UTF-8?q?=ED=85=90=EC=B8=A0=20=EB=9E=98=ED=8D=BC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20MainContent=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/MainContent/index.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/shared/components/MainContent/index.tsx diff --git a/src/shared/components/MainContent/index.tsx b/src/shared/components/MainContent/index.tsx new file mode 100644 index 0000000..44b6618 --- /dev/null +++ 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 ( +
+ {children} +
+ ); +} From 8c7381ed5c75e5ebd11dae168c82d0d958e2c01c Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Tue, 21 Jan 2025 21:56:26 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20=EC=BB=A8?= =?UTF-8?q?=ED=85=90=EC=B8=A0=20=EB=9E=98=ED=8D=BC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20HeaderContent=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/HeaderContent/index.tsx | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/shared/components/HeaderContent/index.tsx diff --git a/src/shared/components/HeaderContent/index.tsx b/src/shared/components/HeaderContent/index.tsx new file mode 100644 index 0000000..820c460 --- /dev/null +++ b/src/shared/components/HeaderContent/index.tsx @@ -0,0 +1,39 @@ +'use client'; + +import { ReactNode } from 'react'; +import { css } from 'styled-components'; + +interface HeaderContentProps { + children: ReactNode; + /** + * 시작 부분에 표시할 요소입니다. + */ + startAction?: ReactNode; + /** + * 끝 부분에 표시할 요소입니다. + */ + endAction?: ReactNode; + /** + * true일 경우 헤더가 스티키 포지션으로 고정됩니다. (top: 0) + */ + sticky?: boolean; +} + +export default function HeaderContent({ children, startAction, endAction, sticky }: HeaderContentProps) { + return ( +
+ {startAction ? startAction : } + {children} + {endAction ? endAction : } +
+ ); +} From 3fa9e4b152f53af0449a9ce69937912600de2a9d Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Wed, 22 Jan 2025 22:09:25 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20HeaderContent=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20divider=20prop=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/HeaderContent/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/shared/components/HeaderContent/index.tsx b/src/shared/components/HeaderContent/index.tsx index 820c460..27f5776 100644 --- a/src/shared/components/HeaderContent/index.tsx +++ b/src/shared/components/HeaderContent/index.tsx @@ -17,18 +17,24 @@ interface HeaderContentProps { * true일 경우 헤더가 스티키 포지션으로 고정됩니다. (top: 0) */ sticky?: boolean; + /** + * 헤더 구분선 표시 여부 + */ + divider?: boolean; } -export default function HeaderContent({ children, startAction, endAction, sticky }: HeaderContentProps) { +export default function HeaderContent({ children, startAction, endAction, sticky, divider }: HeaderContentProps) { return (
theme.colors.gray10};`} `} > {startAction ? startAction : } From be687c1ccd7a6ceebef3a121c72a887133c193f9 Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Wed, 22 Jan 2025 22:14:36 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat:=20=ED=99=88,=20=EC=B1=84=ED=8C=85?= =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80,=20=ED=83=80=EB=A1=9C=20?= =?UTF-8?q?=EA=B2=B0=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=EC=A1=B0=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/chats/[chatId]/page.tsx | 11 +++++++++++ src/app/chats/[chatId]/tarot-reading/page.tsx | 11 +++++++++++ src/app/page.tsx | 12 ++++++++++-- 3 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 src/app/chats/[chatId]/page.tsx create mode 100644 src/app/chats/[chatId]/tarot-reading/page.tsx diff --git a/src/app/chats/[chatId]/page.tsx b/src/app/chats/[chatId]/page.tsx new file mode 100644 index 0000000..b6741cb --- /dev/null +++ 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 ( + <> + {null} + {null} + + ); +} diff --git a/src/app/chats/[chatId]/tarot-reading/page.tsx b/src/app/chats/[chatId]/tarot-reading/page.tsx new file mode 100644 index 0000000..36ab7ff --- /dev/null +++ b/src/app/chats/[chatId]/tarot-reading/page.tsx @@ -0,0 +1,11 @@ +import HeaderContent from '@/shared/components/HeaderContent'; +import MainContent from '@/shared/components/MainContent'; + +export default function TarotReadingPage() { + return ( + <> + {null} + {null} + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 4032352..f9e4e5b 100644 --- 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 ( + <> + {null} + {null} + + ); } From b726b345c9ed138027ab24418b273b354e23a34a Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Wed, 22 Jan 2025 23:59:10 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=ED=83=80=EB=A1=9C=20=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20URL=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/chats/[chatId]/tarot-reading/{ => [resultId]}/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/app/chats/[chatId]/tarot-reading/{ => [resultId]}/page.tsx (82%) diff --git a/src/app/chats/[chatId]/tarot-reading/page.tsx b/src/app/chats/[chatId]/tarot-reading/[resultId]/page.tsx similarity index 82% rename from src/app/chats/[chatId]/tarot-reading/page.tsx rename to src/app/chats/[chatId]/tarot-reading/[resultId]/page.tsx index 36ab7ff..f4509a9 100644 --- a/src/app/chats/[chatId]/tarot-reading/page.tsx +++ b/src/app/chats/[chatId]/tarot-reading/[resultId]/page.tsx @@ -1,7 +1,7 @@ import HeaderContent from '@/shared/components/HeaderContent'; import MainContent from '@/shared/components/MainContent'; -export default function TarotReadingPage() { +export default function TarotReadingResultPage() { return ( <> {null} From 8ea8bcd588af73dcb7a4821e71bfff0587c01409 Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Thu, 23 Jan 2025 23:20:01 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20=EC=A0=84=EC=97=AD=20css=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20Glo?= =?UTF-8?q?balStyle=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 4 +-- .../lib/styledComponents/GlobalStyle.tsx | 30 +++++++++++++++++++ 2 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 src/shared/lib/styledComponents/GlobalStyle.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 937ddc8..f1e8e9c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,11 +1,10 @@ -import '@/app/global.css'; 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 StyledReset from '@/shared/lib/styledComponents/StyledReset'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; -import './global.css'; export default function RootLayout({ children, @@ -18,6 +17,7 @@ export default function RootLayout({ + {children} diff --git a/src/shared/lib/styledComponents/GlobalStyle.tsx b/src/shared/lib/styledComponents/GlobalStyle.tsx new file mode 100644 index 0000000..c8ab69e --- /dev/null +++ b/src/shared/lib/styledComponents/GlobalStyle.tsx @@ -0,0 +1,30 @@ +'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; +} + +@media screen and (min-width: 450px) { + body { + background-color: rgb(245, 245, 245); + } +} +`; + +export default GlobalStyle; From bf587abed128dc6237b29032f2ede515f08f8733 Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Sun, 26 Jan 2025 14:06:13 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20HeaderContent=EC=9D=98=20?= =?UTF-8?q?=EA=B5=AC=EB=B6=84=EC=84=A0=EC=9D=B4=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=EC=97=90=20=EC=98=A4=EB=B2=84=ED=94=8C?= =?UTF-8?q?=EB=A1=9C=EC=9A=B0=20=EB=90=98=EB=8F=84=EB=A1=9D=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/HeaderContent/index.tsx | 45 ++++++++++++------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/src/shared/components/HeaderContent/index.tsx b/src/shared/components/HeaderContent/index.tsx index 27f5776..afc9bfa 100644 --- a/src/shared/components/HeaderContent/index.tsx +++ b/src/shared/components/HeaderContent/index.tsx @@ -25,21 +25,34 @@ interface HeaderContentProps { export default function HeaderContent({ children, startAction, endAction, sticky, divider }: HeaderContentProps) { return ( -
theme.colors.gray10};`} - `} - > - {startAction ? startAction : } - {children} - {endAction ? endAction : } -
+ <> +
+ {startAction ? startAction : } + {children} + {endAction ? endAction : } +
+ {divider && ( +
props.theme.colors.grey10}; + box-shadow: 0 0 0 100vmax ${(props) => props.theme.colors.grey10}; + clip-path: inset(0px -100vmax); + `} + /> + )} + ); } From 56c799a7bef1ccbff087453cfe94f605c7f35793 Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Sun, 26 Jan 2025 14:06:27 +0900 Subject: [PATCH 11/13] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/global.css | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 src/app/global.css diff --git a/src/app/global.css b/src/app/global.css deleted file mode 100644 index 0717bdb..0000000 --- a/src/app/global.css +++ /dev/null @@ -1,22 +0,0 @@ -*, -*::before, -*::after { - box-sizing: border-box; -} - -body { - word-break: break-all; -} - -button, -input, -select, -textarea { - font-family: inherit; -} - -@media screen and (min-width: 450px) { - body { - background-color: rgb(245, 245, 245); - } -} From 1e20149666f5fec59da5847135c52e84ad7166a2 Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Sun, 26 Jan 2025 14:07:23 +0900 Subject: [PATCH 12/13] =?UTF-8?q?feat:=20=EC=A0=84=EC=B2=B4=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EB=B0=B0=EA=B2=BD=EC=83=89=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/lib/styledComponents/GlobalStyle.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/shared/lib/styledComponents/GlobalStyle.tsx b/src/shared/lib/styledComponents/GlobalStyle.tsx index c8ab69e..ccd9604 100644 --- a/src/shared/lib/styledComponents/GlobalStyle.tsx +++ b/src/shared/lib/styledComponents/GlobalStyle.tsx @@ -19,12 +19,6 @@ select, textarea { font-family: inherit; } - -@media screen and (min-width: 450px) { - body { - background-color: rgb(245, 245, 245); - } -} `; export default GlobalStyle; From de945ff05c70416786166a327b194b2e9636f391 Mon Sep 17 00:00:00 2001 From: Jay Lee Date: Sun, 26 Jan 2025 14:10:51 +0900 Subject: [PATCH 13/13] =?UTF-8?q?feat:=20ResponsiveRootLayout=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20=EB=B0=B0=EA=B2=BD=20?= =?UTF-8?q?=EB=B0=8F=20=EA=B7=B8=EB=A6=BC=EC=9E=90=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/components/ResponsiveRootLayout/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/shared/components/ResponsiveRootLayout/index.tsx b/src/shared/components/ResponsiveRootLayout/index.tsx index 1446558..990e003 100644 --- a/src/shared/components/ResponsiveRootLayout/index.tsx +++ b/src/shared/components/ResponsiveRootLayout/index.tsx @@ -13,8 +13,6 @@ export default function ResponsiveRootLayout({ children }: { children: ReactNode flex-direction: column; @media screen and (min-width: 450px) { max-width: 600px; - background-color: rgb(255, 255, 255); - box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 8px; } `} >