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

@@ -72,7 +72,14 @@
       "Bash(uvx:*)",
       "Bash(npm run:*)",
       "Bash(tasklist:*)",
-      "Bash(npm audit:*)"
+      "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": [],

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;
+    }
 }