Merge remote-tracking branch 'gitea/master'

# Conflicts:
#	.idea/workspace.xml

.idea/workspace.xml

@@ -4,10 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="027e6af4-a007-480d-9766-cd603cf60fb1" name="변경" comment="새로운 Svelte 컴포넌트 추가 및 기존 컴포넌트의 내보내기 수정">
+    <list default="true" id="027e6af4-a007-480d-9766-cd603cf60fb1" name="변경" comment="gzip 압축 플러그인 추가 및 개발 서버 설정 개선">
-      <change beforePath="$PROJECT_DIR$/.github/git-commit-instructions.md" beforeDir="false" afterPath="$PROJECT_DIR$/.github/git-commit-instructions.md" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/routes/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/+page.svelte" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -17,6 +15,9 @@
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
+  <component name="PackageJsonUpdateNotifier">
+    <dismissed value="$PROJECT_DIR$/package.json" />
+  </component>
   <component name="ProjectColorInfo">{
   &quot;associatedIndex&quot;: 4
 }</component>
@@ -25,37 +26,36 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
+  <component name="PropertiesComponent">{
-  "keyToString": {
+  &quot;keyToString&quot;: {
-    "ModuleVcsDetector.initialDetectionPerformed": "true",
+    &quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
-    "RunOnceActivity.ShowReadmeOnStart": "true",
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    "RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
+    &quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252&quot;: &quot;true&quot;,
-    "RunOnceActivity.git.unshallow": "true",
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    "com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultModelSelectionForGA.v1": "true",
+    &quot;SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    "git-widget-placeholder": "master",
+    &quot;com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultAutoModeForALLUsers.v1&quot;: &quot;true&quot;,
-    "ignore.virus.scanning.warn.message": "true",
+    &quot;com.intellij.ml.llm.matterhorn.ej.ui.settings.DefaultModelSelectionForGA.v1&quot;: &quot;true&quot;,
-    "junie.onboarding.icon.badge.shown": "true",
+    &quot;git-widget-placeholder&quot;: &quot;master&quot;,
-    "kotlin-language-version-configured": "true",
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    "last_opened_file_path": "C:/gitea/taisai-svelte",
+    &quot;junie.onboarding.icon.badge.shown&quot;: &quot;true&quot;,
-    "node.js.detected.package.eslint": "true",
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    "node.js.detected.package.tslint": "true",
+    &quot;last_opened_file_path&quot;: &quot;C:/gitea/taisai-svelte&quot;,
-    "node.js.selected.package.eslint": "(autodetect)",
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    "node.js.selected.package.tslint": "(autodetect)",
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    "nodejs_package_manager_path": "pnpm",
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    "npm.build.executor": "Run",
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    "npm.dev.executor": "Run",
+    &quot;nodejs_package_manager_path&quot;: &quot;pnpm&quot;,
-    "npm.preview.executor": "Run",
+    &quot;npm.build.executor&quot;: &quot;Run&quot;,
-    "prettierjs.PrettierConfiguration.Package": "C:\\gitea\\taisai-svelte\\node_modules\\prettier",
+    &quot;npm.db:push.executor&quot;: &quot;Run&quot;,
-    "settings.editor.selected.configurable": "com.github.copilot.settings.customization.CustomizationConfigurable",
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    "to.speed.mode.migration.done": "true",
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\gitea\\taisai-svelte\\node_modules\\prettier&quot;,
-    "ts.external.directory.path": "C:\\gitea\\taisai-svelte\\node_modules\\typescript\\lib",
+    &quot;settings.editor.selected.configurable&quot;: &quot;com.github.copilot.settings.customization.CustomizationConfigurable&quot;,
-    "vue.rearranger.settings.migration": "true"
+    &quot;to.speed.mode.migration.done&quot;: &quot;true&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\giteat\\taisai-svelte\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RunManager" selected="npm.dev">
-    <configuration name="이름이 지정되지 않았습니다" type="NodeJSConfigurationType" nameIsGenerated="true" working-dir="$PROJECT_DIR$">
-      <method v="2" />
-    </configuration>
     <configuration name="build" type="js.build_tools.npm" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -66,6 +66,26 @@
       <envs />
       <method v="2" />
     </configuration>
+    <configuration name="db:push" type="js.build_tools.npm" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="db:push" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
+    <configuration name="db:studio" type="js.build_tools.npm" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="db:studio" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
     <configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
@@ -87,10 +107,11 @@
       <method v="2" />
     </configuration>
     <list>
-      <item itemvalue="Node.js.이름이 지정되지 않았습니다" />
+      <item itemvalue="npm.db:push" />
-      <item itemvalue="npm.build" />
       <item itemvalue="npm.dev" />
       <item itemvalue="npm.preview" />
+      <item itemvalue="npm.build" />
+      <item itemvalue="npm.db:studio" />
     </list>
   </component>
   <component name="SharedIndexes">
@@ -108,34 +129,29 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1763044396291</updated>
-      <workItem from="1763044399917" duration="3666000" />
+      <workItem from="1763044399917" duration="3349000" />
-      <workItem from="1763048135655" duration="877000" />
+      <workItem from="1763077156406" duration="2309000" />
+      <workItem from="1763079842807" duration="196000" />
+      <workItem from="1763080079076" duration="640000" />
+      <workItem from="1763093782948" duration="2350000" />
     </task>
-    <task id="LOCAL-00001" summary="새로운 Svelte 컴포넌트 추가 및 기존 컴포넌트의 내보내기 수정">
+    <task id="LOCAL-00001" summary="gzip 압축 플러그인 추가 및 개발 서버 설정 개선">
       <option name="closed" value="true" />
-      <created>1763047847678</created>
+      <created>1763079503671</created>
       <option name="number" value="00001" />
       <option name="presentableId" value="LOCAL-00001" />
       <option name="project" value="LOCAL" />
-      <updated>1763047847678</updated>
+      <updated>1763079503671</updated>
     </task>
-    <task id="LOCAL-00002" summary="새로운 Svelte 컴포넌트 추가 및 기존 컴포넌트의 내보내기 수정">
+    <option name="localTasksCounter" value="2" />
-      <option name="closed" value="true" />
-      <created>1763047856945</created>
-      <option name="number" value="00002" />
-      <option name="presentableId" value="LOCAL-00002" />
-      <option name="project" value="LOCAL" />
-      <updated>1763047856945</updated>
-    </task>
-    <option name="localTasksCounter" value="3" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="새로운 Svelte 컴포넌트 추가 및 기존 컴포넌트의 내보내기 수정" />
+    <MESSAGE value="gzip 압축 플러그인 추가 및 개발 서버 설정 개선" />
-    <option name="LAST_COMMIT_MESSAGE" value="새로운 Svelte 컴포넌트 추가 및 기존 컴포넌트의 내보내기 수정" />
+    <option name="LAST_COMMIT_MESSAGE" value="gzip 압축 플러그인 추가 및 개발 서버 설정 개선" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

GZIP_GUIDE.md

@@ -0,0 +1,104 @@
+# Gzip 압축 테스트 가이드
+
+## 빌드 및 Preview 명령어
+
+### 1. 빌드 (gzip 파일 생성)
+```bash
+pnpm build
+```
+- 원본 파일과 `.gz` 파일이 함께 생성됩니다
+- 1KB 이상의 JS, CSS 파일만 압축됩니다
+
+### 2. Preview 서버
+
+#### 일반 Preview (gzip 미지원)
+```bash
+pnpm preview
+```
+- Vite 기본 preview 서버
+- `.gz` 파일을 제공하지 않음
+- 원본 파일만 제공
+
+#### Gzip Preview (gzip 지원) ⭐
+```bash
+pnpm preview:gzip
+```
+- Express 기반 커스텀 서버
+- `.gz` 파일을 우선적으로 제공
+- 브라우저가 `Accept-Encoding: gzip`을 보내면 자동으로 `.gz` 파일 제공
+- `http://localhost:4173`에서 실행
+
+## Gzip 압축 확인 방법
+
+### 방법 1: 브라우저 개발자 도구 (권장)
+
+1. `pnpm preview:gzip` 실행
+2. 브라우저에서 `http://localhost:4173` 접속
+3. F12 (개발자 도구) → **Network** 탭
+4. 페이지 새로고침 (Ctrl+R 또는 F5)
+5. JS/CSS 파일 클릭
+6. **Headers** 탭에서 확인:
+   - **Response Headers**에 `Content-Encoding: gzip` 있으면 성공 ✅
+   - **Size** 열에서 `transferred` vs `resource` 크기 비교
+
+### 방법 2: curl 명령어
+
+```bash
+# Windows PowerShell
+curl -H "Accept-Encoding: gzip" -I http://localhost:4173/_app/immutable/chunks/ChUbo8MR.js
+
+# 출력에서 "Content-Encoding: gzip" 확인
+```
+
+### 방법 3: 파일 직접 확인
+
+```bash
+# .svelte-kit/output/client/_app/immutable/chunks 폴더에서
+# 원본 파일과 .gz 파일이 함께 존재하는지 확인
+
+dir .svelte-kit\output\client\_app\immutable\chunks\*.gz
+```
+
+## 예상 압축률
+
+| 파일 타입 | 원본 크기 | 압축 크기 | 압축률 |
+|----------|---------|---------|--------|
+| CSS      | 117 KB  | 18 KB   | 84%    |
+| JS (Large)| 36 KB  | 12 KB   | 67%    |
+| JS (Small)| 3.5 KB | 1.5 KB  | 58%    |
+
+## 주의사항
+
+1. **`pnpm preview`는 gzip을 지원하지 않습니다**
+   - 반드시 `pnpm preview:gzip` 사용
+
+2. **프로덕션 배포 시**
+   - Nginx, Apache 등 웹 서버에서 gzip 설정 필요
+   - Vercel, Netlify 등은 자동으로 처리
+
+3. **이미 압축된 파일은 효과 없음**
+   - 이미지(PNG, JPEG), 비디오 파일은 추가 압축 효과 없음
+
+## 설정 파일
+
+### vite.config.ts
+- `vite-plugin-compression`: 빌드 시 `.gz` 파일 생성
+- `threshold: 1024`: 1KB 이상 파일만 압축
+
+### preview-gzip.js
+- Express 기반 커스텀 preview 서버
+- `express-static-gzip`으로 `.gz` 파일 우선 제공
+
+## 트러블슈팅
+
+### Q: Network 탭에 `Content-Encoding: gzip`이 없어요
+- `pnpm preview` 대신 `pnpm preview:gzip` 사용
+- 브라우저 캐시 삭제 후 재시도 (Ctrl+Shift+R)
+
+### Q: 파일 크기가 줄어들지 않아요
+- Network 탭에서 **transferred** 크기 확인
+- **resource** 크기는 압축 해제 후 크기 (변하지 않음)
+
+### Q: 특정 파일만 압축하고 싶어요
+- `vite.config.ts`에서 `filter` 옵션 추가 가능
+

package.json

@@ -7,6 +7,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"preview:gzip": "node preview-gzip.js",
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -34,6 +35,10 @@
 		"drizzle-kit": "^0.31.5",
 		"drizzle-orm": "^0.44.6",
 		"embla-carousel-svelte": "^8.6.0",
+		"express": "^5.1.0",
+		"express-static-gzip": "^3.0.0",
+		"express": "^5.1.0",
+		"express-static-gzip": "^3.0.0",
 		"formsnap": "^2.0.1",
 		"layerchart": "2.0.0-next.27",
 		"mode-watcher": "^1.1.0",
@@ -51,7 +56,9 @@
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^5.9.3",
 		"vaul-svelte": "1.0.0-next.7",
-		"vite": "^7.1.10"
+		"vite": "^7.1.10",
+		"vite-plugin-compression": "^0.5.1",
+		"vite-plugin-static-copy": "^3.1.4"
 	},
 	"dependencies": {
 		"@node-rs/argon2": "^2.0.2",

preview-gzip.js

@@ -0,0 +1,33 @@
+import express from 'express';
+import expressStaticGzip from 'express-static-gzip';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const port = 4173;
+
+// gzip 압축 파일을 우선적으로 제공
+app.use(
+	'/',
+	expressStaticGzip(join(__dirname, '.svelte-kit/output/client'), {
+		enableBrotli: false,
+		orderPreference: ['gz'],
+		serveStatic: {
+			maxAge: '1d',
+			setHeaders: (res, path) => {
+				if (path.endsWith('.html')) {
+					res.setHeader('Cache-Control', 'public, max-age=0');
+				}
+			}
+		}
+	})
+);
+
+app.listen(port, () => {
+	console.log(`\n  ➜  Preview server with gzip: http://localhost:${port}/`);
+	console.log(`  ➜  Press Ctrl+C to stop\n`);
+});
+

src/lib/components/ui/input/input.svelte

@@ -25,9 +25,9 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none disabled:cursor-not-allowed disabled:opacity-50",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"focus-visible:border-ring",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			"aria-invalid:border-destructive",
 			className
 		)}
 		type="file"
@@ -40,9 +40,9 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"focus-visible:border-ring",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			"aria-invalid:border-destructive",
 			className
 		)}
 		{type}

src/routes/demo/lucia/login/+page.svelte

@@ -62,7 +62,7 @@
 							placeholder="username"
 							required
 							autocomplete="username"
-							class="relative z-20 pl-10 transition-all duration-200 focus:ring-2"
+							class="relative z-20 pl-10"
 						/>
 					</div>
 				</div>
@@ -73,7 +73,7 @@
 						<button
 							type="button"
 							tabindex="-1"
-							class="text-xs text-primary hover:underline focus:outline-none"
+							class="text-xs text-primary focus:outline-none"
 						>
 							비밀번호 찾기
 						</button>
@@ -89,14 +89,14 @@
 							placeholder="••••••••"
 							required
 							autocomplete="current-password"
-							class="relative z-20 pl-10 transition-all duration-200 focus:ring-2"
+							class="relative z-20 pl-10"
 						/>
 					</div>
 				</div>
 
 				{#if form?.message}
 					<div
-						class="animate-in fade-in slide-in-from-top-2 flex items-start gap-3 rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive duration-300"
+						class="flex items-start gap-3 rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive"
 					>
 						<AlertCircle class="mt-0.5 h-5 w-5 flex-shrink-0" />
 						<span>{form.message}</span>
@@ -106,7 +106,7 @@
 				<div class="flex flex-col gap-3 pt-2">
 					<Button
 						type="submit"
-						class="w-full transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"
+						class="w-full"
 						size="lg"
 					>
 						<LogIn class="mr-2 h-5 w-5" />
@@ -126,7 +126,7 @@
 						type="submit"
 						formaction="?/register"
 						variant="outline"
-						class="w-full transition-all duration-200 hover:scale-[1.02] hover:bg-secondary"
+						class="w-full"
 						size="lg"
 					>
 						<UserPlus class="mr-2 h-5 w-5" />

vite.config.ts

@@ -1,7 +1,32 @@
 import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import viteCompression from 'vite-plugin-compression';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
+	plugins: [
+		tailwindcss(),
+		sveltekit(),
+		viteCompression({
+			verbose: true, // 압축 결과를 콘솔에 출력
+			disable: false,
+			threshold: 1024, // 1KB 이상 파일만 압축
+			algorithm: 'gzip', // gzip 알고리즘 사용
+			ext: '.gz', // .gz 확장자로 파일 생성
+			deleteOriginFile: false // 원본 파일 유지
+		})
+	],
+	preview: {
+		headers: {
+			'Cache-Control': 'public, max-age=600'
+		},
+		// preview 서버에서 gzip 파일을 제공하도록 설정
+		proxy: {}
+	},
+	server: {
+		// 개발 서버 설정
+		fs: {
+			strict: false
+		}
+	}
 });