From 33a234715206e0c4c7ccd074736063c72d878ce2 Mon Sep 17 00:00:00 2001 From: hckang17 Date: Fri, 1 Dec 2023 09:47:27 +0900 Subject: [PATCH] =?UTF-8?q?product=EA=B8=B0=EB=8A=A5=EC=B6=94=EA=B0=80,=20?= =?UTF-8?q?survey=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 205 ++++++++++++++ package.json | 1 + src/components/Headers/ProfileMypage.js | 66 +++++ src/components/Navbars/DarkNavbar.js | 143 ++++++++++ src/components/Navbars/ExamplesNavbar.js | 2 +- src/index.js | 4 + src/views/examples/CalendarPage.js | 10 +- src/views/examples/HaircareProductPage.jsx | 79 ++++++ src/views/examples/SurveyPage.jsx | 26 ++ src/views/index-sections/Calendar.jsx | 24 +- .../index-sections/HaircareProductCard.jsx | 24 ++ src/views/index-sections/SurveyForm.jsx | 258 ++++++++++++++++++ 12 files changed, 820 insertions(+), 22 deletions(-) create mode 100644 src/components/Headers/ProfileMypage.js create mode 100644 src/components/Navbars/DarkNavbar.js create mode 100644 src/views/examples/HaircareProductPage.jsx create mode 100644 src/views/examples/SurveyPage.jsx create mode 100644 src/views/index-sections/HaircareProductCard.jsx create mode 100644 src/views/index-sections/SurveyForm.jsx diff --git a/package-lock.json b/package-lock.json index b8ee45c..9bf2b2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "moment": "2.29.4", "nouislider": "15.4.0", "react": ">=16.8.0", + "react-bootstrap": "^2.9.1", "react-bootstrap-switch": "15.5.3", "react-datetime": "3.2.0", "react-dom": ">=16.8.0", @@ -3247,6 +3248,29 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.0.tgz", + "integrity": "sha512-Bz6BqP6ZorCme9tSWHZVmmY+s7AU8l6Vl2NUYmBzezD//fVHHfFo4lFBn5tBuAaJEm3AuCLaJQ6H2qhxNSb7zg==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz", @@ -3255,6 +3279,54 @@ "node": ">=14" } }, + "node_modules/@restart/hooks": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz", + "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==", + "dependencies": { + "dequal": "^2.0.3" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz", + "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/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/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", + "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", + "peerDependencies": { + "react": ">=16.14.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3573,6 +3645,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz", + "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -3793,6 +3873,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==" }, + "node_modules/@types/prop-types": { + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" + }, "node_modules/@types/qs": { "version": "6.9.10", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.10.tgz", @@ -3803,6 +3888,24 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz", "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==" }, + "node_modules/@types/react": { + "version": "18.2.39", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz", + "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.9", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz", + "integrity": "sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -3816,6 +3919,11 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==" }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" + }, "node_modules/@types/semver": { "version": "7.5.6", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz", @@ -3866,6 +3974,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" }, + "node_modules/@types/warning": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", + "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==" + }, "node_modules/@types/ws": { "version": "8.5.10", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz", @@ -6167,6 +6280,11 @@ "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -8795,6 +8913,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz", @@ -13906,6 +14032,18 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -14071,6 +14209,35 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-bootstrap": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz", + "integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.6", + "@types/react-transition-group": "^4.4.6", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-bootstrap-switch": { "version": "15.5.3", "resolved": "https://registry.npmjs.org/react-bootstrap-switch/-/react-bootstrap-switch-15.5.3.tgz", @@ -14081,6 +14248,30 @@ "react-dom": ">=15.5.0" } }, + "node_modules/react-bootstrap/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/react-bootstrap/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/react-datetime": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/react-datetime/-/react-datetime-3.2.0.tgz", @@ -16347,6 +16538,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/underscore": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz", diff --git a/package.json b/package.json index 3137323..908d64b 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "moment": "2.29.4", "nouislider": "15.4.0", "react": ">=16.8.0", + "react-bootstrap": "^2.9.1", "react-bootstrap-switch": "15.5.3", "react-datetime": "3.2.0", "react-dom": ">=16.8.0", diff --git a/src/components/Headers/ProfileMypage.js b/src/components/Headers/ProfileMypage.js new file mode 100644 index 0000000..f976c91 --- /dev/null +++ b/src/components/Headers/ProfileMypage.js @@ -0,0 +1,66 @@ +import React from "react"; +import { Container } from "reactstrap"; + + +const userName = sessionStorage.getItem("nickname"); + +function ProfileMypageHeader() { + let pageHeader = React.createRef(); + + React.useEffect(() => { + if (window.innerWidth > 991) { + const updateScroll = () => { + let windowScrollTop = window.pageYOffset / 3; + pageHeader.current.style.transform = + "translate3d(0," + windowScrollTop + "px,0)"; + }; + window.addEventListener("scroll", updateScroll); + return function cleanup() { + window.removeEventListener("scroll", updateScroll); + }; + } + }); + return ( + <> +
+
+ +
+ ... +
+

{userName}

+ {/*

Photographer

*/} + + {/* 여기다가 총 검사건수 +
+
+

26

+

Comments

+
+ + +
+

26

+

Comments

+
+
+

48

+

Bookmarks

+
+
*/} + +
+ + ); +} + +export default ProfileMypageHeader; diff --git a/src/components/Navbars/DarkNavbar.js b/src/components/Navbars/DarkNavbar.js new file mode 100644 index 0000000..e7df6bd --- /dev/null +++ b/src/components/Navbars/DarkNavbar.js @@ -0,0 +1,143 @@ +import React from "react"; +import { Link } from "react-router-dom"; +// reactstrap components +import { + Collapse, + DropdownToggle, + DropdownMenu, + DropdownItem, + UncontrolledDropdown, + NavbarBrand, + Navbar, + NavItem, + NavLink, + Nav, + Container, + UncontrolledTooltip, +} from "reactstrap"; + +function DarkNavbar() { + const [navbarColor, setNavbarColor] = React.useState(""); + const [collapseOpen, setCollapseOpen] = React.useState(false); + React.useEffect(() => { + const updateNavbarColor = () => { + if ( + document.documentElement.scrollTop > 399 || + document.body.scrollTop > 399 + ) { + setNavbarColor(""); + } else if ( + document.documentElement.scrollTop < 400 || + document.body.scrollTop < 400 + ) { + setNavbarColor(""); + } + }; + window.addEventListener("scroll", updateNavbarColor); + return function cleanup() { + window.removeEventListener("scroll", updateNavbarColor); + }; + }); + return ( + <> + {collapseOpen ? ( +
{ + document.documentElement.classList.toggle("nav-open"); + setCollapseOpen(false); + }} + /> + ) : null} + + + + e.preventDefault()} + > + + + + + + + Dropdown header + + + home 이동 + + + landing page 이동 + + + profile 페이지 이동 + + + login 페이지 이동 + + + e.preventDefault()}> + 다른 링크 + + + e.preventDefault()}> + 또 다른 링크 + + + +
+ + NIMONAEMO + + + Designed by? + + +
+ + + + + + + ); +} + +export default DarkNavbar; diff --git a/src/components/Navbars/ExamplesNavbar.js b/src/components/Navbars/ExamplesNavbar.js index 0b67183..8951dcd 100644 --- a/src/components/Navbars/ExamplesNavbar.js +++ b/src/components/Navbars/ExamplesNavbar.js @@ -99,7 +99,7 @@ function ExamplesNavbar() { NIMONAEMO - Designed by siwooJang + Design by + + + + ); +}; + +export default HaircareProductCard; + diff --git a/src/views/index-sections/SurveyForm.jsx b/src/views/index-sections/SurveyForm.jsx new file mode 100644 index 0000000..e9a047d --- /dev/null +++ b/src/views/index-sections/SurveyForm.jsx @@ -0,0 +1,258 @@ +import React, {useEffect, useState} from 'react'; +import { useForm, Controller } from 'react-hook-form'; +import * as yup from 'yup'; +import { yupResolver } from '@hookform/resolvers/yup'; +import 'bootstrap/dist/css/bootstrap.min.css'; +import { Button, Modal } from 'react-bootstrap'; +import axios from "axios"; + +const nickname = sessionStorage.getItem("nickname"); +const requiredMessage = `필수 응답란입니다.`; +const warningStyle = { + color: 'red' +}; + +const schema = yup.object().shape({ + questGender: yup.string().required(requiredMessage), + questOld: yup.string().required(requiredMessage), + questUsageTerm: yup.string().required(requiredMessage), + questPermTerm: yup.string().required(requiredMessage), + questDyeTerm: yup.string().required(requiredMessage), + questRecommend: yup.number().required(requiredMessage), +}); + +function SurveyForm() { + const [showModal, setShowModal] = useState(false); + // 모달을 사용하기 위한 state + + const { control, handleSubmit, setValue, formState: {errors}, watch } = useForm({ + resolver: yupResolver(schema), + }); + // 폼을 작성하기 위한 메서드 집합들. + + const onSubmit = async (data) => { + alert(JSON.stringify(data)); + let formData = new FormData(); + formData.append("nickname", nickname); + formData.append("gender", data.questGender); + formData.append("old", data.questOld); + formData.append("use_age_term", data.questUsageTerm); + formData.append("perm_term", data.questPermTerm); + formData.append("dye_term", data.questDyeTerm); + formData.append("recommend_or_not", data.questRecommend); + + + axios.post('http://3.34.182.50:5000/survey', formData) + .then(function(response) { + console.log('설문조사 업로드 성공'); + }) + .catch(function(error) { + console.log('설문조사 업로드 실패', error); + }); + + /* + * gender + * old + * use_age_term + * perm_term + * dye_term + * recommend_or_not + */ + }; // '제출' 버튼을 클릭했을때 발생하는 것들. + + const handleModalClose = () => setShowModal(false); + + useEffect(() => { + if (watch('questRecommend') == 0) { + setShowModal(true); + } + }, [watch('questRecommend')]); + + const handleYesButtonClick = () => { + setValue('questRecommend', 0); + setShowModal(false); + }; + + const handleNoButtonClick = () => { + setValue('questRecommend', 1); + setShowModal(false); + }; + + return ( +
+
+ + + 알림 + + + 정말 헤어케어 제품을 추천받지 않으시겠어요? + + + + + + + {/* 모달 정의 부분 */} + +

검사전 설문

+

보다 정확한 진단을 위해 필요하니 응답해주시면 감사하겠습니다.

+ 별 표시( * )가 있는 항목은 필수응답 항목입니다.

+ +
+

* 성별을 알려주세요.

+ ( +
+ +
+ )} + /> + {errors.questGender &&

{errors.questGender.message}

} +
+

+ +
+

* 연령대를 알려주세요.

+ ( +
+ +
+ )}/> + {errors.questOld &&

{errors.questOld.message}

} +
+

+ +
+

* 샴푸 사용빈도를 알려주세요.

+ ( +
+ +
+ )}/> + {errors.questUsageTerm &&

{errors.questUsageTerm.message}

} +
+

+ +
+

* 파마 주기를 알려주세요.

+ ( +
+ +
+ )}/> + {errors.questPermTerm &&

{errors.questPermTerm.message}

} +
+

+ +
+

* 염색 주기를 알려주세요.

+ ( +
+ +
+ )}/> + {errors.questDyeTerm &&

{errors.questDyeTerm.message}

} +
+

+ +
+

헤어케어 제품을 추천받으시겠습니까?

+ ( +
+ + {/* 추가적인 체크 박스 옵션을 필요에 따라 추가할 수 있음 */} +
+ )} + /> + {errors.questRecommend &&

{errors.questRecommend.message}

} +
+

+ + +
+ +
+ + ); +} + +export default SurveyForm; \ No newline at end of file