Merge branch 'fe/feat/141-workspace-browse-api' into 'fe/develop'
Feat: 워크스페이스 api 연결 - S11P21S002-141 See merge request s11-s-project/S11P21S002!59
This commit is contained in:
김태수
commit
33a9c74026
539
frontend/package-lock.json
generated
539
frontend/package-lock.json
generated
@ -54,6 +54,7 @@
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-react-refresh": "^0.4.7",
|
||||
"eslint-plugin-storybook": "^0.8.0",
|
||||
"msw": "^2.4.4",
|
||||
"postcss": "^8.4.41",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.6",
|
||||
@ -2163,6 +2164,43 @@
|
||||
"integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@bundled-es-modules/cookie": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.0.tgz",
|
||||
"integrity": "sha512-Or6YHg/kamKHpxULAdSqhGqnWFneIXu1NKvvfBBzKGwpVsYuFIQ5aBPHDnnoR3ghW1nvSkALd+EF9iMtY7Vjxw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cookie": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@bundled-es-modules/cookie/node_modules/cookie": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
|
||||
"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@bundled-es-modules/statuses": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@bundled-es-modules/statuses/-/statuses-1.0.1.tgz",
|
||||
"integrity": "sha512-yn7BklA5acgcBr+7w064fGV+SGIFySjCKpqjcWgBAIfrAkY+4GQTJJHQMeT3V/sgz23VTEVV8TtOmkvJAhFVfg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"statuses": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@bundled-es-modules/tough-cookie": {
|
||||
"version": "0.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@bundled-es-modules/tough-cookie/-/tough-cookie-0.1.6.tgz",
|
||||
"integrity": "sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/tough-cookie": "^4.0.5",
|
||||
"tough-cookie": "^4.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@chromatic-com/storybook": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-1.7.0.tgz",
|
||||
@ -2791,6 +2829,98 @@
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/@inquirer/confirm": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-3.2.0.tgz",
|
||||
"integrity": "sha512-oOIwPs0Dvq5220Z8lGL/6LHRTEr9TgLHmiI99Rj1PJ1p1czTys+olrgBqZk4E2qC0YTzeHprxSQmoHioVdJ7Lw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@inquirer/core": "^9.1.0",
|
||||
"@inquirer/type": "^1.5.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@inquirer/core": {
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@inquirer/core/-/core-9.1.0.tgz",
|
||||
"integrity": "sha512-RZVfH//2ytTjmaBIzeKT1zefcQZzuruwkpTwwbe/i2jTl4o9M+iML5ChULzz6iw1Ok8iUBBsRCjY2IEbD8Ft4w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@inquirer/figures": "^1.0.5",
|
||||
"@inquirer/type": "^1.5.3",
|
||||
"@types/mute-stream": "^0.0.4",
|
||||
"@types/node": "^22.5.2",
|
||||
"@types/wrap-ansi": "^3.0.0",
|
||||
"ansi-escapes": "^4.3.2",
|
||||
"cli-spinners": "^2.9.2",
|
||||
"cli-width": "^4.1.0",
|
||||
"mute-stream": "^1.0.0",
|
||||
"signal-exit": "^4.1.0",
|
||||
"strip-ansi": "^6.0.1",
|
||||
"wrap-ansi": "^6.2.0",
|
||||
"yoctocolors-cjs": "^2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@inquirer/core/node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@inquirer/core/node_modules/string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@inquirer/core/node_modules/wrap-ansi": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
|
||||
"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@inquirer/figures": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.5.tgz",
|
||||
"integrity": "sha512-79hP/VWdZ2UVc9bFGJnoQ/lQMpL74mGgzSYX1xUqCVk7/v73vJCMw1VuyWN1jGkZ9B3z7THAbySqGbCNefcjfA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@inquirer/type": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@inquirer/type/-/type-1.5.3.tgz",
|
||||
"integrity": "sha512-xUQ14WQGR/HK5ei+2CvgcwoH9fQ4PgPGmVFSN0pc1+fVyDL3MREhyAY7nxEErSu6CkllBM3D7e3e+kOvtu+eIg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"mute-stream": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@isaacs/cliui": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
|
||||
@ -2945,6 +3075,23 @@
|
||||
"react": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/@mswjs/interceptors": {
|
||||
"version": "0.35.0",
|
||||
"resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.35.0.tgz",
|
||||
"integrity": "sha512-f5cHyIvm4m4g1I5x9EH1etGx0puaU0OaX2szqGRVBVgUC6aMASlOI5hbpe7tJ9l4/VWjCUu5OMraCazLZGI24A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@open-draft/deferred-promise": "^2.2.0",
|
||||
"@open-draft/logger": "^0.3.0",
|
||||
"@open-draft/until": "^2.0.0",
|
||||
"is-node-process": "^1.2.0",
|
||||
"outvariant": "^1.4.3",
|
||||
"strict-event-emitter": "^0.5.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@ -2980,6 +3127,28 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@open-draft/deferred-promise": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz",
|
||||
"integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@open-draft/logger": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@open-draft/logger/-/logger-0.3.0.tgz",
|
||||
"integrity": "sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-node-process": "^1.2.0",
|
||||
"outvariant": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@open-draft/until": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz",
|
||||
"integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@pkgjs/parseargs": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
|
||||
@ -5460,6 +5629,12 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/cookie": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/cross-spawn": {
|
||||
"version": "6.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/cross-spawn/-/cross-spawn-6.0.6.tgz",
|
||||
@ -5579,12 +5754,20 @@
|
||||
"integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.0.tgz",
|
||||
"integrity": "sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==",
|
||||
"node_modules/@types/mute-stream": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/mute-stream/-/mute-stream-0.0.4.tgz",
|
||||
"integrity": "sha512-CPM9nzrCPPJHQNA9keH9CVkVI+WR5kMa+7XEs5jcGQ0VoAGnLv242w8lIVgwAEfmE4oufJRaTc9PNLQl0ioAow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
|
||||
"integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.19.2"
|
||||
}
|
||||
@ -5669,6 +5852,18 @@
|
||||
"@types/send": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/statuses": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/statuses/-/statuses-2.0.5.tgz",
|
||||
"integrity": "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/tough-cookie": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
|
||||
"integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/unist": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
|
||||
@ -5681,6 +5876,12 @@
|
||||
"integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/wrap-ansi": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
|
||||
"integrity": "sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "7.18.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
|
||||
@ -6069,6 +6270,33 @@
|
||||
"url": "https://github.com/sponsors/epoberezkin"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-escapes": {
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
|
||||
"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"type-fest": "^0.21.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-escapes/node_modules/type-fest": {
|
||||
"version": "0.21.3",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
|
||||
"integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
|
||||
@ -6754,6 +6982,66 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/cli-width": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
|
||||
"integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 12"
|
||||
}
|
||||
},
|
||||
"node_modules/cliui": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
|
||||
"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"string-width": "^4.2.0",
|
||||
"strip-ansi": "^6.0.1",
|
||||
"wrap-ansi": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/cliui/node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/cliui/node_modules/string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/cliui/node_modules/wrap-ansi": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/clone": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
|
||||
@ -8235,6 +8523,15 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/get-caller-file": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
|
||||
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "6.* || 8.* || >= 10.*"
|
||||
}
|
||||
},
|
||||
"node_modules/get-func-name": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
|
||||
@ -8457,6 +8754,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/graphql": {
|
||||
"version": "16.9.0",
|
||||
"resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz",
|
||||
"integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
@ -8569,6 +8875,12 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/headers-polyfill": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz",
|
||||
"integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/html-tags": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
|
||||
@ -8850,6 +9162,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-node-process": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-node-process/-/is-node-process-1.2.0.tgz",
|
||||
"integrity": "sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/is-number": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
@ -9546,6 +9864,76 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/msw": {
|
||||
"version": "2.4.4",
|
||||
"resolved": "https://registry.npmjs.org/msw/-/msw-2.4.4.tgz",
|
||||
"integrity": "sha512-iuM0qGs4YmgYCLH+xqb07w2e/e4fYmsx3+WHVlIOUA34TW1sw+wRpNmOlXnLDkw/T7233Jnm6t+aNf4v2E3e2Q==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@bundled-es-modules/cookie": "^2.0.0",
|
||||
"@bundled-es-modules/statuses": "^1.0.1",
|
||||
"@bundled-es-modules/tough-cookie": "^0.1.6",
|
||||
"@inquirer/confirm": "^3.0.0",
|
||||
"@mswjs/interceptors": "^0.35.0",
|
||||
"@open-draft/until": "^2.1.0",
|
||||
"@types/cookie": "^0.6.0",
|
||||
"@types/statuses": "^2.0.4",
|
||||
"chalk": "^4.1.2",
|
||||
"graphql": "^16.8.1",
|
||||
"headers-polyfill": "^4.0.2",
|
||||
"is-node-process": "^1.2.0",
|
||||
"outvariant": "^1.4.2",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"strict-event-emitter": "^0.5.1",
|
||||
"type-fest": "^4.9.0",
|
||||
"yargs": "^17.7.2"
|
||||
},
|
||||
"bin": {
|
||||
"msw": "cli/index.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mswjs"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": ">= 4.8.x"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/msw/node_modules/path-to-regexp": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
|
||||
"integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/msw/node_modules/type-fest": {
|
||||
"version": "4.26.1",
|
||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
|
||||
"integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/mute-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mz": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
|
||||
@ -9844,6 +10232,12 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/outvariant": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz",
|
||||
"integrity": "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/p-limit": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
|
||||
@ -10491,6 +10885,12 @@
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/psl": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
|
||||
"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
@ -10516,6 +10916,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/querystringify": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
|
||||
"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
@ -11048,6 +11454,15 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/requireindex": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
|
||||
@ -11057,6 +11472,12 @@
|
||||
"node": ">=0.10.5"
|
||||
}
|
||||
},
|
||||
"node_modules/requires-port": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.8",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
|
||||
@ -11714,6 +12135,12 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/strict-event-emitter": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz",
|
||||
"integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
|
||||
@ -12193,6 +12620,30 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/tough-cookie": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
|
||||
"integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"psl": "^1.1.33",
|
||||
"punycode": "^2.1.1",
|
||||
"universalify": "^0.2.0",
|
||||
"url-parse": "^1.5.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/tough-cookie/node_modules/universalify": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
|
||||
"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ts-api-utils": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
|
||||
@ -12540,6 +12991,16 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/url-parse": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
|
||||
"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"querystringify": "^2.1.1",
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-callback-ref": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
|
||||
@ -13073,6 +13534,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/y18n": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/yallist": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||
@ -13091,6 +13561,53 @@
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs": {
|
||||
"version": "17.7.2",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
|
||||
"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cliui": "^8.0.1",
|
||||
"escalade": "^3.1.1",
|
||||
"get-caller-file": "^2.0.5",
|
||||
"require-directory": "^2.1.1",
|
||||
"string-width": "^4.2.3",
|
||||
"y18n": "^5.0.5",
|
||||
"yargs-parser": "^21.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs-parser": {
|
||||
"version": "21.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
|
||||
"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs/node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/yargs/node_modules/string-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/yocto-queue": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
|
||||
@ -13104,6 +13621,18 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/yoctocolors-cjs": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz",
|
||||
"integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/zod": {
|
||||
"version": "3.23.8",
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:no-mock": "VITE_MOCKING_ENABLED=false vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview",
|
||||
@ -60,6 +61,7 @@
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-react-refresh": "^0.4.7",
|
||||
"eslint-plugin-storybook": "^0.8.0",
|
||||
"msw": "^2.4.4",
|
||||
"postcss": "^8.4.41",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.6",
|
||||
@ -70,5 +72,10 @@
|
||||
"vite-plugin-svgr": "^4.2.0",
|
||||
"vite-tsconfig-paths": "^5.0.1",
|
||||
"vitest": "^2.0.5"
|
||||
},
|
||||
"msw": {
|
||||
"workerDirectory": [
|
||||
"public"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
284
frontend/public/mockServiceWorker.js
Normal file
284
frontend/public/mockServiceWorker.js
Normal file
@ -0,0 +1,284 @@
|
||||
/* eslint-disable */
|
||||
/* tslint:disable */
|
||||
|
||||
/**
|
||||
* Mock Service Worker.
|
||||
* @see https://github.com/mswjs/msw
|
||||
* - Please do NOT modify this file.
|
||||
* - Please do NOT serve this file on production.
|
||||
*/
|
||||
|
||||
const PACKAGE_VERSION = '2.4.4'
|
||||
const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
|
||||
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
|
||||
const activeClientIds = new Set()
|
||||
|
||||
self.addEventListener('install', function () {
|
||||
self.skipWaiting()
|
||||
})
|
||||
|
||||
self.addEventListener('activate', function (event) {
|
||||
event.waitUntil(self.clients.claim())
|
||||
})
|
||||
|
||||
self.addEventListener('message', async function (event) {
|
||||
const clientId = event.source.id
|
||||
|
||||
if (!clientId || !self.clients) {
|
||||
return
|
||||
}
|
||||
|
||||
const client = await self.clients.get(clientId)
|
||||
|
||||
if (!client) {
|
||||
return
|
||||
}
|
||||
|
||||
const allClients = await self.clients.matchAll({
|
||||
type: 'window',
|
||||
})
|
||||
|
||||
switch (event.data) {
|
||||
case 'KEEPALIVE_REQUEST': {
|
||||
sendToClient(client, {
|
||||
type: 'KEEPALIVE_RESPONSE',
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'INTEGRITY_CHECK_REQUEST': {
|
||||
sendToClient(client, {
|
||||
type: 'INTEGRITY_CHECK_RESPONSE',
|
||||
payload: {
|
||||
packageVersion: PACKAGE_VERSION,
|
||||
checksum: INTEGRITY_CHECKSUM,
|
||||
},
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'MOCK_ACTIVATE': {
|
||||
activeClientIds.add(clientId)
|
||||
|
||||
sendToClient(client, {
|
||||
type: 'MOCKING_ENABLED',
|
||||
payload: true,
|
||||
})
|
||||
break
|
||||
}
|
||||
|
||||
case 'MOCK_DEACTIVATE': {
|
||||
activeClientIds.delete(clientId)
|
||||
break
|
||||
}
|
||||
|
||||
case 'CLIENT_CLOSED': {
|
||||
activeClientIds.delete(clientId)
|
||||
|
||||
const remainingClients = allClients.filter((client) => {
|
||||
return client.id !== clientId
|
||||
})
|
||||
|
||||
// Unregister itself when there are no more clients
|
||||
if (remainingClients.length === 0) {
|
||||
self.registration.unregister()
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
self.addEventListener('fetch', function (event) {
|
||||
const { request } = event
|
||||
|
||||
// Bypass navigation requests.
|
||||
if (request.mode === 'navigate') {
|
||||
return
|
||||
}
|
||||
|
||||
// Opening the DevTools triggers the "only-if-cached" request
|
||||
// that cannot be handled by the worker. Bypass such requests.
|
||||
if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
|
||||
return
|
||||
}
|
||||
|
||||
// Bypass all requests when there are no active clients.
|
||||
// Prevents the self-unregistered worked from handling requests
|
||||
// after it's been deleted (still remains active until the next reload).
|
||||
if (activeClientIds.size === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// Generate unique request ID.
|
||||
const requestId = crypto.randomUUID()
|
||||
event.respondWith(handleRequest(event, requestId))
|
||||
})
|
||||
|
||||
async function handleRequest(event, requestId) {
|
||||
const client = await resolveMainClient(event)
|
||||
const response = await getResponse(event, client, requestId)
|
||||
|
||||
// Send back the response clone for the "response:*" life-cycle events.
|
||||
// Ensure MSW is active and ready to handle the message, otherwise
|
||||
// this message will pend indefinitely.
|
||||
if (client && activeClientIds.has(client.id)) {
|
||||
;(async function () {
|
||||
const responseClone = response.clone()
|
||||
|
||||
sendToClient(
|
||||
client,
|
||||
{
|
||||
type: 'RESPONSE',
|
||||
payload: {
|
||||
requestId,
|
||||
isMockedResponse: IS_MOCKED_RESPONSE in response,
|
||||
type: responseClone.type,
|
||||
status: responseClone.status,
|
||||
statusText: responseClone.statusText,
|
||||
body: responseClone.body,
|
||||
headers: Object.fromEntries(responseClone.headers.entries()),
|
||||
},
|
||||
},
|
||||
[responseClone.body],
|
||||
)
|
||||
})()
|
||||
}
|
||||
|
||||
return response
|
||||
}
|
||||
|
||||
// Resolve the main client for the given event.
|
||||
// Client that issues a request doesn't necessarily equal the client
|
||||
// that registered the worker. It's with the latter the worker should
|
||||
// communicate with during the response resolving phase.
|
||||
async function resolveMainClient(event) {
|
||||
const client = await self.clients.get(event.clientId)
|
||||
|
||||
if (client?.frameType === 'top-level') {
|
||||
return client
|
||||
}
|
||||
|
||||
const allClients = await self.clients.matchAll({
|
||||
type: 'window',
|
||||
})
|
||||
|
||||
return allClients
|
||||
.filter((client) => {
|
||||
// Get only those clients that are currently visible.
|
||||
return client.visibilityState === 'visible'
|
||||
})
|
||||
.find((client) => {
|
||||
// Find the client ID that's recorded in the
|
||||
// set of clients that have registered the worker.
|
||||
return activeClientIds.has(client.id)
|
||||
})
|
||||
}
|
||||
|
||||
async function getResponse(event, client, requestId) {
|
||||
const { request } = event
|
||||
|
||||
// Clone the request because it might've been already used
|
||||
// (i.e. its body has been read and sent to the client).
|
||||
const requestClone = request.clone()
|
||||
|
||||
function passthrough() {
|
||||
const headers = Object.fromEntries(requestClone.headers.entries())
|
||||
|
||||
// Remove internal MSW request header so the passthrough request
|
||||
// complies with any potential CORS preflight checks on the server.
|
||||
// Some servers forbid unknown request headers.
|
||||
delete headers['x-msw-intention']
|
||||
|
||||
return fetch(requestClone, { headers })
|
||||
}
|
||||
|
||||
// Bypass mocking when the client is not active.
|
||||
if (!client) {
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
// Bypass initial page load requests (i.e. static assets).
|
||||
// The absence of the immediate/parent client in the map of the active clients
|
||||
// means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
|
||||
// and is not ready to handle requests.
|
||||
if (!activeClientIds.has(client.id)) {
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
// Notify the client that a request has been intercepted.
|
||||
const requestBuffer = await request.arrayBuffer()
|
||||
const clientMessage = await sendToClient(
|
||||
client,
|
||||
{
|
||||
type: 'REQUEST',
|
||||
payload: {
|
||||
id: requestId,
|
||||
url: request.url,
|
||||
mode: request.mode,
|
||||
method: request.method,
|
||||
headers: Object.fromEntries(request.headers.entries()),
|
||||
cache: request.cache,
|
||||
credentials: request.credentials,
|
||||
destination: request.destination,
|
||||
integrity: request.integrity,
|
||||
redirect: request.redirect,
|
||||
referrer: request.referrer,
|
||||
referrerPolicy: request.referrerPolicy,
|
||||
body: requestBuffer,
|
||||
keepalive: request.keepalive,
|
||||
},
|
||||
},
|
||||
[requestBuffer],
|
||||
)
|
||||
|
||||
switch (clientMessage.type) {
|
||||
case 'MOCK_RESPONSE': {
|
||||
return respondWithMock(clientMessage.data)
|
||||
}
|
||||
|
||||
case 'PASSTHROUGH': {
|
||||
return passthrough()
|
||||
}
|
||||
}
|
||||
|
||||
return passthrough()
|
||||
}
|
||||
|
||||
function sendToClient(client, message, transferrables = []) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const channel = new MessageChannel()
|
||||
|
||||
channel.port1.onmessage = (event) => {
|
||||
if (event.data && event.data.error) {
|
||||
return reject(event.data.error)
|
||||
}
|
||||
|
||||
resolve(event.data)
|
||||
}
|
||||
|
||||
client.postMessage(
|
||||
message,
|
||||
[channel.port2].concat(transferrables.filter(Boolean)),
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
async function respondWithMock(response) {
|
||||
// Setting response status code to 0 is a no-op.
|
||||
// However, when responding with a "Response.error()", the produced Response
|
||||
// instance will have status code set to 0. Since it's not possible to create
|
||||
// a Response instance with status code 0, handle that use-case separately.
|
||||
if (response.status === 0) {
|
||||
return Response.error()
|
||||
}
|
||||
|
||||
const mockedResponse = new Response(response.body, response)
|
||||
|
||||
Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
|
||||
value: true,
|
||||
enumerable: true,
|
||||
})
|
||||
|
||||
return mockedResponse
|
||||
}
|
||||
22
frontend/src/api/authApi.ts
Normal file
22
frontend/src/api/authApi.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import api from '@/api/axiosConfig';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
export const reissueTokenApi = () => {
|
||||
return api.post('/api/auth/reissue', null, { withCredentials: true }).then((response) => response.data);
|
||||
};
|
||||
|
||||
export const fetchProfileApi = async () => {
|
||||
try {
|
||||
const response = await api.get('/api/auth/profile', {
|
||||
withCredentials: true,
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('사용자 정보 가져오기 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
102
frontend/src/api/axiosConfig.ts
Normal file
102
frontend/src/api/axiosConfig.ts
Normal file
@ -0,0 +1,102 @@
|
||||
import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
|
||||
import useAuthStore from '@/stores/useAuthStore';
|
||||
|
||||
const baseURL = 'https://j11s002.p.ssafy.io';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL,
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
let isTokenRefreshing = false;
|
||||
|
||||
type FailedRequest = {
|
||||
resolve: (value?: string | undefined) => void;
|
||||
reject: (reason?: unknown) => void;
|
||||
};
|
||||
|
||||
let failedQueue: FailedRequest[] = [];
|
||||
|
||||
const processQueue = (error: Error | null, token: string | undefined = undefined): void => {
|
||||
failedQueue.forEach((prom) => {
|
||||
if (error) {
|
||||
prom.reject(error);
|
||||
} else {
|
||||
prom.resolve(token);
|
||||
}
|
||||
});
|
||||
failedQueue = [];
|
||||
};
|
||||
|
||||
api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
|
||||
const token = localStorage.getItem('accessToken');
|
||||
if (token && config.headers) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
api.interceptors.response.use(
|
||||
(response: AxiosResponse) => response,
|
||||
async (error: AxiosError) => {
|
||||
const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
|
||||
|
||||
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||
if (isTokenRefreshing) {
|
||||
return new Promise<string | undefined>((resolve, reject) => {
|
||||
failedQueue.push({ resolve, reject });
|
||||
})
|
||||
.then((token) => {
|
||||
if (token && originalRequest.headers) {
|
||||
originalRequest.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return api(originalRequest);
|
||||
})
|
||||
.catch((err) => Promise.reject(err));
|
||||
}
|
||||
|
||||
originalRequest._retry = true;
|
||||
isTokenRefreshing = true;
|
||||
|
||||
return api
|
||||
.post('/api/auth/reissue', null, { withCredentials: true })
|
||||
.then((response) => {
|
||||
const newAccessToken = response.data?.data?.accessToken;
|
||||
if (!newAccessToken) {
|
||||
throw new Error('Invalid token reissue response');
|
||||
}
|
||||
|
||||
useAuthStore.getState().setLoggedIn(true, newAccessToken);
|
||||
localStorage.setItem('accessToken', newAccessToken);
|
||||
processQueue(null, newAccessToken);
|
||||
|
||||
if (originalRequest.headers) {
|
||||
originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
|
||||
}
|
||||
return api(originalRequest);
|
||||
})
|
||||
.catch((reissueError: Error) => {
|
||||
processQueue(reissueError, undefined);
|
||||
console.error('토큰 재발급 실패:', reissueError);
|
||||
useAuthStore.getState().clearAuth();
|
||||
window.location.href = '/';
|
||||
return Promise.reject(reissueError);
|
||||
})
|
||||
.finally(() => {
|
||||
isTokenRefreshing = false;
|
||||
});
|
||||
}
|
||||
|
||||
if (error.response?.status === 400) {
|
||||
alert('잘못된 요청입니다. 다시 시도해 주세요.');
|
||||
} else if (error.response?.status === 403) {
|
||||
alert('권한이 없습니다. 다시 로그인해 주세요.');
|
||||
useAuthStore.getState().clearAuth();
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
153
frontend/src/api/projectApi.ts
Normal file
153
frontend/src/api/projectApi.ts
Normal file
@ -0,0 +1,153 @@
|
||||
import api from '@/api/axiosConfig';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
export const getProjectApi = async (projectId: number, memberId: number) => {
|
||||
try {
|
||||
const response = await api.get(`/api/projects/${projectId}`, {
|
||||
params: {
|
||||
memberId,
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('프로젝트 조회 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const updateProjectApi = async (
|
||||
projectId: number,
|
||||
memberId: number,
|
||||
data: { title: string; projectType: string }
|
||||
) => {
|
||||
try {
|
||||
const response = await api.put(`/api/projects/${projectId}`, data, {
|
||||
params: {
|
||||
memberId,
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('프로젝트 수정 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteProjectApi = async (projectId: number, memberId: number) => {
|
||||
try {
|
||||
const response = await api.delete(`/api/projects/${projectId}`, {
|
||||
params: {
|
||||
memberId,
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('프로젝트 삭제 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const addProjectMemberApi = async (
|
||||
projectId: number,
|
||||
memberId: number,
|
||||
newMemberId: number,
|
||||
privilegeType: string
|
||||
) => {
|
||||
try {
|
||||
const response = await api.post(
|
||||
`/api/projects/${projectId}/members`,
|
||||
{ memberId: newMemberId, privilegeType },
|
||||
{
|
||||
params: {
|
||||
memberId,
|
||||
},
|
||||
}
|
||||
);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('프로젝트 멤버 추가 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const removeProjectMemberApi = async (projectId: number, memberId: number, targetMemberId: number) => {
|
||||
try {
|
||||
const response = await api.delete(`/api/projects/${projectId}/members`, {
|
||||
params: {
|
||||
memberId,
|
||||
},
|
||||
data: { memberId: targetMemberId },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('프로젝트 멤버 제거 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const getAllProjectsApi = async (
|
||||
workspaceId: number,
|
||||
memberId: number,
|
||||
lastProjectId?: number,
|
||||
limit: number = 10
|
||||
) => {
|
||||
try {
|
||||
const response = await api.get(`/api/workspaces/${workspaceId}/projects`, {
|
||||
params: {
|
||||
memberId,
|
||||
lastProjectId,
|
||||
limit,
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('프로젝트 목록 조회 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const createProjectApi = async (
|
||||
workspaceId: number,
|
||||
memberId: number,
|
||||
data: { title: string; projectType: string }
|
||||
) => {
|
||||
try {
|
||||
const response = await api.post(`/api/workspaces/${workspaceId}/projects`, data, {
|
||||
params: {
|
||||
memberId,
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('프로젝트 생성 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
145
frontend/src/api/workspaceApi.ts
Normal file
145
frontend/src/api/workspaceApi.ts
Normal file
@ -0,0 +1,145 @@
|
||||
import api from '@/api/axiosConfig';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
interface Workspace {
|
||||
id: number;
|
||||
memberId: string;
|
||||
title: string;
|
||||
content: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
interface GetAllWorkspacesResponse {
|
||||
status: number;
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
workspaceResponses: Workspace[];
|
||||
};
|
||||
errors: Array<{
|
||||
field: string;
|
||||
code: string;
|
||||
message: string;
|
||||
objectName: string;
|
||||
}>;
|
||||
isSuccess: boolean;
|
||||
}
|
||||
export const getWorkspaceApi = async (workspaceId: number, memberId: number) => {
|
||||
try {
|
||||
const response = await api.get(`/api/workspaces/${workspaceId}`, {
|
||||
params: { memberId },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('API 요청 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const updateWorkspaceApi = async (
|
||||
workspaceId: number,
|
||||
memberId: number,
|
||||
data: { title: string; content: string }
|
||||
) => {
|
||||
try {
|
||||
const response = await api.put(`/api/workspaces/${workspaceId}`, data, {
|
||||
params: { memberId },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('API 요청 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const deleteWorkspaceApi = async (workspaceId: number, memberId: number) => {
|
||||
try {
|
||||
const response = await api.delete(`/api/workspaces/${workspaceId}`, {
|
||||
params: { memberId },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('API 요청 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const getAllWorkspacesApi = async (
|
||||
memberId: number,
|
||||
lastWorkspaceId?: number,
|
||||
limit?: number
|
||||
): Promise<GetAllWorkspacesResponse> => {
|
||||
try {
|
||||
const response = await api.get('/api/workspaces', {
|
||||
params: { memberId, lastWorkspaceId, limit },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('API 요청 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const createWorkspaceApi = async (memberId: number, data: { title: string; content: string }) => {
|
||||
try {
|
||||
const response = await api.post('/api/workspaces', data, {
|
||||
params: { memberId },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('API 요청 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const addWorkspaceMemberApi = async (workspaceId: number, memberId: number, newMemberId: number) => {
|
||||
try {
|
||||
const response = await api.post(`/api/workspaces/${workspaceId}/members/${newMemberId}`, null, {
|
||||
params: { memberId },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('API 요청 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const removeWorkspaceMemberApi = async (workspaceId: number, memberId: number, targetMemberId: number) => {
|
||||
try {
|
||||
const response = await api.delete(`/api/workspaces/${workspaceId}/members/${targetMemberId}`, {
|
||||
params: { memberId },
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('API 요청 실패:', error.response?.data?.message || '알 수 없는 오류');
|
||||
} else {
|
||||
console.error('알 수 없는 오류가 발생했습니다.');
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
import '@/index.css';
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import Home from '.';
|
||||
import { useState } from 'react';
|
||||
|
||||
const HomeWrapper = ({ initialLoggedIn }: { initialLoggedIn: boolean }) => {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(initialLoggedIn);
|
||||
|
||||
return (
|
||||
<Home
|
||||
isLoggedIn={isLoggedIn}
|
||||
setIsLoggedIn={setIsLoggedIn}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const meta: Meta<typeof Home> = {
|
||||
title: 'Components/Home',
|
||||
component: Home,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof Home>;
|
||||
|
||||
export const GoogleLogin: Story = {
|
||||
render: () => <HomeWrapper initialLoggedIn={false} />,
|
||||
};
|
||||
|
||||
export const SelectWorkspace: Story = {
|
||||
render: () => <HomeWrapper initialLoggedIn={true} />,
|
||||
};
|
||||
@ -1,39 +1,59 @@
|
||||
import { useState } from 'react';
|
||||
import { useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue, SelectGroup } from '../ui/select';
|
||||
import GoogleLogo from '@/assets/icons/web_neutral_rd_ctn@1x.png';
|
||||
import useAuthStore from '@/stores/useAuthStore';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { fetchProfileApi, reissueTokenApi } from '@/api/authApi';
|
||||
|
||||
interface HomeProps {
|
||||
isLoggedIn?: boolean;
|
||||
setIsLoggedIn?: (loggedIn: boolean) => void;
|
||||
}
|
||||
const DOMAIN = 'https://j11s002.p.ssafy.io';
|
||||
|
||||
export default function Home({ isLoggedIn = false, setIsLoggedIn }: HomeProps) {
|
||||
const [, setSelectedWorkspace] = useState('');
|
||||
const [loggedIn, setLoggedIn] = useState(isLoggedIn);
|
||||
export default function Home() {
|
||||
const navigate = useNavigate();
|
||||
const { isLoggedIn, setLoggedIn, profile, setProfile } = useAuthStore();
|
||||
const hasFetchedProfile = useRef(false);
|
||||
|
||||
const workspaces = [
|
||||
{ id: 1, name: 'Workspace 1' },
|
||||
{ id: 2, name: 'Workspace 2' },
|
||||
{ id: 3, name: 'Workspace 3' },
|
||||
];
|
||||
if (!isLoggedIn && !profile.id && !hasFetchedProfile.current) {
|
||||
const accessToken = localStorage.getItem('accessToken');
|
||||
if (accessToken) {
|
||||
setLoggedIn(true, accessToken);
|
||||
fetchProfileApi()
|
||||
.then((data) => {
|
||||
if (data?.isSuccess && data.data) {
|
||||
setProfile({
|
||||
id: data.data.id,
|
||||
nickname: data.data.nickname,
|
||||
profileImage: data.data.profileImage,
|
||||
});
|
||||
hasFetchedProfile.current = true;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert('프로필을 가져오는 중 오류가 발생했습니다. 다시 시도해주세요.');
|
||||
console.error('프로필 가져오기 실패:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const handleGoogleSignIn = () => {
|
||||
console.log('구글로 계속하기');
|
||||
setLoggedIn(true);
|
||||
if (setIsLoggedIn) {
|
||||
setIsLoggedIn(true);
|
||||
window.location.href = `${DOMAIN}/api/login/oauth2/authorization/google`;
|
||||
};
|
||||
|
||||
const handleStart = () => {
|
||||
navigate('/browse');
|
||||
};
|
||||
|
||||
const handleReissueToken = async () => {
|
||||
try {
|
||||
const response = await reissueTokenApi();
|
||||
console.log('토큰 재발급 성공:', response);
|
||||
alert('토큰 재발급 성공! 새로운 액세스 토큰을 콘솔에서 확인하세요.');
|
||||
} catch (error) {
|
||||
console.error('토큰 재발급 실패:', error);
|
||||
alert('토큰 재발급에 실패했습니다. 다시 시도해 주세요.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleWorkspaceSelect = (value: string) => {
|
||||
const selected = workspaces.find((workspace) => workspace.name === value);
|
||||
if (selected) {
|
||||
navigate(`/browse/${selected.id}`);
|
||||
}
|
||||
setSelectedWorkspace(value);
|
||||
};
|
||||
const isHidden = true;
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center bg-gray-50 p-8">
|
||||
@ -41,7 +61,7 @@ export default function Home({ isLoggedIn = false, setIsLoggedIn }: HomeProps) {
|
||||
<h2 className="mb-4 text-2xl font-bold text-gray-900">서비스 설명</h2>
|
||||
<p className="mb-4 text-base text-gray-700">
|
||||
본 서비스는 인공 지능(AI) 모델의 학습을 지원하기 위해 웹 기반의 자동 라벨링 도구를 개발하는 것을 목표로
|
||||
합니다. 이 도구는 이미지나 텍스트와 같은 비정형 데이터에 레이블을 자동으로 부여하는 기능을 제공합니다.
|
||||
합니다.
|
||||
</p>
|
||||
<p className="mb-4 text-base text-gray-700">
|
||||
기존의 수동적인 방법으로는 대량의 학습 데이터를 처리하는데 시간과 비용이 많이 소모되었습니다. 그러나 본
|
||||
@ -56,7 +76,7 @@ export default function Home({ isLoggedIn = false, setIsLoggedIn }: HomeProps) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!loggedIn ? (
|
||||
{!isLoggedIn ? (
|
||||
<button
|
||||
onClick={handleGoogleSignIn}
|
||||
className="mb-4 transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-300 active:opacity-80"
|
||||
@ -68,23 +88,24 @@ export default function Home({ isLoggedIn = false, setIsLoggedIn }: HomeProps) {
|
||||
/>
|
||||
</button>
|
||||
) : (
|
||||
<Select onValueChange={handleWorkspaceSelect}>
|
||||
<SelectTrigger className="mb-4 w-72">
|
||||
<SelectValue placeholder="워크스페이스를 선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{workspaces.map((workspace) => (
|
||||
<SelectItem
|
||||
key={workspace.id}
|
||||
value={workspace.name}
|
||||
>
|
||||
{workspace.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<>
|
||||
<Button
|
||||
variant="outlinePrimary"
|
||||
size="lg"
|
||||
onClick={handleStart}
|
||||
>
|
||||
시작하기
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlinePrimary"
|
||||
size="lg"
|
||||
onClick={handleReissueToken}
|
||||
className="mt-4"
|
||||
style={{ display: isHidden ? 'none' : 'block' }}
|
||||
>
|
||||
리프레시 토큰 재발급 테스트
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
43
frontend/src/components/OAuthCallback/index.tsx
Normal file
43
frontend/src/components/OAuthCallback/index.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import useAuthStore from '@/stores/useAuthStore';
|
||||
import { fetchProfileApi } from '@/api/authApi';
|
||||
|
||||
export default function OAuthCallback() {
|
||||
const navigate = useNavigate();
|
||||
const setLoggedIn = useAuthStore((state) => state.setLoggedIn);
|
||||
|
||||
useEffect(() => {
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
const accessToken = queryParams.get('accessToken');
|
||||
|
||||
if (accessToken) {
|
||||
setLoggedIn(true, accessToken);
|
||||
localStorage.setItem('accessToken', accessToken);
|
||||
|
||||
fetchProfileApi()
|
||||
.then((data) => {
|
||||
if (data?.isSuccess && data.data) {
|
||||
const profileData = {
|
||||
id: data.data.id,
|
||||
nickname: data.data.nickname,
|
||||
profileImage: data.data.profileImage,
|
||||
};
|
||||
useAuthStore.getState().setProfile(profileData);
|
||||
navigate('/browse');
|
||||
} else {
|
||||
throw new Error('프로필 데이터를 가져올 수 없습니다.');
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert('프로필을 가져오는 중 오류가 발생했습니다. 다시 로그인해주세요.');
|
||||
console.error('프로필 가져오기 실패:', error);
|
||||
navigate('/');
|
||||
});
|
||||
} else {
|
||||
navigate('/');
|
||||
}
|
||||
}, [navigate, setLoggedIn]);
|
||||
|
||||
return <p>처리 중입니다...</p>;
|
||||
}
|
||||
@ -1,25 +1,47 @@
|
||||
import * as React from 'react';
|
||||
import ProjectCreateForm, { ProjectCreateFormValues } from './ProjectCreateForm';
|
||||
import XIcon from '@/assets/icons/x.svg?react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Plus } from 'lucide-react';
|
||||
|
||||
export default function ProjectCreateModal({
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
onSubmit: (data: ProjectCreateFormValues) => void;
|
||||
onSubmit: (data: { title: string; labelType: 'Classification' | 'Detection' | 'Segmentation' }) => void;
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
const handleOpen = () => setIsOpen(true);
|
||||
const handleClose = () => setIsOpen(false);
|
||||
|
||||
return (
|
||||
<div className="flex w-[610px] flex-col gap-10 rounded-3xl border px-10 py-5 shadow-lg">
|
||||
<header className="flex gap-5">
|
||||
<h1 className="small-title w-full">새 프로젝트</h1>
|
||||
<button
|
||||
className="flex h-8 w-8 items-center justify-center"
|
||||
onClick={onClose}
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outlinePrimary"
|
||||
className="mt-4 flex items-center gap-2"
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<XIcon className="stroke-gray-900" />
|
||||
</button>
|
||||
</header>
|
||||
<ProjectCreateForm onSubmit={onSubmit} />
|
||||
</div>
|
||||
<Plus size={16} />
|
||||
<span>프로젝트 추가</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader title="새 프로젝트" />
|
||||
<ProjectCreateForm
|
||||
onSubmit={(data: ProjectCreateFormValues) => {
|
||||
const formattedData = {
|
||||
title: data.projectName,
|
||||
labelType: data.labelType,
|
||||
};
|
||||
onSubmit(formattedData);
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,9 +8,6 @@ export default {
|
||||
|
||||
export const Default = () => (
|
||||
<WorkSpaceCreateModal
|
||||
onClose={() => {
|
||||
console.log('close');
|
||||
}}
|
||||
onSubmit={(data) => {
|
||||
console.log(data);
|
||||
}}
|
||||
|
||||
@ -1,25 +1,44 @@
|
||||
import * as React from 'react';
|
||||
import WorkSpaceCreateForm, { WorkSpaceCreateFormValues } from './WorkSpaceCreateForm';
|
||||
import XIcon from '@/assets/icons/x.svg?react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
|
||||
import { Plus } from 'lucide-react';
|
||||
|
||||
export default function WorkSpaceCreateModal({
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
onSubmit: (data: WorkSpaceCreateFormValues) => void;
|
||||
onSubmit: (data: { title: string; content: string }) => void;
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
const handleOpen = () => setIsOpen(true);
|
||||
const handleClose = () => setIsOpen(false);
|
||||
|
||||
return (
|
||||
<div className="flex w-[610px] flex-col gap-10 rounded-3xl border px-10 py-5 shadow-lg">
|
||||
<header className="flex gap-5">
|
||||
<h1 className="small-title w-full">새 워크스페이스</h1>
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<button
|
||||
className="flex h-8 w-8 items-center justify-center"
|
||||
onClick={onClose}
|
||||
className="flex items-center justify-center p-2"
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<XIcon className="stroke-gray-900" />
|
||||
<Plus size={20} />
|
||||
</button>
|
||||
</header>
|
||||
<WorkSpaceCreateForm onSubmit={onSubmit} />
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader title="새 워크스페이스" />
|
||||
<WorkSpaceCreateForm
|
||||
onSubmit={(data: WorkSpaceCreateFormValues) => {
|
||||
const formattedData = {
|
||||
title: data.workspaceName,
|
||||
content: data.workspaceDescription || '',
|
||||
};
|
||||
onSubmit(formattedData);
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,71 +1,84 @@
|
||||
import { useParams } from 'react-router-dom';
|
||||
import ProjectCard from '@/components/ProjectCard';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Workspace } from '@/types';
|
||||
import { Plus, Smile } from 'lucide-react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
|
||||
import WorkSpaceCreateForm from '../WorkSpaceCreateModal/WorkSpaceCreateForm';
|
||||
import { Smile } from 'lucide-react';
|
||||
import ProjectCreateModal from '../ProjectCreateModal';
|
||||
import { useGetAllProjects, useCreateProject } from '@/hooks/useProjectHooks';
|
||||
import useAuthStore from '@/stores/useAuthStore';
|
||||
import { Key } from 'react';
|
||||
|
||||
export default function WorkspaceBrowseDetail() {
|
||||
const { workspaceId } = useParams<{ workspaceId: string }>();
|
||||
const numericWorkspaceId: number = Number(workspaceId);
|
||||
const workspace: Workspace = !workspaceId
|
||||
? {
|
||||
id: 0,
|
||||
name: '',
|
||||
projects: [],
|
||||
const numericWorkspaceId = Number(workspaceId);
|
||||
const { profile } = useAuthStore();
|
||||
const memberId = profile.id ?? 0;
|
||||
|
||||
const { data: projectsResponse, isLoading, isError, refetch } = useGetAllProjects(numericWorkspaceId || 0, memberId);
|
||||
const createProject = useCreateProject();
|
||||
|
||||
const handleCreateProject = (data: { title: string; labelType: 'Classification' | 'Detection' | 'Segmentation' }) => {
|
||||
createProject.mutate(
|
||||
{
|
||||
workspaceId: numericWorkspaceId,
|
||||
memberId,
|
||||
data: { title: data.title, projectType: data.labelType.toLowerCase() },
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
console.log('프로젝트가 성공적으로 생성되었습니다.');
|
||||
refetch();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('프로젝트 생성 실패:', error);
|
||||
console.log('Error details:', JSON.stringify(error, null, 2));
|
||||
|
||||
const errorMessage = error?.response?.data?.message || error.message || '알 수 없는 오류';
|
||||
console.error('프로젝트 생성 실패:', errorMessage);
|
||||
},
|
||||
}
|
||||
: {
|
||||
id: numericWorkspaceId,
|
||||
name: `workspace-${workspaceId}`,
|
||||
projects: [
|
||||
{ id: 1, name: 'project1', type: 'Detection', children: [] },
|
||||
{ id: 2, name: 'project2', type: 'Detection', children: [] },
|
||||
{ id: 3, name: 'project3', type: 'Detection', children: [] },
|
||||
{ id: 4, name: 'project4', type: 'Detection', children: [] },
|
||||
{ id: 5, name: 'project5', type: 'Detection', children: [] },
|
||||
],
|
||||
};
|
||||
);
|
||||
};
|
||||
|
||||
const projects = Array.isArray(projectsResponse?.data?.workspaceResponses)
|
||||
? projectsResponse.data.workspaceResponses
|
||||
: [];
|
||||
|
||||
if (isLoading) {
|
||||
return <p>Loading projects...</p>;
|
||||
}
|
||||
|
||||
if (isError || !workspaceId) {
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<Smile
|
||||
size={48}
|
||||
className="mb-2 text-gray-300"
|
||||
/>
|
||||
<div className="body text-gray-400">
|
||||
{!workspaceId ? '작업할 워크스페이스를 선택하세요.' : '작업할 프로젝트가 없습니다.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col gap-8 px-6 py-4">
|
||||
<div className="flex items-center justify-center">
|
||||
<h1 className="small-title flex grow">{workspaceId ? workspace.name : ''}</h1>
|
||||
<h1 className="small-title flex grow">{`Workspace-${workspaceId}`}</h1>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex gap-3">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
console.log('새 프로젝트 생성 모달');
|
||||
}}
|
||||
>
|
||||
<div className="body flex items-center gap-2">
|
||||
<Plus size={16} />
|
||||
<span>새 프로젝트</span>
|
||||
</div>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader title="새 워크스페이스" />
|
||||
<WorkSpaceCreateForm
|
||||
onSubmit={(data) => {
|
||||
console.log(data);
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<ProjectCreateModal onSubmit={handleCreateProject} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{workspaceId ? (
|
||||
{projects.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-6">
|
||||
{workspace.projects.map((project) => (
|
||||
{projects.map((project: { id: Key | null | undefined; title: string; projectType: string }) => (
|
||||
<ProjectCard
|
||||
key={project.id}
|
||||
title={project.name}
|
||||
description={project.type}
|
||||
title={project.title}
|
||||
description={project.projectType}
|
||||
onClick={() => {
|
||||
console.log('project id : ' + project.id);
|
||||
}}
|
||||
@ -73,13 +86,13 @@ export default function WorkspaceBrowseDetail() {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex w-full grow items-center justify-center">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<Smile
|
||||
size={48}
|
||||
className="mb-2 text-gray-300"
|
||||
/>
|
||||
<div className="body text-gray-400">작업할 워크스페이스를 선택하세요.</div>
|
||||
<div className="body text-gray-400">작업할 프로젝트가 없습니다.</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,39 +1,54 @@
|
||||
import { Suspense } from 'react';
|
||||
import { NavLink, Outlet } from 'react-router-dom';
|
||||
import { Suspense, useEffect } from 'react';
|
||||
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
|
||||
import Header from '../Header';
|
||||
import { Workspace } from '@/types';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
|
||||
import { Plus } from 'lucide-react';
|
||||
import WorkSpaceCreateForm from '../WorkSpaceCreateModal/WorkSpaceCreateForm';
|
||||
import { useGetAllWorkspaces, useCreateWorkspace } from '@/hooks/useWorkspaceHooks';
|
||||
import useAuthStore from '@/stores/useAuthStore';
|
||||
import WorkSpaceCreateModal from '../WorkSpaceCreateModal';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
export default function WorkspaceBrowseLayout() {
|
||||
const workspaces: Workspace[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'workspace-1',
|
||||
projects: [],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'workspace-2',
|
||||
projects: [],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'workspace-3',
|
||||
projects: [],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'workspace-4',
|
||||
projects: [],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'workspace-5',
|
||||
projects: [],
|
||||
},
|
||||
];
|
||||
const { profile, isLoggedIn } = useAuthStore();
|
||||
const memberId = profile.id;
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn || !memberId) {
|
||||
console.error('로그인되지 않았거나 유효한 멤버 ID가 없습니다.');
|
||||
navigate('/');
|
||||
}
|
||||
}, [isLoggedIn, memberId, navigate]);
|
||||
|
||||
const { data: workspacesResponse, isLoading, isError } = useGetAllWorkspaces(memberId || 0);
|
||||
|
||||
const workspaces = workspacesResponse?.data?.workspaceResponses || [];
|
||||
|
||||
const createWorkspace = useCreateWorkspace();
|
||||
|
||||
const handleCreateWorkspace = (data: { title: string; content: string }) => {
|
||||
if (!memberId) return;
|
||||
createWorkspace.mutate(
|
||||
{ memberId, data },
|
||||
{
|
||||
onSuccess: () => {
|
||||
console.log('워크스페이스가 성공적으로 생성되었습니다.');
|
||||
queryClient.invalidateQueries({ queryKey: ['workspaces'] });
|
||||
},
|
||||
onError: (error: AxiosError) => {
|
||||
console.error('워크스페이스 생성 실패:', error.message);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <p>Loading workspaces...</p>;
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return <p>Error loading workspaces. Please try again later.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -43,21 +58,7 @@ export default function WorkspaceBrowseLayout() {
|
||||
<div className="flex w-[280px] flex-col gap-4 border-r border-gray-200 bg-gray-100 px-6 py-4">
|
||||
<div className="flex items-center justify-center gap-5">
|
||||
<h1 className="heading mr-2.5 w-full">내 워크스페이스</h1>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<button className="p-2">
|
||||
<Plus size={20} />
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader title="새 워크스페이스" />
|
||||
<WorkSpaceCreateForm
|
||||
onSubmit={(data) => {
|
||||
console.log(data);
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<WorkSpaceCreateModal onSubmit={handleCreateWorkspace} />
|
||||
</div>
|
||||
{workspaces.length > 0 ? (
|
||||
workspaces.map((workspace) => (
|
||||
@ -66,7 +67,7 @@ export default function WorkspaceBrowseLayout() {
|
||||
key={workspace.id}
|
||||
className={({ isActive }) => (isActive ? 'body-strong' : 'body') + ' cursor-pointer'}
|
||||
>
|
||||
{workspace.name}
|
||||
{workspace.title}
|
||||
</NavLink>
|
||||
))
|
||||
) : (
|
||||
|
||||
104
frontend/src/hooks/useAuthHooks.ts
Normal file
104
frontend/src/hooks/useAuthHooks.ts
Normal file
@ -0,0 +1,104 @@
|
||||
import { useQuery, UseQueryResult, useMutation, useQueryClient, UseMutationResult } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import useAuthStore from '@/stores/useAuthStore';
|
||||
import { reissueTokenApi, fetchProfileApi } from '@/api/authApi';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface TokenResponse {
|
||||
status: number;
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
accessToken: string;
|
||||
};
|
||||
errors: Array<{
|
||||
field: string;
|
||||
code: string;
|
||||
message: string;
|
||||
objectName: string;
|
||||
}>;
|
||||
isSuccess: boolean;
|
||||
}
|
||||
|
||||
interface ProfileResponse {
|
||||
status: number;
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
id: number;
|
||||
nickname: string;
|
||||
profileImage: string;
|
||||
};
|
||||
errors: Array<{
|
||||
field: string;
|
||||
code: string;
|
||||
message: string;
|
||||
objectName: string;
|
||||
}>;
|
||||
isSuccess: boolean;
|
||||
}
|
||||
|
||||
interface ErrorResponse {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const useReissueToken = (): UseMutationResult<TokenResponse, AxiosError<ErrorResponse>> => {
|
||||
const queryClient = useQueryClient();
|
||||
const { setLoggedIn } = useAuthStore();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: reissueTokenApi,
|
||||
onSuccess: (data) => {
|
||||
setLoggedIn(true, data.data.accessToken);
|
||||
queryClient.invalidateQueries({ queryKey: ['profile'] });
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('토큰 재발급 실패:', error?.response?.data?.message || '알 수 없는 오류');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useProfile = (): UseQueryResult<ProfileResponse, AxiosError<ErrorResponse>> => {
|
||||
const { accessToken, setProfile } = useAuthStore();
|
||||
|
||||
return useQuery<ProfileResponse, AxiosError<ErrorResponse>>({
|
||||
queryKey: ['profile'],
|
||||
queryFn: fetchProfileApi,
|
||||
enabled: !!accessToken,
|
||||
select: (data) => {
|
||||
if (data.isSuccess) {
|
||||
setProfile({
|
||||
id: data.data.id,
|
||||
nickname: data.data.nickname,
|
||||
profileImage: data.data.profileImage,
|
||||
});
|
||||
}
|
||||
return data;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useFetchProfile = () => {
|
||||
const { profile, setProfile } = useAuthStore();
|
||||
const [isFetched, setIsFetched] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!profile.id && !isFetched) {
|
||||
fetchProfileApi()
|
||||
.then((data) => {
|
||||
if (data?.isSuccess && data.data) {
|
||||
setProfile({
|
||||
id: data.data.id,
|
||||
nickname: data.data.nickname,
|
||||
profileImage: data.data.profileImage,
|
||||
});
|
||||
setIsFetched(true);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert('프로필을 가져오는 중 오류가 발생했습니다. 다시 시도해주세요.');
|
||||
console.error('프로필 가져오기 실패:', error);
|
||||
});
|
||||
}
|
||||
}, [profile.id, setProfile, isFetched]);
|
||||
};
|
||||
150
frontend/src/hooks/useProjectHooks.ts
Normal file
150
frontend/src/hooks/useProjectHooks.ts
Normal file
@ -0,0 +1,150 @@
|
||||
import { useQuery, UseQueryResult, useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import {
|
||||
getProjectApi,
|
||||
updateProjectApi,
|
||||
deleteProjectApi,
|
||||
getAllProjectsApi,
|
||||
createProjectApi,
|
||||
addProjectMemberApi,
|
||||
removeProjectMemberApi,
|
||||
} from '@/api/projectApi';
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
title: string;
|
||||
workspaceId: number;
|
||||
projectType: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface ProjectsResponse {
|
||||
status: number;
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
workspaceResponses: Project[];
|
||||
};
|
||||
errors: Array<{
|
||||
field: string;
|
||||
code: string;
|
||||
message: string;
|
||||
objectName: string;
|
||||
}>;
|
||||
isSuccess: boolean;
|
||||
}
|
||||
|
||||
interface ErrorResponse {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const useGetProject = (
|
||||
projectId: number,
|
||||
memberId: number
|
||||
): UseQueryResult<ProjectsResponse, AxiosError<ErrorResponse>> => {
|
||||
return useQuery<ProjectsResponse, AxiosError<ErrorResponse>>({
|
||||
queryKey: ['project', projectId],
|
||||
queryFn: () => getProjectApi(projectId, memberId),
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateProject = (): UseMutationResult<
|
||||
ProjectsResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ projectId: number; memberId: number; data: { title: string; projectType: string } }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ projectId, memberId, data }) => updateProjectApi(projectId, memberId, data),
|
||||
onSuccess: (data) => {
|
||||
const project = data.data?.workspaceResponses?.[0];
|
||||
if (project) {
|
||||
queryClient.invalidateQueries({ queryKey: ['project', project.id] });
|
||||
} else {
|
||||
console.error('프로젝트 데이터가 없습니다.');
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteProject = (): UseMutationResult<
|
||||
ProjectsResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ projectId: number; memberId: number }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ projectId, memberId }) => deleteProjectApi(projectId, memberId),
|
||||
onSuccess: (data) => {
|
||||
const project = data.data?.workspaceResponses?.[0];
|
||||
if (project) {
|
||||
queryClient.invalidateQueries({ queryKey: ['project', project.id] });
|
||||
} else {
|
||||
console.error('프로젝트 데이터가 없습니다.');
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetAllProjects = (
|
||||
workspaceId: number,
|
||||
memberId: number,
|
||||
lastProjectId?: number,
|
||||
limit: number = 10
|
||||
): UseQueryResult<ProjectsResponse, AxiosError<ErrorResponse>> => {
|
||||
return useQuery<ProjectsResponse, AxiosError<ErrorResponse>>({
|
||||
queryKey: ['projects', workspaceId],
|
||||
queryFn: () => getAllProjectsApi(workspaceId, memberId, lastProjectId, limit),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateProject = (): UseMutationResult<
|
||||
ProjectsResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ workspaceId: number; memberId: number; data: { title: string; projectType: string } }
|
||||
> => {
|
||||
return useMutation({
|
||||
mutationFn: ({ workspaceId, memberId, data }) => createProjectApi(workspaceId, memberId, data),
|
||||
});
|
||||
};
|
||||
|
||||
export const useAddProjectMember = (): UseMutationResult<
|
||||
ProjectsResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ projectId: number; memberId: number; newMemberId: number; privilegeType: string }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ projectId, memberId, newMemberId, privilegeType }) =>
|
||||
addProjectMemberApi(projectId, memberId, newMemberId, privilegeType),
|
||||
onSuccess: (data) => {
|
||||
const project = data.data?.workspaceResponses?.[0];
|
||||
if (project) {
|
||||
queryClient.invalidateQueries({ queryKey: ['project', project.id] });
|
||||
} else {
|
||||
console.error('프로젝트 데이터가 없습니다.');
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useRemoveProjectMember = (): UseMutationResult<
|
||||
ProjectsResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ projectId: number; memberId: number; targetMemberId: number }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ projectId, memberId, targetMemberId }) =>
|
||||
removeProjectMemberApi(projectId, memberId, targetMemberId),
|
||||
onSuccess: (data) => {
|
||||
const project = data.data?.workspaceResponses?.[0];
|
||||
if (project) {
|
||||
queryClient.invalidateQueries({ queryKey: ['project', project.id] });
|
||||
} else {
|
||||
console.error('프로젝트 데이터가 없습니다.');
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
152
frontend/src/hooks/useWorkspaceHooks.ts
Normal file
152
frontend/src/hooks/useWorkspaceHooks.ts
Normal file
@ -0,0 +1,152 @@
|
||||
import { useQuery, UseQueryResult, useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import {
|
||||
getWorkspaceApi,
|
||||
updateWorkspaceApi,
|
||||
deleteWorkspaceApi,
|
||||
getAllWorkspacesApi,
|
||||
createWorkspaceApi,
|
||||
addWorkspaceMemberApi,
|
||||
removeWorkspaceMemberApi,
|
||||
} from '@/api/workspaceApi';
|
||||
|
||||
interface WorkspaceResponse {
|
||||
status: number;
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
id: number;
|
||||
memberId: string;
|
||||
title: string;
|
||||
content: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
errors: Array<{
|
||||
field: string;
|
||||
code: string;
|
||||
message: string;
|
||||
objectName: string;
|
||||
}>;
|
||||
isSuccess: boolean;
|
||||
}
|
||||
interface Workspace {
|
||||
id: number;
|
||||
memberId: string;
|
||||
title: string;
|
||||
content: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface GetAllWorkspacesResponse {
|
||||
status: number;
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
workspaceResponses: Workspace[];
|
||||
};
|
||||
errors: Array<{
|
||||
field: string;
|
||||
code: string;
|
||||
message: string;
|
||||
objectName: string;
|
||||
}>;
|
||||
isSuccess: boolean;
|
||||
}
|
||||
|
||||
interface ErrorResponse {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const useGetWorkspace = (
|
||||
workspaceId: number,
|
||||
memberId: number
|
||||
): UseQueryResult<WorkspaceResponse, AxiosError<ErrorResponse>> => {
|
||||
return useQuery<WorkspaceResponse, AxiosError<ErrorResponse>>({
|
||||
queryKey: ['workspace', workspaceId],
|
||||
queryFn: () => getWorkspaceApi(workspaceId, memberId),
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateWorkspace = (): UseMutationResult<
|
||||
WorkspaceResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ workspaceId: number; memberId: number; data: { title: string; content: string } }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ workspaceId, memberId, data }) => updateWorkspaceApi(workspaceId, memberId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteWorkspace = (): UseMutationResult<
|
||||
WorkspaceResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ workspaceId: number; memberId: number }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ workspaceId, memberId }) => deleteWorkspaceApi(workspaceId, memberId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetAllWorkspaces = (
|
||||
memberId: number,
|
||||
lastWorkspaceId?: number,
|
||||
limit?: number
|
||||
): UseQueryResult<GetAllWorkspacesResponse, AxiosError<ErrorResponse>> => {
|
||||
return useQuery<GetAllWorkspacesResponse, AxiosError<ErrorResponse>>({
|
||||
queryKey: ['workspaces'],
|
||||
queryFn: () => getAllWorkspacesApi(memberId, lastWorkspaceId, limit),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateWorkspace = (): UseMutationResult<
|
||||
WorkspaceResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ memberId: number; data: { title: string; content: string } }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ memberId, data }) => createWorkspaceApi(memberId, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useAddWorkspaceMember = (): UseMutationResult<
|
||||
WorkspaceResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ workspaceId: number; memberId: number; newMemberId: number }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ workspaceId, memberId, newMemberId }) => addWorkspaceMemberApi(workspaceId, memberId, newMemberId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useRemoveWorkspaceMember = (): UseMutationResult<
|
||||
WorkspaceResponse,
|
||||
AxiosError<ErrorResponse>,
|
||||
{ workspaceId: number; memberId: number; targetMemberId: number }
|
||||
> => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ workspaceId, memberId, targetMemberId }) =>
|
||||
removeWorkspaceMemberApi(workspaceId, memberId, targetMemberId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['workspace'] });
|
||||
},
|
||||
});
|
||||
};
|
||||
@ -1,3 +1,30 @@
|
||||
// import React from 'react';
|
||||
// import ReactDOM from 'react-dom/client';
|
||||
// import App from './App.tsx';
|
||||
// import './index.css';
|
||||
|
||||
// async function enableMocking() {
|
||||
// if (!import.meta.env.DEV) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// try {
|
||||
// const { worker } = await import('./mocks/browser.ts');
|
||||
// await worker.start();
|
||||
// console.log('[MSW] Mocking enabled. Service Worker is running.');
|
||||
// } catch (error) {
|
||||
// console.error('[MSW] Failed to start the Service Worker:', error);
|
||||
// }
|
||||
// }
|
||||
|
||||
// enableMocking().then(() => {
|
||||
// ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
// <React.StrictMode>
|
||||
// <App />
|
||||
// </React.StrictMode>
|
||||
// );
|
||||
// });
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
|
||||
4
frontend/src/mocks/browser.ts
Normal file
4
frontend/src/mocks/browser.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { setupWorker } from 'msw/browser';
|
||||
import { handlers } from './handlers';
|
||||
|
||||
export const worker = setupWorker(...handlers);
|
||||
267
frontend/src/mocks/handlers.ts
Normal file
267
frontend/src/mocks/handlers.ts
Normal file
@ -0,0 +1,267 @@
|
||||
import { http, HttpResponse } from 'msw';
|
||||
|
||||
export const handlers = [
|
||||
http.post('/api/auth/reissue', () => {
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '토큰 재발급 성공',
|
||||
data: { accessToken: 'mockAccessToken' },
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.get('/api/auth/profile', () => {
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '프로필 조회 성공',
|
||||
data: {
|
||||
id: 1,
|
||||
nickname: 'mockUser',
|
||||
profileImage: 'mockImage.jpg',
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.get('/api/projects/:projectId', ({ params }) => {
|
||||
const { projectId } = params;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '프로젝트 조회 성공',
|
||||
data: {
|
||||
id: Number(projectId),
|
||||
title: `Project ${projectId}`,
|
||||
workspaceId: 1,
|
||||
projectType: 'classification',
|
||||
createdAt: '2024-09-10T04:01:37.033Z',
|
||||
updatedAt: '2024-09-10T04:01:37.033Z',
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.put('/api/projects/:projectId', async ({ params, request }) => {
|
||||
const { projectId } = params;
|
||||
const updateData = (await request.json()) as Record<string, unknown>;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '프로젝트 수정 성공',
|
||||
data: {
|
||||
id: Number(projectId),
|
||||
...updateData,
|
||||
workspaceId: 1,
|
||||
createdAt: '2024-09-10T04:01:37.033Z',
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.delete('/api/projects/:projectId', ({ params }) => {
|
||||
const { projectId } = params;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: `프로젝트 ${projectId} 삭제 성공`,
|
||||
data: null,
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.post('/api/projects/:projectId/members', async ({ params, request }) => {
|
||||
const { projectId } = params;
|
||||
const memberData = (await request.json()) as Record<string, unknown>;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: `프로젝트 ${projectId} 멤버 추가 성공`,
|
||||
data: { ...memberData },
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.delete('/api/projects/:projectId/members', async ({ params, request }) => {
|
||||
const { projectId } = params;
|
||||
const memberData = (await request.json()) as Record<string, unknown>;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: `프로젝트 ${projectId} 멤버 제거 성공`,
|
||||
data: { ...memberData },
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.get('/api/workspaces/:workspaceId/projects', async ({ params, request }) => {
|
||||
const { workspaceId } = params;
|
||||
const url = new URL(request.url);
|
||||
const memberId = url.searchParams.get('memberId');
|
||||
|
||||
if (!memberId) {
|
||||
return HttpResponse.json({
|
||||
status: 1,
|
||||
code: 400,
|
||||
message: 'memberId가 필요합니다.',
|
||||
data: null,
|
||||
errors: [{ field: 'memberId', code: 'missing', message: 'memberId가 필요합니다.', objectName: 'request' }],
|
||||
isSuccess: false,
|
||||
});
|
||||
}
|
||||
|
||||
const dummyProjects = [
|
||||
{
|
||||
id: 1,
|
||||
title: `Project 1`,
|
||||
workspaceId: Number(workspaceId),
|
||||
projectType: 'classification',
|
||||
createdAt: '2024-09-10T04:01:37.049Z',
|
||||
updatedAt: '2024-09-10T04:01:37.049Z',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `Project 2`,
|
||||
workspaceId: Number(workspaceId),
|
||||
projectType: 'detection',
|
||||
createdAt: '2024-09-10T04:02:37.049Z',
|
||||
updatedAt: '2024-09-10T04:02:37.049Z',
|
||||
},
|
||||
];
|
||||
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '프로젝트 목록 조회 성공',
|
||||
data: {
|
||||
workspaceResponses: dummyProjects, // Adjusted structure to match the expected response type
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.post('/api/workspaces/:workspaceId/projects', async ({ params, request }) => {
|
||||
const { workspaceId } = params;
|
||||
const newProject = (await request.json()) as Record<string, unknown>;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '프로젝트 생성 성공',
|
||||
data: {
|
||||
...newProject,
|
||||
workspaceId: Number(workspaceId),
|
||||
id: Math.floor(Math.random() * 1000),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.get('/api/workspaces/:workspaceId', ({ params }) => {
|
||||
const { workspaceId } = params;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '워크스페이스 조회 성공',
|
||||
data: {
|
||||
id: Number(workspaceId),
|
||||
memberId: 'member123',
|
||||
title: 'workspace1',
|
||||
content: '갤럭시 s24 불량 검증',
|
||||
createdAt: '2024-09-10T03:46:17.421Z',
|
||||
updatedAt: '2024-09-10T03:46:17.421Z',
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.put('/api/workspaces/:workspaceId', async ({ params, request }) => {
|
||||
const { workspaceId } = params;
|
||||
const updateData = (await request.json()) as Record<string, unknown>;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '워크스페이스 수정 성공',
|
||||
data: {
|
||||
id: Number(workspaceId),
|
||||
...updateData,
|
||||
createdAt: '2024-09-10T03:46:17.421Z',
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.delete('/api/workspaces/:workspaceId', ({ params }) => {
|
||||
const { workspaceId } = params;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: `워크스페이스 ${workspaceId} 삭제 성공`,
|
||||
data: null,
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.get('/api/workspaces', () => {
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '전체 워크스페이스 조회 성공',
|
||||
data: {
|
||||
workspaceResponses: [
|
||||
{
|
||||
id: 1,
|
||||
memberId: 'member123',
|
||||
title: 'workspace1',
|
||||
content: '갤럭시 s24 불량 검증',
|
||||
createdAt: '2024-09-10T03:46:17.428Z',
|
||||
updatedAt: '2024-09-10T03:46:17.428Z',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
memberId: 'member123',
|
||||
title: 'workspace2',
|
||||
content: '갤럭시 s24 불량 검증',
|
||||
createdAt: '2024-09-10T03:46:17.428Z',
|
||||
updatedAt: '2024-09-10T03:46:17.428Z',
|
||||
},
|
||||
],
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
|
||||
http.post('/api/workspaces', async ({ request }) => {
|
||||
const newWorkspace = (await request.json()) as Record<string, unknown>;
|
||||
return HttpResponse.json({
|
||||
status: 0,
|
||||
code: 0,
|
||||
message: '워크스페이스 생성 성공',
|
||||
data: {
|
||||
...newWorkspace,
|
||||
id: Math.floor(Math.random() * 1000),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
errors: [],
|
||||
isSuccess: true,
|
||||
});
|
||||
}),
|
||||
];
|
||||
@ -6,6 +6,7 @@ import WorkspaceLayout from '@/components/WorkspaceLayout';
|
||||
import AdminLayout from '@/components/AdminLayout';
|
||||
import ReviewList from '@/components/ReviewList';
|
||||
import AdminMemberManage from '@/components/AdminMemberManage';
|
||||
import OAuthCallback from '@/components/OAuthCallback';
|
||||
import { createBrowserRouter } from 'react-router-dom';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
|
||||
@ -14,6 +15,7 @@ export const webPath = {
|
||||
browse: () => '/browse',
|
||||
workspace: () => '/workspace',
|
||||
admin: (id: string) => `/admin/${id}`,
|
||||
oauthCallback: () => '/redirect/oauth2',
|
||||
};
|
||||
|
||||
const router = createBrowserRouter([
|
||||
@ -69,6 +71,10 @@ const router = createBrowserRouter([
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: webPath.oauthCallback(),
|
||||
element: <OAuthCallback />,
|
||||
},
|
||||
]);
|
||||
|
||||
export default router;
|
||||
|
||||
37
frontend/src/stores/useAuthStore.ts
Normal file
37
frontend/src/stores/useAuthStore.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
|
||||
interface ProfileData {
|
||||
id: number | null;
|
||||
nickname: string;
|
||||
profileImage: string;
|
||||
}
|
||||
|
||||
interface AuthState {
|
||||
isLoggedIn: boolean;
|
||||
accessToken: string;
|
||||
profile: ProfileData;
|
||||
setLoggedIn: (status: boolean, token: string) => void;
|
||||
setProfile: (profile: ProfileData) => void;
|
||||
clearAuth: () => void;
|
||||
}
|
||||
|
||||
const useAuthStore = create<AuthState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
isLoggedIn: false,
|
||||
accessToken: '',
|
||||
profile: { id: null, nickname: '', profileImage: '' },
|
||||
setLoggedIn: (status, token) => set({ isLoggedIn: status, accessToken: token }),
|
||||
setProfile: (profile) => set({ profile }),
|
||||
clearAuth: () =>
|
||||
set({ isLoggedIn: false, accessToken: '', profile: { id: null, nickname: '', profileImage: '' } }),
|
||||
}),
|
||||
{
|
||||
name: 'auth-storage',
|
||||
getStorage: () => localStorage,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
export default useAuthStore;
|
||||
Loading…
Reference in New Issue
Block a user