Skip to content

Commit

Permalink
feat(desktop): 데스크탑 헤더를 구현합니다. (#106)
Browse files Browse the repository at this point in the history
  • Loading branch information
@doyn511
doyn511 authored Dec 10, 2024
1 parent 2d7a65b commit 56f917c
Show file tree
Hide file tree
Showing 11 changed files with 394 additions and 331 deletions.
39 changes: 0 additions & 39 deletions apps/desktop/app/globals.css
View file

This file was deleted.

16 changes: 3 additions & 13 deletions apps/desktop/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,5 @@
import "./globals.css";
import type { Metadata } from "next";
import localFont from "next/font/local";

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
});
import "../styles/globals.css";

export const metadata: Metadata = {
title: "Create Next App",
Expand All @@ -22,8 +12,8 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body>
<html lang="ko">
<body>{children}</body>
</html>
);
}
188 changes: 0 additions & 188 deletions apps/desktop/app/page.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,188 +0,0 @@
.page {
--gray-rgb: 0, 0, 0;
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);

--button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2;

display: grid;
grid-template-rows: 20px 1fr 20px;
align-items: center;
justify-items: center;
min-height: 100svh;
padding: 80px;
gap: 64px;
font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
.page {
--gray-rgb: 255, 255, 255;
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);

--button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a;
}
}

.main {
display: flex;
flex-direction: column;
gap: 32px;
grid-row-start: 2;
}

.main ol {
font-family: var(--font-geist-mono);
padding-left: 0;
margin: 0;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
list-style-position: inside;
}

.main li:not(:last-of-type) {
margin-bottom: 8px;
}

.main code {
font-family: inherit;
background: var(--gray-alpha-100);
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}

.ctas {
display: flex;
gap: 16px;
}

.ctas a {
appearance: none;
border-radius: 128px;
height: 48px;
padding: 0 20px;
border: none;
font-family: var(--font-geist-sans);
border: 1px solid transparent;
transition: background 0.2s, color 0.2s, border-color 0.2s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 20px;
font-weight: 500;
}

a.primary {
background: var(--foreground);
color: var(--background);
gap: 8px;
}

a.secondary {
border-color: var(--gray-alpha-200);
min-width: 180px;
}

button.secondary {
appearance: none;
border-radius: 128px;
height: 48px;
padding: 0 20px;
border: none;
font-family: var(--font-geist-sans);
border: 1px solid transparent;
transition: background 0.2s, color 0.2s, border-color 0.2s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 20px;
font-weight: 500;
background: transparent;
border-color: var(--gray-alpha-200);
min-width: 180px;
}

.footer {
font-family: var(--font-geist-sans);
grid-row-start: 3;
display: flex;
gap: 24px;
}

.footer a {
display: flex;
align-items: center;
gap: 8px;
}

.footer img {
flex-shrink: 0;
}

/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
border-color: transparent;
}

a.secondary:hover {
background: var(--button-secondary-hover);
border-color: transparent;
}

.footer a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
}

@media (max-width: 600px) {
.page {
padding: 32px;
padding-bottom: 80px;
}

.main {
align-items: center;
}

.main ol {
text-align: center;
}

.ctas {
flex-direction: column;
}

.ctas a {
font-size: 14px;
height: 40px;
padding: 0 16px;
}

a.secondary {
min-width: auto;
}

.footer {
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}

@media (prefers-color-scheme: dark) {
.logo {
filter: invert();
}
}
62 changes: 1 addition & 61 deletions apps/desktop/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,5 @@
import "../styles/globals.css";
import styles from "./page.module.css";
import Image from "next/image";

export default function Home() {
return (
<div className={styles.page}>
<main className={styles.main}>
<Image className={styles.logo} src="/next.svg" alt="Next.js logo" width={180} height={38} priority />
<ol>
<li>
Get started by editing <code>app/page.tsx</code>
</li>
<li>Save and see your changes instantly.</li>
</ol>

<div className={styles.ctas}>
<a
className={styles.primary}
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image className={styles.logo} src="/vercel.svg" alt="Vercel logomark" width={20} height={20} />
Deploy now
</a>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className={styles.secondary}
>
Read our docs
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image aria-hidden src="/file-text.svg" alt="File icon" width={16} height={16} />
Learn
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image aria-hidden src="/window.svg" alt="Window icon" width={16} height={16} />
Examples
</a>
<a
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image aria-hidden src="/globe.svg" alt="Globe icon" width={16} height={16} />
Go to nextjs.org →
</a>
</footer>
</div>
);
return <div>HOME</div>;
}
14 changes: 14 additions & 0 deletions apps/desktop/app/select-date/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import Header from "../../components/Header";

export default function layout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<div className="w-[120rem]">
<Header currentPage={"select-date"} />
<div>{children}</div>
</div>
);
}
3 changes: 3 additions & 0 deletions apps/desktop/app/select-date/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function page() {
return <div>select-date</div>;
}
39 changes: 39 additions & 0 deletions apps/desktop/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
"use client";

import { DesktopIconDonate, DesktopIconSharing, DesktopIconTeam, DesktopLogo } from "@setaday/icon";
import Link from "next/link";

interface headerProps {
currentPage: "select-date" | "select-time";
}

function Header({ currentPage }: headerProps) {
const onClickDonate = () => {};

const onClickSharing = () => {};

const onClickTeam = () => {};

return (
<header className="flex items-center justify-between h-[8rem]">
<Link href="/">
<DesktopLogo />
</Link>
<div className="flex gap-[1.6rem]">
<button type="button">
<DesktopIconDonate />
</button>
<button type="button">
<DesktopIconSharing />
</button>
{currentPage === "select-time" && (
<button type="button">
<DesktopIconTeam />
</button>
)}
</div>
</header>
);
}

export default Header;
2 changes: 2 additions & 0 deletions apps/desktop/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
"build:css": "tailwindcss -i ./styles/globals.css -o ./dist/output.css --minify"
},
"dependencies": {
"@setaday/design-token": "workspace:*",
"@setaday/icon": "workspace:*",
"@setaday/ui": "workspace:*",
"next": "15.0.0-rc.0",
"react": "19.0.0-rc-f994737d14-20240522",
Expand Down
Loading

0 comments on commit 56f917c

Please sign in to comment.