/* global React, CharLead, CharPlanner, CharDev, CharDesigner, CharDesigner2, Star, Sparkle, Heart, PortfolioMockup, useLang */ const { useState, useEffect, useRef } = React; const RESUMES = { lead: { name: '윤다민', nameEn: 'Damin Yoon', role: 'DIRECTOR · 총괄', roleEn: 'DIRECTOR · Head', roleJa: 'DIRECTOR · 総括', tagline: '기획부터 운영까지. 0→1을 만드는 풀스택 메이커', taglineEn: 'From planning to ops — a full-stack maker who builds 0→1.', taglineJa: '企画から運用まで。0→1を作るフルスタックメイカー', char: 'lead', color: 'lavender', accent: '#8B7BC4', intro: '5년차 풀스택 메이커. 웹디자인·퍼블리싱으로 시작해 프론트엔드, 백엔드, 앱, 데스크탑까지 전 영역을 다룹니다. 1인 개발로 택시 플랫폼을 2달 만에 오픈한 실행력이 강점입니다.', introEn: '5-year full-stack maker. Started with web design and publishing, now covers frontend, backend, mobile, and desktop. Known for shipping a full taxi platform solo in 2 months.', introJa: '5年のフルスタックメイカー。Webデザイン・パブリッシングからスタートし、フロントエンド・バックエンド・アプリ・デスクトップまで全領域をカバー。1人でタクシープラットフォームを2ヶ月でリリースした実行力が強みです。', contact: { email: 'luvwcs@gmail.com', moai: 'moai.page', mindmap: 'moai.page/mindmap' }, stats: [ { v: '5년+', vEn: '5+ yrs', vJa: '5年以上', k: '개발 경력', kEn: 'Dev Experience', kJa: '開発経験' }, { v: '30+', vEn: '30+', vJa: '30+', k: '앱 출시', kEn: 'App Releases', kJa: 'アプリリリース' }, { v: '1인 풀스택', vEn: 'Solo Full-stack', vJa: '1人フルスタック', k: '기획→개발→운영', kEn: 'Plan→Dev→Ops', kJa: '企画→開発→運用' }, ], careers: [ { period: '2026', org: '드랍모빌리티', position: 'Full-stack Developer', desc: '카카오택시형 택시 플랫폼 1인 풀스택. 유저앱·기사앱·관리자·콜센터·AI 자동배차 백엔드 전부 단독 기획·개발·오픈. 2달 만에 런칭.', descEn: 'Solo full-stack of a Kakao Taxi–style ride platform. Single-handedly planned and shipped the rider app, driver app, admin, call center, and AI dispatch backend — in 2 months.', descJa: 'タクシー配車プラットフォームを1人でフルスタック開発。ユーザーアプリ・ドライバーアプリ・管理者・コールセンター・AI自動配車バックエンドをすべて単独で企画・開発・リリース。2ヶ月でローンチ。' }, { period: '2024', org: '우친소', position: 'Full-stack Freelancer', desc: '웹·앱·소프트웨어 풀스택 프리랜서. 자체 앱 \'모아이\'(AI 통합 플랫폼)·\'모두의로또\' 개발 및 출시. 앱스토어·플레이스토어 10회 이상 배포.', descEn: 'Freelance full-stack across web, mobile, and desktop. Self-published \'Moai\' (AI platform app) and \'Modoui Lotto.\' 10+ App Store and Play Store releases.', descJa: 'Web・アプリ・ソフトウェアのフルスタックフリーランス。自社アプリ「モアイ」（AI統合プラットフォーム）・「みんなのロト」を開発・出版。App Store・Play Storeへ10回以上リリース。' }, { period: '2023', org: '메이저월드', position: 'Frontend Part Lead', desc: '300만 회원 골프 쇼핑몰 프론트엔드 파트장. React Native 앱 유지보수, 웹 전면 리뉴얼, Electron 크롤러 개발. 팀 리딩.', descEn: 'Frontend team lead at a 3M-member golf e-commerce. App maintenance (React Native), full web renewal, and Electron-based crawler development. Led the team.', descJa: '300万会員のゴルフショッピングモールのフロントエンドパートリーダー。React Nativeアプリのメンテ、Web全面リニューアル、Electronクローラー開発。チームリーディング。' }, { period: '2022', org: '오토브레인', position: 'Web Developer · 대리', desc: '한성벤츠·푸조·DS 등 외제차 공식 브랜드 웹사이트 개발·유지보수. Spring/Vue/React 기반 예약·콜센터·관리자 시스템.', descEn: 'Developed and maintained official websites for Mercedes, Peugeot, DS, and more. Reservation, call center, and admin systems with Spring/Vue/React.', descJa: 'ハンソンベンツ・プジョー・DSなど輸入車公式ブランドサイトの開発・保守。Spring/Vue/Reactベースの予約・コールセンター・管理者システム。' }, { period: '2021', org: '경기아카데미', position: 'Web Designer / Publisher', desc: '국비지원 직업훈련 교육기관 웹사이트 UI 디자인 및 웹퍼블리싱으로 커리어 시작.', descEn: 'Launched career with UI design and web publishing for a government-funded vocational training center.', descJa: '国費支援職業訓練機関のWebサイトUIデザイン・パブリッシングでキャリアをスタート。' }, ], skills: [ { cat: '프론트엔드', catEn: 'Frontend', catJa: 'フロントエンド', items: [['React / Next.js', 5, 'React / Next.js', 'React / Next.js'], ['TypeScript', 5, 'TypeScript', 'TypeScript'], ['Vue.js', 4, 'Vue.js', 'Vue.js']] }, { cat: '백엔드', catEn: 'Backend', catJa: 'バックエンド', items: [['NestJS', 5, 'NestJS', 'NestJS'], ['Node.js', 5, 'Node.js', 'Node.js'], ['REST API', 5, 'REST API', 'REST API'], ['PostgreSQL', 4, 'PostgreSQL', 'PostgreSQL'], ['GraphQL', 4, 'GraphQL', 'GraphQL']] }, { cat: '웹앱', catEn: 'Web App', catJa: 'Webアプリ', items: [['Git', 5, 'Git', 'Git'], ['GCP', 4, 'GCP', 'GCP'], ['AWS', 4, 'AWS', 'AWS'], ['Docker', 4, 'Docker', 'Docker']] }, { cat: '모바일앱', catEn: 'Mobile App', catJa: 'モバイルアプリ', items: [['React Native', 5, 'React Native', 'React Native'], ['Flutter', 4, 'Flutter', 'Flutter']] }, { cat: '데스크탑 PC', catEn: 'Desktop PC', catJa: 'デスクトップ PC', items: [['Electron', 4, 'Electron', 'Electron']] }, ], projects: ['drop', 'moai', 'dealpang'], extras: ['앱스토어·플레이스토어 10회 이상 배포 경험', '1인 풀스택으로 택시 플랫폼 2달 내 오픈', 'MSA 아키텍처 (NestJS + Spring Boot) 직접 구축'], extrasEn: ['10+ App Store & Play Store releases', 'Shipped full taxi platform solo in 2 months', 'Built MSA architecture (NestJS + Spring Boot)'], extrasJa: ['App Store・Play Storeへ10回以上リリース', '1人でタクシープラットフォームを2ヶ月でリリース', 'MSAアーキテクチャ（NestJS + Spring Boot）構築'], }, harin: { name: '서현진', nameEn: 'Hyeonjin Seo', profileImage: '/portfolio/harin/profile.jpg', role: 'DESIGNER · UI/UX', roleEn: 'DESIGNER · UI/UX Design', roleJa: 'DESIGNER · UI/UXデザイン', tagline: '브랜드의 첫인상부터 화면의 마지막 픽셀까지', taglineEn: "From a brand's first impression to the last pixel on screen", taglineJa: 'ブランドの第一印象から画面の最後のピクセルまで', char: 'designer', color: 'yellow', accent: '#D4A82E', intro: '브랜드 아이덴티티와 패키지, 로고에서 UI/UX까지 폭넓게 다루는 디자이너. 일관된 브랜드 경험과 디테일한 마감으로 사용성과 감성을 함께 담습니다.', introEn: 'A designer spanning brand identity, packaging, and logos through to UI/UX. Crafts consistent brand experiences with meticulous finishing that balances usability and emotion.', introJa: 'ブランドアイデンティティやパッケージ、ロゴからUI/UXまで幅広く手がけるデザイナー。一貫したブランド体験と丁寧な仕上げで、使いやすさと感性を両立します。', contact: {}, stats: [ { v: '9년', vEn: '9 yrs', vJa: '9年', k: '경력', kEn: 'Experience', kJa: '経験年数' }, { v: '14+', vEn: '14+', vJa: '14+', k: '프로젝트', kEn: 'Projects', kJa: 'プロジェクト' }, { v: '브랜드·패키지·UI', vEn: 'Brand · Package · UI', vJa: 'ブランド·パッケージ·UI', k: '전문 영역', kEn: 'Expertise', kJa: '専門領域' }, ], careers: [ { period: '2024 – 현재', org: '스튜디오 하루', position: 'Brand & Product Designer', desc: '브랜드 아이덴티티부터 제품 패키지, UI/UX까지 통합 디자인을 담당. 신규 브랜드 런칭과 리브랜딩 프로젝트를 주도합니다.', descEn: 'Owns integrated design spanning brand identity, product packaging, and UI/UX. Leads new brand launches and rebranding projects.', descJa: 'ブランドアイデンティティから製品パッケージ、UI/UXまで統合デザインを担当。新規ブランドのローンチとリブランディングを主導。' }, { period: '2023', org: '프리랜스 · 개인 스튜디오', position: 'Freelance Designer', desc: '브랜드·인쇄·디지털 전 영역 프리랜서 작업. 패키지와 로고, 랜딩페이지를 중심으로 다양한 클라이언트와 협업.', descEn: 'Freelance work across brand, print, and digital. Collaborated with various clients on packaging, logos, and landing pages.', descJa: 'ブランド・印刷・デジタル全領域でフリーランス。パッケージ・ロゴ・ランディングページを中心に多様なクライアントと協業。' }, { period: '2022', org: '헬스케어 브랜드', position: 'Brand Designer', desc: '건강기능식품 패키지 기획 및 디자인. 인쇄/후가공, 생산/납품까지 전 프로세스를 주도.', descEn: 'Planned and designed health-supplement packaging. Led the full process from print and post-processing to production and delivery.', descJa: '健康機能食品のパッケージ企画・デザイン。印刷・後加工から生産・納品まで全工程を主導。' }, { period: '2021', org: '커머스 스타트업', position: 'Web Designer', desc: '신제품 기획전·상세페이지·배너 제작. 자사몰 캠페인 비주얼을 전담.', descEn: 'Created promotional pages, product detail pages, and banners. Owned all campaign visuals for the brand mall.', descJa: '新製品の企画展・商品詳細ページ・バナー制作。自社モールのキャンペーンビジュアルを担当。' }, { period: '2017 – 2021', org: '디자인 에이전시', position: 'Graphic Designer', desc: '대기업 인포테인먼트·통신 프로젝트 그래픽 작업. 브랜드 가이드라인을 준수하는 작업으로 커리어를 시작.', descEn: 'Graphic work for enterprise infotainment and telecom projects. Began career working within strict brand guidelines.', descJa: '大手企業のインフォテインメント・通信プロジェクトのグラフィック制作。ブランドガイドライン準拠の制作でキャリアをスタート。' }, ], skills: [ { cat: '디자인', catEn: 'Design', catJa: 'デザイン', items: [['Figma', 5, 'Figma', 'Figma'], ['Adobe CC', 5, 'Adobe CC', 'Adobe CC'], ['Illustrator', 5, 'Illustrator', 'Illustrator'], ['Photoshop', 5, 'Photoshop', 'Photoshop']] }, { cat: '브랜딩', catEn: 'Branding', catJa: 'ブランディング', items: [['패키지 디자인', 5, 'Package Design', 'パッケージデザイン'], ['인쇄/후가공', 5, 'Print & Finishing', '印刷・後加工'], ['타이포그래피', 5, 'Typography', 'タイポグラフィ'], ['컬러 시스템', 5, 'Color System', 'カラーシステム']] }, { cat: 'UI/UX', catEn: 'UI/UX', catJa: 'UI/UX', items: [['UX 설계', 4, 'UX Design', 'UX設計'], ['UI 디자인', 5, 'UI Design', 'UIデザイン'], ['프로토타이핑', 4, 'Prototyping', 'プロトタイピング']] }, { cat: '웹/디지털', catEn: 'Web/Digital', catJa: 'Web/デジタル', items: [['배너·상세페이지', 5, 'Banner & Detail Page', 'バナー・商品詳細'], ['스킨 제작', 4, 'Skin Design', 'スキン制作'], ['HTML/CSS', 3, 'HTML/CSS', 'HTML/CSS']] }, ], projects: ['harin_app', 'harin_brand', 'harin_stream', 'harin_food', 'harin_product', 'harin_outdoor', 'harin_package', 'harin_landing', 'harin_sns', 'harin_promo', 'harin_clinic', 'harin_web', 'harin_print', 'harin_logo'], extras: ['브랜드 아이덴티티 · 패키지 · 로고 통합 디자인', '건강기능식품 패키지 풀 프로세스 (기획→납품) 경험', '대기업 인포테인먼트·통신 프로젝트 참여'], extrasEn: ['Integrated brand identity, packaging & logo design', 'Full-cycle health supplement packaging (planning → delivery)', 'Worked on enterprise infotainment & telecom projects'], extrasJa: ['ブランドアイデンティティ・パッケージ・ロゴの統合デザイン', '健康機能食品パッケージ全工程（企画→納品）経験', '大手企業のインフォテインメント・通信プロジェクト参加'], }, planner: { name: '김하늘', nameEn: 'Haneul Kim', profileImage: 'https://storage.googleapis.com/luv-wcs.firebasestorage.app/dev%2Fshop-ai-image%2Fmedium%2Fimages%2F0u-3bad6526-a853-460d-9248-de7b5acf9560.jpg', role: 'PLANNER · 기획', roleEn: 'PLANNER · Product Planning', roleJa: 'PLANNER · 企画', tagline: '복잡한 요구를 한 줄로 정리해드릴게요', taglineEn: 'Turning complexity into one clear line', taglineJa: '複雑な要件を一行にまとめる達人', char: 'planner', color: 'pink', accent: '#D88BB8', intro: '10년차 서비스 기획자. IA 설계와 UX 라이팅이 주특기. 사용자 인터뷰 → 와이어프레임 → 콘텐츠 전략까지 일관된 흐름으로 정리합니다.', introEn: '10-year service planner. Specializes in IA design and UX writing. Delivers a consistent flow from user interviews to wireframes to content strategy.', introJa: '10年のサービス企画者。IA設計とUXライティングが得意。ユーザーインタビュー→ワイヤーフレーム→コンテンツ戦略まで一貫した流れで整理します。', contact: {}, stats: [ { v: '10년', vEn: '10 yrs', vJa: '10年', k: '경력', kEn: 'Experience', kJa: '経験年数' }, { v: '32건', vEn: '32', vJa: '32件', k: '서비스 기획', kEn: 'Services Planned', kJa: 'サービス企画' }, { v: '180+', vEn: '180+', vJa: '180+', k: 'UT 인터뷰', kEn: 'UT Interviews', kJa: 'UTインタビュー' }, ], careers: [ { period: '2023.08 – 현재', org: '더파인팀', position: 'Lead Planner', desc: '서비스 기획·IA·UX 라이팅 총괄. 클라이언트 인터뷰 진행.', descEn: 'Leads service planning, IA, and UX writing. Conducts client interviews.', descJa: 'サービス企画・IA・UXライティングを統括。クライアントインタビューを担当。' }, { period: '2020.10 – 2023.07', org: '깨비 에듀테크', position: 'Service Planner', desc: '초중등 학습 앱 신규 기능 12건 런칭. 리텐션 41% 개선.', descEn: 'Launched 12 new features for K-12 learning app. Improved retention by 41%.', descJa: '初中等学習アプリの新機能12件をリリース。リテンション41%改善。' }, { period: '2018.04 – 2020.09', org: '봄커머스', position: 'Junior Planner', desc: '커머스 PB 상품 기획 + 상세페이지 제작. 일평균 1,800건 트래픽.', descEn: 'Planned PB products for e-commerce + product detail pages. Avg. 1,800 daily visitors.', descJa: 'コマースPB商品企画＋商品詳細ページ制作。日平均1,800件のトラフィック。' }, { period: '2016.03 – 2018.03', org: '링크스튜디오', position: 'Planning Intern → Associate', desc: 'UX 리서치 및 서비스 기획 보조. 사용자 인터뷰·설문 데이터 분석으로 커리어 시작.', descEn: 'Started career with UX research and service planning support. User interviews and survey data analysis.', descJa: 'UXリサーチ・サービス企画補助でキャリアスタート。ユーザーインタビュー・アンケートデータ分析。' }, ], skills: [ { cat: '기획', catEn: 'Planning', catJa: '企画', items: [['서비스 기획', 5, 'Service Planning', 'サービス企画'], ['IA 설계', 5, 'IA Design', 'IA設計'], ['와이어프레임', 5, 'Wireframing', 'ワイヤーフレーム'], ['요구사항 정의서', 5, 'Requirements Doc', '要件定義書']] }, { cat: 'UX 라이팅', catEn: 'UX Writing', catJa: 'UXライティング', items: [['톤앤매너 설계', 5, 'Tone & Voice', 'トーン&マナー'], ['마이크로카피', 5, 'Microcopy', 'マイクロコピー'], ['에러 메시지', 4, 'Error Messaging', 'エラーメッセージ']] }, { cat: '리서치', catEn: 'Research', catJa: 'リサーチ', items: [['UT 인터뷰', 5, 'UT Interviews', 'UTインタビュー'], ['설문 설계', 4, 'Survey Design', 'サーベイ設計'], ['데이터 분석', 4, 'Data Analysis', 'データ分析']] }, { cat: '도구', catEn: 'Tools', catJa: 'ツール', items: [['Figma', 5, 'Figma', 'Figma'], ['Notion', 5, 'Notion', 'Notion'], ['Mixpanel', 4, 'Mixpanel', 'Mixpanel'], ['Hotjar', 4, 'Hotjar', 'Hotjar']] }, ], projects: ['fit_plan','trip_plan','edu_plan','med_plan','beauty_plan','study_plan','pay_plan','pet_plan','order_plan','mental_plan','talent_plan','home_plan'], extras: ['HCI 학회 정회원', 'UX 라이팅 강연 (×4)', 'Notion Korean Ambassador'], extrasEn: ['HCI Society Member', 'UX Writing Speaker (×4)', 'Notion Korean Ambassador'], extrasJa: ['HCI学会 正会員', 'UXライティング登壇（×4）', 'Notion Korean Ambassador'], }, dev: { name: '정준혁', nameEn: 'Junhyeok Jeong', profileImage: 'https://storage.googleapis.com/luv-wcs.firebasestorage.app/dev%2Fshop-ai-image%2Fmedium%2Fimages%2F0u-12ec33c7-9769-468d-b074-b29348576274.jpg', role: 'DEVELOPER · 개발', roleEn: 'DEVELOPER · Engineering', roleJa: 'DEVELOPER · 開発', tagline: '읽기 좋은 코드를 쓰는, 약간 까다로운 개발자', taglineEn: 'A slightly picky dev who writes code worth reading', taglineJa: '読みやすいコードを書く、少し気難しいエンジニア', char: 'dev', color: 'cyan', accent: '#5BA8B5', intro: '7년차 풀스택. React 생태계와 Node 백엔드, 그리고 AWS 인프라까지. 코드 리뷰가 가장 재미있다는 약간 이상한 사람입니다.', introEn: '7-year full-stack. React ecosystem, Node backend, and AWS infrastructure. Slightly odd — finds code review the most enjoyable part.', introJa: '7年のフルスタック。Reactエコシステム、Node.jsバックエンド、AWSインフラまで。コードレビューが一番楽しいという、少し変わった開発者です。', contact: {}, stats: [ { v: '7년', vEn: '7 yrs', vJa: '7年', k: '경력', kEn: 'Experience', kJa: '経験年数' }, { v: '21개', vEn: '21', vJa: '21件', k: '런칭 서비스', kEn: 'Services Launched', kJa: 'リリース数' }, { v: '420+', vEn: '420+', vJa: '420+', k: 'OSS 컨트리뷰션', kEn: 'OSS Contributions', kJa: 'OSSコントリビュート' }, ], careers: [ { period: '2023.05 – 현재', org: '그리드랩', position: 'Lead Engineer', desc: '프론트엔드·백엔드·인프라 총괄. 코드 리뷰 + 신입 멘토링.', descEn: 'Leads frontend, backend, and infrastructure. Code reviews + junior mentoring.', descJa: 'フロントエンド・バックエンド・インフラを統括。コードレビュー＋新人メンタリング。' }, { period: '2021.02 – 2023.04', org: '도란핀테크', position: 'Full-stack Engineer', desc: '결제·정산 시스템 개발. 일 트랜잭션 28만 건 안정 운영.', descEn: 'Developed payment and settlement systems. Stably processed 280K daily transactions.', descJa: '決済・精算システム開発。日28万件のトランザクションを安定運用。' }, { period: '2019.07 – 2021.01', org: '슬래시 스타트업', position: 'Frontend Engineer', desc: 'React/Redux 기반 SaaS 프론트엔드. 디자인 시스템 셋업.', descEn: 'SaaS frontend with React/Redux. Set up the design system from scratch.', descJa: 'React/ReduxベースのSaaSフロントエンド。デザインシステムのセットアップ。' }, ], skills: [ { cat: 'Frontend', catEn: 'Frontend', catJa: 'フロントエンド', items: [['React / Next.js', 5, 'React / Next.js', 'React / Next.js'], ['TypeScript', 5, 'TypeScript', 'TypeScript'], ['Tailwind', 5, 'Tailwind', 'Tailwind'], ['GSAP', 4, 'GSAP', 'GSAP'], ['Three.js', 3, 'Three.js', 'Three.js']] }, { cat: 'Backend', catEn: 'Backend', catJa: 'バックエンド', items: [['Node.js / Express', 5, 'Node.js / Express', 'Node.js / Express'], ['NestJS', 4, 'NestJS', 'NestJS'], ['GraphQL', 4, 'GraphQL', 'GraphQL'], ['Python (Django)', 3, 'Python (Django)', 'Python (Django)']] }, { cat: 'Database', catEn: 'Database', catJa: 'データベース', items: [['PostgreSQL', 5, 'PostgreSQL', 'PostgreSQL'], ['Redis', 4, 'Redis', 'Redis'], ['MongoDB', 4, 'MongoDB', 'MongoDB']] }, { cat: 'DevOps', catEn: 'DevOps', catJa: 'DevOps', items: [['AWS', 4, 'AWS', 'AWS'], ['Docker', 4, 'Docker', 'Docker'], ['GitHub Actions', 5, 'GitHub Actions', 'GitHub Actions'], ['Vercel', 5, 'Vercel', 'Vercel']] }, ], projects: ['dev_paykit','dev_taskboard','dev_api','dev_monitor','dev_admin'], extras: ['정보처리기사', 'AWS Developer Associate', 'React Conf Korea 2023 발표', 'OSS: react-zigzag 메인테이너'], extrasEn: ['Engineer Information Processing', 'AWS Developer Associate', 'React Conf Korea 2023 Speaker', 'OSS: react-zigzag Maintainer'], extrasJa: ['情報処理技士', 'AWS Developer Associate', 'React Conf Korea 2023 登壇', 'OSS: react-zigzag メンテナー'], }, }; const PROJECT_INFO = { delivery: { title: '모찌배달', titleEn: 'Motchi Delivery', titleJa: 'モッチデリバリー', tag: '모바일 앱 · 2025', tagEn: 'Mobile App · 2025', tagJa: 'モバイルアプリ · 2025', mock: 'delivery', bg: 'pink' }, cafe: { title: '별다방 리워드', titleEn: 'Star Café Rewards', titleJa: 'スターカフェ リワード', tag: '브랜드 · 2024', tagEn: 'Branding · 2024', tagJa: 'ブランド · 2024', mock: 'cafe', bg: 'mint' }, chat: { title: '또또톡', titleEn: 'TalkTalk', titleJa: 'トートトーク', tag: '실시간 채팅 · 2024', tagEn: 'Real-time Chat · 2024', tagJa: 'リアルタイムチャット · 2024', mock: 'chat', bg: 'cyan' }, dash: { title: '콘텐츠랩', titleEn: 'ContentsLab', titleJa: 'コンテンツラボ', tag: 'SaaS 대시보드 · 2025', tagEn: 'SaaS Dashboard · 2025', tagJa: 'SaaSダッシュボード · 2025', mock: 'dash', bg: 'lavender' }, fit: { title: '운동친구', titleEn: 'FitBuddy', titleJa: 'フィットバディ', tag: '헬스케어 · 2024', tagEn: 'Healthcare · 2024', tagJa: 'ヘルスケア · 2024', mock: 'fit', bg: 'peach' }, drop: { title: '드랍모빌리티', titleEn: 'Drop Mobility', titleJa: 'ドロップモビリティ', tag: '택시 플랫폼 · 2026', tagEn: 'Taxi Platform · 2026', tagJa: 'タクシープラットフォーム · 2026', mock: 'chat', bg: 'cyan' }, moai: { title: '모아이', titleEn: 'Moai', titleJa: 'モアイ', tag: 'AI 통합 플랫폼 · 2024', tagEn: 'AI Platform · 2024', tagJa: 'AI統合プラットフォーム · 2024', mock: 'fit', bg: 'lavender', links: [{ label: 'moai.page', url: 'https://moai.page' }, { label: 'mindmap', url: 'https://moai.page/mindmap' }] }, dealpang: { title: '딜팡', titleEn: 'Dealpang', titleJa: 'ディールパン', tag: '쇼핑몰 · 2025', tagEn: 'Shop Mall · 2025', tagJa: 'ショッピングモール · 2025', mock: 'brand', bg: 'peach' }, /* ── 플래너 전용 12개 ── */ fit_plan: { title: '핏플래너', titleEn: 'FitPlanner', titleJa: 'フィットプランナー', tag: '헬스케어 UX · 2024', tagEn: 'Healthcare UX · 2024', tagJa: 'ヘルスケアUX · 2024', img: 'https://pixabay.com/get/gb1f1ef7aff6a49c400e641de9cd562de2e279ea15f22651fc1b682052d3a2b40bb38c7cbe6cf5474dc6fd14612fba26d3732a56d0b5e5029629b6395d108412e_640.jpg', bg: 'peach' }, trip_plan: { title: '트립루트', titleEn: 'TripRoute', titleJa: 'トリップルート', tag: '여행 서비스 기획 · 2024', tagEn: 'Travel Planning · 2024', tagJa: '旅行サービス企画 · 2024', img: 'https://pixabay.com/get/g903784064a1b4b6776e5f32565bf5983606c868e5451e39d6f9593e24f2f8d4130c38b4f3755136a58993893e1deb78c252c9404ab21884770489804335f7e32_640.jpg', bg: 'mint' }, edu_plan: { title: '에듀링크', titleEn: 'EduLink', titleJa: 'エデュリンク', tag: '에듀테크 기획 · 2023', tagEn: 'EdTech Planning · 2023', tagJa: 'エドテック企画 · 2023', img: 'https://pixabay.com/get/g926ac56d1f423bcb8946955c294a85661ea82ec7b602d083f4d10903442f4085c65e25de95afe1e47e2a4ef66fb5fd80086aac249c5b5f9ae252c2cf477c045e_640.jpg', bg: 'lavender' }, med_plan: { title: '닥터온', titleEn: 'DoctorOn', titleJa: 'ドクターオン', tag: '비대면 진료 UX · 2024', tagEn: 'Telemedicine UX · 2024', tagJa: '遠隔診療UX · 2024', img: 'https://pixabay.com/get/gcb1d766b3b5c8f49719e76699e3145eff6f3af159c07d8ed8fea190f24019e56f35fa52c6fa73e081cf771ed5b42935fd27eecc64c18f11404581d40c4c90918_640.jpg', bg: 'cyan' }, beauty_plan: { title: '글로우박스', titleEn: 'GlowBox', titleJa: 'グロウボックス', tag: '뷰티 구독 UX · 2023', tagEn: 'Beauty Subscription · 2023', tagJa: 'ビューティサブスク · 2023', img: 'https://pixabay.com/get/g01dc3965469c6803794f2da5a7070f149f5b6791b023f0f4438e9c83e2d22c65b534e747e394748cdf9df531963314b94839bfc1b4c0295fab8cd4d3eb60ce6d_640.jpg', bg: 'pink' }, study_plan: { title: '스터디메이트', titleEn: 'StudyMate', titleJa: 'スタディメイト', tag: '스터디 매칭 기획 · 2023', tagEn: 'Study Matching · 2023', tagJa: 'スタディマッチング · 2023', img: 'https://pixabay.com/get/gbee24530b085425e126255a7cd910c4b7e27f55815b6d9d773ac1615b45772fd6fda47b84595ca8ff0237db85e0613cf3197fa2a3dc4055bc519a4a09b675f02_640.jpg', bg: 'yellow' }, pay_plan: { title: '페이원', titleEn: 'PayOne', titleJa: 'ペイワン', tag: '간편결제 UX · 2024', tagEn: 'Simple Payment UX · 2024', tagJa: '簡単決済UX · 2024', img: 'https://pixabay.com/get/g905d299e3680cbf7e3a2d18a1a29032ad19fdb3acab74aeb33141d19d31d3775ebc333b18cb4f01f75b07b47a4d2d5f6c4dfb718b937428862002bef5d66d032_640.jpg', bg: 'mint' }, pet_plan: { title: '냥이집사', titleEn: 'PawKeeper', titleJa: 'ニャンコ執事', tag: '펫케어 서비스 기획 · 2024', tagEn: 'Pet Care Planning · 2024', tagJa: 'ペットケア企画 · 2024', img: 'https://pixabay.com/get/g2afe4fb21cb120655d5ba0c1c8d1f6c2115cfe54ce191e43e5015536cc2c7b7cad9007fbbb734f0dd5373ac2306f506822b3f41e0539cee558c52ea35f3fd249_640.jpg', bg: 'peach' }, order_plan: { title: '오더링크', titleEn: 'OrderLink', titleJa: 'オーダーリンク', tag: '주문관리 앱 기획 · 2023', tagEn: 'Order Mgmt Planning · 2023', tagJa: '注文管理アプリ企画 · 2023', img: 'https://pixabay.com/get/g20dd45b650e40e3177d9f0b919e9bdaf58bc972c22703b019fd49cc9b7f75665fef1315b2b3e477a357497597a019489ce71348d10b4316df2881c209b1f40fd_640.jpg', bg: 'cyan' }, mental_plan: { title: '마음나눔', titleEn: 'MindShare', titleJa: 'こころシェア', tag: '멘탈케어 커뮤니티 · 2024', tagEn: 'Mental Health Community · 2024', tagJa: 'メンタルケアコミュニティ · 2024', img: 'https://pixabay.com/get/ge956e0d1b150507c2beac42d28011e3a124c58ba5cc3a29dbaea9a641272243c7febc5d3786d46a595a63bf40b06d74f86af96b13657defbe7756a1c8678fec2_640.jpg', bg: 'lavender' }, talent_plan: { title: '탤런트마켓', titleEn: 'TalentMarket', titleJa: 'タレントマーケット', tag: '재능 마켓플레이스 기획 · 2025', tagEn: 'Talent Marketplace · 2025', tagJa: 'タレントマーケット企画 · 2025', img: 'https://pixabay.com/get/g5b0cc2c32b98678611a8afc4837185ca2674adea4c93f0638f08c07dd1868e2ff56b0698ac76bd3f48242411017960dd_640.jpg', bg: 'yellow' }, home_plan: { title: '홈케어', titleEn: 'HomeCare', titleJa: 'ホームケア', tag: '스마트홈 UX 기획 · 2025', tagEn: 'Smart Home UX · 2025', tagJa: 'スマートホームUX · 2025', img: 'https://pixabay.com/get/ga18f549f058abacb18c773adea349edd2c99670ede1321c7cbcefd55ca5e8af9f9b92eab23972d660c56b8358f6ae9409bf2ce5def5752469cfbcb123cbc636b_640.jpg', bg: 'mint' }, /* ── 서현진 포트폴리오 14개 ── */ harin_app: { title: '모빌리티 앱 UI', titleEn: 'Mobility App UI', titleJa: 'モビリティアプリUI', tag: 'UI/UX 디자인 · 2024', tagEn: 'UI/UX Design · 2024', tagJa: 'UI/UXデザイン · 2024', bg: 'cyan', images: [{ src: '/portfolio/harin/ride-app/user.png', caption: '유저용 앱 UI' }, { src: '/portfolio/harin/ride-app/driver.png', caption: '드라이버용 앱 UI' }] }, harin_brand: { title: '브랜드 아이덴티티', titleEn: 'Brand Identity', titleJa: 'ブランドアイデンティティ', tag: '브랜드 디자인 · 2023', tagEn: 'Brand Design · 2023', tagJa: 'ブランドデザイン · 2023', bg: 'yellow', images: [{ src: '/portfolio/harin/brand-id/identity-main.png', caption: '브랜드 아이덴티티' }, { src: '/portfolio/harin/brand-id/logo-mockup.jpg', caption: '로고 목업' }, { src: '/portfolio/harin/brand-id/brand-design.jpg', caption: '브랜드 디자인' }] }, harin_stream: { title: '스트리밍 앱 리디자인', titleEn: 'Streaming App Redesign', titleJa: 'ストリーミングアプリ リデザイン', tag: 'UI/UX 디자인 · 2022', tagEn: 'UI/UX Design · 2022', tagJa: 'UI/UXデザイン · 2022', bg: 'pink', images: [{ src: '/portfolio/harin/stream-app/main.png', caption: '스트리밍 앱 UI/UX' }] }, harin_food: { title: '푸드 브랜드 웹', titleEn: 'Food Brand Web', titleJa: 'フードブランドWeb', tag: '인터랙션 디자인 · 2021', tagEn: 'Interaction Design · 2021', tagJa: 'インタラクションデザイン · 2021', bg: 'mint', images: [{ src: '/portfolio/harin/food-brand/main.png', caption: '푸드 브랜드 인터랙션' }] }, harin_product: { title: '프로덕트 커머스', titleEn: 'Product Commerce', titleJa: 'プロダクトコマース', tag: '인터랙션 디자인 · 2021', tagEn: 'Interaction Design · 2021', tagJa: 'インタラクションデザイン · 2021', bg: 'cyan', images: [{ src: '/portfolio/harin/product-brand/main.png', caption: '프로덕트 인터랙션' }] }, harin_outdoor: { title: '라이프스타일 브랜드', titleEn: 'Lifestyle Brand', titleJa: 'ライフスタイルブランド', tag: '인터랙션 디자인 · 2021', tagEn: 'Interaction Design · 2021', tagJa: 'インタラクションデザイン · 2021', bg: 'lavender', images: [{ src: '/portfolio/harin/outdoor-brand/main.png', caption: '라이프스타일 인터랙션' }] }, harin_package: { title: '패키지 디자인', titleEn: 'Package Design', titleJa: 'パッケージデザイン', tag: '패키지 · 2023', tagEn: 'Packaging · 2023', tagJa: 'パッケージング · 2023', bg: 'peach', images: [ { src: '/portfolio/harin/package/overview-01.png', caption: '패키지 디자인' }, { src: '/portfolio/harin/package/overview-02.png', caption: '패키지 디자인' }, { src: '/portfolio/harin/package/overview-03.png', caption: '패키지 디자인' }, { src: '/portfolio/harin/package/overview-04.png', caption: '패키지 디자인' }, { src: '/portfolio/harin/package/v1-01.jpg', caption: '패키지 시안 A-1' }, { src: '/portfolio/harin/package/v1-02.jpg', caption: '패키지 시안 A-2' }, { src: '/portfolio/harin/package/v1-03.jpg', caption: '패키지 시안 A-3' }, { src: '/portfolio/harin/package/v1-04.jpg', caption: '패키지 시안 A-4' }, { src: '/portfolio/harin/package/v1-05.jpg', caption: '패키지 시안 A-5' }, { src: '/portfolio/harin/package/v1-06.jpg', caption: '패키지 시안 A-6' }, { src: '/portfolio/harin/package/v1-07.jpg', caption: '패키지 시안 A-7' }, { src: '/portfolio/harin/package/v2-01.jpg', caption: '패키지 시안 B-1' }, { src: '/portfolio/harin/package/v2-02.jpg', caption: '패키지 시안 B-2' }, { src: '/portfolio/harin/package/v2-03.jpg', caption: '패키지 시안 B-3' }, { src: '/portfolio/harin/package/v2-04.jpg', caption: '패키지 시안 B-4' }, { src: '/portfolio/harin/package/v2-05.jpg', caption: '패키지 시안 B-5' }, { src: '/portfolio/harin/package/v2-06.jpg', caption: '패키지 시안 B-6' }, { src: '/portfolio/harin/package/v2-07.jpg', caption: '패키지 시안 B-7' }, ] }, harin_landing: { title: '랜딩페이지', titleEn: 'Landing Pages', titleJa: 'ランディングページ', tag: '웹 디자인 · 2022–2024', tagEn: 'Web Design · 2022–2024', tagJa: 'Webデザイン · 2022–2024', bg: 'mint', images: [ { src: '/portfolio/harin/landing-page/landing-01.png', caption: '헬스케어 랜딩페이지' }, { src: '/portfolio/harin/landing-page/landing-02.png', caption: '유제품 브랜드 랜딩페이지' }, { src: '/portfolio/harin/landing-page/landing-03.png', caption: '스튜디오 랜딩페이지' }, { src: '/portfolio/harin/landing-page/landing-04.png', caption: '필라테스 랜딩페이지' }, { src: '/portfolio/harin/landing-page/landing-05.png', caption: '피트니스 랜딩페이지' }, ] }, harin_sns: { title: 'SNS 디자인', titleEn: 'SNS Design', titleJa: 'SNSデザイン', tag: 'SNS · 2022–2024', tagEn: 'SNS · 2022–2024', tagJa: 'SNS · 2022–2024', bg: 'pink', images: [ { src: '/portfolio/harin/sns/overview.png', caption: 'SNS 디자인 전체' }, { src: '/portfolio/harin/sns/v1-01.jpg', caption: 'SNS 시안 A-01' }, { src: '/portfolio/harin/sns/v1-02.jpg', caption: 'SNS 시안 A-02' }, { src: '/portfolio/harin/sns/v1-03.jpg', caption: 'SNS 시안 A-03' }, { src: '/portfolio/harin/sns/v1-04.jpg', caption: 'SNS 시안 A-04' }, { src: '/portfolio/harin/sns/v1-05.jpg', caption: 'SNS 시안 A-05' }, { src: '/portfolio/harin/sns/v1-06.jpg', caption: 'SNS 시안 A-06' }, { src: '/portfolio/harin/sns/v1-07.jpg', caption: 'SNS 시안 A-07' }, { src: '/portfolio/harin/sns/v1-08.jpg', caption: 'SNS 시안 A-08' }, { src: '/portfolio/harin/sns/v1-09.jpg', caption: 'SNS 시안 A-09' }, { src: '/portfolio/harin/sns/v2-01.jpg', caption: 'SNS 시안 B-01' }, { src: '/portfolio/harin/sns/v2-02.jpg', caption: 'SNS 시안 B-02' }, { src: '/portfolio/harin/sns/v2-03.jpg', caption: 'SNS 시안 B-03' }, { src: '/portfolio/harin/sns/v2-04.jpg', caption: 'SNS 시안 B-04' }, { src: '/portfolio/harin/sns/v2-05.jpg', caption: 'SNS 시안 B-05' }, { src: '/portfolio/harin/sns/v2-06.jpg', caption: 'SNS 시안 B-06' }, { src: '/portfolio/harin/sns/v2-07.jpg', caption: 'SNS 시안 B-07' }, { src: '/portfolio/harin/sns/v2-08.jpg', caption: 'SNS 시안 B-08' }, { src: '/portfolio/harin/sns/v2-09.jpg', caption: 'SNS 시안 B-09' }, ] }, harin_promo: { title: '팝업 · 배너 디자인', titleEn: 'Popup & Banner Design', titleJa: 'ポップアップ・バナーデザイン', tag: '팝업/배너 · 2022–2023', tagEn: 'Popup/Banner · 2022–2023', tagJa: 'ポップアップ/バナー · 2022–2023', bg: 'lavender', images: [ { src: '/portfolio/harin/promo/editor-01.png', caption: '프로모션 배너 1' }, { src: '/portfolio/harin/promo/editor-02.png', caption: '프로모션 배너 2' }, { src: '/portfolio/harin/promo/editor-03.png', caption: '프로모션 배너 3' }, { src: '/portfolio/harin/promo/editor-04.png', caption: '프로모션 배너 4' }, { src: '/portfolio/harin/promo/replay-01.png', caption: '콘텐츠 배너 1' }, { src: '/portfolio/harin/promo/replay-02.png', caption: '콘텐츠 배너 2' }, { src: '/portfolio/harin/promo/replay-03.png', caption: '콘텐츠 배너 3' }, { src: '/portfolio/harin/promo/replay-04.png', caption: '콘텐츠 배너 4' }, ] }, harin_clinic: { title: '배너 디자인', titleEn: 'Banner Design', titleJa: 'バナーデザイン', tag: '배너 · 2022', tagEn: 'Banner · 2022', tagJa: 'バナー · 2022', bg: 'mint', images: [{ src: '/portfolio/harin/clinic-banner/01.png', caption: '배너 1' }, { src: '/portfolio/harin/clinic-banner/02.png', caption: '배너 2' }, { src: '/portfolio/harin/clinic-banner/03.png', caption: '배너 3' }] }, harin_web: { title: '웹 디자인', titleEn: 'Web Design', titleJa: 'Webデザイン', tag: '웹 · 2022–2023', tagEn: 'Web · 2022–2023', tagJa: 'Web · 2022–2023', bg: 'cyan', images: [{ src: '/portfolio/harin/web/01.png', caption: '웹 디자인 1' }, { src: '/portfolio/harin/web/02.png', caption: '웹 디자인 2' }] }, harin_print: { title: '인쇄물 디자인', titleEn: 'Print Design', titleJa: '印刷物デザイン', tag: '인쇄 · 2022–2023', tagEn: 'Print · 2022–2023', tagJa: '印刷 · 2022–2023', bg: 'yellow', images: [{ src: '/portfolio/harin/print/main.png', caption: '인쇄물 디자인' }] }, harin_logo: { title: '로고 · 브랜딩', titleEn: 'Logo & Branding', titleJa: 'ロゴ・ブランディング', tag: '로고/브랜딩 · 2021–2022', tagEn: 'Logo/Branding · 2021–2022', tagJa: 'ロゴ/ブランディング · 2021–2022', bg: 'peach', images: [{ src: '/portfolio/harin/logo-branding/01.png', caption: '로고 디자인 1' }, { src: '/portfolio/harin/logo-branding/02.png', caption: '로고 디자인 2' }, { src: '/portfolio/harin/logo-branding/03.png', caption: '로고 디자인 3' }] }, /* ── 개발자 전용 5개 (IT 제품 UI 목업 — mock: shop/saas/api/dash/admin, 윤다민 chat/fit/brand 와 겹치지 않음) ── */ dev_paykit: { title: '페이킷', titleEn: 'PayKit', titleJa: 'ペイキット', tag: '결제 통합 SDK · 2023', tagEn: 'Payment SDK · 2023', tagJa: '決済SDK · 2023', mock: 'shop', bg: 'yellow' }, dev_taskboard: { title: '태스크보드', titleEn: 'TaskBoard', titleJa: 'タスクボード', tag: '팀 프로젝트 관리 SaaS · 2025', tagEn: 'Team Project Mgmt SaaS · 2025', tagJa: 'チームプロジェクト管理SaaS · 2025', mock: 'saas', bg: 'cyan' }, dev_api: { title: 'API허브', titleEn: 'APIHub', titleJa: 'APIハブ', tag: 'API 게이트웨이 · 2023', tagEn: 'API Gateway · 2023', tagJa: 'APIゲートウェイ · 2023', mock: 'api', bg: 'lavender' }, dev_monitor: { title: '서버레이더', titleEn: 'ServerRadar', titleJa: 'サーバーレーダー', tag: '서버 모니터링 SaaS · 2024', tagEn: 'Server Monitoring SaaS · 2024', tagJa: 'サーバーモニタリングSaaS · 2024', mock: 'dash', bg: 'mint' }, dev_admin: { title: '어드민스위트', titleEn: 'AdminSuite', titleJa: 'アドミンスイート', tag: '통합 관리자 콘솔 · 2024', tagEn: 'Unified Admin Console · 2024', tagJa: '統合管理コンソール · 2024', mock: 'admin', bg: 'peach' }, }; function ResumeModal({ memberId, onClose }) { const { lang, t } = useLang(); const [tab, setTab] = useState('career'); const [hasMore, setHasMore] = useState(false); const sheetRef = useRef(null); const r = RESUMES[memberId]; const isKo = lang === 'ko'; const isJa = lang === 'ja'; const pick = (ko, en, ja) => isKo ? ko : isJa ? (ja || en) : en; const presentWord = isKo ? '현재' : isJa ? '現在' : 'Present'; const fmtPeriod = (p) => p.replace('현재', presentWord).replace(/\.\d{2}/g, ''); useEffect(() => { if (!memberId) return; document.body.style.overflow = 'hidden'; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); }; }, [memberId, onClose]); useEffect(() => { const el = sheetRef.current; if (!el) return; const check = () => setHasMore(el.scrollTop + el.clientHeight < el.scrollHeight - 16); check(); el.addEventListener('scroll', check, { passive: true }); return () => el.removeEventListener('scroll', check); }, [memberId, tab]); if (!r) return null; const Char = { lead: CharLead, planner: CharPlanner, dev: CharDev, designer: CharDesigner, designer2: CharDesigner2 }[r.char]; const tabs = [ { id: 'career', label: t('tab_career') }, { id: 'skills', label: t('tab_skills') }, { id: 'projects', label: t('tab_projects') }, ]; return (
e.stopPropagation()} data-c={r.color}> {/* Header */}
{r.profileImage ? {r.name} : }
{pick(r.role, r.roleEn, r.roleJa)}

{isKo ? r.name : r.nameEn}

{pick(r.tagline, r.taglineEn, r.taglineJa)}

{r.stats.map((s, i) => (
{pick(s.v, s.vEn, s.vJa)}
{pick(s.k, s.kEn, s.kJa)}
))}
{/* Intro */}

{t(`team_${memberId}_intro`) || pick(r.intro, r.introEn, r.introJa)}

{Object.entries(r.contact).map(([k, v]) => { const isLink = k !== 'email'; const href = isLink ? 'https://' + v : 'mailto:' + v; return ( {k} · {v} ); })}
{/* Tabs */}
{tabs.map(tab_item => ( ))}
{/* Tab content */}
{tab === 'career' && (
{r.careers.map((c, i) => (
{i < r.careers.length - 1 && }
{fmtPeriod(c.period)}
{c.org} · {c.position}
{pick(c.desc, c.descEn, c.descJa)}
))}
)} {tab === 'skills' && (
{r.skills.map(cat => (
▸ {pick(cat.cat, cat.catEn, cat.catJa)}
{cat.items.map(([ko, lvl, en, ja]) => (
{pick(ko, en, ja)}
{lvl}/5
))}
))}
)} {tab === 'projects' && (
{r.projects.map(pid => { const p = PROJECT_INFO[pid]; const thumbSrc = p.images ? p.images[0].src : p.img; return (
{thumbSrc ? {pick(p.title, :
}
{pick(p.tag, p.tagEn, p.tagJa)}
{pick(p.title, p.titleEn, p.titleJa)}
{p.images && p.images.length > 1 && (
{p.images.map((img, i) => ( {img.caption ))}
)} {p.links && (
{p.links.map(lk => ( {lk.label} ↗ ))}
)}
); })}
)}
{/* Scroll hint */} {hasMore &&
↓
} {/* Footer */}
{t('nav_cta')}
); } Object.assign(window, { ResumeModal, RESUMES, PROJECT_INFO });