fix: improve mobile responsive design for file list table

- Add comprehensive responsive design for multiple screen sizes (1024px, 768px, 480px, 320px, 280px)
- Implement horizontal scrolling with touch support for table overflow
- Optimize column widths and font sizes for each breakpoint
- Add visual scroll hints for mobile users
- Ensure proper viewport utilization with calc() functions
- Fix table layout issues on extreme small screens (280px)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

.claude/settings.local.json

@@ -57,7 +57,29 @@
       "Bash(npm run build:*)",
       "Bash(npm run stop:*)",
       "Bash(PORT=3007 node server.js)",
-      "Bash(HOST=119.64.1.86 PORT=3007 node server.js)"
+      "Bash(HOST=119.64.1.86 PORT=3007 node server.js)",
+      "WebFetch(domain:github.com)",
+      "Bash(where claude)",
+      "Read(/C:\\Users\\COMTREE\\.claude/**)",
+      "Read(/C:\\Users\\COMTREE/**)",
+      "Bash(md:*)",
+      "Bash(.mcp_install.bat)",
+      "Bash(npm search mcp)",
+      "Read(/C:\\Users\\COMTREE\\.claude/**)",
+      "Bash(claude mcp add:*)",
+      "Bash(claude mcp:*)",
+      "WebSearch",
+      "Bash(uvx:*)",
+      "Bash(npm run:*)",
+      "Bash(tasklist:*)",
+      "Bash(npm audit:*)",
+      "Bash(git config:*)",
+      "Bash(git remote:*)",
+      "Bash(findstr:*)",
+      "mcp__serena__activate_project",
+      "mcp__serena__list_dir",
+      "mcp__playwright__browser_resize",
+      "mcp__playwright__browser_take_screenshot"
     ],
     "deny": [],
     "ask": [],

admin/script.js

@@ -1367,6 +1367,22 @@ class AdminFileManager {
 
     resetCategoryForm() {
         document.getElementById('categoryName').value = '';
+        this.currentEditCategoryId = null;
+        
+        // 버튼 텍스트를 기본 상태로 복원
+        const submitBtn = document.getElementById('addCategoryBtn');
+        if (submitBtn) {
+            submitBtn.textContent = '➕ 카테고리 추가';
+            submitBtn.disabled = false;
+        }
+        
+        // 폼 제목을 기본 상태로 복원
+        const formTitle = document.querySelector('#categoryTab h2');
+        if (formTitle) {
+            formTitle.textContent = '🏷️ 카테고리 관리';
+        }
+        
+        console.log('카테고리 폼이 초기화되었습니다.');
     }
 
     renderCategoryList() {

deploy.sh

@@ -1,104 +0,0 @@
-#!/bin/bash
-
-# Git을 통한 자동 배포 스크립트
-# 사용법: ./deploy.sh [branch_name]
-
-# 설정
-PROJECT_DIR="/volume1/web/jaryo"
-GIT_REPO="/volume1/git/jaryo-file-manager.git"
-BACKUP_DIR="/volume1/web/jaryo-backup"
-LOG_FILE="/volume1/web/jaryo/logs/deploy.log"
-BRANCH=${1:-main}
-
-# 로그 함수
-log() {
-    echo "[$(date '+%Y-%m-%d %H:%M:%S')] $1" | tee -a "$LOG_FILE"
-}
-
-# 로그 디렉토리 생성
-mkdir -p "$(dirname $LOG_FILE)"
-
-log "=== 배포 시작 ==="
-log "브랜치: $BRANCH"
-log "프로젝트 디렉토리: $PROJECT_DIR"
-
-# 1. 현재 서비스 중지
-log "기존 서비스 중지 중..."
-if [ -f "$PROJECT_DIR/app.pid" ]; then
-    PID=$(cat "$PROJECT_DIR/app.pid")
-    if kill -0 "$PID" 2>/dev/null; then
-        kill "$PID"
-        sleep 3
-        log "서비스 중지 완료 (PID: $PID)"
-    fi
-fi
-
-# 2. 백업 생성
-log "현재 버전 백업 중..."
-BACKUP_NAME="backup-$(date +%Y%m%d-%H%M%S)"
-if [ -d "$PROJECT_DIR" ]; then
-    mkdir -p "$BACKUP_DIR"
-    cp -r "$PROJECT_DIR" "$BACKUP_DIR/$BACKUP_NAME"
-    log "백업 완료: $BACKUP_DIR/$BACKUP_NAME"
-fi
-
-# 3. Git에서 최신 코드 가져오기
-log "Git에서 최신 코드 가져오는 중..."
-if [ ! -d "$PROJECT_DIR" ]; then
-    mkdir -p "$PROJECT_DIR"
-    cd "$PROJECT_DIR"
-    git clone "$GIT_REPO" .
-else
-    cd "$PROJECT_DIR"
-    # 현재 변경사항 백업
-    git stash push -m "Auto backup before deploy $(date)"
-    
-    # 원격 저장소에서 최신 정보 가져오기
-    git fetch origin
-    
-    # 지정된 브랜치로 체크아웃
-    git checkout "$BRANCH"
-    
-    # 원격 브랜치와 동기화
-    git pull origin "$BRANCH"
-fi
-
-# 4. 의존성 설치
-log "의존성 설치 중..."
-npm install --production
-
-# 5. 데이터베이스 마이그레이션 (필요한 경우)
-log "데이터베이스 초기화 중..."
-node scripts/init-database.js
-
-# 6. 권한 설정
-log "권한 설정 중..."
-chmod +x *.sh
-chown -R admin:users "$PROJECT_DIR"
-
-# 7. 서비스 시작
-log "새로운 서비스 시작 중..."
-./start-service.sh
-
-# 8. 서비스 상태 확인
-sleep 5
-if [ -f "$PROJECT_DIR/app.pid" ]; then
-    PID=$(cat "$PROJECT_DIR/app.pid")
-    if kill -0 "$PID" 2>/dev/null; then
-        log "✅ 배포 성공! 서비스가 정상적으로 시작되었습니다. (PID: $PID)"
-    else
-        log "❌ 배포 실패! 서비스가 시작되지 않았습니다."
-        log "로그 확인: tail -f $PROJECT_DIR/logs/app.log"
-        exit 1
-    fi
-else
-    log "❌ 배포 실패! PID 파일이 생성되지 않았습니다."
-    exit 1
-fi
-
-# 9. 이전 백업 정리 (30일 이상 된 백업 삭제)
-log "오래된 백업 정리 중..."
-find "$BACKUP_DIR" -name "backup-*" -type d -mtime +30 -exec rm -rf {} \; 2>/dev/null
-
-log "=== 배포 완료 ==="
-log "서비스 URL: http://$(hostname -I | awk '{print $1}'):3005"

package.json

@@ -18,9 +18,6 @@
     "sqlite3": "^5.1.6",
     "uuid": "^9.0.1"
   },
-  "devDependencies": {
-    "vercel": "^32.0.0"
-  },
   "keywords": [
     "file-manager",
     "admin"

start-simple.bat

@@ -1,4 +0,0 @@
-@echo off
-cd /d "C:\Users\COMTREE\claude_code\jaryo"
-echo Starting Jaryo File Manager...
-node server.js

styles.css

@@ -16,6 +16,8 @@ body {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 header {
@@ -559,6 +561,8 @@ header p {
     margin-top: 20px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(10px);
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
 }
 
 .board-table {
@@ -1468,4 +1472,482 @@ header p {
         opacity: 0;
         transform: translateX(100%);
     }
+}
+
+/* 테이블 반응형 스타일 */
+@media (max-width: 1024px) {
+    .board-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        margin: 0 -20px;
+        padding: 15px;
+        background: white;
+        border-radius: 0;
+    }
+
+    .board-table {
+        min-width: 650px;
+        width: max-content;
+    }
+
+    .col-title {
+        min-width: 150px;
+        max-width: 200px;
+    }
+
+    .col-attachment {
+        width: 150px;
+        min-width: 150px;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 15px 10px;
+    }
+
+    .list-section {
+        padding: 20px 10px;
+        margin: 0;
+    }
+
+    .board-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        margin: 0 -10px;
+        padding: 10px;
+        background: white;
+        border-radius: 8px;
+        border: 1px solid #e2e8f0;
+        box-shadow: none;
+        position: relative;
+    }
+
+    .board-table {
+        min-width: 580px;
+        font-size: 0.8rem;
+        width: max-content;
+    }
+
+    .board-table th,
+    .board-table td {
+        padding: 6px 4px;
+        font-size: 0.8rem;
+    }
+
+    .col-no { width: 35px; min-width: 35px; }
+    .col-category { width: 60px; min-width: 60px; }
+    .col-title { min-width: 120px; max-width: 160px; }
+    .col-attachment { width: 140px; min-width: 140px; }
+    .col-date { width: 80px; min-width: 80px; }
+    .col-actions { width: 80px; min-width: 80px; }
+
+    .board-title {
+        font-size: 0.85rem;
+        padding: 2px 4px;
+        line-height: 1.3;
+    }
+
+    .category-badge {
+        font-size: 0.7rem;
+        padding: 3px 6px;
+    }
+
+    .attachment-list {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+        max-height: 50px;
+        overflow-y: auto;
+    }
+
+    .attachment-item-public {
+        padding: 2px 4px;
+        font-size: 0.7rem;
+        gap: 3px;
+    }
+
+    .download-single-btn {
+        padding: 2px 5px;
+        font-size: 0.7rem;
+    }
+
+    .action-btn {
+        padding: 3px 6px;
+        font-size: 0.75rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 8px 5px;
+        max-width: 100%;
+    }
+
+    .list-section {
+        padding: 15px 5px;
+        margin: 0;
+        border-radius: 8px;
+    }
+
+    .board-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        margin: 0 -5px;
+        padding: 8px;
+        border-radius: 6px;
+        background: white;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border: 1px solid #e2e8f0;
+        position: relative;
+        width: calc(100vw - 10px);
+        max-width: calc(100vw - 10px);
+    }
+
+    .board-table {
+        min-width: 480px;
+        font-size: 0.7rem;
+        border-radius: 4px;
+        width: max-content;
+        table-layout: fixed;
+    }
+
+    .board-table th,
+    .board-table td {
+        padding: 4px 2px;
+        font-size: 0.7rem;
+        text-align: center;
+        word-break: break-word;
+        overflow-wrap: break-word;
+    }
+
+    .col-no { width: 25px; min-width: 25px; max-width: 25px; }
+    .col-category { width: 40px; min-width: 40px; max-width: 40px; }
+    .col-title { width: 120px; min-width: 120px; max-width: 120px; text-align: left; }
+    .col-attachment { width: 100px; min-width: 100px; max-width: 100px; }
+    .col-date { width: 60px; min-width: 60px; max-width: 60px; }
+    .col-actions { width: 50px; min-width: 50px; max-width: 50px; }
+
+    .board-title {
+        font-size: 0.8rem;
+        line-height: 1.2;
+        padding: 2px;
+    }
+
+    .category-badge {
+        font-size: 0.65rem;
+        padding: 2px 5px;
+    }
+
+    .attachment-list {
+        max-height: 40px;
+        gap: 2px;
+    }
+
+    .attachment-item-public {
+        padding: 1px 3px;
+        font-size: 0.65rem;
+        gap: 2px;
+    }
+
+    .download-single-btn {
+        padding: 1px 4px;
+        font-size: 0.65rem;
+        min-width: 30px;
+    }
+
+    .action-btn {
+        padding: 2px 4px;
+        font-size: 0.7rem;
+    }
+
+    header h1 {
+        font-size: 1.8rem;
+    }
+
+    header p {
+        font-size: 1rem;
+    }
+
+    /* 페이지네이션 반응형 */
+    .pagination {
+        gap: 8px;
+        padding: 12px;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0 -10px;
+        border-radius: 8px;
+    }
+
+    .page-btn {
+        padding: 6px 10px;
+        min-width: 50px;
+        font-size: 0.85rem;
+    }
+
+    #pageInfo {
+        font-size: 0.9rem;
+        order: -1;
+        width: 100%;
+        text-align: center;
+        margin-bottom: 8px;
+        padding: 6px 12px;
+    }
+
+    /* 스크롤 힌트 추가 */
+    .board-container::after {
+        content: "← 좌우로 스와이프하세요 →";
+        position: sticky;
+        right: 0;
+        bottom: 0;
+        background: rgba(102, 126, 234, 0.1);
+        color: #667eea;
+        padding: 4px 8px;
+        font-size: 0.7rem;
+        text-align: center;
+        border-radius: 4px;
+        margin-top: 5px;
+        display: block;
+    }
+}
+
+/* 320px 이하 극소형 화면 대응 */
+@media (max-width: 320px) {
+    body {
+        overflow-x: hidden;
+    }
+
+    .container {
+        padding: 2px 0;
+        max-width: 100vw;
+        overflow-x: hidden;
+        width: 100vw;
+    }
+
+    .list-section {
+        padding: 8px 2px;
+        margin: 0;
+        border-radius: 4px;
+        overflow-x: hidden;
+    }
+
+    .board-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        margin: 0 -2px;
+        padding: 3px;
+        border-radius: 3px;
+        background: white;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+        border: 1px solid #e2e8f0;
+        position: relative;
+        width: calc(100vw - 4px);
+        max-width: calc(100vw - 4px);
+        box-sizing: border-box;
+    }
+
+    .board-table {
+        min-width: 350px;
+        font-size: 0.6rem;
+        border-radius: 2px;
+        width: 350px;
+        table-layout: fixed;
+        border-collapse: collapse;
+    }
+
+    .board-table th,
+    .board-table td {
+        padding: 2px 1px;
+        font-size: 0.6rem;
+        text-align: center;
+        word-break: break-word;
+        overflow-wrap: break-word;
+        line-height: 1.1;
+        vertical-align: middle;
+        border: none;
+    }
+
+    .col-no { width: 18px; min-width: 18px; max-width: 18px; }
+    .col-category { width: 30px; min-width: 30px; max-width: 30px; }
+    .col-title { width: 90px; min-width: 90px; max-width: 90px; text-align: left; }
+    .col-attachment { width: 70px; min-width: 70px; max-width: 70px; }
+    .col-date { width: 45px; min-width: 45px; max-width: 45px; }
+    .col-actions { width: 35px; min-width: 35px; max-width: 35px; }
+
+    .board-title {
+        font-size: 0.7rem;
+        line-height: 1.1;
+        padding: 1px 2px;
+    }
+
+    .category-badge {
+        font-size: 0.6rem;
+        padding: 1px 3px;
+    }
+
+    .attachment-list {
+        max-height: 30px;
+        gap: 1px;
+    }
+
+    .attachment-item-public {
+        padding: 1px 2px;
+        font-size: 0.6rem;
+        gap: 1px;
+    }
+
+    .download-single-btn {
+        padding: 1px 3px;
+        font-size: 0.6rem;
+        min-width: 25px;
+    }
+
+    .action-btn {
+        padding: 1px 3px;
+        font-size: 0.65rem;
+    }
+
+    header h1 {
+        font-size: 1.5rem;
+    }
+
+    header p {
+        font-size: 0.9rem;
+    }
+
+    .pagination {
+        gap: 5px;
+        padding: 8px;
+        margin: 0 -2px;
+        border-radius: 4px;
+    }
+
+    .page-btn {
+        padding: 4px 8px;
+        min-width: 40px;
+        font-size: 0.8rem;
+    }
+
+    #pageInfo {
+        font-size: 0.8rem;
+        padding: 4px 8px;
+    }
+
+    .board-container::after {
+        content: "← 스와이프 →";
+        font-size: 0.6rem;
+        padding: 2px 4px;
+    }
+}
+
+/* 280px 이하 초극소형 화면 대응 */
+@media (max-width: 280px) {
+    body {
+        overflow-x: hidden;
+    }
+
+    .container {
+        padding: 1px 0;
+        max-width: 100vw;
+        overflow-x: hidden;
+        width: 100vw;
+        box-sizing: border-box;
+    }
+
+    .list-section {
+        padding: 5px 1px;
+        margin: 0;
+        border-radius: 3px;
+        overflow-x: hidden;
+    }
+
+    .board-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        margin: 0 -1px;
+        padding: 2px;
+        border-radius: 2px;
+        background: white;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+        border: 1px solid #e2e8f0;
+        position: relative;
+        width: calc(100vw - 2px);
+        max-width: calc(100vw - 2px);
+        box-sizing: border-box;
+    }
+
+    .board-table {
+        min-width: 320px;
+        font-size: 0.55rem;
+        border-radius: 2px;
+        width: 320px;
+        table-layout: fixed;
+        border-collapse: collapse;
+    }
+
+    .board-table th,
+    .board-table td {
+        padding: 1px 0;
+        font-size: 0.55rem;
+        text-align: center;
+        word-break: break-word;
+        overflow-wrap: break-word;
+        line-height: 1.0;
+        vertical-align: middle;
+        border: none;
+    }
+
+    .col-no { width: 15px; min-width: 15px; max-width: 15px; }
+    .col-category { width: 25px; min-width: 25px; max-width: 25px; }
+    .col-title { width: 80px; min-width: 80px; max-width: 80px; text-align: left; }
+    .col-attachment { width: 60px; min-width: 60px; max-width: 60px; }
+    .col-date { width: 40px; min-width: 40px; max-width: 40px; }
+    .col-actions { width: 30px; min-width: 30px; max-width: 30px; }
+
+    .board-title {
+        font-size: 0.6rem;
+        line-height: 1.0;
+        padding: 1px;
+    }
+
+    .category-badge {
+        font-size: 0.5rem;
+        padding: 1px 2px;
+    }
+
+    .attachment-list {
+        max-height: 25px;
+        gap: 1px;
+    }
+
+    .attachment-item-public {
+        padding: 0 1px;
+        font-size: 0.5rem;
+        gap: 1px;
+    }
+
+    .download-single-btn {
+        padding: 1px 2px;
+        font-size: 0.5rem;
+        min-width: 20px;
+    }
+
+    .action-btn {
+        padding: 1px 2px;
+        font-size: 0.6rem;
+    }
+
+    header h1 {
+        font-size: 1.3rem;
+    }
+
+    header p {
+        font-size: 0.8rem;
+    }
+
+    .board-container::after {
+        content: "← →";
+        font-size: 0.5rem;
+        padding: 1px 2px;
+    }
 }

test-login.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Login Test</title>
-</head>
-<body>
-    <h1>Admin Login Test</h1>
-    <div>
-        <input type="email" id="email" value="admin@jaryo.com" placeholder="Email">
-        <input type="password" id="password" placeholder="Password">
-        <button onclick="testLogin()">Test Login</button>
-    </div>
-    <div id="result"></div>
-
-    <script>
-        async function testLogin() {
-            const email = document.getElementById('email').value;
-            const password = document.getElementById('password').value;
-            const result = document.getElementById('result');
-            
-            console.log('Testing login with:', { email, password });
-            
-            try {
-                const response = await fetch('/api/auth/login', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    credentials: 'include',
-                    body: JSON.stringify({ email, password })
-                });
-                
-                console.log('Response status:', response.status);
-                console.log('Response headers:', response.headers);
-                
-                const data = await response.json();
-                console.log('Response data:', data);
-                
-                if (response.ok) {
-                    result.innerHTML = '<p style="color: green;">✅ Login Success: ' + JSON.stringify(data, null, 2) + '</p>';
-                    
-                    // Test session
-                    const sessionResponse = await fetch('/api/auth/session', {
-                        credentials: 'include'
-                    });
-                    const sessionData = await sessionResponse.json();
-                    console.log('Session data:', sessionData);
-                    
-                    result.innerHTML += '<p style="color: blue;">📋 Session: ' + JSON.stringify(sessionData, null, 2) + '</p>';
-                } else {
-                    result.innerHTML = '<p style="color: red;">❌ Login Failed: ' + JSON.stringify(data, null, 2) + '</p>';
-                }
-            } catch (error) {
-                console.error('Login error:', error);
-                result.innerHTML = '<p style="color: red;">❌ Error: ' + error.message + '</p>';
-            }
-        }
-    </script>
-</body>
-</html>