From 11667c90ade55af0b8f22227942e2c15e121d6d5 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 25 Oct 2024 14:48:49 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=20=EC=A0=80=EC=9E=A5?= =?UTF-8?q?=EC=8B=9C=20focus=20nextui-org/react=20Button=20onClick=20->=20?= =?UTF-8?q?onPress?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/management/StuffDetail.jsx | 104 ++++++++++++++++------ 1 file changed, 76 insertions(+), 28 deletions(-) diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index e8a25251..73f31518 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from 'react' import { useRouter, useSearchParams, usePathname } from 'next/navigation' import { Button } from '@nextui-org/react' -import Select from 'react-select' +import Select, { components } from 'react-select' import Link from 'next/link' import { useAxios } from '@/hooks/useAxios' import { globalLocaleStore } from '@/store/localeAtom' @@ -19,6 +19,13 @@ import { useCommonCode } from '@/hooks/common/useCommonCode' import StuffPlanQGrid from './StuffPlanQGrid' export default function StuffDetail() { + const inputReceiveUserEl = useRef(null) //담당자ref + const inputObjectNameEl = useRef(null) //물건명ref + const inputZipNoEl = useRef(null) //우편번호ref + const inputAddressEl = useRef(null) //주소ref + const inputVerticalSnowCoverEl = useRef(null) //수직적설량ref + const inputInstallHeightEl = useRef(null) //설치높이ref + //공통코드 const { commonCode, findCommonCode } = useCommonCode() const [selOptions, setSelOptions] = useState('') //선택한 1차점 @@ -54,7 +61,7 @@ export default function StuffDetail() { address: '', //주소 areaId: '', //발전량시뮬레이션지역id standardWindSpeedId: '', //기준풍속 - verticalSnowCover: '', //수직적설량NEW + verticalSnowCover: '', //수직적설량 coldRegionFlg: false, //한랭지대책시행(true : 1 / false : 0) surfaceType: 'III・IV', //면조도구분(III・IV / Ⅱ) saltAreaFlg: false, //염해지역용아이템사용 (true : 1 / false : 0) @@ -890,6 +897,7 @@ export default function StuffDetail() { form.setValue('areaName', e.prefName) } + // 저장 const onValid = async () => { const formData = form.getValues() @@ -899,11 +907,13 @@ export default function StuffDetail() { if (!formData.receiveUser || formData.receiveUser.trim().length === 0) { fieldNm = getMessage('stuff.detail.receiveUser') errors = fieldNm + inputReceiveUserEl.current.focus() } //물건명 if (!formData.objectName || formData.objectName.trim().length === 0) { fieldNm = getMessage('stuff.detail.objectStatusId') errors = fieldNm + inputObjectNameEl.current.focus() } //경칭 if (!formData.objectNameOmit) { @@ -919,11 +929,13 @@ export default function StuffDetail() { if (!formData.zipNo) { fieldNm = getMessage('stuff.detail.zipNo') errors = fieldNm + inputZipNoEl.current.focus() } //주소 if (!formData.address) { fieldNm = getMessage('stuff.detail.address') errors = fieldNm + inputAddressEl.current.focus() } //도도부현 if (!formData.prefId || formData.prefId === '0') { @@ -944,6 +956,7 @@ export default function StuffDetail() { if (!formData.verticalSnowCover) { fieldNm = getMessage('stuff.detail.verticalSnowCover') errors = fieldNm + inputVerticalSnowCoverEl.current.focus() } //면조도구분 @@ -955,10 +968,9 @@ export default function StuffDetail() { if (!formData.installHeight) { fieldNm = getMessage('stuff.detail.installHeight') errors = fieldNm + inputInstallHeightEl.current.focus() } - //계약조건 - if (Object.keys(errors).length > 0) { return alert(getMessage('stuff.detail.save.valierror3', [errors])) } @@ -1110,6 +1122,7 @@ export default function StuffDetail() { workName: null, } + return //1차점 or 2차점 안고르고 임시저장하면 if (params.saleStoreId == '') { params.saleStoreId = sessionState.storeId @@ -1125,6 +1138,7 @@ export default function StuffDetail() { if (height === '0') { return alert(getMessage('stuff.detail.save.valierror2')) } + await promisePost({ url: '/api/object/save-object', data: params }).then((res) => { if (res.status === 201) { alert(getMessage('stuff.detail.tempSave.message1')) @@ -1153,6 +1167,17 @@ export default function StuffDetail() { input.value = input.value.replace(/[^0-9]/g, '') } + //자동완성 옵션 없을때 메세지 컴포넌트.. + const NoOptionsMessage = (props) => { + return ( + + + TEXTTTTTTT + + + ) + } + return ( <> {(editMode === 'NEW' && ( @@ -1186,7 +1211,7 @@ export default function StuffDetail() { )) || null} - @@ -1198,7 +1223,7 @@ export default function StuffDetail() {
- +
@@ -1227,7 +1252,7 @@ export default function StuffDetail() { })} {/* 라디오끝 */}
- +
- +
-
{getMessage('stuff.detail.btn.addressPop.guide')}
@@ -1368,7 +1394,7 @@ export default function StuffDetail() {
-
+
{prefCodeList?.length > 0 && ( +
@@ -1444,7 +1476,7 @@ export default function StuffDetail() { >
{getMessage('stuff.detail.standardWindSpeedIdSpan')} -
@@ -1463,6 +1495,7 @@ export default function StuffDetail() { onKeyUp={handleKeyUp} value={form.watch('verticalSnowCover') || ''} {...register('verticalSnowCover')} + ref={inputVerticalSnowCoverEl} />
cm @@ -1510,6 +1543,7 @@ export default function StuffDetail() { onKeyUp={handleKeyUp} value={form.watch('installHeight') || ''} {...register('installHeight')} + ref={inputInstallHeightEl} /> m @@ -1544,7 +1578,7 @@ export default function StuffDetail() {
{!isFormValid ? ( - ) : ( @@ -1595,7 +1629,7 @@ export default function StuffDetail() { {/* {detailData?.tempFlg === '1' ? ( */} {objectNo.substring(0, 1) === 'T' ? ( <> - @@ -1609,7 +1643,13 @@ export default function StuffDetail() {
- +
@@ -1638,7 +1678,7 @@ export default function StuffDetail() { })} {/* 상세라디오끝 */}
- +
+
-
{getMessage('stuff.detail.btn.addressPop.guide')}
@@ -1780,7 +1820,7 @@ export default function StuffDetail() {
-
+
{prefCodeList?.length > 0 && ( +
@@ -1860,7 +1906,7 @@ export default function StuffDetail() { >
{getMessage('stuff.detail.standardWindSpeedIdSpan')} -
@@ -1881,6 +1927,7 @@ export default function StuffDetail() { onKeyUp={handleKeyUp} value={form.watch('verticalSnowCover') || ''} {...register('verticalSnowCover')} + ref={inputVerticalSnowCoverEl} /> cm @@ -1932,6 +1979,7 @@ export default function StuffDetail() { onKeyUp={handleKeyUp} value={form.watch('installHeight') || ''} {...register('installHeight')} + ref={inputInstallHeightEl} /> m @@ -2005,13 +2053,13 @@ export default function StuffDetail() {
-
@@ -2020,17 +2068,17 @@ export default function StuffDetail() { <>
{!isFormValid ? ( - ) : ( )}
From 49bb5e436289bedf2c597f3cd32305a31cd71908 Mon Sep 17 00:00:00 2001 From: leeyongjae Date: Fri, 25 Oct 2024 14:53:49 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=EA=B0=80=EC=9E=85=EC=8B=A0=EC=B2=AD=20?= =?UTF-8?q?=EC=8B=9C,=20confirm=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/Join.jsx | 64 +++++++++++++++++++----------------- src/locales/ja.json | 1 + src/locales/ko.json | 1 + 3 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/components/auth/Join.jsx b/src/components/auth/Join.jsx index 3f4c1097..a9e79750 100644 --- a/src/components/auth/Join.jsx +++ b/src/components/auth/Join.jsx @@ -132,39 +132,41 @@ export default function Join() { const formData = new FormData(e.target) if (joinValidation(formData)) { - const param = { - storeQcastNm: formData.get('storeQcastNm'), - storeQcastNmKana: formData.get('storeQcastNmKana'), - postCd: formData.get('postCd'), - addr: formData.get('addr'), - telNo: formData.get('telNo'), - fax: formData.get('fax'), - bizNo: formData.get('bizNo'), - userInfo: { - userId: formData.get('userId'), - userNm: formData.get('userNm'), - userNmKana: formData.get('userNmKana'), - telNo: formData.get('userTelNo'), - fax: formData.get('userFax'), - email: formData.get('email'), - category: formData.get('category'), - }, - } + if (confirm(getMessage('join.complete.save.confirm'))) { + const param = { + storeQcastNm: formData.get('storeQcastNm'), + storeQcastNmKana: formData.get('storeQcastNmKana'), + postCd: formData.get('postCd'), + addr: formData.get('addr'), + telNo: formData.get('telNo'), + fax: formData.get('fax'), + bizNo: formData.get('bizNo'), + userInfo: { + userId: formData.get('userId'), + userNm: formData.get('userNm'), + userNmKana: formData.get('userNmKana'), + telNo: formData.get('userTelNo'), + fax: formData.get('userFax'), + email: formData.get('email'), + category: formData.get('category'), + }, + } - await promisePost({ url: '/api/login/v1.0/user/join', data: param }) - .then((res) => { - if (res) { - if (res.data.result.resultCode == 'S') { - Cookies.set('joinEmail', formData.get('email'), { expires: 1 }) - router.push('/join/complete') - } else { - alert(res.data.result.resultMsg) + await promisePost({ url: '/api/login/v1.0/user/join', data: param }) + .then((res) => { + if (res) { + if (res.data.result.resultCode == 'S') { + Cookies.set('joinEmail', formData.get('email'), { expires: 1 }) + router.push('/join/complete') + } else { + alert(res.data.result.resultMsg) + } } - } - }) - .catch((error) => { - alert(error.response.data.message) - }) + }) + .catch((error) => { + alert(error.response.data.message) + }) + } } } diff --git a/src/locales/ja.json b/src/locales/ja.json index 688cae4c..baa74f41 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -446,6 +446,7 @@ "join.complete.contents": "※ 申請したIDが承認されると、担当者情報に入力されたメールアドレスにログイン案内メールが送信されます。", "join.complete.email_comment": "担当者メールアドレス", "join.validation.check1": "{0} の形式を確認してください。", + "join.complete.save.confirm": "Hanwha Japan担当者にID承認を要請されると、これ以上情報を修正できません。 本当にリクエストしますか？", "stuff.gridHeader.lastEditDatetime": "更新日時", "stuff.gridHeader.objectNo": "品番", "stuff.gridHeader.planTotCnt": "プラン数", diff --git a/src/locales/ko.json b/src/locales/ko.json index 7daef05c..d46e7726 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -451,6 +451,7 @@ "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.", "join.complete.email_comment": "담당자 이메일 주소", "join.validation.check1": "{0} 형식을 확인해주세요.", + "join.complete.save.confirm": "Hanwha Japan 담당자에게 ID승인이 요청되면 더 이상 정보를 수정할 수 없습니다. 정말로 요청하시겠습니까?", "stuff.gridHeader.lastEditDatetime": "갱신일시", "stuff.gridHeader.objectNo": "물건번호", "stuff.gridHeader.planTotCnt": "플랜 수", From f3f7daf9d698a0f71f5e31eb28053e9a274a0c4f Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 25 Oct 2024 15:01:25 +0900 Subject: [PATCH 3/3] feat: Add MainSkeleton --- package.json | 1 + src/components/main/MainContents.jsx | 53 +++++++++++++++------------- src/components/ui/Loading.jsx | 5 --- src/components/ui/Loading.module.css | 35 ------------------ src/components/ui/MainSkeleton.jsx | 13 +++++++ yarn.lock | 5 +++ 6 files changed, 48 insertions(+), 64 deletions(-) delete mode 100644 src/components/ui/Loading.jsx delete mode 100644 src/components/ui/Loading.module.css create mode 100644 src/components/ui/MainSkeleton.jsx diff --git a/package.json b/package.json index 303e4864..6c94a282 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react-draggable": "^4.4.6", "react-hook-form": "^7.53.0", "react-icons": "^5.3.0", + "react-loading-skeleton": "^3.5.0", "react-responsive-modal": "^6.4.2", "recoil": "^0.7.7", "sweetalert2": "^11.14.1", diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx index d2e38853..fa61b676 100644 --- a/src/components/main/MainContents.jsx +++ b/src/components/main/MainContents.jsx @@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation' import { globalLocaleStore } from '@/store/localeAtom' import { queryStringFormatter } from '@/util/common-utils' import { sessionStore } from '@/store/commonAtom' +import MainSkeleton from '../ui/MainSkeleton' export default function MainContents() { const { getMessage } = useMessage() @@ -109,30 +110,34 @@ export default function MainContents() {
-
    - {objectList.map((row) => { - return ( -
  • { - if (row.objectNo.substring(0, 1) === 'R') { - router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`) - } else { - router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`) - } - }} - > -
    - {dayjs(row.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')} - {row.objectNo} - {row.objectName} - {row.saleStoreName} -
    -
    • - ) - })} -
+ {objectList.length > 0 ? ( +
    + {objectList.map((row) => { + return ( +
  • { + if (row.objectNo.substring(0, 1) === 'R') { + router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`) + } else { + router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`) + } + }} + > +
    + {dayjs(row.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')} + {row.objectNo} + {row.objectName} + {row.saleStoreName} +
    +
    • + ) + })} +
+ ) : ( + + )}
diff --git a/src/components/ui/Loading.jsx b/src/components/ui/Loading.jsx deleted file mode 100644 index 59d2170b..00000000 --- a/src/components/ui/Loading.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import style from '@/components/ui/Loading.module.css' - -export default function Loading() { - return -} diff --git a/src/components/ui/Loading.module.css b/src/components/ui/Loading.module.css deleted file mode 100644 index 7b3001f8..00000000 --- a/src/components/ui/Loading.module.css +++ /dev/null @@ -1,35 +0,0 @@ -.loader { - position: relative; - font-size: 48px; - letter-spacing: 6px; -} -.loader:before { - content: 'Loading'; - color: #fff; -} -.loader:after { - content: ''; - width: 20px; - height: 20px; - background-color: #ff3d00; - background-image: radial-gradient(circle 2px, #fff4 100%, transparent 0), radial-gradient(circle 1px, #fff3 100%, transparent 0); - background-position: - 14px -4px, - 12px -1px; - border-radius: 50%; - position: absolute; - margin: auto; - top: -5px; - right: 66px; - transform-origin: center bottom; - animation: fillBaloon 1s ease-in-out infinite alternate; -} - -@keyframes fillBaloon { - 0% { - transform: scale(1); - } - 100% { - transform: scale(3); - } -} diff --git a/src/components/ui/MainSkeleton.jsx b/src/components/ui/MainSkeleton.jsx new file mode 100644 index 00000000..fa0a48c2 --- /dev/null +++ b/src/components/ui/MainSkeleton.jsx @@ -0,0 +1,13 @@ +import Skeleton from 'react-loading-skeleton' +import 'react-loading-skeleton/dist/skeleton.css' + +export default function MainSkeleton() { + return ( + <> +
+ +
+ + + ) +} diff --git a/yarn.lock b/yarn.lock index bf4e65b8..6e7b5f2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5884,6 +5884,11 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-loading-skeleton@^3.5.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz#da2090355b4dedcad5c53cb3f0ed364e3a76d6ca" + integrity sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ== + react-onclickoutside@^6.13.0: version "6.13.1" resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz"