Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🎉 전체 레이아웃 설정 #15

Merged
merged 1 commit into from
Oct 31, 2023
Merged

🎉 전체 레이아웃 설정 #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions src/app/(root)/(routes)/(home)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -9,6 +21,41 @@ export default function HomePage() {
<DarkModeButton />
<Link href={'/login'}>로긴</Link>
<Button variant={'gradation'}>버튼</Button>
<Dialog>
<DialogTrigger asChild>
<Button variant="primary">Share</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Share link</DialogTitle>
<DialogDescription>
Anyone who has this link will be able to view this.
</DialogDescription>
</DialogHeader>
<div className="flex items-center space-x-2">
<div className="grid flex-1 gap-2">
<Label htmlFor="link" className="sr-only">
Link
</Label>
<Input
id="link"
defaultValue="https://ui.shadcn.com/docs/installation"
readOnly
/>
</div>
<Button type="submit" className="px-3">
<span className="sr-only">Copy</span>
</Button>
</div>
<DialogFooter className="sm:justify-start">
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
</main>
)
}
14 changes: 11 additions & 3 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -8,7 +10,7 @@ import '@/styles/globals.css'

export const metadata: Metadata = {
title: '나비장터',
description: 'Generated by create next app',
description: '물물교환 플랫폼 나비장터입니다.',
}

if (Environment.apiMocking() === 'enabled') {
Expand All @@ -25,12 +27,18 @@ export default function RootLayout({
}) {
return (
<html lang="ko">
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<body>
<TanstackQueryContext>
<ThemeProviderContext>
<Suspense>
{children}
{authModal}
<div className="centered-content">
<Header isLogin={true} />
{children}
{authModal}
</div>
</Suspense>
</ThemeProviderContext>
</TanstackQueryContext>
Expand Down
2 changes: 1 addition & 1 deletion src/components/domain/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ type HeaderProps = {

const Header = ({ isLogin = false }: HeaderProps) => {
return (
<header className="grid items-center justify-between w-full grid-cols-3 px-2 h-14 shadow-bottom bg-background-color">
<header className="absolute top-0 left-0 z-10 grid items-center justify-between w-full grid-cols-3 px-2 h-nav shadow-bottom bg-background-color">
<div className="flex items-center justify-start">
<MenuButton />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/DropdownMenu/DropdownMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

absolute를 추가한 이유가 뭔가요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

레이아웃 밀려서 이것저것 시도할 때 넣었던 것 같네요. 다른 컴포넌트에 영향을 주지 않게하기 위해 했습니다

'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,
)}
Expand Down
20 changes: 20 additions & 0 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
7 changes: 7 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down