[{"data":1,"prerenderedAt":2317},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brobean-brobean-dev-log-10":267,"-ko-project-brobean-brobean-dev-log-10-surround":2312},[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":230,"body":269,"date":2296,"description":2297,"extension":512,"links":2298,"meta":2299,"navigation":2307,"path":231,"seo":2308,"stem":232,"__hash__":2311},"docs_ko\u002Fko\u002F2.project\u002F2.brobean\u002F910.brobean-dev-log-10.md",{"type":270,"value":271,"toc":2293},"minimark",[272,277,286,293,296,303,306,322,329,332,336,339,342,355,362,445,448,453,460,539,542,545,552,554,558,561,624,631,634,641,643,647,650,653,719,726,729,736,784,787,789,793,796,875,878,881,888,890,894,897,900,907,910,918,921,928,931,942,945,947,951,954,1022,1029,1091,1098,1156,1159,1162,1165,1171,1174,1180,1182,1186,1189,1192,1274,1277,1368,1375,1378,1381,1387,1390,1393,1395,1399,1402,1484,1487,1494,1496,1500,1503,1506,1581,1584,1590,1597,1600,1625,1628,1631,1638,1640,1644,1647,1716,1723,1726,1729,1731,1735,1738,1745,1752,1755,1823,1826,1894,1897,1903,1905,1909,1912,1919,1991,1994,2000,2003,2006,2008,2012,2019,2022,2029,2036,2039,2042,2049,2051,2055,2062,2148,2154,2157,2164,2166,2170,2173,2176,2179,2182,2185,2190,2193,2200,2202,2206,2209,2212,2232,2239,2241,2245,2251,2254,2257,2277,2280,2283,2289],[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],{},"가계부 서비스에서 로그인과 회원가입은 단순히 이메일과 비밀번호를 입력하는 화면처럼 보일 수 있지만, BroBean에서는 조금 다르게 접근했다.",[278,297,298,299,302],{},"BroBean은 혼자 사용하는 가계부가 아니라 ",[282,300,301],{},"커플이 함께 자산을 관리하고 하나의 농장을 키워가는 서비스","이기 때문에, 회원가입 단계부터 농장과 농부 정보를 설정하고 이후 파트너를 연결할 수 있도록 구성했다.",[278,304,305],{},"이번 편에서는 크게 네 가지 영역을 구현했다.",[307,308,309,313,316,319],"ul",{},[310,311,312],"li",{},"🔐 이메일 및 소셜 로그인",[310,314,315],{},"🌱 농장 프로필을 포함한 회원가입",[310,317,318],{},"📩 이메일 인증 기반 비밀번호 찾기",[310,320,321],{},"❤️ 파트너 초대 및 커플 연결 팝업",[278,323,324,325,328],{},"단순히 인증 기능을 만드는 것이 아니라, ",[282,326,327],{},"서비스에 가입하는 순간부터 '우리들의 농장'을 시작한다는 경험","을 만들 수 있도록 화면을 구성했다.",[330,331],"hr",{},[273,333,335],{"id":334},"로그인은-농장으로-입장하는-첫-화면","🔐 로그인은 농장으로 입장하는 첫 화면",[278,337,338],{},"BroBean의 로그인 화면은 서비스의 가장 기본적인 진입점이다.",[278,340,341],{},"사용자는 이메일과 비밀번호를 입력해 자신의 농장으로 입장할 수 있다.",[343,344,349],"div",{"className":345},[346,347,348],"flex","items-center","justify-center",[350,351],"img",{"alt":352,"src":353,"width":354},"BroBean 로그인 페이지",".\u002Fimages\u002Fbrobean\u002Flogin.png",300,[278,356,357,358,361],{},"로그인 화면에서는 비밀번호 입력 영역과 함께 바로 옆에 ",[282,359,360],{},"비밀번호 찾기"," 링크를 배치했다.",[363,364,369],"pre",{"className":365,"code":366,"language":367,"meta":368,"style":368},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"flex items-center justify-between\">\n  \u003Clabel>비밀번호\u003C\u002Flabel>\n\n  \u003CNuxtLink to=\"\u002Fauth\u002Fforgot-password\">\n    비밀번호 찾기\n  \u003C\u002FNuxtLink>\n\u003C\u002Fdiv>\n","vue","",[370,371,372,403,410,417,423,429,435],"code",{"__ignoreMap":368},[373,374,377,381,384,388,391,394,398,400],"span",{"class":375,"line":376},"line",1,[373,378,380],{"class":379},"sMK4o","\u003C",[373,382,343],{"class":383},"swJcz",[373,385,387],{"class":386},"spNyl"," class",[373,389,390],{"class":379},"=",[373,392,393],{"class":379},"\"",[373,395,397],{"class":396},"sfazB","flex items-center justify-between",[373,399,393],{"class":379},[373,401,402],{"class":379},">\n",[373,404,406],{"class":375,"line":405},2,[373,407,409],{"class":408},"sTEyZ","  \u003Clabel>비밀번호\u003C\u002Flabel>\n",[373,411,413],{"class":375,"line":412},3,[373,414,416],{"emptyLinePlaceholder":415},true,"\n",[373,418,420],{"class":375,"line":419},4,[373,421,422],{"class":408},"  \u003CNuxtLink to=\"\u002Fauth\u002Fforgot-password\">\n",[373,424,426],{"class":375,"line":425},5,[373,427,428],{"class":408},"    비밀번호 찾기\n",[373,430,432],{"class":375,"line":431},6,[373,433,434],{"class":408},"  \u003C\u002FNuxtLink>\n",[373,436,438,441,443],{"class":375,"line":437},7,[373,439,440],{"class":379},"\u003C\u002F",[373,442,343],{"class":383},[373,444,402],{"class":379},[278,446,447],{},"비밀번호를 잊어버린 경우 별도의 메뉴를 다시 찾을 필요 없이 로그인 화면에서 바로 복구 과정으로 이동할 수 있도록 한 것이다.",[449,450,452],"h3",{"id":451},"로그인-대신-농장으로-입장하기","🌱 '로그인' 대신 '농장으로 입장하기'",[278,454,455,456,459],{},"로그인 버튼의 문구도 일반적인 ",[370,457,458],{},"로그인","이라는 표현 대신",[363,461,463],{"className":365,"code":462,"language":367,"meta":368,"style":368},"\u003CUButton\n  type=\"submit\"\n  color=\"primary\"\n  size=\"md\"\n  block\n>\n  농장으로 입장하기\n\u003C\u002FUButton>\n",[370,464,465,472,487,501,515,520,524,529],{"__ignoreMap":368},[373,466,467,469],{"class":375,"line":376},[373,468,380],{"class":379},[373,470,471],{"class":383},"UButton\n",[373,473,474,477,479,481,484],{"class":375,"line":405},[373,475,476],{"class":386},"  type",[373,478,390],{"class":379},[373,480,393],{"class":379},[373,482,483],{"class":396},"submit",[373,485,486],{"class":379},"\"\n",[373,488,489,492,494,496,499],{"class":375,"line":412},[373,490,491],{"class":386},"  color",[373,493,390],{"class":379},[373,495,393],{"class":379},[373,497,498],{"class":396},"primary",[373,500,486],{"class":379},[373,502,503,506,508,510,513],{"class":375,"line":419},[373,504,505],{"class":386},"  size",[373,507,390],{"class":379},[373,509,393],{"class":379},[373,511,512],{"class":396},"md",[373,514,486],{"class":379},[373,516,517],{"class":375,"line":425},[373,518,519],{"class":386},"  block\n",[373,521,522],{"class":375,"line":431},[373,523,402],{"class":379},[373,525,526],{"class":375,"line":437},[373,527,528],{"class":408},"  농장으로 입장하기\n",[373,530,532,534,537],{"class":375,"line":531},8,[373,533,440],{"class":379},[373,535,536],{"class":383},"UButton",[373,538,402],{"class":379},[278,540,541],{},"처럼 **'농장으로 입장하기'**라는 문구를 사용했다.",[278,543,544],{},"BroBean에서는 농장을 서비스의 주요 세계관으로 사용하고 있기 때문에, 이런 작은 문구에서도 서비스의 콘셉트가 이어지도록 했다.",[278,546,547,548,551],{},"사용자가 로그인한다는 것은 단순히 계정에 접속하는 것이 아니라, ",[282,549,550],{},"자신이 만들어온 농장으로 다시 돌아가는 것","이라는 느낌을 주는 것이다.",[330,553],{},[273,555,557],{"id":556},"️-로그인-실패-상황도-명확하게","⚠️ 로그인 실패 상황도 명확하게",[278,559,560],{},"로그인 과정에서 문제가 발생하면 에러 메시지를 별도의 영역으로 보여준다.",[363,562,564],{"className":365,"code":563,"language":367,"meta":368,"style":368},"\u003Cdiv\n  v-if=\"errorMessage\"\n  class=\"p-2.5 rounded-xl bg-rose-50 ...\"\n>\n  \u003CUIcon name=\"lucide:alert-circle\" \u002F>\n  \u003Cspan>{{ errorMessage }}\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[370,565,566,573,588,602,606,611,616],{"__ignoreMap":368},[373,567,568,570],{"class":375,"line":376},[373,569,380],{"class":379},[373,571,572],{"class":383},"div\n",[373,574,575,579,581,583,586],{"class":375,"line":405},[373,576,578],{"class":577},"s7zQu","  v-if",[373,580,390],{"class":379},[373,582,393],{"class":379},[373,584,585],{"class":408},"errorMessage",[373,587,486],{"class":379},[373,589,590,593,595,597,600],{"class":375,"line":412},[373,591,592],{"class":386},"  class",[373,594,390],{"class":379},[373,596,393],{"class":379},[373,598,599],{"class":396},"p-2.5 rounded-xl bg-rose-50 ...",[373,601,486],{"class":379},[373,603,604],{"class":375,"line":419},[373,605,402],{"class":379},[373,607,608],{"class":375,"line":425},[373,609,610],{"class":408},"  \u003CUIcon name=\"lucide:alert-circle\" \u002F>\n",[373,612,613],{"class":375,"line":431},[373,614,615],{"class":408},"  \u003Cspan>{{ errorMessage }}\u003C\u002Fspan>\n",[373,617,618,620,622],{"class":375,"line":437},[373,619,440],{"class":379},[373,621,343],{"class":383},[373,623,402],{"class":379},[278,625,626,627,630],{},"단순히 입력창 아래에 작은 텍스트로 에러를 표시하는 것이 아니라, 배경색과 아이콘을 함께 사용해 ",[282,628,629],{},"현재 로그인 과정에서 문제가 발생했다는 사실을 바로 인지할 수 있도록"," 했다.",[278,632,633],{},"이런 에러 UI는 회원가입이나 비밀번호 찾기 화면에서도 동일한 방식으로 사용한다.",[278,635,636,637,640],{},"계정 인증 과정에서 사용자에게 필요한 것은 복잡한 설명보다는 ",[282,638,639],{},"현재 어떤 상태인지 명확하게 알려주는 것","이라고 생각했다.",[330,642],{},[273,644,646],{"id":645},"네이버와-apple-소셜-로그인","🌐 네이버와 Apple 소셜 로그인",[278,648,649],{},"이메일 로그인만 제공하면 사용자가 매번 이메일과 비밀번호를 입력해야 한다.",[278,651,652],{},"그래서 로그인 화면 하단에는 소셜 로그인도 함께 배치했다.",[363,654,656],{"className":365,"code":655,"language":367,"meta":368,"style":368},"\u003Cdiv class=\"grid grid-cols-2 gap-1.5\">\n  \u003Cbutton @click=\"handleSocialLogin('naver')\">\n    네이버 로그인\n  \u003C\u002Fbutton>\n\n  \u003Cbutton @click=\"handleSocialLogin('apple')\">\n    Apple로 계속\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[370,657,658,677,682,687,692,696,701,706,710],{"__ignoreMap":368},[373,659,660,662,664,666,668,670,673,675],{"class":375,"line":376},[373,661,380],{"class":379},[373,663,343],{"class":383},[373,665,387],{"class":386},[373,667,390],{"class":379},[373,669,393],{"class":379},[373,671,672],{"class":396},"grid grid-cols-2 gap-1.5",[373,674,393],{"class":379},[373,676,402],{"class":379},[373,678,679],{"class":375,"line":405},[373,680,681],{"class":408},"  \u003Cbutton @click=\"handleSocialLogin('naver')\">\n",[373,683,684],{"class":375,"line":412},[373,685,686],{"class":408},"    네이버 로그인\n",[373,688,689],{"class":375,"line":419},[373,690,691],{"class":408},"  \u003C\u002Fbutton>\n",[373,693,694],{"class":375,"line":425},[373,695,416],{"emptyLinePlaceholder":415},[373,697,698],{"class":375,"line":431},[373,699,700],{"class":408},"  \u003Cbutton @click=\"handleSocialLogin('apple')\">\n",[373,702,703],{"class":375,"line":437},[373,704,705],{"class":408},"    Apple로 계속\n",[373,707,708],{"class":375,"line":531},[373,709,691],{"class":408},[373,711,713,715,717],{"class":375,"line":712},9,[373,714,440],{"class":379},[373,716,343],{"class":383},[373,718,402],{"class":379},[278,720,721,722,725],{},"현재는 ",[282,723,724],{},"네이버 로그인과 Apple 로그인","을 지원하도록 구성했다.",[278,727,728],{},"특히 두 버튼을 동일한 형태로 배치해 사용자가 원하는 로그인 방식을 바로 선택할 수 있도록 했다.",[278,730,731,732,735],{},"소셜 로그인 이후에는 필요한 사용자 설정을 이어갈 수 있도록 ",[370,733,734],{},"SocialSetupModal","도 연결했다.",[363,737,739],{"className":365,"code":738,"language":367,"meta":368,"style":368},"\u003CSocialSetupModal\n  v-model=\"showSocialModal\"\n  @complete=\"handleSocialSetupComplete\"\n\u002F>\n",[370,740,741,748,762,779],{"__ignoreMap":368},[373,742,743,745],{"class":375,"line":376},[373,744,380],{"class":379},[373,746,747],{"class":383},"SocialSetupModal\n",[373,749,750,753,755,757,760],{"class":375,"line":405},[373,751,752],{"class":386},"  v-model",[373,754,390],{"class":379},[373,756,393],{"class":379},[373,758,759],{"class":408},"showSocialModal",[373,761,486],{"class":379},[373,763,764,767,770,772,774,777],{"class":375,"line":412},[373,765,766],{"class":379},"  @",[373,768,769],{"class":386},"complete",[373,771,390],{"class":379},[373,773,393],{"class":379},[373,775,776],{"class":408},"handleSocialSetupComplete",[373,778,486],{"class":379},[373,780,781],{"class":375,"line":419},[373,782,783],{"class":408},"\u002F>\n",[278,785,786],{},"즉, 소셜 계정으로 인증하는 과정과 BroBean에서 필요한 사용자 정보를 설정하는 과정을 분리해 관리할 수 있는 구조다.",[330,788],{},[273,790,792],{"id":791},"계정-화면에서도-다크모드-지원","🌙 계정 화면에서도 다크모드 지원",[278,794,795],{},"로그인 화면 우측 상단에는 다크모드 전환 버튼을 배치했다.",[363,797,799],{"className":365,"code":798,"language":367,"meta":368,"style":368},"\u003Cbutton\n  type=\"button\"\n  @click=\"toggleColorMode\"\n>\n  \u003CUIcon\n    :name=\"colorMode.value === 'dark'\n      ? 'lucide:sun'\n      : 'lucide:moon'\"\n  \u002F>\n\u003C\u002Fbutton>\n",[370,800,801,808,821,837,841,846,851,856,861,866],{"__ignoreMap":368},[373,802,803,805],{"class":375,"line":376},[373,804,380],{"class":379},[373,806,807],{"class":383},"button\n",[373,809,810,812,814,816,819],{"class":375,"line":405},[373,811,476],{"class":386},[373,813,390],{"class":379},[373,815,393],{"class":379},[373,817,818],{"class":396},"button",[373,820,486],{"class":379},[373,822,823,825,828,830,832,835],{"class":375,"line":412},[373,824,766],{"class":379},[373,826,827],{"class":386},"click",[373,829,390],{"class":379},[373,831,393],{"class":379},[373,833,834],{"class":408},"toggleColorMode",[373,836,486],{"class":379},[373,838,839],{"class":375,"line":419},[373,840,402],{"class":379},[373,842,843],{"class":375,"line":425},[373,844,845],{"class":408},"  \u003CUIcon\n",[373,847,848],{"class":375,"line":431},[373,849,850],{"class":408},"    :name=\"colorMode.value === 'dark'\n",[373,852,853],{"class":375,"line":437},[373,854,855],{"class":408},"      ? 'lucide:sun'\n",[373,857,858],{"class":375,"line":531},[373,859,860],{"class":408},"      : 'lucide:moon'\"\n",[373,862,863],{"class":375,"line":712},[373,864,865],{"class":408},"  \u002F>\n",[373,867,869,871,873],{"class":375,"line":868},10,[373,870,440],{"class":379},[373,872,818],{"class":383},[373,874,402],{"class":379},[278,876,877],{},"현재 모드에 따라 해 아이콘과 달 아이콘을 바꿔 보여주며, 클릭하면 라이트 모드와 다크 모드를 전환할 수 있다.",[278,879,880],{},"회원가입과 비밀번호 찾기 화면에서도 같은 방식을 사용했다.",[278,882,883,884,887],{},"로그인 이후의 화면뿐만 아니라 ",[282,885,886],{},"서비스에 처음 진입하는 인증 화면부터 테마 경험이 끊기지 않도록"," 한 것이다.",[330,889],{},[273,891,893],{"id":892},"회원가입은-계정-생성보다-농장-개업에-가깝게","🌱 회원가입은 '계정 생성'보다 '농장 개업'에 가깝게",[278,895,896],{},"BroBean에서 회원가입은 단순히 이메일과 비밀번호를 만드는 과정이 아니다.",[278,898,899],{},"사용자가 처음으로 자신의 농장을 만들고, 농부 정보를 설정하는 과정이기도 하다.",[343,901,903],{"className":902},[346,347,348],[350,904],{"alt":905,"src":906,"width":354},"BroBean 회원가입 페이지",".\u002Fimages\u002Fbrobean\u002Fsignup.png",[278,908,909],{},"그래서 회원가입 화면 상단부터",[363,911,916],{"className":912,"code":914,"language":915,"meta":368},[913],"language-text","Couple Asset Farm\n\n우리들의 첫 농장 분양 🏡\n\n자산을 함께 심고 가꾸어갈 커플 공간을 만들어보세요.\n","text",[370,917,914],{"__ignoreMap":368},[278,919,920],{},"라는 문구를 배치했다.",[278,922,923,924,927],{},"이 화면에서부터 BroBean이 일반적인 가계부가 아니라 ",[282,925,926],{},"커플이 함께 자산을 관리하는 공간","이라는 것을 전달하고 싶었다.",[278,929,930],{},"회원가입 폼 역시 크게 세 가지 영역으로 나누었다.",[307,932,933,936,939],{},[310,934,935],{},"🌱 농장 프로필 설정",[310,937,938],{},"🛡️ 계정 및 본인 인증",[310,940,941],{},"📜 약관 및 개인정보 동의",[278,943,944],{},"각 영역을 카드 형태로 분리해 긴 회원가입 폼에서도 현재 어떤 정보를 입력하고 있는지 쉽게 파악할 수 있도록 했다.",[330,946],{},[273,948,950],{"id":949},"농장-프로필-설정","🏡 농장 프로필 설정",[278,952,953],{},"첫 번째 영역에서는 실제 서비스에서 사용할 농장 정보를 입력한다.",[363,955,957],{"className":365,"code":956,"language":367,"meta":368,"style":368},"\u003Clabel>농장 이름\u003C\u002Flabel>\n\u003CAppInput\n  v-model=\"form.farmName\"\n  placeholder=\"예: 알콩달콩 부자농장\"\n\u002F>\n",[370,958,959,978,985,1004,1018],{"__ignoreMap":368},[373,960,961,963,966,969,972,974,976],{"class":375,"line":376},[373,962,380],{"class":379},[373,964,965],{"class":383},"label",[373,967,968],{"class":379},">",[373,970,971],{"class":408},"농장 이름",[373,973,440],{"class":379},[373,975,965],{"class":383},[373,977,402],{"class":379},[373,979,980,982],{"class":375,"line":405},[373,981,380],{"class":379},[373,983,984],{"class":383},"AppInput\n",[373,986,987,989,991,993,996,999,1002],{"class":375,"line":412},[373,988,752],{"class":386},[373,990,390],{"class":379},[373,992,393],{"class":379},[373,994,995],{"class":408},"form",[373,997,998],{"class":379},".",[373,1000,1001],{"class":408},"farmName",[373,1003,486],{"class":379},[373,1005,1006,1009,1011,1013,1016],{"class":375,"line":419},[373,1007,1008],{"class":386},"  placeholder",[373,1010,390],{"class":379},[373,1012,393],{"class":379},[373,1014,1015],{"class":396},"예: 알콩달콩 부자농장",[373,1017,486],{"class":379},[373,1019,1020],{"class":375,"line":425},[373,1021,783],{"class":408},[278,1023,1024,1025,1028],{},"그리고 농장 안에서 사용할 자신의 이름인 ",[282,1026,1027],{},"농부명","도 설정한다.",[363,1030,1032],{"className":365,"code":1031,"language":367,"meta":368,"style":368},"\u003Clabel>나의 닉네임 (농부명)\u003C\u002Flabel>\n\u003CAppInput\n  v-model=\"form.farmerName\"\n  placeholder=\"예: 콩이언니\"\n\u002F>\n",[370,1033,1034,1051,1057,1074,1087],{"__ignoreMap":368},[373,1035,1036,1038,1040,1042,1045,1047,1049],{"class":375,"line":376},[373,1037,380],{"class":379},[373,1039,965],{"class":383},[373,1041,968],{"class":379},[373,1043,1044],{"class":408},"나의 닉네임 (농부명)",[373,1046,440],{"class":379},[373,1048,965],{"class":383},[373,1050,402],{"class":379},[373,1052,1053,1055],{"class":375,"line":405},[373,1054,380],{"class":379},[373,1056,984],{"class":383},[373,1058,1059,1061,1063,1065,1067,1069,1072],{"class":375,"line":412},[373,1060,752],{"class":386},[373,1062,390],{"class":379},[373,1064,393],{"class":379},[373,1066,995],{"class":408},[373,1068,998],{"class":379},[373,1070,1071],{"class":408},"farmerName",[373,1073,486],{"class":379},[373,1075,1076,1078,1080,1082,1085],{"class":375,"line":419},[373,1077,1008],{"class":386},[373,1079,390],{"class":379},[373,1081,393],{"class":379},[373,1083,1084],{"class":396},"예: 콩이언니",[373,1086,486],{"class":379},[373,1088,1089],{"class":375,"line":425},[373,1090,783],{"class":408},[278,1092,1093,1094,1097],{},"여기에 선택적으로 ",[282,1095,1096],{},"커플(파트너) 이메일","을 입력할 수 있다.",[363,1099,1101],{"className":365,"code":1100,"language":367,"meta":368,"style":368},"\u003CAppInput\n  v-model=\"form.partnerEmail\"\n  type=\"email\"\n  placeholder=\"상대방의 브로빈 이메일을 입력하면 농장을 함께 공유해요\"\n\u002F>\n",[370,1102,1103,1109,1126,1139,1152],{"__ignoreMap":368},[373,1104,1105,1107],{"class":375,"line":376},[373,1106,380],{"class":379},[373,1108,984],{"class":383},[373,1110,1111,1113,1115,1117,1119,1121,1124],{"class":375,"line":405},[373,1112,752],{"class":386},[373,1114,390],{"class":379},[373,1116,393],{"class":379},[373,1118,995],{"class":408},[373,1120,998],{"class":379},[373,1122,1123],{"class":408},"partnerEmail",[373,1125,486],{"class":379},[373,1127,1128,1130,1132,1134,1137],{"class":375,"line":412},[373,1129,476],{"class":386},[373,1131,390],{"class":379},[373,1133,393],{"class":379},[373,1135,1136],{"class":396},"email",[373,1138,486],{"class":379},[373,1140,1141,1143,1145,1147,1150],{"class":375,"line":419},[373,1142,1008],{"class":386},[373,1144,390],{"class":379},[373,1146,393],{"class":379},[373,1148,1149],{"class":396},"상대방의 브로빈 이메일을 입력하면 농장을 함께 공유해요",[373,1151,486],{"class":379},[373,1153,1154],{"class":375,"line":425},[373,1155,783],{"class":408},[278,1157,1158],{},"파트너 이메일은 필수가 아니다.",[278,1160,1161],{},"회원가입 단계에서 파트너를 바로 연결하고 싶다면 입력하면 되고, 아직 상대방이 가입하지 않았거나 나중에 연결하고 싶은 경우에는 비워둘 수 있다.",[278,1163,1164],{},"그리고 하단에는",[1166,1167,1168],"blockquote",{},[278,1169,1170],{},"나중에 마이페이지에서도 언제든 연결할 수 있어요.",[278,1172,1173],{},"라는 안내를 추가했다.",[278,1175,1176,1177],{},"이렇게 하면 회원가입 단계에서 커플 연결을 강제하지 않으면서도, ",[282,1178,1179],{},"BroBean의 핵심 기능인 커플 연결을 자연스럽게 안내할 수 있다.",[330,1181],{},[273,1183,1185],{"id":1184},"️-이메일-인증으로-계정-보호","🛡️ 이메일 인증으로 계정 보호",[278,1187,1188],{},"두 번째 영역에서는 계정과 본인 인증을 진행한다.",[278,1190,1191],{},"먼저 이메일 주소를 입력한 뒤 인증요청 버튼을 누른다.",[363,1193,1195],{"className":365,"code":1194,"language":367,"meta":368,"style":368},"\u003Cdiv class=\"flex gap-2\">\n  \u003CAppInput\n    v-model=\"form.email\"\n    type=\"email\"\n  \u002F>\n\n  \u003CUButton\n    @click=\"sendVerificationCode\"\n  >\n    {{ isCodeSent ? '재전송' : '인증요청' }}\n  \u003C\u002FUButton>\n\u003C\u002Fdiv>\n",[370,1196,1197,1216,1221,1226,1231,1235,1239,1244,1249,1254,1259,1265],{"__ignoreMap":368},[373,1198,1199,1201,1203,1205,1207,1209,1212,1214],{"class":375,"line":376},[373,1200,380],{"class":379},[373,1202,343],{"class":383},[373,1204,387],{"class":386},[373,1206,390],{"class":379},[373,1208,393],{"class":379},[373,1210,1211],{"class":396},"flex gap-2",[373,1213,393],{"class":379},[373,1215,402],{"class":379},[373,1217,1218],{"class":375,"line":405},[373,1219,1220],{"class":408},"  \u003CAppInput\n",[373,1222,1223],{"class":375,"line":412},[373,1224,1225],{"class":408},"    v-model=\"form.email\"\n",[373,1227,1228],{"class":375,"line":419},[373,1229,1230],{"class":408},"    type=\"email\"\n",[373,1232,1233],{"class":375,"line":425},[373,1234,865],{"class":408},[373,1236,1237],{"class":375,"line":431},[373,1238,416],{"emptyLinePlaceholder":415},[373,1240,1241],{"class":375,"line":437},[373,1242,1243],{"class":408},"  \u003CUButton\n",[373,1245,1246],{"class":375,"line":531},[373,1247,1248],{"class":408},"    @click=\"sendVerificationCode\"\n",[373,1250,1251],{"class":375,"line":712},[373,1252,1253],{"class":408},"  >\n",[373,1255,1256],{"class":375,"line":868},[373,1257,1258],{"class":408},"    {{ isCodeSent ? '재전송' : '인증요청' }}\n",[373,1260,1262],{"class":375,"line":1261},11,[373,1263,1264],{"class":408},"  \u003C\u002FUButton>\n",[373,1266,1268,1270,1272],{"class":375,"line":1267},12,[373,1269,440],{"class":379},[373,1271,343],{"class":383},[373,1273,402],{"class":379},[278,1275,1276],{},"인증번호를 요청하면 추가 입력 영역이 나타난다.",[363,1278,1280],{"className":365,"code":1279,"language":367,"meta":368,"style":368},"\u003Cdiv v-if=\"isCodeSent && !form.isEmailVerified\">\n  \u003Cspan>인증번호 입력\u003C\u002Fspan>\n\n  \u003CAppInput\n    v-model=\"form.verificationCode\"\n    placeholder=\"6자리 숫자를 입력하세요\"\n  \u002F>\n\n  \u003CUButton @click=\"verifyCode\">\n    확인\n  \u003C\u002FUButton>\n\u003C\u002Fdiv>\n",[370,1281,1282,1315,1320,1324,1328,1333,1338,1342,1346,1351,1356,1360],{"__ignoreMap":368},[373,1283,1284,1286,1288,1291,1293,1295,1298,1301,1304,1306,1308,1311,1313],{"class":375,"line":376},[373,1285,380],{"class":379},[373,1287,343],{"class":383},[373,1289,1290],{"class":577}," v-if",[373,1292,390],{"class":379},[373,1294,393],{"class":379},[373,1296,1297],{"class":408},"isCodeSent ",[373,1299,1300],{"class":379},"&&",[373,1302,1303],{"class":379}," !",[373,1305,995],{"class":408},[373,1307,998],{"class":379},[373,1309,1310],{"class":408},"isEmailVerified",[373,1312,393],{"class":379},[373,1314,402],{"class":379},[373,1316,1317],{"class":375,"line":405},[373,1318,1319],{"class":408},"  \u003Cspan>인증번호 입력\u003C\u002Fspan>\n",[373,1321,1322],{"class":375,"line":412},[373,1323,416],{"emptyLinePlaceholder":415},[373,1325,1326],{"class":375,"line":419},[373,1327,1220],{"class":408},[373,1329,1330],{"class":375,"line":425},[373,1331,1332],{"class":408},"    v-model=\"form.verificationCode\"\n",[373,1334,1335],{"class":375,"line":431},[373,1336,1337],{"class":408},"    placeholder=\"6자리 숫자를 입력하세요\"\n",[373,1339,1340],{"class":375,"line":437},[373,1341,865],{"class":408},[373,1343,1344],{"class":375,"line":531},[373,1345,416],{"emptyLinePlaceholder":415},[373,1347,1348],{"class":375,"line":712},[373,1349,1350],{"class":408},"  \u003CUButton @click=\"verifyCode\">\n",[373,1352,1353],{"class":375,"line":868},[373,1354,1355],{"class":408},"    확인\n",[373,1357,1358],{"class":375,"line":1261},[373,1359,1264],{"class":408},[373,1361,1362,1364,1366],{"class":375,"line":1267},[373,1363,440],{"class":379},[373,1365,343],{"class":383},[373,1367,402],{"class":379},[278,1369,1370,1371,1374],{},"이처럼 인증번호 입력 영역은 처음부터 화면에 노출하지 않고 ",[282,1372,1373],{},"인증번호를 요청했을 때만 표시","하도록 했다.",[278,1376,1377],{},"사용자가 현재 어떤 단계에 있는지도 자연스럽게 구분할 수 있다.",[278,1379,1380],{},"인증이 완료되면 이메일 입력창을 계속 수정할 필요가 없도록 처리하고,",[363,1382,1385],{"className":1383,"code":1384,"language":915,"meta":368},[913],"이메일 본인 인증이 완료되었습니다.\n",[370,1386,1384],{"__ignoreMap":368},[278,1388,1389],{},"라는 성공 메시지를 보여준다.",[278,1391,1392],{},"이를 통해 사용자는 자신의 이메일 인증이 정상적으로 완료되었는지 바로 확인할 수 있다.",[330,1394],{},[273,1396,1398],{"id":1397},"비밀번호와-비밀번호-확인","🔑 비밀번호와 비밀번호 확인",[278,1400,1401],{},"이메일 인증 이후에는 로그인에 사용할 비밀번호를 설정한다.",[363,1403,1405],{"className":365,"code":1404,"language":367,"meta":368,"style":368},"\u003Cdiv class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n  \u003CAppInput\n    v-model=\"form.password\"\n    type=\"password\"\n    placeholder=\"6자 이상 입력\"\n  \u002F>\n\n  \u003CAppInput\n    v-model=\"form.passwordConfirm\"\n    type=\"password\"\n    placeholder=\"비밀번호 재입력\"\n  \u002F>\n\u003C\u002Fdiv>\n",[370,1406,1407,1426,1430,1435,1440,1445,1449,1453,1457,1462,1466,1471,1475],{"__ignoreMap":368},[373,1408,1409,1411,1413,1415,1417,1419,1422,1424],{"class":375,"line":376},[373,1410,380],{"class":379},[373,1412,343],{"class":383},[373,1414,387],{"class":386},[373,1416,390],{"class":379},[373,1418,393],{"class":379},[373,1420,1421],{"class":396},"grid grid-cols-1 sm:grid-cols-2 gap-4",[373,1423,393],{"class":379},[373,1425,402],{"class":379},[373,1427,1428],{"class":375,"line":405},[373,1429,1220],{"class":408},[373,1431,1432],{"class":375,"line":412},[373,1433,1434],{"class":408},"    v-model=\"form.password\"\n",[373,1436,1437],{"class":375,"line":419},[373,1438,1439],{"class":408},"    type=\"password\"\n",[373,1441,1442],{"class":375,"line":425},[373,1443,1444],{"class":408},"    placeholder=\"6자 이상 입력\"\n",[373,1446,1447],{"class":375,"line":431},[373,1448,865],{"class":408},[373,1450,1451],{"class":375,"line":437},[373,1452,416],{"emptyLinePlaceholder":415},[373,1454,1455],{"class":375,"line":531},[373,1456,1220],{"class":408},[373,1458,1459],{"class":375,"line":712},[373,1460,1461],{"class":408},"    v-model=\"form.passwordConfirm\"\n",[373,1463,1464],{"class":375,"line":868},[373,1465,1439],{"class":408},[373,1467,1468],{"class":375,"line":1261},[373,1469,1470],{"class":408},"    placeholder=\"비밀번호 재입력\"\n",[373,1472,1473],{"class":375,"line":1267},[373,1474,865],{"class":408},[373,1476,1478,1480,1482],{"class":375,"line":1477},13,[373,1479,440],{"class":379},[373,1481,343],{"class":383},[373,1483,402],{"class":379},[278,1485,1486],{},"비밀번호와 확인 입력창을 나란히 배치해 한 화면에서 비교할 수 있도록 했다.",[278,1488,1489,1490,1493],{},"회원가입 과정에서 이메일 인증과 비밀번호 설정을 하나의 ",[282,1491,1492],{},"계정 및 본인 인증 영역","으로 묶으면서, 사용자가 현재 계정 정보를 설정하고 있다는 흐름도 명확하게 만들었다.",[330,1495],{},[273,1497,1499],{"id":1498},"약관과-개인정보-처리방침","📜 약관과 개인정보 처리방침",[278,1501,1502],{},"회원가입 마지막 단계에서는 서비스 이용약관과 개인정보 처리방침에 대한 동의를 받는다.",[278,1504,1505],{},"먼저 전체 약관에 한 번에 동의할 수 있도록 했다.",[363,1507,1509],{"className":365,"code":1508,"language":367,"meta":368,"style":368},"\u003Cinput\n  id=\"all-agree\"\n  v-model=\"isAllAgreed\"\n  type=\"checkbox\"\n\u002F>\n\n\u003Clabel for=\"all-agree\">\n  전체 약관 및 개인정보 처리방침에 모두 동의합니다.\n\u003C\u002Flabel>\n",[370,1510,1511,1518,1532,1545,1558,1562,1566,1571,1576],{"__ignoreMap":368},[373,1512,1513,1515],{"class":375,"line":376},[373,1514,380],{"class":379},[373,1516,1517],{"class":383},"input\n",[373,1519,1520,1523,1525,1527,1530],{"class":375,"line":405},[373,1521,1522],{"class":386},"  id",[373,1524,390],{"class":379},[373,1526,393],{"class":379},[373,1528,1529],{"class":396},"all-agree",[373,1531,486],{"class":379},[373,1533,1534,1536,1538,1540,1543],{"class":375,"line":412},[373,1535,752],{"class":386},[373,1537,390],{"class":379},[373,1539,393],{"class":379},[373,1541,1542],{"class":408},"isAllAgreed",[373,1544,486],{"class":379},[373,1546,1547,1549,1551,1553,1556],{"class":375,"line":419},[373,1548,476],{"class":386},[373,1550,390],{"class":379},[373,1552,393],{"class":379},[373,1554,1555],{"class":396},"checkbox",[373,1557,486],{"class":379},[373,1559,1560],{"class":375,"line":425},[373,1561,783],{"class":408},[373,1563,1564],{"class":375,"line":431},[373,1565,416],{"emptyLinePlaceholder":415},[373,1567,1568],{"class":375,"line":437},[373,1569,1570],{"class":408},"\u003Clabel for=\"all-agree\">\n",[373,1572,1573],{"class":375,"line":531},[373,1574,1575],{"class":408},"  전체 약관 및 개인정보 처리방침에 모두 동의합니다.\n",[373,1577,1578],{"class":375,"line":712},[373,1579,1580],{"class":408},"\u003C\u002Flabel>\n",[278,1582,1583],{},"그리고 각각의 필수 동의 항목을 별도로 제공한다.",[363,1585,1588],{"className":1586,"code":1587,"language":915,"meta":368},[913],"[필수] 브로빈 서비스 이용약관 동의\n[필수] 개인정보 처리방침 동의\n",[370,1589,1587],{"__ignoreMap":368},[278,1591,1592,1593,1596],{},"각 항목에는 ",[282,1594,1595],{},"보기"," 버튼을 배치했다.",[278,1598,1599],{},"보기 버튼을 누르면 현재 화면 위에 모달이 나타나고, 이용약관 또는 개인정보 처리방침의 상세 내용을 확인할 수 있다.",[363,1601,1603],{"className":365,"code":1602,"language":367,"meta":368,"style":368},"{{ modalType === 'privacy'\n  ? '개인정보 처리방침'\n  : '서비스 이용약관'\n}}\n",[370,1604,1605,1610,1615,1620],{"__ignoreMap":368},[373,1606,1607],{"class":375,"line":376},[373,1608,1609],{"class":408},"{{ modalType === 'privacy'\n",[373,1611,1612],{"class":375,"line":405},[373,1613,1614],{"class":408},"  ? '개인정보 처리방침'\n",[373,1616,1617],{"class":375,"line":412},[373,1618,1619],{"class":408},"  : '서비스 이용약관'\n",[373,1621,1622],{"class":375,"line":419},[373,1623,1624],{"class":408},"}}\n",[278,1626,1627],{},"개인정보 처리방침에서는 이메일, 비밀번호, 닉네임, 농장 이름과 같은 필수 정보와 파트너 연동 이메일 등의 선택 항목을 안내한다.",[278,1629,1630],{},"또한 회원가입 및 관리, 본인 식별 및 인증, 커플 자산 농장 데이터 공유 등의 이용 목적도 함께 확인할 수 있도록 했다.",[278,1632,1633,1634,1637],{},"이처럼 약관 내용을 별도의 페이지로 이동시키기보다는 ",[282,1635,1636],{},"회원가입 과정에서 바로 확인할 수 있는 모달","로 제공해 가입 흐름이 끊기지 않도록 했다.",[330,1639],{},[273,1641,1643],{"id":1642},"회원가입의-마지막은-농장-개업","🌱 회원가입의 마지막은 '농장 개업'",[278,1645,1646],{},"모든 정보 입력과 동의를 완료하면 마지막으로 회원가입을 제출한다.",[363,1648,1650],{"className":365,"code":1649,"language":367,"meta":368,"style":368},"\u003CUButton\n  type=\"submit\"\n  color=\"primary\"\n  size=\"xl\"\n  block\n>\n  농장 개업 및 회원가입 완료 🌱\n\u003C\u002FUButton>\n",[370,1651,1652,1658,1670,1682,1695,1699,1703,1708],{"__ignoreMap":368},[373,1653,1654,1656],{"class":375,"line":376},[373,1655,380],{"class":379},[373,1657,471],{"class":383},[373,1659,1660,1662,1664,1666,1668],{"class":375,"line":405},[373,1661,476],{"class":386},[373,1663,390],{"class":379},[373,1665,393],{"class":379},[373,1667,483],{"class":396},[373,1669,486],{"class":379},[373,1671,1672,1674,1676,1678,1680],{"class":375,"line":412},[373,1673,491],{"class":386},[373,1675,390],{"class":379},[373,1677,393],{"class":379},[373,1679,498],{"class":396},[373,1681,486],{"class":379},[373,1683,1684,1686,1688,1690,1693],{"class":375,"line":419},[373,1685,505],{"class":386},[373,1687,390],{"class":379},[373,1689,393],{"class":379},[373,1691,1692],{"class":396},"xl",[373,1694,486],{"class":379},[373,1696,1697],{"class":375,"line":425},[373,1698,519],{"class":386},[373,1700,1701],{"class":375,"line":431},[373,1702,402],{"class":379},[373,1704,1705],{"class":375,"line":437},[373,1706,1707],{"class":408},"  농장 개업 및 회원가입 완료 🌱\n",[373,1709,1710,1712,1714],{"class":375,"line":531},[373,1711,440],{"class":379},[373,1713,536],{"class":383},[373,1715,402],{"class":379},[278,1717,1718,1719,1722],{},"여기서도 단순한 ",[370,1720,1721],{},"회원가입","이라는 문구 대신 **'농장 개업 및 회원가입 완료'**라고 표현했다.",[278,1724,1725],{},"로그인 버튼이 '농장으로 입장하기'였다면, 회원가입은 그 농장에 처음 입주하는 과정이라고 볼 수 있다.",[278,1727,1728],{},"이렇게 로그인과 회원가입의 문구를 연결하면서 인증 화면에서도 BroBean의 세계관을 유지했다.",[330,1730],{},[273,1732,1734],{"id":1733},"비밀번호-찾기는-이메일-인증으로","📩 비밀번호 찾기는 이메일 인증으로",[278,1736,1737],{},"로그인 화면에서 비밀번호 찾기를 선택하면 비밀번호 복구 화면으로 이동한다.",[343,1739,1741],{"className":1740},[346,347,348],[350,1742],{"alt":1743,"src":1744,"width":354},"BroBean 비밀번호 찾기 페이지",".\u002Fimages\u002Fbrobean\u002Fforgot-password.png",[278,1746,1747,1748,1751],{},"비밀번호 찾기 역시 한 번에 모든 정보를 입력받기보다는 ",[282,1749,1750],{},"인증 → 비밀번호 재설정","의 단계로 나누어 구성했다.",[278,1753,1754],{},"먼저 계정 확인을 위해 인증번호를 요청한다.",[363,1756,1758],{"className":365,"code":1757,"language":367,"meta":368,"style":368},"\u003CUButton\n  type=\"submit\"\n  color=\"primary\"\n  size=\"xl\"\n  block\n>\n  인증번호 받기 📩\n\u003C\u002FUButton>\n",[370,1759,1760,1766,1778,1790,1802,1806,1810,1815],{"__ignoreMap":368},[373,1761,1762,1764],{"class":375,"line":376},[373,1763,380],{"class":379},[373,1765,471],{"class":383},[373,1767,1768,1770,1772,1774,1776],{"class":375,"line":405},[373,1769,476],{"class":386},[373,1771,390],{"class":379},[373,1773,393],{"class":379},[373,1775,483],{"class":396},[373,1777,486],{"class":379},[373,1779,1780,1782,1784,1786,1788],{"class":375,"line":412},[373,1781,491],{"class":386},[373,1783,390],{"class":379},[373,1785,393],{"class":379},[373,1787,498],{"class":396},[373,1789,486],{"class":379},[373,1791,1792,1794,1796,1798,1800],{"class":375,"line":419},[373,1793,505],{"class":386},[373,1795,390],{"class":379},[373,1797,393],{"class":379},[373,1799,1692],{"class":396},[373,1801,486],{"class":379},[373,1803,1804],{"class":375,"line":425},[373,1805,519],{"class":386},[373,1807,1808],{"class":375,"line":431},[373,1809,402],{"class":379},[373,1811,1812],{"class":375,"line":437},[373,1813,1814],{"class":408},"  인증번호 받기 📩\n",[373,1816,1817,1819,1821],{"class":375,"line":531},[373,1818,440],{"class":379},[373,1820,536],{"class":383},[373,1822,402],{"class":379},[278,1824,1825],{},"인증번호가 정상적으로 발송되면 사용자는 인증번호를 입력하고 본인 확인을 진행한다.",[363,1827,1829],{"className":365,"code":1828,"language":367,"meta":368,"style":368},"\u003CUButton\n  type=\"submit\"\n  color=\"primary\"\n  size=\"xl\"\n  block\n>\n  인증 확인 ✨\n\u003C\u002FUButton>\n",[370,1830,1831,1837,1849,1861,1873,1877,1881,1886],{"__ignoreMap":368},[373,1832,1833,1835],{"class":375,"line":376},[373,1834,380],{"class":379},[373,1836,471],{"class":383},[373,1838,1839,1841,1843,1845,1847],{"class":375,"line":405},[373,1840,476],{"class":386},[373,1842,390],{"class":379},[373,1844,393],{"class":379},[373,1846,483],{"class":396},[373,1848,486],{"class":379},[373,1850,1851,1853,1855,1857,1859],{"class":375,"line":412},[373,1852,491],{"class":386},[373,1854,390],{"class":379},[373,1856,393],{"class":379},[373,1858,498],{"class":396},[373,1860,486],{"class":379},[373,1862,1863,1865,1867,1869,1871],{"class":375,"line":419},[373,1864,505],{"class":386},[373,1866,390],{"class":379},[373,1868,393],{"class":379},[373,1870,1692],{"class":396},[373,1872,486],{"class":379},[373,1874,1875],{"class":375,"line":425},[373,1876,519],{"class":386},[373,1878,1879],{"class":375,"line":431},[373,1880,402],{"class":379},[373,1882,1883],{"class":375,"line":437},[373,1884,1885],{"class":408},"  인증 확인 ✨\n",[373,1887,1888,1890,1892],{"class":375,"line":531},[373,1889,440],{"class":379},[373,1891,536],{"class":383},[373,1893,402],{"class":379},[278,1895,1896],{},"인증 과정에서 문제가 발생하면 로그인이나 회원가입 화면과 동일한 에러 메시지 UI를 사용해 상태를 알려준다.",[278,1898,1899,1900,1374],{},"이렇게 계정 관련 화면 전체에서 ",[282,1901,1902],{},"성공, 오류, 인증 상태를 일관된 방식으로 표현",[330,1904],{},[273,1906,1908],{"id":1907},"새로운-비밀번호로-재설정","🔒 새로운 비밀번호로 재설정",[278,1910,1911],{},"인증이 완료되면 새로운 비밀번호를 설정할 수 있다.",[278,1913,1914,1915,1918],{},"특히 새 비밀번호를 한 번 입력하는 것으로 끝내지 않고, ",[282,1916,1917],{},"새 비밀번호 확인"," 필드를 별도로 제공한다.",[363,1920,1922],{"className":365,"code":1921,"language":367,"meta":368,"style":368},"\u003Cdiv class=\"space-y-1.5\">\n  \u003Clabel>\n    새 비밀번호 확인\n  \u003C\u002Flabel>\n\n  \u003CAppInput\n    v-model=\"form.passwordConfirm\"\n    type=\"password\"\n    placeholder=\"비밀번호를 한번 더 입력해주세요\"\n  \u002F>\n\u003C\u002Fdiv>\n",[370,1923,1924,1943,1948,1953,1958,1962,1966,1970,1974,1979,1983],{"__ignoreMap":368},[373,1925,1926,1928,1930,1932,1934,1936,1939,1941],{"class":375,"line":376},[373,1927,380],{"class":379},[373,1929,343],{"class":383},[373,1931,387],{"class":386},[373,1933,390],{"class":379},[373,1935,393],{"class":379},[373,1937,1938],{"class":396},"space-y-1.5",[373,1940,393],{"class":379},[373,1942,402],{"class":379},[373,1944,1945],{"class":375,"line":405},[373,1946,1947],{"class":408},"  \u003Clabel>\n",[373,1949,1950],{"class":375,"line":412},[373,1951,1952],{"class":408},"    새 비밀번호 확인\n",[373,1954,1955],{"class":375,"line":419},[373,1956,1957],{"class":408},"  \u003C\u002Flabel>\n",[373,1959,1960],{"class":375,"line":425},[373,1961,416],{"emptyLinePlaceholder":415},[373,1963,1964],{"class":375,"line":431},[373,1965,1220],{"class":408},[373,1967,1968],{"class":375,"line":437},[373,1969,1461],{"class":408},[373,1971,1972],{"class":375,"line":531},[373,1973,1439],{"class":408},[373,1975,1976],{"class":375,"line":712},[373,1977,1978],{"class":408},"    placeholder=\"비밀번호를 한번 더 입력해주세요\"\n",[373,1980,1981],{"class":375,"line":868},[373,1982,865],{"class":408},[373,1984,1985,1987,1989],{"class":375,"line":1261},[373,1986,440],{"class":379},[373,1988,343],{"class":383},[373,1990,402],{"class":379},[278,1992,1993],{},"모든 입력이 정상적으로 완료되면",[363,1995,1998],{"className":1996,"code":1997,"language":915,"meta":368},[913],"비밀번호 재설정 완료 🔒\n",[370,1999,1997],{"__ignoreMap":368},[278,2001,2002],{},"버튼을 통해 새로운 비밀번호를 저장한다.",[278,2004,2005],{},"로그인 → 비밀번호 찾기 → 이메일 인증 → 새 비밀번호 설정이라는 흐름을 하나의 과정으로 연결해, 사용자가 비밀번호를 잊어버렸더라도 서비스 이용을 다시 이어갈 수 있도록 했다.",[330,2007],{},[273,2009,2011],{"id":2010},"️-파트너-초대와-커플-연결","❤️ 파트너 초대와 커플 연결",[278,2013,2014,2015,2018],{},"BroBean의 계정 기능에서 회원가입만큼 중요한 부분이 바로 ",[282,2016,2017],{},"파트너 연결","이다.",[278,2020,2021],{},"회원가입 과정에서 파트너 이메일을 입력할 수도 있지만, 서비스 이용 중에도 파트너와 연결할 수 있어야 한다.",[278,2023,2024,2025,2028],{},"그래서 별도의 ",[282,2026,2027],{},"커플 연결 팝업","을 구성했다.",[343,2030,2032],{"className":2031},[346,347,348],[350,2033],{"alt":2034,"src":2035,"width":354},"BroBean 커플 연결 팝업",".\u002Fimages\u002Fbrobean\u002Fpartner-invite.png",[278,2037,2038],{},"파트너 초대 팝업은 기존 화면 위에 모달 형태로 표시된다.",[278,2040,2041],{},"따라서 사용자가 현재 보고 있던 농장이나 페이지를 완전히 벗어나지 않고도 파트너 연결 요청을 확인할 수 있다.",[278,2043,2044,2045,2048],{},"커플 연결은 단순한 계정 정보 변경이 아니라 ",[282,2046,2047],{},"함께 사용할 농장의 공유 상태를 결정하는 기능","이기 때문에, 사용자가 요청 내용을 확인한 뒤 선택할 수 있도록 팝업 형태로 구성했다.",[330,2050],{},[273,2052,2054],{"id":2053},"원하지-않는-경우-거절할-수-있도록","🚫 원하지 않는 경우 거절할 수 있도록",[278,2056,2057,2058,2061],{},"파트너 초대 팝업에는 연결을 수락하는 흐름뿐만 아니라 ",[282,2059,2060],{},"거절하기"," 기능도 제공한다.",[363,2063,2065],{"className":365,"code":2064,"language":367,"meta":368,"style":368},"\u003CUButton\n  color=\"neutral\"\n  variant=\"ghost\"\n  size=\"md\"\n  block\n  @click=\"handleReject\"\n>\n  거절하기\n\u003C\u002FUButton>\n",[370,2066,2067,2073,2086,2100,2112,2116,2131,2135,2140],{"__ignoreMap":368},[373,2068,2069,2071],{"class":375,"line":376},[373,2070,380],{"class":379},[373,2072,471],{"class":383},[373,2074,2075,2077,2079,2081,2084],{"class":375,"line":405},[373,2076,491],{"class":386},[373,2078,390],{"class":379},[373,2080,393],{"class":379},[373,2082,2083],{"class":396},"neutral",[373,2085,486],{"class":379},[373,2087,2088,2091,2093,2095,2098],{"class":375,"line":412},[373,2089,2090],{"class":386},"  variant",[373,2092,390],{"class":379},[373,2094,393],{"class":379},[373,2096,2097],{"class":396},"ghost",[373,2099,486],{"class":379},[373,2101,2102,2104,2106,2108,2110],{"class":375,"line":419},[373,2103,505],{"class":386},[373,2105,390],{"class":379},[373,2107,393],{"class":379},[373,2109,512],{"class":396},[373,2111,486],{"class":379},[373,2113,2114],{"class":375,"line":425},[373,2115,519],{"class":386},[373,2117,2118,2120,2122,2124,2126,2129],{"class":375,"line":431},[373,2119,766],{"class":379},[373,2121,827],{"class":386},[373,2123,390],{"class":379},[373,2125,393],{"class":379},[373,2127,2128],{"class":408},"handleReject",[373,2130,486],{"class":379},[373,2132,2133],{"class":375,"line":437},[373,2134,402],{"class":379},[373,2136,2137],{"class":375,"line":531},[373,2138,2139],{"class":408},"  거절하기\n",[373,2141,2142,2144,2146],{"class":375,"line":712},[373,2143,440],{"class":379},[373,2145,536],{"class":383},[373,2147,402],{"class":379},[278,2149,2150,2151,2153],{},"거절 버튼은 주요 액션보다 상대적으로 눈에 띄지 않도록 ",[370,2152,2097],{}," 스타일을 사용했다.",[278,2155,2156],{},"파트너 연결처럼 중요한 요청은 사용자가 충분히 내용을 확인한 뒤 선택할 수 있어야 하기 때문이다.",[278,2158,2159,2160,2163],{},"즉, 초대 요청을 받았다고 해서 무조건 연결되는 것이 아니라 ",[282,2161,2162],{},"사용자가 직접 수락 여부를 결정할 수 있는 구조","로 구성했다.",[330,2165],{},[273,2167,2169],{"id":2168},"회원가입에서-마이페이지까지-이어지는-커플-연결","🔗 회원가입에서 마이페이지까지 이어지는 커플 연결",[278,2171,2172],{},"이번에 구현한 파트너 연결 기능은 앞선 마이페이지 구현과도 연결된다.",[278,2174,2175],{},"회원가입에서는 파트너 이메일을 선택적으로 입력할 수 있고,",[278,2177,2178],{},"서비스 이용 이후에는 마이페이지에서 커플 연결을 관리할 수 있으며,",[278,2180,2181],{},"상대방에게 초대가 전달되면 커플 연결 팝업을 통해 요청을 확인할 수 있다.",[278,2183,2184],{},"즉,",[278,2186,2187],{},[282,2188,2189],{},"회원가입 → 파트너 초대 → 초대 확인 → 커플 연결 → 함께 농장 관리",[278,2191,2192],{},"라는 하나의 흐름이 만들어진다.",[278,2194,2195,2196,2199],{},"이 부분은 BroBean이 단순한 개인 가계부가 아니라 ",[282,2197,2198],{},"커플이 함께 사용하는 가계부 서비스","라는 점을 보여주는 중요한 기능이다.",[330,2201],{},[273,2203,2205],{"id":2204},"인증-화면-전체에서-유지되는-ui-경험","🌙 인증 화면 전체에서 유지되는 UI 경험",[278,2207,2208],{},"이번에 만든 로그인, 회원가입, 비밀번호 찾기, 파트너 초대 화면에서도 기존 BroBean UI의 방향을 그대로 유지했다.",[278,2210,2211],{},"공통적으로 다음과 같은 요소를 사용했다.",[307,2213,2214,2217,2220,2223,2226,2229],{},[310,2215,2216],{},"🌙 라이트 \u002F 다크모드 지원",[310,2218,2219],{},"🌱 BroBean의 농장 콘셉트를 반영한 문구",[310,2221,2222],{},"⚠️ 일관된 에러 메시지 UI",[310,2224,2225],{},"🔘 둥근 모서리 중심의 버튼과 카드",[310,2227,2228],{},"📱 모바일에서도 사용할 수 있는 입력 구조",[310,2230,2231],{},"🎨 primary 컬러를 활용한 주요 액션 강조",[278,2233,2234,2235,2238],{},"특히 인증 화면이라고 해서 기존 서비스와 완전히 다른 디자인을 사용하기보다는, ",[282,2236,2237],{},"로그인 전과 로그인 후의 화면이 하나의 서비스처럼 느껴지도록"," 하는 데 초점을 맞췄다.",[330,2240],{},[273,2242,2244],{"id":2243},"다음-단계","🚀 다음 단계",[278,2246,2247,2248,292],{},"이번 편에서는 BroBean을 사용하기 위한 가장 기본적인 ",[282,2249,2250],{},"계정 인증과 커플 연결 영역",[278,2252,2253],{},"현재 로그인과 회원가입, 비밀번호 찾기, 파트너 연결 UI가 구성되면서 서비스에 처음 들어오는 사용자부터 기존 사용자까지 기본적인 계정 흐름을 갖추게 됐다.",[278,2255,2256],{},"앞으로는 이 화면들을 실제 인증 및 데이터 시스템과 연결하면서",[307,2258,2259,2262,2265,2268,2271,2274],{},[310,2260,2261],{},"🔐 실제 이메일 인증 처리",[310,2263,2264],{},"📩 인증번호 발송 및 만료 처리",[310,2266,2267],{},"🔑 실제 비밀번호 재설정",[310,2269,2270],{},"🌐 네이버 \u002F Apple OAuth 연동",[310,2272,2273],{},"❤️ 파트너 초대 및 수락 상태 관리",[310,2275,2276],{},"🔄 커플 데이터 공유 및 동기화",[278,2278,2279],{},"등으로 확장해야 한다.",[278,2281,2282],{},"이번 편에서 만든 로그인과 회원가입을 통해",[278,2284,2285,2288],{},[282,2286,2287],{},"'나의 농장을 만들고 → 파트너를 초대하고 → 함께 자산을 관리하기 시작하는 첫 번째 단계'"," 가 사용자들에게 기억에 남는 첫인상이 되기를 바란다. 🌱",[2290,2291,2292],"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 .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}",{"title":368,"searchDepth":405,"depth":405,"links":2294},[2295],{"id":451,"depth":412,"text":452},"2026-08-10","BroBean의 로그인, 회원가입, 비밀번호 찾기 및 파트너 초대 팝업을 구현하며 계정 인증과 커플 연결 과정을 구성한 과정",null,{"tags":2300,"image":2306},[2301,2302,2303,458,1721,2304,2305],"BroBean","가계부 앱","커플 가계부","이메일 인증","커플 연결","\u002Fimages\u002Fbrobean\u002Fog-image.png",{"icon":20},{"title":2309,"description":2310},"BroBean 로그인 & 회원가입 구현 - 계정 인증과 커플 연결","BroBean의 로그인, 이메일 인증 회원가입, 비밀번호 찾기, 파트너 초대 팝업 등 계정 관리 및 커플 연결 기능 구현 과정","OlnF19ljfT4yMByWZJi7pAcgg7K1v2y0XqGjMFXy3iU",[2313,2315],{"title":226,"path":227,"stem":228,"description":2314,"icon":20,"children":-1},"BroBean의 알림 드롭다운과 알림 내역 페이지, 마이페이지 및 프로필·커플 연결·알림 설정 기능을 구현하며 사용자 편의 기능과 개인화 영역을 구성한 과정",{"title":234,"path":235,"stem":236,"description":2316,"icon":20,"children":-1},"BroBean을 커플 전용 서비스에서 개인 사용자까지 사용할 수 있도록 확장하면서 개인 모드와 커플 모드를 분리하고, 헤더와 사이드 메뉴의 모드 전환 UI 및 Pinia 기반 상태 관리 구조를 구현한 과정",1789947623055]