diff --git a/package-lock.json b/package-lock.json index 631019b..943fcd9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,11 +11,15 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.7.7", + "js-cookie": "^3.0.5", + "moment": "^2.30.1", "react": "^18.3.1", "react-calendar": "^5.0.0", "react-dom": "^18.3.1", "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", + "recharts": "^2.12.7", "styled-components": "^6.1.13", "web-vitals": "^2.1.4" } @@ -4039,6 +4043,60 @@ "@types/node": "*" } }, + "node_modules/@types/d3-array": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", + "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==" + }, + "node_modules/@types/d3-color": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", + "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==" + }, + "node_modules/@types/d3-ease": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz", + "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==" + }, + "node_modules/@types/d3-interpolate": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", + "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==" + }, + "node_modules/@types/d3-scale": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz", + "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==", + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@types/d3-shape": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz", + "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==", + "dependencies": { + "@types/d3-path": "*" + } + }, + "node_modules/@types/d3-time": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz", + "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==" + }, + "node_modules/@types/d3-timer": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", + "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==" + }, "node_modules/@types/eslint": { "version": "8.56.12", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz", @@ -5422,6 +5480,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", @@ -6786,6 +6867,116 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-path": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", + "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-scale": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", + "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", + "dependencies": { + "d3-array": "2.10.0 - 3", + "d3-format": "1 - 3", + "d3-interpolate": "1.2.0 - 3", + "d3-time": "2.1.1 - 3", + "d3-time-format": "2 - 4" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-shape": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", + "dependencies": { + "d3-path": "^3.1.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "engines": { + "node": ">=12" + } + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -6873,6 +7064,11 @@ "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==" }, + "node_modules/decimal.js-light": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", + "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==" + }, "node_modules/dedent": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", @@ -7113,6 +7309,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -8331,6 +8536,14 @@ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, + "node_modules/fast-equals": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz", + "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -9610,6 +9823,14 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", @@ -12186,6 +12407,14 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "engines": { + "node": ">=14" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -12782,6 +13011,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -14759,6 +14996,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "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", @@ -15239,6 +15481,35 @@ } } }, + "node_modules/react-smooth": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz", + "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==", + "dependencies": { + "fast-equals": "^5.0.1", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -15271,6 +15542,41 @@ "node": ">=8.10.0" } }, + "node_modules/recharts": { + "version": "2.12.7", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.7.tgz", + "integrity": "sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==", + "dependencies": { + "clsx": "^2.0.0", + "eventemitter3": "^4.0.1", + "lodash": "^4.17.21", + "react-is": "^16.10.2", + "react-smooth": "^4.0.0", + "recharts-scale": "^0.4.4", + "tiny-invariant": "^1.3.1", + "victory-vendor": "^36.6.8" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/recharts-scale": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz", + "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==", + "dependencies": { + "decimal.js-light": "^2.4.1" + } + }, + "node_modules/recharts/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", @@ -17153,6 +17459,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-invariant": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -17627,6 +17938,27 @@ "node": ">= 0.8" } }, + "node_modules/victory-vendor": { + "version": "36.9.2", + "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", + "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", + "dependencies": { + "@types/d3-array": "^3.0.3", + "@types/d3-ease": "^3.0.0", + "@types/d3-interpolate": "^3.0.1", + "@types/d3-scale": "^4.0.2", + "@types/d3-shape": "^3.1.0", + "@types/d3-time": "^3.0.0", + "@types/d3-timer": "^3.0.0", + "d3-array": "^3.1.6", + "d3-ease": "^3.0.1", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.1.0", + "d3-time": "^3.0.0", + "d3-timer": "^3.0.1" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/package.json b/package.json index 64428a8..3979a6c 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,15 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.7.7", + "js-cookie": "^3.0.5", + "moment": "^2.30.1", "react": "^18.3.1", "react-calendar": "^5.0.0", "react-dom": "^18.3.1", "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", + "recharts": "^2.12.7", "styled-components": "^6.1.13", "web-vitals": "^2.1.4" }, @@ -37,5 +41,6 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "proxy": "http://13.125.238.177:8080" } diff --git a/src/components/features/EditSurvey/Question/Checkbox.jsx b/src/components/features/EditSurvey/Question/Checkbox.jsx index 7b5dd53..62123c5 100644 --- a/src/components/features/EditSurvey/Question/Checkbox.jsx +++ b/src/components/features/EditSurvey/Question/Checkbox.jsx @@ -77,7 +77,7 @@ const Container = styled.div` `; const DescriptionContainer = styled.div` - width: 100% + width: 80%; margin-top: 10px; margin-left: 30px; background-color: #ffffff; diff --git a/src/components/features/EditSurvey/QuestionItem.jsx b/src/components/features/EditSurvey/QuestionItem.jsx index ece20a8..515cdfb 100644 --- a/src/components/features/EditSurvey/QuestionItem.jsx +++ b/src/components/features/EditSurvey/QuestionItem.jsx @@ -1,8 +1,9 @@ import React, { useState, useEffect, useRef } from "react"; import styled from "styled-components"; -import axios from "axios"; +// import axios from "axios"; import AI from "../../../assets/images/buttons/ai.png"; -import { AiResponseModal } from "../../common/Modal/AiResponseModal"; +import { AiMeaningModal } from "../../common/Modal/AiMeaningModal"; +import { AiLikertModal } from "../../common/Modal/AiLikertModal"; import { Checkbox } from "./Question/Checkbox"; import { LongAnswer } from "./Question/LongAnswer"; import { ShortAnswer } from "./Question/ShortAnswer"; @@ -24,7 +25,8 @@ export const QuestionItem = ({ question = { options: [] }, setQuestions }) => { const [selectedType, setSelectedType] = useState("체크박스"); const [isDropdownOpen, setDropdownOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); - const [aiResponse, setAiResponse] = useState(""); + const [modalType, setModalType] = useState(null); + // const [aiResponse, setAiResponse] = useState(""); const dropdownRef = useRef(null); const handleDropdownToggle = () => { @@ -76,16 +78,16 @@ export const QuestionItem = ({ question = { options: [] }, setQuestions }) => { } }; - const QUESTION_TYPE_TIMES = { - CHECK_CHOICE: 1, // 체크박스 - SEMANTIC_RATINGS: 2, // 의미분별척도 - LIKERT_SCORES: 2, // 리커트척도 - MULTIPLE_CHOICE: 1, // 객관식 - NUMERIC_RESPONSE: 1, // 숫자응답 - PHONE_NUMBER: 1, // 전화번호 - SUBJECTIVE: 3, // 주관식 - DESCRIPTIVE: 5, // 서술형 - }; + // const QUESTION_TYPE_TIMES = { + // CHECK_CHOICE: 1, // 체크박스 + // SEMANTIC_RATINGS: 2, // 의미분별척도 + // LIKERT_SCORES: 2, // 리커트척도 + // MULTIPLE_CHOICE: 1, // 객관식 + // NUMERIC_RESPONSE: 1, // 숫자응답 + // PHONE_NUMBER: 1, // 전화번호 + // SUBJECTIVE: 3, // 주관식 + // DESCRIPTIVE: 5, // 서술형 + // }; const handleClickOutside = (event) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { @@ -101,12 +103,12 @@ export const QuestionItem = ({ question = { options: [] }, setQuestions }) => { }, []); const handleAIButtonClick = async () => { - const requestData = { - survey_title: question.survey_title, - text: question.text, - question_type: selectedType, - response_time: QUESTION_TYPE_TIMES[selectedType], - }; + // const requestData = { + // survey_title: question.survey_title, + // text: question.text, + // question_type: selectedType, + // response_time: QUESTION_TYPE_TIMES[selectedType], + // }; // if (selectedType === "의미 분별 척도") { // requestData.semantic_option = { @@ -117,22 +119,24 @@ export const QuestionItem = ({ question = { options: [] }, setQuestions }) => { // requestData.options = question.options; // } - try { - const response = await axios.post( - "http://localhost:8080/api/prompt", - requestData, - { - headers: { - "Content-Type": "application/json", - }, - } - ); - setAiResponse(response.data); - console.log(response.data); - setIsModalOpen(true); - } catch (error) { - console.error("Error fetching AI response:", error); + // try { + // const response = await axios.post("/api/prompt", requestData, { + // headers: { + // "Content-Type": "application/json", + // }, + // }); + // setAiResponse(response.data); + // console.log(response.data); + // setIsModalOpen(true); + // } catch (error) { + // console.error("Error fetching AI response:", error); + // } + if (selectedType === "의미 분별 척도") { + setModalType("meaning"); + } else if (selectedType === "리커트 척도") { + setModalType("likert"); } + setIsModalOpen(true); }; const closeModal = () => { @@ -176,12 +180,11 @@ export const QuestionItem = ({ question = { options: [] }, setQuestions }) => { {renderComponent()} - {isModalOpen && ( - + {isModalOpen && modalType === "meaning" && ( + + )} + {isModalOpen && modalType === "likert" && ( + )} ); diff --git a/src/components/features/HomePage/HomeBanner.jsx b/src/components/features/HomePage/HomeBanner.jsx index a734f2b..0e0a18c 100644 --- a/src/components/features/HomePage/HomeBanner.jsx +++ b/src/components/features/HomePage/HomeBanner.jsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import sursim from "../../../assets/images/sursim.png"; +import sursim from "../../../assets/images/sursim_home.png"; import banner from "../../../assets/images/logos/BannerLogo.png"; import { useNavigate } from "react-router-dom"; diff --git a/src/components/features/HomePage/SurveyList.jsx b/src/components/features/HomePage/SurveyList.jsx index 183ae3e..4d51bbf 100644 --- a/src/components/features/HomePage/SurveyList.jsx +++ b/src/components/features/HomePage/SurveyList.jsx @@ -53,6 +53,48 @@ const SurveyData = [ points: 500, duration: "24/04/23~24/04/30", }, + { + id: 8, + title: "환경 보호 인식 조사", + target: "20대~50대", + points: 800, + duration: "24/05/15 ~ 24/05/21", + }, + { + id: 9, + title: "직장 내 스트레스 요인 조사", + target: "20대~40대", + points: 900, + duration: "24/05/22 ~ 24/05/28", + }, + { + id: 10, + title: "건강식품 구매 의향 조사", + target: "30대~60대", + points: 750, + duration: "24/05/29 ~ 24/06/04", + }, + { + id: 11, + title: "학생들의 학습 환경 조사", + target: "학생", + points: 650, + duration: "24/06/05 ~ 24/06/11", + }, + { + id: 12, + title: "여행 소비 트렌드 조사", + target: "20대~40대", + points: 700, + duration: "24/06/12 ~ 24/06/18", + }, + { + id: 13, + title: "디지털 기기 사용 패턴 조사", + target: "10대~50대", + points: 720, + duration: "24/06/19 ~ 24/06/25", + }, ]; const itemsPerPage = 6; diff --git a/src/components/features/MyPage/Profile.jsx b/src/components/features/MyPage/Profile.jsx new file mode 100644 index 0000000..2818b3c --- /dev/null +++ b/src/components/features/MyPage/Profile.jsx @@ -0,0 +1,186 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import { LoginModal } from "../../common/Modal/LoginModal"; +import mypage from "../../../assets/images/mypage.png"; + +export const Profile = () => { + const [isModalOpen, setModalOpen] = useState(false); + + const handleLoginButtonClick = () => { + setModalOpen(true); + }; + + const closeModal = () => { + setModalOpen(false); + }; + + return ( + + + + + 로그인 하기 > + + 로그인을 먼저 해주세요. + + + + + 프로필 설정 + 수정 + mypage + 로그인을 먼저 해주세요. + + + + 알림 설정 + + 로그인을 먼저 해주세요. + + + + {isModalOpen && } + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; +`; + +const MyPageContainer = styled.div` + width: 1100px; + height: 550px; + display: flex; + flex-direction: column; + margin-top: 30px; + margin-bottom: 30px; + margin-left: 200px; + background-color: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.25); + border-radius: 20px; +`; + +const LoginContainer = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + margin-left: 100px; +`; + +const LoginButton = styled.button` + background-color: #ffffff; + border: none; + font-size: 36px; + font-weight: 800; + color: #019a13; + cursor: pointer; + margin-top: 50px; + margin-left: -8px; + display: inline-block; +`; + +const LoginText = styled.p` + font-size: 25px; + font-weight: 400; + color: #383838; + margin-top: 5px; + margin-bottom: 50px; +`; + +const SecondContainer = styled.div` + display: flex; + flex-direction: row; + gap: 10px; + margin-top: 20px; +`; + +const ProfileContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const AlarmContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const Title = styled.h2` + font-size: 32px; + font-weight: 700; + color: #383838; + margin-left: 100px; +`; + +const AlarmTitle = styled.h2` + font-size: 32px; + font-weight: 700; + color: #383838; + margin-left: -500px; +`; + +const ProfileButton = styled.button` + width: 80px; + height: 35px; + margin-left: 400px; + margin-top: -65px; + border-radius: 39px; + background-color: #ffffff; + border: 2px solid rgba(0, 0, 0, 0.15); + padding: 0; + line-height: 35px; + font-size: 18px; + font-weight: 700; + color: #c5c5c5; + cursor: pointer; +`; + +const Image = styled.img` + width: 100px; + height: 95px; + margin-left: 220px; + margin-top: 50px; +`; + +const AlarmImage = styled.img` + width: 100px; + height: 95px; + margin-left: -340px; + margin-top: 20px; +`; + +const Text = styled.p` + font-size: 18px; + font-weight: 700; + color: #c5c5c5; + margin-left: 200px; + margin-top: 8px; +`; + +const AlarmText = styled.p` + font-size: 18px; + font-weight: 700; + color: #c5c5c5; + margin-left: -350px; + margin-top: 8px; +`; + +const Underline = styled.hr` + width: 88%; + border: none; + border-top: 1px solid #cecece; + border-color: #cecece; + margin-left: 45px; + margin-top: -15px; +`; + +const Underline2 = styled.hr` + height: 110%; + width: 1px; + border: none; + border-left: 1px solid #cecece; + border-color: #cecece; + margin-left: 45px; + margin-top: 10px; +`; diff --git a/src/components/features/SettingSurvey/index.jsx b/src/components/features/SettingSurvey/index.jsx index 0ae1403..f0de022 100644 --- a/src/components/features/SettingSurvey/index.jsx +++ b/src/components/features/SettingSurvey/index.jsx @@ -33,14 +33,13 @@ export const SettingSurvey = () => { const handleSurveySubmit = async () => { const questionList = questions.map((question) => { return { - text: question.question, // 질문 텍스트 - question_type: question.type, // 질문 타입 추가 - options: question.options || [], // 선택지가 있을 경우 추가 + text: question.question, + question_type: question.type, + options: question.options || [], }; }); const formData = new FormData(); - formData.append("title", title); formData.append("start_date", startDate.toISOString().split("T")[0]); formData.append("due_date", dueDate.toISOString().split("T")[0]); @@ -49,44 +48,27 @@ export const SettingSurvey = () => { formData.append("reward_type", rewardType); formData.append("reward_count", rewardCount); - // 리워드 이미지가 있다면 FormData에 추가 if (rewardImage) { formData.append("reward_image", rewardImage); } + formData.append( + "survey", + JSON.stringify({ + title, + start_date: startDate.toISOString().split("T")[0], + due_date: dueDate.toISOString().split("T")[0], + question_list: questionList, + reward_type: rewardType, + reward_count: rewardCount, + reward_image: rewardImage ? rewardImage.name : null, + }) + ); + try { - // 설문 데이터와 리워드 이미지 전송 - const response = await axios.post( - "http://13.125.238.177:8080/api/surveys", - formData, - { - headers: { - "Content-Type": "multipart/form-data", // FormData를 사용할 때는 이 헤더를 설정 - }, - } - ); - - // const surveyData = { - // title: title, - // start_date: startDate.toISOString().split("T")[0], // ISO 형식으로 변환하여 날짜 설정 - // due_date: dueDate.toISOString().split("T")[0], - // public_access: publicAccess, - // question_list: questionList, - // reward_type: rewardType, - // reward_count: rewardCount, - // reward_image: formData.append("survey", JSON.stringify(rewardImage)), - // }; - - // try { - // const response = await axios.post( - // "http://13.125.238.177:8080/api/surveys", - // surveyData, - // { - // headers: { - // "Content-Type": "application/json", - // }, - // } - // ); + const response = await axios.post("/api/surveys", formData, { + withCredentials: true, + }); console.log("Survey created successfully", response.data); alert("설문 등록이 완료되었습니다.");