[{"data":1,"prerenderedAt":1965},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brobean-brobean-dev-log-09":267,"-ko-project-brobean-brobean-dev-log-09-surround":1960},[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":226,"body":269,"date":1943,"description":1944,"extension":1945,"links":1946,"meta":1947,"navigation":1955,"path":227,"seo":1956,"stem":228,"__hash__":1959},"docs_ko\u002Fko\u002F2.project\u002F2.brobean\u002F9.brobean-dev-log-09.md",{"type":270,"value":271,"toc":1928},"minimark",[272,277,286,293,296,309,312,315,320,323,326,337,340,347,355,468,481,484,536,543,546,551,554,592,599,603,606,609,613,616,623,625,629,632,639,647,654,747,750,753,757,764,767,806,813,905,908,910,914,917,920,927,930,947,973,980,982,985,988,1083,1086,1089,1091,1095,1098,1105,1108,1121,1124,1173,1176,1249,1256,1259,1262,1264,1268,1275,1278,1285,1288,1360,1363,1366,1369,1375,1382,1384,1388,1391,1398,1401,1405,1408,1455,1459,1462,1501,1504,1508,1511,1550,1553,1560,1563,1572,1575,1577,1581,1588,1591,1715,1722,1729,1731,1735,1738,1741,1763,1766,1790,1793,1796,1824,1827,1830,1832,1836,1839,1846,1849,1875,1878,1880,1884,1887,1890,1895,1898,1901,1904,1921,1924],[273,274,276],"h1",{"id":275},"알림부터-마이페이지까지-농장을-관리하는-사용자-영역-만들기","알림부터 마이페이지까지, 농장을 관리하는 사용자 영역 만들기 🌱",[278,279,280,281,285],"p",{},"앞선 글에서는 BroBean의 수입·지출·저축 데이터를 바탕으로 한 ",[282,283,284],"strong",{},"수확 정산 화면","을 구현했다.",[278,287,288,289,292],{},"가계부를 기록하고 소비 리포트를 확인하는 기능이 어느 정도 갖춰지면서, 이제는 사용자가 앱을 이용하면서 계속 마주하게 되는 ",[282,290,291],{},"개인 영역과 알림 기능","을 구성할 차례다.",[278,294,295],{},"이번 편에서는 크게 세 가지 영역을 구현했다.",[297,298,299,303,306],"ul",{},[300,301,302],"li",{},"🔔 헤더에서 바로 확인할 수 있는 알림 드롭다운",[300,304,305],{},"📋 알림을 모아서 확인하는 전체 알림 내역 페이지",[300,307,308],{},"👨‍🌾 프로필과 커플 연결, 알림 설정을 관리하는 마이페이지",[278,310,311],{},"단순히 설정 화면을 하나 추가하는 것이 아니라, BroBean의 **'농장을 함께 가꾸는 경험'**을 유지하면서 사용자 정보를 관리할 수 있도록 화면을 구성했다.",[313,314],"hr",{},[316,317,319],"h2",{"id":318},"헤더에서-바로-확인하는-알림","🔔 헤더에서 바로 확인하는 알림",[278,321,322],{},"가계부 앱은 단순히 돈을 기록하는 것에서 끝나지 않는다.",[278,324,325],{},"BroBean에서는 특히 커플이 함께 사용하는 것을 고려하고 있기 때문에,",[297,327,328,331,334],{},[300,329,330],{},"상대방이 지출을 기록했을 때",[300,332,333],{},"저축 목표에 변화가 생겼을 때",[300,335,336],{},"예산이나 퀘스트와 관련된 이벤트가 발생했을 때",[278,338,339],{},"사용자에게 알려주는 기능이 필요하다.",[278,341,342,343,346],{},"그래서 가장 먼저 ",[282,344,345],{},"앱 헤더의 알림 버튼","을 구성했다.",[278,348,349,350,354],{},"헤더에서는 ",[351,352,353],"code",{},"UDropdownMenu","를 사용해 벨 아이콘을 클릭하면 최근 알림을 바로 확인할 수 있도록 만들었다.",[356,357,362],"pre",{"className":358,"code":359,"language":360,"meta":361,"style":361},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CUDropdownMenu\n  :items=\"notificationItems\"\n  :content=\"{ side: 'bottom', align: 'end', sideOffset: 8 }\"\n>\n","vue","",[351,363,364,377,400,462],{"__ignoreMap":361},[365,366,369,373],"span",{"class":367,"line":368},"line",1,[365,370,372],{"class":371},"sMK4o","\u003C",[365,374,376],{"class":375},"swJcz","UDropdownMenu\n",[365,378,380,383,387,390,393,397],{"class":367,"line":379},2,[365,381,382],{"class":371},"  :",[365,384,386],{"class":385},"spNyl","items",[365,388,389],{"class":371},"=",[365,391,392],{"class":371},"\"",[365,394,396],{"class":395},"sTEyZ","notificationItems",[365,398,399],{"class":371},"\"\n",[365,401,403,405,408,410,412,415,418,421,424,428,431,434,437,439,441,444,446,448,451,453,457,460],{"class":367,"line":402},3,[365,404,382],{"class":371},[365,406,407],{"class":385},"content",[365,409,389],{"class":371},[365,411,392],{"class":371},[365,413,414],{"class":371},"{",[365,416,417],{"class":375}," side",[365,419,420],{"class":371},":",[365,422,423],{"class":371}," '",[365,425,427],{"class":426},"sfazB","bottom",[365,429,430],{"class":371},"'",[365,432,433],{"class":371},",",[365,435,436],{"class":375}," align",[365,438,420],{"class":371},[365,440,423],{"class":371},[365,442,443],{"class":426},"end",[365,445,430],{"class":371},[365,447,433],{"class":371},[365,449,450],{"class":375}," sideOffset",[365,452,420],{"class":371},[365,454,456],{"class":455},"sbssI"," 8",[365,458,459],{"class":371}," }",[365,461,399],{"class":371},[365,463,465],{"class":367,"line":464},4,[365,466,467],{"class":371},">\n",[469,470,475],"div",{"className":471},[472,473,474],"flex","items-center","justify-center",[476,477],"img",{"alt":478,"src":479,"width":480},"BroBean 알림 헤더 화면","\u002Fimages\u002Fbrobean\u002Fnotification.png",300,[278,482,483],{},"알림이 존재할 때는 벨 아이콘 위에 작은 빨간색 뱃지를 표시한다.",[356,485,487],{"className":358,"code":486,"language":360,"meta":361,"style":361},"\u003Cspan\n  v-if=\"unreadCount > 0\"\n  class=\"absolute top-1.5 right-1.5 w-2.5 h-2.5 rounded-full bg-rose-500 ...\"\n\u002F>\n",[351,488,489,496,517,531],{"__ignoreMap":361},[365,490,491,493],{"class":367,"line":368},[365,492,372],{"class":371},[365,494,495],{"class":375},"span\n",[365,497,498,502,504,506,509,512,515],{"class":367,"line":379},[365,499,501],{"class":500},"s7zQu","  v-if",[365,503,389],{"class":371},[365,505,392],{"class":371},[365,507,508],{"class":395},"unreadCount ",[365,510,511],{"class":371},">",[365,513,514],{"class":455}," 0",[365,516,399],{"class":371},[365,518,519,522,524,526,529],{"class":367,"line":402},[365,520,521],{"class":385},"  class",[365,523,389],{"class":371},[365,525,392],{"class":371},[365,527,528],{"class":426},"absolute top-1.5 right-1.5 w-2.5 h-2.5 rounded-full bg-rose-500 ...",[365,530,399],{"class":371},[365,532,533],{"class":367,"line":464},[365,534,535],{"class":395},"\u002F>\n",[278,537,538,539,542],{},"여기서 단순히 숫자를 표시하기보다는 ",[282,540,541],{},"안 읽은 알림이 있다는 사실 자체를 시각적으로 전달하는 방식","을 선택했다.",[278,544,545],{},"실제 BroBean 화면에서는 알림 종류에 따라 아이콘과 배경색도 다르게 구성했다.",[547,548,550],"h3",{"id":549},"저축-관련-알림","🌱 저축 관련 알림",[278,552,553],{},"저축과 관련된 알림은 초록색 계열을 사용한다.",[356,555,559],{"className":556,"code":557,"language":558,"meta":361,"style":361},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","'bg-emerald-100\u002F70 dark:bg-emerald-950\u002F60\n text-emerald-600 dark:text-emerald-400'\n","css",[351,560,561,578],{"__ignoreMap":361},[365,562,563,565,569,572,575],{"class":367,"line":368},[365,564,430],{"class":395},[365,566,568],{"class":567},"sBMFI","bg-emerald-100",[365,570,571],{"class":395},"\u002F70 dark:",[365,573,574],{"class":567},"bg-emerald-950",[365,576,577],{"class":395},"\u002F60\n",[365,579,580,583,586,589],{"class":367,"line":379},[365,581,582],{"class":567}," text-emerald-600",[365,584,585],{"class":395}," dark:",[365,587,588],{"class":567},"text-emerald-400",[365,590,591],{"class":395},"'\n",[278,593,594,595,598],{},"BroBean에서 저축은 '나무 키우기'와 연결되는 영역이기 때문에 자연스럽게 ",[282,596,597],{},"성장과 관련된 색상","을 사용했다.",[547,600,602],{"id":601},"예산-관련-알림","🌾 예산 관련 알림",[278,604,605],{},"예산 관련 알림은 황색 계열로 표현했다.",[278,607,608],{},"예산을 관리하고 농장을 가꾸는 느낌을 유지하면서, 사용자가 쉽게 구분할 수 있도록 했다.",[547,610,612],{"id":611},"퀘스트-관련-알림","🏆 퀘스트 관련 알림",[278,614,615],{},"퀘스트는 파란색 계열을 사용해 저축이나 예산과 구분했다.",[278,617,618,619,622],{},"이처럼 알림 타입마다 아이콘과 색상을 분리해두면 나중에 실제 API와 연결할 때도 ",[351,620,621],{},"notificationType","에 따라 UI를 쉽게 확장할 수 있다.",[313,624],{},[316,626,628],{"id":627},"알림-전체-내역-페이지","📋 알림 전체 내역 페이지",[278,630,631],{},"드롭다운에서 모든 알림을 확인할 수 있는 페이지로 이동할 수 있도록 했다.",[278,633,634,635,638],{},"헤더의 알림 드롭다운은 ",[282,636,637],{},"최근 알림을 빠르게 확인하는 용도","라면, 전체 알림 페이지는 과거 알림까지 확인할 수 있는 공간이다.",[469,640,642],{"className":641},[472,473,474],[476,643],{"alt":644,"src":645,"width":646},"BroBean 알림 전체 화면","\u002Fimages\u002Fbrobean\u002Fnotification2.png",400,[278,648,649,650,653],{},"알림 목록은 각각 ",[351,651,652],{},"NuxtLink","로 구성했다.",[356,655,657],{"className":358,"code":656,"language":360,"meta":361,"style":361},"\u003CNuxtLink\n  v-for=\"item in notifications\"\n  :key=\"item.id\"\n  :to=\"item.link\"\n  class=\"block p-4 rounded-2xl border transition-all\"\n>\n",[351,658,659,666,686,708,728,742],{"__ignoreMap":361},[365,660,661,663],{"class":367,"line":368},[365,662,372],{"class":371},[365,664,665],{"class":375},"NuxtLink\n",[365,667,668,671,673,675,678,681,684],{"class":367,"line":379},[365,669,670],{"class":500},"  v-for",[365,672,389],{"class":371},[365,674,392],{"class":371},[365,676,677],{"class":395},"item ",[365,679,680],{"class":371},"in",[365,682,683],{"class":395}," notifications",[365,685,399],{"class":371},[365,687,688,690,693,695,697,700,703,706],{"class":367,"line":402},[365,689,382],{"class":371},[365,691,692],{"class":385},"key",[365,694,389],{"class":371},[365,696,392],{"class":371},[365,698,699],{"class":395},"item",[365,701,702],{"class":371},".",[365,704,705],{"class":395},"id",[365,707,399],{"class":371},[365,709,710,712,715,717,719,721,723,726],{"class":367,"line":464},[365,711,382],{"class":371},[365,713,714],{"class":385},"to",[365,716,389],{"class":371},[365,718,392],{"class":371},[365,720,699],{"class":395},[365,722,702],{"class":371},[365,724,725],{"class":395},"link",[365,727,399],{"class":371},[365,729,731,733,735,737,740],{"class":367,"line":730},5,[365,732,521],{"class":385},[365,734,389],{"class":371},[365,736,392],{"class":371},[365,738,739],{"class":426},"block p-4 rounded-2xl border transition-all",[365,741,399],{"class":371},[365,743,745],{"class":367,"line":744},6,[365,746,467],{"class":371},[278,748,749],{},"따라서 알림을 클릭하면 해당 알림과 연결된 화면으로 이동할 수 있다.",[278,751,752],{},"예를 들어 저축 관련 알림이라면 저축 화면으로, 예산 관련 알림이라면 관련 관리 화면으로 이동하는 식이다.",[547,754,756],{"id":755},"읽음-읽지-않음-상태","👀 읽음 \u002F 읽지 않음 상태",[278,758,759,760,763],{},"알림 페이지에서 특히 신경 쓴 부분은 ",[282,761,762],{},"읽음 상태를 시각적으로 구분하는 것","이다.",[278,765,766],{},"읽지 않은 알림은 강조된 배경과 테두리를 사용하고, 읽은 알림은 opacity를 낮춰 상대적으로 덜 강조했다.",[356,768,772],{"className":769,"code":770,"language":771,"meta":361,"style":361},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","item.isRead\n  ? 'bg-white ... opacity-75'\n  : 'bg-amber-50\u002F20 ... shadow-xs'\n","ts",[351,773,774,783,795],{"__ignoreMap":361},[365,775,776,778,780],{"class":367,"line":368},[365,777,699],{"class":395},[365,779,702],{"class":371},[365,781,782],{"class":395},"isRead\n",[365,784,785,788,790,793],{"class":367,"line":379},[365,786,787],{"class":371},"  ?",[365,789,423],{"class":371},[365,791,792],{"class":426},"bg-white ... opacity-75",[365,794,591],{"class":371},[365,796,797,799,801,804],{"class":367,"line":402},[365,798,382],{"class":371},[365,800,423],{"class":371},[365,802,803],{"class":426},"bg-amber-50\u002F20 ... shadow-xs",[365,805,591],{"class":371},[278,807,808,809,812],{},"그리고 상단에는 ",[351,810,811],{},"모두 읽음"," 버튼을 배치했다.",[356,814,816],{"className":358,"code":815,"language":360,"meta":361,"style":361},"\u003CUButton\n  color=\"neutral\"\n  variant=\"subtle\"\n  size=\"xs\"\n  @click=\"markAllAsRead\"\n>\n  모두 읽음\n\u003C\u002FUButton>\n",[351,817,818,825,839,853,867,884,888,894],{"__ignoreMap":361},[365,819,820,822],{"class":367,"line":368},[365,821,372],{"class":371},[365,823,824],{"class":375},"UButton\n",[365,826,827,830,832,834,837],{"class":367,"line":379},[365,828,829],{"class":385},"  color",[365,831,389],{"class":371},[365,833,392],{"class":371},[365,835,836],{"class":426},"neutral",[365,838,399],{"class":371},[365,840,841,844,846,848,851],{"class":367,"line":402},[365,842,843],{"class":385},"  variant",[365,845,389],{"class":371},[365,847,392],{"class":371},[365,849,850],{"class":426},"subtle",[365,852,399],{"class":371},[365,854,855,858,860,862,865],{"class":367,"line":464},[365,856,857],{"class":385},"  size",[365,859,389],{"class":371},[365,861,392],{"class":371},[365,863,864],{"class":426},"xs",[365,866,399],{"class":371},[365,868,869,872,875,877,879,882],{"class":367,"line":730},[365,870,871],{"class":371},"  @",[365,873,874],{"class":385},"click",[365,876,389],{"class":371},[365,878,392],{"class":371},[365,880,881],{"class":395},"markAllAsRead",[365,883,399],{"class":371},[365,885,886],{"class":367,"line":744},[365,887,467],{"class":371},[365,889,891],{"class":367,"line":890},7,[365,892,893],{"class":395},"  모두 읽음\n",[365,895,897,900,903],{"class":367,"line":896},8,[365,898,899],{"class":371},"\u003C\u002F",[365,901,902],{"class":375},"UButton",[365,904,467],{"class":371},[278,906,907],{},"알림이 많아졌을 때 하나씩 읽음 처리하는 것보다 한 번에 상태를 변경할 수 있도록 한 것이다.",[313,909],{},[273,911,913],{"id":912},"마이페이지는-내-농장으로","👨‍🌾 마이페이지는 '내 농장'으로",[278,915,916],{},"BroBean의 마이페이지는 일반적인 서비스의 '내 정보' 화면과 조금 다르게 구성했다.",[278,918,919],{},"메뉴 이름부터 **'마이 농장'**으로 정했다.",[469,921,923],{"className":922},[472,473,474],[476,924],{"alt":925,"src":926,"width":646},"BroBean 내정보 화면","\u002Fimages\u002Fbrobean\u002Fmypage.png",[278,928,929],{},"화면 상단에는 사용자의 레벨과 캐릭터를 보여주고, 프로필 카드에는 다음 정보를 표시한다.",[297,931,932,935,938,941,944],{},[300,933,934],{},"👤 이름",[300,936,937],{},"🏷️ 닉네임",[300,939,940],{},"🏡 농장 이름",[300,942,943],{},"❤️ 파트너",[300,945,946],{},"🌱 농장 성숙도",[356,948,950],{"className":358,"code":949,"language":360,"meta":361,"style":361},"\u003Ch1>\n  마이 농장 (마이페이지)\n\u003C\u002Fh1>\n",[351,951,952,960,965],{"__ignoreMap":361},[365,953,954,956,958],{"class":367,"line":368},[365,955,372],{"class":371},[365,957,273],{"class":375},[365,959,467],{"class":371},[365,961,962],{"class":367,"line":379},[365,963,964],{"class":395},"  마이 농장 (마이페이지)\n",[365,966,967,969,971],{"class":367,"line":402},[365,968,899],{"class":371},[365,970,273],{"class":375},[365,972,467],{"class":371},[278,974,975,976,979],{},"단순히 사용자 정보를 나열하는 것이 아니라, 지금까지 BroBean에서 사용해온 ",[282,977,978],{},"농장이라는 세계관을 사용자 정보에도 이어지도록"," 했다.",[313,981],{},[316,983,946],{"id":984},"농장-성숙도",[278,986,987],{},"프로필 카드 하단에는 농장 성숙도를 progress bar 형태로 표시한다.",[356,989,991],{"className":358,"code":990,"language":360,"meta":361,"style":361},"\u003Cdiv class=\"flex justify-between items-center text-xs\">\n  \u003Cspan>농장 성숙도\u003C\u002Fspan>\n  \u003Cspan>{{ profile.farmExp }}%\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003CUProgress\n  :model-value=\"profile.farmExp\"\n  color=\"primary\"\n\u002F>\n",[351,992,993,1013,1018,1023,1031,1037,1044,1065,1078],{"__ignoreMap":361},[365,994,995,997,999,1002,1004,1006,1009,1011],{"class":367,"line":368},[365,996,372],{"class":371},[365,998,469],{"class":375},[365,1000,1001],{"class":385}," class",[365,1003,389],{"class":371},[365,1005,392],{"class":371},[365,1007,1008],{"class":426},"flex justify-between items-center text-xs",[365,1010,392],{"class":371},[365,1012,467],{"class":371},[365,1014,1015],{"class":367,"line":379},[365,1016,1017],{"class":395},"  \u003Cspan>농장 성숙도\u003C\u002Fspan>\n",[365,1019,1020],{"class":367,"line":402},[365,1021,1022],{"class":395},"  \u003Cspan>{{ profile.farmExp }}%\u003C\u002Fspan>\n",[365,1024,1025,1027,1029],{"class":367,"line":464},[365,1026,899],{"class":371},[365,1028,469],{"class":375},[365,1030,467],{"class":371},[365,1032,1033],{"class":367,"line":730},[365,1034,1036],{"emptyLinePlaceholder":1035},true,"\n",[365,1038,1039,1041],{"class":367,"line":744},[365,1040,372],{"class":371},[365,1042,1043],{"class":375},"UProgress\n",[365,1045,1046,1048,1051,1053,1055,1058,1060,1063],{"class":367,"line":890},[365,1047,382],{"class":371},[365,1049,1050],{"class":385},"model-value",[365,1052,389],{"class":371},[365,1054,392],{"class":371},[365,1056,1057],{"class":395},"profile",[365,1059,702],{"class":371},[365,1061,1062],{"class":395},"farmExp",[365,1064,399],{"class":371},[365,1066,1067,1069,1071,1073,1076],{"class":367,"line":896},[365,1068,829],{"class":385},[365,1070,389],{"class":371},[365,1072,392],{"class":371},[365,1074,1075],{"class":426},"primary",[365,1077,399],{"class":371},[365,1079,1081],{"class":367,"line":1080},9,[365,1082,535],{"class":395},[278,1084,1085],{},"현재는 Mock 데이터를 사용하고 있지만, 추후에는 실제 사용자의 활동량이나 레벨 시스템과 연결해볼 수 있는 구조다.",[278,1087,1088],{},"즉, 마이페이지에서도 **'나는 지금 농장을 얼마나 성장시켰는가?'**를 확인할 수 있도록 했다.",[313,1090],{},[273,1092,1094],{"id":1093},"️-프로필-수정","✏️ 프로필 수정",[278,1096,1097],{},"마이페이지에서 가장 먼저 필요한 기능 중 하나는 프로필 수정이다.",[469,1099,1101],{"className":1100},[472,473,474],[476,1102],{"alt":1103,"src":1104,"width":646},"BroBean 프로필 수정 화면","\u002Fimages\u002Fbrobean\u002Fedit-profile.png",[278,1106,1107],{},"프로필 수정에서는 크게 네 가지 정보를 관리한다.",[297,1109,1110,1113,1116,1118],{},[300,1111,1112],{},"🧑 농부 이름",[300,1114,1115],{},"🏷️ 농부 칭호",[300,1117,940],{},[300,1119,1120],{},"🌱 프로필 캐릭터",[278,1122,1123],{},"특히 캐릭터는 여러 기본 캐릭터 중 하나를 선택할 수 있도록 만들었다.",[356,1125,1127],{"className":358,"code":1126,"language":360,"meta":361,"style":361},"\u003Cdiv class=\"flex sm:justify-center justify-start items-start gap-3\">\n  \u003Cbutton\n    v-for=\"opt in avatarOptions\"\n    :key=\"opt.url\"\n    @click=\"form.avatarImage = opt.url\"\n  >\n",[351,1128,1129,1148,1153,1158,1163,1168],{"__ignoreMap":361},[365,1130,1131,1133,1135,1137,1139,1141,1144,1146],{"class":367,"line":368},[365,1132,372],{"class":371},[365,1134,469],{"class":375},[365,1136,1001],{"class":385},[365,1138,389],{"class":371},[365,1140,392],{"class":371},[365,1142,1143],{"class":426},"flex sm:justify-center justify-start items-start gap-3",[365,1145,392],{"class":371},[365,1147,467],{"class":371},[365,1149,1150],{"class":367,"line":379},[365,1151,1152],{"class":395},"  \u003Cbutton\n",[365,1154,1155],{"class":367,"line":402},[365,1156,1157],{"class":395},"    v-for=\"opt in avatarOptions\"\n",[365,1159,1160],{"class":367,"line":464},[365,1161,1162],{"class":395},"    :key=\"opt.url\"\n",[365,1164,1165],{"class":367,"line":730},[365,1166,1167],{"class":395},"    @click=\"form.avatarImage = opt.url\"\n",[365,1169,1170],{"class":367,"line":744},[365,1171,1172],{"class":395},"  >\n",[278,1174,1175],{},"선택한 캐릭터에는 border와 ring을 추가해 현재 선택된 캐릭터가 무엇인지 쉽게 확인할 수 있도록 했다.",[356,1177,1179],{"className":556,"code":1178,"language":558,"meta":361,"style":361},"form.avatarImage === opt.url\n  ? 'border-[var(--color-brobean-primary)]\n     ring-4 ring-[var(--color-brobean-primary)]\u002F20'\n  : 'border-gray-200 ...'\n",[351,1180,1181,1199,1216,1234],{"__ignoreMap":361},[365,1182,1183,1186,1188,1191,1194,1196],{"class":367,"line":368},[365,1184,1185],{"class":567},"form",[365,1187,702],{"class":371},[365,1189,1190],{"class":567},"avatarImage",[365,1192,1193],{"class":395}," === opt",[365,1195,702],{"class":371},[365,1197,1198],{"class":567},"url\n",[365,1200,1201,1204,1207,1210,1213],{"class":367,"line":379},[365,1202,1203],{"class":395},"  ? '",[365,1205,1206],{"class":567},"border-",[365,1208,1209],{"class":371},"[",[365,1211,1212],{"class":395},"var(--color-brobean-primary)",[365,1214,1215],{"class":371},"]\n",[365,1217,1218,1221,1224,1226,1228,1231],{"class":367,"line":402},[365,1219,1220],{"class":567},"     ring-4",[365,1222,1223],{"class":567}," ring-",[365,1225,1209],{"class":371},[365,1227,1212],{"class":395},[365,1229,1230],{"class":371},"]",[365,1232,1233],{"class":395},"\u002F20'\n",[365,1235,1236,1239,1242,1245,1247],{"class":367,"line":464},[365,1237,1238],{"class":395},"  : '",[365,1240,1241],{"class":567},"border-gray-200",[365,1243,1244],{"class":395}," ..",[365,1246,702],{"class":371},[365,1248,591],{"class":395},[278,1250,1251,1252,1255],{},"모바일에서는 캐릭터 목록이 화면보다 길어질 수 있기 때문에 ",[282,1253,1254],{},"가로 스크롤","이 가능하도록 처리했다.",[278,1257,1258],{},"이 부분은 모바일 중심 UI를 만들면서 꽤 중요한 부분이다.",[278,1260,1261],{},"캐릭터를 억지로 작게 배치하기보다는 적당한 크기를 유지하고, 필요한 경우 좌우로 넘겨볼 수 있도록 했다.",[313,1263],{},[273,1265,1267],{"id":1266},"️-커플-연결-관리","❤️ 커플 연결 관리",[278,1269,1270,1271,1274],{},"BroBean의 핵심 기능 중 하나가 바로 ",[282,1272,1273],{},"커플 가계부","다.",[278,1276,1277],{},"따라서 마이페이지에서도 커플 연결 상태를 확인하고 관리할 수 있어야 한다.",[469,1279,1281],{"className":1280},[472,473,474],[476,1282],{"alt":1283,"src":1284,"width":646},"BroBean 연결 관리 화면","\u002Fimages\u002Fbrobean\u002Fedit-couple.png",[278,1286,1287],{},"커플 연결 관리 화면에서는 현재 연결된 파트너와 함께 처음 농장을 가꾸기 시작한 날짜를 보여준다.",[356,1289,1291],{"className":358,"code":1290,"language":360,"meta":361,"style":361},"\u003Cdiv class=\"flex items-center justify-center gap-3\">\n  \u003Cspan>{{ profile.name }}\u003C\u002Fspan>\n  \u003CUIcon name=\"lucide:heart\" \u002F>\n  \u003Cspan>{{ profile.partnerName }}\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003Cp>\n  처음 함께 씨앗을 심은 날: {{ profile.coupleStartDate }}\n\u003C\u002Fp>\n",[351,1292,1293,1312,1317,1322,1327,1335,1339,1347,1352],{"__ignoreMap":361},[365,1294,1295,1297,1299,1301,1303,1305,1308,1310],{"class":367,"line":368},[365,1296,372],{"class":371},[365,1298,469],{"class":375},[365,1300,1001],{"class":385},[365,1302,389],{"class":371},[365,1304,392],{"class":371},[365,1306,1307],{"class":426},"flex items-center justify-center gap-3",[365,1309,392],{"class":371},[365,1311,467],{"class":371},[365,1313,1314],{"class":367,"line":379},[365,1315,1316],{"class":395},"  \u003Cspan>{{ profile.name }}\u003C\u002Fspan>\n",[365,1318,1319],{"class":367,"line":402},[365,1320,1321],{"class":395},"  \u003CUIcon name=\"lucide:heart\" \u002F>\n",[365,1323,1324],{"class":367,"line":464},[365,1325,1326],{"class":395},"  \u003Cspan>{{ profile.partnerName }}\u003C\u002Fspan>\n",[365,1328,1329,1331,1333],{"class":367,"line":730},[365,1330,899],{"class":371},[365,1332,469],{"class":375},[365,1334,467],{"class":371},[365,1336,1337],{"class":367,"line":744},[365,1338,1036],{"emptyLinePlaceholder":1035},[365,1340,1341,1343,1345],{"class":367,"line":890},[365,1342,372],{"class":371},[365,1344,278],{"class":375},[365,1346,467],{"class":371},[365,1348,1349],{"class":367,"line":896},[365,1350,1351],{"class":395},"  처음 함께 씨앗을 심은 날: {{ profile.coupleStartDate }}\n",[365,1353,1354,1356,1358],{"class":367,"line":1080},[365,1355,899],{"class":371},[365,1357,278],{"class":375},[365,1359,467],{"class":371},[278,1361,1362],{},"그리고 필요한 경우 커플 연결을 해제할 수도 있다.",[278,1364,1365],{},"다만 연결을 끊는다고 해서 기존 기록까지 삭제되는 것은 아니다.",[278,1367,1368],{},"현재 구현에서는 다음과 같이 안내한다.",[1370,1371,1372],"blockquote",{},[278,1373,1374],{},"연결을 해제하면 상대방과의 농장 공유가 즉시 중단되며 개인 농장 모드로 변경됩니다.",[278,1376,1377,1378,1381],{},"이처럼 ",[282,1379,1380],{},"데이터의 유지와 공유 상태의 변경을 분리","하는 방향으로 구성했다.",[313,1383],{},[273,1385,1387],{"id":1386},"알림-설정","🔔 알림 설정",[278,1389,1390],{},"마이페이지에는 알림 설정도 함께 배치했다.",[469,1392,1394],{"className":1393},[472,473,474],[476,1395],{"alt":1396,"src":1397,"width":646},"BroBean 내정보 알림 설정 화면","\u002Fimages\u002Fbrobean\u002Fmypage2.png",[278,1399,1400],{},"현재 설정할 수 있는 항목은 세 가지다.",[547,1402,1404],{"id":1403},"전체-푸시-알림","📢 전체 푸시 알림",[278,1406,1407],{},"모든 푸시 알림을 켜거나 끌 수 있는 가장 상위 설정이다.",[356,1409,1411],{"className":358,"code":1410,"language":360,"meta":361,"style":361},"\u003CUSwitch\n  v-model=\"notifications.push\"\n  color=\"primary\"\n\u002F>\n",[351,1412,1413,1420,1439,1451],{"__ignoreMap":361},[365,1414,1415,1417],{"class":367,"line":368},[365,1416,372],{"class":371},[365,1418,1419],{"class":375},"USwitch\n",[365,1421,1422,1425,1427,1429,1432,1434,1437],{"class":367,"line":379},[365,1423,1424],{"class":385},"  v-model",[365,1426,389],{"class":371},[365,1428,392],{"class":371},[365,1430,1431],{"class":395},"notifications",[365,1433,702],{"class":371},[365,1435,1436],{"class":395},"push",[365,1438,399],{"class":371},[365,1440,1441,1443,1445,1447,1449],{"class":367,"line":402},[365,1442,829],{"class":385},[365,1444,389],{"class":371},[365,1446,392],{"class":371},[365,1448,1075],{"class":426},[365,1450,399],{"class":371},[365,1452,1453],{"class":367,"line":464},[365,1454,535],{"class":395},[547,1456,1458],{"id":1457},"오늘의-씨앗-심기-리마인드","🌱 오늘의 씨앗 심기 리마인드",[278,1460,1461],{},"매일 저녁 9시에 소비 기록을 남길 수 있도록 알려주는 기능이다.",[356,1463,1465],{"className":358,"code":1464,"language":360,"meta":361,"style":361},"\u003Cp>오늘의 씨앗 심기 리마인드\u003C\u002Fp>\n\u003Cp>매일 저녁 9시에 소비 기록 알림\u003C\u002Fp>\n",[351,1466,1467,1484],{"__ignoreMap":361},[365,1468,1469,1471,1473,1475,1478,1480,1482],{"class":367,"line":368},[365,1470,372],{"class":371},[365,1472,278],{"class":375},[365,1474,511],{"class":371},[365,1476,1477],{"class":395},"오늘의 씨앗 심기 리마인드",[365,1479,899],{"class":371},[365,1481,278],{"class":375},[365,1483,467],{"class":371},[365,1485,1486,1488,1490,1492,1495,1497,1499],{"class":367,"line":379},[365,1487,372],{"class":371},[365,1489,278],{"class":375},[365,1491,511],{"class":371},[365,1493,1494],{"class":395},"매일 저녁 9시에 소비 기록 알림",[365,1496,899],{"class":371},[365,1498,278],{"class":375},[365,1500,467],{"class":371},[278,1502,1503],{},"가계부 기록을 꾸준히 남기는 습관을 만들기 위한 기능이다.",[547,1505,1507],{"id":1506},"️-파트너-활동-알림","❤️ 파트너 활동 알림",[278,1509,1510],{},"파트너가 활동했을 때 알려주는 알림이다.",[356,1512,1514],{"className":358,"code":1513,"language":360,"meta":361,"style":361},"\u003Cp>파트너 활동 알림\u003C\u002Fp>\n\u003Cp>상대방이 물줄 때\u002F지출 심을 때 즉시 알림\u003C\u002Fp>\n",[351,1515,1516,1533],{"__ignoreMap":361},[365,1517,1518,1520,1522,1524,1527,1529,1531],{"class":367,"line":368},[365,1519,372],{"class":371},[365,1521,278],{"class":375},[365,1523,511],{"class":371},[365,1525,1526],{"class":395},"파트너 활동 알림",[365,1528,899],{"class":371},[365,1530,278],{"class":375},[365,1532,467],{"class":371},[365,1534,1535,1537,1539,1541,1544,1546,1548],{"class":367,"line":379},[365,1536,372],{"class":371},[365,1538,278],{"class":375},[365,1540,511],{"class":371},[365,1542,1543],{"class":395},"상대방이 물줄 때\u002F지출 심을 때 즉시 알림",[365,1545,899],{"class":371},[365,1547,278],{"class":375},[365,1549,467],{"class":371},[278,1551,1552],{},"BroBean의 커플 기능에서는 이런 실시간 활동 알림이 꽤 중요하다.",[278,1554,1555,1556,1559],{},"상대방의 기록이나 활동을 바로 확인할 수 있기 때문에 단순한 가계부가 아니라 ",[282,1557,1558],{},"함께 농장을 관리하는 서비스","라는 느낌을 만들어줄 수 있기 때문이다.",[278,1561,1562],{},"그리고 전체 푸시 알림이 꺼져 있으면 하위 알림 설정도 비활성화되도록 처리했다.",[356,1564,1566],{"className":358,"code":1565,"language":360,"meta":361,"style":361},":disabled=\"!notifications.push\"\n",[351,1567,1568],{"__ignoreMap":361},[365,1569,1570],{"class":367,"line":368},[365,1571,1565],{"class":395},[278,1573,1574],{},"상위 설정과 하위 설정의 관계를 명확하게 만들어 사용자가 현재 알림 상태를 쉽게 이해할 수 있도록 했다.",[313,1576],{},[273,1578,1580],{"id":1579},"모달은-컴포넌트로-분리","🧩 모달은 컴포넌트로 분리",[278,1582,1583,1584,1587],{},"마이페이지에 들어가는 설정 기능이 많아지면서 모든 UI를 ",[351,1585,1586],{},"pages\u002Fmy.vue"," 하나에 넣는 방식은 관리하기 어려워질 수 있다.",[278,1589,1590],{},"그래서 프로필 수정과 커플 연결 관리는 별도의 컴포넌트로 분리했다.",[356,1592,1594],{"className":358,"code":1593,"language":360,"meta":361,"style":361},"\u003CEditProfileModal\n  v-model=\"isEditProfileModalOpen\"\n  :form=\"editForm\"\n  :avatar-options=\"avatarOptions\"\n  @upload-image=\"handleImageUpload\"\n  @save=\"handleSaveProfile\"\n\u002F>\n\n\u003CCoupleConnectModal\n  v-model=\"isCoupleModalOpen\"\n  :profile=\"profile\"\n  @disconnect=\"handleDisconnectCouple\"\n\u002F>\n",[351,1595,1596,1603,1616,1631,1647,1663,1679,1683,1687,1692,1698,1704,1710],{"__ignoreMap":361},[365,1597,1598,1600],{"class":367,"line":368},[365,1599,372],{"class":371},[365,1601,1602],{"class":375},"EditProfileModal\n",[365,1604,1605,1607,1609,1611,1614],{"class":367,"line":379},[365,1606,1424],{"class":385},[365,1608,389],{"class":371},[365,1610,392],{"class":371},[365,1612,1613],{"class":395},"isEditProfileModalOpen",[365,1615,399],{"class":371},[365,1617,1618,1620,1622,1624,1626,1629],{"class":367,"line":402},[365,1619,382],{"class":371},[365,1621,1185],{"class":385},[365,1623,389],{"class":371},[365,1625,392],{"class":371},[365,1627,1628],{"class":395},"editForm",[365,1630,399],{"class":371},[365,1632,1633,1635,1638,1640,1642,1645],{"class":367,"line":464},[365,1634,382],{"class":371},[365,1636,1637],{"class":385},"avatar-options",[365,1639,389],{"class":371},[365,1641,392],{"class":371},[365,1643,1644],{"class":395},"avatarOptions",[365,1646,399],{"class":371},[365,1648,1649,1651,1654,1656,1658,1661],{"class":367,"line":730},[365,1650,871],{"class":371},[365,1652,1653],{"class":385},"upload-image",[365,1655,389],{"class":371},[365,1657,392],{"class":371},[365,1659,1660],{"class":395},"handleImageUpload",[365,1662,399],{"class":371},[365,1664,1665,1667,1670,1672,1674,1677],{"class":367,"line":744},[365,1666,871],{"class":371},[365,1668,1669],{"class":385},"save",[365,1671,389],{"class":371},[365,1673,392],{"class":371},[365,1675,1676],{"class":395},"handleSaveProfile",[365,1678,399],{"class":371},[365,1680,1681],{"class":367,"line":890},[365,1682,535],{"class":395},[365,1684,1685],{"class":367,"line":896},[365,1686,1036],{"emptyLinePlaceholder":1035},[365,1688,1689],{"class":367,"line":1080},[365,1690,1691],{"class":395},"\u003CCoupleConnectModal\n",[365,1693,1695],{"class":367,"line":1694},10,[365,1696,1697],{"class":395},"  v-model=\"isCoupleModalOpen\"\n",[365,1699,1701],{"class":367,"line":1700},11,[365,1702,1703],{"class":395},"  :profile=\"profile\"\n",[365,1705,1707],{"class":367,"line":1706},12,[365,1708,1709],{"class":395},"  @disconnect=\"handleDisconnectCouple\"\n",[365,1711,1713],{"class":367,"line":1712},13,[365,1714,535],{"class":395},[278,1716,1717,1718,1721],{},"이렇게 하면 페이지에서는 ",[282,1719,1720],{},"모달을 언제 열고 닫을지와 데이터 상태를 관리","하고, 실제 모달 UI는 각각의 컴포넌트가 담당하게 된다.",[278,1723,1724,1725,1728],{},"특히 ",[351,1726,1727],{},"EditProfileModal","에서는 프로필 이미지 선택, 이름·닉네임·농장 이름 입력, 저장 버튼까지 하나의 독립적인 UI 단위로 관리할 수 있다.",[313,1730],{},[273,1732,1734],{"id":1733},"다크모드까지-함께-고려하기","🌙 다크모드까지 함께 고려하기",[278,1736,1737],{},"BroBean은 전체 화면에서 다크모드를 지원하고 있기 때문에 이번에 추가한 알림과 마이페이지 역시 다크모드를 함께 고려했다.",[278,1739,1740],{},"예를 들어 카드 배경은",[356,1742,1744],{"className":556,"code":1743,"language":558,"meta":361,"style":361},"bg-white dark:bg-[var(--bg-card)]\n",[351,1745,1746],{"__ignoreMap":361},[365,1747,1748,1751,1753,1756,1758,1761],{"class":367,"line":368},[365,1749,1750],{"class":567},"bg-white",[365,1752,585],{"class":395},[365,1754,1755],{"class":567},"bg-",[365,1757,1209],{"class":371},[365,1759,1760],{"class":395},"var(--bg-card)",[365,1762,1215],{"class":371},[278,1764,1765],{},"처럼 구성하고, border 역시",[356,1767,1769],{"className":556,"code":1768,"language":558,"meta":361,"style":361},"border-gray-100 dark:border-[#2C2C2E]\n",[351,1770,1771],{"__ignoreMap":361},[365,1772,1773,1776,1778,1780,1782,1785,1788],{"class":367,"line":368},[365,1774,1775],{"class":567},"border-gray-100",[365,1777,585],{"class":395},[365,1779,1206],{"class":567},[365,1781,1209],{"class":371},[365,1783,1784],{"class":395},"#2",[365,1786,1787],{"class":385},"C2C2E",[365,1789,1215],{"class":371},[278,1791,1792],{},"처럼 대응한다.",[278,1794,1795],{},"알림 드롭다운 역시",[356,1797,1799],{"className":556,"code":1798,"language":558,"meta":361,"style":361},"bg-white\u002F95 dark:bg-[var(--bg-card)]\u002F95\nbackdrop-blur-md\n",[351,1800,1801,1819],{"__ignoreMap":361},[365,1802,1803,1805,1808,1810,1812,1814,1816],{"class":367,"line":368},[365,1804,1750],{"class":567},[365,1806,1807],{"class":395},"\u002F95 dark:",[365,1809,1755],{"class":567},[365,1811,1209],{"class":371},[365,1813,1760],{"class":395},[365,1815,1230],{"class":371},[365,1817,1818],{"class":395},"\u002F95\n",[365,1820,1821],{"class":367,"line":379},[365,1822,1823],{"class":567},"backdrop-blur-md\n",[278,1825,1826],{},"를 사용해 기존 화면과 자연스럽게 연결되도록 했다.",[278,1828,1829],{},"이렇게 각각의 페이지를 만들 때부터 라이트\u002F다크모드를 함께 처리하면 나중에 별도의 테마 대응 작업을 크게 줄일 수 있다.",[313,1831],{},[273,1833,1835],{"id":1834},"모바일에서의-사용성","📱 모바일에서의 사용성",[278,1837,1838],{},"이번 편에서 구현한 화면들은 대부분 모바일에서 자주 사용되는 기능이다.",[278,1840,1841,1842,1845],{},"그래서 넓은 화면을 기준으로 정보를 많이 보여주기보다는 ",[282,1843,1844],{},"작은 화면에서 정보를 빠르게 확인할 수 있는 구조","를 우선했다.",[278,1847,1848],{},"특히 신경 쓴 부분은 다음과 같다.",[297,1850,1851,1854,1857,1860,1863,1866,1869,1872],{},[300,1852,1853],{},"🔔 헤더에서 한 번에 확인할 수 있는 알림",[300,1855,1856],{},"📋 읽음\u002F읽지 않음 상태의 명확한 구분",[300,1858,1859],{},"👨‍🌾 프로필 정보를 한 카드에 모아서 표현",[300,1861,1862],{},"🌱 캐릭터 선택 영역의 가로 스크롤",[300,1864,1865],{},"❤️ 커플 상태를 직관적으로 표현",[300,1867,1868],{},"🔧 설정 항목을 그룹별로 분리",[300,1870,1871],{},"🌙 다크모드 대응",[300,1873,1874],{},"📱 모바일 화면에서도 충분한 터치 영역 확보",[278,1876,1877],{},"BroBean의 전체 UI가 모바일 앱을 목표로 하고 있기 때문에 이런 세부적인 사용성도 계속해서 신경 쓰고 있다.",[313,1879],{},[273,1881,1883],{"id":1882},"다음-단계","🚀 다음 단계",[278,1885,1886],{},"이번 편까지 구현하면서 BroBean은 이제 단순히 가계부 데이터를 입력하고 조회하는 수준을 넘어섰다.",[278,1888,1889],{},"사용자는",[278,1891,1892],{},[282,1893,1894],{},"가계부 기록 → 나무 키우기 → 성장 일지 → 수확 정산 → 알림 → 개인 농장 관리",[278,1896,1897],{},"라는 하나의 흐름 안에서 서비스를 이용할 수 있게 됐다.",[278,1899,1900],{},"특히 알림과 마이페이지가 추가되면서 앞으로 실제 서비스로 확장하기 위한 기반도 조금씩 갖춰지고 있다.",[278,1902,1903],{},"현재는 Mock 데이터를 중심으로 동작하지만, 이후에는 실제 백엔드와 연결하면서",[297,1905,1906,1909,1912,1915,1918],{},[300,1907,1908],{},"🔔 실제 알림 생성 및 읽음 처리",[300,1910,1911],{},"💑 커플 활동 실시간 동기화",[300,1913,1914],{},"📱 푸시 알림",[300,1916,1917],{},"👤 실제 사용자 프로필 관리",[300,1919,1920],{},"🌱 활동에 따른 농장 경험치 및 레벨 변화",[278,1922,1923],{},"등으로 확장할 예정이다.",[1925,1926,1927],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":361,"searchDepth":379,"depth":379,"links":1929},[1930,1935,1938],{"id":318,"depth":379,"text":319,"children":1931},[1932,1933,1934],{"id":549,"depth":402,"text":550},{"id":601,"depth":402,"text":602},{"id":611,"depth":402,"text":612},{"id":627,"depth":379,"text":628,"children":1936},[1937],{"id":755,"depth":402,"text":756},{"id":984,"depth":379,"text":946,"children":1939},[1940,1941,1942],{"id":1403,"depth":402,"text":1404},{"id":1457,"depth":402,"text":1458},{"id":1506,"depth":402,"text":1507},"2026-08-09","BroBean의 알림 드롭다운과 알림 내역 페이지, 마이페이지 및 프로필·커플 연결·알림 설정 기능을 구현하며 사용자 편의 기능과 개인화 영역을 구성한 과정","md",null,{"tags":1948,"image":1954},[1949,1950,1273,1951,1952,1953],"BroBean","가계부 앱","마이페이지","알림 시스템","사용자 설정","\u002Fimages\u002Fbrobean\u002Fog-image.png",{"icon":20},{"title":1957,"description":1958},"BroBean 알림 & 마이페이지 구현 - 사용자 편의 기능과 개인 농장 설정","BroBean의 헤더 알림 드롭다운, 알림 내역, 프로필 수정, 커플 연결 관리, 알림 설정 등 사용자 편의 기능과 마이페이지 구현 과정","oYbQ0sqehi0Fw4pH9t6yHwdM2AAPCsA-RfjzeAjvGWA",[1961,1963],{"title":222,"path":223,"stem":224,"description":1962,"icon":20,"children":-1},"BroBean의 가계부 데이터를 바탕으로 수입·지출·저축 현황과 예산 달성률, 카테고리별 소비 비중, 주차별 소비 패턴, 월별 자산 흐름을 확인할 수 있는 수확 정산 화면 구현",{"title":230,"path":231,"stem":232,"description":1964,"icon":20,"children":-1},"BroBean의 로그인, 회원가입, 비밀번호 찾기 및 파트너 초대 팝업을 구현하며 계정 인증과 커플 연결 과정을 구성한 과정",1789947623023]