From e6b1c53f3fb4bb1caee06629ea4aa8e68ad95a19 Mon Sep 17 00:00:00 2001 From: TaegeonKim Date: Thu, 30 Jan 2025 19:59:30 +0900 Subject: [PATCH 1/3] chore: Set up custom breakpoint in tailwind --- .prettierrc | 3 ++- src/pages/index.tsx | 4 ++++ src/pages/test/home/index.tsx | 27 +++++++++++++++++++++++++++ src/styles/globals.css | 5 +++++ 4 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 src/pages/test/home/index.tsx diff --git a/.prettierrc b/.prettierrc index 8eecebe..270930a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -12,5 +12,6 @@ "proseWrap": "preserve", "jsxSingleQuote": false, "embeddedLanguageFormatting": "auto", - "plugins": ["prettier-plugin-tailwindcss"] + "plugins": ["prettier-plugin-tailwindcss"], + "tailwindStylesheet": "./src/styles/globals.css" } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 936377f..6b37fe7 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,6 +11,10 @@ const Home = () => { +
+ +
+

Pretendard _ Regular

Headline_ Pretendard Bold 36pt

diff --git a/src/pages/test/home/index.tsx b/src/pages/test/home/index.tsx new file mode 100644 index 0000000..ab3f70f --- /dev/null +++ b/src/pages/test/home/index.tsx @@ -0,0 +1,27 @@ +const HomeTest = () => { + return ( +
+
+ {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) => ( +
+

카드 {item}

+

+ 현재 화면: + + 모바일 (292px 미만) + 태블릿 (292px~1023px) + 데스크톱 (1024px~1439px) + 와이드 (1440px+) + +

+
+ ))} +
+
+ ); +}; + +export default HomeTest; diff --git a/src/styles/globals.css b/src/styles/globals.css index 242cf4b..1f030ed 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -47,6 +47,11 @@ --color-gray-700: #2b2b2e; --color-gray-800: #222124; --color-gray-900: #151515; + + /* 브레이크포인트 */ + --breakpoint-tablet: 36rem; /* 576px 이상 */ + --breakpoint-desktop: 64rem; /* 1024px 이상 */ + --breakpoint-wide: 90rem; /* 1440px 이상 */ } @layer base { From d3bdc407b74bba239f5b0704c34afa4c68cd354a Mon Sep 17 00:00:00 2001 From: TaegeonKim Date: Fri, 31 Jan 2025 20:17:14 +0900 Subject: [PATCH 2/3] feat: Implement home responsive layout --- next.config.ts | 3 ++ src/components/layout/CommonLayout.tsx | 23 ++++++++++++ src/components/layout/PostCardLayout.tsx | 19 ++++++++++ .../layout/PostDetailBottomBarLayout.tsx | 23 ++++++++++++ src/pages/layout/create-form/index.tsx | 14 ++++++++ src/pages/layout/home/index.tsx | 28 +++++++++++++++ src/pages/layout/post-detail/index.tsx | 35 +++++++++++++++++++ src/pages/test/home/index.tsx | 27 -------------- tsconfig.json | 2 +- 9 files changed, 146 insertions(+), 28 deletions(-) create mode 100644 src/components/layout/CommonLayout.tsx create mode 100644 src/components/layout/PostCardLayout.tsx create mode 100644 src/components/layout/PostDetailBottomBarLayout.tsx create mode 100644 src/pages/layout/create-form/index.tsx create mode 100644 src/pages/layout/home/index.tsx create mode 100644 src/pages/layout/post-detail/index.tsx delete mode 100644 src/pages/test/home/index.tsx diff --git a/next.config.ts b/next.config.ts index 0748d34..f22d572 100644 --- a/next.config.ts +++ b/next.config.ts @@ -3,6 +3,9 @@ import type { NextConfig } from 'next'; const nextConfig: NextConfig = { /* config options here */ reactStrictMode: true, + images: { + domains: ['picsum.photos'], + }, }; export default nextConfig; diff --git a/src/components/layout/CommonLayout.tsx b/src/components/layout/CommonLayout.tsx new file mode 100644 index 0000000..40324f7 --- /dev/null +++ b/src/components/layout/CommonLayout.tsx @@ -0,0 +1,23 @@ +import { cn } from '@/utils/cn'; + +interface CommonLayoutProps { + height: string; + backgroundColor: string; + title: string; + className?: string; +} + +export default function CommonLayout({ + height, + backgroundColor, + title, + className, +}: CommonLayoutProps) { + return ( +
+

{title}

+
+ ); +} diff --git a/src/components/layout/PostCardLayout.tsx b/src/components/layout/PostCardLayout.tsx new file mode 100644 index 0000000..99896a9 --- /dev/null +++ b/src/components/layout/PostCardLayout.tsx @@ -0,0 +1,19 @@ +import Image from 'next/image'; + +export default function PostCardLayout({ item }: { item: number }) { + return ( +
+
+ {`카드 +
+ +

카드 {item}

+
+ ); +} diff --git a/src/components/layout/PostDetailBottomBarLayout.tsx b/src/components/layout/PostDetailBottomBarLayout.tsx new file mode 100644 index 0000000..a93f250 --- /dev/null +++ b/src/components/layout/PostDetailBottomBarLayout.tsx @@ -0,0 +1,23 @@ +const smallBottomBar = () => { + return ( +
+
+ 참여시 100 Point - small +
+
+ ); +}; + +const largeBottomBar = () => { + return ( +
+
+ 참여시 100 Point +
+
+ ); +}; + +export default function PostDetailBottomBarLayout({ isSmall }: { isSmall: boolean }) { + return isSmall ? smallBottomBar() : largeBottomBar(); +} diff --git a/src/pages/layout/create-form/index.tsx b/src/pages/layout/create-form/index.tsx new file mode 100644 index 0000000..3b4fad0 --- /dev/null +++ b/src/pages/layout/create-form/index.tsx @@ -0,0 +1,14 @@ +import CommonLayout from '@/components/layout/CommonLayout'; + +const CreateFormTest = () => { + return ( +
+
+ {/* header */} + +
+
+ ); +}; + +export default CreateFormTest; diff --git a/src/pages/layout/home/index.tsx b/src/pages/layout/home/index.tsx new file mode 100644 index 0000000..3d2fe7d --- /dev/null +++ b/src/pages/layout/home/index.tsx @@ -0,0 +1,28 @@ +import CommonLayout from '@/components/layout/CommonLayout'; +import PostCardLayout from '@/components/layout/PostCardLayout'; + +const HomeTest = () => { + return ( +
+
+ {/* header */} + +
+ {/* carusel */} + +
+ {/* post info */} + +
+
+ {[...Array(15)].map((_, i) => ( + + ))} +
+
+
+
+ ); +}; + +export default HomeTest; diff --git a/src/pages/layout/post-detail/index.tsx b/src/pages/layout/post-detail/index.tsx new file mode 100644 index 0000000..110ce18 --- /dev/null +++ b/src/pages/layout/post-detail/index.tsx @@ -0,0 +1,35 @@ +import CommonLayout from '@/components/layout/CommonLayout'; +import PostDetailBottomBarLayout from '@/components/layout/PostDetailBottomBarLayout'; + +const PostDetailTest = () => { + return ( +
+
+ {/* header */} + +
+ {/* carusel */} + +
+
+ {/* post detail content */} + +
+ +
+
+
+
+ +
+
+
+
+ ); +}; + +export default PostDetailTest; diff --git a/src/pages/test/home/index.tsx b/src/pages/test/home/index.tsx deleted file mode 100644 index ab3f70f..0000000 --- a/src/pages/test/home/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -const HomeTest = () => { - return ( -
-
- {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) => ( -
-

카드 {item}

-

- 현재 화면: - - 모바일 (292px 미만) - 태블릿 (292px~1023px) - 데스크톱 (1024px~1439px) - 와이드 (1440px+) - -

-
- ))} -
-
- ); -}; - -export default HomeTest; diff --git a/tsconfig.json b/tsconfig.json index 572b7ad..4a80f71 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,6 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/layout/create-form"], "exclude": ["node_modules"] } From a29690a52e3a9f1cf17f162099ec867f29b1bbe6 Mon Sep 17 00:00:00 2001 From: TaegeonKim Date: Fri, 31 Jan 2025 21:18:44 +0900 Subject: [PATCH 3/3] feat: Implement post detail page responsive layout --- .../layout/PostDetailBottomBarLayout.tsx | 30 +++++++++++++++---- src/pages/index.tsx | 4 --- src/pages/layout/post-detail/index.tsx | 30 ++++++++++++++----- tsconfig.json | 2 +- 4 files changed, 48 insertions(+), 18 deletions(-) diff --git a/src/components/layout/PostDetailBottomBarLayout.tsx b/src/components/layout/PostDetailBottomBarLayout.tsx index a93f250..06c2752 100644 --- a/src/components/layout/PostDetailBottomBarLayout.tsx +++ b/src/components/layout/PostDetailBottomBarLayout.tsx @@ -1,8 +1,17 @@ const smallBottomBar = () => { return ( -
-
- 참여시 100 Point - small +
+
+
+
참여하기
+
+
+
♥︎
+
+
+
+
사전퀴즈 100문항
+
참여시 100 Point
); @@ -10,9 +19,18 @@ const smallBottomBar = () => { const largeBottomBar = () => { return ( -
-
- 참여시 100 Point +
+
+
200 point
+
사전 퀴즈 - 10문항
+
+
+
+
참여하기
+
+
+
♥︎
+
); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6b37fe7..936377f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,10 +11,6 @@ const Home = () => {
-
- -
-

Pretendard _ Regular

Headline_ Pretendard Bold 36pt

diff --git a/src/pages/layout/post-detail/index.tsx b/src/pages/layout/post-detail/index.tsx index 110ce18..11e2037 100644 --- a/src/pages/layout/post-detail/index.tsx +++ b/src/pages/layout/post-detail/index.tsx @@ -1,10 +1,11 @@ import CommonLayout from '@/components/layout/CommonLayout'; +import PostCardLayout from '@/components/layout/PostCardLayout'; import PostDetailBottomBarLayout from '@/components/layout/PostDetailBottomBarLayout'; const PostDetailTest = () => { return ( -
-
+
+
{/* header */}
@@ -18,15 +19,30 @@ const PostDetailTest = () => { backgroundColor="bg-gray-200" title="post detail content" /> +
- -
-
-
-
+ {/* 댓글 */} +
+ +
+ {/* 같은 카테고리의 글 */} +
같은 카테고리의 글
+
+ {[...Array(8)].map((_, i) => ( + + ))} +
+
+
+
+
+
+
+ +
); diff --git a/tsconfig.json b/tsconfig.json index 4a80f71..572b7ad 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,6 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/layout/create-form"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] }