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/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..06c2752 --- /dev/null +++ b/src/components/layout/PostDetailBottomBarLayout.tsx @@ -0,0 +1,41 @@ +const smallBottomBar = () => { + return ( +
+
+
+
참여하기
+
+
+
♥︎
+
+
+
+
사전퀴즈 100문항
+
참여시 100 Point
+
+
+ ); +}; + +const largeBottomBar = () => { + return ( +
+
+
200 point
+
사전 퀴즈 - 10문항
+
+
+
+
참여하기
+
+
+
♥︎
+
+
+
+ ); +}; + +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..11e2037 --- /dev/null +++ b/src/pages/layout/post-detail/index.tsx @@ -0,0 +1,51 @@ +import CommonLayout from '@/components/layout/CommonLayout'; +import PostCardLayout from '@/components/layout/PostCardLayout'; +import PostDetailBottomBarLayout from '@/components/layout/PostDetailBottomBarLayout'; + +const PostDetailTest = () => { + return ( +
+
+ {/* header */} + +
+ {/* carusel */} + +
+
+ {/* post detail content */} + + +
+ +
+
+ {/* 댓글 */} +
+ +
+ {/* 같은 카테고리의 글 */} +
같은 카테고리의 글
+
+ {[...Array(8)].map((_, i) => ( + + ))} +
+
+
+
+
+
+
+ +
+
+
+ ); +}; + +export default PostDetailTest; 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 {