--- description: globs: alwaysApply: true --- # Technical Requirements Document (TRD) ## 1. Executive Technical Summary - **프로젝트 개요** 인플루언서와 벤더사 간 수·발주, 배송, 정산, 알림을 웹 기반으로 자동화하는 통합 플랫폼. 오프라인 문서 교환 제거, 실시간 상태 관리, 파트너 매칭 기능 제공. - **핵심 기술 스택** Frontend: Vue 3 + Nuxt3, Vuetify, TypeScript Backend: CodeIgniter4 REST API + Node.js BFF DB: MySQL(RDS), Redis 캐시 배포: Docker, Kubernetes, GitHub Actions CI/CD OCR: Google Cloud Vision API 모니터링: ELK 스택, Grafana - **주요 기술 목표** 평균 응답시간 300ms 이하, 동시 5,000 사용자 처리, 가용성 99.9%, 서버 오류율 <1% - **주요 가정** - 초기 규모: 월 거래액 10억, DAU 1,000+ - 클라우드 인프라(AWS/GCP) 사용 - 외부 택배사·ERP API 연동 가능성 상시 고려 ## 2. Tech Stack | Category | Technology / Library | Reasoning (선택 이유) | | ------------------ | ------------------------------ | ----------------------------------------------------------------- | | Frontend Framework | Vue 3 + Nuxt3 | SSR/SSG 지원으로 초기 로딩 최적화, SEO 강화 | | UI Library | Vuetify | 머티리얼 디자인 기반, 빠른 UI 컴포넌트 구성 | | Language | TypeScript | 정적 타입 검사로 코드 안정성 및 가독성 확보 | | State Management | Pinia | Composition API 친화적, 러닝 커브 완만 | | HTTP Client | Axios | Promise 기반, 요청/응답 인터셉터 활용 용이 | | Backend Framework | CodeIgniter 4 | 경량 PHP 프레임워크, 빠른 개발 및 유지보수 | | API Layer (BFF) | Node.js + Express | 프론트엔드 맞춤형 API 어댑터, 비즈니스 로직 경량 분리 | | Database | MySQL (RDS) | 관계형 데이터 안정성·확장성, RDS 관리 편의성 | | Cache | Redis | 세션 관리, 빈번한 조회 데이터 캐싱으로 응답 속도 개선 | | Containerization | Docker | 환경 일관성 확보, 배포 자동화 | | Orchestration | Kubernetes | 자동 스케일링, 자가 복구, 클러스터 관리 | | CI/CD | GitHub Actions | 코드 푸시 시 빌드·테스트·배포 자동화 | | OCR | Google Cloud Vision API | 높은 정확도, 이미지→텍스트 자동 변환 | | Monitoring | ELK (Elasticsearch, Logstash, Kibana), Grafana | 로그 집계·시각화, 메트릭 모니터링 | | Authentication | JWT, OAuth2 (Google/Kakao/Naver) | 보안성 높은 인증, SNS 간편 로그인 지원 | | Real-time | WebSocket (Socket.IO) | 실시간 알림(주문 상태, 승인 결과) | | Integration | Courier API, ERP REST API | 택배사 송장 조회, 회계 시스템 자동 연동 | ## 3. System Architecture Design ### Top-Level building blocks - Frontend (Nuxt3): SSR 페이지, 컴포넌트, 인증/알림 UI - BFF (Node.js + Express): Frontend 전용 경량 API 어댑터, 실시간 채널 관리 - Backend API (CI4): 핵심 비즈니스 로직, DB CRUD, 권한 관리 - Database & Cache: MySQL RDS, Redis 캐시 서버 - External Integrations: Google Vision OCR, 택배사 API, ERP API - Monitoring & Logging: ELK 스택, Grafana 알림 ### Top-Level Component Interaction Diagram ```mermaid graph TD F[Nuxt3 Frontend] --> BFF(BFF: Node.js) BFF --> API[Backend API: CI4] API --> DB[MySQL(RDS)] API --> Cache[Redis] API --> OCR[Google Vision API] API --> Courier[택배사 API] API --> ERP[ERP API] Monitoring --> API Monitoring --> BFF ``` - Nuxt3 프론트엔드가 BFF로 요청 전달 - BFF는 세션/인증 관리 후 CI4 API 호출 - CI4 API는 MySQL/Redis, 외부 OCR·택배·ERP 연동 - ELK·Grafana로 전체 서비스 상태 모니터링 ### Code Organization & Convention **Domain-Driven Organization Strategy** - **도메인 분리**: 사용자, 주문, 배송, 정산, 매칭 등 비즈니스 도메인별 모듈 - **레이어 아키텍처**: Presentation, Application, Domain, Infrastructure - **기능 기반 모듈화**: 각 도메인 기능을 독립 패키지로 관리 - **공유 컴포넌트**: Utils, Types, 공통 미들웨어, 인터셉터 **Universal File & Folder Structure** ``` / ├── app.vue ├── assets │ ├── font │ │ ├── Inter-Medium.woff │ │ ├── NotoSansKR-Black.otf │ │ ├── NotoSansKR-Black.woff │ │ ├── NotoSansKR-Black.woff2 │ │ ├── NotoSansKR-Bold.otf │ │ ├── NotoSansKR-Bold.woff │ │ ├── NotoSansKR-Bold.woff2 │ │ ├── NotoSansKR-DemiLight.otf │ │ ├── NotoSansKR-DemiLight.woff │ │ ├── NotoSansKR-DemiLight.woff2 │ │ ├── NotoSansKR-Light.otf │ │ ├── NotoSansKR-Light.woff │ │ ├── NotoSansKR-Light.woff2 │ │ ├── NotoSansKR-Medium.otf │ │ ├── NotoSansKR-Medium.woff │ │ ├── NotoSansKR-Medium.woff2 │ │ ├── NotoSansKR-Regular.otf │ │ ├── NotoSansKR-Regular.woff │ │ ├── NotoSansKR-Regular.woff2 │ │ ├── NotoSansKR-Regular(1).woff │ │ ├── NotoSansKR-Thin.otf │ │ ├── NotoSansKR-Thin.woff │ │ └── NotoSansKR-Thin.woff2 │ ├── img │ │ ├── bg_login.svg │ │ ├── bg_otp_reg.png │ │ ├── bg_popup.svg │ │ ├── bg_tab_off.svg │ │ ├── bg_tab_on.svg │ │ ├── bg_tooltip.svg │ │ ├── bg_tooltip2.svg │ │ ├── bg_tooltip3.svg │ │ ├── bg_tooltip4.svg │ │ ├── btn_app_store.svg │ │ ├── btn_goolge_play.svg │ │ ├── btn.png │ │ ├── caution_bg.jpg │ │ ├── db_set_list01.svg │ │ ├── db_set_list02.svg │ │ ├── db_set_list03.svg │ │ ├── head_flip_btn.svg │ │ ├── ic_add.svg │ │ ├── ic_allview.svg │ │ ├── ic_arrow_right_chv.svg │ │ ├── ic_avg01.svg │ │ ├── ic_avg02.svg │ │ ├── ic_avg03.svg │ │ ├── ic_avg04.svg │ │ ├── ic_card_nodata.svg │ │ ├── ic_card_off.svg │ │ ├── ic_card_on.svg │ │ ├── ic_chv_arrow.svg │ │ ├── ic_chv.svg │ │ ├── ic_close.svg │ │ ├── ic_drop_down_on.svg │ │ ├── ic_drop_down.svg │ │ ├── ic_ds.svg │ │ ├── ic_end_close_cl.svg │ │ ├── ic_end_close_x.svg │ │ ├── ic_end_close.png │ │ ├── ic_end_close.svg │ │ ├── ic_end_red.svg │ │ ├── ic_equip01.svg │ │ ├── ic_equip02.svg │ │ ├── ic_equip03.svg │ │ ├── ic_equip04.svg │ │ ├── ic_excel_green.svg │ │ ├── ic_excel.svg │ │ ├── ic_gear.svg │ │ ├── ic_google.svg │ │ ├── ic_grid_box.png │ │ ├── ic_home_arrow.svg │ │ ├── ic_info.svg │ │ ├── ic_issue_flag.svg │ │ ├── ic_kakao.svg │ │ ├── ic_list_off.svg │ │ ├── ic_list_on.svg │ │ ├── ic_map_card.svg │ │ ├── ic_map_pin.svg │ │ ├── ic_mapt_chv.svg │ │ ├── ic_more_btn.svg │ │ ├── ic_more_plust_gray.svg │ │ ├── ic_naver.svg │ │ ├── ic_no_img.svg │ │ ├── ic_no_tree.svg │ │ ├── ic_preview_nw.svg │ │ ├── ic_radio_off.svg │ │ ├── ic_radio_on.svg │ │ ├── ic_sch_nw.svg │ │ ├── ic_sts.svg │ │ ├── ic_tab01.svg │ │ ├── ic_tab02.svg │ │ ├── ic_tab03.svg │ │ ├── ic_tab04.svg │ │ ├── ic_tack_off.svg │ │ ├── ic_tack_on.svg │ │ ├── ic_tenant_small_white.svg │ │ ├── ic_tenant_small.svg │ │ ├── ic_tenant01.svg │ │ ├── ic_tenant02.svg │ │ ├── ic_tenant03.svg │ │ ├── ic_tenant04.svg │ │ ├── ic_wifi_dis.svg │ │ ├── ic_wifi.svg │ │ ├── ic_x_btn.svg │ │ ├── ic_x_btn2.svg │ │ ├── ic_xcircle.svg │ │ ├── ico_alarm_blue.svg │ │ ├── ico_alarm_gray.svg │ │ ├── ico_alarm_green.svg │ │ ├── ico_alarm_red.svg │ │ ├── ico_alarm1.svg │ │ ├── ico_alarm2.svg │ │ ├── ico_alarm3.svg │ │ ├── ico_alarm4.svg │ │ ├── ico_all_pop.svg │ │ ├── ico_arrow_next.svg │ │ ├── ico_arrow_prev.svg │ │ ├── ico_backup1.svg │ │ ├── ico_backup2.svg │ │ ├── ico_backup3.svg │ │ ├── ico_backup4.svg │ │ ├── ico_ban.svg │ │ ├── ico_bar.svg │ │ ├── ico_black_pin.svg │ │ ├── ico_blue_pin.svg │ │ ├── ico_btn1.svg │ │ ├── ico_btn2.svg │ │ ├── ico_btn3.svg │ │ ├── ico_cal_dis.svg │ │ ├── ico_cal.svg │ │ ├── ico_calendar.svg │ │ ├── ico_cancel_disabled.svg │ │ ├── ico_cancel.svg │ │ ├── ico_cate.svg │ │ ├── ico_certify_n.svg │ │ ├── ico_certify_y.svg │ │ ├── ico_certify_y2.svg │ │ ├── ico_certify_y3.svg │ │ ├── ico_check_indeterminate.svg │ │ ├── ico_chk_circle_disabled.svg │ │ ├── ico_chk_circle.svg │ │ ├── ico_chk_off.svg │ │ ├── ico_chk_off2.svg │ │ ├── ico_chk_on.svg │ │ ├── ico_chk.svg │ │ ├── ico_close_gray.svg │ │ ├── ico_close.svg │ │ ├── ico_core_alarm1.svg │ │ ├── ico_core_alarm2.svg │ │ ├── ico_date_pic.svg │ │ ├── ico_del_disabled.svg │ │ ├── ico_del_disabled2.svg │ │ ├── ico_del.svg │ │ ├── ico_del2.svg │ │ ├── ico_download.svg │ │ ├── ico_end.svg │ │ ├── ico_equip.svg │ │ ├── ico_eraser.svg │ │ ├── ico_eraser2.svg │ │ ├── ico_error.svg │ │ ├── ico_event_pop.svg │ │ ├── ico_event_view_black.png │ │ ├── ico_event_view_black.svg │ │ ├── ico_event_view_down.svg │ │ ├── ico_event_view.svg │ │ ├── ico_excel_d.svg │ │ ├── ico_excel.svg │ │ ├── ico_excel2.svg │ │ ├── ico_eye.svg │ │ ├── ico_eye2.svg │ │ ├── ico_gray_pin.svg │ │ ├── ico_grid_sort.svg │ │ ├── ico_grid_sort2.svg │ │ ├── ico_id_off.svg │ │ ├── ico_id_on.svg │ │ ├── ico_info.svg │ │ ├── ico_lang_english.svg │ │ ├── ico_lang_korea.svg │ │ ├── ico_lang_korea2.svg │ │ ├── ico_link.svg │ │ ├── ico_list_white.svg │ │ ├── ico_list.svg │ │ ├── ico_location_arr.svg │ │ ├── ico_location_home.svg │ │ ├── ico_logo.svg │ │ ├── ico_logout.svg │ │ ├── ico_map.svg │ │ ├── ico_menu_arr.svg │ │ ├── ico_menu_arr2.svg │ │ ├── ico_menu_minus.svg │ │ ├── ico_menu_nodata.svg │ │ ├── ico_menu_plus.svg │ │ ├── ico_menu.svg │ │ ├── ico_minus.svg │ │ ├── ico_mod_disabled.svg │ │ ├── ico_mod.svg │ │ ├── ico_mod2.svg │ │ ├── ico_mode_dark.svg │ │ ├── ico_mode_white.svg │ │ ├── ico_mode_white2.svg │ │ ├── ico_ne_add.svg │ │ ├── ico_ne_del_d.svg │ │ ├── ico_ne_del.svg │ │ ├── ico_no_data_nw.svg │ │ ├── ico_no_data.svg │ │ ├── ico_no_data2.svg │ │ ├── ico_no_table_dt.svg │ │ ├── ico_not_excel.svg │ │ ├── ico_otp_step1.svg │ │ ├── ico_otp_step2.svg │ │ ├── ico_otp_step3.svg │ │ ├── ico_otp_step4.svg │ │ ├── ico_otp_step5.svg │ │ ├── ico_paging_more.svg │ │ ├── ico_paging_next.svg │ │ ├── ico_paging_next1.svg │ │ ├── ico_paging_next2.svg │ │ ├── ico_paging_prev.svg │ │ ├── ico_paging_prev1.svg │ │ ├── ico_paging_prev2.svg │ │ ├── ico_performance1.svg │ │ ├── ico_performance2.svg │ │ ├── ico_pin_off.svg │ │ ├── ico_pin_on.svg │ │ ├── ico_pip.svg │ │ ├── ico_pip2.svg │ │ ├── ico_plus.svg │ │ ├── ico_pop_close.svg │ │ ├── ico_pos.svg │ │ ├── ico_ran_arrow_gray.svg │ │ ├── ico_ran_arrow_white.svg │ │ ├── ico_red_pin.svg │ │ ├── ico_refresh_dis.svg │ │ ├── ico_refresh.svg │ │ ├── ico_reg_disabled.svg │ │ ├── ico_reg.svg │ │ ├── ico_save_disabled.svg │ │ ├── ico_save.svg │ │ ├── ico_search.svg │ │ ├── ico_set_blue.svg │ │ ├── ico_set.svg │ │ ├── ico_setting.svg │ │ ├── ico_slt.svg │ │ ├── ico_slt2.svg │ │ ├── ico_sort.svg │ │ ├── ico_square.svg │ │ ├── ico_state1.svg │ │ ├── ico_state2.svg │ │ ├── ico_state3.svg │ │ ├── ico_status1.svg │ │ ├── ico_status2.svg │ │ ├── ico_status3.svg │ │ ├── ico_step_arr.svg │ │ ├── ico_step_arr2.svg │ │ ├── ico_tenant1.svg │ │ ├── ico_tenant2.svg │ │ ├── ico_tenant3.svg │ │ ├── ico_tenant4.svg │ │ ├── ico_time_disabled.svg │ │ ├── ico_time.svg │ │ ├── ico_tit_arr.svg │ │ ├── ico_tool.svg │ │ ├── ico_trash_nw.svg │ │ ├── ico_tree_add.svg │ │ ├── ico_tree_arr.svg │ │ ├── ico_tree_save.svg │ │ ├── ico_tree1.svg │ │ ├── ico_tree2.svg │ │ ├── ico_tree3_core.svg │ │ ├── ico_tree3_ran.svg │ │ ├── ico_tree3.svg │ │ ├── ico_trend.svg │ │ ├── ico_view_del.svg │ │ ├── ico_view_list.svg │ │ ├── ico_view_list2.svg │ │ ├── ico_wifi.svg │ │ ├── ico-arrow-right.svg │ │ ├── ico-check-on.svg │ │ ├── img_mode_dark.svg │ │ ├── img_mode_white.svg │ │ ├── img_popup.svg │ │ ├── img_qr.svg │ │ ├── img_system.svg │ │ ├── inf_bg.png │ │ ├── is_disconnect.svg │ │ ├── logo_foot.svg │ │ ├── logo_foot2.svg │ │ ├── logo_login.svg │ │ ├── logo_new.svg │ │ ├── logo_sams_sds.svg │ │ ├── logo_sams.svg │ │ ├── mail_logo1.png │ │ ├── mail_logo2.png │ │ ├── map_kangwon.svg │ │ ├── pf_sample.svg │ │ ├── pin.png │ │ ├── rlt_bg.png │ │ ├── round.png │ │ └── ven_bg.png │ └── scss │ ├── default.scss │ ├── main.scss │ ├── mode-w-m.scss │ ├── roulette.scss │ ├── sample.scss │ └── style.scss ├── components │ ├── cellRenderer │ │ ├── customActionTypeTextColor.vue │ │ ├── customBackUpBtn.vue │ │ ├── customBackUpBtnR.vue │ │ ├── customButtonSms.vue │ │ ├── customHeaderText.vue │ │ ├── customInhibitSelect.vue │ │ ├── customIpConnTextColor.vue │ │ ├── customIpNotConnTextColor.vue │ │ ├── customLicenseBtn.vue │ │ ├── customLogLevelSelect.vue │ │ ├── customNullValue.vue │ │ ├── customRadio.vue │ │ ├── customResultTextDivBg.vue │ │ ├── customSessionSetTextField.vue │ │ ├── customStatusBox.vue │ │ ├── customTextColor.vue │ │ ├── customTextDivSession.vue │ │ └── customUseYNTextColor.vue │ ├── common │ │ ├── confirmDialog.vue │ │ ├── customLoading.vue │ │ ├── excelUpload.vue │ │ ├── footer │ │ │ └── eventDetailView.vue │ │ ├── footer.vue │ │ ├── header │ │ │ └── modal │ │ │ ├── myInfoUpdate.vue │ │ │ ├── passwordCheck.vue │ │ │ └── privacyPop.vue │ │ ├── header.vue │ │ ├── leftMenu.vue │ │ ├── location.vue │ │ ├── pagination.vue │ │ ├── topologyPop.vue │ │ └── topologyPopMgmt.vue │ ├── home │ │ ├── dashboard │ │ │ ├── common │ │ │ │ ├── coreDetailModal.vue │ │ │ │ ├── map │ │ │ │ │ ├── mapBusan.vue │ │ │ │ │ ├── mapChungbuk.vue │ │ │ │ │ ├── mapChungnam.vue │ │ │ │ │ ├── mapDaegu.vue │ │ │ │ │ ├── mapDaejeon.vue │ │ │ │ │ ├── mapGwangju.vue │ │ │ │ │ ├── mapGyeongbuk.vue │ │ │ │ │ ├── mapGyeonggido.vue │ │ │ │ │ ├── mapGyeongnam.vue │ │ │ │ │ ├── mapIncheon.vue │ │ │ │ │ ├── mapJeju.vue │ │ │ │ │ ├── mapJeonbuk.vue │ │ │ │ │ ├── mapJeonnam.vue │ │ │ │ │ ├── mapKangwon.vue │ │ │ │ │ ├── mapSejong.vue │ │ │ │ │ ├── mapSeoul.vue │ │ │ │ │ └── mapUlsan.vue │ │ │ │ ├── pagination.vue │ │ │ │ ├── ranCardGroupDetailModal.vue │ │ │ │ ├── ranMapGroupDetailModal.vue │ │ │ │ └── ranMapNeDetailModal.vue │ │ │ ├── layout01 │ │ │ │ ├── core │ │ │ │ │ ├── layout01Core.vue │ │ │ │ │ ├── layout01CoreWidgetM.vue │ │ │ │ │ └── layout01CoreWidgetS.vue │ │ │ │ ├── layout01.vue │ │ │ │ ├── ran │ │ │ │ │ └── layout01Ran.vue │ │ │ │ └── user │ │ │ │ ├── layout01User.vue │ │ │ │ ├── layout01UserWidgetM.vue │ │ │ │ ├── layout01UserWidgetS.vue │ │ │ │ └── layout01UserWidgetT.vue │ │ │ ├── layout02 │ │ │ │ ├── core │ │ │ │ │ ├── layout02Core.vue │ │ │ │ │ ├── layout02CoreWidgetM.vue │ │ │ │ │ └── layout02CoreWidgetS.vue │ │ │ │ ├── layout02.vue │ │ │ │ ├── ran │ │ │ │ │ └── layout02Ran.vue │ │ │ │ └── user │ │ │ │ ├── layout02User.vue │ │ │ │ ├── layout02UserWidgetM.vue │ │ │ │ ├── layout02UserWidgetS.vue │ │ │ │ └── layout02UserWidgetT.vue │ │ │ ├── layout03 │ │ │ │ ├── core │ │ │ │ │ ├── layout03Core.vue │ │ │ │ │ ├── layout03CoreWidgetM.vue │ │ │ │ │ └── layout03CoreWidgetS.vue │ │ │ │ ├── layout03.vue │ │ │ │ ├── ran │ │ │ │ │ ├── layout03Ran.vue │ │ │ │ │ └── ranMapComponent.vue │ │ │ │ └── user │ │ │ │ ├── layout03User.vue │ │ │ │ ├── layout03UserWidgetM.vue │ │ │ │ └── layout03UserWidgetS.vue │ │ │ ├── settingModal.vue │ │ │ └── test.json │ │ ├── jobNoti │ │ │ └── jobNotiModal.vue │ │ ├── tenant │ │ │ ├── chart │ │ │ │ ├── doughnut.vue │ │ │ │ ├── trendBar.vue │ │ │ │ └── userDoughnut.vue │ │ │ ├── common │ │ │ │ └── ranGroupDetailModal.vue │ │ │ ├── tenantRan.vue │ │ │ ├── tenantTrend.vue │ │ │ └── tenantUser.vue │ │ └── trend │ │ └── headerChart.vue │ ├── login │ │ └── privacyPop.vue │ ├── search │ │ └── searchModules.vue │ └── sunEdt.vue ├── composables │ ├── useApi.js │ ├── useAxios.js │ ├── useChart.js │ ├── useEnumCode.js │ ├── useEnumCodeEn.js │ ├── useEnumCodeKr.js │ ├── useErrorHandler.js │ ├── useHangul.js │ ├── useMenuConstants.js │ ├── useSunEditor.js │ ├── useToastEditor.ts │ ├── useUrlHandler.js │ ├── useUtil.js │ ├── useValid.js │ └── useWatchFocusValidate.js ├── error.vue ├── lang │ ├── en.js │ └── kr.js ├── layouts │ ├── default.vue │ ├── designdefault.vue │ ├── designloginlayout.vue │ ├── loginlayout.vue │ ├── roulette.vue │ └── samplelayout.vue ├── middleware │ └── auth.global.js ├── nuxt.config.ts ├── package-lock.json ├── package.json ├── pages │ ├── auth │ │ ├── join.vue │ │ └── popupClose.vue │ ├── index.vue │ └── view │ ├── cs │ │ ├── financial.vue │ │ └── index.vue │ ├── deli │ │ ├── index.vue │ │ ├── mngAdd.vue │ │ └── mngListDeleted.vue │ ├── item │ │ ├── add.vue │ │ ├── evtListClosed.vue │ │ ├── evtListOngoing.vue │ │ ├── evtListPending.vue │ │ └── index.vue │ ├── log │ │ └── logList.vue │ ├── order │ │ └── index.vue │ ├── settle │ │ ├── curationAdd.vue │ │ ├── curationList.vue │ │ ├── index.vue │ │ ├── irAdd.vue │ │ ├── mediaAdd.vue │ │ ├── mediaList.vue │ │ ├── newsAdd.vue │ │ └── newsList.vue │ └── vendor │ ├── dashboard │ │ └── index.vue │ └── index.vue ├── plugins │ ├── fontawesome.js │ ├── i18n.js │ ├── log.js │ ├── mitt.js │ ├── toast.js │ ├── userAgent.js │ ├── vue-cool-lightbox.js │ ├── vue3-editor.js │ └── vuetify.js ├── public │ ├── favicon.ico │ ├── ft_logo.png │ ├── js │ │ └── jquery-3.7.1.min.js │ └── logo.png ├── README.md ├── server │ └── tsconfig.json ├── stores │ ├── auth.js │ ├── detail.js │ ├── lang.js │ ├── loading.js │ └── tenantMgmt.js ├── toast-editor.d.ts ├── tsconfig.json └── vite-plugin-sri.d.ts ``` ### Data Flow & Communication Patterns - **Client-Server 통신**: RESTful API, JWT 인증 헤더, Axios 인터셉터 - **Database 상호작용**: CI4 Query Builder/Model, 트랜잭션 관리, Redis 캐시 사용 - **외부 서비스 연동**: 비동기 메시지 큐 없이 HTTP 호출, 에러 리트라이 로직 - **실시간 통신**: Socket.IO 기반 WebSocket 연결, 주문·승인 알림 - **데이터 동기화**: 캐시 무효화 패턴, 이벤트 기반 상태 업데이트 ## 4. Performance & Optimization Strategy - HTTP 응답 캐싱: Redis로 빈번 조회 데이터 캐싱 - DB 인덱싱 및 쿼리 튜닝: 주요 조회 쿼리 Explain 분석 - 코드 스플리팅·지연 로딩: Nuxt3 동적 import 활용 - 로드 밸런싱: Kubernetes HPA 기반 자동 스케일링 ## 5. Implementation Roadmap & Milestones ### Phase 1: Foundation (MVP Implementation) - Core Infrastructure: Docker/K8s 환경, CI/CD 파이프라인 - Essential Features: 로그인·회원가입, 상품 조회·발주, 주문 승인, 송장 엑셀 업로드 - Basic Security: JWT 인증, HTTPS, OAuth2 SNS 로그인 - Development Setup: 로컬 개발 환경, 코드 린팅·테스트 프레임워크 - Timeline: M+2 ### Phase 2: Feature Enhancement - Advanced Features: 정산 모듈, 파트너 매칭 시스템, 알림 센터 - Performance Optimization: 캐시 전략, DB 튜닝 - Enhanced Security: 권한 관리 강화, OWASP 점검 - Monitoring Implementation: ELK 대시보드, Grafana 알림 - Timeline: M+4 ### Phase 3: Scaling & Optimization - Scalability Implementation: HPA/Cluster Autoscaler, DB 리드 리플리카 - Advanced Integrations: ERP 연동, 다중 택배사 API 연결 - Enterprise Features: 서브계정 관리, 대시보드 - Compliance & Auditing: GDPR, 데이터 암호화 심화 - Timeline: M+6 ## 6. Risk Assessment & Mitigation Strategies ### Technical Risk Analysis - **기술 리스크**: OCR 인식률 저하 → 수동 검증 UI 제공 - **성능 리스크**: 동시 사용자 증가 시 DB 병목 → 읽기/쓰기 분리, 캐시 활용 - **보안 리스크**: 토큰 탈취 → 짧은 만료, 리프레시 토큰 설계 - **통합 리스크**: 외부 API 변경 → 버전 관리, 어댑터 패턴 적용 - **Mitigation**: 대체 흐름, 로깅·모니터링 알림, 자동 테스트 ### Project Delivery Risks - **일정 리스크**: 기능 지연 → MVP 단계별 우선순위 조정 - **자원 리스크**: 전문 인력 부족 → 외부 컨설팅·아웃소싱 검토 - **품질 리스크**: 테스트 커버리지 부족 → CI/CD 자동화 테스트 강화 - **배포 리스크**: 프로덕션 오류 → 블루/그린 배포 전략 채택 - **Contingency**: 페이즈별 핵심 기능 최소화, 백업 환경 준비 --- *본 문서는 PRD 기반 최소 기능 중심으로 설계되었으며, 차후 요구사항 변화에 따라 단계별 확장이 가능합니다.*