From 673c202c5b3ae8ca3f975d4271793cab8cc1c154 Mon Sep 17 00:00:00 2001
From: gomminjae <gommj0611@naver.com>
Date: Thu, 21 Nov 2024 21:21:33 +0900
Subject: [PATCH] Feat: notice

---
 package-lock.json                     | 377 ++++++++++++++++++++++++++
 package.json                          |   1 +
 src/Component/Notice/MainInfo.vue     | 135 ++++-----
 src/Component/Notice/NoticeList.vue   | 124 +++------
 src/router/index.js                   |   6 +
 src/stores/notice.js                  |  85 ++++--
 src/views/notice/NoticeDetailView.vue |  61 +++++
 7 files changed, 605 insertions(+), 184 deletions(-)
 create mode 100644 src/views/notice/NoticeDetailView.vue

diff --git a/package-lock.json b/package-lock.json
index 44cb21c..3b6f52e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "newjeaps",
       "version": "0.0.0",
       "dependencies": {
+        "@rollup/rollup-darwin-arm64": "^4.27.3",
         "aos": "^2.3.4",
         "axios": "^1.7.7",
         "dotenv": "^16.4.5",
@@ -1071,6 +1072,242 @@
         }
       }
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.25.0.tgz",
+      "integrity": "sha512-CC/ZqFZwlAIbU1wUPisHyV/XRc5RydFrNLtgl3dGYskdwPZdt4HERtKm50a/+DtTlKeCq9IXFEWR+P6blwjqBA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.25.0.tgz",
+      "integrity": "sha512-/Y76tmLGUJqVBXXCfVS8Q8FJqYGhgH4wl4qTA24E9v/IJM0XvJCGQVSW1QZ4J+VURO9h8YCa28sTFacZXwK7Rg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.27.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.27.3.tgz",
+      "integrity": "sha512-OuRysZ1Mt7wpWJ+aYKblVbJWtVn3Cy52h8nLuNSzTqSesYw1EuN6wKp5NW/4eSre3mp12gqFRXOKTcN3AI3LqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.25.0.tgz",
+      "integrity": "sha512-ZRL+gexs3+ZmmWmGKEU43Bdn67kWnMeWXLFhcVv5Un8FQcx38yulHBA7XR2+KQdYIOtD0yZDWBCudmfj6lQJoA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.25.0.tgz",
+      "integrity": "sha512-xpEIXhiP27EAylEpreCozozsxWQ2TJbOLSivGfXhU4G1TBVEYtUPi2pOZBnvGXHyOdLAUUhPnJzH3ah5cqF01g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.25.0.tgz",
+      "integrity": "sha512-sC5FsmZGlJv5dOcURrsnIK7ngc3Kirnx3as2XU9uER+zjfyqIjdcMVgzy4cOawhsssqzoAX19qmxgJ8a14Qrqw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.25.0.tgz",
+      "integrity": "sha512-uD/dbLSs1BEPzg564TpRAQ/YvTnCds2XxyOndAO8nJhaQcqQGFgv/DAVko/ZHap3boCvxnzYMa3mTkV/B/3SWA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.25.0.tgz",
+      "integrity": "sha512-ZVt/XkrDlQWegDWrwyC3l0OfAF7yeJUF4fq5RMS07YM72BlSfn2fQQ6lPyBNjt+YbczMguPiJoCfaQC2dnflpQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.25.0.tgz",
+      "integrity": "sha512-qboZ+T0gHAW2kkSDPHxu7quaFaaBlynODXpBVnPxUgvWYaE84xgCKAPEYE+fSMd3Zv5PyFZR+L0tCdYCMAtG0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.25.0.tgz",
+      "integrity": "sha512-ndWTSEmAaKr88dBuogGH2NZaxe7u2rDoArsejNslugHZ+r44NfWiwjzizVS1nUOHo+n1Z6qV3X60rqE/HlISgw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.25.0.tgz",
+      "integrity": "sha512-BVSQvVa2v5hKwJSy6X7W1fjDex6yZnNKy3Kx1JGimccHft6HV0THTwNtC2zawtNXKUu+S5CjXslilYdKBAadzA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.25.0.tgz",
+      "integrity": "sha512-G4hTREQrIdeV0PE2JruzI+vXdRnaK1pg64hemHq2v5fhv8C7WjVaeXc9P5i4Q5UC06d/L+zA0mszYIKl+wY8oA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.25.0.tgz",
+      "integrity": "sha512-9T/w0kQ+upxdkFL9zPVB6zy9vWW1deA3g8IauJxojN4bnz5FwSsUAD034KpXIVX5j5p/rn6XqumBMxfRkcHapQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.25.0.tgz",
+      "integrity": "sha512-ThcnU0EcMDn+J4B9LD++OgBYxZusuA7iemIIiz5yzEcFg04VZFzdFjuwPdlURmYPZw+fgVrFzj4CA64jSTG4Ig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.25.0.tgz",
+      "integrity": "sha512-zx71aY2oQxGxAT1JShfhNG79PnjYhMC6voAjzpu/xmMjDnKNf6Nl/xv7YaB/9SIa9jDYf8RBPWEnjcdlhlv1rQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.25.0.tgz",
+      "integrity": "sha512-JT8tcjNocMs4CylWY/CxVLnv8e1lE7ff1fi6kbGocWwxDq9pj30IJ28Peb+Y8yiPNSF28oad42ApJB8oUkwGww==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.25.0.tgz",
+      "integrity": "sha512-dRLjLsO3dNOfSN6tjyVlG+Msm4IiZnGkuZ7G5NmpzwF9oOc582FZG05+UdfTbz5Jd4buK/wMb6UeHFhG18+OEg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
       "version": "4.25.0",
       "cpu": [
@@ -3566,6 +3803,20 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.25.0.tgz",
+      "integrity": "sha512-YVT6L3UrKTlC0FpCZd0MGA7NVdp7YNaEqkENbWQ7AOVOqd/7VzyHpgIpc1mIaxRAo1ZsJRH45fq8j4N63I/vvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
     "node_modules/run-applescript": {
       "version": "7.0.0",
       "dev": true,
@@ -5441,6 +5692,123 @@
         "picomatch": "^4.0.2"
       }
     },
+    "@rollup/rollup-android-arm-eabi": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.25.0.tgz",
+      "integrity": "sha512-CC/ZqFZwlAIbU1wUPisHyV/XRc5RydFrNLtgl3dGYskdwPZdt4HERtKm50a/+DtTlKeCq9IXFEWR+P6blwjqBA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-android-arm64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.25.0.tgz",
+      "integrity": "sha512-/Y76tmLGUJqVBXXCfVS8Q8FJqYGhgH4wl4qTA24E9v/IJM0XvJCGQVSW1QZ4J+VURO9h8YCa28sTFacZXwK7Rg==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-darwin-arm64": {
+      "version": "4.27.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.27.3.tgz",
+      "integrity": "sha512-OuRysZ1Mt7wpWJ+aYKblVbJWtVn3Cy52h8nLuNSzTqSesYw1EuN6wKp5NW/4eSre3mp12gqFRXOKTcN3AI3LqA=="
+    },
+    "@rollup/rollup-darwin-x64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.25.0.tgz",
+      "integrity": "sha512-ZRL+gexs3+ZmmWmGKEU43Bdn67kWnMeWXLFhcVv5Un8FQcx38yulHBA7XR2+KQdYIOtD0yZDWBCudmfj6lQJoA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-freebsd-arm64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.25.0.tgz",
+      "integrity": "sha512-xpEIXhiP27EAylEpreCozozsxWQ2TJbOLSivGfXhU4G1TBVEYtUPi2pOZBnvGXHyOdLAUUhPnJzH3ah5cqF01g==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-freebsd-x64": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.25.0.tgz",
+      "integrity": "sha512-sC5FsmZGlJv5dOcURrsnIK7ngc3Kirnx3as2XU9uER+zjfyqIjdcMVgzy4cOawhsssqzoAX19qmxgJ8a14Qrqw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.25.0.tgz",
+      "integrity": "sha512-uD/dbLSs1BEPzg564TpRAQ/YvTnCds2XxyOndAO8nJhaQcqQGFgv/DAVko/ZHap3boCvxnzYMa3mTkV/B/3SWA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.25.0.tgz",
+      "integrity": "sha512-ZVt/XkrDlQWegDWrwyC3l0OfAF7yeJUF4fq5RMS07YM72BlSfn2fQQ6lPyBNjt+YbczMguPiJoCfaQC2dnflpQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.25.0.tgz",
+      "integrity": "sha512-qboZ+T0gHAW2kkSDPHxu7quaFaaBlynODXpBVnPxUgvWYaE84xgCKAPEYE+fSMd3Zv5PyFZR+L0tCdYCMAtG0A==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm64-musl": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.25.0.tgz",
+      "integrity": "sha512-ndWTSEmAaKr88dBuogGH2NZaxe7u2rDoArsejNslugHZ+r44NfWiwjzizVS1nUOHo+n1Z6qV3X60rqE/HlISgw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.25.0.tgz",
+      "integrity": "sha512-BVSQvVa2v5hKwJSy6X7W1fjDex6yZnNKy3Kx1JGimccHft6HV0THTwNtC2zawtNXKUu+S5CjXslilYdKBAadzA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.25.0.tgz",
+      "integrity": "sha512-G4hTREQrIdeV0PE2JruzI+vXdRnaK1pg64hemHq2v5fhv8C7WjVaeXc9P5i4Q5UC06d/L+zA0mszYIKl+wY8oA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.25.0.tgz",
+      "integrity": "sha512-9T/w0kQ+upxdkFL9zPVB6zy9vWW1deA3g8IauJxojN4bnz5FwSsUAD034KpXIVX5j5p/rn6XqumBMxfRkcHapQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-x64-gnu": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.25.0.tgz",
+      "integrity": "sha512-ThcnU0EcMDn+J4B9LD++OgBYxZusuA7iemIIiz5yzEcFg04VZFzdFjuwPdlURmYPZw+fgVrFzj4CA64jSTG4Ig==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-x64-musl": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.25.0.tgz",
+      "integrity": "sha512-zx71aY2oQxGxAT1JShfhNG79PnjYhMC6voAjzpu/xmMjDnKNf6Nl/xv7YaB/9SIa9jDYf8RBPWEnjcdlhlv1rQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.25.0.tgz",
+      "integrity": "sha512-JT8tcjNocMs4CylWY/CxVLnv8e1lE7ff1fi6kbGocWwxDq9pj30IJ28Peb+Y8yiPNSF28oad42ApJB8oUkwGww==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.25.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.25.0.tgz",
+      "integrity": "sha512-dRLjLsO3dNOfSN6tjyVlG+Msm4IiZnGkuZ7G5NmpzwF9oOc582FZG05+UdfTbz5Jd4buK/wMb6UeHFhG18+OEg==",
+      "dev": true,
+      "optional": true
+    },
     "@rollup/rollup-win32-x64-msvc": {
       "version": "4.25.0",
       "dev": true,
@@ -6897,6 +7265,15 @@
         "@rollup/rollup-win32-x64-msvc": "4.25.0",
         "@types/estree": "1.0.6",
         "fsevents": "~2.3.2"
+      },
+      "dependencies": {
+        "@rollup/rollup-darwin-arm64": {
+          "version": "4.25.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.25.0.tgz",
+          "integrity": "sha512-YVT6L3UrKTlC0FpCZd0MGA7NVdp7YNaEqkENbWQ7AOVOqd/7VzyHpgIpc1mIaxRAo1ZsJRH45fq8j4N63I/vvg==",
+          "dev": true,
+          "optional": true
+        }
       }
     },
     "run-applescript": {
diff --git a/package.json b/package.json
index db24e3b..53eb1d4 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
+    "@rollup/rollup-darwin-arm64": "^4.27.3",
     "aos": "^2.3.4",
     "axios": "^1.7.7",
     "dotenv": "^16.4.5",
diff --git a/src/Component/Notice/MainInfo.vue b/src/Component/Notice/MainInfo.vue
index badd776..3131791 100644
--- a/src/Component/Notice/MainInfo.vue
+++ b/src/Component/Notice/MainInfo.vue
@@ -1,27 +1,65 @@
+<script setup>
+import { ref } from "vue";
+import { useNoticeStore } from "@/stores/notice";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+// Pinia 스토어 인스턴스 생성
+const noticeStore = useNoticeStore();
+
+// 검색 키워드 상태
+const searchKeyword = ref("");
+
+// 공지사항 데이터 초기 로드
+noticeStore.fetchNotices();
+
+// 검색 실행
+const searchNotices = () => {
+  noticeStore.setKeyword(searchKeyword.value);
+};
+
+//디테일 가즈아
+const goToDetail = (noticeId) => {
+  router.push(`/notice/${noticeId}`);
+}
+
+</script>
+
 <template>
   <div class="p-6 bg-gray-100 min-h-screen">
-    <!-- 공지사항 제목 및 더보기 -->
+    <!-- 제목 및 검색 -->
     <div class="flex justify-between items-center mb-6">
       <h2 class="text-xl font-bold text-gray-800">공지사항</h2>
+      <div>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="검색어를 입력하세요"
+          class="border rounded-lg px-4 py-2 mr-2"
+        />
+        <button @click="searchNotices" class="bg-blue-500 text-white px-4 py-2 rounded-lg">
+          검색
+        </button>
+      </div>
     </div>
 
     <!-- 공지사항 리스트 -->
     <ul class="space-y-6">
       <li
-        v-for="notice in paginatedNotices"
-        :key="notice.id"
+        v-for="notice in noticeStore.notices"
+        :key="notice.noticeId"
         class="neumorphic-card p-4 rounded-lg transition-all duration-300 hover:shadow-lg"
+        @click="goToDetail(notice.noticeId)"
       >
         <div>
           <!-- 공지사항 제목 -->
           <p class="text-lg font-bold text-gray-900">{{ notice.title }}</p>
-          <!-- 카테고리 및 날짜 -->
+          <!-- 작성일 및 조회수 -->
           <div class="flex justify-between text-sm text-gray-500 mt-2">
-            <span>{{ notice.category }}</span>
-            <span>{{ notice.date }}</span>
+            <span>작성일: {{ notice.createdAt }}</span>
+            <span>조회수: {{ notice.views }}</span>
           </div>
-          <!-- 공지사항 내용 -->
-          <p class="text-sm text-gray-700 mt-3">{{ notice.description }}</p>
         </div>
       </li>
     </ul>
@@ -29,12 +67,12 @@
     <!-- 페이지네이션 -->
     <div class="flex justify-center mt-8 space-x-4">
       <button
-        v-for="page in totalPages"
+        v-for="page in noticeStore.pagination.totalPages"
         :key="page"
-        @click="currentPage = page"
+        @click="noticeStore.setPage(page)"
         :class="{
-          'neumorphic-button-active': currentPage === page,
-          'neumorphic-button': currentPage !== page,
+          'neumorphic-button-active': noticeStore.pagination.currentPage === page,
+          'neumorphic-button': noticeStore.pagination.currentPage !== page,
         }"
         class="px-4 py-2 rounded-lg text-sm font-bold transition-all duration-300 hover:shadow-lg active:shadow-inner"
       >
@@ -44,77 +82,6 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed } from "vue";
-
-// 공지사항 더미 데이터
-const notices = ref([
-  {
-    id: 1,
-    title: "서비스 점검 안내",
-    category: "시스템 점검",
-    date: "2024-11-21",
-    description: "11월 23일 오전 2시부터 6시까지 시스템 점검이 예정되어 있습니다.",
-  },
-  {
-    id: 2,
-    title: "신규 기능 업데이트",
-    category: "공지",
-    date: "2024-11-20",
-    description: "새로운 대시보드 기능이 추가되었습니다. 많은 이용 부탁드립니다.",
-  },
-  {
-    id: 3,
-    title: "이용약관 변경 안내",
-    category: "법적 안내",
-    date: "2024-11-15",
-    description: "12월 1일부터 적용되는 새로운 이용약관을 확인해주세요.",
-  },
-  {
-    id: 4,
-    title: "회원 가입 이벤트",
-    category: "이벤트",
-    date: "2024-11-10",
-    description: "회원 가입 이벤트가 진행 중입니다. 지금 가입하고 특별한 혜택을 받아보세요!",
-  },
-  {
-    id: 5,
-    title: "긴급 공지: 서비스 장애 복구",
-    category: "긴급 공지",
-    date: "2024-11-05",
-    description: "서버 장애로 인해 불편을 끼쳐드려 죄송합니다. 현재 복구 작업이 완료되었습니다.",
-  },
-  {
-    id: 6,
-    title: "신규 서버 배포",
-    category: "시스템 점검",
-    date: "2024-11-03",
-    description: "신규 서버가 성공적으로 배포되었습니다. 성능이 향상되었습니다.",
-  },
-  {
-    id: 7,
-    title: "보안 업데이트",
-    category: "보안",
-    date: "2024-10-28",
-    description: "중요 보안 패치가 적용되었습니다. 최신 버전을 확인해주세요.",
-  },
-]);
-
-// 페이지네이션 상태
-const currentPage = ref(1); // 현재 페이지
-const itemsPerPage = ref(3); // 페이지당 항목 수
-
-// 페이지네이션 계산
-const totalPages = computed(() => Math.ceil(notices.value.length / itemsPerPage.value));
-
-// 현재 페이지에 해당하는 공지사항만 필터링
-const paginatedNotices = computed(() => {
-  const start = (currentPage.value - 1) * itemsPerPage.value;
-  const end = start + itemsPerPage.value;
-  return notices.value.slice(start, end);
-});
-</script>
-
 <style scoped>
 /* 뉴모피즘 카드 스타일 */
 .neumorphic-card {
@@ -129,7 +96,7 @@ const paginatedNotices = computed(() => {
   transform: scale(1.02);
 }
 
-/* 뉴모피즘 버튼 스타일 */
+/* 버튼 스타일 */
 .neumorphic-button {
   background: #ffffff;
   border-radius: 12px;
diff --git a/src/Component/Notice/NoticeList.vue b/src/Component/Notice/NoticeList.vue
index 2817797..bccbc02 100644
--- a/src/Component/Notice/NoticeList.vue
+++ b/src/Component/Notice/NoticeList.vue
@@ -1,27 +1,55 @@
+<script setup>
+import { ref } from "vue";
+import { useNoticeStore } from '@/stores/notice';
+
+// Pinia 스토어 가져오기
+const noticeStore = useNoticeStore();
+
+// 검색 상태
+const searchKeyword = ref("");
+
+// 컴포넌트 로드 시 데이터 가져오기
+noticeStore.fetchNotices();
+
+// 검색 실행
+const searchNotices = () => {
+  noticeStore.setKeyword(searchKeyword.value);
+};
+</script>
+
 <template>
   <div class="p-6 bg-gray-100 min-h-screen">
-    <!-- 공지사항 제목 및 더보기 -->
+    <!-- 제목 및 검색 -->
     <div class="flex justify-between items-center mb-6">
       <h2 class="text-xl font-bold text-gray-800">공지사항</h2>
+      <div>
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="검색어를 입력하세요"
+          class="border rounded-lg px-4 py-2 mr-2"
+        />
+        <button @click="searchNotices" class="bg-blue-500 text-white px-4 py-2 rounded-lg">
+          검색
+        </button>
+      </div>
     </div>
 
     <!-- 공지사항 리스트 -->
     <ul class="space-y-6">
       <li
-        v-for="notice in paginatedNotices"
-        :key="notice.id"
+        v-for="notice in noticeStore.notices"
+        :key="notice.noticeId"
         class="neumorphic-card p-4 rounded-lg transition-all duration-300 hover:shadow-lg"
       >
         <div>
           <!-- 공지사항 제목 -->
           <p class="text-lg font-bold text-gray-900">{{ notice.title }}</p>
-          <!-- 카테고리 및 날짜 -->
+          <!-- 작성일 및 조회수 -->
           <div class="flex justify-between text-sm text-gray-500 mt-2">
-            <span>{{ notice.category }}</span>
-            <span>{{ notice.date }}</span>
+            <span>작성일: {{ notice.createdAt }}</span>
+            <span>조회수: {{ notice.views }}</span>
           </div>
-          <!-- 공지사항 내용 -->
-          <p class="text-sm text-gray-700 mt-3">{{ notice.description }}</p>
         </div>
       </li>
     </ul>
@@ -29,12 +57,12 @@
     <!-- 페이지네이션 -->
     <div class="flex justify-center mt-8 space-x-4">
       <button
-        v-for="page in totalPages"
+        v-for="page in noticeStore.pagination.totalPages"
         :key="page"
-        @click="currentPage = page"
+        @click="noticeStore.setPage(page)"
         :class="{
-          'neumorphic-button-active': currentPage === page,
-          'neumorphic-button': currentPage !== page,
+          'neumorphic-button-active': noticeStore.pagination.currentPage === page,
+          'neumorphic-button': noticeStore.pagination.currentPage !== page,
         }"
         class="px-4 py-2 rounded-lg text-sm font-bold transition-all duration-300 hover:shadow-lg active:shadow-inner"
       >
@@ -44,77 +72,6 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed } from "vue";
-
-// 공지사항 더미 데이터
-const notices = ref([
-  {
-    id: 1,
-    title: "싸탈하고싶다.",
-    category: "시스템 점검",
-    date: "2024-11-21",
-    description: "11월 23일 오전 2시부터 6시까지 시스템 점검이 예정되어 있습니다.",
-  },
-  {
-    id: 2,
-    title: "집가고싶다",
-    category: "공지",
-    date: "2024-11-20",
-    description: "새로운 대시보드 기능이 추가되었습니다. 많은 이용 부탁드립니다.",
-  },
-  {
-    id: 3,
-    title: "이용약관 변경 안내",
-    category: "법적 안내",
-    date: "2024-11-15",
-    description: "12월 1일부터 적용되는 새로운 이용약관을 확인해주세요.",
-  },
-  {
-    id: 4,
-    title: "회원 가입 이벤트",
-    category: "이벤트",
-    date: "2024-11-10",
-    description: "회원 가입 이벤트가 진행 중입니다. 지금 가입하고 특별한 혜택을 받아보세요!",
-  },
-  {
-    id: 5,
-    title: "긴급 공지: 서비스 장애 복구",
-    category: "긴급 공지",
-    date: "2024-11-05",
-    description: "서버 장애로 인해 불편을 끼쳐드려 죄송합니다. 현재 복구 작업이 완료되었습니다.",
-  },
-  {
-    id: 6,
-    title: "신규 서버 배포",
-    category: "시스템 점검",
-    date: "2024-11-03",
-    description: "신규 서버가 성공적으로 배포되었습니다. 성능이 향상되었습니다.",
-  },
-  {
-    id: 7,
-    title: "보안 업데이트",
-    category: "보안",
-    date: "2024-10-28",
-    description: "중요 보안 패치가 적용되었습니다. 최신 버전을 확인해주세요.",
-  },
-]);
-
-// 페이지네이션 상태
-const currentPage = ref(1); // 현재 페이지
-const itemsPerPage = ref(3); // 페이지당 항목 수
-
-// 페이지네이션 계산
-const totalPages = computed(() => Math.ceil(notices.value.length / itemsPerPage.value));
-
-// 현재 페이지에 해당하는 공지사항만 필터링
-const paginatedNotices = computed(() => {
-  const start = (currentPage.value - 1) * itemsPerPage.value;
-  const end = start + itemsPerPage.value;
-  return notices.value.slice(start, end);
-});
-</script>
-
 <style scoped>
 /* 뉴모피즘 카드 스타일 */
 .neumorphic-card {
@@ -129,7 +86,6 @@ const paginatedNotices = computed(() => {
   transform: scale(1.02);
 }
 
-/* 뉴모피즘 버튼 스타일 */
 .neumorphic-button {
   background: #ffffff;
   border-radius: 12px;
diff --git a/src/router/index.js b/src/router/index.js
index 557332b..fb44ad8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import LoginView from '../views/LoginView.vue'
 import MapView from '../views/MapView.vue'
 import NoticeView from '../views/NoticeView.vue'
 import IntroductionView from '@/views/IntroductionView.vue'
+import NoticeDetailView from '@/views/notice/NoticeDetailView.vue'
 
 const routes = [
   {
@@ -31,6 +32,11 @@ const routes = [
         name: 'notice',
         component: NoticeView,
       },
+      {
+        path: 'notice/:id',
+        name: 'noticeDetail',
+        component: NoticeDetailView,
+      },
       {
         path: 'introduction',
         name: 'introduction',
diff --git a/src/stores/notice.js b/src/stores/notice.js
index 1715924..1dfa019 100644
--- a/src/stores/notice.js
+++ b/src/stores/notice.js
@@ -1,26 +1,79 @@
+
 import { defineStore } from "pinia";
+import axios from "axios";
 
 export const useNoticeStore = defineStore("notice", {
   state: () => ({
-    activeTab: "notice", // 기본 활성화 탭
-    mainInfo: [
-      { id: 1, title: "운영 시간 안내", description: "평일 09:00 ~ 18:00" },
-      { id: 2, title: "고객센터 번호", description: "문의 전화: 1899-1234" },
-    ],
-    notices: [
-      { id: 1, category: "공지사항", title: "다방 소식과 함께하는 특별 기획 이벤트", date: "2024.09.23" },
-      { id: 2, category: "공지사항", title: "2024년 추석 연휴 안내", date: "2024.09.13" },
-      { id: 3, category: "공지사항", title: "다방 APP 서비스 업데이트 안내", date: "2024.08.27" },
-    ],
-    faqs: [
-      { id: 1, question: "회원 가입은 어떻게 하나요?", answer: "회원 가입은 로그인 화면에서 가능합니다." },
-      { id: 2, question: "결제 관련 문의는 어디서 하나요?", answer: "결제 관련 문제는 고객센터에서 도와드립니다." },
-    ],
+    notices: [], // 공지사항 목록
+    pagination: {
+      currentPage: 1, // 현재 페이지
+      pageSize: 10, // 페이지당 항목 수
+      totalItems: 0, // 전체 공지사항 수
+      totalPages: 0, // 전체 페이지 수
+    },
+    keyword: "", // 검색 키워드..?
+    activeTab: "mainInfo", // 기본 활성화 탭
+    noticeDetail: null, // 공지사항 상세 데이터
   }),
 
   actions: {
-    setActiveTab(tabId) {
-      this.activeTab = tabId; // 탭 상태 업데이트
+    // 공지사항 목록 가져오기
+    async fetchNotices() {
+      try {
+        console.log("공지사항 데이터 요청 시작");
+        const response = await axios.get("https://back.newjeaps.com/api/service/notice", {
+          params: {
+            currentPage: this.pagination.currentPage,
+            pageSize: this.pagination.pageSize,
+            keyword: this.keyword || null,
+          },
+        });
+        console.log("API 응답:", response.data);
+
+        const responseData = response.data.data;
+        this.notices = responseData.content;
+        console.log("공지사항 데이터:", this.notices);
+
+        this.pagination = {
+          ...this.pagination,
+          totalItems: responseData.pagination.totalItems,
+          totalPages: responseData.pagination.totalPages,
+        };
+        console.log("페이지네이션 상태:", this.pagination);
+      } catch (error) {
+        console.error("공지사항 데이터를 가져오는 중 오류 발생:", error);
+      }
+    },
+
+    // 공지사항 상세 데이터 가져오기
+    async fetchNoticeDetail(noticeId) {
+      try {
+        console.log("공지사항 상세 데이터 요청 시작:", noticeId);
+        const response = await axios.get(`https://back.newjeaps.com/api/service/notice/${noticeId}`);
+        console.log("API 응답 (상세):", response.data);
+        this.noticeDetail = response.data.data; // 상세 공지 데이터 저장
+      } catch (error) {
+        console.error("공지사항 상세 데이터를 가져오는 중 오류 발생:", error);
+      }
+    },
+
+    // 페이지 변경
+    setPage(page) {
+      this.pagination.currentPage = page;
+      this.fetchNotices();
+    },
+
+    // 검색 키워드 설정
+    setKeyword(keyword) {
+      this.keyword = keyword;
+      this.pagination.currentPage = 1;
+      this.fetchNotices();
+    },
+
+    // 활성화된 탭 설정
+    setActiveTab(tab) {
+      console.log("탭 변경:", tab);
+      this.activeTab = tab;
     },
   },
 });
diff --git a/src/views/notice/NoticeDetailView.vue b/src/views/notice/NoticeDetailView.vue
new file mode 100644
index 0000000..7cc3f7f
--- /dev/null
+++ b/src/views/notice/NoticeDetailView.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { useNoticeStore } from "@/stores/notice";
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
+
+// Pinia 스토어 및 현재 라우트 가져오기
+const noticeStore = useNoticeStore();
+const route = useRoute();
+
+// 공지사항 ID 가져오기
+const noticeId = route.params.id;
+
+// 컴포넌트 마운트 시 데이터 로드
+onMounted(() => {
+  noticeStore.fetchNoticeDetail(noticeId);
+});
+</script>
+
+<template>
+  <div class="bg-gray-50 min-h-screen">
+    <!-- 공지사항 제목 -->
+    <div class="bg-white shadow-md rounded-lg p-6 max-w-4xl mx-auto mt-20">
+      <h1 class="text-3xl font-bold text-gray-900 mb-4 border-b-2 border-gray-200 pb-4">
+        {{ noticeStore.noticeDetail?.title }}
+      </h1>
+
+      <!-- 작성일 및 조회수 -->
+      <div class="text-sm text-gray-500 flex justify-between items-center mb-6">
+        <p>작성일: <span class="font-medium">{{ noticeStore.noticeDetail?.createdAt }}</span></p>
+        <p>조회수: <span class="font-medium">{{ noticeStore.noticeDetail?.views }}</span></p>
+      </div>
+
+      <!-- 공지사항 내용 -->
+      <div class="text-gray-800 leading-relaxed">
+        <p>{{ noticeStore.noticeDetail?.content }}</p>
+      </div>
+
+      <!-- 뒤로가기 버튼 -->
+      <div class="mt-8 text-center">
+        <router-link
+          to="/notice"
+          class="bg-[#5995ED] text-white px-6 py-2 rounded-lg shadow-md hover:bg-blue-600 transition duration-300"
+        >
+          목록으로 돌아가기
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.bg-gray-50 {
+  background-color: #f9fafb;
+}
+
+
+.mt-20 {
+  margin-top: 5rem;
+}
+</style>