{"id":3566,"date":"2025-10-16T23:51:29","date_gmt":"2025-10-16T16:51:29","guid":{"rendered":"https:\/\/hcbiopharm.net\/?page_id=3566"},"modified":"2025-10-16T23:57:00","modified_gmt":"2025-10-16T16:57:00","slug":"li","status":"publish","type":"page","link":"https:\/\/hcbiopharm.net\/en\/li\/","title":{"rendered":"Smart Household Account Book"},"content":{"rendered":"
\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 - \ud604\uae08 & \uacc4\uc88c \ud1b5\ud569 \uad00\ub9ac<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\r\n <style>\r\n :root {\r\n --primary: #4361ee;\r\n --secondary: #3f37c9;\r\n --success: #4cc9f0;\r\n --light: #f8f9fa;\r\n --dark: #212529;\r\n --warning: #f72585;\r\n --gray: #6c757d;\r\n --light-gray: #e9ecef;\r\n --card-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n --transition: all 0.3s ease;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', 'Roboto', 'Noto Sans KR', sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f5f7fb;\r\n color: var(--dark);\r\n padding-bottom: 60px;\r\n }\r\n \r\n .container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 15px;\r\n }\r\n \r\n \/* \ud5e4\ub354 \uc2a4\ud0c0\uc77c *\/\r\n header {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n color: white;\r\n padding: 1rem 0;\r\n box-shadow: var(--card-shadow);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n \r\n .header-content {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n \r\n .logo i {\r\n font-size: 2rem;\r\n }\r\n \r\n .logo h1 {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n }\r\n \r\n .date-display {\r\n background: rgba(255, 255, 255, 0.15);\r\n padding: 8px 16px;\r\n border-radius: 30px;\r\n font-size: 1rem;\r\n }\r\n \r\n \/* \ub124\ube44\uac8c\uc774\uc158 *\/\r\n nav ul {\r\n display: flex;\r\n list-style: none;\r\n gap: 20px;\r\n }\r\n \r\n nav a {\r\n color: white;\r\n text-decoration: none;\r\n font-weight: 500;\r\n padding: 8px 12px;\r\n border-radius: 6px;\r\n transition: var(--transition);\r\n }\r\n \r\n nav a:hover, nav a.active {\r\n background: rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* \uba54\uc778 \ucf58\ud150\uce20 *\/\r\n main {\r\n padding: 2rem 0;\r\n }\r\n \r\n \/* \uce74\ub4dc \uc704\uc82f *\/\r\n .card {\r\n background: white;\r\n border-radius: 16px;\r\n box-shadow: var(--card-shadow);\r\n padding: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n transition: var(--transition);\r\n }\r\n \r\n .card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n }\r\n \r\n .card-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 1.25rem;\r\n padding-bottom: 0.75rem;\r\n border-bottom: 1px solid var(--light-gray);\r\n }\r\n \r\n .card-title {\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n color: var(--dark);\r\n }\r\n \r\n .card-title i {\r\n margin-right: 10px;\r\n color: var(--primary);\r\n }\r\n \r\n \/* \uacc4\uc88c \uc694\uc57d *\/\r\n .account-summary {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 1.5rem;\r\n }\r\n \r\n .account-card {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n \r\n .account-icon {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n }\r\n \r\n .cash-icon { background: linear-gradient(135deg, #4ade80, #22c55e); color: white; }\r\n .corporate-icon { background: linear-gradient(135deg, #60a5fa, #3b82f6); color: white; }\r\n .personal-icon { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }\r\n \r\n .account-info h3 {\r\n font-size: 1.1rem;\r\n margin-bottom: 4px;\r\n }\r\n \r\n .account-balance {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n }\r\n \r\n .positive { color: #10b981; }\r\n .negative { color: #ef4444; }\r\n \r\n \/* \ucc28\ud2b8 *\/\r\n .chart-container {\r\n height: 300px;\r\n position: relative;\r\n }\r\n \r\n \/* \ud14c\uc774\ube14 *\/\r\n .table-responsive {\r\n overflow-x: auto;\r\n }\r\n \r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n }\r\n \r\n thead th {\r\n background-color: var(--light-gray);\r\n padding: 12px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--gray);\r\n }\r\n \r\n tbody tr {\r\n border-bottom: 1px solid var(--light-gray);\r\n }\r\n \r\n tbody tr:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n tbody td {\r\n padding: 12px 15px;\r\n color: var(--dark);\r\n }\r\n \r\n tbody tr:hover {\r\n background-color: rgba(67, 97, 238, 0.05);\r\n }\r\n \r\n .transaction-income {\r\n color: #10b981;\r\n font-weight: 500;\r\n }\r\n \r\n .transaction-expense {\r\n color: #ef4444;\r\n font-weight: 500;\r\n }\r\n \r\n \/* \ubc84\ud2bc *\/\r\n .btn {\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n border: none;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .btn-primary {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n \r\n .btn-primary:hover {\r\n background: var(--secondary);\r\n transform: translateY(-2px);\r\n }\r\n \r\n .btn-outline-primary {\r\n background: transparent;\r\n border: 1px solid var(--primary);\r\n color: var(--primary);\r\n }\r\n \r\n .btn-outline-primary:hover {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n \r\n .btn-group {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n \r\n \/* \ud3fc *\/\r\n .form-group {\r\n margin-bottom: 1.25rem;\r\n }\r\n \r\n .form-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n color: var(--dark);\r\n }\r\n \r\n .form-control {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 1px solid var(--light-gray);\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n transition: var(--transition);\r\n }\r\n \r\n .form-control:focus {\r\n border-color: var(--primary);\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);\r\n }\r\n \r\n .form-row {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 1rem;\r\n }\r\n \r\n .form-select {\r\n padding: 12px 15px;\r\n border: 1px solid var(--light-gray);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n \/* \uacc4\ud68d \uc785\ub825 *\/\r\n .plan-input {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n \r\n .plan-amount {\r\n flex: 1;\r\n min-width: 120px;\r\n }\r\n \r\n \/* \ud478\ud130 *\/\r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n color: var(--gray);\r\n font-size: 0.9rem;\r\n margin-top: 2rem;\r\n }\r\n \r\n \/* \ubaa8\ubc14\uc77c \uba54\ub274 *\/\r\n .mobile-menu-btn {\r\n display: none;\r\n background: transparent;\r\n border: none;\r\n color: white;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n }\r\n \r\n \/* \ubc18\uc751\ud615 \ub514\uc790\uc778 *\/\r\n @media (max-width: 768px) {\r\n .header-content {\r\n flex-wrap: wrap;\r\n }\r\n \r\n .logo {\r\n width: 100%;\r\n justify-content: center;\r\n margin-bottom: 1rem;\r\n }\r\n \r\n nav ul {\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n \r\n .mobile-menu-btn {\r\n display: block;\r\n position: absolute;\r\n top: 20px;\r\n right: 15px;\r\n }\r\n \r\n nav {\r\n position: relative;\r\n }\r\n \r\n nav ul {\r\n display: none;\r\n position: absolute;\r\n top: 60px;\r\n left: 0;\r\n right: 0;\r\n background: white;\r\n flex-direction: column;\r\n padding: 1rem;\r\n border-radius: 0 0 16px 16px;\r\n box-shadow: 0 10px 15px rgba(0,0,0,0.1);\r\n }\r\n \r\n nav ul.show {\r\n display: flex;\r\n }\r\n \r\n nav a {\r\n color: var(--dark);\r\n display: block;\r\n padding: 12px;\r\n border-radius: 8px;\r\n }\r\n \r\n .account-summary {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .btn-group {\r\n flex-direction: column;\r\n }\r\n }\r\n \r\n \/* \uc5d1\uc140 \ub0b4\ubcf4\ub0b4\uae30 \ubc84\ud2bc *\/\r\n .export-btn {\r\n background: var(--success);\r\n color: white;\r\n }\r\n \r\n .export-btn:hover {\r\n background: #38b2ac;\r\n }\r\n \r\n .export-btn i {\r\n font-size: 1.2rem;\r\n }\r\n \r\n \/* \uc54c\ub9bc *\/\r\n .notification {\r\n position: fixed;\r\n bottom: 20px;\r\n right: 20px;\r\n padding: 15px 25px;\r\n background: white;\r\n border-radius: 12px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n transform: translateY(100px);\r\n opacity: 0;\r\n transition: all 0.3s ease;\r\n z-index: 1000;\r\n }\r\n \r\n .notification.show {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n \r\n .notification.success {\r\n border-left: 4px solid var(--success);\r\n }\r\n \r\n .notification.error {\r\n border-left: 4px solid var(--warning);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- \uc54c\ub9bc -->\r\n <div class=\"notification\" id=\"notification\">\r\n <div class=\"notification-content\"><\/div>\r\n <\/div>\r\n \r\n <!-- \ud5e4\ub354 -->\r\n <header>\r\n <div class=\"container\">\r\n <div class=\"header-content\">\r\n <div class=\"logo\">\r\n <i class=\"fas fa-wallet\"><\/i>\r\n <h1>Smart Household Account Book<\/h1>\r\n <\/div>\r\n <div class=\"date-display\">\r\n <i class=\"far fa-calendar-alt\"><\/i>\r\n <span id=\"current-date\">2023\ub144 10\uc6d4 15\uc77c<\/span>\r\n <\/div>\r\n <button class=\"mobile-menu-btn\" id=\"mobile-menu-btn\">\r\n <i class=\"fas fa-bars\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <nav>\r\n <ul id=\"nav-menu\">\r\n <li><a href=\"#\" class=\"active\"><i class=\"fas fa-home\"><\/i> \ub300\uc2dc\ubcf4\ub4dc<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fas fa-history\"><\/i> \uac70\ub798\ub0b4\uc5ed<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fas fa-chart-bar\"><\/i> \uc9c0\ucd9c\ubd84\uc11d<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fas fa-tasks\"><\/i> \uacc4\ud68d\uad00\ub9ac<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fas fa-file-export\"><\/i> \ub370\uc774\ud130 \ub0b4\ubcf4\ub0b4\uae30<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n \r\n <!-- \uba54\uc778 \ucf58\ud150\uce20 -->\r\n <main class=\"container\">\r\n <!-- \uacc4\uc88c \uc694\uc57d -->\r\n <section class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-university\"><\/i> \uacc4\uc88c \uc694\uc57d<\/h2>\r\n <div>\r\n <span>\uc2e4\uc2dc\uac04 \uc5c5\ub370\uc774\ud2b8<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"account-summary\">\r\n <div class=\"account-card\">\r\n <div class=\"account-icon cash-icon\">\r\n <i class=\"fas fa-money-bill-wave\"><\/i>\r\n <\/div>\r\n <div class=\"account-info\">\r\n <h3>\ud604\uae08<\/h3>\r\n <div class=\"account-balance positive\">\u20a9 1,250,000<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"account-card\">\r\n <div class=\"account-icon corporate-icon\">\r\n <i class=\"fas fa-building\"><\/i>\r\n <\/div>\r\n <div class=\"account-info\">\r\n <h3>\ubc95\uc778 \uacc4\uc88c<\/h3>\r\n <div class=\"account-balance positive\">\u20a9 8,750,300<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"account-card\">\r\n <div class=\"account-icon personal-icon\">\r\n <i class=\"fas fa-user\"><\/i>\r\n <\/div>\r\n <div class=\"account-info\">\r\n <h3>\uac1c\uc778 \uacc4\uc88c<\/h3>\r\n <div class=\"account-balance positive\">\u20a9 3,420,500<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"account-card\">\r\n <div class=\"account-icon\" style=\"background: linear-gradient(135deg, #6b7280, #4b5563); color: white;\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <div class=\"account-info\">\r\n <h3>\ucd1d \uc790\uc0b0<\/h3>\r\n <div class=\"account-balance positive\">\u20a9 13,420,800<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n <!-- \ub300\uc2dc\ubcf4\ub4dc -->\r\n <section class=\"row\">\r\n <div class=\"col-md-8\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-chart-bar\"><\/i> \ucd5c\uadfc \uc9c0\ucd9c \ucd94\uc774<\/h2>\r\n <div>\r\n <select class=\"form-select\">\r\n <option>\uc9c0\ub09c 7\uc77c<\/option>\r\n <option>\uc774\ubc88 \ub2ec<\/option>\r\n <option>\uc9c0\ub09c \ub2ec<\/option>\r\n <option>3\uac1c\uc6d4<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"expenseChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-history\"><\/i> \ucd5c\uadfc \uac70\ub798\ub0b4\uc5ed<\/h2>\r\n <div>\r\n <a href=\"#\" class=\"btn btn-outline-primary\"><i class=\"fas fa-plus\"><\/i> \uac70\ub798 \ucd94\uac00<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table\">\r\n <thead>\r\n <tr>\r\n <th>\uc77c\uc790<\/th>\r\n <th>\uacc4\uc88c<\/th>\r\n <th>\uc720\ud615<\/th>\r\n <th>\ub0b4\uc6a9<\/th>\r\n <th>\uae08\uc561<\/th>\r\n <th>\uc794\uc561<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>2023-10-15<\/td>\r\n <td><i class=\"fas fa-building corporate-icon\"><\/i> \ubc95\uc778 \uacc4\uc88c<\/td>\r\n <td><span class=\"transaction-expense\">\ucd9c\uae08<\/span><\/td>\r\n <td>\uc0ac\ubb34\uc6a9\ud488 \uad6c\ub9e4<\/td>\r\n <td>\u20a9 120,000<\/td>\r\n <td>\u20a9 8,750,300<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>2023-10-14<\/td>\r\n <td><i class=\"fas fa-money-bill-wave cash-icon\"><\/i> \ud604\uae08<\/td>\r\n <td><span class=\"transaction-expense\">\ucd9c\uae08<\/span><\/td>\r\n <td>\uc810\uc2ec \uc2dd\uc0ac<\/td>\r\n <td>\u20a9 12,000<\/td>\r\n <td>\u20a9 1,250,000<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>2023-10-13<\/td>\r\n <td><i class=\"fas fa-user personal-icon\"><\/i> \uac1c\uc778 \uacc4\uc88c<\/td>\r\n <td><span class=\"transaction-income\">\uc785\uae08<\/span><\/td>\r\n <td>\uc6d4\uae09<\/td>\r\n <td>\u20a9 3,200,000<\/td>\r\n <td>\u20a9 3,420,500<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>2023-10-12<\/td>\r\n <td><i class=\"fas fa-building corporate-icon\"><\/i> \ubc95\uc778 \uacc4\uc88c<\/td>\r\n <td><span class=\"transaction-expense\">\ucd9c\uae08<\/span><\/td>\r\n <td>\ub80c\ud0c8\ube44<\/td>\r\n <td>\u20a9 750,000<\/td>\r\n <td>\u20a9 8,870,300<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>2023-10-10<\/td>\r\n <td><i class=\"fas fa-user personal-icon\"><\/i> \uac1c\uc778 \uacc4\uc88c<\/td>\r\n <td><span class=\"transaction-expense\">\ucd9c\uae08<\/span><\/td>\r\n <td>\ud1b5\uc2e0\ube44<\/td>\r\n <td>\u20a9 110,000<\/td>\r\n <td>\u20a9 220,500<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"col-md-4\">\r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-tasks\"><\/i> \uc9c0\ucd9c \uacc4\ud68d<\/h2>\r\n <div>\r\n <a href=\"#\" class=\"btn btn-outline-primary\"><i class=\"fas fa-plus\"><\/i> \uacc4\ud68d \ucd94\uac00<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"table-responsive\">\r\n <table class=\"table\">\r\n <thead>\r\n <tr>\r\n <th>\ud56d\ubaa9<\/th>\r\n <th>\uc720\ud615<\/th>\r\n <th>\uae08\uc561<\/th>\r\n <th>\ub0a8\uc740\uc77c<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>\uc2dd\ube44<\/td>\r\n <td>\uc8fc\uac04<\/td>\r\n <td>\u20a9 200,000<\/td>\r\n <td>2\uc77c<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>\uad50\ud1b5\ube44<\/td>\r\n <td>\uc6d4\uac04<\/td>\r\n <td>\u20a9 100,000<\/td>\r\n <td>15\uc77c<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>\ubb38\ud654\uc0dd\ud65c<\/td>\r\n <td>\uc6d4\uac04<\/td>\r\n <td>\u20a9 150,000<\/td>\r\n <td>10\uc77c<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>\uc800\ucd95<\/td>\r\n <td>\uc6d4\uac04<\/td>\r\n <td>\u20a9 500,000<\/td>\r\n <td>25\uc77c<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>\uacbd\uc870\uc0ac\ube44<\/td>\r\n <td>\uc6d4\uac04<\/td>\r\n <td>\u20a9 300,000<\/td>\r\n <td>20\uc77c<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-plus-circle\"><\/i> \uc0c8\ub85c\uc6b4 \uac70\ub798 \ucd94\uac00<\/h2>\r\n <\/div>\r\n <form action=\"\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"date\">\uc77c\uc790<\/label>\r\n <input type=\"date\" class=\"form-control\" id=\"date\" value=\"2023-10-15\">\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"account\">\uacc4\uc88c<\/label>\r\n <select class=\"form-control\" id=\"account\">\r\n <option>\ud604\uae08<\/option>\r\n <option>\ubc95\uc778 \uacc4\uc88c<\/option>\r\n <option>\uac1c\uc778 \uacc4\uc88c<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-row\">\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"type\">\uc720\ud615<\/label>\r\n <select class=\"form-control\" id=\"type\">\r\n <option>\uc785\uae08<\/option>\r\n <option>\ucd9c\uae08<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group col-md-6\">\r\n <label for=\"amount\">\uae08\uc561<\/label>\r\n <input type=\"number\" class=\"form-control\" id=\"amount\" placeholder=\"\uae08\uc561 \uc785\ub825\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"description\">\ub0b4\uc6a9<\/label>\r\n <input type=\"text\" class=\"form-control\" id=\"description\" placeholder=\"\uac70\ub798 \ub0b4\uc6a9\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"category\">\uce74\ud14c\uace0\ub9ac<\/label>\r\n <select class=\"form-control\" id=\"category\">\r\n <option>\uc2dd\ube44<\/option>\r\n <option>\uad50\ud1b5<\/option>\r\n <option>\ubb38\ud654<\/option>\r\n <option>\uad50\uc721<\/option>\r\n <option>\uc758\ub8cc<\/option>\r\n <option>\uacbd\uc870\uc0ac<\/option>\r\n <option>\uc800\ucd95<\/option>\r\n <option>\uae30\ud0c0<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button type=\"submit\" class=\"btn btn-primary btn-block\">\r\n <i class=\"fas fa-plus\"><\/i> \uac70\ub798 \ucd94\uac00\r\n <\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <div class=\"card-header\">\r\n <h2 class=\"card-title\"><i class=\"fas fa-file-export\"><\/i> \ub370\uc774\ud130 \ub0b4\ubcf4\ub0b4\uae30<\/h2>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <p>\ud604\uc7ac\uae4c\uc9c0 \uc785\ub825\ub41c \ubaa8\ub4e0 \ub370\uc774\ud130\ub97c \uc5d1\uc140 \ud30c\uc77c\ub85c \ub0b4\ubcf4\ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n <div class=\"btn-group\">\r\n <button class=\"btn export-btn\" id=\"export-transactions\">\r\n <i class=\"fas fa-file-excel\"><\/i> \uac70\ub798\ub0b4\uc5ed \ub0b4\ubcf4\ub0b4\uae30\r\n <\/button>\r\n <button class=\"btn export-btn\" id=\"export-plans\">\r\n <i class=\"fas fa-file-excel\"><\/i> \uacc4\ud68d\ub0b4\uc5ed \ub0b4\ubcf4\ub0b4\uae30\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n \r\n <!-- \ud478\ud130 -->\r\n <footer>\r\n <div class=\"container\">\r\n <p>\u00a9 2023 \uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 | \uc2e4\uc2dc\uac04 \uc7ac\ubb34 \uad00\ub9ac \uc194\ub8e8\uc158 | PC & \ubaa8\ubc14\uc77c \ubaa8\ub450 \uc0ac\uc6a9 \uac00\ub2a5<\/p>\r\n <p>\ub370\uc774\ud130\ub294 \ub85c\uceec \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc800\uc7a5\ub418\uba70, \uac1c\uc778 \uc815\ubcf4 \ubcf4\ud638\uc5d0 \ucd5c\uc801\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/footer>\r\n \r\n <script>\r\n \/\/ \ud604\uc7ac \ub0a0\uc9dc \ud45c\uc2dc\r\n const currentDate = document.getElementById('current-date');\r\n const options = { year: 'numeric', month: 'long', day: 'numeric' };\r\n currentDate.textContent = new Date().toLocaleDateString('ko-KR', options);\r\n \r\n \/\/ \ubaa8\ubc14\uc77c \uba54\ub274 \ud1a0\uae00\r\n const mobileMenuBtn = document.getElementById('mobile-menu-btn');\r\n const navMenu = document.getElementById('nav-menu');\r\n \r\n mobileMenuBtn.addEventListener('click', () => {\r\n navMenu.classList.toggle('show');\r\n });\r\n \r\n \/\/ \uc54c\ub9bc \uae30\ub2a5\r\n function showNotification(message, type) {\r\n const notification = document.getElementById('notification');\r\n const notificationContent = document.querySelector('.notification-content');\r\n \r\n notificationContent.textContent = message;\r\n notification.className = `notification ${type} show`;\r\n \r\n setTimeout(() => {\r\n notification.classList.remove('show');\r\n }, 3000);\r\n }\r\n \r\n \/\/ \uac70\ub798\ub0b4\uc5ed \uc5d1\uc140 \ub0b4\ubcf4\ub0b4\uae30\r\n document.getElementById('export-transactions').addEventListener('click', () => {\r\n \/\/ \uc0d8\ud50c \ub370\uc774\ud130 (\uc2e4\uc81c \uc0ac\uc6a9 \uc2dc\uc5d0\ub294 \ub85c\uceec\uc2a4\ud1a0\ub9ac\uc9c0\uc5d0\uc11c \ubd88\ub7ec\uc640\uc57c \ud568)\r\n const transactions = [\r\n { date: \"2023-10-15\", account: \"\ubc95\uc778 \uacc4\uc88c\", type: \"\ucd9c\uae08\", description: \"\uc0ac\ubb34\uc6a9\ud488 \uad6c\ub9e4\", amount: 120000, balance: 8750300 },\r\n { date: \"2023-10-14\", account: \"\ud604\uae08\", type: \"\ucd9c\uae08\", description: \"\uc810\uc2ec \uc2dd\uc0ac\", amount: 12000, balance: 1250000 },\r\n { date: \"2023-10-13\", account: \"\uac1c\uc778 \uacc4\uc88c\", type: \"\uc785\uae08\", description: \"\uc6d4\uae09\", amount: 3200000, balance: 3420500 },\r\n { date: \"2023-10-12\", account: \"\ubc95\uc778 \uacc4\uc88c\", type: \"\ucd9c\uae08\", description: \"\ub80c\ud0c8\ube44\", amount: 750000, balance: 8870300 },\r\n { date: \"2023-10-10\", account: \"\uac1c\uc778 \uacc4\uc88c\", type: \"\ucd9c\uae08\", description: \"\ud1b5\uc2e0\ube44\", amount: 110000, balance: 220500 }\r\n ];\r\n \r\n \/\/ \uc5d1\uc140 \ud30c\uc77c \uc0dd\uc131\r\n const ws = XLSX.utils.json_to_sheet(transactions);\r\n const wb = XLSX.utils.book_new();\r\n XLSX.utils.book_append_sheet(wb, ws, \"\uac70\ub798\ub0b4\uc5ed\");\r\n \r\n \/\/ \uc5d1\uc140 \ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc\r\n XLSX.writeFile(wb, \"smart_account_book_transactions.xlsx\");\r\n showNotification(\"\uac70\ub798\ub0b4\uc5ed\uc774 \uc5d1\uc140 \ud30c\uc77c\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\", \"success\");\r\n });\r\n \r\n \/\/ \uacc4\ud68d\ub0b4\uc5ed \uc5d1\uc140 \ub0b4\ubcf4\ub0b4\uae30\r\n document.getElementById('export-plans').addEventListener('click', () => {\r\n \/\/ \uc0d8\ud50c \ub370\uc774\ud130 (\uc2e4\uc81c \uc0ac\uc6a9 \uc2dc\uc5d0\ub294 \ub85c\uceec\uc2a4\ud1a0\ub9ac\uc9c0\uc5d0\uc11c \ubd88\ub7ec\uc640\uc57c \ud568)\r\n const plans = [\r\n { item: \"\uc2dd\ube44\", type: \"\uc8fc\uac04\", amount: 200000, dueDate: \"2023-10-20\", remainingDays: 5 },\r\n { item: \"\uad50\ud1b5\ube44\", type: \"\uc6d4\uac04\", amount: 100000, dueDate: \"2023-10-31\", remainingDays: 16 },\r\n { item: \"\ubb38\ud654\uc0dd\ud65c\", type: \"\uc6d4\uac04\", amount: 150000, dueDate: \"2023-10-25\", remainingDays: 10 },\r\n { item: \"\uc800\ucd95\", type: \"\uc6d4\uac04\", amount: 500000, dueDate: \"2023-10-31\", remainingDays: 16 },\r\n { item: \"\uacbd\uc870\uc0ac\ube44\", type: \"\uc6d4\uac04\", amount: 300000, dueDate: \"2023-10-30\", remainingDays: 15 }\r\n ];\r\n \r\n \/\/ \uc5d1\uc140 \ud30c\uc77c \uc0dd\uc131\r\n const ws = XLSX.utils.json_to_sheet(plans);\r\n const wb = XLSX.utils.book_new();\r\n XLSX.utils.book_append_sheet(wb, ws, \"\uacc4\ud68d\ub0b4\uc5ed\");\r\n \r\n \/\/ \uc5d1\uc140 \ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc\r\n XLSX.writeFile(wb, \"smart_account_book_plans.xlsx\");\r\n showNotification(\"\uacc4\ud68d\ub0b4\uc5ed\uc774 \uc5d1\uc140 \ud30c\uc77c\ub85c \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\", \"success\");\r\n });\r\n \r\n \/\/ \ucc28\ud2b8 \ucd08\uae30\ud654\r\n const ctx = document.getElementById('expenseChart').getContext('2d');\r\n const expenseChart = new Chart(ctx, {\r\n type: 'line',\r\n data: {\r\n labels: ['10\/09', '10\/10', '10\/11', '10\/12', '10\/13', '10\/14', '10\/15'],\r\n datasets: [{\r\n label: '\uc77c\uc77c \uc9c0\ucd9c',\r\n data: [25000, 42000, 18000, 95000, 32000, 12000, 0],\r\n borderColor: '#4361ee',\r\n backgroundColor: 'rgba(67, 97, 238, 0.1)',\r\n borderWidth: 3,\r\n tension: 0.3,\r\n fill: true\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n grid: {\r\n color: 'rgba(0,0,0,0.05)'\r\n }\r\n },\r\n x: {\r\n grid: {\r\n display: false\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ \uac70\ub798 \ucd94\uac00 \ud3fc\r\n const transactionForm = document.querySelector('form');\r\n transactionForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n \/\/ \uc785\ub825 \uac12 \uac00\uc838\uc624\uae30\r\n const date = document.getElementById('date').value;\r\n const account = document.getElementById('account').value;\r\n const type = document.getElementById('type').value;\r\n const amount = document.getElementById('amount').value;\r\n const description = document.getElementById('description').value;\r\n const category = document.getElementById('category').value;\r\n \r\n \/\/ \uc720\ud6a8\uc131 \uac80\uc0ac\r\n if (!amount || amount <= 0) {\r\n showNotification(\"\uae08\uc561\uc744 \uc62c\ubc14\ub974\uac8c \uc785\ub825\ud574\uc8fc\uc138\uc694.\", \"error\");\r\n return;\r\n }\r\n \r\n if (!description) {\r\n showNotification(\"\uac70\ub798 \ub0b4\uc6a9\uc744 \uc785\ub825\ud574\uc8fc\uc138\uc694.\", \"error\");\r\n return;\r\n }\r\n \r\n \/\/ TODO: \uc2e4\uc81c\ub85c\ub294 localStorage\uc5d0 \uc800\uc7a5\ud558\ub294 \ub85c\uc9c1\uc774 \ub4e4\uc5b4\uac00\uc57c \ud568\r\n showNotification(\"\uac70\ub798\uac00 \uc815\uc0c1\uc801\uc73c\ub85c \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\", \"success\");\r\n \r\n \/\/ \ud3fc \ucd08\uae30\ud654\r\n transactionForm.reset();\r\n });\r\n <\/script>\r\n<\/body>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 – \ud604\uae08 & \uacc4\uc88c \ud1b5\ud569 \uad00\ub9ac \uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 2023\ub144 10\uc6d4 15\uc77c \ub300\uc2dc\ubcf4\ub4dc \uac70\ub798\ub0b4\uc5ed \uc9c0\ucd9c\ubd84\uc11d \uacc4\ud68d\uad00\ub9ac \ub370\uc774\ud130 \ub0b4\ubcf4\ub0b4\uae30 \uacc4\uc88c \uc694\uc57d \uc2e4\uc2dc\uac04 \uc5c5\ub370\uc774\ud2b8 \ud604\uae08 \u20a9 1,250,000 \ubc95\uc778 \uacc4\uc88c \u20a9 8,750,300 \uac1c\uc778 \uacc4\uc88c \u20a9 3,420,500 \ucd1d \uc790\uc0b0 \u20a9 13,420,800 \ucd5c\uadfc \uc9c0\ucd9c \ucd94\uc774 \uc9c0\ub09c 7\uc77c\uc774\ubc88 \ub2ec\uc9c0\ub09c \ub2ec3\uac1c\uc6d4 \ucd5c\uadfc \uac70\ub798\ub0b4\uc5ed \uac70\ub798 \ucd94\uac00 \uc77c\uc790 \uacc4\uc88c \uc720\ud615 \ub0b4\uc6a9 \uae08\uc561 \uc794\uc561 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3566","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages\/3566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/comments?post=3566"}],"version-history":[{"count":0,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages\/3566\/revisions"}],"wp:attachment":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/media?parent=3566"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/wf_page_folders?post=3566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}