Skip to content

Commit 56f917c

Browse files
doyn511doyn511
authored
feat(desktop): 데스크탑 헤더를 구현합니다. (#106)
1 parent 2d7a65b commit 56f917c

File tree

11 files changed

+394
-331
lines changed

11 files changed

+394
-331
lines changed

‎apps/desktop/app/globals.css‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎apps/desktop/app/layout.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
1-
import "./globals.css";
21
import type { Metadata } from "next";
3-
import localFont from "next/font/local";
4-
5-
const geistSans = localFont({
6-
src: "./fonts/GeistVF.woff",
7-
variable: "--font-geist-sans",
8-
});
9-
const geistMono = localFont({
10-
src: "./fonts/GeistMonoVF.woff",
11-
variable: "--font-geist-mono",
12-
});
2+
import "../styles/globals.css";
133

144
export const metadata: Metadata = {
155
title: "Create Next App",
@@ -22,8 +12,8 @@ export default function RootLayout({
2212
children: React.ReactNode;
2313
}>) {
2414
return (
25-
<html lang="en">
26-
<body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body>
15+
<html lang="ko">
16+
<body>{children}</body>
2717
</html>
2818
);
2919
}

‎apps/desktop/app/page.module.css‎

Lines changed: 0 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -1,188 +0,0 @@
1-
.page {
2-
--gray-rgb: 0, 0, 0;
3-
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
4-
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
5-
6-
--button-primary-hover: #383838;
7-
--button-secondary-hover: #f2f2f2;
8-
9-
display: grid;
10-
grid-template-rows: 20px 1fr 20px;
11-
align-items: center;
12-
justify-items: center;
13-
min-height: 100svh;
14-
padding: 80px;
15-
gap: 64px;
16-
font-synthesis: none;
17-
}
18-
19-
@media (prefers-color-scheme: dark) {
20-
.page {
21-
--gray-rgb: 255, 255, 255;
22-
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
23-
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
24-
25-
--button-primary-hover: #ccc;
26-
--button-secondary-hover: #1a1a1a;
27-
}
28-
}
29-
30-
.main {
31-
display: flex;
32-
flex-direction: column;
33-
gap: 32px;
34-
grid-row-start: 2;
35-
}
36-
37-
.main ol {
38-
font-family: var(--font-geist-mono);
39-
padding-left: 0;
40-
margin: 0;
41-
font-size: 14px;
42-
line-height: 24px;
43-
letter-spacing: -0.01em;
44-
list-style-position: inside;
45-
}
46-
47-
.main li:not(:last-of-type) {
48-
margin-bottom: 8px;
49-
}
50-
51-
.main code {
52-
font-family: inherit;
53-
background: var(--gray-alpha-100);
54-
padding: 2px 4px;
55-
border-radius: 4px;
56-
font-weight: 600;
57-
}
58-
59-
.ctas {
60-
display: flex;
61-
gap: 16px;
62-
}
63-
64-
.ctas a {
65-
appearance: none;
66-
border-radius: 128px;
67-
height: 48px;
68-
padding: 0 20px;
69-
border: none;
70-
font-family: var(--font-geist-sans);
71-
border: 1px solid transparent;
72-
transition: background 0.2s, color 0.2s, border-color 0.2s;
73-
cursor: pointer;
74-
display: flex;
75-
align-items: center;
76-
justify-content: center;
77-
font-size: 16px;
78-
line-height: 20px;
79-
font-weight: 500;
80-
}
81-
82-
a.primary {
83-
background: var(--foreground);
84-
color: var(--background);
85-
gap: 8px;
86-
}
87-
88-
a.secondary {
89-
border-color: var(--gray-alpha-200);
90-
min-width: 180px;
91-
}
92-
93-
button.secondary {
94-
appearance: none;
95-
border-radius: 128px;
96-
height: 48px;
97-
padding: 0 20px;
98-
border: none;
99-
font-family: var(--font-geist-sans);
100-
border: 1px solid transparent;
101-
transition: background 0.2s, color 0.2s, border-color 0.2s;
102-
cursor: pointer;
103-
display: flex;
104-
align-items: center;
105-
justify-content: center;
106-
font-size: 16px;
107-
line-height: 20px;
108-
font-weight: 500;
109-
background: transparent;
110-
border-color: var(--gray-alpha-200);
111-
min-width: 180px;
112-
}
113-
114-
.footer {
115-
font-family: var(--font-geist-sans);
116-
grid-row-start: 3;
117-
display: flex;
118-
gap: 24px;
119-
}
120-
121-
.footer a {
122-
display: flex;
123-
align-items: center;
124-
gap: 8px;
125-
}
126-
127-
.footer img {
128-
flex-shrink: 0;
129-
}
130-
131-
/* Enable hover only on non-touch devices */
132-
@media (hover: hover) and (pointer: fine) {
133-
a.primary:hover {
134-
background: var(--button-primary-hover);
135-
border-color: transparent;
136-
}
137-
138-
a.secondary:hover {
139-
background: var(--button-secondary-hover);
140-
border-color: transparent;
141-
}
142-
143-
.footer a:hover {
144-
text-decoration: underline;
145-
text-underline-offset: 4px;
146-
}
147-
}
148-
149-
@media (max-width: 600px) {
150-
.page {
151-
padding: 32px;
152-
padding-bottom: 80px;
153-
}
154-
155-
.main {
156-
align-items: center;
157-
}
158-
159-
.main ol {
160-
text-align: center;
161-
}
162-
163-
.ctas {
164-
flex-direction: column;
165-
}
166-
167-
.ctas a {
168-
font-size: 14px;
169-
height: 40px;
170-
padding: 0 16px;
171-
}
172-
173-
a.secondary {
174-
min-width: auto;
175-
}
176-
177-
.footer {
178-
flex-wrap: wrap;
179-
align-items: center;
180-
justify-content: center;
181-
}
182-
}
183-
184-
@media (prefers-color-scheme: dark) {
185-
.logo {
186-
filter: invert();
187-
}
188-
}

‎apps/desktop/app/page.tsx‎

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,5 @@
11
import "../styles/globals.css";
2-
import styles from "./page.module.css";
3-
import Image from "next/image";
42

53
export default function Home() {
6-
return (
7-
<div className={styles.page}>
8-
<main className={styles.main}>
9-
<Image className={styles.logo} src="/next.svg" alt="Next.js logo" width={180} height={38} priority />
10-
<ol>
11-
<li>
12-
Get started by editing <code>app/page.tsx</code>
13-
</li>
14-
<li>Save and see your changes instantly.</li>
15-
</ol>
16-
17-
<div className={styles.ctas}>
18-
<a
19-
className={styles.primary}
20-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
21-
target="_blank"
22-
rel="noopener noreferrer"
23-
>
24-
<Image className={styles.logo} src="/vercel.svg" alt="Vercel logomark" width={20} height={20} />
25-
Deploy now
26-
</a>
27-
<a
28-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
29-
target="_blank"
30-
rel="noopener noreferrer"
31-
className={styles.secondary}
32-
>
33-
Read our docs
34-
</a>
35-
</div>
36-
</main>
37-
<footer className={styles.footer}>
38-
<a
39-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
40-
target="_blank"
41-
rel="noopener noreferrer"
42-
>
43-
<Image aria-hidden src="/file-text.svg" alt="File icon" width={16} height={16} />
44-
Learn
45-
</a>
46-
<a
47-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
48-
target="_blank"
49-
rel="noopener noreferrer"
50-
>
51-
<Image aria-hidden src="/window.svg" alt="Window icon" width={16} height={16} />
52-
Examples
53-
</a>
54-
<a
55-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
<Image aria-hidden src="/globe.svg" alt="Globe icon" width={16} height={16} />
60-
Go to nextjs.org →
61-
</a>
62-
</footer>
63-
</div>
64-
);
4+
return <div>HOME</div>;
655
}

‎apps/desktop/app/select-date/layout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Header from "../../components/Header";
2+
3+
export default function layout({
4+
children,
5+
}: Readonly<{
6+
children: React.ReactNode;
7+
}>) {
8+
return (
9+
<div className="w-[120rem]">
10+
<Header currentPage={"select-date"} />
11+
<div>{children}</div>
12+
</div>
13+
);
14+
}

‎apps/desktop/app/select-date/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function page() {
2+
return <div>select-date</div>;
3+
}

‎apps/desktop/components/Header.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use client";
2+
3+
import { DesktopIconDonate, DesktopIconSharing, DesktopIconTeam, DesktopLogo } from "@setaday/icon";
4+
import Link from "next/link";
5+
6+
interface headerProps {
7+
currentPage: "select-date" | "select-time";
8+
}
9+
10+
function Header({ currentPage }: headerProps) {
11+
const onClickDonate = () => {};
12+
13+
const onClickSharing = () => {};
14+
15+
const onClickTeam = () => {};
16+
17+
return (
18+
<header className="flex items-center justify-between h-[8rem]">
19+
<Link href="/">
20+
<DesktopLogo />
21+
</Link>
22+
<div className="flex gap-[1.6rem]">
23+
<button type="button">
24+
<DesktopIconDonate />
25+
</button>
26+
<button type="button">
27+
<DesktopIconSharing />
28+
</button>
29+
{currentPage === "select-time" && (
30+
<button type="button">
31+
<DesktopIconTeam />
32+
</button>
33+
)}
34+
</div>
35+
</header>
36+
);
37+
}
38+
39+
export default Header;

‎apps/desktop/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
"build:css": "tailwindcss -i ./styles/globals.css -o ./dist/output.css --minify"
1010
},
1111
"dependencies": {
12+
"@setaday/design-token": "workspace:*",
13+
"@setaday/icon": "workspace:*",
1214
"@setaday/ui": "workspace:*",
1315
"next": "15.0.0-rc.0",
1416
"react": "19.0.0-rc-f994737d14-20240522",

0 commit comments

Comments
 (0)