PROJECT HISTORY

EUNBI N.


import Image1 from '/assets/images/biz_1.png';
import Image2 from '/assets/images/biz_2.png';
import Image3 from '/assets/images/biz_3.png';

![Image3 biz_3](/assets/images/biz_3.png)
#### #1. 급여시뮬레이션
#### Code
```js
/** [급여반영] */
function openPayCreatePopup() {
    if(vm.flex.getSaveData()) return alert('수정중인 데이터가 존재합니다.');
    if(!vm.flex.getCheckedData('chk')) return alert('선택된 사원이 없습니다.');

    var checkData = vm.flex.getCheckedData('chk').checkData;
    Object.values(checkData).forEach(function(chk){
        var payList = []; //반영할 사원데이터별 지급항목 list 매칭
        Object.values(chk).forEach(function(payAmt, i){
            //지급항목2 크기만큼 name, payCd, payAmt 매칭
            for( var j=0 ; j < vm.amtData.length ; j++ ){
                if( Object.keys(chk)[i] == vm.amtData[j]['colKey']){ 
                    payList.push(
                        { 
                            'name': vm.amtData[j]['colKey'], 
                            'payCd': vm.amtData[j]['payCd'], 
                            'payAmt' : Number(payAmt) || 0
                        }
                    )
                } 
            }
        })
        chk.payList = payList;  //저장 사원데이터별 지급항목 list 주입
    })

    var param = { vm, checkData };
    PopupService.open('payCreatePopup', param)
}

```

- - -
![Image1 biz_1](/assets/images/biz_1.png)
#### #2. 전표등록
#### Code
```js
/** 그리드 - 전표데이터 Set */
vm.flexInitialized = function(sender, event) {
    var groupRow = new wijmo.grid.GroupRow();
    sender.columnFooters.rows.push(groupRow);
    sender.columnFooters.setCellData(0, 1, '합계');

    sender.excelFormatItem = function (xlsxFormatItemEventArgs) { 
        if (xlsxFormatItemEventArgs.panel.cellType == wijmo.grid.CellType.ColumnFooter) {
            var col = xlsxFormatItemEventArgs.panel.columns[xlsxFormatItemEventArgs.col];

            if (['totAmt', 'splyAmt', 'vatAmt'].indexOf(col.binding) != -1) {
                var items = vm.flex.collectionView.items, sum = 0;
                for (var i = 0; i < items.length; i++) {
                    sum += ((items[i].signTp == '2' ? -1 : 1) * items[i][col.binding]);
                }
                xlsxFormatItemEventArgs.xlsxCell.value = sum;
            }
        }
    };

    sender.itemFormatter = function(panel, r, c, cell) {
        if ( panel.cellType == wijmo.grid.CellType.ColumnFooter ) {
            var items = vm.flex.collectionView.items;
            var binding = panel.columns[c].binding;

            if (binding == 'splyAmt' || binding == 'vatAmt' || binding == 'totAmt' || binding == 'poQty') {
                var dcmTp = ''
                if (binding == 'splyAmt') dcmTp = splyDcm
                else if (binding == 'vatAmt') dcmTp = vatDcm
                else if (binding == 'totAmt') dcmTp = totDcm
                else if (binding == 'poQty') dcmTp = qtyDcm

                var convNum = $filter('number')(getSum(items, binding), dcmTp);						
                var intConvNum = Number(convNum.replace(/,/g, ''));
                var strConvNum = intConvNum.toString().replace(/\B(?=(\d{3})+(?!\d))(?<!\.\d*)/g, ',');
                cell.innerText = strConvNum;
            }
        }

        if (panel.cellType == wijmo.grid.CellType.Cell) {
            var item = panel.rows[r].dataItem;
            var binding = panel.grid.getColumn(c).binding;
            if (['signTp','poQty','splyAmt','vatAmt','totAmt'].includes(binding)) {
                cell.className += item.signTp=='2'? ' text-red' : '';
            }
        }

        function getSum(items, col){
            var result = 0;
            for(var i = 0 ; i < items.length ; i++ ) {
                result += ( ( items[i].signTp == '2' ? -1 : 1 ) * items[i][col]);
            }
            return result;
        }
    }
}


```
- - -

![Image2 biz_2](/assets/images/biz_2.png)
#### #3. 근태환경설정
#### Code
```js
/** 카카오맵 */
function initKakao() {
    kakao.maps.load(function()  {
        var kakaoMapDiv = vm.context.find('#kakaoMapDivPopup')[0];
        var latlng = new kakao.maps.LatLng(DEFAULT_GPS.LATITUDE, DEFAULT_GPS.LONGTITUDE);
        var mapOpts = { center : latlng, level : 4 } 
        var map = new kakao.maps.Map(kakaoMapDiv, mapOpts);

        //gps 위도경도,반경값이 있으면 마커,반경 표시
        if (searchAddrGps.latitude !='' && searchAddrGps.longitude  !=''){
            latlng = new kakao.maps.LatLng(searchAddrGps.latitude, searchAddrGps.longitude);
            map.setCenter(latlng);

            // 마커 표시
            var marker = new kakao.maps.Marker({
                map: map,
                position: latlng
            });
            marker.setMap(map); 
            
            //반경표시
            var circle = new kakao.maps.Circle({
                center: marker.getPosition(),
                radius: Number(searchGpsScope),
                strokeWeight: 1, // 선의 두께
                strokeColor: '#00a0e9', // 선의 색깔
                strokeOpacity: 0.1, // 선 불투명도
            });
            circle.setMap(map);
        }
    })
}

```
         
- - -
                

#### #4. API인증/통신 - 전자결재 서비스 구축  
#### Code
```java
@Component
public class ApiWorksDecryptUtil {
	/** 
	 * @param 암호화된 토큰
	 * @param ApiElecApprParam(복호화키 사용 파라미터)
	 * @return (String)복호화된 토큰
	 * */
    public String decrypt(String encodedText, ApiElecApprParam param) throws Exception {
		String secretKeyStr = generateKey("ERP" + param.getCorpCd()); 
		
        SecretKeySpec secretKey = new SecretKeySpec(secretKeyStr.getBytes("UTF-8"), "AES");
        IvParameterSpec IV = new IvParameterSpec(secretKeyStr.substring(0, 16).getBytes());
        Cipher c = Cipher.getInstance("AES/CBC/PKCS5Padding");
        c.init(Cipher.DECRYPT_MODE, secretKey, IV);
        byte[] decodeByte = Hex.decodeHex(encodedText.toCharArray());

        return new String(c.doFinal(decodeByte), "UTF-8");
    };
	
    
    /** 복호화용 키생성 (salt + 회사코드 + 시스템명) */
	 private String generateKey(String inputText) throws Exception {
        if (!StringUtils.hasText(inputText)) {
            throw new NullPointerException("inputText IS null");
        }
        return padLeftZeros(inputText.toUpperCase(), 32);
    }

	/** 키생성규칙 - 32자 padLeft zero  */
    private String padLeftZeros(String inputString, int length) {
        if (inputString.length() >= length) { return inputString; }

        StringBuilder sb = new StringBuilder();
        while (sb.length() < length - inputString.length()) {
            sb.append('0');
        }
        sb.append(inputString);
        return sb.toString();
    }
}
```
```java
@Component
@RequiredArgsConstructor
public class ApiWorksWebClientUtil {
	private final ErpServerRegService serverService;
	private final ConnectMapper ConnectMapper;
		
    /** 토큰발급 및 조회 */
    public String getToken(ApiWorksElecApprParam param) {
		
    	HttpHeaders headers = setHeaders();  
        String worksRelUrl = setWorksRel(param);
        
        WebClient webClient = WebClient
                .builder()
                .baseUrl(worksRelUrl)
                .build();

        ResponseEntity<String> responseToken = webClient.post()
                .uri("/api/getToken")
                .headers(httpHeaders -> httpHeaders.addAll(headers))
                .body(BodyInserters.fromValue(param))
                .retrieve()
                .toEntity(String.class)
                .block();

        assert responseToken != null;
        return responseToken;
    }

     String setWorksRel(ApiWorksElecApprParam param) {
		String worksRelUrl = serverService.get(null).get("Url");
    	String worksCorpCd = ConnectMapper.selectWorksCorpCd(param.getCorpCd());
    	param.setCorpCd(worksCorpCd);
        param.setMemberId("ADMIN");
		return worksRelUrl;
	}
	
	private HttpHeaders setHeaders() {
		HttpServletRequest req = getRequest();
        HttpHeaders headers = new HttpHeaders();
        headers.add("ip", ErpUtil.getIpAddress(req));
		return headers;
	}
}

```



- - -


[ SI/SM 프로젝트 ] 급여정산 파트 신규개발 및 고도화, API인증/통신 구축 

Bizbee ERP

import Image3 from '/assets/images/go_3.png';


![Image3 go_3](/assets/images/go_3.png)
   
      
#### #1. 견적서 출력 Data Setting
#### Code
```js
async function print() {
  if (!estimateHData.estimateNo)
    return sbAlert(
      `등록된 견적서만 출력 가능합니다.\n먼저 견적서를 저장해주세요.`
    )
  if (flexH.cv.itemsEdited?.length || flexD.cv?.itemsEdited.length)
    return sbAlert('수정중인 데이터가 있습니다.\n 먼저 견적서를 저장해주세요.')

  // 부품이미지 출력 선택여부, 부품번호 출력여부 선택 팝업
  const printImgData = await imagePrintChoicePopupRef.value?.open({
    fileDiv: 'ESTM10', //견적,아이템,매출 등 구분값
    corpCd: user.corpCd, // 회사코드
    estmSaleNo: estimateHData.estimateNo, // relKey2 : 견적번호
  })
  // 부품번호 출력여부 세팅
  flexD.cv.items.forEach((x: any) => {
    x.itemPrtYn = printImgData.itemPrtYn
  })

  // 출력 이미지 선택시 취소하면 출력취소
  if (printImgData === 'CANCEL') return

  // 출력물 헤더
  const { data: dataset_0 } = await queryReport('estmHeader', {
    estimateNoArray: [estimateHData.estimateNo],
  })

  // 사용자가 필터 정렬 등 변경상태 그대로 출력하기 위해 flexD.cv.items = dataset1 그대로 보냄
  const dataset_1 = flexD.cv.items

  //회사인감 이미지
  const { signUrlEnc } = await http.post(`/corpModify/query/image`)

  openReport({
    module: 'sam',
    report: 'estmReport',
    reportNm: '견적서',
    faxReceivers: [
      {
        receiverNum: dataset_0[0].faxNo ?? '',
        receiverName: dataset_0[0].custNm ?? '',
      },
    ],
    data: {
      dataset_0, // 견적서
      dataset_1, // 부품목록
      dataset_2: { signUrlEnc }, // 회사인감
      dataset_3: printImgData.checked, // 선택한 출력이미지 정보
    },
  })
}

```
- - -
#### #2. 부품주문서 디스카운트 

#### Code
```js
//할인율 적용
function calcDiscount() {
  let discountAmt: number = 0

  //할인계산방법 = 금액
  if (discountTp.value === 'amt') {
    if (flexH.ci?.splyAmt < discountRat.value)
      return sbAlert('할인금액이 공급가 보다 클 수 없습니다.')
    discountAmt = discountRat.value

    //할인계산방법 = 할인비율
  } else if (discountTp.value === 'percent') {
    if (!flexH.ci.splyAmt || flexH.ci.splyAmt === 0)
      return sbAlert('할인율을 적용하시려면 먼저 계산할 금액이 있어야 합니다.')
    if (!(discountRat.value > 0 && discountRat.value < 100))
      return sbAlert('할인율은 0 이하 100 이상일 수 없습니다.')

    // 할인금액 = 전체 공급가 합 * 할인율
    discountAmt = Math.floor(flexH.ci.splyAmt * (discountRat.value / 100))
  }
  // DC 할인 행 추가
  flexD.addRow({
    corpCd: flexH.ci.corpCd,
    estimateNo: flexH.ci.estimateNo,
    itemCd: 'DC',
    descTxt: '할인',
    estimateQty: 1,
    estimatePrc: -Math.abs(discountAmt), // - 절대값 차감
    estimateAmt: -Math.abs(discountAmt), // - 절대값 차감
    descYn: false,
    delYn: false,
  })
}

```
- - -
#### #3. 매출전표 생성 전 유효성검사

#### Code
```js
async function createSaleH() {
  const { ci } = flexH
  const { items } = flexD.cv

  if (!ci?.estimateNo) return sbAlert('먼저 신규 견적서를 등록해 주세요.')
  if (items.length === 0) return sbAlert('먼저 견적내역을 작성해 주세요.')
  if (flexH.hasChangeData() || flexD.hasChangeData())
    return sbAlert('매출전표를 생성하시려면 먼저 변경 사항을 저장해 주세요.')

  // 매출생성시 매입처구분,매입단가 required
  let validMsg: string = ''
  items.forEach(item => {
    if (item.descYn === true) return 
    if (!item.supplyerTp)
      validMsg = '매출전표 생성시 매입처구분은 필수입력 입니다.'
  })
  if (validMsg !== '') return sbAlert(validMsg)

  const saveData = {
    estimateNo: ci.estimateNo,
    saleTp: '20',
  }
  if (await sbConfirm('매출전표를 생성 하시겠습니까?')) {
    await http.post('/estmReg/createSaleH', saveData)
    sbAlert('생성 되었습니다.')
    query()
  }
}

```
- - -


[ SI 프로젝트 ] 해외 자동차부품 수출 프로그램 

Goparts ERP

import Image1 from '/assets/images/meta_1.svg';
import Image2 from '/assets/images/meta_2.svg';
import Image3 from '/assets/images/meta_3.svg';
import Image4 from '/assets/images/meta_4.svg';
import Image5 from '/assets/images/meta_5.svg';
import Image6 from '/assets/images/meta_6.svg';
import Image7 from '/assets/images/meta_7.svg';
import Image10 from '/assets/images/meta_10.svg';


#### Description
- IPCC 실시간 대용량서버통신 개선 위해 코드퀄리티 UP 
- 상담사/관리자 권한 및 웹/모바일 환경에 따른 라우터 화면 이동방식 구현

![Image1 meta_1](/assets/images/meta_1.svg) |![Image2 meta_2](/assets/images/meta_2.svg)
 --- | --- | 
#### #1. 모바일 로그인 / 권한관리

#### Code
```js
/** 로그인 처리 **/
const _loginHandler = async () => {
  const userId = <string>username.value
  const userPs = <string>password.value
  try {

    const tmp = userId.split('@');
    if (tmp.length < 2 || tmp[1] === "") {
      await modalStore.show('Alert','프로젝트 코드를 입력해주세요.<br/>예) 사용자ID@프로젝트코드')
      return
    }

    // 로그인 요청
    const res = await authStore.login(userId, userPs, useSoft.value)
    const result = res.code
    if (result === 'OK') {
      // 로그인 성공
      if (useSoft.value) {
        const connected = await softphoneStore.open()
        if (connected) {
          softphoneStore.emit('login', {
            userid: userId.split('@')[0],
            mode: 'Outbound',
          })
        } else {
          await modalStore.show('Alert','연결에 실패하였습니다.<br/>잠시 후 다시 시도해주세요.',)
        }
      } else {
        await _loginCallback()
      }
    } else if (result === 'PWD_LOCK') {
      // 비밀번호 5회 불일치 잠금
      await modalStore.show('Alert',`비밀번호 입력 오류로 인해<br/><span style="color: red;">로그인이 5회 실패하였습니다.</span><br/>회원님의 정보 보호를 위해<br/>5분간 접속 차단이 됩니다.`,)
    } else if (result === 'NOTFOUND') {
      // 계정 없음
      await modalStore.show('Alert', '계정을 찾을 수 없습니다.')
    } else if (result === 'DUPLICATE') {
      // 중복 로그인
      await modalStore.show('Alert', '중복로그인 입니다.')
    } else if (result === 'WRONG') {
      // 비밀번호 불일치
      const checkData = res.data.value.split('_')
      const count = checkData[0]
      const total = checkData[1]
      await modalStore.show('Alert', `비밀번호가 일치하지 않습니다.<br/><span style="color: red;">로그인이 ${count}회 실패하였습니다.</span><br/>비밀번호 ${total}회 오류시 5분간 접속이 차단됩니다`)
    } else if (result === 'PWDCHG') {
      // 비밀번호 변경 90일 경과
      popupTitleMessage.value = '비밀번호 변경 안내'
      await modalStore.show('Alert',`비밀번호 변경 후 <span style="color:red">90일이 경과</span>하였습니다.<br>비밀번호를 변경하세요.`)
      _showChangePw(true)
    } else if (result === 'PWDINIT') {
      // 초기 비밀번호 popup
      popupTitleMessage.value = '초기 비밀번호 변경'
      _showChangePw(true)
    } else {
      await modalStore.show('Alert', '처리 중 오류가 발생하였습니다.')
    }
  } catch (error) {
    await modalStore.show('Alert', '처리 중 오류가 발생하였습니다.')
    return error
  }
}

```
- - -
  



![Image3 meta_3](/assets/images/meta_3.svg) |![Image4 meta_4](/assets/images/meta_4.svg) |![Image5 meta_5](/assets/images/meta_5.svg)
 --- | --- | --- | 
#### #2. 실시간 대시보드/ 사이트별 통계

#### Code
```js
/** @function 대시보드데이터조회 */
const _srchDashBoard = async () => {
  //조회기준: 현재날짜-현재날짜
  const cdate = stringUtil.formatDateStr(params.value.cdate)

  //실시간모니터링(대시보드) 조회
  const dashRslt = await dashBoardStore.getRealTime(cdate)

  if(dashRslt.code === 'OK'){
    totData.value = {...dashRslt.data}
  }
  //미처리건수조회
  const alrtRslt1 = await dashBoardStore.getAlertList('00', cdate) //미열람개수 알림리스트
  if(alrtRslt1.code === 'OK'){
    totData.value.unPrcsCnt = alrtRslt1.list.length //미처리건수
  }

  _setData(totData.value) 
  
}
```

- - -
  


![Image6 meta_6](/assets/images/meta_6.svg) |![Image7 meta_7](/assets/images/meta_7.svg) 
 --- | --- | 

#### #3. 업무이관/상세조회/처리하기

#### Code
```js
/** @function 상세조회 */
const _onSelected = async (array: any) => {
  detail.value.siteCd = array.siteCd
  detail.value.trId = array.trId

  //업무이관상세조회(A_TRANS_002)
  const rslt = await transStore.info(params.value.projCd, detail.value.siteCd, detail.value.trId)
  if(rslt === null) return
    detail.value = rslt.info
    historyReq.value = _.cloneDeep(rslt.info) //처리이력
    detail.value.phone = stringUtil.formatPhone(detail.value.phone)
    
    prcsInfo.value.length = rslt.processInfo.length
    rslt.processInfo.forEach((r:any, i:number)=> {
      prcsInfo.value[rslt.processInfo.length-1-i] = r //순서 오름차순 정렬
    })
    await _getAuthUser('res', rslt.info.resTeamCd) // 처리정보 담당팀에 따른 담당자 목록 바인딩
    
    files.value = rslt.fileInfo //파일정보(SavesAll)
    fileInfo.value = files.value //파일정보(Ref)
    //파일업로드 용량 카운트
    for (const file of fileInfo.value) {
      file.size = parseInt(file.fileSize)
      fileSizes.value += file.size || 0
    }

    _setMaskYn(detail)
    if(detail.value.trGb){
      //공통코드조회(A_CMMNCD_003)
      const rslt2 = await codeStore.fetchCodesList(detail.value.trGb, '') //이관구분
      if (rslt2.code === 'OK') {
        cmCdDTrType.value = rslt2.list
      }
    }
    //티켓정보조회(A_TICKET_004)
    if(!!detail.value.callSeq){
      ticketInfoYn.value = true
      const rslt3 = await ticketStore.fetchTicketHistory({
        gb: '01',
        projCd: detail.value.projCd,
        siteCd: detail.value.siteCd,
        callSeq: detail.value.callSeq,
        custId: detail.value.custId,
        sdate: params.value.sdateStr,
        edate: params.value.edateStr,
      })
    }
    _getCounsArr(detail.value.siteCd) //티켓유형조회

    _init()

    //라우터이동박식으로 직접접근시 params_detail={}조작을 방지, 접근제한 체크(처리자=본인)
    noAuthAccess.value = userStore.user.userId !== array.resUserId 
}
```
- - -
 



![Image10 meta_10](/assets/images/meta_10.svg)
#### #4. 설문조사 - 카카오인앱연동

#### Code
```js

/** 단답형질문에 대한 선택지 선택 */
const fnSelect = (item: any, index: number, aIndex?:number) => {
  //해당질문이 하위섹션유형이 아니고 && 객관식단답형이면
  if (item.sectionYn == 'N' && item.answType == '01' && aIndex !== undefined){
    // 1. 이전에 답변 체크한 값에 따른 하위섹션이 있었는지 체크 (추가된 목록 제거)
    const { aNo } = item
    if (aNo != 0 && item.list[aNo-1].sectionValue != ''){
      const findSubQue = mainQuests.value.find((x:any) => x.qNo === item.list[aNo-1].sectionValue )
      if (findSubQue) {
        mainQuests.value.splice(index, 1)
        --page.value
      }
    }
    // 2. 선택한 해당답변이 연결된 하위섹션이동이 있으면 추가
    if(item.list[aIndex].sectionValue != ''){
      const findSubQue = subQuests.value.find((x:any) => x.qNo === item.list[aIndex].sectionValue )
      if (findSubQue) {
        //순차적 다음질문 이전에 하위섹션먼저 추가
        mainQuests.value.splice(index, 0, findSubQue)
        ++page.value
      }
    } 
  }

  //다음 문항으로
  fnNext(index)
}

/** 설문종료 */
const closeSubmit = () => {
  if(isMobile()){
    const userAgent = window.navigator.userAgent.toLocaleLowerCase()
    // kakaoTalk 인앱 브라우저에서 설문조사 띄웠을경우
    if (userAgent.indexOf("kakaotalk") > -1) {
      // IOS vs Android 에 따른 종료 명령 
      window.location.href = (/iPad|iPhone|iPod/.test(userAgent)) ? "kakaoweb://closeBrowser" : "kakaotalk://inappbrowser/close";
    }
  } else {
    // 웹에서 띄웠을 경우 
    window.open("about:blank","_self")?.close()
  }
}
```

[ SI 프로젝트 ] 콜센터 실시간대응 프로그램 

MetaHub program


import Image1 from '/assets/images/dpost_app_1.png';
import Image2 from '/assets/images/dpost_app_2.png';

---

![Image1 dpost_app_1](/assets/images/dpost_app_1.png)

---

![Image2 dpost_app_2](/assets/images/dpost_app_2.png)

---


디포스트 웹을 감싼 형태의 웹앱 개발 및 업데이트 관리

DPOST_APP

import Image1 from '/assets/images/dpost_1.png';
import Image2 from '/assets/images/dpost_2.png';
import Image3 from '/assets/images/dpost_3.png';

![Image3 dpost_3](/assets/images/dpost_3.png)

![Image2 dpost_2](/assets/images/dpost_2.png)

![Image1 dpost_1](/assets/images/dpost_1.png)

---

```js

<template>
  <section>
    
    <SenderQuick
      :disableStatus="props.disableStatus"
      :quickAllowed="quickAllowed"
      :activeTab="activeTab"
      @cancelNewOrder="emits('cancelNewOrder', $event)"
      @updateOriginAddress="isChangedOriginAddress = $event"
    />
    
    <ReceiverQuick
      :disableStatus="props.disableStatus"
      :activeTab="activeTab"
    />
    
    <ItemQuick
      v-if="props.receptionTimes!.length"
      :disableStatus="props.disableStatus"
      :receptionTimes="props.receptionTimes"
      :activeTab="activeTab"
    />
    <OutboundPolicy
      v-if="isMobile"
      id="policy"
      outboundType="quick"
      :status="getCurrentOrder.orderInfomation.policyItem"
      :disableStatus="props.disableStatus"
      @update="emits('updateItemPolicy', $event)"
      @openPolicy="emits('openPolicy')"
    />
    
    <ItemDeliveryMethod
      :isPickupServiceAvailable="props.isPickupServiceAvailable"
      :isChangedOriginAddress="isChangedOriginAddress"
      :pickupServiceTimes="props.pickupServiceTimes"
      :isNotAllowedTime="props.disableStatus"
      :isValidateFailRequired="isValidateDeliveryMethod()"
      @updateDeliveryMethod="updateCustomerDropOffMethod"
      @updatePickupReserveTime="updateOnsitePickupRequestedAt"
      @updatePickupComment="updateOnsitePickupClientComment"
    />
  </section>
</template>

<script lang="ts" setup>
import { onMounted, PropType, watch, computed, ref, onUnmounted } from 'vue';
import SenderQuick from './quick/Sender.vue';
import ReceiverQuick from './quick/Receiver.vue';
import ItemQuick from './quick/Item.vue';
import ItemDeliveryMethod from './quick/ItemDeliveryMethodQuick.vue';
import OutboundPolicy from '@/components/ui/outbound/OutboundPolicy.vue';
import useQuick from '@/lib/outbound/useQuick';
import PQueue from 'p-queue';
import { useStore } from 'vuex';

const props = defineProps({
  disableStatus: { type: Boolean, required: true },
  quickAllowed: {
    type: Object as PropType<{ center: Boolean; anywhere: Boolean }>,
  },
  receptionTimes: {
    type: Array as PropType<api.center.serviceState.timeType[]>,
  },
  activeTab: { type: String },
  pickupServiceTimes: {
    type: Array as PropType<api.center.serviceState.timeType[]>,
  },
  isPickupServiceAvailable: { type: Boolean, required: true },
});
const isMobile = ref<boolean>(window.innerWidth <= 540);
const emits = defineEmits(['cancelNewOrder', 'openPolicy', 'updateItemPolicy', 'updateDeliveryMethod']);
const {
  updateOrderInfomation,
  quickItem,
  quickFreightItem,
  quickOrderInfomation,
  chargeFee,
  chargeFreightFee,
  getCurrentOrder,
} = useQuick();
const store = useStore();
const isChangedOriginAddress = ref<boolean>(false);
/**
 * 퀵 요금을 계산합니다.
 */
const calculateQuickFee = () => {
  const queue = new PQueue({ concurrency: 1 });
  const weight = computed(() => quickItem.value.weight);
  const isRoundTrip = computed(() => quickOrderInfomation.value.isRoundTrip);
  const reservedPickupTime = computed(() => quickOrderInfomation.value.pickupTime);
  const isReserved = computed(() => quickOrderInfomation.value.isReserved);
  const isExpressQuick = computed(() => quickOrderInfomation.value.isExpressQuick);
  const freightCategory = computed(() => quickFreightItem.value.freightCategory);
  const freightType = computed(() => quickFreightItem.value.freightType);
  const loadPosition = computed(() => quickFreightItem.value.loadPosition);
  const loadMethod = computed(() => quickFreightItem.value.loadMethod);
  const unloadPosition = computed(() => quickFreightItem.value.unloadPosition);
  const unloadMethod = computed(() => quickFreightItem.value.unloadMethod);

  watch(
    [
      weight,
      isRoundTrip,
      reservedPickupTime,
      isReserved,
      isExpressQuick,
      freightCategory,
      freightType,
      loadPosition,
      loadMethod,
      unloadPosition,
      unloadMethod,
    ],
    async () => {
      queue.clear();
      // 요금 초기화 후 계산을 시작합니다.
      await queue.add(async () => {
        props.activeTab === 'bike' ? await chargeFee() : await chargeFreightFee();
      });
    }
  );
};
const handleResize = () => {
  isMobile.value = window.innerWidth <= 540;
};

const isValidateDeliveryMethod = () => {
  return store.getters['outboundQuick/getValidateInfo']().customerDropOffMethod;
};
const updateCustomerDropOffMethod = (method: outbound.itemDeliveryMethod) => {
  updateOrderInfomation('customerDropOffMethod', method);
  emits('updateDeliveryMethod', method);
};
const updateOnsitePickupRequestedAt = (reserveDateTime: string) => {
  updateOrderInfomation('onsitePickupRequestedAt', reserveDateTime);
};
const updateOnsitePickupClientComment = (comment: string) => {
  updateOrderInfomation('onsitePickupClientComment', comment);
};

onMounted(() => {
  calculateQuickFee(); // 퀵 요금계산 watch
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>


```

[ 유지보수 / 신규기능 개발 ] 웹/모바일 반응형 + 백오피스 관제 서비스 

DPOST


<div
  style={{
    display: 'grid',
    gridTemplateColumns: '1fr 1fr 1fr 1fr',
    gap: '1rem',
  }}
>
  <img src="/assets/images/ait_1.jpg" alt="Image1" style={{ width: '100%' }} />
  <img src="/assets/images/ait_2.jpg" alt="Image2" style={{ width: '100%' }} />
  <img src="/assets/images/ait_3.jpg" alt="Image3" style={{ width: '100%' }} />
  <img src="/assets/images/ait_4.jpg" alt="Image4" style={{ width: '100%' }} />
  <img src="/assets/images/ait_5.jpg" alt="Image5" style={{ width: '100%' }} />
  <img src="/assets/images/ait_6.jpg" alt="Image6" style={{ width: '100%' }} />
  <img src="/assets/images/ait_7.jpg" alt="Image7" style={{ width: '100%' }} />
  <img src="/assets/images/ait_8.jpg" alt="Image8" style={{ width: '100%' }} />
</div>

```js

function App() {
  const [page, setPage] = useState('intro');
  const [category, setCategory] = useState<string>('');
  const [detail, setDetail] = useState<string>('');
  const [destination, setDestination] = useState<{ name: string; phone: string; address: string; detail: string }>({
    name: '',
    phone: '',
    address: '',
    detail: '',
  });
  const [origin, setOrigin] = useState<string>('');
  const [openModalReceipt, setOpenModalReceipt] = useState<boolean>(false);
  return (
    <div>
      {page === 'intro' && <Intro onNext={() => setPage('selectCategory')} />}
      {page === 'selectCategory' && (
        <SelectCategory
          onNext={(category) => {
            setCategory(category);
            setPage('selectDetail');
          }}
          onBack={() => setPage('intro')}
        />
      )}
      {page === 'selectDetail' && (
        <SelectDetail
          category={category}
          onNext={(selectedDetail) => {
            setDetail(selectedDetail);
            setPage('destination');
          }}
          onBack={() => setPage('selectCategory')}
        />
      )}
      {page === 'destination' && (
        <Destination
          onNext={(destinationName, destinationPhone, destinationAddress, destinationDetail) => {
            setDestination({
              name: destinationName,
              phone: destinationPhone,
              address: destinationAddress,
              detail: destinationDetail,
            });
            setPage('origin');
          }}
          onBack={() => setPage('selectDetail')}
        />
      )}
      {page === 'origin' && (
        <Origin
          onNext={() => setOpenModalReceipt(true)}
          onBack={() => setPage('destination')}
        />
      )}
      {openModalReceipt && (
        <ReceiptModal
          onClose={() => setOpenModalReceipt(false)}
          onNext={() => {
            setPage('complete');
            setOpenModalReceipt(false);
          }}
        />
      )}
      {page === 'complete' && <Complete />}
    </div>
  );
}

```

---


[ 신규 앱개발 ] 토스디자인시스템 이용한 빠른 앱개발 

App in TOSS


<div>
  <img src="/assets/images/aicc_1.png" alt="Image1" style={{ width: '100%' }} />
</div>

```js
import { Layout, Menu } from 'antd';
import { MENU_LIST } from '@/shared/constants/menu';
import { useState } from 'react';
import { ShipperList } from '@/features/tabs/ShipperList';
import { OrderList } from '@/features/tabs/OrderList';
import { PinList } from '@/features/tabs/PinList';
const { Header, Content } = Layout;

const menus = Array.from({ length: 3 }).map((_, index) => ({
  key: index + 1,
  label: MENU_LIST[index],
}));
export const MainPage = () => {
  const [selectedMenu, setSelectedMenu] = useState < number > 1;
  const handleMenuClick = (key: number) => {
    setSelectedMenu(key);
  };
  return (
    <Layout
      style={{
        width: '100%',
        height: '100vh',
        backgroundColor: '#f0f0f0',
      }}
    >
      <div className="w-full h-[0px] bg-[#fafafa]" />
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
          width: '100%',
          height: 48,
          padding: '0',
        }}
      >
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['1']}
          items={menus}
          onClick={(info) => handleMenuClick(Number(info.key))}
          style={{ height: 48, maxHeight: 48, flex: 1, alignItems: 'center' }}
          className="[&_.ant-menu-item]:!leading-[48px]"
        />
      </Header>
      <Content
        style={{
          display: 'flex',
          padding: '10px 10px',
          width: '100%',
          height: '100%',
          minHeight: '934px',
        }}
      >
        {selectedMenu === 1 && <OrderList />}
        {selectedMenu === 2 && <ShipperList />}
        {selectedMenu === 3 && <PinList />}
      </Content>
    </Layout>
  );
};
```

---


AICC 콜센터 - 관리자용 주문 관제 서비스