Merge remote-tracking branch 'origin/main' into wordDict

package-lock.json

@@ -84,6 +84,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-annotate-as-pure/node_modules/@babel/types": {
+      "version": "7.26.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-member-expression-to-functions": {
       "version": "7.25.9",
       "dev": true,
@@ -128,6 +140,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-member-expression-to-functions/node_modules/@babel/types": {
+      "version": "7.26.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-member-expression-to-functions/node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "dev": true,
@@ -223,6 +247,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-module-imports/node_modules/@babel/types": {
+      "version": "7.26.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-module-imports/node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "dev": true,
@@ -286,7 +322,16 @@
       }
     },
     "node_modules/@babel/helper-optimise-call-expression/node_modules/@babel/types": {
-      "dev": true
+      "version": "7.26.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
     },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.26.5",
@@ -340,6 +385,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers/node_modules/@babel/types": {
+      "version": "7.26.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers/node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "dev": true,
@@ -426,6 +483,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/parser/node_modules/@babel/types": {
+      "version": "7.26.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.25.9",
       "dev": true,
@@ -439,10 +507,10 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/types": {
+    "node_modules/@babel/template/node_modules/@babel/types": {
-      "version": "7.26.9",
+      "version": "7.26.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
+      "dev": true,
-      "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9"
@@ -542,10 +610,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.20.0",
+      "version": "9.19.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.20.0.tgz",
-      "integrity": "sha512-iZA07H9io9Wn836aVTytRaNqh00Sad+EamwOVJT12GTLw1VGMFV/4JaME+JjLtr9fiGaoWgYnS54wrfWsSs4oQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -649,14 +716,16 @@
     },
     "node_modules/@octokit/auth-token": {
       "version": "4.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
+      "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
       "engines": {
         "node": ">= 18"
       }
     },
     "node_modules/@octokit/core": {
       "version": "5.2.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
+      "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
       "dependencies": {
         "@octokit/auth-token": "^4.0.0",
         "@octokit/graphql": "^7.1.0",
@@ -672,7 +741,8 @@
     },
     "node_modules/@octokit/endpoint": {
       "version": "9.0.6",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.6.tgz",
+      "integrity": "sha512-H1fNTMA57HbkFESSt3Y9+FBICv+0jFceJFPWDePYlR/iMGrwM5ph+Dd4XRQs+8X+PUFURLQgX9ChPfhJ/1uNQw==",
       "dependencies": {
         "@octokit/types": "^13.1.0",
         "universal-user-agent": "^6.0.0"
@@ -683,7 +753,8 @@
     },
     "node_modules/@octokit/graphql": {
       "version": "7.1.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.1.0.tgz",
+      "integrity": "sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==",
       "dependencies": {
         "@octokit/request": "^8.3.0",
         "@octokit/types": "^13.0.0",
@@ -695,11 +766,13 @@
     },
     "node_modules/@octokit/openapi-types": {
       "version": "23.0.1",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-23.0.1.tgz",
+      "integrity": "sha512-izFjMJ1sir0jn0ldEKhZ7xegCTj/ObmEDlEfpFrx4k/JyZSMRHbO3/rBwgE7f3m2DHt+RrNGIVw4wSmwnm3t/g=="
     },
     "node_modules/@octokit/plugin-paginate-rest": {
       "version": "11.3.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-11.3.1.tgz",
+      "integrity": "sha512-ryqobs26cLtM1kQxqeZui4v8FeznirUsksiA+RYemMPJ7Micju0WSkv50dBksTuZks9O5cg4wp+t8fZ/cLY56g==",
       "dependencies": {
         "@octokit/types": "^13.5.0"
       },
@@ -712,7 +785,8 @@
     },
     "node_modules/@octokit/plugin-request-log": {
       "version": "4.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-4.0.1.tgz",
+      "integrity": "sha512-GihNqNpGHorUrO7Qa9JbAl0dbLnqJVrV8OXe2Zm5/Y4wFkZQDfTreBzVmiRfJVfE4mClXdihHnbpyyO9FSX4HA==",
       "engines": {
         "node": ">= 18"
       },
@@ -722,7 +796,8 @@
     },
     "node_modules/@octokit/plugin-rest-endpoint-methods": {
       "version": "13.2.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-13.2.2.tgz",
+      "integrity": "sha512-EI7kXWidkt3Xlok5uN43suK99VWqc8OaIMktY9d9+RNKl69juoTyxmLoWPIZgJYzi41qj/9zU7G/ljnNOJ5AFA==",
       "dependencies": {
         "@octokit/types": "^13.5.0"
       },
@@ -735,7 +810,8 @@
     },
     "node_modules/@octokit/request": {
       "version": "8.4.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.4.1.tgz",
+      "integrity": "sha512-qnB2+SY3hkCmBxZsR/MPCybNmbJe4KAlfWErXq+rBKkQJlbjdJeS85VI9r8UqeLYLvnAenU8Q1okM/0MBsAGXw==",
       "dependencies": {
         "@octokit/endpoint": "^9.0.6",
         "@octokit/request-error": "^5.1.1",
@@ -748,7 +824,8 @@
     },
     "node_modules/@octokit/request-error": {
       "version": "5.1.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.1.1.tgz",
+      "integrity": "sha512-v9iyEQJH6ZntoENr9/yXxjuezh4My67CBSu9r6Ve/05Iu5gNgnisNWOsoJHTP6k0Rr0+HQIpnH+kyammu90q/g==",
       "dependencies": {
         "@octokit/types": "^13.1.0",
         "deprecation": "^2.0.0",
@@ -760,7 +837,8 @@
     },
     "node_modules/@octokit/rest": {
       "version": "20.1.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-20.1.1.tgz",
+      "integrity": "sha512-MB4AYDsM5jhIHro/dq4ix1iWTLGToIGk6cWF5L6vanFaMble5jTX/UBQyiv05HsWnwUtY8JrfHy2LWfKwihqMw==",
       "dependencies": {
         "@octokit/core": "^5.0.2",
         "@octokit/plugin-paginate-rest": "11.3.1",
@@ -773,7 +851,8 @@
     },
     "node_modules/@octokit/types": {
       "version": "13.8.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.8.0.tgz",
+      "integrity": "sha512-x7DjTIbEpEWXK99DMd01QfWy0hd5h4EN+Q7shkdKds3otGQP+oWE/y0A76i1OvH9fygo4ddvNf7ZvF0t78P98A==",
       "dependencies": {
         "@octokit/openapi-types": "^23.0.1"
       }
@@ -1130,7 +1209,8 @@
     },
     "node_modules/before-after-hook": {
       "version": "2.2.3",
-      "license": "Apache-2.0"
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
     },
     "node_modules/birpc": {
       "version": "0.2.19",
@@ -1216,26 +1296,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/browserslist/node_modules/caniuse-lite": {
-      "version": "1.0.30001700",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001700.tgz",
-      "integrity": "sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ]
-    },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "dev": true,
@@ -1299,6 +1359,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001697",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "dev": true,
@@ -1517,7 +1596,8 @@
     },
     "node_modules/deprecation": {
       "version": "2.3.1",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+      "integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
     },
     "node_modules/dompurify": {
       "version": "3.2.4",
@@ -1611,336 +1691,6 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
-    "node_modules/esbuild/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/android-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/android-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/android-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/darwin-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-arm": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-loong64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
-      "cpu": [
-        "loong64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
-      "cpu": [
-        "mips64el"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
-      "cpu": [
-        "ppc64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-s390x": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
-      "cpu": [
-        "s390x"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/linux-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/sunos-x64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/win32-arm64": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/esbuild/node_modules/@esbuild/win32-ia32": {
-      "version": "0.21.5",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/esbuild/node_modules/@esbuild/win32-x64": {
       "version": "0.21.5",
       "cpu": [
@@ -1975,17 +1725,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.20.1",
+      "version": "9.19.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.20.1.tgz",
-      "integrity": "sha512-m1mM33o6dBUjxl2qb6wv6nGNwCAsns1eKtaQ4l/NPHeTvhiUPbtdfMyktxN4B3fgHIgsYh1VT3V9txblpQHq+g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
         "@eslint/config-array": "^0.19.0",
-        "@eslint/core": "^0.11.0",
+        "@eslint/core": "^0.10.0",
         "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "9.20.0",
+        "@eslint/js": "9.19.0",
         "@eslint/plugin-kit": "^0.2.5",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -2134,18 +1883,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/@eslint/core": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.11.0.tgz",
-      "integrity": "sha512-DWUB2pksgNEb6Bz2fggIy1wh6fGgZP4Xyy/Mt0QZPiloKKXerbqq9D3SBQTlCRYOrcRPu4vuz+CGjwdfqxnoWA==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.15"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
     "node_modules/espree": {
       "version": "10.3.0",
       "dev": true,
@@ -3025,7 +2762,8 @@
     },
     "node_modules/once": {
       "version": "1.4.0",
-      "license": "ISC",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
       "dependencies": {
         "wrappy": "1"
       }
@@ -3432,222 +3170,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/rollup/node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.4.tgz",
-      "integrity": "sha512-gGi5adZWvjtJU7Axs//CWaQbQd/vGy8KGcnEaCWiyCqxWYDxwIlAHFuSe6Guoxtd0SRvSfVTDMPd5H+4KE2kKA==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.4.tgz",
-      "integrity": "sha512-1aRlh1gqtF7vNPMnlf1vJKk72Yshw5zknR/ZAVh7zycRAGF2XBMVDAHmFQz/Zws5k++nux3LOq/Ejj1WrDR6xg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.4.tgz",
-      "integrity": "sha512-drHl+4qhFj+PV/jrQ78p9ch6A0MfNVZScl/nBps5a7u01aGf/GuBRrHnRegA9bP222CBDfjYbFdjkIJ/FurvSQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.4.tgz",
-      "integrity": "sha512-hQqq/8QALU6t1+fbNmm6dwYsa0PDD4L5r3TpHx9dNl+aSEMnIksHZkSO3AVH+hBMvZhpumIGrTFj8XCOGuIXjw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.4.tgz",
-      "integrity": "sha512-/L0LixBmbefkec1JTeAQJP0ETzGjFtNml2gpQXA8rpLo7Md+iXQzo9kwEgzyat5Q+OG/C//2B9Fx52UxsOXbzw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.4.tgz",
-      "integrity": "sha512-6Rk3PLRK+b8L/M6m/x6Mfj60LhAUcLJ34oPaxufA+CfqkUrDoUPQYFdRrhqyOvtOKXLJZJwxlOLbQjNYQcRQfw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.4.tgz",
-      "integrity": "sha512-kmT3x0IPRuXY/tNoABp2nDvI9EvdiS2JZsd4I9yOcLCCViKsP0gB38mVHOhluzx+SSVnM1KNn9k6osyXZhLoCA==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.4.tgz",
-      "integrity": "sha512-3iSA9tx+4PZcJH/Wnwsvx/BY4qHpit/u2YoZoXugWVfc36/4mRkgGEoRbRV7nzNBSCOgbWMeuQ27IQWgJ7tRzw==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.4.tgz",
-      "integrity": "sha512-7CwSJW+sEhM9sESEk+pEREF2JL0BmyCro8UyTq0Kyh0nu1v0QPNY3yfLPFKChzVoUmaKj8zbdgBxUhBRR+xGxg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.4.tgz",
-      "integrity": "sha512-GZdafB41/4s12j8Ss2izofjeFXRAAM7sHCb+S4JsI9vaONX/zQ8cXd87B9MRU/igGAJkKvmFmJJBeeT9jJ5Cbw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.4.tgz",
-      "integrity": "sha512-uuphLuw1X6ur11675c2twC6YxbzyLSpWggvdawTUamlsoUv81aAXRMPBC1uvQllnBGls0Qt5Siw8reSIBnbdqQ==",
-      "cpu": [
-        "loong64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.4.tgz",
-      "integrity": "sha512-KvLEw1os2gSmD6k6QPCQMm2T9P2GYvsMZMRpMz78QpSoEevHbV/KOUbI/46/JRalhtSAYZBYLAnT9YE4i/l4vg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.4.tgz",
-      "integrity": "sha512-wcpCLHGM9yv+3Dql/CI4zrY2mpQ4WFergD3c9cpRowltEh5I84pRT/EuHZsG0In4eBPPYthXnuR++HrFkeqwkA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.4.tgz",
-      "integrity": "sha512-nLbfQp2lbJYU8obhRQusXKbuiqm4jSJteLwfjnunDT5ugBKdxqw1X9KWwk8xp1OMC6P5d0WbzxzhWoznuVK6XA==",
-      "cpu": [
-        "s390x"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.4.tgz",
-      "integrity": "sha512-JGejzEfVzqc/XNiCKZj14eb6s5w8DdWlnQ5tWUbs99kkdvfq9btxxVX97AaxiUX7xJTKFA0LwoS0KU8C2faZRg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.4.tgz",
-      "integrity": "sha512-/iFIbhzeyZZy49ozAWJ1ZR2KW6ZdYUbQXLT4O5n1cRZRoTpwExnHLjlurDXXPKEGxiAg0ujaR9JDYKljpr2fDg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.4.tgz",
-      "integrity": "sha512-qORc3UzoD5UUTneiP2Afg5n5Ti1GAW9Gp5vHPxzvAFFA3FBaum9WqGvYXGf+c7beFdOKNos31/41PRMUwh1tpA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/rollup/node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.34.4",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.4.tgz",
-      "integrity": "sha512-5g7E2PHNK2uvoD5bASBD9aelm44nf1w4I5FEI7MPHLWcCSrR8JragXZWgKPXk5i2FU3JFfa6CGZLw2RrGBHs2Q==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": {
       "version": "4.34.4",
       "cpu": [
@@ -3659,19 +3181,6 @@
         "win32"
       ]
     },
-    "node_modules/rollup/node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/run-applescript": {
       "version": "7.0.0",
       "dev": true,
@@ -3895,7 +3404,8 @@
     },
     "node_modules/universal-user-agent": {
       "version": "6.0.1",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
+      "integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ=="
     },
     "node_modules/universalify": {
       "version": "2.0.1",
@@ -4043,7 +3553,8 @@
     },
     "node_modules/vite-plugin-mkcert": {
       "version": "1.17.6",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/vite-plugin-mkcert/-/vite-plugin-mkcert-1.17.6.tgz",
+      "integrity": "sha512-4JR1RN0HEg/w17eRQJ/Ve2pSa6KCVQcQO6yKtIaKQCFDyd63zGfXHWpygBkvvRSpqa0GcqNKf0fjUJ0HiJQXVQ==",
       "dependencies": {
         "@octokit/rest": "^20.1.1",
         "axios": "^1.7.4",
@@ -4382,6 +3893,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/vite-plugin-vue-inspector/node_modules/@babel/types": {
+      "version": "7.26.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/vite-plugin-vue-inspector/node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "dev": true,
@@ -4481,19 +4004,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/vite/node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/vue": {
       "version": "3.5.13",
       "license": "MIT",
@@ -4656,7 +4166,8 @@
     },
     "node_modules/wrappy": {
       "version": "1.0.2",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",

public/css/custom.css

@@ -5,77 +5,44 @@
     display: block !important;
 }
 
-/* 게시판리스트 */
-.bg-label-gray td {
-    color: #DC3545 !important;
-}
-
 
 /* 휴가 */
 .half-day-buttons {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    gap: 10px;
+  gap: 10px;
-    margin-top: 20px;
+  margin-top: 20px;
-  }
+}
-  .half-day-buttons .btn.active {
+.half-day-buttons .btn.active {
-    border: 2px solid black;
+  border: 2px solid black;
-  }
+}
-  .fc-daygrid-day-frame {
+
-    min-height: 80px !important;
+.fc-daygrid-day-events {
-    max-height: 120px !important;
+  max-height: 100px !important;
-    overflow: hidden !important;
+  overflow-y: auto !important;
-    padding-top: 25px !important;
+}
-  }
+
-  .fc-daygrid-day-events {
+.fc-event {
-    max-height: 100px !important;
+  border: none;
-    overflow-y: auto !important;
+}
-  }
+.fc-daygrid-event.half-day-am {
-  .fc-daygrid-event {
+  width: calc(50% - 4px) !important;
-    position: absolute !important;
+}
-    height: 20px !important;
+.fc-daygrid-event.half-day-pm {
-    width: 100% !important;
+  width: calc(50% - 4px) !important;
-    left: 0 !important;
+  margin-left: auto !important
-    margin: 2px 0 !important;
+}
-    padding: 0 !important;
+.fc-day-sun .fc-daygrid-day-number,
-    border-radius: 2px !important;
+.fc-col-header-cell:first-child .fc-col-header-cell-cushion {
-    border: none !important;
+  color: #ff4500 !important;
-  }
+}
-  .fc-daygrid-event-harness {
+.fc-day-sat .fc-daygrid-day-number,
-    display: flex;
+.fc-col-header-cell:last-child .fc-col-header-cell-cushion {
-    flex-direction: column;
+  color: #6076e0 !important;
-    align-items: flex-start;
+}
-    justify-content: flex-start;
+.fc-daygrid-day-number {
-    width: 100%;
+  margin-right: auto;
-    gap: 22px;
+}
-  }
-  .fc-daygrid-event.half-day-am {
-    width: 45% !important;
-    left: 0 !important;
-  }
-  .fc-daygrid-event.half-day-pm {
-    width: 45% !important;
-    left: auto !important;
-    right: 0 !important;
-  }
-  .fc-daygrid-event.full-day {
-    width: 100% !important;
-    left: 0 !important;
-  }
-  .fc-day-sun .fc-daygrid-day-number,
-  .fc-col-header-cell:first-child .fc-col-header-cell-cushion {
-    color: #ff4500 !important;
-  }
-  .fc-day-sat .fc-daygrid-day-number,
-  .fc-col-header-cell:last-child .fc-col-header-cell-cushion {
-    color: #6076e0 !important;
-  }
-  .fc-daygrid-day-number {
-    position: absolute !important;
-    top: 0px !important;
-    left: 5px !important;
-    text-align: left !important;
-  }
 
   .grayscaleImg {
     filter: grayscale(100%);

src/components/board/BoardComment.vue

@@ -9,21 +9,32 @@
             :showDetail="false"
             :author="true"
             :isLike="!isLike"
-            :isPassword="isPassword"
+            :isCommentPassword="comment.isCommentPassword"
-            @editClick="editClick"
+            @editClick="$emit('editClick', comment)"
-            @deleteClick="deleteClick"
+            @deleteClick="$emit('deleteClick', comment)"
-            @submitPassword="submitPassword"
             @updateReaction="handleUpdateReaction"
-            @toggleEdit="emit('toggleEdit', comment.commentId, true)"
         />
-
+        <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
+        <div v-if="isCommentPassword && unknown" class="mt-3 w-25 ms-auto">
+            <div class="input-group">
+                <input
+                    type="password"
+                    class="form-control"
+                    v-model="password"
+                    placeholder="비밀번호 입력"
+                />
+                <button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
+            </div>
+            <span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
+        </div>
+        
 
         <div class="mt-6">
-            <template v-if="isEditTextarea">
+            <template v-if="comment.isEditTextarea">
-                <textarea v-model="editedContent" class="form-control"></textarea>
+                <textarea v-model="localEditedContent" class="form-control"></textarea>
                 <div class="mt-2 d-flex justify-content-end">
-                    <button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button>
+                    <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button>
-                    <button class="btn btn-primary" @click="submitEdit">수정 완료</button>
+                    <button class="btn btn-primary" @click="submitEdit">수정</button>
                 </div>
             </template>
             <template v-else>
@@ -33,7 +44,7 @@
 
         <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
         <BoardCommentArea v-if="isComment" @submitComment="submitComment"/>
-
+        
         <!-- 대댓글 -->
         <ul v-if="comment.children && comment.children.length" class="list-unstyled">
             <li
@@ -41,65 +52,61 @@
             :key="child.commentId"
                 class="mt-8 pt-6 ps-10 border-top"
             >
-                <BoardComment
+                <BoardComment 
                     :comment="child"
                     :unknown="unknown"
-                    :isPlusButton="false"
+                    :isPlusButton="false" 
                     :isLike="true"
-                    @submitComment="submitComment"
+                    @submitComment="submitComment" 
                     @updateReaction="handleUpdateReaction"
                 />
             </li>
         </ul>
-        <!-- <ul class="list-unstyled twoDepth">
-            <li>
-                <BoardProfile profileName=곤데리2 :showDetail="false" />
-                <div class="mt-2">저도 궁금합니다.</div>
-                <BoardCommentArea v-if="comment" />
-            </li>
-        </ul> -->
-        <!-- <BoardProfile profileName=곤데리 :showDetail="false" />
-        <div class="mt-2">저도 궁금합니다.</div>
-        <PlusButton  @click="toggleComment"/>
-        <BoardCommentArea v-if="comment" /> -->
     </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue';
+import { defineProps, defineEmits, ref, computed, watch } from 'vue';
 import BoardProfile from './BoardProfile.vue';
 import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
 
 const props = defineProps({
-  comment: {
+    comment: {
-    type: Object,
+        type: Object,
-    required: true,
+        required: true,
-  },
+    },
-  unknown: {
+    unknown: {
+            type: Boolean,
+            default: true,
+        },
+    isPlusButton: {
         type: Boolean,
         default: true,
     },
-  isPlusButton: {
+    isLike: {
-    type: Boolean,
+        type: Boolean,
-    default: true,
+        default: false,
-  },
+    },
-  isLike: {
+    isEditTextarea: {
-    type: Boolean,
+        type: Boolean,
-    default: false,
+        default: false
-  },
+    },
-  isEditTextarea: {
+    isCommentPassword: {
-    type: Boolean,
+        type: Boolean,
-    default: false
+        default: false,
-  },
+    },
-  isPassword: {
+    passwordCommentAlert: {
-    type: Boolean,
+        type: String,
-    default: false,
+        default: false
-},
+    }
 });
 
 // emits 정의
-const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit', 'editClick']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']);
+
+const password = ref('');
+const localEditedContent = ref(props.comment.content);
 
 // 댓글 입력 창 토글
 const isComment = ref(false);
@@ -110,7 +117,6 @@ const toggleComment = () => {
 // 부모 컴포넌트에 대댓글 추가 요청
 const submitComment = (newComment) => {
     emit('submitComment', { parentId: props.comment.commentId, ...newComment });
-
     isComment.value = false;
 };
 
@@ -118,21 +124,27 @@ const submitComment = (newComment) => {
 const handleUpdateReaction = (reactionData) => {
     emit('updateReaction', {
         boardId: props.comment.boardId,
-        commentId: props.comment.commentId,
+        commentId: props.comment.commentId || reactionData.commentId,
-        ...reactionData
+        ...reactionData,
     });
+
 };
 
-// 수정
+// 비밀번호 확인
-const editClick = (data) => {
+const logPasswordAndEmit = () => {
-    emit('editClick', data);
+    emit('submitPassword', props.comment, password.value);
+    password.value = ""; 
 };
 
-// 수정
+watch(() => props.comment.isEditTextarea, (newVal) => {
-const editedContent = ref(props.comment.content);
+    if (newVal) {
+        localEditedContent.value = props.comment.content;
+    }
+});
+
+// 수정버튼
 const submitEdit = () => {
-  emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
+    emit('submitEdit', props.comment, localEditedContent.value);
-  emit('toggleEdit', props.comment.commentId, false); // 수정 모드 종료
 };
 
 </script>

src/components/board/BoardCommentArea.vue

@@ -43,6 +43,7 @@
                             class="form-control flex-grow-1"
                             v-model="password"
                         />
+                        <!-- <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span> -->
                     </div>
                 </div>
 
@@ -74,20 +75,18 @@ const props = defineProps({
 
 const comment = ref('');
 const password = ref('');
-const isCheck = ref(false);
+const isCheck = ref(props.unknown);
 
 const emit = defineEmits(['submitComment']);
 
 watch(() => props.unknown, (newVal) => {
-    if (!newVal) {
+    isCheck.value = newVal;
-        isCheck.value = false;
-    }
 });
 
 function handleCommentSubmit() {
     emit('submitComment', {
         comment: comment.value,
-        password: password.value,
+        password: isCheck.value ? password.value : '',
     });
 
     comment.value = '';

src/components/board/BoardCommentList.vue

@@ -8,14 +8,18 @@
             <BoardComment
                 :unknown="unknown"
                 :comment="comment"
-                :isPassword="isPassword"
+                :isCommentPassword="comment.isCommentPassword" 
-                @editClick="editClick"
+                :isEditTextarea="comment.isEditTextarea"
-                @deleteClick="deleteClick"
+                :passwordCommentAlert="passwordCommentAlert"
+                @editClick="$emit('editClick', comment)"
+                @deleteClick="$emit('deleteClick', comment)"
                 @submitPassword="submitPassword"
                 @submitComment="submitComment"
-                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
+                @commentDeleted="handleCommentDeleted"
+                @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
+                @cancelEdit="$emit('cancelEdit', comment)"
+                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
             />
-                <!-- @updateReaction="handleUpdateReaction" -->
         </li>
     </ul>
 </template>
@@ -34,34 +38,37 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    isPassword: {
+    isCommentPassword: {
         type: Boolean,
         default: false,
     },
+    isEditTextarea: {
+        type: Boolean,
+        default: false,
+    },
+    passwordCommentAlert: {
+        type: String,
+        default: false
+    }
 });
 
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'submitPassword', 'clearPassword']);
 
 const submitComment = (replyData) => {
     emit('submitComment', replyData);
 };
 
-const handleUpdateReaction = (reactionData, commentId) => {
+const handleUpdateReaction = (reactionData, commentId, boardId) => {
-    // console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData);
-    // console.log('📌 전달할 댓글 ID>>>>:', commentId);
-
     const updatedReactionData = {
-        ...reactionData,
+        ...reactionData,  
-        commentId: commentId
+        commentId: commentId || reactionData.commentId, 
+        boardId: boardId || reactionData.boardId,
     };
 
-    // console.log('🚀 최종 전달할 데이터:', updatedReactionData);
-
     emit('updateReaction', updatedReactionData);
 }
 
-const editClick = (data) => {
+const submitPassword = (comment, password) => {
-    emit('editClick', data);
+    emit('submitPassword', comment, password);
 };
-
 </script>

src/components/board/BoardProfile.vue

@@ -31,23 +31,10 @@
             <BoardRecommendBtn
                 v-if="isLike"
                 :boardId="boardId"
-                :comment="props.comment"
+                :comment="comment"
                 @updateReaction="handleUpdateReaction"
-            />
+            >
-
+            </BoardRecommendBtn>
-             <!-- 비밀번호 입력창 (익명일 경우) -->
-             <div v-if="isPassword && unknown" class="mt-3">
-                <div class="input-group">
-                    <input
-                        type="password"
-                        class="form-control"
-                        v-model="password"
-                        placeholder="비밀번호 입력"
-                    />
-                    <button class="btn btn-primary" @click="$emit('submitPassword', password)">확인</button>
-                </div>
-                <span v-if="props.passwordAlert" class="invalid-feedback d-block text-start">{{ props.passwordAlert }}</span>
-            </div>
         </div>
     </div>
 </template>
@@ -58,9 +45,6 @@ import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
-// Vue Router 인스턴스
-const password = ref('');
-
 // Props 정의
 const props = defineProps({
     comment: {
@@ -77,7 +61,7 @@ const props = defineProps({
     },
     profileName: {
         type: String,
-        default: '익명 사용자',
+        default: '익명',
     },
     unknown: {
         type: Boolean,
@@ -107,18 +91,10 @@ const props = defineProps({
     isLike: {
         type: Boolean,
         default: false,
-    },
-    isPassword: {
-        type: Boolean,
-        default: false,
-    },
-    passwordAlert: {
-        type: String,
-        default: false,
     }
 });
 
-const emit = defineEmits(['togglePasswordInput', 'updateReaction', 'editClick', 'deleteClick', 'updatePasswordAlert']);
+const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
 
 // 수정
 const editClick = () => {
@@ -131,11 +107,6 @@ const deleteClick = () => {
 };
 
 const handleUpdateReaction = (reactionData) => {
-    // console.log("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생");
-    // console.log("📌 게시글 ID:", props.boardId);
-    // console.log("📌 댓글 ID (수정 후):", props.comment?.commentId);
-    // console.log("📌 reactionData:", reactionData);
-
     emit("updateReaction", {
         boardId: props.boardId,
         commentId:  props.comment?.commentId,

src/components/button/BoardRecommendBtn.vue

@@ -8,9 +8,13 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, computed } from 'vue';
 
 const props = defineProps({
+    comment: {
+        type: Object,
+        required: true,
+    },
     likeClicked : {
         type : Boolean,
         default : false,
@@ -49,21 +53,13 @@ const emit = defineEmits(['updateReaction']);
 
 const likeClicked = ref(props.likeClicked);
 const dislikeClicked = ref(props.dislikeClicked);
-const likeCount = ref(props.likeCount);
+const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
-const dislikeCount = ref(props.dislikeCount);
+const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
-
-// 부모에서 likeCount 또는 dislikeCount가 변경되면 로컬 상태를 업데이트
-watch(() => props.likeCount, (newVal) => {
-    likeCount.value = newVal;
-});
-
-watch(() => props.dislikeCount, (newVal) => {
-    dislikeCount.value = newVal;
-});
 
 const handleLike = () => {
     const isLike = !likeClicked.value;
-    const isDislike = false;
+    const isDislike = false; 
+
     emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
     likeClicked.value = isLike;
     dislikeClicked.value = false;
@@ -72,6 +68,7 @@ const handleLike = () => {
 const handleDislike = () => {
     const isDislike = !dislikeClicked.value;
     const isLike = false;
+
     emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
     dislikeClicked.value = isDislike;
     likeClicked.value = false;

src/components/calendar/holiday.js

@@ -0,0 +1,18 @@
+// src/api/holiday.js
+import axios from "@api";
+
+export async function fetchHolidays(year, month) {
+  try {
+    const response = await axios.get(`vacation/${year}/${month}`);
+    const holidayEvents = response.data.map((holiday) => ({
+      title: holiday.name,
+      start: holiday.date, // "YYYY-MM-DD" 형식
+      backgroundColor: "#ff6666",
+      classNames: ["holiday-event"],
+    }));
+    return holidayEvents;
+  } catch (error) {
+    console.error("공휴일 정보를 불러오지 못했습니다.", error);
+    return [];
+  }
+}

src/components/commuters/Calendar.vue

@@ -0,0 +1,202 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+        <div class="card app-calendar-wrapper">
+            <div class="row g-0">
+                <div class="col app-calendar-sidebar border-end text-center" id="app-calendar-sidebar">
+                    <div class="card-body pb-0">
+                        <img v-if="user" :src="`http://localhost:10325/upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-50 h-auto rounded-circle"/>
+                    </div>
+                </div>
+
+                <div class="col app-calendar-content">
+                    <div class="card shadow-none border-0">
+                        <div class="card-body pb-0">
+                            <full-calendar
+                                ref="fullCalendarRef"
+                                :events="calendarEvents"
+                                :options="calendarOptions"
+                                defaultView="dayGridMonth"
+                                class="flatpickr-calendar-only"
+                            >
+                            </full-calendar>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <center-modal :display="isModalVisible" @close="isModalVisible = $event">
+        <template #title> Add Event </template>
+        <template #body>
+            <FormInput
+                title="이벤트 제목"
+                name="event"
+                :is-essential="true"
+                :is-alert="eventAlert"
+                @update:data="eventTitle = $event"
+            />
+            <FormInput
+                title="이벤트 날짜"
+                type="date"
+                name="eventDate"
+                :is-essential="true"
+                :is-alert="eventDateAlert"
+                @update:data="eventDate = $event"
+            />
+        </template>
+        <template #footer>
+            <button @click="addEvent">추가</button>
+        </template>
+    </center-modal>
+</template>
+
+<script setup>
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import CenterModal from '@c/modal/CenterModal.vue';
+import { inject, onMounted, reactive, ref, watch } from 'vue';
+import $api from '@api';
+import { isEmpty } from '@/common/utils';
+import FormInput from '../input/FormInput.vue';
+import 'flatpickr/dist/flatpickr.min.css';
+import '@/assets/css/app-calendar.css';
+import { useThemeStore } from '@s/darkmode';
+import { fetchHolidays } from '@c/calendar/holiday';
+import { useUserInfoStore } from '@/stores/useUserInfoStore';
+
+const user = ref(null);
+
+const userStore = useUserInfoStore();
+
+const themeStore = useThemeStore();
+const dayjs = inject('dayjs');
+const fullCalendarRef = ref(null);
+const calendarEvents = ref([]);
+const isModalVisible = ref(false);
+const eventAlert = ref(false);
+const eventDateAlert = ref(false);
+const eventTitle = ref('');
+const eventDate = ref('');
+const selectedDate = ref(null);
+
+
+// 날짜 선택 핸들러
+const handleDateSelect = (selectedDates) => {
+    if (selectedDates.length > 0) {
+        const selectedDate = dayjs(selectedDates[0]).format('YYYY-MM-DD');
+        eventDate.value = selectedDate;
+        showModal();
+    }
+};
+
+// 달력 데이터 가져오기
+const fetchData = async () => {
+    const calendarApi = fullCalendarRef.value?.getApi();
+    if (!calendarApi) return;
+
+    const date = calendarApi.currentData.viewTitle;
+    const dateArr = date.split(' ');
+    let currentYear = dateArr[0].trim();
+    let currentMonth = dateArr[1].trim();
+    const regex = /\D/g;
+    currentYear = parseInt(currentYear.replace(regex, ''), 10);
+    currentMonth = parseInt(currentMonth.replace(regex, ''), 10);
+
+    try {
+        const holidayEvents = await fetchHolidays(currentYear, String(currentMonth).padStart(2, '0'));
+        const existingEvents = calendarEvents.value.filter(event => !event.classNames?.includes('holiday-event'));
+        calendarEvents.value = [...existingEvents, ...holidayEvents];
+    } catch (error) {
+        console.error('공휴일 정보 로딩 실패:', error);
+    }
+};
+
+// 달력 이동
+const moveCalendar = async (value = 0) => {
+    const calendarApi = fullCalendarRef.value?.getApi();
+
+    if (value === 1) {
+        calendarApi.prev();
+    } else if (value === 2) {
+        calendarApi.next();
+    } else if (value === 3) {
+        calendarApi.today();
+    }
+
+    await fetchData();
+};
+
+const showModal = () => {
+    isModalVisible.value = true;
+};
+
+const closeModal = () => {
+    isModalVisible.value = false;
+    eventTitle.value = '';
+    eventDate.value = '';
+};
+
+const addEvent = () => {
+    if (!checkEvent()) {
+        calendarEvents.value.push({
+            title: eventTitle.value,
+            start: eventDate.value,
+            backgroundColor: '#4CAF50'  // 일반 이벤트 색상
+        });
+        closeModal();
+    }
+};
+
+const checkEvent = () => {
+    eventAlert.value = isEmpty(eventTitle.value);
+    eventDateAlert.value = isEmpty(eventDate.value);
+    return eventAlert.value || eventDateAlert.value;
+};
+
+const calendarOptions = reactive({
+    plugins: [dayGridPlugin, interactionPlugin],
+    initialView: 'dayGridMonth',
+    headerToolbar: {
+        left: 'today',
+        center: 'title',
+        right: 'prev,next',
+    },
+    locale: 'kr',
+    events: calendarEvents,
+    eventOrder: 'sortIdx',
+    selectable: true,
+    dateClick: handleDateSelect,
+    droppable: false,
+    eventDisplay: 'block',
+
+    customButtons: {
+        prev: {
+            text: 'PREV',
+            click: () => moveCalendar(1),
+        },
+        today: {
+            text: 'TODAY',
+            click: () => moveCalendar(3),
+        },
+        next: {
+            text: 'NEXT',
+            click: () => moveCalendar(2),
+        },
+    },
+});
+
+// 달력 뷰 변경 감지
+watch(() => fullCalendarRef.value?.getApi().currentData.viewTitle, async () => {
+    await fetchData();
+});
+
+
+
+onMounted(async () => {
+    await fetchData();
+    await userStore.userInfo();
+    user.value = userStore.user;
+});
+</script>

src/components/input/FormInput.vue

@@ -13,6 +13,7 @@
                 :maxLength="maxlength"
                 :placeholder="title"
                 :disabled="disabled"
+                :min="min"
             />
             <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
                 {{ title }}을 확인해주세요.
@@ -64,6 +65,10 @@ const props = defineProps({
     disabled: {
         type: Boolean,
         default: false,
+    },
+    min: {
+        type: String,
+        default: '',
     }
 });
 

src/components/list/ProjectCard.vue

@@ -34,23 +34,17 @@
             </div>
         </div>
     </div>
-    <CenterModal :display="isModalOpen" @close="closeModal">
+    <CenterModal :display="isModalOpen" @close="closeModal" >
         <template #title> Log </template>
         <template #body>
-            <div class="ms-4 mt-2" v-if="logData">
+            <div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData">
                 <p class="mb-1">{{ logData.createDate }}</p>
                 <strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
             </div>
 
-            <div class="log-item" v-if="logData?.updateDate">
+            <div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData?.updateDate">
-                <div class="d-flex align-items-center">
+                <p class="mb-1">{{ logData.updateDate }}</p>
-                    <i class="bx bx-edit me-2"></i>
+                <strong>[{{ logData.updater }}] 프로젝트 수정</strong>
-                    <strong>수정 정보</strong>
-                </div>
-                <div class="ms-4 mt-2">
-                    <p class="mb-1">{{ logData.updateDate }}</p>
-                    <p class="mb-0 text-muted">[{{ logData.updater }}] 프로젝트 수정</p>
-                </div>
             </div>
 
         </template>

src/components/list/ProjectCardList.vue

@@ -1,190 +0,0 @@
-<template>
-    <div class="mt-4">
-        <div v-if="projectList.length === 0" class="text-center">
-            <p class="text-muted mt-4">게시물이 없습니다.</p>
-        </div>
-
-        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openModal(post)" class="cursor-pointer">
-            <ProjectCard
-                :title="post.PROJCTNAM"
-                :description="post.PROJCTDES"
-                :strdate="post.PROJCTSTR"
-                :enddate="post.PROJCTEND"
-                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
-                :projctSeq="post.PROJCTSEQ"
-                :projctCol="post.projctcolor"
-            />
-        </div>
-
-        <CenterModal :display="isModalOpen" @close="closeModal">
-            <template #title> 프로젝트 수정 </template>
-            <template #body>
-                <FormInput
-                    title="이름"
-                    name="name"
-                    :is-essential="true"
-                    :is-alert="nameAlert"
-                    v-model="selectedProject.PROJCTNAM"
-                />
-
-                <FormSelect
-                    title="컬러"
-                    name="color"
-                    :is-essential="true"
-                    :is-label="true"
-                    :is-common="true"
-                    :data="allColors"
-                    v-model="selectedProject.PROJCTCOL"
-                />
-
-                <FormInput
-                    title="시작일"
-                    type="date"
-                    name="startDay"
-                    v-model="selectedProject.PROJCTSTR"
-                    :is-essential="true"
-                />
-
-                <FormInput
-                    title="종료일"
-                    type="date"
-                    name="endDay"
-                    v-model="selectedProject.PROJCTEND"
-                />
-
-                <FormInput
-                    title="설명"
-                    name="description"
-                    v-model="selectedProject.PROJCTDES"
-                />
-
-                <ArrInput
-                    title="주소"
-                    name="address"
-                    :is-essential="true"
-                    :is-row="true"
-                    v-model="selectedProject"
-                    @update:data="updateAddress"
-                />
-
-            </template>
-            <template #footer>
-                <button class="btn btn-secondary" @click="closeModal">Close</button>
-                <button class="btn btn-primary" @click="handleSubmit">Save</button>
-            </template>
-        </CenterModal>
-    </div>
-</template>
-
-<script setup>
-    import { computed, ref } from 'vue';
-    import ProjectCard from './ProjectCard.vue';
-    import { onMounted } from 'vue';
-    import $api from '@api';
-    import CenterModal from '@c/modal/CenterModal.vue';
-    import FormInput from '@c/input/FormInput.vue';
-    import FormSelect from '@c/input/FormSelect.vue';
-    import commonApi from '@/common/commonApi';
-    import ArrInput from '@c/input/ArrInput.vue';
-    import { useUserInfoStore } from '@/stores/useUserInfoStore';
-    import { useToastStore } from '@s/toastStore';
-
-    const toastStore = useToastStore();
-
-    const projectList = ref([]);
-    const isModalOpen = ref(false);
-    let originalColor = ref('');
-
-    const userStore = useUserInfoStore();
-    const user = ref(null);
-
-    const nameAlert = ref(false);
-    const selectedProject = ref({
-        PROJCTSEQ:'',
-        PROJCTNAM: '',
-        PROJCTSTR: '',
-        PROJCTEND: '',
-        PROJCTZIP: '',
-        PROJCTARR: '',
-        PROJCTDTL: '',
-        PROJCTDES: '',
-        PROJCTCOL: '',
-        projctcolor:'',
-    });
-
-    const { colorList } = commonApi({
-        loadColor: true,
-        colorType: 'YNP',
-    });
-
-
-    onMounted(async () => {
-        getProjectList();
-
-        await userStore.userInfo(); // 로그인한 사용자 정보
-        user.value = userStore.user;
-    });
-
-    // 프로젝트 목록 불러오기
-    const getProjectList = () => {
-        $api.get('project/select').then(res => {
-            projectList.value = res.data.data.projectList;
-        });
-};
-
-
-    const openModal = (post) => {
-        isModalOpen.value = true;
-
-        originalColor.value = post.PROJCTCOL;
-        selectedProject.value = { ...post };
-    };
-
-    const closeModal = () => {
-        isModalOpen.value = false;
-    };
-
-    // 현재 프로젝트 색상 + 사용하지 않은 색상
-    const allColors = computed(() => {
-        // 기존 색상 추가
-        const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
-
-        // colorList에 기존 색상을 추가
-        return [existingColor, ...colorList.value];
-    });
-
-    const updateAddress = (addressData) => {
-        selectedProject.value = {
-            ...selectedProject.value,
-            PROJCTZIP: addressData.postcode,
-            PROJCTARR: addressData.address,
-            PROJCTDTL: addressData.detailAddress
-        };
-    };
-
-    const handleSubmit = () => {
-
-        console.log(selectedProject.value.PROJCTCOL)
-        console.log(originalColor.value)
-
-        $api.patch('project/update', {
-            projctSeq: selectedProject.value.PROJCTSEQ,
-            projctNam: selectedProject.value.PROJCTNAM,
-            projctCol: selectedProject.value.PROJCTCOL,
-            projctArr: selectedProject.value.PROJCTARR,
-            projctDtl: selectedProject.value.PROJCTDTL,
-            projctZip: selectedProject.value.PROJCTZIP,
-            projctStr: selectedProject.value.PROJCTSTR,
-            projctEnd: selectedProject.value.PROJCTEND || null,
-            projctDes: selectedProject.value.PROJCTDES,
-            projctUmb: user.value.name,
-            originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
-        }).then(res => {
-            if (res.status === 200) {
-                toastStore.onToast('수정이 완료 되었습니다.', 's');
-                closeModal();
-                location.reload();
-            }
-        })
-    };
-</script>

src/components/projectlist/ProjectList.vue

@@ -1,163 +1,365 @@
 <template>
-    <SearchBar />
+    <SearchBar @update:data="search"/>
     <div class="d-flex align-items-center">
-        <CategoryBtn :lists="yearCategory" v-model:selectedCategory="selectedCategory" />
+        <CategoryBtn :lists="yearCategory" @update:data="selectedCategory = $event" />
-        <WriteBtn class="mt-2 ms-auto" @click="openModal" />
+        <WriteBtn class="mt-2 ms-auto" @click="openCreateModal" />
-        <CenterModal :display="isModalOpen" @close="closeModal">
-            <template #title> 프로젝트 등록 </template>
-            <template #body>
-                <FormInput
-                    title="이름"
-                    name="name"
-                    :is-essential="true"
-                    :is-alert="nameAlert"
-                    @update:modelValue="name = $event"
-                />
-
-                <FormSelect
-                    title="컬러"
-                    name="color"
-                    :is-essential="true"
-                    :is-label="true"
-                    :is-common="true"
-                    :data="colorList"
-                    @update:data="color = $event"
-                />
-
-                <FormInput
-                    title="시작 일"
-                    type="date"
-                    name="startDay"
-                    v-model="startDay"
-                    :is-essential="true"
-                />
-
-                <FormInput
-                    title="종료 일"
-                    name="endDay"
-                    :type="'date'"
-                    @update:modelValue="endDay = $event"
-                />
-
-                <FormInput
-                    title="설명"
-                    name="description"
-                    @update:modelValue="description = $event"
-                />
-
-                <ArrInput
-                    title="주소"
-                    name="address"
-                    :isEssential="true"
-                    :is-row="true"
-                    :is-alert="addressAlert"
-                    @update:data="handleAddressUpdate"
-                    @update:alert="addressAlert = $event"
-                />
-            </template>
-            <template #footer>
-                <button class="btn btn-secondary" @click="closeModal">Close</button>
-                <button class="btn btn-primary" @click="handleSubmit">Save</button>
-            </template>
-        </CenterModal>
     </div>
-    <ProjectCardList :category="selectedCategory" />
+
+    <!-- 프로젝트 목록 -->
+    <div class="mt-4">
+        <div v-if="projectList.length === 0" class="text-center">
+            <p class="text-muted mt-4">게시물이 없습니다.</p>
+        </div>
+
+        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openEditModal(post)" class="cursor-pointer">
+            <ProjectCard
+                :title="post.PROJCTNAM"
+                :description="post.PROJCTDES"
+                :strdate="post.PROJCTSTR"
+                :enddate="post.PROJCTEND"
+                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
+                :projctSeq="post.PROJCTSEQ"
+                :projctCol="post.projctcolor"
+            />
+        </div>
+    </div>
+
+    <!-- 등록 모달 -->
+    <CenterModal :display="isCreateModalOpen" @close="closeCreateModal">
+        <template #title> 프로젝트 등록 </template>
+        <template #body>
+            <FormInput
+                title="이름"
+                name="name"
+                :is-essential="true"
+                :is-alert="nameAlert"
+                @update:modelValue="name = $event"
+            />
+
+            <FormSelect
+                title="컬러"
+                name="color"
+                :is-essential="true"
+                :is-label="true"
+                :is-common="true"
+                :data="colorList"
+                @update:data="color = $event"
+            />
+
+            <FormInput
+                title="시작 일"
+                type="date"
+                name="startDay"
+                v-model="startDay"
+                :is-essential="true"
+            />
+
+            <FormInput
+                title="종료 일"
+                name="endDay"
+                :type="'date'"
+                @update:modelValue="endDay = $event"
+            />
+
+            <FormInput
+                title="설명"
+                name="description"
+                @update:modelValue="description = $event"
+            />
+
+            <ArrInput
+                title="주소"
+                name="address"
+                :isEssential="true"
+                :is-row="true"
+                :is-alert="addressAlert"
+                @update:data="handleAddressUpdate"
+                @update:alert="addressAlert = $event"
+            />
+        </template>
+        <template #footer>
+            <BackButton @click="closeCreateModal" />
+            <SaveButton @click="handleCreate" />
+        </template>
+    </CenterModal>
+
+    <!-- 수정 모달 -->
+    <CenterModal :display="isEditModalOpen" @close="closeEditModal">
+        <template #title> 프로젝트 수정 </template>
+        <template #body>
+            <FormInput
+                title="이름"
+                name="name"
+                :is-essential="true"
+                :is-alert="nameAlert"
+                :modelValue="selectedProject.PROJCTNAM"
+                @update:modelValue="selectedProject.PROJCTNAM = $event"
+            />
+
+            <FormSelect
+                title="컬러"
+                name="color"
+                :is-essential="true"
+                :is-label="true"
+                :is-common="true"
+                :data="allColors"
+                :value="selectedProject.PROJCTCOL"
+                @update:data="selectedProject.PROJCTCOL = $event"
+            />
+
+            <FormInput
+                title="시작일"
+                type="date"
+                name="startDay"
+                :is-essential="true"
+                :modelValue="selectedProject.PROJCTSTR"
+                @update:modelValue="selectedProject.PROJCTSTR = $event"
+            />
+
+            <FormInput
+                title="종료일"
+                type="date"
+                name="endDay"
+                :modelValue="selectedProject.PROJCTEND"
+                @update:modelValue="selectedProject.PROJCTEND = $event"
+            />
+
+            <FormInput
+                title="설명"
+                name="description"
+                :modelValue="selectedProject.PROJCTDES"
+                @update:modelValue="selectedProject.PROJCTDES = $event"
+            />
+
+            <ArrInput
+                title="주소"
+                name="address"
+                :is-essential="true"
+                :is-row="true"
+                :modelValue="selectedProject"
+                @update:data="updateAddress"
+            />
+        </template>
+        <template #footer>
+            <BackButton @click="closeEditModal" />
+            <SaveButton @click="handleUpdate" />
+        </template>
+    </CenterModal>
 </template>
 
 <script setup>
-    import SearchBar from '@c/search/SearchBar.vue';
+import { computed, inject, ref, watch, onMounted } from 'vue';
-    import ProjectCardList from '@c/list/ProjectCardList.vue';
+import SearchBar from '@c/search/SearchBar.vue';
-    import CategoryBtn from '@c/category/CategoryBtn.vue';
+import ProjectCard from '@c/list/ProjectCard.vue';
-    import commonApi from '@/common/commonApi';
+import CategoryBtn from '@c/category/CategoryBtn.vue';
-    import { inject, onMounted, ref } from 'vue';
+import WriteBtn from '@c/button/WriteBtn.vue';
-    import WriteBtn from '@c/button/WriteBtn.vue';
+import CenterModal from '@c/modal/CenterModal.vue';
-    import CenterModal from '@c/modal/CenterModal.vue';
+import FormSelect from '@c/input/FormSelect.vue';
-    import FormSelect from '@c/input/FormSelect.vue';
+import FormInput from '@c/input/FormInput.vue';
-    import FormInput from '@c/input/FormInput.vue';
+import ArrInput from '@c/input/ArrInput.vue';
-    import ArrInput from '@c/input/ArrInput.vue';
+import commonApi from '@/common/commonApi';
-    import { useToastStore } from '@s/toastStore';
+import { useToastStore } from '@s/toastStore';
-    import $api from '@api';
+import { useUserInfoStore } from '@/stores/useUserInfoStore';
-    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+import $api from '@api';
+import SaveButton from '@c/button/SaveBtn.vue';
+import BackButton from '@c/button/BackBtn.vue'
 
-    const dayjs = inject('dayjs');
+const dayjs = inject('dayjs');
+const today = dayjs().format('YYYY-MM-DD');
+const toastStore = useToastStore();
+const userStore = useUserInfoStore();
 
-    const today = dayjs().format('YYYY-MM-DD');
+// 상태 관리
+const user = ref(null);
+const projectList = ref([]);
+const selectedCategory = ref(null);
+const searchText = ref('');
 
-    const toastStore = useToastStore();
+// 등록 모달 상태
-    const userStore = useUserInfoStore();
+const isCreateModalOpen = ref(false);
+const name = ref('');
+const color = ref('');
+const address = ref('');
+const detailAddress = ref('');
+const postcode = ref('');
+const startDay = ref(today);
+const endDay = ref('');
+const description = ref('');
+const nameAlert = ref(false);
+const addressAlert = ref(false);
 
-    const user = ref(null);
+// 수정 모달 상태
+const isEditModalOpen = ref(false);
+const originalColor = ref('');
+const selectedProject = ref({
+    PROJCTSEQ: '',
+    PROJCTNAM: '',
+    PROJCTSTR: '',
+    PROJCTEND: '',
+    PROJCTZIP: '',
+    PROJCTARR: '',
+    PROJCTDTL: '',
+    PROJCTDES: '',
+    PROJCTCOL: '',
+    projctcolor: '',
+});
 
-    const name = ref('');
+// API 호출
-    const color = ref('');
+const { yearCategory, colorList } = commonApi({
-    const address = ref('');
+    loadColor: true,
-    const detailAddress = ref('');
+    colorType: 'YNP',
-    const postcode = ref('');
+    loadYearCategory: true,
-    const startDay = ref(today);
+});
-    const endDay = ref('');
-    const description = ref('');
 
-    const isModalOpen = ref(false);
+// 프로젝트 목록 조회
-    const nameAlert = ref(false);
+const getProjectList = async () => {
-    const addressAlert = ref(false);
+    const res = await $api.get('project/select', {
-
+        params: {
-    const openModal = () => {
+            searchKeyword : searchText.value,
-        isModalOpen.value = true;
+            category : selectedYear.value,
-    };
+        },
-
-    const closeModal = () => {
-        isModalOpen.value = false;
-    };
-
-
-    const selectedCategory = ref(null);
-
-    const { yearCategory, colorList } = commonApi({
-        loadColor: true,
-        colorType: 'YNP',
-        loadYearCategory: true,
     });
+    projectList.value = res.data.data.projectList;
+};
 
-    // 주소 업데이트 핸들러
+// 검색 처리
-    const handleAddressUpdate = addressData => {
+const search = async (searchKeyword) => {
-        address.value = addressData.address;
+    searchText.value = searchKeyword.trim();
-        detailAddress.value = addressData.detailAddress;
+    await getProjectList();
-        postcode.value = addressData.postcode;
+};
-    };
+
+const selectedYear = computed(() => {
+    if (!selectedCategory.value || selectedCategory.value === 900101) {
+        return null;
+    }
+    // 선택된 category 값 label 값으로 변환
+    return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
+});
 
 
-    onMounted(async () => {
+// 카테고리 변경 감지
-        await userStore.userInfo(); // 로그인한 사용자 정보
+watch(selectedCategory, async () => {
-        user.value = userStore.user;
+    await getProjectList();
-    });
+});
 
-    const handleSubmit = async () => {
+// 등록 모달 관리
+const openCreateModal = () => {
+    isCreateModalOpen.value = true;
+};
 
-        nameAlert.value = name.value.trim() === '';
+const closeCreateModal = () => {
-        addressAlert.value = address.value.trim() === '';
+    isCreateModalOpen.value = false;
+};
 
-        if (nameAlert.value ||  addressAlert.value ) {
+// 등록 :: 주소 업데이트 핸들러
-            return;
+const handleAddressUpdate = addressData => {
+    address.value = addressData.address;
+    detailAddress.value = addressData.detailAddress;
+    postcode.value = addressData.postcode;
+};
+
+const handleCreate = async () => {
+    nameAlert.value = name.value.trim() === '';
+    addressAlert.value = address.value.trim() === '';
+
+    if (nameAlert.value || addressAlert.value) {
+        return;
+    }
+
+    $api.post('project/insert', {
+        projctNam: name.value,
+        projctCol: color.value,
+        projctStr: startDay.value,
+        projctEnd: endDay.value || null,
+        projctDes: description.value || null,
+        projctArr: address.value,
+        projctDtl: detailAddress.value,
+        projctZip: postcode.value,
+        projctCmb: user.value.name,
+    })
+    .then(res => {
+        if (res.status === 200) {
+            toastStore.onToast('프로젝트가 등록되었습니다.', 's');
+            closeCreateModal();
+            location.reload();
         }
+    });
+};
 
-        $api.post('project/insert', {
+// 수정 모달 관리
-            projctNam: name.value,
+const openEditModal = (post) => {
-            projctCol: color.value,
+    isEditModalOpen.value = true;
-            projctStr: startDay.value,
+    selectedProject.value = { ...post };
-            projctEnd: endDay.value || null,
+    originalColor.value = post.PROJCTCOL;
-            projctDes: description.value || null,
+};
-            projctArr: address.value,
+
-            projctDtl: detailAddress.value,
+const closeEditModal = () => {
-            projctZip: postcode.value,
+    isEditModalOpen.value = false;
-            projctCmb: user.value.name,
+};
-        })
+
-        .then(res => {
+// 기존 컬러 + 사용 가능 한 컬러
-            if (res.status === 200) {
+const allColors = computed(() => {
-                toastStore.onToast('프로젝트가 등록되었습니다.', 's');
+    const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
-                closeModal();
+    return [existingColor, ...colorList.value];
-                location.reload();
+});
-            }
+
-        })
+// 변경된 내용 있는지 확인
+const hasChanges = computed(() => {
+    const original = projectList.value.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
+    if (!original) return false;
+
+    return (
+        original.PROJCTNAM !== selectedProject.value.PROJCTNAM ||
+        original.PROJCTCOL !== selectedProject.value.PROJCTCOL ||
+        original.PROJCTARR !== selectedProject.value.PROJCTARR ||
+        original.PROJCTDTL !== selectedProject.value.PROJCTDTL ||
+        original.PROJCTZIP !== selectedProject.value.PROJCTZIP ||
+        original.PROJCTSTR !== selectedProject.value.PROJCTSTR ||
+        original.PROJCTEND !== selectedProject.value.PROJCTEND ||
+        original.PROJCTDES !== selectedProject.value.PROJCTDES
+    );
+});
+
+// 수정 :: 주소
+const updateAddress = (addressData) => {
+    selectedProject.value = {
+        ...selectedProject.value,
+        PROJCTZIP: addressData.postcode,
+        PROJCTARR: addressData.address,
+        PROJCTDTL: addressData.detailAddress
     };
+};
 
+const handleUpdate = () => {
+    if (!hasChanges.value) {
+        toastStore.onToast('변경된 내용이 없습니다.', 'e');
+        return;
+    }
+
+    $api.patch('project/update', {
+        projctSeq: selectedProject.value.PROJCTSEQ,
+        projctNam: selectedProject.value.PROJCTNAM,
+        projctCol: selectedProject.value.PROJCTCOL,
+        projctArr: selectedProject.value.PROJCTARR,
+        projctDtl: selectedProject.value.PROJCTDTL,
+        projctZip: selectedProject.value.PROJCTZIP,
+        projctStr: selectedProject.value.PROJCTSTR,
+        projctEnd: selectedProject.value.PROJCTEND || null,
+        projctDes: selectedProject.value.PROJCTDES,
+        projctUmb: user.value.name,
+        originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
+    }).then(res => {
+        if (res.status === 200) {
+            toastStore.onToast('수정이 완료 되었습니다.', 's');
+            closeEditModal();
+            location.reload();
+        }
+    });
+};
+
+onMounted(async () => {
+    await getProjectList();
+    await userStore.userInfo();
+    user.value = userStore.user;
+});
 </script>

src/components/user/FindPassword.vue

@@ -40,10 +40,11 @@
                 @update:alert="pwhintResAlert = $event"
                 :value="pwhintRes"
             />
-            <div class="d-flex mt-5">
+            <div class="d-flex gap-2 mt-7 mb-3">
-                <RouterLink type="button" class="btn btn-secondary me-2 w-50" to="/login">취소</RouterLink>
+                <BackBtn class=" w-50" @click="handleback"/>
-                <button type="button" @click="handleSubmit" class="btn btn-primary w-50">확인</button>
+                <SaveBtn class="w-50" @click="handleSubmit" />
             </div>
+            <p v-if="userCheckMsg" class="invalid-feedback d-block mb-0">{{ userCheckMsg }}</p>
         </template>
     </div>
 
@@ -73,7 +74,8 @@
         <span v-if="passwordcheckError" class="invalid-feedback d-block">{{ passwordcheckError }}</span>
 
         <div class="d-grid gap-2 mt-5 mb-5">
-            <button type="button" @click="handleNewPassword" class="btn btn-primary">확인</button>
+            <SaveBtn @click="handleNewPassword" />
+            <p v-if="pwErrMsg" class="invalid-feedback d-block mb-0">{{ pwErrMsg }}</p>
         </div>
     </div>
 </template>
@@ -86,6 +88,8 @@
     import { useToastStore } from '@s/toastStore';
     import UserFormInput from '@c/input/UserFormInput.vue';
     import FormSelect from '../input/FormSelect.vue';
+    import BackBtn from '@c/button/BackBtn.vue';
+    import SaveBtn from '../button/SaveBtn.vue';
 
     const router = useRouter();
     const toastStore = useToastStore();
@@ -94,6 +98,8 @@
     const birth = ref('');
     const pwhint = ref('');
     const pwhintRes = ref('');
+    const userCheckMsg = ref("");
+    const pwErrMsg = ref("");
 
     const idAlert = ref(false);
     const birthAlert = ref(false);
@@ -108,15 +114,22 @@
     const passwordcheckAlert = ref(false);
     const passwordcheckErrorAlert = ref(false);
 
-    const { pwhintList } = commonApi();
+    const { pwhintList } = commonApi({
+        loadPwhint: true,
+    });
 
     const handleIdChange = value => {
         id.value = value;
         idAlert.value = false;
     };
 
+    const handleback = () => {
+        router.push('/login');
+    }
+
     // 아이디, 생년월일, 비밀번호 힌트, 답변이 일치하는 member 재설정 input 보이기
     const handleSubmit = async () => {
+        userCheckMsg.value = '';
         idAlert.value = id.value.trim() === '';
         pwhintResAlert.value = pwhintRes.value.trim() === '';
         birthAlert.value = birth.value.trim() === '';
@@ -135,7 +148,8 @@
         if (response.status === 200 && response.data.data === true) {
             resetForm.value = true;
         } else {
-            toastStore.onToast('일치하는 정보가 없습니다.', 'e');
+            userCheckMsg.value = '입력하신 정보와 일치하는 회원이 없습니다.';
+            return;
         }
     };
 
@@ -151,9 +165,10 @@
 
     // 비밀번호 업데이트
     const handleNewPassword = async () => {
+        pwErrMsg.value = '';
         passwordAlert.value = password.value.trim() === '';
         passwordcheckAlert.value = passwordcheck.value.trim() === '';
-
+        checkPw();
         if (passwordAlert.value || passwordcheckAlert.value || passwordcheckErrorAlert.value) {
             return;
         }
@@ -164,7 +179,7 @@
         });
 
         if (checkResponse.data.data === false) {
-            toastStore.onToast('기존 비밀번호와 동일한 비밀번호로 변경할 수 없습니다.', 'e');
+            pwErrMsg.value = '기존 비밀번호와 동일한 비밀번호로 변경할 수 없습니다.';
             return;
         }
 

src/components/user/LoginForm.vue

@@ -13,6 +13,7 @@
 
             <div class="d-grid gap-2 mt-7 mb-5">
                 <button type="submit" @click="handleSubmit" class="btn btn-primary">로그인</button>
+                <p v-if="errorMessage" class="invalid-feedback d-block mb-0">{{ errorMessage }}</p>
             </div>
 
             <div class="mb-3 d-flex justify-content-around">
@@ -29,7 +30,6 @@
 <script setup>
     import $api from '@api';
     import router from '@/router';
-    import { useRoute } from 'vue-router';
     import { ref } from 'vue';
     import UserFormInput from '@c/input/UserFormInput.vue';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
@@ -39,9 +39,9 @@
     const idAlert = ref(false);
     const passwordAlert = ref(false);
     const remember = ref(false);
+    const errorMessage = ref("");
 
     const userStore = useUserInfoStore();
-    const route = useRoute();
 
     const handleIdChange = value => {
         id.value = value;
@@ -53,7 +53,8 @@
         passwordAlert.value = false;
     };
 
-const handleSubmit = async () => {
+    const handleSubmit = async () => {
+        errorMessage.value = '';
         idAlert.value = id.value.trim() === '';
         passwordAlert.value = password.value.trim() === '';
 
@@ -61,16 +62,23 @@ const handleSubmit = async () => {
             return;
         }
 
+
         $api.post('user/login', {
             loginId: id.value,
             password: password.value,
             remember: remember.value,
-        }, { headers: { 'X-Page-Route': route.path } })
+        }, { headers: { isLogin: true } })
         .then(res => {
             if (res.status === 200) {
                 userStore.userInfo();
                 router.push('/');
             }
+        }).catch(error => {
+            if (error.response) {
+                error.config.isLoginRequest = true;
+                errorMessage.value = error.response.data.message;
+                console.clear();
+            }
         });
     };
 </script>

src/components/user/RegisterForm.vue

@@ -141,9 +141,11 @@
                 :is-alert="phoneAlert"
                 @update:data="phone = $event"
                 @update:alert="phoneAlert = $event"
+                @blur="checkPhoneDuplicate"
                 :maxlength="11"
                 :value="phone"
             />
+            <span v-if="phoneError" class="invalid-feedback d-block">{{ phoneError }}</span>
 
             <div class="d-flex mt-5">
                 <RouterLink type="button" class="btn btn-secondary me-2 w-50" to="/login">취소</RouterLink>
@@ -181,6 +183,7 @@
     const detailAddress = ref('');
     const postcode = ref('');   // 우편번호
     const phone = ref('');
+    const phoneError = ref('');
     const color = ref(''); // 선택된 color
     const mbti = ref('');  // 선택된 MBTI
     const pwhint = ref('');  // 선택된 pwhint
@@ -196,6 +199,7 @@
     const birthAlert = ref(false);
     const addressAlert = ref(false);
     const phoneAlert = ref(false);
+    const phoneErrorAlert = ref(false);
 
     const toastStore = useToastStore();
 
@@ -251,6 +255,19 @@
         }
     };
 
+    // 전화번호 중복체크
+    const checkPhoneDuplicate = async () => {
+        const response = await $api.get(`/user/checkPhone?memberTel=${phone.value}`);
+
+        if (!response.data.data) {
+            phoneErrorAlert.value = true;
+            phoneError.value = '이미 사용 중인 전화번호입니다.';
+        } else {
+            phoneErrorAlert.value = false;
+            phoneError.value = '';
+        }
+    };
+
     // 컬러, mbti, 비밀번호 힌트 목록 불러오기
     const { colorList, mbtiList, pwhintList } = commonApi({
         loadColor: true, colorType: 'YON',
@@ -298,7 +315,7 @@
         }
 
         if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
-            passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value) {
+            passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value || phoneErrorAlert.value) {
             return;
         }
 

src/components/user/UserList.vue

@@ -5,7 +5,7 @@
             :key="index"
             class="avatar pull-up"
             :class="{ 'opacity-100': isUserDisabled(user) }"
-            @click="toggleDisable(index)"
+            @click.stop="toggleDisable(index)"
             data-bs-toggle="tooltip"
             data-popup="tooltip-custom"
             data-bs-placement="top"
@@ -17,6 +17,7 @@
                 :class="{ 'grayscaleImg': isUserDisabled(user) }"
                 :src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
                 :style="`border-color: ${user.usercolor} !important;`"
+                @error="$event.target.src = '/img/icons/icon.png'"
                 alt="user"
             />
         </li>

src/layouts/NormalLayout.vue

@@ -38,17 +38,11 @@ const loadScript = src => {
     script.type = 'text/javascript';
     script.async = true;
     document.body.appendChild(script);
-    script.onload = () => {
-        console.log(`${src} loaded successfully.`);
-    };
-    script.onerror = () => {
-        console.error(`Failed to load script: ${src}`);
-    };
 };
 nextTick(async () => {
     await wait(200);
     loadScript('/vendor/js/menu.js');
-    loadScript('/js/main.js');
+    // loadScript('/js/main.js');
 });
 </script>
 <style>

src/layouts/TheMenu.vue

@@ -67,12 +67,18 @@
                     <div class="text-truncate">Project</div>
                 </RouterLink>
             </li>
-            <li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">
+            <li class="menu-item" :class="$route.path.includes('/commuters') ? 'active' : ''">
+                <RouterLink class="menu-link" to="/commuters">
+                    <i class="menu-icon icon-base bx bx-buildings"></i>
+                    <div class="text-truncate">Commuters</div>
+                </RouterLink>
+            </li>
+            <!-- <li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">
                 <RouterLink class="menu-link" to="/sample"> <i class="bi "></i>
                     <i class="menu-icon tf-icons bx bx-calendar"></i>
                     <div class="text-truncate">Sample</div>
                 </RouterLink>
-            </li>
+            </li> -->
         </ul>
     </aside>
     <!-- / Menu -->

src/layouts/TheTop.vue

@@ -152,7 +152,7 @@
                 <!-- User -->
                 <li class="nav-item navbar-dropdown dropdown-user dropdown">
                     <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
-                        <img v-if="user" :src="`http://localhost:10325/upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle"/>
+                        <img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end">
                         <li>
@@ -232,8 +232,10 @@ import { useUserInfoStore } from '@/stores/useUserInfoStore';
 import { useRouter } from 'vue-router';
 import { useThemeStore } from '@s/darkmode';
 import { onMounted, ref } from 'vue';
+import $api from '@api';
 
 const user = ref(null);
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
 
 const authStore = useAuthStore();
 const userStore = useUserInfoStore();

src/router/index.js

@@ -80,6 +80,10 @@ const routes = [
         path: '/projectlist',
         component: () => import('@v/projectlist/TheProjectList.vue'),
     },
+    {
+        path: '/commuters',
+        component: () => import('@v/commuters/TheCommuters.vue'),
+    },
     {
         path: '/sample',
         component: () => import('@c/calendar/SampleCalendar.vue'),

src/views/board/BoardList.vue

@@ -1,102 +1,104 @@
 <template>
     <div class="container flex-grow-1 container-p-y">
-        <div class="row mb-4">
+        <div class="card">
-            <!-- 검색창 -->
+            <div class="card-header">
-            <div class="container col-8 px-3">
+                <!-- 검색창 -->
-                <search-bar @update:data="search" />
+                <div class="container col-6 mt-12 mb-8">
-            </div>
+                    <search-bar @update:data="search" />
-            <!-- 새 글쓰기 -->
+                </div>
-            <div class="container col-2 px-12 py-2">
-                <router-link to="/board/write">
-                    <WriteButton />
-                </router-link>
             </div>
+            <div class="card-datatable">
+                <div class="row mx-6 my-6 justify-content-between g-3 align-items-center">
+                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center gap-2 mt-0">
+                        <!-- 리스트 갯수 선택 -->
+                        <select class="form-select w-25 w-md-100" v-model="selectedSize" @change="handleSizeChange">
+                            <option value="10">10개씩</option>
+                            <option value="20">20개씩</option>
+                            <option value="30">30개씩</option>
+                            <option value="50">50개씩</option>
+                        </select>
 
-        <div class="row g-3">
+                         <!-- 셀렉트 박스 -->
-            <!-- 셀렉트 박스 -->
+                         <select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange">
-            <div class="col-12 col-md-auto">
+                            <option value="date">최신날짜</option>
-                <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
+                            <option value="views">조회수</option>
-                    <option value="date">최신날짜</option>
+                        </select>
-                    <option value="views">조회수</option>
-                </select>
-            </div>
-            <!-- 공지 접기 기능 -->
-            <div class="container col-1 px-0 py-2">
-                <label>
-                    <input type="checkbox" v-model="showNotices" /> 공지 숨기기
-                </label>
-            </div>
-            <!-- 리스트 갯수 선택 -->
-            <div class="container col-1 px-0 py-2">
-                <select class="form-select" v-model="selectedSize" @change="handleSizeChange">
-                    <option value="10">10개씩</option>
-                    <option value="20">20개씩</option>
-                    <option value="30">30개씩</option>
-                    <option value="50">50개씩</option>
-                </select>
-            </div>
-        </div>
-        </div>
-        <br>
-        <!-- 게시판 -->
-        <div class="table-responsive">
-            <table class="table table-bordered">
-                <thead class="table-light">
-                    <tr>
-                        <th style="width: 8%;">번호</th>
-                        <th style="width: 50%;">제목</th>
-                        <th style="width: 15%;">작성자</th>
-                        <th style="width: 12%;">작성일</th>
-                        <th style="width: 10%;">조회수</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- 공지사항 -->
-                    <template v-if="pagination.currentPage === 1 && !showNotices">
-                        <tr v-for="(notice, index) in noticeList"
-                            :key="'notice-' + index"
-                            class="bg-label-gray"
-                            @click="goDetail(notice.id)">
-                            <td>공지</td>
-                            <td>
-                                📌 {{ notice.title }}
-                                <i v-if="notice.img" class="bi bi-image me-1"></i>
-                                <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
-                                <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
-                            </td>
-                            <td>{{ notice.author }}</td>
-                            <td>{{ notice.date }}</td>
-                            <td>{{ notice.views }}</td>
-                        </tr>
-                    </template>
-                    <!-- 일반 게시물 -->
-                    <tr v-for="(post, index) in generalList"
-                        :key="'post-' + index"
-                        class="invert-bg-white"
-                        @click="goDetail(post.realId)">
-                        <td>{{ post.id }}</td>
-                        <td>
-                            {{ post.title }}
-                            <i v-if="post.img" class="bi bi-image me-1"></i>
-                            <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
-                            <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
-                        </td>
-                        <td>{{ post.author }}</td>
-                        <td>{{ post.date }}</td>
-                        <td>{{ post.views }}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
 
-        <!-- 페이지네이션 -->
+                        <!-- 공지 접기 기능 -->
-        <div class="row g-3">
+                        <div class="form-check mb-0 ms-2">
-            <div class="mt-8">
+                            <input class="form-check-input" type="checkbox" v-model="showNotices" id="hideNotices" />
-                <Pagination
+                            <label class="form-check-label" for="hideNotices">공지 숨기기</label>
-                    v-if="pagination.pages"
+                        </div>
-                    v-bind="pagination"
+                    </div>
-                    @update:currentPage="handlePageChange"
+                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center justify-content-md-end gap-2">
-                />
+                        <!-- 새 글쓰기 -->
+                        <router-link to="/board/write" class="ms-2">
+                            <WriteButton class="btn add-new btn-primary"/>
+                        </router-link>
+                    </div>
+                </div>
+                <!-- 게시판 -->
+                <div class="table-responsive">
+                    <table class="datatables-users table border-top dataTable dtr-column">
+                        <thead>
+                            <tr>
+                                <th style="width: 11%;" class="text-center fw-bold">번호</th>
+                                <th style="width: 45%;" class="text-center fw-bold">제목</th>
+                                <th style="width: 10%;" class="text-center fw-bold">작성자</th>
+                                <th style="width: 15%;" class="text-center fw-bold">작성일</th>
+                                <th style="width: 9%;" class="text-center fw-bold">조회수</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- 공지사항 -->
+                            <template v-if="pagination.currentPage === 1 && !showNotices">
+                                <tr v-for="(notice, index) in noticeList"
+                                    :key="'notice-' + index"
+                                    class="bg-label-gray fw-bold"
+                                    @click="goDetail(notice.id)">
+                                    <td class="text-center">공지</td>
+                                    <td>
+                                        📌 {{ notice.title }}
+                                        <i v-if="notice.img" class="bi bi-image me-1"></i>
+                                        <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
+                                        <span v-if="isNewPost(notice.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                    </td>
+                                    <td class="text-center">{{ notice.author }}</td>
+                                    <td class="text-center">{{ notice.date }}</td>
+                                    <td class="text-center">{{ notice.views }}</td>
+                                </tr>
+                            </template>
+                            <!-- 일반 게시물 -->
+                            <tr v-for="(post, index) in generalList"
+                                :key="'post-' + index"
+                                class="invert-bg-white"
+                                @click="goDetail(post.realId)">
+                                <td class="text-center">{{ post.id }}</td>
+                                <td>
+                                    {{ post.title }}
+                                    <i v-if="post.img" class="bi bi-image me-1"></i>
+                                    <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
+                                    <span v-if="isNewPost(post.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                </td>
+                                <td class="text-center">{{ post.author }}</td>
+                                <td class="text-center">{{ post.date }}</td>
+                                <td class="text-center">{{ post.views }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="card-footer">
+                <!-- 페이지네이션 -->
+                <div class="row g-3">
+                    <div class="mt-8">
+                        <Pagination
+                            v-if="pagination.pages"
+                            v-bind="pagination"
+                            @update:currentPage="handlePageChange"
+                        />
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -197,6 +199,7 @@ const fetchGeneralPosts = async (page = 1) => {
                 id: totalPosts - ((page - 1) * selectedSize.value) - index,
                 title: post.title,
                 author: post.author || '익명',
+                rawDate: post.date,
                 date: formatDate(post.date), // 날짜 변환 적용
                 views: post.cnt || 0,
                 hasAttachment: post.hasAttachment || false,
@@ -237,6 +240,7 @@ const fetchNoticePosts = async () => {
                 title: post.title,
                 author: post.author || '관리자',
                 date: formatDate(post.date),
+                rawDate: post.date,
                 views: post.cnt || 0,
                 hasAttachment: post.hasAttachment || false,
                 img: post.firstImageUrl || null
@@ -262,4 +266,9 @@ onMounted(() => {
 </script>
 
 <style scoped>
+    @media (max-width: 768px) {
+        .w-md-100 {
+            width: 100% !important;
+        }
+    }
 </style>

src/views/board/BoardView.vue

@@ -5,22 +5,34 @@
                 <div class="card">
                     <!-- 프로필 헤더 -->
                     <div class="card-header">
-                        <BoardProfile
+                        <div class="pb-5 border-bottom">
-                            :boardId="currentBoardId"
+                            <BoardProfile
-                            :profileName="profileName"
+                                :boardId="currentBoardId"
-                            :unknown="unknown"
+                                :profileName="profileName"
-                            :author="isAuthor"
+                                :unknown="unknown"
-                            :views="views"
+                                :author="isAuthor"
-                            :commentNum="commentNum"
+                                :views="views"
-                            :date="formattedBoardDate"
+                                :commentNum="commentNum"
-                            :isLike="false"
+                                :date="formattedBoardDate"
-                            :isPassword="isPassword"
+                                :isLike="false"
-                            :passwordAlert="passwordAlert"
+                                @editClick="editClick"
-                            @editClick="editClick"
+                                @deleteClick="deleteClick"
-                            @deleteClick="deleteClick"
+                            />
-                            @submitPassword="submitPassword"
+
-                            class="pb-6 border-bottom"
+                            <!-- 비밀번호 입력창 (익명일 경우) -->
-                        />
+                            <div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
+                                <div class="input-group">
+                                    <input
+                                        type="password"
+                                        class="form-control"
+                                        v-model="password"
+                                        placeholder="비밀번호 입력"
+                                    />
+                                    <button class="btn btn-primary" @click="submitPassword">확인</button>
+                                </div>
+                                <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
+                            </div>
+                        </div>
                     </div>
                     <!-- 게시글 내용 -->
                     <div class="card-body">
@@ -86,13 +98,17 @@
                         <BoardCommentList
                             :unknown="unknown"
                             :comments="comments"
+                            :isCommentPassword="isCommentPassword"
                             :isEditTextarea="isEditTextarea"
-                            :isPassword="isPassword"
+                            :passwordCommentAlert="passwordCommentAlert"
-                            @editClick="editClick"
+                            @editClick="editComment"
-                            @deleteClick="deleteClick"
+                            @deleteClick="deleteComment"
-                            @submitPassword="submitPassword"
+                            @updateReaction="handleCommentReaction"
-                            @updateReaction="handleUpdateReaction"
                             @submitComment="handleCommentReply"
+                            @submitPassword="submitCommentPassword"
+                            @commentDeleted="handleCommentDeleted"
+                            @cancelEdit="handleCancelEdit"
+                            @submitEdit="handleSubmitEdit"
                         />
                         <Pagination
                             v-if="pagination.pages"
@@ -133,17 +149,21 @@ const comments = ref([]);
 const route = useRoute();
 const router = useRouter();
 const currentBoardId = ref(Number(route.params.id));
-const unknown = computed(() => profileName.value === '익명 사용자');
+const unknown = computed(() => profileName.value === '익명');
 const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
 const authorId = ref(null); // 작성자 id
 
 const isAuthor = computed(() => currentUserId.value === authorId.value);
 
-const isEditTextarea = ref({});
 
+const password = ref('');
 const passwordAlert = ref("");
+const passwordCommentAlert = ref("");
 const isPassword = ref(false);
+const isCommentPassword = ref(false);
 const lastClickedButton = ref("");
+const lastCommentClickedButton = ref("");
+const isEditTextarea = ref(false);
 
 const pagination = ref({
     currentPage: 1,
@@ -170,10 +190,10 @@ const fetchBoardDetails = async () => {
         // API 응답 데이터 반영
         // const boardDetail = data.boardDetail || {};
 
-        profileName.value = data.author || '익명 사용자';
+        profileName.value = data.author || '익명';
 
         // 익명확인하고 싶을때
-        profileName.value = '익명 사용자';
+        // profileName.value = 'null;
 
         // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
         authorId.value = data.author;
@@ -195,15 +215,13 @@ const fetchBoardDetails = async () => {
 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
     try {
-        const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
+        await axios.post(`/board/${boardId}/${commentId}/reaction`, {
             LOCBRDSEQ: boardId, // 게시글 id
             LOCCMTSEQ: commentId, //댓글 id
             // MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
             LOCGOBGOD: isLike ? 'T' : 'F',
             LOCGOBBAD: isDislike ? 'T' : 'F'
         });
-        console.log("좋아요 API 응답 데이터:", aa.data);
-
 
         const response = await axios.get(`board/${boardId}`);
         const updatedData = response.data.data;
@@ -215,52 +233,92 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
         dislikeClicked.value = isDislike;
         // console.log(updatedData)
 
+        // console.log("갱신된 데이터:", updatedData);
+
     } catch (error) {
         alert('반응을 업데이트하는 중 오류 발생');
     }
 };
 
-// 댓글 목록 조회
+
+// 대댓글 좋아요
+const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
+    if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
+
+    try {
+        const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
+            LOCBRDSEQ: boardId,  // 게시글 ID
+            LOCCMTSEQ: commentId, // 댓글 ID
+            LOCGOBGOD: isLike ? 'T' : 'F',
+            LOCGOBBAD: isDislike ? 'T' : 'F'
+        });
+
+        // console.log("댓글 좋아요 API 응답 데이터:", response.data);
+
+        await fetchComments();
+
+    } catch (error) {
+        alert('댓글 반응을 업데이트하는 중 오류 발생');
+    }
+};
+
+// 댓글 목록 조회 (대댓글 포함)
 const fetchComments = async (page  = 1) => {
     try {
+        // 댓글
         const response = await axios.get(`board/${currentBoardId.value}/comments`, {
             params: {
                 LOCBRDSEQ: currentBoardId.value,
                 page
             }
         });
-        console.log("목록 API 응답 데이터:", response.data);
 
-        let allComments = response.data.data.list.map(comment => ({
+        const commentsList = response.data.data.list.map(comment => ({
-            commentId: comment.LOCCMTSEQ, // 댓글 id
+            commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
-            parentId: comment.LOCCMTPNT, // 부모 id
+            parentId: comment.LOCCMTPNT, // 부모 ID
-            author: comment.author || "익명 사용자", // 작성자
+            author: comment.author || '익명',
-            content: comment.LOCCMTRPY, // 댓글 내용
+            content: comment.LOCCMTRPY,
-            createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜
+            likeCount: comment.likeCount || 0,
-            children: []
+            dislikeCount: comment.dislikeCount || 0,
+            likeClicked: comment.likeClicked || false,
+            dislikeClicked: comment.dislikeClicked || false,
+            createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
+            createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
+            children: [], // 대댓글을 담을 배열
+            // isCommentPassword: false, // 개별 댓글 비밀번호 입력 상태
+            // isEditTextarea: false // 개별 댓글 수정 상태
         }));
 
-        allComments.sort((a, b) => b.commentId - a.commentId);
+        for (const comment of commentsList) {
+            if (!comment.commentId) continue;
 
-        let commentMap = {};
+            const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
-        let rootComments = [];
+                params: { LOCCMTPNT: comment.commentId }
+            });
 
-        allComments.forEach(comment => {
+            // console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
-            commentMap[comment.commentId] = comment;
-        });
 
-        allComments.forEach(comment => {
+            if (replyResponse.data.data) {
-            if (comment.parentId && commentMap[comment.parentId]) {
+                comment.children = replyResponse.data.data.map(reply => ({
-                commentMap[comment.parentId].children.push(comment);
+                    commentId: reply.LOCCMTSEQ,
+                    boardId: reply.LOCBRDSEQ,
+                    parentId: reply.LOCCMTPNT, // 부모 댓글 ID
+                    content: reply.LOCCMTRPY || "내용 없음",
+                    createdAtRaw: new Date(reply.LOCCMTRDT),
+                    createdAt: formattedDate(reply.LOCCMTRDT),
+                    likeCount: reply.likeCount || 0,
+                    dislikeCount: reply.dislikeCount || 0,
+                    likeClicked: false,
+                    dislikeClicked: false
+                }));
             } else {
-                rootComments.push(comment);
+                comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
             }
-        });
+        }
 
-        comments.value = rootComments;
+        // 최종적으로 댓글 목록 업데이트
-
+        comments.value = commentsList;
-        // console.log("변환된 comments 데이터:", comments.value);
 
         pagination.value = {
             ...pagination.value,
@@ -278,51 +336,93 @@ const fetchComments = async (page  = 1) => {
             navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
         };
 
+        // console.log("📌 댓글 목록:", comments.value);
+
+
     } catch (error) {
-        console.error('댓글 목록 불러오기 오류:', error);
+        console.log('댓글 목록 불러오기 오류:', error);
     }
 };
-
+const isSubmitting = ref(false);
 // 댓글 작성
 const handleCommentSubmit = async ({ comment, password }) => {
+    // if (unknown.value && !password) {
+    //     passwordAlert.value = "익명 사용자는 비밀번호를 입력해야 합니다."; // UI에 메시지 표시
+    //     return;
+    // }
+    // if (!password) {
+    //     passwordAlert.value = "비밀번호를 입력해야 합니다."; // UI에서 경고 표시
+    //     return;
+    // }
+
+     // 중복 실행 방지
+    if (isSubmitting.value) return;
+    isSubmitting.value = true;
+
     try {
         const response = await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: comment,
-            LOCCMTPWD: password || null,
+            LOCCMTPWD: password,
             LOCCMTPNT: 1
         });
-        // console.log('📥 서버 응답 전체:', response.data);
 
         if (response.status === 200) {
-            console.log('댓글 작성 성공:', response.data.message);
+            // console.log('댓글 작성 성공:', response.data.message);
             await fetchComments();
         } else {
-            console.error('댓글 작성 실패:', response.data.message);
+            console.log('댓글 작성 실패:', response.data.message);
         }
     } catch (error) {
-        console.error('댓글 작성 중 오류 발생:', error);
+        console.log('댓글 작성 중 오류 발생:', error);
     }
 };
 
-const handleCommentReply = async (reply) => {
-    const response = await axios.post(`board/${currentBoardId.value}/comment`, {
-        LOCBRDSEQ: currentBoardId.value,
-        LOCCMTRPY: reply.comment,
-        LOCCMTPWD: reply.password || null,
-        LOCCMTPNT: reply.parentId
-    });
 
-    if (response.status === 200) {
+// 대댓글 추가 (부모 `BoardCommentList`로부터 이벤트 받아서 처리)
-        console.log('대댓글 작성 성공:', response.data.message);
+const handleCommentReply = async (reply) => {
-        await fetchComments();
+    try {
-    } else {
+        // console.log('대댓글 작성 요청 데이터:', {
-        console.error('대댓글 작성 실패:', response.data.message);
+        //     LOCBRDSEQ: currentBoardId.value,
+        //     LOCCMTRPY: reply.comment,
+        //     LOCCMTPWD: reply.password || null,
+        //     LOCCMTPNT: reply.parentId
+        // });
+
+        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+            LOCBRDSEQ: currentBoardId.value,
+            LOCCMTRPY: reply.comment,
+            LOCCMTPWD: reply.password || null,
+            LOCCMTPNT: reply.parentId
+        });
+
+        // 응답 데이터를 자세히 로그로 확인
+        // console.log('대댓글 작성 응답:', {
+        //     status: response.status,
+        //     data: response.data,
+        //     headers: response.headers
+        // });
+
+        if (response.status === 200) {
+            if (response.data.code === 200) {  // 서버 응답 코드도 확인
+                console.log('대댓글 작성 성공:', response.data);
+                await fetchComments();  // 댓글 목록 새로고침
+            } else {
+                console.log('대댓글 작성 실패 - 서버 응답:', response.data);
+                alert('대댓글 작성에 실패했습니다.');
+            }
+        }
+    } catch (error) {
+        console.error('대댓글 작성 중 오류 발생:', error);
+        if (error.response) {
+            console.error('서버 응답 에러:', error.response.data);
+        }
+        alert('대댓글 작성 중 오류가 발생했습니다.');
     }
 }
 
+// 게시글 수정 버튼 클릭
 const editClick = (unknown) => {
-
     if (unknown) {
         togglePassword("edit");
     } else {
@@ -330,6 +430,7 @@ const editClick = (unknown) => {
     }
 };
 
+// 게시글 삭제 버튼 클릭
 const deleteClick = (unknown) => {
     if (unknown) {
         togglePassword("delete");
@@ -338,6 +439,64 @@ const deleteClick = (unknown) => {
     }
 };
 
+// 댓글 수정 버튼 클릭(대댓글 포함)
+const editComment = (comment) => {
+    if (comment.isEditTextarea) {
+        // 이미 수정창이 열려 있으면 닫기
+        comment.isEditTextarea = false;
+        return;
+    }
+
+    if (unknown.value) {
+        toggleCommentPassword(comment, "edit");
+    } else {
+        comment.isEditTextarea = true;
+    }
+
+    // comments.value.forEach(c => {
+    //     c.isEditTextarea = false;
+    //     c.isCommentPassword = false;
+    // });
+
+    // if (comment.unknown) {
+    //     comment.isCommentPassword = true;
+    // } else {
+    //     comment.isEditTextarea = true;
+    // }
+}
+
+// 댓글 삭제 버튼 클릭(대댓글 포함)
+const deleteComment = (comment) => {
+    if (unknown.value) {
+        if (comment.isEditTextarea) {
+            // 현재 수정 중이라면 수정 모드를 끄고, 삭제 비밀번호 입력창을 띄움
+            comment.isEditTextarea = false;
+            comment.isCommentPassword = true;
+        } else {
+            // 수정 중이 아니면 기존의 삭제 비밀번호 입력창을 띄우는 로직 실행
+            toggleCommentPassword(comment, "delete");
+        }
+    } else {
+        // 로그인 사용자 바로 삭제
+        comments.value = comments.value.filter(c => c.commentId !== comment.commentId);
+    }
+};
+
+// 익명 비밀번호 창 토글
+const toggleCommentPassword = (comment, button) => {
+    if (lastCommentClickedButton.value === button && comment.isCommentPassword) {
+        comment.isCommentPassword = false;
+    } else {
+        // 모든 댓글의 비밀번호 입력창 닫기
+        comments.value.forEach(c => (c.isCommentPassword = false));
+
+        // 현재 선택된 댓글만 비밀번호 입력창 열기
+        comment.isCommentPassword = true;
+    }
+
+    lastCommentClickedButton.value = button;
+};
+
 const togglePassword = (button) => {
     if (lastClickedButton.value === button) {
         isPassword.value = !isPassword.value;
@@ -347,25 +506,23 @@ const togglePassword = (button) => {
     lastClickedButton.value = button;
 };
 
-
+// 게시글 비밀번호 제출
-const submitPassword = async (inputPassword) => {
+const submitPassword = async () => {
-    console.log(inputPassword)
+    if (!password.value) {
-    if (!inputPassword) {
         passwordAlert.value = "비밀번호를 입력해주세요.";
         return;
     }
+    // console.log("📌 요청 시작: submitPassword 실행됨");
 
     try {
-        const requestData = {
+        const response = await axios.post(`board/${currentBoardId.value}/password`, {
-            LOCBRDPWD: inputPassword,
+            LOCBRDPWD: password.value,
-            LOCBRDSEQ: 288
+            LOCBRDSEQ: 288, // 나중에 현재 게시글 ID 사용해야함
-        };
+        });
 
-        const postResponse = await axios.post(`board/${currentBoardId.value}/password`, requestData);
+        if (response.data.code === 200 && response.data.data === true) {
-
+            password.value = '';
-        if (postResponse.data.code === 200 && postResponse.data.data === true) {
             isPassword.value = false;
-            passwordAlert.value = "";
 
             if (lastClickedButton.value === "edit") {
                 router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
@@ -374,19 +531,58 @@ const submitPassword = async (inputPassword) => {
             }
             lastClickedButton.value = null;
         } else {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.????";
         }
     } catch (error) {
-        if (error.response && error.response.status === 401) {
+        // console.log("📌 전체 오류:", error);
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+
-        } else if (error.response) {
+        if (error.response) {
-            alert(`오류 발생: ${error.response.data.message || "서버 오류"}`);
+            if (error.response.status === 401) {
+                passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+            } else {
+                passwordAlert.value = error.response.data?.message || "서버 오류가 발생했습니다.";
+            }
+        } else if (error.request) {
+            passwordAlert.value = "네트워크 오류가 발생했습니다. 다시 시도해주세요.";
         } else {
-            alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
+            passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
         }
     }
 };
 
+// 댓글 삭제 (비밀번호 확인 후)
+const submitCommentPassword = async (comment, password) => {
+    if (!password) {
+        passwordCommentAlert.value = "비밀번호를 입력해주세요.";
+        return;
+    }
+
+    try {
+        const response = await axios.post(`board/comment/${comment.commentId}/password`, {
+            LOCCMTPWD: password,
+            LOCCMTSEQ: comment.commentId,
+        });
+
+        if (response.data.code === 200 && response.data.data === true) {
+            comment.isCommentPassword = false;
+
+            if (lastCommentClickedButton.value === "edit") {
+                comment.isEditTextarea = true;
+                // handleSubmitEdit(comment, comment.content);
+            } else if (lastCommentClickedButton.value === "delete") {
+
+                deleteReplyComment(comment)
+            }
+            lastCommentClickedButton.value = null;
+        } else {
+            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
+        }
+    } catch (error) {
+        passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
+    }
+};
+
+// 게시글 삭제
 const deletePost = async () => {
     if (confirm("정말 삭제하시겠습니까?")) {
         try {
@@ -410,6 +606,53 @@ const deletePost = async () => {
     }
 };
 
+// 댓글 삭제 (대댓글 포함)
+const deleteReplyComment = async (comment) => {
+    if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
+    // console.log("댓글 ID:", comment);
+
+    try {
+        const response = await axios.delete(`board/comment/${comment.commentId}`, {
+            data: { LOCCMTSEQ: comment.commentId }
+        });
+
+        // console.log("서버 응답:", response.data);
+
+        if (response.data.code === 200) {
+            // console.log("댓글 삭제 성공!");
+            await fetchComments();
+        } else {
+            // console.log("댓글 삭제 실패:", response.data.message);
+            alert("댓글 삭제에 실패했습니다.");
+        }
+    } catch (error) {
+        console.log("댓글 삭제 중 오류 발생:", error);
+        alert("댓글 삭제 중 오류가 발생했습니다.");
+    }
+};
+
+// 댓글 수정 확인 (대댓글 포함)
+const handleSubmitEdit = async (comment, editedContent) => {
+    try {
+        const response = await axios.put(`board/comment/${comment.commentId}`, {
+            LOCCMTSEQ: comment.commentId,
+            LOCCMTRPY: editedContent
+        });
+
+        // 수정 성공 시 업데이트
+        comment.content = editedContent;
+        comment.isEditTextarea = false;
+    } catch (error) {
+        console.error("댓글 수정 중 오류 발생:", error);
+    }
+};
+
+// 댓글 수정 취소 (대댓글 포함)
+const handleCancelEdit = (comment) => {
+    console.log("BoardView.vue - 댓글 수정 취소:", comment);
+    comment.isEditTextarea = false;
+};
+
 // 페이지 변경
 const handlePageChange = (page) => {
     if (page !== pagination.value.currentPage) {
@@ -418,6 +661,10 @@ const handlePageChange = (page) => {
     }
 };
 
+const handleCommentDeleted = (deletedCommentId) => {
+    comments.value = comments.value.filter(comment => comment.commentId !== deletedCommentId);
+};
+
 // 날짜
 const formattedDate = (dateString) => {
     if (!dateString) return "날짜 없음";

src/views/commuters/TheCommuters.vue

@@ -0,0 +1,9 @@
+<template>
+    <Calendar />
+</template>
+
+<script setup>
+import Calendar from '@c/commuters/Calendar.vue';
+
+
+</script>

src/views/vacation/VacationManagement.vue

@@ -1,117 +1,148 @@
 <template>
     <div class="vacation-management">
-        <div class="container-xxl flex-grow-1 container-p-y">
+      <div class="container-xxl flex-grow-1 container-p-y">
         <div class="card app-calendar-wrapper">
-            <div class="row g-0">
+          <div class="row g-0">
             <div class="col app-calendar-content">
-                <div class="card shadow-none border-0">
+              <div class="card shadow-none border-0">
-                    <ProfileList
+                <ProfileList
-                    @profileClick="handleProfileClick"
+                  @profileClick="handleProfileClick"
-                    :remainingVacationData="remainingVacationData"
+                  :remainingVacationData="remainingVacationData"
-                    />
+                />
                 <div class="card-body w-75 p-3 align-self-center">
-                    <VacationModal
+                  <!-- 모달에 필터링된 연차 목록 전달 -->
+                  <VacationModal
                     v-if="isModalOpen"
                     :isOpen="isModalOpen"
-                    :myVacations="myVacations"
+                    :myVacations="filteredMyVacations"
-                    :receivedVacations="receivedVacations"
+                    :receivedVacations="filteredReceivedVacations"
                     :userColors="userColors"
                     @close="isModalOpen = false"
-                    />
+                  />
 
-                    <VacationGrantModal
+                  <VacationGrantModal
-                      v-if="isGrantModalOpen"
+                    v-if="isGrantModalOpen"
-                      :isOpen="isGrantModalOpen"
+                    :isOpen="isGrantModalOpen"
-                      :targetUser="selectedUser"
+                    :targetUser="selectedUser"
-                      :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
+                    :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
-                      @close="isGrantModalOpen = false"
+                    @close="isGrantModalOpen = false"
-                      @updateVacation="fetchRemainingVacation"
+                    @updateVacation="fetchRemainingVacation"
-                    />
+                  />
-                    <full-calendar
+                  <full-calendar
                     ref="fullCalendarRef"
                     :options="calendarOptions"
                     class="flatpickr-calendar-only"
-                    />
+                  />
-                    <HalfDayButtons
+                  <HalfDayButtons
                     @toggleHalfDay="toggleHalfDay"
                     @addVacationRequests="saveVacationChanges"
-                    />
+                  />
-                </div>
                 </div>
+              </div>
             </div>
-            </div>
+          </div>
-        </div>
         </div>
+      </div>
     </div>
-</template>
+  </template>
 
-<script setup>
+  <script setup>
-import FullCalendar from "@fullcalendar/vue3";
+  import { reactive, ref, onMounted, nextTick, computed } from "vue";
-import dayGridPlugin from "@fullcalendar/daygrid";
+  import axios from "@api";
-import interactionPlugin from "@fullcalendar/interaction";
+  import FullCalendar from "@fullcalendar/vue3";
-import "flatpickr/dist/flatpickr.min.css";
+  import dayGridPlugin from "@fullcalendar/daygrid";
-import "@/assets/css/app-calendar.css";
+  import interactionPlugin from "@fullcalendar/interaction";
-import { reactive, ref, onMounted, nextTick } from "vue";
+  import "flatpickr/dist/flatpickr.min.css";
-import axios from "@api";
+  import "@/assets/css/app-calendar.css";
-import "bootstrap-icons/font/bootstrap-icons.css";
+  import "bootstrap-icons/font/bootstrap-icons.css";
-import HalfDayButtons from "@c/button/HalfDayButtons.vue";
+  import HalfDayButtons from "@c/button/HalfDayButtons.vue";
-import ProfileList from "@c/vacation/ProfileList.vue";
+  import ProfileList from "@c/vacation/ProfileList.vue";
-import { useUserStore } from "@s/userList";
+  import VacationModal from "@c/modal/VacationModal.vue";
-import VacationModal from "@c/modal/VacationModal.vue"
+  import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
-import { useUserInfoStore } from "@s/useUserInfoStore";
+  import { useUserStore } from "@s/userList";
-import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
+  import { useUserInfoStore } from "@s/useUserInfoStore";
+  import { fetchHolidays } from "@c/calendar/holiday.js";
 
-const userStore = useUserInfoStore();
+  const userStore = useUserInfoStore();
-const userListStore = useUserStore();
+  const userListStore = useUserStore();
-const userList = ref([]);
+  const userList = ref([]);
-const userColors = ref({});
+  const userColors = ref({});
-const myVacations = ref([]); // 내가 사용한 연차 목록
+  const myVacations = ref([]); // 전체 "사용한 연차" 목록
-const receivedVacations = ref([]); // 내가 받은 연차 목록
+  const receivedVacations = ref([]); // 전체 "받은 연차" 목록
-const isModalOpen = ref(false);
+  const isModalOpen = ref(false);
-const remainingVacationData = ref({});
+  const remainingVacationData = ref({});
+  // 모달을 열 때 기준 연도 (모달에 표시할 연도)
+  const modalYear  = ref(new Date().getFullYear());
+  const modalMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
+  const lastRemainingYear = ref(new Date().getFullYear());
 
-const isGrantModalOpen = ref(false);
+  const isGrantModalOpen = ref(false);
-const selectedUser = ref(null);
+  const selectedUser = ref(null);
 
+  // FullCalendar 관련
+  const fullCalendarRef = ref(null);
+  const calendarEvents = ref([]);
+  const selectedDates = ref(new Map());
+  const halfDayType = ref(null);
+  const vacationCodeMap = ref({});
+  const holidayDates = ref(new Set());
+  const fetchedEvents = ref([]);
 
-onMounted(async () => {
+  const calendarOptions = reactive({
-  await userStore.userInfo();
+    plugins: [dayGridPlugin, interactionPlugin],
-  await fetchRemainingVacation();
+    initialView: "dayGridMonth",
-});
+    headerToolbar: {
+      left: "today",
+      center: "title",
+      right: "prev,next",
+    },
+    locale: "ko",
+    selectable: false,
+    dateClick: handleDateClick,
+    datesSet: handleMonthChange,
+    events: calendarEvents,
+  });
 
-const fetchRemainingVacation = async () => {
+  onMounted(async () => {
-  try {
+    await userStore.userInfo();
-    const response = await axios.get("vacation/remaining");
+    await fetchRemainingVacation();
-    if (response.status === 200) {
+  });
-      remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
+
-        acc[vacation.employeeId] = vacation.remainingQuota;
+  const fetchRemainingVacation = async () => {
-        return acc;
+    try {
-      }, {});
+      const response = await axios.get("vacation/remaining");
+      if (response.status === 200) {
+        remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
+          acc[vacation.employeeId] = vacation.remainingQuota;
+          return acc;
+        }, {});
+      }
+    } catch (error) {
+      console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
     }
-  } catch (error) {
+  };
-    console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
-  }
-};
 
+  // 프로필 클릭 시 연차 내역 가져오기
 // 프로필 클릭 시 연차 내역 가져오기
 const handleProfileClick = async (user) => {
   try {
     if (user.MEMBERSEQ === userStore.user.id) {
-      // 내 프로필을 클릭한 경우
+      const year = new Date().getFullYear(); // 현재 연도
-      const response = await axios.get(`vacation/history`);
+      // 연도 파라미터를 전달하여 전체 연도의 연차 내역을 조회
-
+      const response = await axios.get(`vacation/history?year=${year}`);
       if (response.status === 200 && response.data) {
         myVacations.value = response.data.data.usedVacations || [];
         receivedVacations.value = response.data.data.receivedVacations || [];
-        isModalOpen.value = true; // 내 연차 모달 열기
+        isModalOpen.value = true;
+        // 모달을 열 때 기준 연도 갱신
+        modalYear.value = year;
         isGrantModalOpen.value = false;
       } else {
         console.warn("❌ 연차 내역을 불러오지 못했습니다.");
       }
     } else {
-      // 다른 사람의 프로필을 클릭한 경우
       selectedUser.value = user;
-      isGrantModalOpen.value = true; // 연차 부여 모달 열기
+      isGrantModalOpen.value = true;
       isModalOpen.value = false;
     }
   } catch (error) {
@@ -119,188 +150,156 @@ const handleProfileClick = async (user) => {
   }
 };
 
-const fetchUserList = async () => {
+  const fetchUserList = async () => {
-  try {
+    try {
-    await userListStore.fetchUserList();
+      await userListStore.fetchUserList();
-    userList.value = userListStore.userList;
+      userList.value = userListStore.userList;
-
+      if (!userList.value.length) {
-    if (!userList.value.length) {
+        console.warn("📌 사용자 목록이 비어 있음!");
-      console.warn("📌 사용자 목록이 비어 있음!");
+        return;
-      return;
+      }
+      userColors.value = {};
+      userList.value.forEach((user) => {
+        userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
+      });
+    } catch (error) {
+      console.error("📌 사용자 목록 불러오기 오류:", error);
     }
+  };
 
-    userColors.value = {};
+  const fetchVacationCodes = async () => {
-    userList.value.forEach((user) => {
+    try {
-      userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
+      const response = await axios.get("vacation/codes");
-    });
+      if (response.status === 200 && response.data) {
-  } catch (error) {
+        vacationCodeMap.value = response.data.data.reduce((acc, item) => {
-    console.error("📌 사용자 목록 불러오기 오류:", error);
+          acc[item.code] = item.name;
-  }
+          return acc;
-};
+        }, {});
+      } else {
+        console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
+      }
+    } catch (error) {
+      console.error("🚨 공통 코드 API 호출 실패:", error);
+    }
+  };
 
-// FullCalendar 관련 참조 및 데이터
+  const getVacationType = (typeCode) => {
-const fullCalendarRef = ref(null);
+    return vacationCodeMap.value[typeCode] || "기타";
-const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
+  };
-const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
-const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
-const halfDayType = ref(null);
-const vacationCodeMap = ref({}); // 휴가 코드명 저장용
 
-// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
+  // computed: modalYear와 일치하는 항목만 필터링
-const holidayDates = ref(new Set());
+const filteredMyVacations = computed(() => {
-
+  const filtered = myVacations.value.filter(vac => {
-// FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
+    // vac.date가 없으면 vac.LOCVACUDT를 사용하도록 함
-const calendarOptions = reactive({
+    const dateStr = vac.date || vac.LOCVACUDT;
-plugins: [dayGridPlugin, interactionPlugin],
+    const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
-initialView: "dayGridMonth",
+    console.log("vacation year:", year, "modalYear:", modalYear.value);
-headerToolbar: {
+    return year === String(modalYear.value);
-    left: "today",
+  });
-    center: "title",
+  console.log("filteredMyVacations:", filtered);
-    right: "prev,next",
+  return filtered;
-},
-locale: "ko",
-selectable: false,
-dateClick: handleDateClick,
-datesSet: handleMonthChange,
-events: calendarEvents,
 });
 
-const fetchVacationCodes = async () => {
+const filteredReceivedVacations = computed(() => {
-  try {
+  return receivedVacations.value.filter(vac => {
-    const response = await axios.get("vacation/codes");
+    const dateStr = vac.date || vac.LOCVACUDT;
-    if (response.status === 200 && response.data) {
+    const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
-      // 배열을 객체 형태로 변환
+    console.log("vacation year:", year, "modalYear:", modalYear.value);
-      vacationCodeMap.value = response.data.data.reduce((acc, item) => {
+    return dateStr && year === String(modalYear.value);
-        acc[item.code] = item.name; // code를 key로, name을 value로 설정
-        return acc;
-      }, {});
-    } else {
-      console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
-    }
-  } catch (error) {
-    console.error("🚨 공통 코드 API 호출 실패:", error);
-  }
-};
-
-// 🔹 typeCode를 통해 code명 반환
-const getVacationType = (typeCode) => {
-  return vacationCodeMap.value[typeCode] || "기타";
-};
-
-
-function updateCalendarEvents() {
-  // 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
-  const selectedEvents = Array.from(selectedDates.value)
-    .filter(([date, type]) => type !== "delete")
-    .map(([date, type]) => ({
-      title: getVacationType(type),
-      start: date,
-      backgroundColor: "rgba(0, 128, 0, 0.3)",
-      display: "background",
-      classNames: [getVacationTypeClass(type)]
-    }));
-
-  // 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
-  // 해당 날짜가 삭제 대상으로 표시되어 있으면 제거
-  const filteredFetchedEvents = fetchedEvents.value.filter(event => {
-    if (event.saved) { // saved 플래그가 있는 이벤트는 저장된 연차
-      return selectedDates.value.get(event.start) !== "delete";
-    }
-    return true;
   });
-  calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
+});
-}
 
-/**
- * ✅ 반차 유형에 따라 클래스명 지정 (색상 변경 없이 영역만 조정)
- */
- const getVacationTypeClass = (type) => {
-  if (type === "700101") return "half-day-am"; // 오전반차 → 왼쪽 절반
-  if (type === "700102") return "half-day-pm"; // 오후반차 → 오른쪽 절반
-  return "full-day"; // 연차 → 전체 배경
-};
 
-/**
+  function updateCalendarEvents() {
- * 날짜 클릭 이벤트
+    const selectedEvents = Array.from(selectedDates.value)
- * - 주말(토, 일)과 공휴일은 클릭되지 않음
+      .filter(([date, type]) => type !== "delete")
- * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
+      .map(([date, type]) => ({
- */
+        title: getVacationType(type),
- function handleDateClick(info) {
+        start: date,
-  const clickedDateStr = info.dateStr; // "YYYY-MM-DD" 형식
+        backgroundColor: "rgb(113 212 243 / 76%)",
-  const clickedDate = info.date;
+        textColor: "#fff",
-  const todayStr = new Date().toISOString().split("T")[0];
+        display: "background",
-
+        classNames: [getVacationTypeClass(type), "selected-event"]
-  // 주말, 공휴일, 오늘 이전 날짜는 클릭 불가
+      }));
-  if (
+    const filteredFetchedEvents = fetchedEvents.value.filter(event => {
-    clickedDate.getDay() === 0 ||
+      if (event.saved) {
-    clickedDate.getDay() === 6 ||
+        return selectedDates.value.get(event.start) !== "delete";
-    holidayDates.value.has(clickedDateStr) ||
+      }
-    clickedDateStr < todayStr
+      return true;
-  ) {
+    });
-    return;
+    calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
   }
 
-  // 토글: 이미 선택된 날짜라면 해제
+  const getVacationTypeClass = (type) => {
-  if (selectedDates.value.has(clickedDateStr)) {
+    if (type === "700101") return "half-day-am";
-    selectedDates.value.delete(clickedDateStr);
+    if (type === "700102") return "half-day-pm";
+    return "full-day";
+  };
+
+  function handleDateClick(info) {
+    const clickedDateStr = info.dateStr;
+    const clickedDate = info.date;
+    const todayStr = new Date().toISOString().split("T")[0];
+    if (
+      clickedDate.getDay() === 0 ||
+      clickedDate.getDay() === 6 ||
+      holidayDates.value.has(clickedDateStr) ||
+      clickedDateStr < todayStr
+    ) {
+      return;
+    }
+    if (selectedDates.value.has(clickedDateStr)) {
+      selectedDates.value.delete(clickedDateStr);
+      updateCalendarEvents();
+      return;
+    }
+    const unsentVacation = myVacations.value.find(
+      (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
+    );
+    if (unsentVacation) {
+      selectedDates.value.set(clickedDateStr, "delete");
+    } else {
+      const type = halfDayType.value
+        ? (halfDayType.value === "AM" ? "700101" : "700102")
+        : "700103";
+      selectedDates.value.set(clickedDateStr, type);
+    }
+    halfDayType.value = null;
     updateCalendarEvents();
-    return;
   }
 
-  // 저장된(보낸사람 없는) 연차가 있는지 확인
+  function toggleHalfDay(type) {
-  const unsentVacation = myVacations.value.find(
+    halfDayType.value = halfDayType.value === type ? null : type;
-    (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
-  );
-
-  if (unsentVacation) {
-    // 기존 저장된 연차가 있다면, 클릭 시 "delete" 플래그 지정 (즉, 숨김 처리)
-    selectedDates.value.set(clickedDateStr, "delete");
-  } else {
-    // 그렇지 않으면 신규 연차 추가: halfDayType 값에 따라 결정
-    const type = halfDayType.value
-      ? (halfDayType.value === "AM" ? "700101" : "700102")
-      : "700103";
-    selectedDates.value.set(clickedDateStr, type);
   }
 
-  halfDayType.value = null;
+  async function fetchVacationData(year, month) {
-  updateCalendarEvents();
-}
-
-/**
- * 오전/오후 반차 버튼 토글
- */
-function toggleHalfDay(type) {
-halfDayType.value = halfDayType.value === type ? null : type;
-}
-
-/**
- * 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
- */
- async function fetchVacationData(year, month) {
   try {
     const response = await axios.get(`vacation/list/${year}/${month}`);
     if (response.status === 200) {
       const vacationList = response.data;
-      // 내 연차 데이터 업데이트 (사용자 본인의 연차만)
+      // 모달이 열려 있더라도 전달받은 연도가 기존 modalYear와 다르면 업데이트
-      myVacations.value = vacationList.filter(
+      if (modalYear.value !== year) {
-        (vac) => vac.MEMBERSEQ === userStore.user.id
+        myVacations.value = vacationList.filter(
-      );
+          (vac) => vac.MEMBERSEQ === userStore.user.id
-      // 기존 저장된 연차 이벤트에 saved 플래그 추가
+        );
+        modalYear.value = year;
+        // modalMonth는 그대로 유지 (월은 모달 업데이트 조건에서 제외)
+      }
+      // 캘린더 이벤트 매핑
       const events = vacationList
-        .filter((vac) => !vac.LOCVACRMM) // 보낸사람이 없는(저장된) 연차
+        .filter((vac) => !vac.LOCVACRMM)
         .map((vac) => {
-          let dateStr = vac.LOCVACUDT.split("T")[0];
+          let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
           let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
           return {
             title: getVacationType(vac.LOCVACTYP),
             start: dateStr,
             backgroundColor,
             classNames: [getVacationTypeClass(vac.LOCVACTYP)],
-            saved: true, // saved 플래그 추가
+            saved: true,
           };
         })
-        .filter((event) => event !== null);
+        .filter((event) => event.start);
       return events;
     } else {
       console.warn("📌 휴가 데이터를 불러오지 못함");
@@ -312,117 +311,80 @@ halfDayType.value = halfDayType.value === type ? null : type;
   }
 }
 
-/**
+  async function saveVacationChanges() {
- * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
+    const selectedDatesArray = Array.from(selectedDates.value);
- */
+    const vacationsToAdd = selectedDatesArray
- async function saveVacationChanges() {
+      .filter(([date, type]) => type !== "delete")
-  // 추가할 연차: selectedDates 항목 중 type이 "delete"가 아닌 경우
+      .filter(([date, type]) =>
-  const selectedDatesArray = Array.from(selectedDates.value);
+        !myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date)) ||
-  const vacationsToAdd = selectedDatesArray
+        myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
-    .filter(([date, type]) => type !== "delete")
+      )
-    .filter(([date, type]) =>
+      .map(([date, type]) => ({ date, type }));
-      // 기존 데이터에 없거나, 기존 데이터에 있더라도 보낸사람(LOCVACRMM)이 있는 경우 추가
+    const vacationsToDelete = myVacations.value
-      !myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date)) ||
+      .filter(vac => {
-      myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
+        if (!vac.LOCVACUDT) return false;
-    )
+        const date = vac.LOCVACUDT.split("T")[0];
-    .map(([date, type]) => ({ date, type }));
+        return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
-
+      })
-  // 삭제할 연차: 기존 데이터 중 보낸사람이 없는 항목에서,
+      .map(vac => {
-  // 해당 날짜가 "delete"로 지정되었거나 선택되지 않은 경우
+        const id = vac.LOCVACSEQ;
-  const vacationsToDelete = myVacations.value
+        return typeof id === "number" ? Number(id) : id;
-  .filter(vac => {
+      });
-    const date = vac.LOCVACUDT.split("T")[0];
+    try {
-    // 오직 해당 날짜가 "delete"로 선택된 경우만 삭제 대상으로 처리
+      const response = await axios.post("vacation/batchUpdate", {
-    return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
+        add: vacationsToAdd,
-  })
+        delete: vacationsToDelete
-  .map(vac => {
+      });
-    const id = vac.LOCVACSEQ ;
+      if (response.data && response.data.status === "OK") {
-    return typeof id === "number" ? Number(id) : id;
+        alert("✅ 휴가 변경 사항이 저장되었습니다.");
-  });
+        await fetchRemainingVacation();
-
+        const currentDate = fullCalendarRef.value.getApi().getDate();
-
+        await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
-  console.log("vacationsToAdd:", vacationsToAdd);
+        selectedDates.value.clear();
-  console.log("vacationsToDelete:", vacationsToDelete);
+        updateCalendarEvents();
-
+      } else {
-  try {
+        alert("❌ 휴가 저장 중 오류가 발생했습니다.");
-    const response = await axios.post("vacation/batchUpdate", {
+      }
-      add: vacationsToAdd,
+    } catch (error) {
-      delete: vacationsToDelete
+      console.error("🚨 휴가 변경 저장 실패:", error);
-    });
+      alert("❌ 휴가 저장 요청에 실패했습니다.");
-    if (response.data && response.data.status === "OK") {
-      alert("✅ 휴가 변경 사항이 저장되었습니다.");
-      await fetchRemainingVacation();
-      const currentDate = fullCalendarRef.value.getApi().getDate();
-      await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
-      // 초기화: 선택한 날짜 해제
-      selectedDates.value.clear();
-      updateCalendarEvents();
-    } else {
-      alert("❌ 휴가 저장 중 오류가 발생했습니다.");
     }
-  } catch (error) {
-    console.error("🚨 휴가 변경 저장 실패:", error);
-    alert("❌ 휴가 저장 요청에 실패했습니다.");
   }
-}
 
-/**
+  function handleMonthChange(viewInfo) {
- * 공휴일 데이터 요청 및 이벤트 변환
+    const currentDate = viewInfo.view.currentStart;
- */
+    const year = currentDate.getFullYear();
-async function fetchHolidays(year, month) {
+    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-try {
+    loadCalendarData(year, month);
-    const response = await axios.get(`vacation/${year}/${month}`);
+  }
-    const holidayEvents = response.data.map((holiday) => ({
-    title: holiday.name,
-    start: holiday.date, // "YYYY-MM-DD" 형식
-    backgroundColor: "#ff6666",
-    classNames: ["holiday-event"],
-    }));
-    return holidayEvents;
-} catch (error) {
-    console.error("공휴일 정보를 불러오지 못했습니다.", error);
-    return [];
-}
-}
 
-/**
+  async function loadCalendarData(year, month) {
- * 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
+    if (lastRemainingYear.value !== year) {
- */
+      await fetchRemainingVacation();
-function handleMonthChange(viewInfo) {
+      lastRemainingYear.value = year;
-const currentDate = viewInfo.view.currentStart;
+    }
-const year = currentDate.getFullYear();
+    fetchedEvents.value = [];
-const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+    const [vacationEvents, holidayEvents] = await Promise.all([
-loadCalendarData(year, month);
+      fetchVacationData(year, month),
-}
+      fetchHolidays(year, month),
+    ]);
+    holidayDates.value = new Set(holidayEvents.map((event) => event.start));
+    fetchedEvents.value = [...vacationEvents, ...holidayEvents];
+    updateCalendarEvents();
+    await nextTick();
+    fullCalendarRef.value.getApi().refetchEvents();
+  }
 
-/**
+  onMounted(async () => {
- * 지정한 월의 데이터를 로드 (휴가, 공휴일 데이터를 병렬 요청)
+    await fetchUserList();
- */
+    await fetchVacationCodes();
-async function loadCalendarData(year, month) {
+    const today = new Date();
-fetchedEvents.value = [];
+    const year = today.getFullYear();
-const [vacationEvents, holidayEvents] = await Promise.all([
+    const month = String(today.getMonth() + 1).padStart(2, "0");
-    fetchVacationData(year, month),
+    await loadCalendarData(year, month);
-    fetchHolidays(year, month),
+  });
-]);
+  </script>
-// 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
-holidayDates.value = new Set(holidayEvents.map((event) => event.start));
-fetchedEvents.value = [...vacationEvents, ...holidayEvents];
-updateCalendarEvents();
-await nextTick();
-fullCalendarRef.value.getApi().refetchEvents();
-}
 
-// 컴포넌트 마운트 시 현재 달의 데이터 로드
+  <style>
-onMounted(async () => {
+  /* 스타일 정의 */
-await fetchUserList(); // 사용자 목록 먼저 불러오기
+  </style>
-await fetchVacationCodes();
-const today = new Date();
-const year = today.getFullYear();
-const month = String(today.getMonth() + 1).padStart(2, "0");
-await loadCalendarData(year, month);
-});
-</script>
-
-<style>
-
-</style>