Skip to content

Commit 7116a00

Browse files
lazy-dinosaurlazy-dinosaur
committed
Style: 색상 조정
1 parent 7289992 commit 7116a00

File tree

4 files changed

+103
-64
lines changed

4 files changed

+103
-64
lines changed

‎app/(blog)/posts/[...slug]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default async function PostPage({ params }: PostPageProps) {
2525

2626
if (!post) {
2727
return (
28-
<article className="rounded-lg p-0 xl:lp-8 min-h-[70vh]">
28+
<article className="rounded-lg p-2 sm:p-7 max-w-3xl mx-auto">
2929
<h1 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">
3030
포스트를 찾을 수 없습니다.
3131
</h1>

‎app/globals.css

Lines changed: 60 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,48 +16,69 @@
1616

1717
@layer base {
1818
:root {
19-
--background: 171 0% 100%;
20-
--foreground: 171 0% 10%;
21-
--card: 171 0% 100%;
22-
--card-foreground: 171 0% 15%;
23-
--popover: 171 0% 100%;
24-
--popover-foreground: 171 95% 10%;
25-
--primary: 171 47% 54.9%;
26-
--primary-foreground: 0 0% 100%;
27-
--secondary: 171 10% 90%;
28-
--secondary-foreground: 0 0% 0%;
29-
--muted: 133 10% 95%;
30-
--muted-foreground: 171 0% 40%;
31-
--accent: 133 10% 90%;
32-
--accent-foreground: 171 0% 15%;
33-
--destructive: 0 50% 50%;
34-
--destructive-foreground: 171 0% 100%;
35-
--border: 171 20% 82%;
36-
--input: 171 20% 50%;
37-
--ring: 171 47% 54.9%;
19+
/* 라이트 모드 - 더 자연스러운 배경색 */
20+
--background: 170 30% 98%; /* 매우 연한 민트 그레이 배경 */
21+
--foreground: 173 21% 14%;
22+
23+
/* 로고 색상(#56C2B1)을 기준으로 라이트 모드 테마 */
24+
--primary: 170 46% 55%; /* #56C2B1 - 로고 메인 색상 */
25+
--primary-foreground: 0 0% 98%;
26+
27+
--secondary: 170 20% 94%; /* 연한 민트 색상 */
28+
--secondary-foreground: 170 46% 25%;
29+
30+
--muted: 170 10% 92%;
31+
--muted-foreground: 170 10% 40%;
32+
33+
--accent: 170 50% 94%;
34+
--accent-foreground: 170 46% 25%;
35+
36+
--destructive: 0 84% 60%;
37+
--destructive-foreground: 0 0% 98%;
38+
39+
--border: 170 15% 85%;
40+
--input: 170 15% 85%;
41+
--ring: 170 46% 55%;
42+
43+
--card: 170 25% 99%;
44+
--card-foreground: 173 21% 14%;
45+
46+
--popover: 170 25% 99%;
47+
--popover-foreground: 173 21% 14%;
48+
3849
--radius: 0.5rem;
3950
}
51+
4052
.dark {
41-
--background: 171 10% 10%;
42-
--foreground: 171 0% 100%;
43-
--card: 171 0% 10%;
44-
--card-foreground: 171 0% 100%;
45-
--popover: 171 10% 5%;
46-
--popover-foreground: 171 0% 100%;
47-
--primary: 171 47% 54.9%;
48-
--primary-foreground: 0 0% 100%;
49-
--secondary: 171 10% 20%;
50-
--secondary-foreground: 0 0% 100%;
51-
--muted: 133 10% 25%;
52-
--muted-foreground: 171 0% 65%;
53-
--accent: 133 10% 25%;
54-
--accent-foreground: 171 0% 95%;
55-
--destructive: 0 50% 50%;
56-
--destructive-foreground: 171 0% 100%;
57-
--border: 171 20% 50%;
58-
--input: 171 20% 50%;
59-
--ring: 171 47% 54.9%;
60-
--radius: 0.5rem;
53+
/* 다크 모드 - 더 자연스러운 배경색 */
54+
--background: 173 30% 12%; /* 어두운 청록색 배경 */
55+
--foreground: 0 0% 93%;
56+
57+
/* 로고 색상(#56C2B1)을 기준으로 다크 모드 테마 */
58+
--primary: 170 46% 55%; /* #56C2B1 - 로고 메인 색상 */
59+
--primary-foreground: 0 0% 98%;
60+
61+
--secondary: 170 40% 18%;
62+
--secondary-foreground: 0 0% 98%;
63+
64+
--muted: 170 25% 18%;
65+
--muted-foreground: 170 10% 70%;
66+
67+
--accent: 170 25% 22%;
68+
--accent-foreground: 0 0% 98%;
69+
70+
--destructive: 0 74% 42%;
71+
--destructive-foreground: 0 0% 98%;
72+
73+
--border: 170 25% 22%;
74+
--input: 170 25% 22%;
75+
--ring: 170 46% 40%;
76+
77+
--card: 173 30% 15%;
78+
--card-foreground: 0 0% 93%;
79+
80+
--popover: 173 30% 15%;
81+
--popover-foreground: 0 0% 93%;
6182
}
6283
}
6384

‎components/post-card.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const PostCard = ({
3838

3939
return (
4040
<Link href={`/posts/${urlPath}`}>
41-
<div className="hover:shadow-lg transition-shadow duration-300 h-full group shadow-md rounded-md overflow-hidden bg-card dark:border">
41+
<div className="hover:shadow-lg transition-shadow duration-300 h-full group shadow-md rounded-md overflow-hidden bg-card">
4242
{thumbnail && (
4343
<div className="relative w-full min-h-32 sm:min-h-40 md:min-h-48 aspect-video overflow-hidden rounded-md group-hover:shadow-md transition-shadow h-1/2">
4444
<Image

‎tailwind.config.ts

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,20 @@ export default {
1010
"./app/**/*.{js,ts,jsx,tsx,mdx}",
1111
],
1212
theme: {
13-
extend: {
14-
future: {
15-
hoverOnlyWhenSupported: true,
13+
container: {
14+
center: true,
15+
padding: "2rem",
16+
screens: {
17+
"2xl": "1400px",
1618
},
19+
},
20+
extend: {
1721
colors: {
18-
textColor: {
19-
primary: {
20-
DEFAULT: "hsl(var(--primary-text))",
21-
foreground: "hsl(var(--primary-foreground))",
22-
},
23-
},
22+
border: "hsl(var(--border))",
23+
input: "hsl(var(--input))",
24+
ring: "hsl(var(--ring))",
2425
background: "hsl(var(--background))",
2526
foreground: "hsl(var(--foreground))",
26-
card: {
27-
DEFAULT: "hsl(var(--card))",
28-
foreground: "hsl(var(--card-foreground))",
29-
},
30-
popover: {
31-
DEFAULT: "hsl(var(--popover))",
32-
foreground: "hsl(var(--popover-foreground))",
33-
},
3427
primary: {
3528
DEFAULT: "hsl(var(--primary))",
3629
foreground: "hsl(var(--primary-foreground))",
@@ -39,6 +32,10 @@ export default {
3932
DEFAULT: "hsl(var(--secondary))",
4033
foreground: "hsl(var(--secondary-foreground))",
4134
},
35+
destructive: {
36+
DEFAULT: "hsl(var(--destructive))",
37+
foreground: "hsl(var(--destructive-foreground))",
38+
},
4239
muted: {
4340
DEFAULT: "hsl(var(--muted))",
4441
foreground: "hsl(var(--muted-foreground))",
@@ -47,13 +44,20 @@ export default {
4744
DEFAULT: "hsl(var(--accent))",
4845
foreground: "hsl(var(--accent-foreground))",
4946
},
50-
destructive: {
51-
DEFAULT: "hsl(var(--destructive))",
52-
foreground: "hsl(var(--destructive-foreground))",
47+
popover: {
48+
DEFAULT: "hsl(var(--popover))",
49+
foreground: "hsl(var(--popover-foreground))",
50+
},
51+
card: {
52+
DEFAULT: "hsl(var(--card))",
53+
foreground: "hsl(var(--card-foreground))",
54+
},
55+
// 로고 색상 추가
56+
logo: {
57+
DEFAULT: "#56C2B1",
58+
light: "#6ED9C8",
59+
dark: "#489E90",
5360
},
54-
border: "hsl(var(--border))",
55-
input: "hsl(var(--input))",
56-
ring: "hsl(var(--ring))",
5761
selection: {
5862
DEFAULT: "hsl(var(--selection))",
5963
foreground: "hsl(var(--selection-foreground))",
@@ -97,6 +101,20 @@ export default {
97101
},
98102
},
99103
},
104+
keyframes: {
105+
"accordion-down": {
106+
from: { height: "0" },
107+
to: { height: "var(--radix-accordion-content-height)" },
108+
},
109+
"accordion-up": {
110+
from: { height: "var(--radix-accordion-content-height)" },
111+
to: { height: "0" },
112+
},
113+
},
114+
animation: {
115+
"accordion-down": "accordion-down 0.2s ease-out",
116+
"accordion-up": "accordion-up 0.2s ease-out",
117+
},
100118
},
101119
},
102120
plugins: [animate, typographyPlugin],

0 commit comments

Comments
 (0)