From 08b0dda0577040063898eaad58a8775e309db433 Mon Sep 17 00:00:00 2001 From: oaoong Date: Mon, 30 Oct 2023 18:15:03 +0900 Subject: [PATCH] =?UTF-8?q?:tada:=20=EC=A0=84=EC=B2=B4=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(root)/(routes)/(home)/page.tsx | 47 +++++++++++++++++++ src/app/layout.tsx | 14 ++++-- src/components/domain/Header/Header.tsx | 2 +- .../ui/DropdownMenu/DropdownMenu.tsx | 2 +- src/styles/globals.css | 20 ++++++++ tailwind.config.js | 7 +++ 6 files changed, 87 insertions(+), 5 deletions(-) diff --git a/src/app/(root)/(routes)/(home)/page.tsx b/src/app/(root)/(routes)/(home)/page.tsx index 0f000334..b84b1c83 100644 --- a/src/app/(root)/(routes)/(home)/page.tsx +++ b/src/app/(root)/(routes)/(home)/page.tsx @@ -1,6 +1,18 @@ import Link from 'next/link' import Button from '@/components/ui/Button' import { DarkModeButton } from '@/components/ui/DarkModeButton' +import { + Dialog, + DialogTrigger, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogFooter, + DialogClose, +} from '@/components/ui/Dialog' +import Input from '@/components/ui/Input' +import Label from '@/components/ui/Label' export default function HomePage() { return ( @@ -9,6 +21,41 @@ export default function HomePage() { 로긴 + + + + + + + Share link + + Anyone who has this link will be able to view this. + + +
+
+ + +
+ +
+ + + + + + + ) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d64b5807..311d1f15 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,7 @@ import { Suspense } from 'react' import type { Metadata } from 'next' +import Head from 'next/head' +import Header from '@/components/domain/Header' import { Environment } from '@/config/environment' import TanstackQueryContext from '@/contexts/TanstackQueryContext' import ThemeProviderContext from '@/contexts/ThemeProviderContext' @@ -8,7 +10,7 @@ import '@/styles/globals.css' export const metadata: Metadata = { title: '나비장터', - description: 'Generated by create next app', + description: '물물교환 플랫폼 나비장터입니다.', } if (Environment.apiMocking() === 'enabled') { @@ -25,12 +27,18 @@ export default function RootLayout({ }) { return ( + + + - {children} - {authModal} +
+
+ {children} + {authModal} +
diff --git a/src/components/domain/Header/Header.tsx b/src/components/domain/Header/Header.tsx index c861ac81..e0848a85 100644 --- a/src/components/domain/Header/Header.tsx +++ b/src/components/domain/Header/Header.tsx @@ -19,7 +19,7 @@ type HeaderProps = { const Header = ({ isLogin = false }: HeaderProps) => { return ( -
+
diff --git a/src/components/ui/DropdownMenu/DropdownMenu.tsx b/src/components/ui/DropdownMenu/DropdownMenu.tsx index 909e4c98..8fd4f40b 100644 --- a/src/components/ui/DropdownMenu/DropdownMenu.tsx +++ b/src/components/ui/DropdownMenu/DropdownMenu.tsx @@ -68,7 +68,7 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background-color p-1 text-text-color shadow-md', + 'z-50 absolute min-w-[8rem] overflow-hidden rounded-md border bg-background-color p-1 text-text-color shadow-md', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className, )} diff --git a/src/styles/globals.css b/src/styles/globals.css index b5c61c95..3b8dd281 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,3 +1,23 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + :root { + --nav-height: 3.5rem; + --page-min-width: 320px; + --page-max-width: 640px; + } +} + +@layer base { + .centered-content { + @apply max-w-[640px] min-w-[320px] shadow-2xl bg-background-color text-text-color relative overflow-hidden mx-auto; + } + + :root, + html, + body { + @apply h-full; + } +} diff --git a/tailwind.config.js b/tailwind.config.js index 5db486eb..ea0d21e0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,6 +20,13 @@ module.exports = { 'gradient-secondary': 'linear-gradient(to right, #7C54D1 0%, #534CD0 100%)', }), + height: { + nav: 'var(--nav-height)', + }, + width: { + page_min: 'var(--page-min-width)', + page_max: 'var(--page-max-width)', + }, }, }, plugins: [