[checkoutpanel] pinCode - 핀코드 에러처리 추가 / 핀코드 리듀서 추가

com.twin.app.shoptime/src/reducers/pinCodeReducer.js

@@ -0,0 +1,18 @@
+import { types } from '../actions/actionTypes';
+
+const initialState = {
+  pinCodeData: null,
+};
+
+export const pinCodeReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case types.GET_MY_INFO_CARD_PINCODE_CHECK:
+      return {
+        ...state,
+        pinCodeData: action.payload,
+      };
+
+    default:
+      return state;
+  }
+};

com.twin.app.shoptime/src/store/store.js

@@ -1,27 +1,32 @@
-import { applyMiddleware, combineReducers, createStore } from "redux";
+import {
-import thunk from "redux-thunk";
+  applyMiddleware,
+  combineReducers,
+  createStore,
+} from 'redux';
+import thunk from 'redux-thunk';
 
-import { appDataReducer } from "../reducers/appDataReducer";
+import { appDataReducer } from '../reducers/appDataReducer';
-import { billingReducer } from "../reducers/billingReducer";
+import { billingReducer } from '../reducers/billingReducer';
-import { brandReducer } from "../reducers/brandReducer";
+import { brandReducer } from '../reducers/brandReducer';
-import { cancelReducer } from "../reducers/cancelReducer";
+import { cancelReducer } from '../reducers/cancelReducer';
-import { cardReducer } from "../reducers/cardReducer";
+import { cardReducer } from '../reducers/cardReducer';
-import { checkoutReducer } from "../reducers/checkoutReducer";
+import { checkoutReducer } from '../reducers/checkoutReducer';
-import { commonReducer } from "../reducers/commonReducer";
+import { commonReducer } from '../reducers/commonReducer';
-import { couponReducer } from "../reducers/couponReducer";
+import { couponReducer } from '../reducers/couponReducer';
-import { deviceReducer } from "../reducers/deviceReducer";
+import { deviceReducer } from '../reducers/deviceReducer';
-import { eventReducer } from "../reducers/eventReducer";
+import { eventReducer } from '../reducers/eventReducer';
-import { homeReducer } from "../reducers/homeReducer";
+import { homeReducer } from '../reducers/homeReducer';
-import { localSettingsReducer } from "../reducers/localSettingsReducer";
+import { localSettingsReducer } from '../reducers/localSettingsReducer';
-import { mainReducer } from "../reducers/mainReducer";
+import { mainReducer } from '../reducers/mainReducer';
-import { myPageReducer } from "../reducers/myPageReducer";
+import { myPageReducer } from '../reducers/myPageReducer';
-import { onSaleReducer } from "../reducers/onSaleReducer";
+import { onSaleReducer } from '../reducers/onSaleReducer';
-import { orderReducer } from "../reducers/orderReducer";
+import { orderReducer } from '../reducers/orderReducer';
-import { panelsReducer } from "../reducers/panelReducer";
+import { panelsReducer } from '../reducers/panelReducer';
-import { playReducer } from "../reducers/playReducer";
+import { pinCodeReducer } from '../reducers/pinCodeReducer';
-import { productReducer } from "../reducers/productReducer";
+import { playReducer } from '../reducers/playReducer';
-import { searchReducer } from "../reducers/searchReducer";
+import { productReducer } from '../reducers/productReducer';
-import { shippingReducer } from "../reducers/shippingReducer";
+import { searchReducer } from '../reducers/searchReducer';
+import { shippingReducer } from '../reducers/shippingReducer';
 
 const rootReducer = combineReducers({
   panels: panelsReducer,
@@ -45,6 +50,7 @@ const rootReducer = combineReducers({
   play: playReducer,
   order: orderReducer,
   cancel: cancelReducer,
+  pinCode: pinCodeReducer,
 });
 
 export const store = createStore(rootReducer, applyMiddleware(thunk));

com.twin.app.shoptime/src/views/CheckOutPanel/components/PinCodeInput.jsx

@@ -4,11 +4,16 @@ import React, {
 } from 'react';
 
 import classNames from 'classnames';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
 import SpotlightContainerDecorator
   from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';
 
+import { getMyInfoCardPincodeCheck } from '../../../actions/pinCodeActions';
 import TButton from '../../../components/TButton/TButton';
 import { $L } from '../../../utils/helperMethods';
 import css from './PinCodeInput.module.less';
@@ -18,6 +23,13 @@ const PinCodeContainer = SpotlightContainerDecorator("div");
 const SpottableButton = Spottable("div");
 
 export default function PinCodeInput({ setPlaceOrderPopup }) {
+  const dispatch = useDispatch();
+
+  const pinCodeDatas = useSelector((state) => state.pinCode.pinCodeData);
+  const userNumber = useSelector(
+    (state) => state.common.appStatus.loginUserData.userNumber
+  );
+
   const [pin, setPin] = useState(["", "", "", ""]);
 
   const handleDigitClick = useCallback(
@@ -53,6 +65,15 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
     setPlaceOrderPopup(false);
   }, [setPlaceOrderPopup]);
 
+  const onClickConfirm = useCallback(() => {
+    dispatch(
+      getMyInfoCardPincodeCheck({
+        mbrNo: userNumber,
+        pinCd: pin,
+      })
+    );
+  }, [dispatch]);
+
   return (
     <PinCodeContainer className={css.pinCodeContainer}>
       <h1 className={css.pinCodeTitle}>{$L("Enter PIN CODE")}</h1>
@@ -68,6 +89,7 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
           </div>
         ))}
       </div>
+      <div className={css.errMsg}>ERROR</div>
       <div className={css.pinCodeDigits}>
         {[...Array(10).keys()].map((digit) => (
           <SpottableButton
@@ -85,7 +107,7 @@ export default function PinCodeInput({ setPlaceOrderPopup }) {
       </div>
       <div className={css.buttonContainer}>
         <TButton onClick={onClickCancel}>{$L("Cancel")}</TButton>
-        <TButton>{$L("OK")}</TButton>
+        <TButton onClick={onClickConfirm}>{$L("OK")}</TButton>
       </div>
     </PinCodeContainer>
   );

com.twin.app.shoptime/src/views/CheckOutPanel/components/PinCodeInput.module.less

@@ -41,8 +41,17 @@
     }
   }
 
+  .errMsg {
+    width: 1000px;
+    margin: 27px auto 0;
+    text-align: center;
+    color: @PRIMARY_COLOR_RED;
+    font-size: 30px;
+    line-height: 1.07;
+  }
+
   .pinCodeDigits {
-    margin: 150px auto 0;
+    margin: 63px auto 0;
     display: flex;
     justify-content: center;