Skip to content

Commit 384b56f

Browse files
youngminssclaude
youngminss
and
claude
authored
feat: [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 (#59)
* feat: global Layout Root 컴포넌트에 box shadow 적용 * feat: 업데이트된 semantic color token 추가 및 global body background color 추가 * fix: REGION_OPTIONS label 오름차순 정렬 지역 옵션을 label 기준 오름차순으로 정렬 - 변경 전: 홍대입구역 → 강남역 → 공덕역 - 변경 후: 강남역 → 공덕역 → 홍대입구역 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * chore: format script에 css 파일 확장자 추가 prettier format 대상에 css 파일 포함 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * style: css 파일 포맷팅 수정 - trailing whitespace 제거 - indentation 통일 - 파일 끝 newline 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
1 parent e5758b4 commit 384b56f

File tree

8 files changed

+34
-16
lines changed

8 files changed

+34
-16
lines changed

‎app/globals.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@import "../src/styles/layout.css";
88
@import "../src/styles/dimension.css";
99
@import "../src/styles/spacing.css";
10+
@import "../src/styles/shadow.css";
1011

1112
@base {
1213
html {

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function RootLayout({
4545
return (
4646
<html lang="en" className="ygi:overflow-x-hidden">
4747
<body
48-
className={`${geistSans.variable} ${geistMono.variable} antialiased ygi:overflow-x-hidden`}
48+
className={`${geistSans.variable} ${geistMono.variable} antialiased ygi:overflow-x-hidden ygi:bg-bg-website`}
4949
>
5050
{children}
5151
<Analytics />

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"build": "next build",
88
"start": "next start",
99
"lint": "eslint",
10-
"format": "prettier --write \"src/**/*.{ts,tsx}\" \"app/**/*.{ts,tsx}\" --ignore-unknown",
10+
"format": "prettier --write \"src/**/*.{ts,tsx,css}\" \"app/**/*.{ts,tsx,css}\" --ignore-unknown",
1111
"generate:colors": "node scripts/colors/generate.js"
1212
},
1313
"dependencies": {

‎src/components/layout/Root.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ interface RootProps {
66

77
export const Root = ({ children }: RootProps) => {
88
return (
9-
<div className="ygi:relative ygi:mx-auto ygi:min-h-screen-dynamic ygi:w-full ygi:max-w-root-layout">
9+
<div className="ygi:relative ygi:mx-auto ygi:min-h-screen-dynamic ygi:w-full ygi:max-w-root-layout ygi:shadow-drop">
1010
{children}
1111
</div>
1212
);

‎src/constants/color.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -119,35 +119,39 @@ export const colors = {
119119
bg: {
120120
white: "#ffffff",
121121
gray: "#f3f4f6",
122+
website: "#e5e7eb",
122123
dim: "rgba(31, 41, 51, 0.16)",
123124
},
124125
surface: {
125126
white: "#ffffff",
126-
lightgray: "#f9fafb",
127-
gray: "#f3f4f6",
128127
primary: "#ffedea",
129-
disabled: "#f3f4f6",
130128
secondary: "#ecf6ff",
129+
lightgray: "#f9fafb",
130+
gray: "#f3f4f6",
131+
disabled: "#f9fafb",
132+
active: "#ff5a3c",
133+
dark: "#1f2933",
131134
},
132135
text: {
133136
primary: "#111827",
134137
secondary: "#6b7280",
135-
disabled: "#9ca3af",
138+
disabled: "#d1d5db",
136139
inverse: "#ffffff",
137140
inverseSecondary: "#f9fafb",
138141
placeholder: "#9ca3af",
139142
interactive: "#ff5a3c",
140143
},
141144
border: {
142145
default: "#e5e7eb",
143-
strong: "#1f2933",
144146
primary: "#ff5a3c",
145147
primaryOpacity: "rgba(255, 90, 60, 0.8)",
146148
secondary: "#53b7ff",
149+
inverse: "#ffffff",
147150
},
148151
icon: {
149152
default: "#6b7280",
150153
disabled: "#9ca3af",
154+
strong: "#1f2933",
151155
inverse: "#ffffff",
152156
},
153157
button: {
@@ -159,7 +163,10 @@ export const colors = {
159163
secondaryDisabled: "#ffab9e",
160164
tertiary: "#f3f4f6",
161165
tertiaryHover: "#e5e7eb",
162-
tertiaryDisabled: "#f3f4f6",
166+
tertiaryDisabled: "#f9fafb",
167+
inverse: "#ffffff",
168+
inverseHover: "#f9fafb",
169+
inverseDisabled: "#f3f4f6",
163170
},
164171
} as const;
165172

‎src/constants/gathering/opinion/region.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const REGION_OPTIONS: ReadonlyArray<{
1616
value: Region;
1717
label: string;
1818
}> = [
19-
{ value: REGION.HONGDAE, label: REGION_LABEL.HONGDAE },
2019
{ value: REGION.GANGNAM, label: REGION_LABEL.GANGNAM },
2120
{ value: REGION.GONGDEOK, label: REGION_LABEL.GONGDEOK },
21+
{ value: REGION.HONGDAE, label: REGION_LABEL.HONGDAE },
2222
];

‎src/styles/color.css‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,36 +75,40 @@
7575
/* Background */
7676
--color-bg-white: var(--ygi-color-palette-common-white);
7777
--color-bg-gray: var(--ygi-color-palette-gray-100);
78+
--color-bg-website: var(--ygi-color-palette-gray-200);
7879
--color-bg-dim: var(--ygi-color-palette-opacity-gray-16);
7980

8081
/* Surface */
8182
--color-surface-white: var(--ygi-color-palette-common-white);
82-
--color-surface-lightgray: var(--ygi-color-palette-gray-50);
83-
--color-surface-gray: var(--ygi-color-palette-gray-100);
8483
--color-surface-primary: var(--ygi-color-palette-primary-50);
85-
--color-surface-disabled: var(--ygi-color-palette-gray-100);
8684
--color-surface-secondary: var(--ygi-color-palette-secondary-50);
85+
--color-surface-lightgray: var(--ygi-color-palette-gray-50);
86+
--color-surface-gray: var(--ygi-color-palette-gray-100);
87+
--color-surface-disabled: var(--ygi-color-palette-gray-50);
88+
8789
--color-surface-active: var(--ygi-color-palette-primary-500);
90+
--color-surface-dark: var(--ygi-color-palette-gray-800);
8891

8992
/* Text */
9093
--color-text-primary: var(--ygi-color-palette-gray-900);
9194
--color-text-secondary: var(--ygi-color-palette-gray-500);
92-
--color-text-disabled: var(--ygi-color-palette-gray-400);
95+
--color-text-disabled: var(--ygi-color-palette-gray-300);
9396
--color-text-inverse: var(--ygi-color-palette-common-white);
9497
--color-text-inverse-secondary: var(--ygi-color-palette-gray-50);
9598
--color-text-placeholder: var(--ygi-color-palette-gray-400);
9699
--color-text-interactive: var(--ygi-color-palette-primary-500);
97100

98101
/* Border */
99102
--color-border-default: var(--ygi-color-palette-gray-200);
100-
--color-border-strong: var(--ygi-color-palette-gray-800);
101103
--color-border-primary: var(--ygi-color-palette-primary-500);
102104
--color-border-primary-opacity: var(--ygi-color-palette-opacity-primary-80);
103105
--color-border-secondary: var(--ygi-color-palette-secondary-500);
106+
--color-border-inverse: var(--ygi-color-palette-common-white);
104107

105108
/* Icon */
106109
--color-icon-default: var(--ygi-color-palette-gray-500);
107110
--color-icon-disabled: var(--ygi-color-palette-gray-400);
111+
--color-icon-strong: var(--ygi-color-palette-gray-800);
108112
--color-icon-inverse: var(--ygi-color-palette-common-white);
109113

110114
/* Button */
@@ -116,5 +120,8 @@
116120
--color-button-secondary-disabled: var(--ygi-color-palette-primary-200);
117121
--color-button-tertiary: var(--ygi-color-palette-gray-100);
118122
--color-button-tertiary-hover: var(--ygi-color-palette-gray-200);
119-
--color-button-tertiary-disabled: var(--ygi-color-palette-gray-100);
123+
--color-button-tertiary-disabled: var(--ygi-color-palette-gray-50);
124+
--color-button-inverse: var(--ygi-color-palette-common-white);
125+
--color-button-inverse-hover: var(--ygi-color-palette-gray-50);
126+
--color-button-inverse-disabled: var(--ygi-color-palette-gray-100);
120127
}

‎src/styles/shadow.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@theme {
2+
--shadow-drop: 0 0 20px 0 var(--ygi-color-palette-opacity-gray-8);
3+
}

0 commit comments

Comments
 (0)