Skip to content

Commit 8f9af5a

Browse files
SunCreationclaude
SunCreation
and
claude
committed
feat: 모두콘 UX/UI 디자인 적용 및 성능 최적화
- Header: 그라디언트 배경 및 ModulabsLogo 아이콘 추가 - Home: 애니메이션 성능 최적화 (무한 루프 제거, CSS 애니메이션 사용) - Home: Event Info Card 추가 (날짜, 장소 표시) - Home: 중복 헤더 제거로 UI 정리 - BottomNavigation: 새로운 UI 컴포넌트 적용 - globals.css: Moducon 브랜드 색상 변수 추가 - UI Components: shadcn/ui 컴포넌트 추가 - imports: SVG 에셋 파일 추가 (마스코트, 로고 등) - Prisma: 스키마 Git merge conflict 해결 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 5f880a4 commit 8f9af5a

48 files changed

Lines changed: 6058 additions & 388 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎moducon-backend/prisma/schema.prisma‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ model Admin {
5555
id String @id @default(uuid()) @db.Uuid
5656
username String @unique @db.VarChar(50)
5757
passwordHash String @map("password_hash") @db.VarChar(255)
58-
<<<<<<< HEAD
5958
createdAt DateTime @default(now()) @map("created_at") @db.Timestamptz(6)
6059
6160
@@map("admins")
@@ -107,9 +106,3 @@ model UserQuizAttempt {
107106
@@index([quizId], map: "idx_attempts_quiz")
108107
@@map("user_quiz_attempts")
109108
}
110-
=======
111-
createdAt DateTime @default(now()) @map("created_at") @db.Timestamptz
112-
113-
@@map("admins")
114-
}
115-
>>>>>>> backend-dev

‎moducon-frontend/package-lock.json‎

Lines changed: 1795 additions & 194 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎moducon-frontend/package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,57 @@
1111
},
1212
"dependencies": {
1313
"@hookform/resolvers": "^5.2.2",
14+
"@radix-ui/react-accordion": "^1.2.12",
15+
"@radix-ui/react-alert-dialog": "^1.1.15",
16+
"@radix-ui/react-aspect-ratio": "^1.1.8",
17+
"@radix-ui/react-avatar": "^1.1.11",
1418
"@radix-ui/react-checkbox": "^1.3.3",
19+
"@radix-ui/react-collapsible": "^1.1.12",
20+
"@radix-ui/react-context-menu": "^2.2.16",
1521
"@radix-ui/react-dialog": "^1.1.15",
22+
"@radix-ui/react-dropdown-menu": "^2.1.16",
23+
"@radix-ui/react-hover-card": "^1.1.15",
1624
"@radix-ui/react-label": "^2.1.8",
25+
"@radix-ui/react-menubar": "^1.1.16",
26+
"@radix-ui/react-navigation-menu": "^1.2.14",
27+
"@radix-ui/react-popover": "^1.1.15",
1728
"@radix-ui/react-progress": "^1.1.8",
29+
"@radix-ui/react-radio-group": "^1.3.8",
30+
"@radix-ui/react-scroll-area": "^1.2.10",
31+
"@radix-ui/react-select": "^2.2.6",
32+
"@radix-ui/react-separator": "^1.1.8",
33+
"@radix-ui/react-slider": "^1.3.6",
1834
"@radix-ui/react-slot": "^1.2.4",
35+
"@radix-ui/react-switch": "^1.2.6",
1936
"@radix-ui/react-tabs": "^1.1.13",
37+
"@radix-ui/react-toggle": "^1.1.10",
38+
"@radix-ui/react-toggle-group": "^1.1.11",
39+
"@radix-ui/react-tooltip": "^1.2.8",
2040
"@types/qrcode": "^1.5.6",
2141
"class-variance-authority": "^0.7.1",
2242
"clsx": "^2.1.1",
43+
"cmdk": "^1.1.1",
2344
"date-fns": "^4.1.0",
45+
"embla-carousel-react": "^8.6.0",
46+
"framer-motion": "^12.23.25",
2447
"gh-pages": "^6.3.0",
2548
"html5-qrcode": "^2.3.8",
49+
"input-otp": "^1.4.2",
2650
"lucide-react": "^0.553.0",
51+
"motion": "^12.23.25",
2752
"next": "16.0.3",
53+
"next-themes": "^0.4.6",
2854
"qrcode": "^1.5.4",
2955
"qrcode.react": "^4.2.0",
3056
"react": "19.2.0",
57+
"react-day-picker": "^9.11.3",
3158
"react-dom": "19.2.0",
3259
"react-hook-form": "^7.66.0",
60+
"react-resizable-panels": "^3.0.6",
61+
"recharts": "^3.5.1",
62+
"sonner": "^2.0.7",
3363
"tailwind-merge": "^3.4.0",
64+
"vaul": "^1.1.2",
3465
"zod": "^4.1.12",
3566
"zustand": "^5.0.8"
3667
},

‎moducon-frontend/src/app/globals.css‎

Lines changed: 190 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,139 @@
11
@import "tailwindcss";
2+
@custom-variant dark (&:is(.dark *));
3+
4+
@font-face {
5+
font-family: 'Ownglyph_motif';
6+
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2405@1.0/Ownglyph_motif.woff2') format('woff2');
7+
font-weight: 400;
8+
font-style: normal;
9+
}
210

311
:root {
12+
--font-size: 16px;
413
--background: #ffffff;
5-
--foreground: #171717;
14+
--foreground: oklch(0.145 0 0);
15+
--card: #ffffff;
16+
--card-foreground: oklch(0.145 0 0);
17+
--popover: oklch(1 0 0);
18+
--popover-foreground: oklch(0.145 0 0);
19+
--primary: #030213;
20+
--primary-foreground: oklch(1 0 0);
21+
--secondary: oklch(0.95 0.0058 264.53);
22+
--secondary-foreground: #030213;
23+
--muted: #ececf0;
24+
--muted-foreground: #717182;
25+
--accent: #e9ebef;
26+
--accent-foreground: #030213;
27+
--destructive: #d4183d;
28+
--destructive-foreground: #ffffff;
29+
--border: rgba(0, 0, 0, 0.1);
30+
--input: transparent;
31+
--input-background: #f3f3f5;
32+
--switch-background: #cbced4;
33+
--font-weight-medium: 500;
34+
--font-weight-normal: 400;
35+
--ring: oklch(0.708 0 0);
36+
--chart-1: oklch(0.646 0.222 41.116);
37+
--chart-2: oklch(0.6 0.118 184.704);
38+
--chart-3: oklch(0.398 0.07 227.392);
39+
--chart-4: oklch(0.828 0.189 84.429);
40+
--chart-5: oklch(0.769 0.188 70.08);
41+
--radius: 0.625rem;
42+
--sidebar: oklch(0.985 0 0);
43+
--sidebar-foreground: oklch(0.145 0 0);
44+
--sidebar-primary: #030213;
45+
--sidebar-primary-foreground: oklch(0.985 0 0);
46+
--sidebar-accent: oklch(0.97 0 0);
47+
--sidebar-accent-foreground: oklch(0.205 0 0);
48+
--sidebar-border: oklch(0.922 0 0);
49+
--sidebar-ring: oklch(0.708 0 0);
50+
51+
/* Moducon Brand Colors */
52+
--moducon-pink: #FF6B9D;
53+
--moducon-orange: #FF8B5A;
54+
--moducon-yellow: #FFA94D;
55+
}
56+
57+
.dark {
58+
--background: oklch(0.145 0 0);
59+
--foreground: oklch(0.985 0 0);
60+
--card: oklch(0.145 0 0);
61+
--card-foreground: oklch(0.985 0 0);
62+
--popover: oklch(0.145 0 0);
63+
--popover-foreground: oklch(0.985 0 0);
64+
--primary: oklch(0.985 0 0);
65+
--primary-foreground: oklch(0.205 0 0);
66+
--secondary: oklch(0.269 0 0);
67+
--secondary-foreground: oklch(0.985 0 0);
68+
--muted: oklch(0.269 0 0);
69+
--muted-foreground: oklch(0.708 0 0);
70+
--accent: oklch(0.269 0 0);
71+
--accent-foreground: oklch(0.985 0 0);
72+
--destructive: oklch(0.396 0.141 25.723);
73+
--destructive-foreground: oklch(0.637 0.237 25.331);
74+
--border: oklch(0.269 0 0);
75+
--input: oklch(0.269 0 0);
76+
--ring: oklch(0.439 0 0);
77+
--chart-1: oklch(0.488 0.243 264.376);
78+
--chart-2: oklch(0.696 0.17 162.48);
79+
--chart-3: oklch(0.769 0.188 70.08);
80+
--chart-4: oklch(0.627 0.265 303.9);
81+
--chart-5: oklch(0.645 0.246 16.439);
82+
--sidebar: oklch(0.205 0 0);
83+
--sidebar-foreground: oklch(0.985 0 0);
84+
--sidebar-primary: oklch(0.488 0.243 264.376);
85+
--sidebar-primary-foreground: oklch(0.985 0 0);
86+
--sidebar-accent: oklch(0.269 0 0);
87+
--sidebar-accent-foreground: oklch(0.985 0 0);
88+
--sidebar-border: oklch(0.269 0 0);
89+
--sidebar-ring: oklch(0.439 0 0);
690
}
791

892
@theme inline {
993
--color-background: var(--background);
1094
--color-foreground: var(--foreground);
95+
--color-card: var(--card);
96+
--color-card-foreground: var(--card-foreground);
97+
--color-popover: var(--popover);
98+
--color-popover-foreground: var(--popover-foreground);
99+
--color-primary: var(--primary);
100+
--color-primary-foreground: var(--primary-foreground);
101+
--color-secondary: var(--secondary);
102+
--color-secondary-foreground: var(--secondary-foreground);
103+
--color-muted: var(--muted);
104+
--color-muted-foreground: var(--muted-foreground);
105+
--color-accent: var(--accent);
106+
--color-accent-foreground: var(--accent-foreground);
107+
--color-destructive: var(--destructive);
108+
--color-destructive-foreground: var(--destructive-foreground);
109+
--color-border: var(--border);
110+
--color-input: var(--input);
111+
--color-input-background: var(--input-background);
112+
--color-switch-background: var(--switch-background);
113+
--color-ring: var(--ring);
114+
--color-chart-1: var(--chart-1);
115+
--color-chart-2: var(--chart-2);
116+
--color-chart-3: var(--chart-3);
117+
--color-chart-4: var(--chart-4);
118+
--color-chart-5: var(--chart-5);
119+
--radius-sm: calc(var(--radius) - 4px);
120+
--radius-md: calc(var(--radius) - 2px);
121+
--radius-lg: var(--radius);
122+
--radius-xl: calc(var(--radius) + 4px);
123+
--color-sidebar: var(--sidebar);
124+
--color-sidebar-foreground: var(--sidebar-foreground);
125+
--color-sidebar-primary: var(--sidebar-primary);
126+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
127+
--color-sidebar-accent: var(--sidebar-accent);
128+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
129+
--color-sidebar-border: var(--sidebar-border);
130+
--color-sidebar-ring: var(--sidebar-ring);
131+
132+
/* Moducon Brand Colors */
133+
--color-moducon-pink: var(--moducon-pink);
134+
--color-moducon-orange: var(--moducon-orange);
135+
--color-moducon-yellow: var(--moducon-yellow);
136+
11137
--font-sans: var(--font-geist-sans);
12138
--font-mono: var(--font-geist-mono);
13139

@@ -30,15 +156,70 @@
30156
--animate-ping: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
31157
}
32158

33-
@media (prefers-color-scheme: dark) {
34-
:root {
35-
--background: #0a0a0a;
36-
--foreground: #ededed;
159+
@layer base {
160+
* {
161+
@apply border-border outline-ring/50;
162+
}
163+
164+
body {
165+
@apply bg-background text-foreground;
166+
font-family: 'Ownglyph_motif', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
167+
}
168+
}
169+
170+
/* Base typography */
171+
@layer base {
172+
:where(:not(:has([class*=' text-']), :not(:has([class^='text-'])))) {
173+
h1 {
174+
font-size: var(--text-2xl);
175+
font-weight: var(--font-weight-medium);
176+
line-height: 1.5;
177+
}
178+
179+
h2 {
180+
font-size: var(--text-xl);
181+
font-weight: var(--font-weight-medium);
182+
line-height: 1.5;
183+
}
184+
185+
h3 {
186+
font-size: var(--text-lg);
187+
font-weight: var(--font-weight-medium);
188+
line-height: 1.5;
189+
}
190+
191+
h4 {
192+
font-size: var(--text-base);
193+
font-weight: var(--font-weight-medium);
194+
line-height: 1.5;
195+
}
196+
197+
p {
198+
font-size: var(--text-base);
199+
font-weight: var(--font-weight-normal);
200+
line-height: 1.5;
201+
}
202+
203+
label {
204+
font-size: var(--text-base);
205+
font-weight: var(--font-weight-medium);
206+
line-height: 1.5;
207+
}
208+
209+
button {
210+
font-size: var(--text-base);
211+
font-weight: var(--font-weight-medium);
212+
line-height: 1.5;
213+
}
214+
215+
input {
216+
font-size: var(--text-base);
217+
font-weight: var(--font-weight-normal);
218+
line-height: 1.5;
219+
}
37220
}
38221
}
39222

40-
body {
41-
background: var(--background);
42-
color: var(--foreground);
43-
font-family: Arial, Helvetica, sans-serif;
223+
html {
224+
font-size: var(--font-size);
44225
}

0 commit comments

Comments
 (0)