[{"data":1,"prerenderedAt":2634},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brobean-brobean-dev-log-08":267,"-ko-project-brobean-brobean-dev-log-08-surround":2629},[4,130,253],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":33},"Note (개발 지식)","emojione-v1:note-pad","\u002Fko\u002Fnote","ko\u002F1.note",[10,34,48,74,84,94,110,120],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":33},"Spring","logos:spring-icon","\u002Fko\u002Fnote\u002Fspring","ko\u002F1.note\u002F0.spring",[16,21,25,29],{"title":17,"path":18,"stem":19,"icon":20},"Spring AI 핵심 개념과 LLM 애플리케이션 구조 이해","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai","lucide:file-text",{"title":22,"path":23,"stem":24,"icon":20},"[Java] Record와 @Version으로 이해하는 불변 데이터와 동시성 제어","\u002Fko\u002Fnote\u002Fspring\u002Frecord-and-version-concurrency","ko\u002F1.note\u002F0.spring\u002F2.record-and-version-concurrency",{"title":26,"path":27,"stem":28,"icon":20},"[JPA] @PersistenceContext와 EntityManager로 이해하는 영속성 컨텍스트","\u002Fko\u002Fnote\u002Fspring\u002Fspring-persistence-context","ko\u002F1.note\u002F0.spring\u002F3.spring-persistence-context",{"title":30,"path":31,"stem":32,"icon":20},"[Java] YearMonth로 월 단위 날짜를 다루는 방법","\u002Fko\u002Fnote\u002Fspring\u002Fjava-year-month","ko\u002F1.note\u002F0.spring\u002F4.java-year-month",false,{"title":35,"icon":36,"path":37,"stem":38,"children":39,"page":33},"Javascript","skill-icons:javascript","\u002Fko\u002Fnote\u002Fjavascript","ko\u002F1.note\u002F1.javascript",[40,44],{"title":41,"path":42,"stem":43,"icon":20},"Promise.all과 구조 분해 할당을 활용한 데이터 처리 패턴","\u002Fko\u002Fnote\u002Fjavascript\u002Fdestructuring","ko\u002F1.note\u002F1.javascript\u002F1.destructuring",{"title":45,"path":46,"stem":47,"icon":20},"JavaScript 배열 고차 함수와 데이터 처리 패턴 이해","\u002Fko\u002Fnote\u002Fjavascript\u002Ffilter","ko\u002F1.note\u002F1.javascript\u002F2.filter",{"title":49,"icon":50,"path":51,"stem":52,"children":53,"page":33},"Nuxt4","logos:nuxt-icon","\u002Fko\u002Fnote\u002Fnuxt4","ko\u002F1.note\u002F2.nuxt4",[54,58,62,66,70],{"title":55,"path":56,"stem":57,"icon":20},"Nuxt 4를 선택한 이유와 아키텍처 및 실무 가이드","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-info","ko\u002F1.note\u002F2.nuxt4\u002F1.nuxt-info",{"title":59,"path":60,"stem":61,"icon":20},"Nuxt useAsyncData 동작 원리와 SSR 데이터 페칭 최적화","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-use_async_data","ko\u002F1.note\u002F2.nuxt4\u002F2.nuxt-use_async_data",{"title":63,"path":64,"stem":65,"icon":20},"Nuxt Content v3 데이터 모델과 Query 시스템 이해","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-content-v3","ko\u002F1.note\u002F2.nuxt4\u002F3.nuxt-content-v3",{"title":67,"path":68,"stem":69,"icon":20},"Nuxt Auto-imports 내부 동작과 컴파일 과정 분석","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-auto-import","ko\u002F1.note\u002F2.nuxt4\u002F4.nuxt-auto-import",{"title":71,"path":72,"stem":73,"icon":20},"Nuxt 렌더링 방식 이해: SSR, SSG, ISR, CSR 구현 방법","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-rendering-strategy","ko\u002F1.note\u002F2.nuxt4\u002F5.nuxt-rendering-strategy",{"title":75,"icon":76,"path":77,"stem":78,"children":79,"page":33},"Nitro","unjs:nitro","\u002Fko\u002Fnote\u002Fnitro","ko\u002F1.note\u002F3.nitro",[80],{"title":81,"path":82,"stem":83,"icon":20},"Nitro 아키텍처와 서버 엔진 구조","\u002Fko\u002Fnote\u002Fnitro\u002Fnitro","ko\u002F1.note\u002F3.nitro\u002Fnitro",{"title":85,"icon":86,"path":87,"stem":88,"children":89,"page":33},"Devops","vscode-icons:file-type-pipeline","\u002Fko\u002Fnote\u002Fdevops","ko\u002F1.note\u002F4.devops",[90],{"title":91,"path":92,"stem":93,"icon":20},"서버사이드 WebAssembly(Wasm)와 차세대 실행 환경","\u002Fko\u002Fnote\u002Fdevops\u002Fwebassembly","ko\u002F1.note\u002F4.devops\u002F1.webAssembly",{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":33},"Tooling","lucide:wrench","\u002Fko\u002Fnote\u002Ftooling","ko\u002F1.note\u002F4.tooling",[100],{"title":101,"icon":102,"path":103,"stem":104,"children":105,"page":33},"Package Manager","devicon:npm","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager","ko\u002F1.note\u002F4.tooling\u002F1.package-manager",[106],{"title":107,"path":108,"stem":109,"icon":20},"Package Lock 파일의 역할과 의존성 관리 원리","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager\u002Fpackage-lock","ko\u002F1.note\u002F4.tooling\u002F1.package-manager\u002F1.package-lock",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":33},"Web","streamline-plump:web","\u002Fko\u002Fnote\u002Fweb","ko\u002F1.note\u002F4.web",[116],{"title":117,"path":118,"stem":119,"icon":20},"웹 애플리케이션 렌더링 아키텍처 이해","\u002Fko\u002Fnote\u002Fweb\u002Frendering-modes","ko\u002F1.note\u002F4.web\u002F2.rendering-modes",{"title":121,"icon":122,"path":123,"stem":124,"children":125,"page":33},"SEO","icon-park-solid:seo","\u002Fko\u002Fnote\u002Fseo","ko\u002F1.note\u002F6.seo",[126],{"title":127,"path":128,"stem":129,"icon":20},"[SEO] 개발 블로그 검색 노출을 위한 robots.txt와 SEO 설정 가이드","\u002Fko\u002Fnote\u002Fseo\u002Fseo","ko\u002F1.note\u002F6.seo\u002F1.seo",{"title":131,"icon":132,"path":133,"stem":134,"children":135,"page":33},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[136,187],{"title":137,"icon":138,"path":139,"stem":140,"children":141,"page":33},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[142,146,150,154,158,162,166,170,174,179,183],{"title":143,"path":144,"stem":145,"icon":20},"[Brolog] 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":147,"path":148,"stem":149,"icon":20},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (3) - Runtime 기능 문제 분석과 AI Assistant 전환","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy3-ai-integration","ko\u002F2.project\u002F1.brolog\u002F10.vercel-deploy3-ai-integration",{"title":151,"path":152,"stem":153,"icon":20},"[Brolog] AI Assistant 적용 과정 - Agent 구조와 API 사용량 관리 시 고려사항","\u002Fko\u002Fproject\u002Fbrolog\u002Fai-assistant-application-process","ko\u002F2.project\u002F1.brolog\u002F11.ai-assistant-application-process",{"title":155,"path":156,"stem":157,"icon":20},"[Brolog] 검색 엔진 노출을 위한 SEO 적용 과정","\u002Fko\u002Fproject\u002Fbrolog\u002Fbrolog-seo","ko\u002F2.project\u002F1.brolog\u002F12.brolog-seo",{"title":159,"path":160,"stem":161,"icon":20},"[Brolog] 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":163,"path":164,"stem":165,"icon":20},"[Brolog] Nuxt Content 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":167,"path":168,"stem":169,"icon":20},"[Brolog] Nuxt4 Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":171,"path":172,"stem":173,"icon":20},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":175,"path":176,"stem":177,"icon":178},"[Brolog] 브랜드 아이덴티티 적용 - Custom 404 페이지와 Default No Image 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-error-and-default-thumbnail","ko\u002F2.project\u002F1.brolog\u002F6.custom-error-and-default-thumbnail","lucide:image",{"title":180,"path":181,"stem":182,"icon":20},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":184,"path":185,"stem":186,"icon":20},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (2) - Build Pipeline 오류 분석과 Nuxt 실행 구조 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy2-error-analyze","ko\u002F2.project\u002F1.brolog\u002F9.vercel-deploy2-error-analyze",{"title":188,"icon":189,"path":190,"stem":191,"children":192,"page":33},"Brobean","custom:brobean","\u002Fko\u002Fproject\u002Fbrobean","ko\u002F2.project\u002F2.brobean",[193,197,201,205,209,213,217,221,225,229,233,237,241,245,249],{"title":194,"path":195,"stem":196,"icon":20},"[BroBean] 연인과 함께 사용하는 가계부: BroBean - 프로젝트 기획과 이름의 탄생","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-01","ko\u002F2.project\u002F2.brobean\u002F1.brobean-dev-log-01",{"title":198,"path":199,"stem":200,"icon":20},"[BroBean] 연인과 함께 사용하는 가계부: BroBean 프로젝트 시작 - Nuxt 4 기반 프론트 개발 환경 구축","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-02","ko\u002F2.project\u002F2.brobean\u002F2.brobean-dev-log-02",{"title":202,"path":203,"stem":204,"icon":20},"[BroBean] BroBean 프로젝트 #3 - 모바일 앱 전환을 고려한 공통 레이아웃 설계","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-03","ko\u002F2.project\u002F2.brobean\u002F3.brobean-dev-log-03",{"title":206,"path":207,"stem":208,"icon":20},"[BroBean] BroBean 프로젝트 #4 - 홈 화면(Dashboard) 설계와 Mock 데이터 구성","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-04","ko\u002F2.project\u002F2.brobean\u002F4.brobean-dev-log-04",{"title":210,"path":211,"stem":212,"icon":20},"[BroBean] BroBean 프로젝트 #5 돈을 모으면 캐릭터도 성장한다 - 브로빈 성장 시스템 설계","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-05","ko\u002F2.project\u002F2.brobean\u002F5.brobean-dev-log-05",{"title":214,"path":215,"stem":216,"icon":20},"[BroBean] BroBean 프로젝트 #6 씨앗 심기와 밭 가꾸기 기능 설계","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-06","ko\u002F2.project\u002F2.brobean\u002F6.brobean-dev-log-06",{"title":218,"path":219,"stem":220,"icon":20},"[BroBean] BroBean 프로젝트 #7 성장 일지와 나무 키우기 화면 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-07","ko\u002F2.project\u002F2.brobean\u002F7.brobean-dev-log-07",{"title":222,"path":223,"stem":224,"icon":20},"[BroBean] BroBean 프로젝트 #8 수확 정산으로 한눈에 보는 소비 흐름 - 소비 리포트 & 정산 화면 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-08","ko\u002F2.project\u002F2.brobean\u002F8.brobean-dev-log-08",{"title":226,"path":227,"stem":228,"icon":20},"[BroBean] BroBean 프로젝트 #9 알림부터 마이페이지까지 - 사용자 편의 기능과 개인 농장 설정 화면 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-09","ko\u002F2.project\u002F2.brobean\u002F9.brobean-dev-log-09",{"title":230,"path":231,"stem":232,"icon":20},"[BroBean] BroBean 프로젝트 #10 로그인부터 파트너 초대까지 - 계정 인증과 커플 연결 화면 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-10","ko\u002F2.project\u002F2.brobean\u002F910.brobean-dev-log-10",{"title":234,"path":235,"stem":236,"icon":20},"[BroBean] BroBean 프로젝트 #11 개인과 커플을 모두 위한 모드 분리 - Pinia 기반 개인\u002F커플 모드 전환 구현","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-11","ko\u002F2.project\u002F2.brobean\u002F911.brobean-dev-log-11",{"title":238,"path":239,"stem":240,"icon":20},"[BroBean] BroBean 프로젝트 #12 인증 상태 복구와 Nuxt Plugin 실행 순서 제어","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-12","ko\u002F2.project\u002F2.brobean\u002F912.brobean-dev-log-12",{"title":242,"path":243,"stem":244,"icon":20},"[BroBean] BroBean 프로젝트 #13 개인·커플 모드와 가계부 API 구현 - 쿼리 성능을 다시 돌아보다","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-13","ko\u002F2.project\u002F2.brobean\u002F913.brobean-dev-log-13",{"title":246,"path":247,"stem":248,"icon":20},"[BroBean] BroBean 프로젝트 #14 순환 참조 오류를 ObjectProvider로 해결하기","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-14","ko\u002F2.project\u002F2.brobean\u002F914.brobean-dev-log-14",{"title":250,"path":251,"stem":252,"icon":20},"[BroBean] BroBean 프로젝트 #15 JPA 페이지네이션 적용, Page와 Slice의 차이","\u002Fko\u002Fproject\u002Fbrobean\u002Fbrobean-dev-log-15","ko\u002F2.project\u002F2.brobean\u002F915.brobean-dev-log-15",{"title":254,"icon":255,"path":256,"stem":257,"children":258,"page":33},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[259],{"title":137,"icon":138,"path":260,"stem":261,"children":262,"page":33},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[263],{"title":264,"path":265,"stem":266,"icon":20},"[Nuxt Content] Nuxt Icon 오류 해결과 Custom Collection 기반 오프라인 아이콘 구성","\u002Fko\u002Ftrouble-shooting\u002Fbrolog\u002Fnuxt-icon-restricted-network-troubleshooting","ko\u002F3.trouble-shooting\u002F1.brolog\u002F1.nuxt-icon-restricted-network-troubleshooting",{"id":268,"title":222,"body":269,"date":2613,"description":2614,"extension":2615,"links":2616,"meta":2617,"navigation":2625,"path":223,"seo":2626,"stem":224,"__hash__":2628},"docs_ko\u002Fko\u002F2.project\u002F2.brobean\u002F8.brobean-dev-log-08.md",{"type":270,"value":271,"toc":2599},"minimark",[272,277,286,289,311,318,321,324,329,340,343,356,359,520,527,680,683,685,689,696,699,705,712,719,722,964,971,974,1199,1206,1208,1212,1215,1222,1225,1236,1239,1247,1250,1374,1377,1385,1388,1396,1399,1401,1405,1408,1414,1421,1428,1714,1717,1728,1731,1733,1737,1744,1747,1754,1760,1959,1962,1969,1976,1978,1982,1985,1992,1995,2264,2267,2272,2275,2280,2283,2285,2289,2295,2302,2384,2387,2394,2397,2399,2403,2406,2413,2420,2423,2425,2429,2432,2439,2442,2449,2451,2455,2458,2465,2468,2471,2473,2477,2484,2487,2493,2496,2501,2504,2509,2512,2517,2520,2523,2528,2531,2533,2537,2540,2543,2546,2549,2556,2563,2566,2573,2576,2579,2582,2585,2588,2595],[273,274,276],"h1",{"id":275},"수확-정산으로-한눈에-보는-소비-흐름-brobean-소비-리포트-정산-화면-구현","수확 정산으로 한눈에 보는 소비 흐름 - BroBean 소비 리포트 & 정산 화면 구현",[278,279,280,281,285],"p",{},"가계부에 수입과 지출, 저축 내역을 기록하고 예산까지 설정했다면 그다음으로 필요한 것은 ",[282,283,284],"strong",{},"기록된 데이터를 다시 돌아볼 수 있는 화면","이라고 생각했다.",[278,287,288],{},"단순히 \"이번 달에 얼마를 썼는지\"만 보여주는 것이 아니라,",[290,291,292,296,299,302,305,308],"ul",{},[293,294,295],"li",{},"이번 달 지출 예산을 얼마나 사용했는지",[293,297,298],{},"저축 목표를 얼마나 달성했는지",[293,300,301],{},"실제로 사용할 수 있는 현금은 얼마인지",[293,303,304],{},"어떤 카테고리에 지출이 집중됐는지",[293,306,307],{},"주차별 소비 패턴은 어떻게 달라지는지",[293,309,310],{},"최근 수입·지출·저축 흐름은 어떻게 변하고 있는지",[278,312,313,314,317],{},"까지 확인할 수 있어야 가계부를 기록하는 것에서 끝나지 않고 ",[282,315,316],{},"소비 습관을 돌아볼 수 있다","고 생각했다.",[278,319,320],{},"그래서 BroBean에서는 이 기능을 **「수확 정산」**이라는 이름으로 구성했다.",[322,323],"hr",{},[325,326,328],"h2",{"id":327},"수확-정산-화면의-전체-구조","🌾 수확 정산 화면의 전체 구조",[278,330,331,332,335,336,339],{},"수확 정산 페이지는 크게 ",[282,333,334],{},"월별 보기","와 ",[282,337,338],{},"기간 설정"," 두 가지 방식으로 나누었다.",[278,341,342],{},"월별 보기에서는 특정 월의 소비와 저축 현황을 집중적으로 확인하고, 기간 설정에서는 사용자가 원하는 기간을 선택해 조금 더 넓은 범위의 소비 흐름을 확인할 수 있도록 했다.",[344,345,350],"div",{"className":346},[347,348,349],"flex","items-center","justify-center",[351,352],"img",{"alt":353,"src":354,"width":355},"BroBean 수확 정산 월별 보기 화면","\u002Fimages\u002Fbrobean\u002Freport.png",300,[278,357,358],{},"월별 보기와 기간 설정은 상단 토글을 통해 전환하도록 구성했다.",[360,361,366],"pre",{"className":362,"code":363,"language":364,"meta":365,"style":365},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"flex bg-gray-100 dark:bg-[#2A2A2A] p-1 rounded-2xl\">\n  \u003Cbutton\n      type=\"button\"\n      :class=\"currentTab === 'MONTH'\n        ? 'bg-white dark:bg-[#1E1E1E] text-gray-900 shadow-xs'\n        : 'text-gray-400'\"\n      @click=\"currentTab = 'MONTH'\"\n  >\n    월별 보기\n  \u003C\u002Fbutton>\n\n  \u003Cbutton\n      type=\"button\"\n      :class=\"currentTab === 'CUSTOM'\n        ? 'bg-white dark:bg-[#1E1E1E] text-gray-900 shadow-xs'\n        : 'text-gray-400'\"\n      @click=\"currentTab = 'CUSTOM'\"\n  >\n    기간 설정\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n","vue","",[367,368,369,400,407,413,419,425,431,437,443,449,455,462,467,472,478,483,488,494,499,505,510],"code",{"__ignoreMap":365},[370,371,374,378,381,385,388,391,395,397],"span",{"class":372,"line":373},"line",1,[370,375,377],{"class":376},"sMK4o","\u003C",[370,379,344],{"class":380},"swJcz",[370,382,384],{"class":383},"spNyl"," class",[370,386,387],{"class":376},"=",[370,389,390],{"class":376},"\"",[370,392,394],{"class":393},"sfazB","flex bg-gray-100 dark:bg-[#2A2A2A] p-1 rounded-2xl",[370,396,390],{"class":376},[370,398,399],{"class":376},">\n",[370,401,403],{"class":372,"line":402},2,[370,404,406],{"class":405},"sTEyZ","  \u003Cbutton\n",[370,408,410],{"class":372,"line":409},3,[370,411,412],{"class":405},"      type=\"button\"\n",[370,414,416],{"class":372,"line":415},4,[370,417,418],{"class":405},"      :class=\"currentTab === 'MONTH'\n",[370,420,422],{"class":372,"line":421},5,[370,423,424],{"class":405},"        ? 'bg-white dark:bg-[#1E1E1E] text-gray-900 shadow-xs'\n",[370,426,428],{"class":372,"line":427},6,[370,429,430],{"class":405},"        : 'text-gray-400'\"\n",[370,432,434],{"class":372,"line":433},7,[370,435,436],{"class":405},"      @click=\"currentTab = 'MONTH'\"\n",[370,438,440],{"class":372,"line":439},8,[370,441,442],{"class":405},"  >\n",[370,444,446],{"class":372,"line":445},9,[370,447,448],{"class":405},"    월별 보기\n",[370,450,452],{"class":372,"line":451},10,[370,453,454],{"class":405},"  \u003C\u002Fbutton>\n",[370,456,458],{"class":372,"line":457},11,[370,459,461],{"emptyLinePlaceholder":460},true,"\n",[370,463,465],{"class":372,"line":464},12,[370,466,406],{"class":405},[370,468,470],{"class":372,"line":469},13,[370,471,412],{"class":405},[370,473,475],{"class":372,"line":474},14,[370,476,477],{"class":405},"      :class=\"currentTab === 'CUSTOM'\n",[370,479,481],{"class":372,"line":480},15,[370,482,424],{"class":405},[370,484,486],{"class":372,"line":485},16,[370,487,430],{"class":405},[370,489,491],{"class":372,"line":490},17,[370,492,493],{"class":405},"      @click=\"currentTab = 'CUSTOM'\"\n",[370,495,497],{"class":372,"line":496},18,[370,498,442],{"class":405},[370,500,502],{"class":372,"line":501},19,[370,503,504],{"class":405},"    기간 설정\n",[370,506,508],{"class":372,"line":507},20,[370,509,454],{"class":405},[370,511,513,516,518],{"class":372,"line":512},21,[370,514,515],{"class":376},"\u003C\u002F",[370,517,344],{"class":380},[370,519,399],{"class":376},[278,521,522,523,526],{},"월별 보기에서는 조회할 월을 선택할 수 있도록 ",[367,524,525],{},"USelect","를 배치했다.",[360,528,532],{"className":529,"code":530,"language":531,"meta":365,"style":365},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const selectedMonth = ref('2026-08')\n\nconst monthOptions = [\n  { label: '2026년 8월', value: '2026-08' },\n  { label: '2026년 7월', value: '2026-07' },\n  { label: '2026년 6월', value: '2026-06' }\n]\n","ts",[367,533,534,562,566,578,614,644,675],{"__ignoreMap":365},[370,535,536,539,542,544,548,551,554,557,559],{"class":372,"line":373},[370,537,538],{"class":383},"const",[370,540,541],{"class":405}," selectedMonth ",[370,543,387],{"class":376},[370,545,547],{"class":546},"s2Zo4"," ref",[370,549,550],{"class":405},"(",[370,552,553],{"class":376},"'",[370,555,556],{"class":393},"2026-08",[370,558,553],{"class":376},[370,560,561],{"class":405},")\n",[370,563,564],{"class":372,"line":402},[370,565,461],{"emptyLinePlaceholder":460},[370,567,568,570,573,575],{"class":372,"line":409},[370,569,538],{"class":383},[370,571,572],{"class":405}," monthOptions ",[370,574,387],{"class":376},[370,576,577],{"class":405}," [\n",[370,579,580,583,586,589,592,595,597,600,603,605,607,609,611],{"class":372,"line":415},[370,581,582],{"class":376},"  {",[370,584,585],{"class":380}," label",[370,587,588],{"class":376},":",[370,590,591],{"class":376}," '",[370,593,594],{"class":393},"2026년 8월",[370,596,553],{"class":376},[370,598,599],{"class":376},",",[370,601,602],{"class":380}," value",[370,604,588],{"class":376},[370,606,591],{"class":376},[370,608,556],{"class":393},[370,610,553],{"class":376},[370,612,613],{"class":376}," },\n",[370,615,616,618,620,622,624,627,629,631,633,635,637,640,642],{"class":372,"line":421},[370,617,582],{"class":376},[370,619,585],{"class":380},[370,621,588],{"class":376},[370,623,591],{"class":376},[370,625,626],{"class":393},"2026년 7월",[370,628,553],{"class":376},[370,630,599],{"class":376},[370,632,602],{"class":380},[370,634,588],{"class":376},[370,636,591],{"class":376},[370,638,639],{"class":393},"2026-07",[370,641,553],{"class":376},[370,643,613],{"class":376},[370,645,646,648,650,652,654,657,659,661,663,665,667,670,672],{"class":372,"line":427},[370,647,582],{"class":376},[370,649,585],{"class":380},[370,651,588],{"class":376},[370,653,591],{"class":376},[370,655,656],{"class":393},"2026년 6월",[370,658,553],{"class":376},[370,660,599],{"class":376},[370,662,602],{"class":380},[370,664,588],{"class":376},[370,666,591],{"class":376},[370,668,669],{"class":393},"2026-06",[370,671,553],{"class":376},[370,673,674],{"class":376}," }\n",[370,676,677],{"class":372,"line":433},[370,678,679],{"class":405},"]\n",[278,681,682],{},"이렇게 구성하면 현재 월을 기본으로 보여주면서도 이전 달의 소비 기록을 다시 확인할 수 있다.",[322,684],{},[325,686,688],{"id":687},"이번-달-소비-상태를-먼저-보여주기","🌱 이번 달 소비 상태를 먼저 보여주기",[278,690,691,692,695],{},"수확 정산에서 가장 먼저 보여주는 영역은 ",[282,693,694],{},"이번 달의 전체적인 소비 상태","다.",[278,697,698],{},"숫자와 차트를 바로 나열하기보다는 사용자가 화면에 들어왔을 때 가장 먼저",[700,701,702],"blockquote",{},[278,703,704],{},"\"이번 달 소비를 잘 관리하고 있는가?\"",[278,706,707,708,711],{},"를 확인할 수 있도록 ",[282,709,710],{},"수확 정산 평가 카드","를 가장 위에 배치했다.",[344,713,715],{"className":714},[347,348,349],[351,716],{"alt":717,"src":718,"width":355},"BroBean 수확 정산 평가 카드","\u002Fimages\u002Fbrobean\u002Freport8.png",[278,720,721],{},"평가 기준은 지출 예산 사용률을 기준으로 단순하게 나누었다.",[360,723,725],{"className":529,"code":724,"language":531,"meta":365,"style":365},"const harvestEvaluation = computed(() => {\n  const percent = expenseUsagePercent.value\n\n  if (percent \u003C= 70) {\n    return {\n      title: '풍년이에요! 🌾',\n      desc: '목표 예산 대비 아주 알뜰하게 지출 및 저축을 관리하고 있어요.'\n    }\n  }\n\n  if (percent \u003C= 95) {\n    return {\n      title: '안정적인 수확이에요! 🌱',\n      desc: '계획했던 예산 범위 내에서 잘 유지되고 있어요.'\n    }\n  }\n\n  return {\n    title: '씨앗 조심! ⚠️',\n    desc: '지출 및 저축 금액이 예산 한도에 거의 다다랐어요.'\n  }\n})\n",[367,726,727,750,770,774,799,806,823,838,843,848,852,869,875,890,903,907,911,915,922,938,952,956],{"__ignoreMap":365},[370,728,729,731,734,736,739,741,744,747],{"class":372,"line":373},[370,730,538],{"class":383},[370,732,733],{"class":405}," harvestEvaluation ",[370,735,387],{"class":376},[370,737,738],{"class":546}," computed",[370,740,550],{"class":405},[370,742,743],{"class":376},"()",[370,745,746],{"class":383}," =>",[370,748,749],{"class":376}," {\n",[370,751,752,755,758,761,764,767],{"class":372,"line":402},[370,753,754],{"class":383},"  const",[370,756,757],{"class":405}," percent",[370,759,760],{"class":376}," =",[370,762,763],{"class":405}," expenseUsagePercent",[370,765,766],{"class":376},".",[370,768,769],{"class":405},"value\n",[370,771,772],{"class":372,"line":409},[370,773,461],{"emptyLinePlaceholder":460},[370,775,776,780,783,786,789,793,796],{"class":372,"line":415},[370,777,779],{"class":778},"s7zQu","  if",[370,781,782],{"class":380}," (",[370,784,785],{"class":405},"percent",[370,787,788],{"class":376}," \u003C=",[370,790,792],{"class":791},"sbssI"," 70",[370,794,795],{"class":380},") ",[370,797,798],{"class":376},"{\n",[370,800,801,804],{"class":372,"line":421},[370,802,803],{"class":778},"    return",[370,805,749],{"class":376},[370,807,808,811,813,815,818,820],{"class":372,"line":427},[370,809,810],{"class":380},"      title",[370,812,588],{"class":376},[370,814,591],{"class":376},[370,816,817],{"class":393},"풍년이에요! 🌾",[370,819,553],{"class":376},[370,821,822],{"class":376},",\n",[370,824,825,828,830,832,835],{"class":372,"line":433},[370,826,827],{"class":380},"      desc",[370,829,588],{"class":376},[370,831,591],{"class":376},[370,833,834],{"class":393},"목표 예산 대비 아주 알뜰하게 지출 및 저축을 관리하고 있어요.",[370,836,837],{"class":376},"'\n",[370,839,840],{"class":372,"line":439},[370,841,842],{"class":376},"    }\n",[370,844,845],{"class":372,"line":445},[370,846,847],{"class":376},"  }\n",[370,849,850],{"class":372,"line":451},[370,851,461],{"emptyLinePlaceholder":460},[370,853,854,856,858,860,862,865,867],{"class":372,"line":457},[370,855,779],{"class":778},[370,857,782],{"class":380},[370,859,785],{"class":405},[370,861,788],{"class":376},[370,863,864],{"class":791}," 95",[370,866,795],{"class":380},[370,868,798],{"class":376},[370,870,871,873],{"class":372,"line":464},[370,872,803],{"class":778},[370,874,749],{"class":376},[370,876,877,879,881,883,886,888],{"class":372,"line":469},[370,878,810],{"class":380},[370,880,588],{"class":376},[370,882,591],{"class":376},[370,884,885],{"class":393},"안정적인 수확이에요! 🌱",[370,887,553],{"class":376},[370,889,822],{"class":376},[370,891,892,894,896,898,901],{"class":372,"line":474},[370,893,827],{"class":380},[370,895,588],{"class":376},[370,897,591],{"class":376},[370,899,900],{"class":393},"계획했던 예산 범위 내에서 잘 유지되고 있어요.",[370,902,837],{"class":376},[370,904,905],{"class":372,"line":480},[370,906,842],{"class":376},[370,908,909],{"class":372,"line":485},[370,910,847],{"class":376},[370,912,913],{"class":372,"line":490},[370,914,461],{"emptyLinePlaceholder":460},[370,916,917,920],{"class":372,"line":496},[370,918,919],{"class":778},"  return",[370,921,749],{"class":376},[370,923,924,927,929,931,934,936],{"class":372,"line":501},[370,925,926],{"class":380},"    title",[370,928,588],{"class":376},[370,930,591],{"class":376},[370,932,933],{"class":393},"씨앗 조심! ⚠️",[370,935,553],{"class":376},[370,937,822],{"class":376},[370,939,940,943,945,947,950],{"class":372,"line":507},[370,941,942],{"class":380},"    desc",[370,944,588],{"class":376},[370,946,591],{"class":376},[370,948,949],{"class":393},"지출 및 저축 금액이 예산 한도에 거의 다다랐어요.",[370,951,837],{"class":376},[370,953,954],{"class":372,"line":512},[370,955,847],{"class":376},[370,957,959,962],{"class":372,"line":958},22,[370,960,961],{"class":376},"}",[370,963,561],{"class":405},[278,965,966,967,970],{},"단순한 경고 문구보다는 BroBean의 농장 컨셉에 맞춰 ",[282,968,969],{},"풍년, 수확, 씨앗"," 같은 표현을 사용했다.",[278,972,973],{},"그리고 평가 카드 아래에는 지출 예산과 저축 목표를 각각 프로그레스 바로 표현했다.",[360,975,977],{"className":529,"code":976,"language":531,"meta":365,"style":365},"const expenseUsagePercent = computed(() => {\n  const { totalExpense } = reportData.value\n\n  return Math.min(\n    Math.round((totalExpense \u002F expenseBudget.value) * 100),\n    100\n  )\n})\n\nconst savingsPercent = computed(() => {\n  const { totalSavings } = reportData.value\n\n  return Math.min(\n    Math.round((totalSavings \u002F savingsGoal.value) * 100),\n    100\n  )\n})\n",[367,978,979,998,1020,1024,1039,1079,1084,1089,1095,1099,1118,1137,1141,1153,1185,1189,1193],{"__ignoreMap":365},[370,980,981,983,986,988,990,992,994,996],{"class":372,"line":373},[370,982,538],{"class":383},[370,984,985],{"class":405}," expenseUsagePercent ",[370,987,387],{"class":376},[370,989,738],{"class":546},[370,991,550],{"class":405},[370,993,743],{"class":376},[370,995,746],{"class":383},[370,997,749],{"class":376},[370,999,1000,1002,1005,1008,1011,1013,1016,1018],{"class":372,"line":402},[370,1001,754],{"class":383},[370,1003,1004],{"class":376}," {",[370,1006,1007],{"class":405}," totalExpense",[370,1009,1010],{"class":376}," }",[370,1012,760],{"class":376},[370,1014,1015],{"class":405}," reportData",[370,1017,766],{"class":376},[370,1019,769],{"class":405},[370,1021,1022],{"class":372,"line":409},[370,1023,461],{"emptyLinePlaceholder":460},[370,1025,1026,1028,1031,1033,1036],{"class":372,"line":415},[370,1027,919],{"class":778},[370,1029,1030],{"class":405}," Math",[370,1032,766],{"class":376},[370,1034,1035],{"class":546},"min",[370,1037,1038],{"class":380},"(\n",[370,1040,1041,1044,1046,1049,1052,1055,1058,1061,1063,1066,1068,1071,1074,1077],{"class":372,"line":421},[370,1042,1043],{"class":405},"    Math",[370,1045,766],{"class":376},[370,1047,1048],{"class":546},"round",[370,1050,1051],{"class":380},"((",[370,1053,1054],{"class":405},"totalExpense",[370,1056,1057],{"class":376}," \u002F",[370,1059,1060],{"class":405}," expenseBudget",[370,1062,766],{"class":376},[370,1064,1065],{"class":405},"value",[370,1067,795],{"class":380},[370,1069,1070],{"class":376},"*",[370,1072,1073],{"class":791}," 100",[370,1075,1076],{"class":380},")",[370,1078,822],{"class":376},[370,1080,1081],{"class":372,"line":427},[370,1082,1083],{"class":791},"    100\n",[370,1085,1086],{"class":372,"line":433},[370,1087,1088],{"class":380},"  )\n",[370,1090,1091,1093],{"class":372,"line":439},[370,1092,961],{"class":376},[370,1094,561],{"class":405},[370,1096,1097],{"class":372,"line":445},[370,1098,461],{"emptyLinePlaceholder":460},[370,1100,1101,1103,1106,1108,1110,1112,1114,1116],{"class":372,"line":451},[370,1102,538],{"class":383},[370,1104,1105],{"class":405}," savingsPercent ",[370,1107,387],{"class":376},[370,1109,738],{"class":546},[370,1111,550],{"class":405},[370,1113,743],{"class":376},[370,1115,746],{"class":383},[370,1117,749],{"class":376},[370,1119,1120,1122,1124,1127,1129,1131,1133,1135],{"class":372,"line":457},[370,1121,754],{"class":383},[370,1123,1004],{"class":376},[370,1125,1126],{"class":405}," totalSavings",[370,1128,1010],{"class":376},[370,1130,760],{"class":376},[370,1132,1015],{"class":405},[370,1134,766],{"class":376},[370,1136,769],{"class":405},[370,1138,1139],{"class":372,"line":464},[370,1140,461],{"emptyLinePlaceholder":460},[370,1142,1143,1145,1147,1149,1151],{"class":372,"line":469},[370,1144,919],{"class":778},[370,1146,1030],{"class":405},[370,1148,766],{"class":376},[370,1150,1035],{"class":546},[370,1152,1038],{"class":380},[370,1154,1155,1157,1159,1161,1163,1166,1168,1171,1173,1175,1177,1179,1181,1183],{"class":372,"line":474},[370,1156,1043],{"class":405},[370,1158,766],{"class":376},[370,1160,1048],{"class":546},[370,1162,1051],{"class":380},[370,1164,1165],{"class":405},"totalSavings",[370,1167,1057],{"class":376},[370,1169,1170],{"class":405}," savingsGoal",[370,1172,766],{"class":376},[370,1174,1065],{"class":405},[370,1176,795],{"class":380},[370,1178,1070],{"class":376},[370,1180,1073],{"class":791},[370,1182,1076],{"class":380},[370,1184,822],{"class":376},[370,1186,1187],{"class":372,"line":480},[370,1188,1083],{"class":791},[370,1190,1191],{"class":372,"line":485},[370,1192,1088],{"class":380},[370,1194,1195,1197],{"class":372,"line":490},[370,1196,961],{"class":376},[370,1198,561],{"class":405},[278,1200,1201,1202,1205],{},"따라서 사용자는 이번 달의 소비 상태와 함께 ",[282,1203,1204],{},"예산 사용량과 저축 목표 달성률","도 바로 확인할 수 있다.",[322,1207],{},[325,1209,1211],{"id":1210},"수입지출저축-핵심-지표","💰 수입·지출·저축 핵심 지표",[278,1213,1214],{},"평가 카드 다음에는 이번 달의 주요 금액을 빠르게 확인할 수 있도록 핵심 지표를 배치했다.",[344,1216,1218],{"className":1217},[347,348,349],[351,1219],{"alt":1220,"src":1221,"width":355},"BroBean 수확 정산 핵심 지표","\u002Fimages\u002Fbrobean\u002Freport9.png",[278,1223,1224],{},"먼저 세 가지 핵심 지표를 보여준다.",[290,1226,1227,1230,1233],{},[293,1228,1229],{},"총 수입",[293,1231,1232],{},"총 지출",[293,1234,1235],{},"총 저축",[278,1237,1238],{},"그리고 그 아래에는 단순한 총액을 넘어 실제 자산 상태를 확인할 수 있도록",[290,1240,1241,1244],{},[293,1242,1243],{},"순수익 잔액",[293,1245,1246],{},"실사용 가용 현금",[278,1248,1249],{},"을 추가했다.",[360,1251,1253],{"className":529,"code":1252,"language":531,"meta":365,"style":365},"const netProfit = computed(() =>\n  reportData.value.totalIncome -\n  reportData.value.totalExpense\n)\n\nconst availableCash = computed(() =>\n  reportData.value.totalIncome -\n  reportData.value.totalExpense -\n  reportData.value.totalSavings\n)\n",[367,1254,1255,1273,1290,1303,1307,1311,1328,1342,1357,1370],{"__ignoreMap":365},[370,1256,1257,1259,1262,1264,1266,1268,1270],{"class":372,"line":373},[370,1258,538],{"class":383},[370,1260,1261],{"class":405}," netProfit ",[370,1263,387],{"class":376},[370,1265,738],{"class":546},[370,1267,550],{"class":405},[370,1269,743],{"class":376},[370,1271,1272],{"class":383}," =>\n",[370,1274,1275,1278,1280,1282,1284,1287],{"class":372,"line":402},[370,1276,1277],{"class":405},"  reportData",[370,1279,766],{"class":376},[370,1281,1065],{"class":405},[370,1283,766],{"class":376},[370,1285,1286],{"class":405},"totalIncome ",[370,1288,1289],{"class":376},"-\n",[370,1291,1292,1294,1296,1298,1300],{"class":372,"line":409},[370,1293,1277],{"class":405},[370,1295,766],{"class":376},[370,1297,1065],{"class":405},[370,1299,766],{"class":376},[370,1301,1302],{"class":405},"totalExpense\n",[370,1304,1305],{"class":372,"line":415},[370,1306,561],{"class":405},[370,1308,1309],{"class":372,"line":421},[370,1310,461],{"emptyLinePlaceholder":460},[370,1312,1313,1315,1318,1320,1322,1324,1326],{"class":372,"line":427},[370,1314,538],{"class":383},[370,1316,1317],{"class":405}," availableCash ",[370,1319,387],{"class":376},[370,1321,738],{"class":546},[370,1323,550],{"class":405},[370,1325,743],{"class":376},[370,1327,1272],{"class":383},[370,1329,1330,1332,1334,1336,1338,1340],{"class":372,"line":433},[370,1331,1277],{"class":405},[370,1333,766],{"class":376},[370,1335,1065],{"class":405},[370,1337,766],{"class":376},[370,1339,1286],{"class":405},[370,1341,1289],{"class":376},[370,1343,1344,1346,1348,1350,1352,1355],{"class":372,"line":439},[370,1345,1277],{"class":405},[370,1347,766],{"class":376},[370,1349,1065],{"class":405},[370,1351,766],{"class":376},[370,1353,1354],{"class":405},"totalExpense ",[370,1356,1289],{"class":376},[370,1358,1359,1361,1363,1365,1367],{"class":372,"line":445},[370,1360,1277],{"class":405},[370,1362,766],{"class":376},[370,1364,1065],{"class":405},[370,1366,766],{"class":376},[370,1368,1369],{"class":405},"totalSavings\n",[370,1371,1372],{"class":372,"line":451},[370,1373,561],{"class":405},[278,1375,1376],{},"여기서 두 값은 비슷해 보이지만 의미를 다르게 잡았다.",[278,1378,1379,1381,1382,1384],{},[282,1380,1243],{},"은 수입에서 생활 지출을 제외한 금액이고, ",[282,1383,1246],{},"은 여기에 저축까지 제외한 금액이다.",[278,1386,1387],{},"즉,",[360,1389,1394],{"className":1390,"code":1392,"language":1393,"meta":365},[1391],"language-text","수입\n └─ 지출 제외\n     └─ 순수익\n\n수입\n └─ 지출 제외\n     └─ 저축 제외\n         └─ 실사용 가용 현금\n","text",[367,1395,1392],{"__ignoreMap":365},[278,1397,1398],{},"이라는 흐름으로 이해할 수 있다.",[322,1400],{},[325,1402,1404],{"id":1403},"주차별-소비-패턴-분석","📊 주차별 소비 패턴 분석",[278,1406,1407],{},"월별 총액만 봐서는 한 달 동안 소비가 언제 집중됐는지 알기 어렵다.",[278,1409,1410,1411,1249],{},"그래서 다음으로 ",[282,1412,1413],{},"주차별 소비 패턴 분석",[344,1415,1417],{"className":1416},[347,348,349],[351,1418],{"alt":1419,"src":1420,"width":355},"BroBean 주차별 소비 패턴 분석","\u002Fimages\u002Fbrobean\u002Freport2.png",[278,1422,1423,1424,1427],{},"Chart.js의 ",[367,1425,1426],{},"Bar"," 차트를 사용해서 1주차부터 4주차까지의 지출 흐름을 막대 그래프로 표현했다.",[360,1429,1431],{"className":529,"code":1430,"language":531,"meta":365,"style":365},"const weeklyBarChartData = computed(() => ({\n  labels: ['1주차', '2주차', '3주차', '4주차'],\n\n  datasets: [\n    {\n      label: '주차별 지출',\n      data: [\n        Math.round(reportData.value.totalExpense * 0.25),\n        Math.round(reportData.value.totalExpense * 0.35),\n        Math.round(reportData.value.totalExpense * 0.20),\n        Math.round(reportData.value.totalExpense * 0.20)\n      ],\n      backgroundColor: '#06B6D4',\n      borderRadius: 6,\n      barThickness: 18\n    }\n  ]\n}))\n",[367,1432,1433,1454,1503,1507,1516,1521,1537,1546,1575,1602,1629,1653,1660,1676,1688,1698,1702,1707],{"__ignoreMap":365},[370,1434,1435,1437,1440,1442,1444,1446,1448,1450,1452],{"class":372,"line":373},[370,1436,538],{"class":383},[370,1438,1439],{"class":405}," weeklyBarChartData ",[370,1441,387],{"class":376},[370,1443,738],{"class":546},[370,1445,550],{"class":405},[370,1447,743],{"class":376},[370,1449,746],{"class":383},[370,1451,782],{"class":405},[370,1453,798],{"class":376},[370,1455,1456,1459,1461,1464,1466,1469,1471,1473,1475,1478,1480,1482,1484,1487,1489,1491,1493,1496,1498,1501],{"class":372,"line":402},[370,1457,1458],{"class":380},"  labels",[370,1460,588],{"class":376},[370,1462,1463],{"class":405}," [",[370,1465,553],{"class":376},[370,1467,1468],{"class":393},"1주차",[370,1470,553],{"class":376},[370,1472,599],{"class":376},[370,1474,591],{"class":376},[370,1476,1477],{"class":393},"2주차",[370,1479,553],{"class":376},[370,1481,599],{"class":376},[370,1483,591],{"class":376},[370,1485,1486],{"class":393},"3주차",[370,1488,553],{"class":376},[370,1490,599],{"class":376},[370,1492,591],{"class":376},[370,1494,1495],{"class":393},"4주차",[370,1497,553],{"class":376},[370,1499,1500],{"class":405},"]",[370,1502,822],{"class":376},[370,1504,1505],{"class":372,"line":409},[370,1506,461],{"emptyLinePlaceholder":460},[370,1508,1509,1512,1514],{"class":372,"line":415},[370,1510,1511],{"class":380},"  datasets",[370,1513,588],{"class":376},[370,1515,577],{"class":405},[370,1517,1518],{"class":372,"line":421},[370,1519,1520],{"class":376},"    {\n",[370,1522,1523,1526,1528,1530,1533,1535],{"class":372,"line":427},[370,1524,1525],{"class":380},"      label",[370,1527,588],{"class":376},[370,1529,591],{"class":376},[370,1531,1532],{"class":393},"주차별 지출",[370,1534,553],{"class":376},[370,1536,822],{"class":376},[370,1538,1539,1542,1544],{"class":372,"line":433},[370,1540,1541],{"class":380},"      data",[370,1543,588],{"class":376},[370,1545,577],{"class":405},[370,1547,1548,1551,1553,1555,1558,1560,1562,1564,1566,1568,1571,1573],{"class":372,"line":439},[370,1549,1550],{"class":405},"        Math",[370,1552,766],{"class":376},[370,1554,1048],{"class":546},[370,1556,1557],{"class":405},"(reportData",[370,1559,766],{"class":376},[370,1561,1065],{"class":405},[370,1563,766],{"class":376},[370,1565,1354],{"class":405},[370,1567,1070],{"class":376},[370,1569,1570],{"class":791}," 0.25",[370,1572,1076],{"class":405},[370,1574,822],{"class":376},[370,1576,1577,1579,1581,1583,1585,1587,1589,1591,1593,1595,1598,1600],{"class":372,"line":445},[370,1578,1550],{"class":405},[370,1580,766],{"class":376},[370,1582,1048],{"class":546},[370,1584,1557],{"class":405},[370,1586,766],{"class":376},[370,1588,1065],{"class":405},[370,1590,766],{"class":376},[370,1592,1354],{"class":405},[370,1594,1070],{"class":376},[370,1596,1597],{"class":791}," 0.35",[370,1599,1076],{"class":405},[370,1601,822],{"class":376},[370,1603,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1625,1627],{"class":372,"line":451},[370,1605,1550],{"class":405},[370,1607,766],{"class":376},[370,1609,1048],{"class":546},[370,1611,1557],{"class":405},[370,1613,766],{"class":376},[370,1615,1065],{"class":405},[370,1617,766],{"class":376},[370,1619,1354],{"class":405},[370,1621,1070],{"class":376},[370,1623,1624],{"class":791}," 0.20",[370,1626,1076],{"class":405},[370,1628,822],{"class":376},[370,1630,1631,1633,1635,1637,1639,1641,1643,1645,1647,1649,1651],{"class":372,"line":457},[370,1632,1550],{"class":405},[370,1634,766],{"class":376},[370,1636,1048],{"class":546},[370,1638,1557],{"class":405},[370,1640,766],{"class":376},[370,1642,1065],{"class":405},[370,1644,766],{"class":376},[370,1646,1354],{"class":405},[370,1648,1070],{"class":376},[370,1650,1624],{"class":791},[370,1652,561],{"class":405},[370,1654,1655,1658],{"class":372,"line":464},[370,1656,1657],{"class":405},"      ]",[370,1659,822],{"class":376},[370,1661,1662,1665,1667,1669,1672,1674],{"class":372,"line":469},[370,1663,1664],{"class":380},"      backgroundColor",[370,1666,588],{"class":376},[370,1668,591],{"class":376},[370,1670,1671],{"class":393},"#06B6D4",[370,1673,553],{"class":376},[370,1675,822],{"class":376},[370,1677,1678,1681,1683,1686],{"class":372,"line":474},[370,1679,1680],{"class":380},"      borderRadius",[370,1682,588],{"class":376},[370,1684,1685],{"class":791}," 6",[370,1687,822],{"class":376},[370,1689,1690,1693,1695],{"class":372,"line":480},[370,1691,1692],{"class":380},"      barThickness",[370,1694,588],{"class":376},[370,1696,1697],{"class":791}," 18\n",[370,1699,1700],{"class":372,"line":485},[370,1701,842],{"class":376},[370,1703,1704],{"class":372,"line":490},[370,1705,1706],{"class":405},"  ]\n",[370,1708,1709,1711],{"class":372,"line":496},[370,1710,961],{"class":376},[370,1712,1713],{"class":405},"))\n",[278,1715,1716],{},"이를 통해",[290,1718,1719,1722,1725],{},[293,1720,1721],{},"특정 주차에 소비가 몰렸는지",[293,1723,1724],{},"월말에 지출이 증가했는지",[293,1726,1727],{},"비교적 균등하게 소비했는지",[278,1729,1730],{},"등을 한눈에 확인할 수 있다.",[322,1732],{},[325,1734,1736],{"id":1735},"카테고리별-소비-비중","🥧 카테고리별 소비 비중",[278,1738,1739,1740,1743],{},"다음은 ",[282,1741,1742],{},"어디에 가장 많은 돈을 사용했는지"," 확인하는 영역이다.",[278,1745,1746],{},"가계부를 작성할 때 카테고리를 함께 저장하기 때문에, 이 데이터를 기반으로 카테고리별 지출 비율을 도넛 차트로 표현했다.",[344,1748,1750],{"className":1749},[347,348,349],[351,1751],{"alt":1752,"src":1753,"width":355},"BroBean 카테고리별 소비 비중","\u002Fimages\u002Fbrobean\u002Freport3.png",[278,1755,1423,1756,1759],{},[367,1757,1758],{},"Doughnut"," 차트를 사용했고, 각 카테고리의 금액과 색상을 데이터로 전달했다.",[360,1761,1763],{"className":529,"code":1762,"language":531,"meta":365,"style":365},"const categoryChartData = computed(() => ({\n  labels: reportData.value.categories.map(c => c.category),\n\n  datasets: [\n    {\n      data: reportData.value.categories.map(c => c.amount),\n      backgroundColor: reportData.value.categories.map(c => c.color),\n      borderWidth: 3,\n      hoverOffset: 8,\n      borderRadius: 6\n    }\n  ]\n}))\n",[367,1764,1765,1786,1826,1830,1838,1842,1877,1912,1924,1936,1945,1949,1953],{"__ignoreMap":365},[370,1766,1767,1769,1772,1774,1776,1778,1780,1782,1784],{"class":372,"line":373},[370,1768,538],{"class":383},[370,1770,1771],{"class":405}," categoryChartData ",[370,1773,387],{"class":376},[370,1775,738],{"class":546},[370,1777,550],{"class":405},[370,1779,743],{"class":376},[370,1781,746],{"class":383},[370,1783,782],{"class":405},[370,1785,798],{"class":376},[370,1787,1788,1790,1792,1794,1796,1798,1800,1803,1805,1808,1810,1814,1816,1819,1821,1824],{"class":372,"line":402},[370,1789,1458],{"class":380},[370,1791,588],{"class":376},[370,1793,1015],{"class":405},[370,1795,766],{"class":376},[370,1797,1065],{"class":405},[370,1799,766],{"class":376},[370,1801,1802],{"class":405},"categories",[370,1804,766],{"class":376},[370,1806,1807],{"class":546},"map",[370,1809,550],{"class":405},[370,1811,1813],{"class":1812},"sHdIc","c",[370,1815,746],{"class":383},[370,1817,1818],{"class":405}," c",[370,1820,766],{"class":376},[370,1822,1823],{"class":405},"category)",[370,1825,822],{"class":376},[370,1827,1828],{"class":372,"line":409},[370,1829,461],{"emptyLinePlaceholder":460},[370,1831,1832,1834,1836],{"class":372,"line":415},[370,1833,1511],{"class":380},[370,1835,588],{"class":376},[370,1837,577],{"class":405},[370,1839,1840],{"class":372,"line":421},[370,1841,1520],{"class":376},[370,1843,1844,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868,1870,1872,1875],{"class":372,"line":427},[370,1845,1541],{"class":380},[370,1847,588],{"class":376},[370,1849,1015],{"class":405},[370,1851,766],{"class":376},[370,1853,1065],{"class":405},[370,1855,766],{"class":376},[370,1857,1802],{"class":405},[370,1859,766],{"class":376},[370,1861,1807],{"class":546},[370,1863,550],{"class":405},[370,1865,1813],{"class":1812},[370,1867,746],{"class":383},[370,1869,1818],{"class":405},[370,1871,766],{"class":376},[370,1873,1874],{"class":405},"amount)",[370,1876,822],{"class":376},[370,1878,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903,1905,1907,1910],{"class":372,"line":433},[370,1880,1664],{"class":380},[370,1882,588],{"class":376},[370,1884,1015],{"class":405},[370,1886,766],{"class":376},[370,1888,1065],{"class":405},[370,1890,766],{"class":376},[370,1892,1802],{"class":405},[370,1894,766],{"class":376},[370,1896,1807],{"class":546},[370,1898,550],{"class":405},[370,1900,1813],{"class":1812},[370,1902,746],{"class":383},[370,1904,1818],{"class":405},[370,1906,766],{"class":376},[370,1908,1909],{"class":405},"color)",[370,1911,822],{"class":376},[370,1913,1914,1917,1919,1922],{"class":372,"line":439},[370,1915,1916],{"class":380},"      borderWidth",[370,1918,588],{"class":376},[370,1920,1921],{"class":791}," 3",[370,1923,822],{"class":376},[370,1925,1926,1929,1931,1934],{"class":372,"line":445},[370,1927,1928],{"class":380},"      hoverOffset",[370,1930,588],{"class":376},[370,1932,1933],{"class":791}," 8",[370,1935,822],{"class":376},[370,1937,1938,1940,1942],{"class":372,"line":451},[370,1939,1680],{"class":380},[370,1941,588],{"class":376},[370,1943,1944],{"class":791}," 6\n",[370,1946,1947],{"class":372,"line":457},[370,1948,842],{"class":376},[370,1950,1951],{"class":372,"line":464},[370,1952,1706],{"class":405},[370,1954,1955,1957],{"class":372,"line":469},[370,1956,961],{"class":376},[370,1958,1713],{"class":405},[278,1960,1961],{},"도넛 차트 중앙에는 전체 지출 금액을 표시하고, 아래에는 각 카테고리별 비율을 함께 보여주도록 했다.",[278,1963,1964,1965,1968],{},"특히 가장 많은 금액을 사용한 카테고리는 ",[367,1966,1967],{},"최대"," 배지로 별도 표시했다.",[278,1970,1971,1972,1975],{},"이를 통해 사용자가 차트를 직접 해석하지 않아도 ",[282,1973,1974],{},"어떤 영역에서 소비가 가장 많이 발생했는지"," 바로 확인할 수 있도록 했다.",[322,1977],{},[325,1979,1981],{"id":1980},"월별-수입지출저축-비교","📈 월별 수입·지출·저축 비교",[278,1983,1984],{},"한 달의 소비만 보는 것으로 끝나지 않도록 최근 월별 자산 흐름도 추가했다.",[344,1986,1988],{"className":1987},[347,348,349],[351,1989],{"alt":1990,"src":1991,"width":355},"BroBean 월별 수입 지출 저축 비교 차트","\u002Fimages\u002Fbrobean\u002Freport3-2.png",[278,1993,1994],{},"수입, 지출, 저축을 각각 하나의 데이터셋으로 구성해서 동일한 그래프에서 비교할 수 있도록 했다.",[360,1996,1998],{"className":529,"code":1997,"language":531,"meta":365,"style":365},"const multiBarChartData = computed(() => {\n  const trends = reportData.value.monthlyTrends\n\n  return {\n    labels: trends.map(t => t.month),\n\n    datasets: [\n      {\n        label: '수입',\n        data: trends.map(t => t.income)\n      },\n      {\n        label: '지출',\n        data: trends.map(t => t.expense)\n      },\n      {\n        label: '저축',\n        data: trends.map(t => t.savings)\n      }\n    ]\n  }\n})\n",[367,1999,2000,2019,2039,2043,2049,2081,2085,2094,2099,2115,2143,2148,2152,2167,2194,2198,2202,2217,2244,2249,2254,2258],{"__ignoreMap":365},[370,2001,2002,2004,2007,2009,2011,2013,2015,2017],{"class":372,"line":373},[370,2003,538],{"class":383},[370,2005,2006],{"class":405}," multiBarChartData ",[370,2008,387],{"class":376},[370,2010,738],{"class":546},[370,2012,550],{"class":405},[370,2014,743],{"class":376},[370,2016,746],{"class":383},[370,2018,749],{"class":376},[370,2020,2021,2023,2026,2028,2030,2032,2034,2036],{"class":372,"line":402},[370,2022,754],{"class":383},[370,2024,2025],{"class":405}," trends",[370,2027,760],{"class":376},[370,2029,1015],{"class":405},[370,2031,766],{"class":376},[370,2033,1065],{"class":405},[370,2035,766],{"class":376},[370,2037,2038],{"class":405},"monthlyTrends\n",[370,2040,2041],{"class":372,"line":409},[370,2042,461],{"emptyLinePlaceholder":460},[370,2044,2045,2047],{"class":372,"line":415},[370,2046,919],{"class":778},[370,2048,749],{"class":376},[370,2050,2051,2054,2056,2058,2060,2062,2064,2067,2069,2072,2074,2077,2079],{"class":372,"line":421},[370,2052,2053],{"class":380},"    labels",[370,2055,588],{"class":376},[370,2057,2025],{"class":405},[370,2059,766],{"class":376},[370,2061,1807],{"class":546},[370,2063,550],{"class":380},[370,2065,2066],{"class":1812},"t",[370,2068,746],{"class":383},[370,2070,2071],{"class":405}," t",[370,2073,766],{"class":376},[370,2075,2076],{"class":405},"month",[370,2078,1076],{"class":380},[370,2080,822],{"class":376},[370,2082,2083],{"class":372,"line":427},[370,2084,461],{"emptyLinePlaceholder":460},[370,2086,2087,2090,2092],{"class":372,"line":433},[370,2088,2089],{"class":380},"    datasets",[370,2091,588],{"class":376},[370,2093,577],{"class":380},[370,2095,2096],{"class":372,"line":439},[370,2097,2098],{"class":376},"      {\n",[370,2100,2101,2104,2106,2108,2111,2113],{"class":372,"line":445},[370,2102,2103],{"class":380},"        label",[370,2105,588],{"class":376},[370,2107,591],{"class":376},[370,2109,2110],{"class":393},"수입",[370,2112,553],{"class":376},[370,2114,822],{"class":376},[370,2116,2117,2120,2122,2124,2126,2128,2130,2132,2134,2136,2138,2141],{"class":372,"line":451},[370,2118,2119],{"class":380},"        data",[370,2121,588],{"class":376},[370,2123,2025],{"class":405},[370,2125,766],{"class":376},[370,2127,1807],{"class":546},[370,2129,550],{"class":380},[370,2131,2066],{"class":1812},[370,2133,746],{"class":383},[370,2135,2071],{"class":405},[370,2137,766],{"class":376},[370,2139,2140],{"class":405},"income",[370,2142,561],{"class":380},[370,2144,2145],{"class":372,"line":457},[370,2146,2147],{"class":376},"      },\n",[370,2149,2150],{"class":372,"line":464},[370,2151,2098],{"class":376},[370,2153,2154,2156,2158,2160,2163,2165],{"class":372,"line":469},[370,2155,2103],{"class":380},[370,2157,588],{"class":376},[370,2159,591],{"class":376},[370,2161,2162],{"class":393},"지출",[370,2164,553],{"class":376},[370,2166,822],{"class":376},[370,2168,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187,2189,2192],{"class":372,"line":474},[370,2170,2119],{"class":380},[370,2172,588],{"class":376},[370,2174,2025],{"class":405},[370,2176,766],{"class":376},[370,2178,1807],{"class":546},[370,2180,550],{"class":380},[370,2182,2066],{"class":1812},[370,2184,746],{"class":383},[370,2186,2071],{"class":405},[370,2188,766],{"class":376},[370,2190,2191],{"class":405},"expense",[370,2193,561],{"class":380},[370,2195,2196],{"class":372,"line":480},[370,2197,2147],{"class":376},[370,2199,2200],{"class":372,"line":485},[370,2201,2098],{"class":376},[370,2203,2204,2206,2208,2210,2213,2215],{"class":372,"line":490},[370,2205,2103],{"class":380},[370,2207,588],{"class":376},[370,2209,591],{"class":376},[370,2211,2212],{"class":393},"저축",[370,2214,553],{"class":376},[370,2216,822],{"class":376},[370,2218,2219,2221,2223,2225,2227,2229,2231,2233,2235,2237,2239,2242],{"class":372,"line":496},[370,2220,2119],{"class":380},[370,2222,588],{"class":376},[370,2224,2025],{"class":405},[370,2226,766],{"class":376},[370,2228,1807],{"class":546},[370,2230,550],{"class":380},[370,2232,2066],{"class":1812},[370,2234,746],{"class":383},[370,2236,2071],{"class":405},[370,2238,766],{"class":376},[370,2240,2241],{"class":405},"savings",[370,2243,561],{"class":380},[370,2245,2246],{"class":372,"line":501},[370,2247,2248],{"class":376},"      }\n",[370,2250,2251],{"class":372,"line":507},[370,2252,2253],{"class":380},"    ]\n",[370,2255,2256],{"class":372,"line":512},[370,2257,847],{"class":376},[370,2259,2260,2262],{"class":372,"line":958},[370,2261,961],{"class":376},[370,2263,561],{"class":405},[278,2265,2266],{},"이 그래프를 통해 단순히",[700,2268,2269],{},[278,2270,2271],{},"\"이번 달에 얼마를 썼다.\"",[278,2273,2274],{},"에서 끝나는 것이 아니라,",[700,2276,2277],{},[278,2278,2279],{},"\"최근 몇 달 동안 수입과 지출, 저축이 어떻게 변화했는가?\"",[278,2281,2282],{},"까지 확인할 수 있도록 했다.",[322,2284],{},[325,2286,2288],{"id":2287},"️-기간-설정으로-더-넓은-범위-확인하기","🗓️ 기간 설정으로 더 넓은 범위 확인하기",[278,2290,2291,2292,2294],{},"월별 데이터만으로 부족한 경우를 위해 ",[282,2293,338],{}," 기능도 별도의 화면으로 구성했다.",[278,2296,2297,2298,2301],{},"월별 보기와 기간 설정을 하나의 컴포넌트 안에서 복잡하게 관리하기보다는 ",[367,2299,2300],{},"PeriodReport"," 컴포넌트로 분리했다.",[360,2303,2305],{"className":362,"code":2304,"language":364,"meta":365,"style":365},"\u003Ctemplate v-if=\"currentTab === 'MONTH'\">\n  \u003C!-- 월별 리포트 -->\n\u003C\u002Ftemplate>\n\n\u003Ctemplate v-else>\n  \u003CPeriodReport \u002F>\n\u003C\u002Ftemplate>\n",[367,2306,2307,2337,2343,2351,2355,2366,2376],{"__ignoreMap":365},[370,2308,2309,2311,2314,2317,2319,2321,2324,2327,2329,2332,2335],{"class":372,"line":373},[370,2310,377],{"class":376},[370,2312,2313],{"class":380},"template",[370,2315,2316],{"class":778}," v-if",[370,2318,387],{"class":376},[370,2320,390],{"class":376},[370,2322,2323],{"class":405},"currentTab ",[370,2325,2326],{"class":376},"===",[370,2328,591],{"class":376},[370,2330,2331],{"class":393},"MONTH",[370,2333,2334],{"class":376},"'\"",[370,2336,399],{"class":376},[370,2338,2339],{"class":372,"line":402},[370,2340,2342],{"class":2341},"sHwdD","  \u003C!-- 월별 리포트 -->\n",[370,2344,2345,2347,2349],{"class":372,"line":409},[370,2346,515],{"class":376},[370,2348,2313],{"class":380},[370,2350,399],{"class":376},[370,2352,2353],{"class":372,"line":415},[370,2354,461],{"emptyLinePlaceholder":460},[370,2356,2357,2359,2361,2364],{"class":372,"line":421},[370,2358,377],{"class":376},[370,2360,2313],{"class":380},[370,2362,2363],{"class":778}," v-else",[370,2365,399],{"class":376},[370,2367,2368,2371,2373],{"class":372,"line":427},[370,2369,2370],{"class":376},"  \u003C",[370,2372,2300],{"class":380},[370,2374,2375],{"class":376}," \u002F>\n",[370,2377,2378,2380,2382],{"class":372,"line":433},[370,2379,515],{"class":376},[370,2381,2313],{"class":380},[370,2383,399],{"class":376},[278,2385,2386],{},"기간 설정 화면에서는 사용자가 직접 조회 기간을 설정하고 해당 기간에 대한 소비 데이터를 분석할 수 있다.",[344,2388,2390],{"className":2389},[347,348,349],[351,2391],{"alt":2392,"src":2393,"width":355},"BroBean 수확 정산 기간 설정","\u002Fimages\u002Fbrobean\u002Freport4.png",[278,2395,2396],{},"기간 설정을 별도 컴포넌트로 분리한 덕분에 월별 리포트와 기간 리포트가 서로 다른 조회 조건과 분석 방식을 가져가더라도 각각 독립적으로 관리할 수 있게 했다.",[322,2398],{},[325,2400,2402],{"id":2401},"기간-내-카테고리별-지출-비교","🥕 기간 내 카테고리별 지출 비교",[278,2404,2405],{},"기간을 설정한 경우에는 해당 기간 동안 어떤 카테고리에서 지출이 많았는지도 비교할 수 있도록 했다.",[344,2407,2409],{"className":2408},[347,348,349],[351,2410],{"alt":2411,"src":2412,"width":355},"BroBean 기간 내 카테고리별 지출 비교","\u002Fimages\u002Fbrobean\u002Freport5.png",[278,2414,2415,2416,2419],{},"월별 보기의 카테고리 분석이 ",[282,2417,2418],{},"특정 월의 소비 비중","을 확인하는 데 초점을 맞췄다면, 기간 설정에서는 지정한 기간 전체를 기준으로 소비 카테고리를 비교한다.",[278,2421,2422],{},"따라서 한 달 단위에서는 크게 보이지 않았던 소비 패턴도 여러 달을 묶어서 확인할 수 있다.",[322,2424],{},[325,2426,2428],{"id":2427},"기간별-월별-자산-흐름","📊 기간별 월별 자산 흐름",[278,2430,2431],{},"기간 설정 화면에서는 월별 자산 흐름도 함께 확인할 수 있도록 구성했다.",[344,2433,2435],{"className":2434},[347,348,349],[351,2436],{"alt":2437,"src":2438,"width":355},"BroBean 기간별 월별 자산 흐름 추이","\u002Fimages\u002Fbrobean\u002Freport6.png",[278,2440,2441],{},"이 영역에서는 조회 기간 안에서 월별 수입과 지출, 저축의 변화를 비교한다.",[278,2443,2444,2445,2448],{},"이를 통해 단기적인 소비 패턴뿐만 아니라 ",[282,2446,2447],{},"장기적인 자산 관리 흐름","을 확인할 수 있도록 했다.",[322,2450],{},[325,2452,2454],{"id":2453},"기간-내-주차별-지출-비교","📉 기간 내 주차별 지출 비교",[278,2456,2457],{},"기간 설정에서는 주차별 소비도 추가로 비교할 수 있도록 했다.",[344,2459,2461],{"className":2460},[347,348,349],[351,2462],{"alt":2463,"src":2464,"width":355},"BroBean 기간 내 주차별 지출 비교","\u002Fimages\u002Fbrobean\u002Freport7.png",[278,2466,2467],{},"월별 분석에서는 해당 월의 1~4주차 소비를 확인했다면, 기간 리포트에서는 지정한 기간을 기준으로 주차별 지출 흐름을 비교할 수 있다.",[278,2469,2470],{},"따라서 특정 기간 동안 소비가 어느 시점에 집중됐는지 조금 더 자세하게 살펴볼 수 있다.",[322,2472],{},[325,2474,2476],{"id":2475},"화면-전체를-구성하면서-중요하게-본-것","🧩 화면 전체를 구성하면서 중요하게 본 것",[278,2478,2479,2480,2483],{},"이번 화면에서는 단순히 차트를 많이 배치하는 것보다 ",[282,2481,2482],{},"정보를 단계적으로 보여주는 것","에 초점을 맞췄다.",[278,2485,2486],{},"전체적인 흐름은 다음과 같다.",[360,2488,2491],{"className":2489,"code":2490,"language":1393,"meta":365},[1391],"수확 정산\n│\n├─ 월별 보기 \u002F 기간 설정\n│\n├─ 이달의 수확 정산 평가\n│   ├─ 지출 예산 사용률\n│   └─ 저축 목표 달성률\n│\n├─ 핵심 자산 지표\n│   ├─ 총 수입\n│   ├─ 총 지출\n│   ├─ 총 저축\n│   ├─ 순수익 잔액\n│   └─ 실사용 가용 현금\n│\n├─ 주차별 소비 패턴\n│\n├─ 카테고리별 소비 비중\n│\n└─ 월별 수입·지출·저축 비교\n",[367,2492,2490],{"__ignoreMap":365},[278,2494,2495],{},"사용자가 페이지에 들어왔을 때",[278,2497,2498],{},[282,2499,2500],{},"\"이번 달은 어떤 상태인가?\"",[278,2502,2503],{},"부터 확인하고,",[278,2505,2506],{},[282,2507,2508],{},"\"어디에 돈을 많이 썼지?\"",[278,2510,2511],{},"그리고",[278,2513,2514],{},[282,2515,2516],{},"\"최근에는 어떻게 변하고 있지?\"",[278,2518,2519],{},"순서로 자연스럽게 정보를 확인할 수 있도록 배치했다.",[278,2521,2522],{},"기간 설정으로 넘어가면 여기에서 한 단계 더 나아가",[278,2524,2525],{},[282,2526,2527],{},"\"특정 기간 동안에는 어떤 소비 패턴을 보였지?\"",[278,2529,2530],{},"를 확인할 수 있도록 했다.",[322,2532],{},[325,2534,2536],{"id":2535},"가계부의-마지막은-기록이-아니라-돌아보기","🌾 가계부의 마지막은 기록이 아니라 돌아보기",[278,2538,2539],{},"BroBean에서 가계부는 단순히 돈을 입력하는 기능으로 끝나지 않는다.",[278,2541,2542],{},"씨앗을 심고,",[278,2544,2545],{},"밭을 가꾸고,",[278,2547,2548],{},"나무를 키운 뒤,",[278,2550,2551,2552,2555],{},"마지막에는 지금까지의 결과를 ",[282,2553,2554],{},"수확해서 확인하는 과정","까지 이어진다.",[278,2557,2558,2559,2562],{},"그래서 이번에 만든 수확 정산은 단순한 통계 페이지라기보다는 ",[282,2560,2561],{},"지금까지 기록한 소비 습관을 다시 돌아보는 화면","에 가깝다.",[278,2564,2565],{},"월별 지출과 저축을 확인하고, 카테고리별 소비를 비교하고, 주차별 소비 패턴을 살펴보고, 기간을 넓혀 자산 흐름까지 확인할 수 있도록 구성했다.",[278,2567,2568,2569,2572],{},"특히 이번 화면을 만들면서 단순히 숫자를 많이 보여주는 것보다 ",[282,2570,2571],{},"사용자가 숫자를 보고 다음 행동을 생각할 수 있도록 만드는 것","이 중요하다는 점을 다시 느꼈다.",[278,2574,2575],{},"\"이번 달 지출은 얼마였지?\"에서 끝나는 것이 아니라,",[278,2577,2578],{},"\"이번 달에는 식비가 많이 나갔네.\"",[278,2580,2581],{},"\"저축 목표는 생각보다 잘 지키고 있네.\"",[278,2583,2584],{},"\"지난달보다 지출이 줄었구나.\"",[278,2586,2587],{},"처럼 자신의 소비 습관을 자연스럽게 돌아볼 수 있어야 가계부 서비스의 의미가 생긴다고 생각한다.",[278,2589,2590,2591,2594],{},"이렇게 BroBean의 주요 가계부 화면들이 하나씩 연결되면서 ",[282,2592,2593],{},"씨앗을 심고 → 밭을 가꾸고 → 나무를 키우고 → 수확하는"," 하나의 서비스 흐름도 조금씩 완성되어 가고 있다.",[2596,2597,2598],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":365,"searchDepth":402,"depth":402,"links":2600},[2601,2602,2603,2604,2605,2606,2607,2608,2609,2610,2611,2612],{"id":327,"depth":402,"text":328},{"id":687,"depth":402,"text":688},{"id":1210,"depth":402,"text":1211},{"id":1403,"depth":402,"text":1404},{"id":1735,"depth":402,"text":1736},{"id":1980,"depth":402,"text":1981},{"id":2287,"depth":402,"text":2288},{"id":2401,"depth":402,"text":2402},{"id":2427,"depth":402,"text":2428},{"id":2453,"depth":402,"text":2454},{"id":2475,"depth":402,"text":2476},{"id":2535,"depth":402,"text":2536},"2026-08-08","BroBean의 가계부 데이터를 바탕으로 수입·지출·저축 현황과 예산 달성률, 카테고리별 소비 비중, 주차별 소비 패턴, 월별 자산 흐름을 확인할 수 있는 수확 정산 화면 구현","md",null,{"tags":2618,"image":2624},[2619,2620,2621,2622,2623],"BroBean","가계부 앱","커플 가계부","소비 리포트","자산 관리","\u002Fimages\u002Fbrobean\u002Fog-image.png",{"icon":20},{"title":2627,"description":2614},"BroBean 소비 리포트 & 정산 화면 구현 - 수확 정산으로 한눈에 보는 소비 흐름","CXhhBga2Zc31f0H5yMcKlf_9IiyjpQbQQqhfEQaNrYU",[2630,2632],{"title":218,"path":219,"stem":220,"description":2631,"icon":20,"children":-1},"BroBean 가계부의 성장 일지와 나무 키우기 화면을 구현하며 지출 내역 조회, 달력 기반 기록 확인, 저축 목표 관리와 나무 성장 기능을 설계한 과정을 정리합니다.",{"title":226,"path":227,"stem":228,"description":2633,"icon":20,"children":-1},"BroBean의 알림 드롭다운과 알림 내역 페이지, 마이페이지 및 프로필·커플 연결·알림 설정 기능을 구현하며 사용자 편의 기능과 개인화 영역을 구성한 과정",1789947622790]