vooster__architecture.mdc 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  1. ---
  2. description:
  3. globs:
  4. alwaysApply: true
  5. ---
  6. # Technical Requirements Document (TRD)
  7. ## 1. Executive Technical Summary
  8. - **프로젝트 개요**
  9. 인플루언서와 벤더사 간 수·발주, 배송, 정산, 알림을 웹 기반으로 자동화하는 통합 플랫폼. 오프라인 문서 교환 제거, 실시간 상태 관리, 파트너 매칭 기능 제공.
  10. - **핵심 기술 스택**
  11. Frontend: Vue 3 + Nuxt3, Vuetify, TypeScript
  12. Backend: CodeIgniter4 REST API + Node.js BFF
  13. DB: MySQL(RDS), Redis 캐시
  14. 배포: Docker, Kubernetes, GitHub Actions CI/CD
  15. OCR: Google Cloud Vision API
  16. 모니터링: ELK 스택, Grafana
  17. - **주요 기술 목표**
  18. 평균 응답시간 300ms 이하, 동시 5,000 사용자 처리, 가용성 99.9%, 서버 오류율 <1%
  19. - **주요 가정**
  20. - 초기 규모: 월 거래액 10억, DAU 1,000+
  21. - 클라우드 인프라(AWS/GCP) 사용
  22. - 외부 택배사·ERP API 연동 가능성 상시 고려
  23. ## 2. Tech Stack
  24. | Category | Technology / Library | Reasoning (선택 이유) |
  25. | ------------------ | ------------------------------ | ----------------------------------------------------------------- |
  26. | Frontend Framework | Vue 3 + Nuxt3 | SSR/SSG 지원으로 초기 로딩 최적화, SEO 강화 |
  27. | UI Library | Vuetify | 머티리얼 디자인 기반, 빠른 UI 컴포넌트 구성 |
  28. | Language | TypeScript | 정적 타입 검사로 코드 안정성 및 가독성 확보 |
  29. | State Management | Pinia | Composition API 친화적, 러닝 커브 완만 |
  30. | HTTP Client | Axios | Promise 기반, 요청/응답 인터셉터 활용 용이 |
  31. | Backend Framework | CodeIgniter 4 | 경량 PHP 프레임워크, 빠른 개발 및 유지보수 |
  32. | API Layer (BFF) | Node.js + Express | 프론트엔드 맞춤형 API 어댑터, 비즈니스 로직 경량 분리 |
  33. | Database | MySQL (RDS) | 관계형 데이터 안정성·확장성, RDS 관리 편의성 |
  34. | Cache | Redis | 세션 관리, 빈번한 조회 데이터 캐싱으로 응답 속도 개선 |
  35. | Containerization | Docker | 환경 일관성 확보, 배포 자동화 |
  36. | Orchestration | Kubernetes | 자동 스케일링, 자가 복구, 클러스터 관리 |
  37. | CI/CD | GitHub Actions | 코드 푸시 시 빌드·테스트·배포 자동화 |
  38. | OCR | Google Cloud Vision API | 높은 정확도, 이미지→텍스트 자동 변환 |
  39. | Monitoring | ELK (Elasticsearch, Logstash, Kibana), Grafana | 로그 집계·시각화, 메트릭 모니터링 |
  40. | Authentication | JWT, OAuth2 (Google/Kakao/Naver) | 보안성 높은 인증, SNS 간편 로그인 지원 |
  41. | Real-time | WebSocket (Socket.IO) | 실시간 알림(주문 상태, 승인 결과) |
  42. | Integration | Courier API, ERP REST API | 택배사 송장 조회, 회계 시스템 자동 연동 |
  43. ## 3. System Architecture Design
  44. ### Top-Level building blocks
  45. - Frontend (Nuxt3): SSR 페이지, 컴포넌트, 인증/알림 UI
  46. - BFF (Node.js + Express): Frontend 전용 경량 API 어댑터, 실시간 채널 관리
  47. - Backend API (CI4): 핵심 비즈니스 로직, DB CRUD, 권한 관리
  48. - Database & Cache: MySQL RDS, Redis 캐시 서버
  49. - External Integrations: Google Vision OCR, 택배사 API, ERP API
  50. - Monitoring & Logging: ELK 스택, Grafana 알림
  51. ### Top-Level Component Interaction Diagram
  52. ```mermaid
  53. graph TD
  54. F[Nuxt3 Frontend] --> BFF(BFF: Node.js)
  55. BFF --> API[Backend API: CI4]
  56. API --> DB[MySQL(RDS)]
  57. API --> Cache[Redis]
  58. API --> OCR[Google Vision API]
  59. API --> Courier[택배사 API]
  60. API --> ERP[ERP API]
  61. Monitoring --> API
  62. Monitoring --> BFF
  63. ```
  64. - Nuxt3 프론트엔드가 BFF로 요청 전달
  65. - BFF는 세션/인증 관리 후 CI4 API 호출
  66. - CI4 API는 MySQL/Redis, 외부 OCR·택배·ERP 연동
  67. - ELK·Grafana로 전체 서비스 상태 모니터링
  68. ### Code Organization & Convention
  69. **Domain-Driven Organization Strategy**
  70. - **도메인 분리**: 사용자, 주문, 배송, 정산, 매칭 등 비즈니스 도메인별 모듈
  71. - **레이어 아키텍처**: Presentation, Application, Domain, Infrastructure
  72. - **기능 기반 모듈화**: 각 도메인 기능을 독립 패키지로 관리
  73. - **공유 컴포넌트**: Utils, Types, 공통 미들웨어, 인터셉터
  74. **Universal File & Folder Structure**
  75. ```
  76. /
  77. ├── app.vue
  78. ├── assets
  79. │ ├── font
  80. │ │ ├── Inter-Medium.woff
  81. │ │ ├── NotoSansKR-Black.otf
  82. │ │ ├── NotoSansKR-Black.woff
  83. │ │ ├── NotoSansKR-Black.woff2
  84. │ │ ├── NotoSansKR-Bold.otf
  85. │ │ ├── NotoSansKR-Bold.woff
  86. │ │ ├── NotoSansKR-Bold.woff2
  87. │ │ ├── NotoSansKR-DemiLight.otf
  88. │ │ ├── NotoSansKR-DemiLight.woff
  89. │ │ ├── NotoSansKR-DemiLight.woff2
  90. │ │ ├── NotoSansKR-Light.otf
  91. │ │ ├── NotoSansKR-Light.woff
  92. │ │ ├── NotoSansKR-Light.woff2
  93. │ │ ├── NotoSansKR-Medium.otf
  94. │ │ ├── NotoSansKR-Medium.woff
  95. │ │ ├── NotoSansKR-Medium.woff2
  96. │ │ ├── NotoSansKR-Regular.otf
  97. │ │ ├── NotoSansKR-Regular.woff
  98. │ │ ├── NotoSansKR-Regular.woff2
  99. │ │ ├── NotoSansKR-Regular(1).woff
  100. │ │ ├── NotoSansKR-Thin.otf
  101. │ │ ├── NotoSansKR-Thin.woff
  102. │ │ └── NotoSansKR-Thin.woff2
  103. │ ├── img
  104. │ │ ├── bg_login.svg
  105. │ │ ├── bg_otp_reg.png
  106. │ │ ├── bg_popup.svg
  107. │ │ ├── bg_tab_off.svg
  108. │ │ ├── bg_tab_on.svg
  109. │ │ ├── bg_tooltip.svg
  110. │ │ ├── bg_tooltip2.svg
  111. │ │ ├── bg_tooltip3.svg
  112. │ │ ├── bg_tooltip4.svg
  113. │ │ ├── btn_app_store.svg
  114. │ │ ├── btn_goolge_play.svg
  115. │ │ ├── btn.png
  116. │ │ ├── caution_bg.jpg
  117. │ │ ├── db_set_list01.svg
  118. │ │ ├── db_set_list02.svg
  119. │ │ ├── db_set_list03.svg
  120. │ │ ├── head_flip_btn.svg
  121. │ │ ├── ic_add.svg
  122. │ │ ├── ic_allview.svg
  123. │ │ ├── ic_arrow_right_chv.svg
  124. │ │ ├── ic_avg01.svg
  125. │ │ ├── ic_avg02.svg
  126. │ │ ├── ic_avg03.svg
  127. │ │ ├── ic_avg04.svg
  128. │ │ ├── ic_card_nodata.svg
  129. │ │ ├── ic_card_off.svg
  130. │ │ ├── ic_card_on.svg
  131. │ │ ├── ic_chv_arrow.svg
  132. │ │ ├── ic_chv.svg
  133. │ │ ├── ic_close.svg
  134. │ │ ├── ic_drop_down_on.svg
  135. │ │ ├── ic_drop_down.svg
  136. │ │ ├── ic_ds.svg
  137. │ │ ├── ic_end_close_cl.svg
  138. │ │ ├── ic_end_close_x.svg
  139. │ │ ├── ic_end_close.png
  140. │ │ ├── ic_end_close.svg
  141. │ │ ├── ic_end_red.svg
  142. │ │ ├── ic_equip01.svg
  143. │ │ ├── ic_equip02.svg
  144. │ │ ├── ic_equip03.svg
  145. │ │ ├── ic_equip04.svg
  146. │ │ ├── ic_excel_green.svg
  147. │ │ ├── ic_excel.svg
  148. │ │ ├── ic_gear.svg
  149. │ │ ├── ic_google.svg
  150. │ │ ├── ic_grid_box.png
  151. │ │ ├── ic_home_arrow.svg
  152. │ │ ├── ic_info.svg
  153. │ │ ├── ic_issue_flag.svg
  154. │ │ ├── ic_kakao.svg
  155. │ │ ├── ic_list_off.svg
  156. │ │ ├── ic_list_on.svg
  157. │ │ ├── ic_map_card.svg
  158. │ │ ├── ic_map_pin.svg
  159. │ │ ├── ic_mapt_chv.svg
  160. │ │ ├── ic_more_btn.svg
  161. │ │ ├── ic_more_plust_gray.svg
  162. │ │ ├── ic_naver.svg
  163. │ │ ├── ic_no_img.svg
  164. │ │ ├── ic_no_tree.svg
  165. │ │ ├── ic_preview_nw.svg
  166. │ │ ├── ic_radio_off.svg
  167. │ │ ├── ic_radio_on.svg
  168. │ │ ├── ic_sch_nw.svg
  169. │ │ ├── ic_sts.svg
  170. │ │ ├── ic_tab01.svg
  171. │ │ ├── ic_tab02.svg
  172. │ │ ├── ic_tab03.svg
  173. │ │ ├── ic_tab04.svg
  174. │ │ ├── ic_tack_off.svg
  175. │ │ ├── ic_tack_on.svg
  176. │ │ ├── ic_tenant_small_white.svg
  177. │ │ ├── ic_tenant_small.svg
  178. │ │ ├── ic_tenant01.svg
  179. │ │ ├── ic_tenant02.svg
  180. │ │ ├── ic_tenant03.svg
  181. │ │ ├── ic_tenant04.svg
  182. │ │ ├── ic_wifi_dis.svg
  183. │ │ ├── ic_wifi.svg
  184. │ │ ├── ic_x_btn.svg
  185. │ │ ├── ic_x_btn2.svg
  186. │ │ ├── ic_xcircle.svg
  187. │ │ ├── ico_alarm_blue.svg
  188. │ │ ├── ico_alarm_gray.svg
  189. │ │ ├── ico_alarm_green.svg
  190. │ │ ├── ico_alarm_red.svg
  191. │ │ ├── ico_alarm1.svg
  192. │ │ ├── ico_alarm2.svg
  193. │ │ ├── ico_alarm3.svg
  194. │ │ ├── ico_alarm4.svg
  195. │ │ ├── ico_all_pop.svg
  196. │ │ ├── ico_arrow_next.svg
  197. │ │ ├── ico_arrow_prev.svg
  198. │ │ ├── ico_backup1.svg
  199. │ │ ├── ico_backup2.svg
  200. │ │ ├── ico_backup3.svg
  201. │ │ ├── ico_backup4.svg
  202. │ │ ├── ico_ban.svg
  203. │ │ ├── ico_bar.svg
  204. │ │ ├── ico_black_pin.svg
  205. │ │ ├── ico_blue_pin.svg
  206. │ │ ├── ico_btn1.svg
  207. │ │ ├── ico_btn2.svg
  208. │ │ ├── ico_btn3.svg
  209. │ │ ├── ico_cal_dis.svg
  210. │ │ ├── ico_cal.svg
  211. │ │ ├── ico_calendar.svg
  212. │ │ ├── ico_cancel_disabled.svg
  213. │ │ ├── ico_cancel.svg
  214. │ │ ├── ico_cate.svg
  215. │ │ ├── ico_certify_n.svg
  216. │ │ ├── ico_certify_y.svg
  217. │ │ ├── ico_certify_y2.svg
  218. │ │ ├── ico_certify_y3.svg
  219. │ │ ├── ico_check_indeterminate.svg
  220. │ │ ├── ico_chk_circle_disabled.svg
  221. │ │ ├── ico_chk_circle.svg
  222. │ │ ├── ico_chk_off.svg
  223. │ │ ├── ico_chk_off2.svg
  224. │ │ ├── ico_chk_on.svg
  225. │ │ ├── ico_chk.svg
  226. │ │ ├── ico_close_gray.svg
  227. │ │ ├── ico_close.svg
  228. │ │ ├── ico_core_alarm1.svg
  229. │ │ ├── ico_core_alarm2.svg
  230. │ │ ├── ico_date_pic.svg
  231. │ │ ├── ico_del_disabled.svg
  232. │ │ ├── ico_del_disabled2.svg
  233. │ │ ├── ico_del.svg
  234. │ │ ├── ico_del2.svg
  235. │ │ ├── ico_download.svg
  236. │ │ ├── ico_end.svg
  237. │ │ ├── ico_equip.svg
  238. │ │ ├── ico_eraser.svg
  239. │ │ ├── ico_eraser2.svg
  240. │ │ ├── ico_error.svg
  241. │ │ ├── ico_event_pop.svg
  242. │ │ ├── ico_event_view_black.png
  243. │ │ ├── ico_event_view_black.svg
  244. │ │ ├── ico_event_view_down.svg
  245. │ │ ├── ico_event_view.svg
  246. │ │ ├── ico_excel_d.svg
  247. │ │ ├── ico_excel.svg
  248. │ │ ├── ico_excel2.svg
  249. │ │ ├── ico_eye.svg
  250. │ │ ├── ico_eye2.svg
  251. │ │ ├── ico_gray_pin.svg
  252. │ │ ├── ico_grid_sort.svg
  253. │ │ ├── ico_grid_sort2.svg
  254. │ │ ├── ico_id_off.svg
  255. │ │ ├── ico_id_on.svg
  256. │ │ ├── ico_info.svg
  257. │ │ ├── ico_lang_english.svg
  258. │ │ ├── ico_lang_korea.svg
  259. │ │ ├── ico_lang_korea2.svg
  260. │ │ ├── ico_link.svg
  261. │ │ ├── ico_list_white.svg
  262. │ │ ├── ico_list.svg
  263. │ │ ├── ico_location_arr.svg
  264. │ │ ├── ico_location_home.svg
  265. │ │ ├── ico_logo.svg
  266. │ │ ├── ico_logout.svg
  267. │ │ ├── ico_map.svg
  268. │ │ ├── ico_menu_arr.svg
  269. │ │ ├── ico_menu_arr2.svg
  270. │ │ ├── ico_menu_minus.svg
  271. │ │ ├── ico_menu_nodata.svg
  272. │ │ ├── ico_menu_plus.svg
  273. │ │ ├── ico_menu.svg
  274. │ │ ├── ico_minus.svg
  275. │ │ ├── ico_mod_disabled.svg
  276. │ │ ├── ico_mod.svg
  277. │ │ ├── ico_mod2.svg
  278. │ │ ├── ico_mode_dark.svg
  279. │ │ ├── ico_mode_white.svg
  280. │ │ ├── ico_mode_white2.svg
  281. │ │ ├── ico_ne_add.svg
  282. │ │ ├── ico_ne_del_d.svg
  283. │ │ ├── ico_ne_del.svg
  284. │ │ ├── ico_no_data_nw.svg
  285. │ │ ├── ico_no_data.svg
  286. │ │ ├── ico_no_data2.svg
  287. │ │ ├── ico_no_table_dt.svg
  288. │ │ ├── ico_not_excel.svg
  289. │ │ ├── ico_otp_step1.svg
  290. │ │ ├── ico_otp_step2.svg
  291. │ │ ├── ico_otp_step3.svg
  292. │ │ ├── ico_otp_step4.svg
  293. │ │ ├── ico_otp_step5.svg
  294. │ │ ├── ico_paging_more.svg
  295. │ │ ├── ico_paging_next.svg
  296. │ │ ├── ico_paging_next1.svg
  297. │ │ ├── ico_paging_next2.svg
  298. │ │ ├── ico_paging_prev.svg
  299. │ │ ├── ico_paging_prev1.svg
  300. │ │ ├── ico_paging_prev2.svg
  301. │ │ ├── ico_performance1.svg
  302. │ │ ├── ico_performance2.svg
  303. │ │ ├── ico_pin_off.svg
  304. │ │ ├── ico_pin_on.svg
  305. │ │ ├── ico_pip.svg
  306. │ │ ├── ico_pip2.svg
  307. │ │ ├── ico_plus.svg
  308. │ │ ├── ico_pop_close.svg
  309. │ │ ├── ico_pos.svg
  310. │ │ ├── ico_ran_arrow_gray.svg
  311. │ │ ├── ico_ran_arrow_white.svg
  312. │ │ ├── ico_red_pin.svg
  313. │ │ ├── ico_refresh_dis.svg
  314. │ │ ├── ico_refresh.svg
  315. │ │ ├── ico_reg_disabled.svg
  316. │ │ ├── ico_reg.svg
  317. │ │ ├── ico_save_disabled.svg
  318. │ │ ├── ico_save.svg
  319. │ │ ├── ico_search.svg
  320. │ │ ├── ico_set_blue.svg
  321. │ │ ├── ico_set.svg
  322. │ │ ├── ico_setting.svg
  323. │ │ ├── ico_slt.svg
  324. │ │ ├── ico_slt2.svg
  325. │ │ ├── ico_sort.svg
  326. │ │ ├── ico_square.svg
  327. │ │ ├── ico_state1.svg
  328. │ │ ├── ico_state2.svg
  329. │ │ ├── ico_state3.svg
  330. │ │ ├── ico_status1.svg
  331. │ │ ├── ico_status2.svg
  332. │ │ ├── ico_status3.svg
  333. │ │ ├── ico_step_arr.svg
  334. │ │ ├── ico_step_arr2.svg
  335. │ │ ├── ico_tenant1.svg
  336. │ │ ├── ico_tenant2.svg
  337. │ │ ├── ico_tenant3.svg
  338. │ │ ├── ico_tenant4.svg
  339. │ │ ├── ico_time_disabled.svg
  340. │ │ ├── ico_time.svg
  341. │ │ ├── ico_tit_arr.svg
  342. │ │ ├── ico_tool.svg
  343. │ │ ├── ico_trash_nw.svg
  344. │ │ ├── ico_tree_add.svg
  345. │ │ ├── ico_tree_arr.svg
  346. │ │ ├── ico_tree_save.svg
  347. │ │ ├── ico_tree1.svg
  348. │ │ ├── ico_tree2.svg
  349. │ │ ├── ico_tree3_core.svg
  350. │ │ ├── ico_tree3_ran.svg
  351. │ │ ├── ico_tree3.svg
  352. │ │ ├── ico_trend.svg
  353. │ │ ├── ico_view_del.svg
  354. │ │ ├── ico_view_list.svg
  355. │ │ ├── ico_view_list2.svg
  356. │ │ ├── ico_wifi.svg
  357. │ │ ├── ico-arrow-right.svg
  358. │ │ ├── ico-check-on.svg
  359. │ │ ├── img_mode_dark.svg
  360. │ │ ├── img_mode_white.svg
  361. │ │ ├── img_popup.svg
  362. │ │ ├── img_qr.svg
  363. │ │ ├── img_system.svg
  364. │ │ ├── inf_bg.png
  365. │ │ ├── is_disconnect.svg
  366. │ │ ├── logo_foot.svg
  367. │ │ ├── logo_foot2.svg
  368. │ │ ├── logo_login.svg
  369. │ │ ├── logo_new.svg
  370. │ │ ├── logo_sams_sds.svg
  371. │ │ ├── logo_sams.svg
  372. │ │ ├── mail_logo1.png
  373. │ │ ├── mail_logo2.png
  374. │ │ ├── map_kangwon.svg
  375. │ │ ├── pf_sample.svg
  376. │ │ ├── pin.png
  377. │ │ ├── rlt_bg.png
  378. │ │ ├── round.png
  379. │ │ └── ven_bg.png
  380. │ └── scss
  381. │ ├── default.scss
  382. │ ├── main.scss
  383. │ ├── mode-w-m.scss
  384. │ ├── roulette.scss
  385. │ ├── sample.scss
  386. │ └── style.scss
  387. ├── components
  388. │ ├── cellRenderer
  389. │ │ ├── customActionTypeTextColor.vue
  390. │ │ ├── customBackUpBtn.vue
  391. │ │ ├── customBackUpBtnR.vue
  392. │ │ ├── customButtonSms.vue
  393. │ │ ├── customHeaderText.vue
  394. │ │ ├── customInhibitSelect.vue
  395. │ │ ├── customIpConnTextColor.vue
  396. │ │ ├── customIpNotConnTextColor.vue
  397. │ │ ├── customLicenseBtn.vue
  398. │ │ ├── customLogLevelSelect.vue
  399. │ │ ├── customNullValue.vue
  400. │ │ ├── customRadio.vue
  401. │ │ ├── customResultTextDivBg.vue
  402. │ │ ├── customSessionSetTextField.vue
  403. │ │ ├── customStatusBox.vue
  404. │ │ ├── customTextColor.vue
  405. │ │ ├── customTextDivSession.vue
  406. │ │ └── customUseYNTextColor.vue
  407. │ ├── common
  408. │ │ ├── confirmDialog.vue
  409. │ │ ├── customLoading.vue
  410. │ │ ├── excelUpload.vue
  411. │ │ ├── footer
  412. │ │ │ └── eventDetailView.vue
  413. │ │ ├── footer.vue
  414. │ │ ├── header
  415. │ │ │ └── modal
  416. │ │ │ ├── myInfoUpdate.vue
  417. │ │ │ ├── passwordCheck.vue
  418. │ │ │ └── privacyPop.vue
  419. │ │ ├── header.vue
  420. │ │ ├── leftMenu.vue
  421. │ │ ├── location.vue
  422. │ │ ├── pagination.vue
  423. │ │ ├── topologyPop.vue
  424. │ │ └── topologyPopMgmt.vue
  425. │ ├── home
  426. │ │ ├── dashboard
  427. │ │ │ ├── common
  428. │ │ │ │ ├── coreDetailModal.vue
  429. │ │ │ │ ├── map
  430. │ │ │ │ │ ├── mapBusan.vue
  431. │ │ │ │ │ ├── mapChungbuk.vue
  432. │ │ │ │ │ ├── mapChungnam.vue
  433. │ │ │ │ │ ├── mapDaegu.vue
  434. │ │ │ │ │ ├── mapDaejeon.vue
  435. │ │ │ │ │ ├── mapGwangju.vue
  436. │ │ │ │ │ ├── mapGyeongbuk.vue
  437. │ │ │ │ │ ├── mapGyeonggido.vue
  438. │ │ │ │ │ ├── mapGyeongnam.vue
  439. │ │ │ │ │ ├── mapIncheon.vue
  440. │ │ │ │ │ ├── mapJeju.vue
  441. │ │ │ │ │ ├── mapJeonbuk.vue
  442. │ │ │ │ │ ├── mapJeonnam.vue
  443. │ │ │ │ │ ├── mapKangwon.vue
  444. │ │ │ │ │ ├── mapSejong.vue
  445. │ │ │ │ │ ├── mapSeoul.vue
  446. │ │ │ │ │ └── mapUlsan.vue
  447. │ │ │ │ ├── pagination.vue
  448. │ │ │ │ ├── ranCardGroupDetailModal.vue
  449. │ │ │ │ ├── ranMapGroupDetailModal.vue
  450. │ │ │ │ └── ranMapNeDetailModal.vue
  451. │ │ │ ├── layout01
  452. │ │ │ │ ├── core
  453. │ │ │ │ │ ├── layout01Core.vue
  454. │ │ │ │ │ ├── layout01CoreWidgetM.vue
  455. │ │ │ │ │ └── layout01CoreWidgetS.vue
  456. │ │ │ │ ├── layout01.vue
  457. │ │ │ │ ├── ran
  458. │ │ │ │ │ └── layout01Ran.vue
  459. │ │ │ │ └── user
  460. │ │ │ │ ├── layout01User.vue
  461. │ │ │ │ ├── layout01UserWidgetM.vue
  462. │ │ │ │ ├── layout01UserWidgetS.vue
  463. │ │ │ │ └── layout01UserWidgetT.vue
  464. │ │ │ ├── layout02
  465. │ │ │ │ ├── core
  466. │ │ │ │ │ ├── layout02Core.vue
  467. │ │ │ │ │ ├── layout02CoreWidgetM.vue
  468. │ │ │ │ │ └── layout02CoreWidgetS.vue
  469. │ │ │ │ ├── layout02.vue
  470. │ │ │ │ ├── ran
  471. │ │ │ │ │ └── layout02Ran.vue
  472. │ │ │ │ └── user
  473. │ │ │ │ ├── layout02User.vue
  474. │ │ │ │ ├── layout02UserWidgetM.vue
  475. │ │ │ │ ├── layout02UserWidgetS.vue
  476. │ │ │ │ └── layout02UserWidgetT.vue
  477. │ │ │ ├── layout03
  478. │ │ │ │ ├── core
  479. │ │ │ │ │ ├── layout03Core.vue
  480. │ │ │ │ │ ├── layout03CoreWidgetM.vue
  481. │ │ │ │ │ └── layout03CoreWidgetS.vue
  482. │ │ │ │ ├── layout03.vue
  483. │ │ │ │ ├── ran
  484. │ │ │ │ │ ├── layout03Ran.vue
  485. │ │ │ │ │ └── ranMapComponent.vue
  486. │ │ │ │ └── user
  487. │ │ │ │ ├── layout03User.vue
  488. │ │ │ │ ├── layout03UserWidgetM.vue
  489. │ │ │ │ └── layout03UserWidgetS.vue
  490. │ │ │ ├── settingModal.vue
  491. │ │ │ └── test.json
  492. │ │ ├── jobNoti
  493. │ │ │ └── jobNotiModal.vue
  494. │ │ ├── tenant
  495. │ │ │ ├── chart
  496. │ │ │ │ ├── doughnut.vue
  497. │ │ │ │ ├── trendBar.vue
  498. │ │ │ │ └── userDoughnut.vue
  499. │ │ │ ├── common
  500. │ │ │ │ └── ranGroupDetailModal.vue
  501. │ │ │ ├── tenantRan.vue
  502. │ │ │ ├── tenantTrend.vue
  503. │ │ │ └── tenantUser.vue
  504. │ │ └── trend
  505. │ │ └── headerChart.vue
  506. │ ├── login
  507. │ │ └── privacyPop.vue
  508. │ ├── search
  509. │ │ └── searchModules.vue
  510. │ └── sunEdt.vue
  511. ├── composables
  512. │ ├── useApi.js
  513. │ ├── useAxios.js
  514. │ ├── useChart.js
  515. │ ├── useEnumCode.js
  516. │ ├── useEnumCodeEn.js
  517. │ ├── useEnumCodeKr.js
  518. │ ├── useErrorHandler.js
  519. │ ├── useHangul.js
  520. │ ├── useMenuConstants.js
  521. │ ├── useSunEditor.js
  522. │ ├── useToastEditor.ts
  523. │ ├── useUrlHandler.js
  524. │ ├── useUtil.js
  525. │ ├── useValid.js
  526. │ └── useWatchFocusValidate.js
  527. ├── error.vue
  528. ├── lang
  529. │ ├── en.js
  530. │ └── kr.js
  531. ├── layouts
  532. │ ├── default.vue
  533. │ ├── designdefault.vue
  534. │ ├── designloginlayout.vue
  535. │ ├── loginlayout.vue
  536. │ ├── roulette.vue
  537. │ └── samplelayout.vue
  538. ├── middleware
  539. │ └── auth.global.js
  540. ├── nuxt.config.ts
  541. ├── package-lock.json
  542. ├── package.json
  543. ├── pages
  544. │ ├── auth
  545. │ │ ├── join.vue
  546. │ │ └── popupClose.vue
  547. │ ├── index.vue
  548. │ └── view
  549. │ ├── cs
  550. │ │ ├── financial.vue
  551. │ │ └── index.vue
  552. │ ├── deli
  553. │ │ ├── index.vue
  554. │ │ ├── mngAdd.vue
  555. │ │ └── mngListDeleted.vue
  556. │ ├── item
  557. │ │ ├── add.vue
  558. │ │ ├── evtListClosed.vue
  559. │ │ ├── evtListOngoing.vue
  560. │ │ ├── evtListPending.vue
  561. │ │ └── index.vue
  562. │ ├── log
  563. │ │ └── logList.vue
  564. │ ├── order
  565. │ │ └── index.vue
  566. │ ├── settle
  567. │ │ ├── curationAdd.vue
  568. │ │ ├── curationList.vue
  569. │ │ ├── index.vue
  570. │ │ ├── irAdd.vue
  571. │ │ ├── mediaAdd.vue
  572. │ │ ├── mediaList.vue
  573. │ │ ├── newsAdd.vue
  574. │ │ └── newsList.vue
  575. │ └── vendor
  576. │ ├── dashboard
  577. │ │ └── index.vue
  578. │ └── index.vue
  579. ├── plugins
  580. │ ├── fontawesome.js
  581. │ ├── i18n.js
  582. │ ├── log.js
  583. │ ├── mitt.js
  584. │ ├── toast.js
  585. │ ├── userAgent.js
  586. │ ├── vue-cool-lightbox.js
  587. │ ├── vue3-editor.js
  588. │ └── vuetify.js
  589. ├── public
  590. │ ├── favicon.ico
  591. │ ├── ft_logo.png
  592. │ ├── js
  593. │ │ └── jquery-3.7.1.min.js
  594. │ └── logo.png
  595. ├── README.md
  596. ├── server
  597. │ └── tsconfig.json
  598. ├── stores
  599. │ ├── auth.js
  600. │ ├── detail.js
  601. │ ├── lang.js
  602. │ ├── loading.js
  603. │ └── tenantMgmt.js
  604. ├── toast-editor.d.ts
  605. ├── tsconfig.json
  606. └── vite-plugin-sri.d.ts
  607. ```
  608. ### Data Flow & Communication Patterns
  609. - **Client-Server 통신**: RESTful API, JWT 인증 헤더, Axios 인터셉터
  610. - **Database 상호작용**: CI4 Query Builder/Model, 트랜잭션 관리, Redis 캐시 사용
  611. - **외부 서비스 연동**: 비동기 메시지 큐 없이 HTTP 호출, 에러 리트라이 로직
  612. - **실시간 통신**: Socket.IO 기반 WebSocket 연결, 주문·승인 알림
  613. - **데이터 동기화**: 캐시 무효화 패턴, 이벤트 기반 상태 업데이트
  614. ## 4. Performance & Optimization Strategy
  615. - HTTP 응답 캐싱: Redis로 빈번 조회 데이터 캐싱
  616. - DB 인덱싱 및 쿼리 튜닝: 주요 조회 쿼리 Explain 분석
  617. - 코드 스플리팅·지연 로딩: Nuxt3 동적 import 활용
  618. - 로드 밸런싱: Kubernetes HPA 기반 자동 스케일링
  619. ## 5. Implementation Roadmap & Milestones
  620. ### Phase 1: Foundation (MVP Implementation)
  621. - Core Infrastructure: Docker/K8s 환경, CI/CD 파이프라인
  622. - Essential Features: 로그인·회원가입, 상품 조회·발주, 주문 승인, 송장 엑셀 업로드
  623. - Basic Security: JWT 인증, HTTPS, OAuth2 SNS 로그인
  624. - Development Setup: 로컬 개발 환경, 코드 린팅·테스트 프레임워크
  625. - Timeline: M+2
  626. ### Phase 2: Feature Enhancement
  627. - Advanced Features: 정산 모듈, 파트너 매칭 시스템, 알림 센터
  628. - Performance Optimization: 캐시 전략, DB 튜닝
  629. - Enhanced Security: 권한 관리 강화, OWASP 점검
  630. - Monitoring Implementation: ELK 대시보드, Grafana 알림
  631. - Timeline: M+4
  632. ### Phase 3: Scaling & Optimization
  633. - Scalability Implementation: HPA/Cluster Autoscaler, DB 리드 리플리카
  634. - Advanced Integrations: ERP 연동, 다중 택배사 API 연결
  635. - Enterprise Features: 서브계정 관리, 대시보드
  636. - Compliance & Auditing: GDPR, 데이터 암호화 심화
  637. - Timeline: M+6
  638. ## 6. Risk Assessment & Mitigation Strategies
  639. ### Technical Risk Analysis
  640. - **기술 리스크**: OCR 인식률 저하 → 수동 검증 UI 제공
  641. - **성능 리스크**: 동시 사용자 증가 시 DB 병목 → 읽기/쓰기 분리, 캐시 활용
  642. - **보안 리스크**: 토큰 탈취 → 짧은 만료, 리프레시 토큰 설계
  643. - **통합 리스크**: 외부 API 변경 → 버전 관리, 어댑터 패턴 적용
  644. - **Mitigation**: 대체 흐름, 로깅·모니터링 알림, 자동 테스트
  645. ### Project Delivery Risks
  646. - **일정 리스크**: 기능 지연 → MVP 단계별 우선순위 조정
  647. - **자원 리스크**: 전문 인력 부족 → 외부 컨설팅·아웃소싱 검토
  648. - **품질 리스크**: 테스트 커버리지 부족 → CI/CD 자동화 테스트 강화
  649. - **배포 리스크**: 프로덕션 오류 → 블루/그린 배포 전략 채택
  650. - **Contingency**: 페이즈별 핵심 기능 최소화, 백업 환경 준비
  651. ---
  652. *본 문서는 PRD 기반 최소 기능 중심으로 설계되었으며, 차후 요구사항 변화에 따라 단계별 확장이 가능합니다.*