Hugging Face's logo

Spaces:
openfree
/
AI-Calcurator
Running

App Files Community
openfree commited on
Commit
0f828cd
ยท
verified ยท
1 Parent(s): 26bdb08

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +260 -139
index.html CHANGED
@@ -532,39 +532,6 @@
532
  border-bottom: none;
533
  }
534
 
535
- .timeline-section {
536
- background: rgba(255, 255, 255, 0.05);
537
- border-radius: 10px;
538
- padding: 1.5rem;
539
- margin-top: 1.5rem;
540
- }
541
-
542
- .timeline-section h4 {
543
- margin-bottom: 1rem;
544
- font-size: 1.2rem;
545
- }
546
-
547
- .timeline-bar {
548
- position: relative;
549
- height: 40px;
550
- background: rgba(255, 255, 255, 0.1);
551
- border-radius: 20px;
552
- overflow: hidden;
553
- margin-bottom: 1rem;
554
- }
555
-
556
- .timeline-progress {
557
- height: 100%;
558
- background: linear-gradient(90deg, #00d2ff, #3a7bd5);
559
- border-radius: 20px;
560
- display: flex;
561
- align-items: center;
562
- justify-content: center;
563
- color: white;
564
- font-weight: 600;
565
- transition: width 0.5s ease;
566
- }
567
-
568
  .monthly-breakdown {
569
  display: grid;
570
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -849,62 +816,229 @@
849
  <span>ํƒ€๊นƒ ์„œ๋น„์Šค ์œ ํ˜• (ํ•„์ˆ˜, ๋ณต์ˆ˜ ์„ ํƒ ๊ฐ€๋Šฅ)</span>
850
  </div>
851
  <div class="component-options">
852
- <div class="option-card" data-category="service" data-id="image-gen" data-cost="30" data-time="2">
853
- <div class="option-name">์ด๋ฏธ์ง€ ์ƒ์„ฑ</div>
 
854
  <div class="option-details">
855
- <span>โ‚ฉ30M</span>
856
  <span>2๊ฐœ์›”</span>
857
  </div>
858
  </div>
859
- <div class="option-card" data-category="service" data-id="image-edit" data-cost="35" data-time="2.5">
860
- <div class="option-name">์ด๋ฏธ์ง€ ํŽธ์ง‘/ํ•ฉ์„ฑ</div>
861
  <div class="option-details">
862
- <span>โ‚ฉ35M</span>
863
  <span>2.5๊ฐœ์›”</span>
864
  </div>
865
  </div>
866
- <div class="option-card" data-category="service" data-id="video-gen" data-cost="50" data-time="3">
867
- <div class="option-name">๋น„๋””์˜ค ์ƒ์„ฑ</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
868
  <div class="option-details">
869
- <span>โ‚ฉ50M</span>
870
  <span>3๊ฐœ์›”</span>
871
  </div>
872
  </div>
873
- <div class="option-card" data-category="service" data-id="music-gen" data-cost="40" data-time="2.5">
874
- <div class="option-name">์Œ์•… ๋ฐ ์Œํ–ฅ ์ƒ์„ฑ</div>
875
  <div class="option-details">
876
- <span>โ‚ฉ40M</span>
877
  <span>2.5๊ฐœ์›”</span>
878
  </div>
879
  </div>
880
- <div class="option-card" data-category="service" data-id="text-chat" data-cost="20" data-time="1.5">
881
- <div class="option-name">ํ…์ŠคํŠธ ์ƒ์„ฑ(์ฑ—๋ด‡)</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
882
  <div class="option-details">
883
- <span>โ‚ฉ20M</span>
884
  <span>1.5๊ฐœ์›”</span>
885
  </div>
886
  </div>
887
- <div class="option-card" data-category="service" data-id="text-expert" data-cost="25" data-time="2">
888
- <div class="option-name">ํ…์ŠคํŠธ ์ƒ์„ฑ(์ „๋ฌธ๊ฐ€)</div>
889
  <div class="option-details">
890
- <span>โ‚ฉ25M</span>
891
  <span>2๊ฐœ์›”</span>
892
  </div>
893
  </div>
894
- <div class="option-card" data-category="service" data-id="voice-clone" data-cost="45" data-time="2.5">
895
- <div class="option-name">์Œ์„ฑ ๋ณต์ œ/์ƒ์„ฑ</div>
 
 
896
  <div class="option-details">
897
- <span>โ‚ฉ45M</span>
898
  <span>2.5๊ฐœ์›”</span>
899
  </div>
900
  </div>
901
- <div class="option-card" data-category="service" data-id="vision-ai" data-cost="35" data-time="2">
902
- <div class="option-name">๋น„์ „ ์ธ์‹</div>
903
  <div class="option-details">
904
- <span>โ‚ฉ35M</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
905
  <span>2๊ฐœ์›”</span>
906
  </div>
907
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
908
  </div>
909
  </div>
910
 
@@ -915,24 +1049,24 @@
915
  <span>DB ๊ด€๋ฆฌ</span>
916
  </div>
917
  <div class="component-options">
918
- <div class="option-card" data-category="db" data-id="basic-db" data-cost="5" data-time="0.5">
919
  <div class="option-name">๊ธฐ๋ณธ DB</div>
920
  <div class="option-details">
921
- <span>โ‚ฉ5M</span>
922
  <span>0.5๊ฐœ์›”</span>
923
  </div>
924
  </div>
925
- <div class="option-card" data-category="db" data-id="advanced-db" data-cost="15" data-time="1">
926
  <div class="option-name">๊ณ ๊ธ‰ DB + ๋ฐฑ์—…</div>
927
  <div class="option-details">
928
- <span>โ‚ฉ15M</span>
929
  <span>1๊ฐœ์›”</span>
930
  </div>
931
  </div>
932
- <div class="option-card" data-category="db" data-id="enterprise-db" data-cost="25" data-time="1.5">
933
  <div class="option-name">์—”ํ„ฐํ”„๋ผ์ด์ฆˆ DB</div>
934
  <div class="option-details">
935
- <span>โ‚ฉ25M</span>
936
  <span>1.5๊ฐœ์›”</span>
937
  </div>
938
  </div>
@@ -946,24 +1080,24 @@
946
  <span>ํšŒ์›๊ฐ€์ž… ๋ฐ ๋กœ๊ทธ์ธ</span>
947
  </div>
948
  <div class="component-options">
949
- <div class="option-card" data-category="auth" data-id="gmail-only" data-cost="3" data-time="0.3">
950
  <div class="option-name">Gmail ์—ฐ๋™</div>
951
  <div class="option-details">
952
- <span>โ‚ฉ3M</span>
953
  <span>0.3๊ฐœ์›”</span>
954
  </div>
955
  </div>
956
- <div class="option-card" data-category="auth" data-id="multi-auth" data-cost="8" data-time="0.5">
957
  <div class="option-name">๋‹ค์ค‘ ์†Œ์…œ ๋กœ๊ทธ์ธ</div>
958
  <div class="option-details">
959
- <span>โ‚ฉ8M</span>
960
  <span>0.5๊ฐœ์›”</span>
961
  </div>
962
  </div>
963
- <div class="option-card" data-category="auth" data-id="custom-auth" data-cost="12" data-time="1">
964
  <div class="option-name">์ปค์Šคํ…€ ์ธ์ฆ ์‹œ์Šคํ…œ</div>
965
  <div class="option-details">
966
- <span>โ‚ฉ12M</span>
967
  <span>1๊ฐœ์›”</span>
968
  </div>
969
  </div>
@@ -977,17 +1111,17 @@
977
  <span>ํฌ๋ ˆ๋”ง ๊ด€๋ฆฌ</span>
978
  </div>
979
  <div class="component-options">
980
- <div class="option-card" data-category="credit" data-id="basic-credit" data-cost="5" data-time="0.5">
981
  <div class="option-name">๊ธฐ๋ณธ ํฌ๋ ˆ๋”ง ์‹œ์Šคํ…œ</div>
982
  <div class="option-details">
983
- <span>โ‚ฉ5M</span>
984
  <span>0.5๊ฐœ์›”</span>
985
  </div>
986
  </div>
987
- <div class="option-card" data-category="credit" data-id="advanced-credit" data-cost="12" data-time="1">
988
  <div class="option-name">๊ณ ๊ธ‰ ํฌ๋ ˆ๋”ง + ๊ตฌ๋…</div>
989
  <div class="option-details">
990
- <span>โ‚ฉ12M</span>
991
  <span>1๊ฐœ์›”</span>
992
  </div>
993
  </div>
@@ -1001,24 +1135,24 @@
1001
  <span>ํŽ˜์ด๋จผํŠธ ์ง€์›</span>
1002
  </div>
1003
  <div class="component-options">
1004
- <div class="option-card" data-category="payment" data-id="basic-payment" data-cost="8" data-time="0.5">
1005
  <div class="option-name">๊ธฐ๋ณธ ๊ฒฐ์ œ (์นด๋“œ)</div>
1006
  <div class="option-details">
1007
- <span>โ‚ฉ8M</span>
1008
  <span>0.5๊ฐœ์›”</span>
1009
  </div>
1010
  </div>
1011
- <div class="option-card" data-category="payment" data-id="multi-payment" data-cost="15" data-time="1">
1012
  <div class="option-name">๋‹ค์ค‘ ๊ฒฐ์ œ ์ˆ˜๋‹จ</div>
1013
  <div class="option-details">
1014
- <span>โ‚ฉ15M</span>
1015
  <span>1๊ฐœ์›”</span>
1016
  </div>
1017
  </div>
1018
- <div class="option-card" data-category="payment" data-id="global-payment" data-cost="20" data-time="1.5">
1019
  <div class="option-name">๊ธ€๋กœ๋ฒŒ ๊ฒฐ์ œ ์‹œ์Šคํ…œ</div>
1020
  <div class="option-details">
1021
- <span>โ‚ฉ20M</span>
1022
  <span>1.5๊ฐœ์›”</span>
1023
  </div>
1024
  </div>
@@ -1032,17 +1166,17 @@
1032
  <span>๋งˆ์ผ€ํŒ… ์ง€์›</span>
1033
  </div>
1034
  <div class="component-options">
1035
- <div class="option-card" data-category="marketing" data-id="basic-marketing" data-cost="10" data-time="1">
1036
  <div class="option-name">๊ธฐ๋ณธ ๋งˆ์ผ€ํŒ… ๋„๊ตฌ</div>
1037
  <div class="option-details">
1038
- <span>โ‚ฉ10M</span>
1039
  <span>1๊ฐœ์›”</span>
1040
  </div>
1041
  </div>
1042
- <div class="option-card" data-category="marketing" data-id="advanced-marketing" data-cost="20" data-time="1.5">
1043
  <div class="option-name">๊ณ ๊ธ‰ ๋งˆ์ผ€ํŒ… ์ž๋™ํ™”</div>
1044
  <div class="option-details">
1045
- <span>โ‚ฉ20M</span>
1046
  <span>1.5๊ฐœ์›”</span>
1047
  </div>
1048
  </div>
@@ -1056,17 +1190,17 @@
1056
  <span>๊ฐœ๋ฐœ ๋ฐ ๊ธฐ์ˆ  ์ธ๋ ฅ ์ง€์›</span>
1057
  </div>
1058
  <div class="component-options">
1059
- <div class="option-card" data-category="support" data-id="basic-support" data-cost="5" data-time="0">
1060
  <div class="option-name">๊ธฐ๋ณธ ๊ธฐ์ˆ  ์ง€์›</div>
1061
  <div class="option-details">
1062
- <span>์›” โ‚ฉ5M</span>
1063
  <span>์ฆ‰์‹œ</span>
1064
  </div>
1065
  </div>
1066
- <div class="option-card" data-category="support" data-id="dedicated-support" data-cost="15" data-time="0">
1067
  <div class="option-name">์ „๋‹ด ๊ฐœ๋ฐœ์ž ์ง€์›</div>
1068
  <div class="option-details">
1069
- <span>์›” โ‚ฉ15M</span>
1070
  <span>์ฆ‰์‹œ</span>
1071
  </div>
1072
  </div>
@@ -1080,17 +1214,17 @@
1080
  <span>์›๊ฒฉ ๋ชจ๋‹ˆํ„ฐ๋ง ์ง€์›</span>
1081
  </div>
1082
  <div class="component-options">
1083
- <div class="option-card" data-category="monitoring" data-id="basic-monitor" data-cost="3" data-time="0.3">
1084
  <div class="option-name">๊ธฐ๋ณธ ๋ชจ๋‹ˆํ„ฐ๋ง</div>
1085
  <div class="option-details">
1086
- <span>โ‚ฉ3M</span>
1087
  <span>0.3๊ฐœ์›”</span>
1088
  </div>
1089
  </div>
1090
- <div class="option-card" data-category="monitoring" data-id="advanced-monitor" data-cost="8" data-time="0.5">
1091
  <div class="option-name">๊ณ ๊ธ‰ ๋ถ„์„ + ์•Œ๋ฆผ</div>
1092
  <div class="option-details">
1093
- <span>โ‚ฉ8M</span>
1094
  <span>0.5๊ฐœ์›”</span>
1095
  </div>
1096
  </div>
@@ -1104,31 +1238,31 @@
1104
  <span>์ถ”๊ฐ€ ๊ธฐ๋Šฅ (๋ณต์ˆ˜ ์„ ํƒ ๊ฐ€๋Šฅ)</span>
1105
  </div>
1106
  <div class="component-options">
1107
- <div class="option-card" data-category="additional" data-id="admin-panel" data-cost="10" data-time="0.5">
1108
  <div class="option-name">๊ด€๋ฆฌ์ž ๋Œ€์‹œ๋ณด๋“œ</div>
1109
  <div class="option-details">
1110
- <span>โ‚ฉ10M</span>
1111
  <span>0.5๊ฐœ์›”</span>
1112
  </div>
1113
  </div>
1114
- <div class="option-card" data-category="additional" data-id="api-system" data-cost="15" data-time="1">
1115
  <div class="option-name">API ์‹œ์Šคํ…œ</div>
1116
  <div class="option-details">
1117
- <span>โ‚ฉ15M</span>
1118
  <span>1๊ฐœ์›”</span>
1119
  </div>
1120
  </div>
1121
- <div class="option-card" data-category="additional" data-id="analytics" data-cost="12" data-time="0.5">
1122
  <div class="option-name">๋ถ„์„ ๋„๊ตฌ</div>
1123
  <div class="option-details">
1124
- <span>โ‚ฉ12M</span>
1125
  <span>0.5๊ฐœ์›”</span>
1126
  </div>
1127
  </div>
1128
- <div class="option-card" data-category="additional" data-id="multi-language" data-cost="8" data-time="0.5">
1129
  <div class="option-name">๋‹ค๊ตญ์–ด ์ง€์›</div>
1130
  <div class="option-details">
1131
- <span>โ‚ฉ8M</span>
1132
  <span>0.5๊ฐœ์›”</span>
1133
  </div>
1134
  </div>
@@ -1142,17 +1276,11 @@
1142
  <h3>๋งž์ถค AI SaaS ๊ฒฌ์ ์„œ</h3>
1143
  <p>์„ ํƒํ•˜์‹  ๊ตฌ์„ฑ์œผ๋กœ ์‚ฐ์ถœ๋œ ์ƒ์„ธ ๊ฒฌ์ ์ž…๋‹ˆ๋‹ค</p>
1144
  </div>
1145
-
1146
- <div class="period-tabs">
1147
- <div class="period-tab active" onclick="switchPeriod(3)">3๊ฐœ์›”</div>
1148
- <div class="period-tab" onclick="switchPeriod(6)">6๊ฐœ์›”</div>
1149
- <div class="period-tab" onclick="switchPeriod(12)">12๊ฐœ์›”</div>
1150
- </div>
1151
 
1152
  <div class="custom-summary">
1153
  <div class="summary-item">
1154
  <div class="summary-label">์ดˆ๊ธฐ ๊ฐœ๋ฐœ ๋น„์šฉ</div>
1155
- <div class="summary-value" id="initialCost">โ‚ฉ0</div>
1156
  </div>
1157
  <div class="summary-item">
1158
  <div class="summary-label">์˜ˆ์ƒ ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</div>
@@ -1160,7 +1288,7 @@
1160
  </div>
1161
  <div class="summary-item">
1162
  <div class="summary-label">์ด ๋น„์šฉ (<span id="periodText">3</span>๊ฐœ์›”)</div>
1163
- <div class="summary-value" id="totalCost">โ‚ฉ0</div>
1164
  </div>
1165
  </div>
1166
 
@@ -1169,34 +1297,24 @@
1169
  <div class="component-list" id="componentList"></div>
1170
  </div>
1171
 
1172
- <div class="timeline-section">
1173
- <h4>๊ฐœ๋ฐœ ์ผ์ • ๋ฐ ์ง„ํ–‰๋ฅ </h4>
1174
- <div class="timeline-bar">
1175
- <div class="timeline-progress" id="timelineProgress" style="width: 0%">
1176
- <span id="progressText">0%</span>
1177
- </div>
1178
- </div>
1179
- <p style="text-align: center; color: #a8a8b3; margin-top: 0.5rem;">
1180
- ์˜ˆ์ƒ ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„: <span id="timelineText">0๊ฐœ์›”</span>
1181
- </p>
1182
- </div>
1183
 
1184
  <div class="monthly-breakdown">
1185
  <div class="monthly-item">
1186
  <div class="monthly-label">์›” ์„œ๋ฒ„ ๋น„์šฉ</div>
1187
- <div class="monthly-value" id="serverCost">โ‚ฉ0</div>
1188
  </div>
1189
  <div class="monthly-item">
1190
  <div class="monthly-label">์›” API ๋น„์šฉ</div>
1191
- <div class="monthly-value" id="apiCost">โ‚ฉ0</div>
1192
  </div>
1193
  <div class="monthly-item">
1194
  <div class="monthly-label">์›” ์œ ์ง€๋ณด์ˆ˜</div>
1195
- <div class="monthly-value" id="maintenanceCost">โ‚ฉ0</div>
1196
  </div>
1197
  <div class="monthly-item">
1198
  <div class="monthly-label">์›” ์ด ์šด์˜๋น„</div>
1199
- <div class="monthly-value" id="totalMonthlyCost">โ‚ฉ0</div>
1200
  </div>
1201
  </div>
1202
  </div>
@@ -1343,7 +1461,7 @@
1343
  componentListHTML += `
1344
  <div class="component-list-item">
1345
  <span><strong>${categoryNames[category]}</strong>: ${value.name}</span>
1346
- <span>${category === 'support' ? '์›” ' : ''}โ‚ฉ${value.cost}M</span>
1347
  </div>
1348
  `;
1349
  } else {
@@ -1355,7 +1473,7 @@
1355
  componentListHTML += `
1356
  <div class="component-list-item">
1357
  <span><strong>${categoryNames[category]}</strong>: ${item.name}</span>
1358
- <span>โ‚ฉ${item.cost}M</span>
1359
  </div>
1360
  `;
1361
  });
@@ -1368,30 +1486,33 @@
1368
  const maintenanceCost = Math.round(initialCost * 0.01); // ์ดˆ๊ธฐ ๋น„์šฉ์˜ 1%
1369
  const totalMonthly = serverCost + apiCost + maintenanceCost + monthlySupport;
1370
 
1371
- // ์ด ๋น„์šฉ ๊ณ„์‚ฐ (๊ธฐ๊ฐ„๋ณ„)
1372
- const totalCost = initialCost + (totalMonthly * currentPeriod);
1373
-
1374
  // ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„ ์กฐ์ • (์ตœ์†Œ 3๊ฐœ์›”)
1375
  const adjustedTime = Math.max(3, Math.ceil(maxTime));
1376
 
 
 
 
 
 
 
 
 
 
 
 
 
1377
  // ๊ฒฐ๊ณผ ํ‘œ์‹œ
1378
- document.getElementById('initialCost').textContent = `โ‚ฉ${initialCost}M`;
1379
  document.getElementById('devTime').textContent = `${adjustedTime}๊ฐœ์›”`;
1380
- document.getElementById('totalCost').textContent = `โ‚ฉ${totalCost}M`;
1381
  document.getElementById('periodText').textContent = currentPeriod;
1382
  document.getElementById('componentList').innerHTML = componentListHTML;
1383
 
1384
- // ํƒ€์ž„๋ผ์ธ ์—…๋ฐ์ดํŠธ
1385
- const progressPercent = Math.min(100, (adjustedTime / 12) * 100);
1386
- document.getElementById('timelineProgress').style.width = `${progressPercent}%`;
1387
- document.getElementById('progressText').textContent = `${Math.round(progressPercent)}%`;
1388
- document.getElementById('timelineText').textContent = `${adjustedTime}๊ฐœ์›”`;
1389
-
1390
  // ์›”๋ณ„ ๋น„์šฉ ํ‘œ์‹œ
1391
- document.getElementById('serverCost').textContent = `โ‚ฉ${serverCost}M`;
1392
- document.getElementById('apiCost').textContent = `โ‚ฉ${apiCost}M`;
1393
- document.getElementById('maintenanceCost').textContent = `โ‚ฉ${maintenanceCost}M`;
1394
- document.getElementById('totalMonthlyCost').textContent = `โ‚ฉ${totalMonthly}M`;
1395
  }
1396
 
1397
  // ๊ธฐ์กด ๋น„์šฉ ๊ณ„์‚ฐ ํ•จ์ˆ˜
 
532
  border-bottom: none;
533
  }
534
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
535
  .monthly-breakdown {
536
  display: grid;
537
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 
816
  <span>ํƒ€๊นƒ ์„œ๋น„์Šค ์œ ํ˜• (ํ•„์ˆ˜, ๋ณต์ˆ˜ ์„ ํƒ ๊ฐ€๋Šฅ)</span>
817
  </div>
818
  <div class="component-options">
819
+ <!-- AI ์ด๋ฏธ์ง€ ๊ด€๋ จ -->
820
+ <div class="option-card" data-category="service" data-id="image-gen" data-cost="15" data-time="2">
821
+ <div class="option-name">AI ์ด๋ฏธ์ง€ ์ƒ์„ฑ</div>
822
  <div class="option-details">
823
+ <span>$15K</span>
824
  <span>2๊ฐœ์›”</span>
825
  </div>
826
  </div>
827
+ <div class="option-card" data-category="service" data-id="image-edit" data-cost="18" data-time="2.5">
828
+ <div class="option-name">AI ์ด๋ฏธ์ง€ ํŽธ์ง‘/ํ–ฅ์ƒ</div>
829
  <div class="option-details">
830
+ <span>$18K</span>
831
  <span>2.5๊ฐœ์›”</span>
832
  </div>
833
  </div>
834
+ <div class="option-card" data-category="service" data-id="bg-removal" data-cost="10" data-time="1.5">
835
+ <div class="option-name">๋ฐฐ๊ฒฝ ์ œ๊ฑฐ/๊ต์ฒด</div>
836
+ <div class="option-details">
837
+ <span>$10K</span>
838
+ <span>1.5๊ฐœ์›”</span>
839
+ </div>
840
+ </div>
841
+ <div class="option-card" data-category="service" data-id="image-upscale" data-cost="12" data-time="1.5">
842
+ <div class="option-name">์ด๋ฏธ์ง€ ์—…์Šค์ผ€์ผ๋ง</div>
843
+ <div class="option-details">
844
+ <span>$12K</span>
845
+ <span>1.5๊ฐœ์›”</span>
846
+ </div>
847
+ </div>
848
+
849
+ <!-- AI ๋น„๋””์˜ค ๊ด€๋ จ -->
850
+ <div class="option-card" data-category="service" data-id="video-gen" data-cost="25" data-time="3">
851
+ <div class="option-name">AI ๋น„๋””์˜ค ์ƒ์„ฑ</div>
852
  <div class="option-details">
853
+ <span>$25K</span>
854
  <span>3๊ฐœ์›”</span>
855
  </div>
856
  </div>
857
+ <div class="option-card" data-category="service" data-id="video-edit" data-cost="22" data-time="2.5">
858
+ <div class="option-name">AI ๋น„๋””์˜ค ํŽธ์ง‘</div>
859
  <div class="option-details">
860
+ <span>$22K</span>
861
  <span>2.5๊ฐœ์›”</span>
862
  </div>
863
  </div>
864
+ <div class="option-card" data-category="service" data-id="avatar-video" data-cost="20" data-time="2.5">
865
+ <div class="option-name">AI ์•„๋ฐ”ํƒ€ ๋น„๋””์˜ค</div>
866
+ <div class="option-details">
867
+ <span>$20K</span>
868
+ <span>2.5๊ฐœ์›”</span>
869
+ </div>
870
+ </div>
871
+ <div class="option-card" data-category="service" data-id="video-caption" data-cost="12" data-time="1.5">
872
+ <div class="option-name">์ž๋™ ์ž๋ง‰ ์ƒ์„ฑ</div>
873
+ <div class="option-details">
874
+ <span>$12K</span>
875
+ <span>1.5๊ฐœ์›”</span>
876
+ </div>
877
+ </div>
878
+
879
+ <!-- AI ์˜ค๋””์˜ค ๊ด€๋ จ -->
880
+ <div class="option-card" data-category="service" data-id="music-gen" data-cost="20" data-time="2.5">
881
+ <div class="option-name">AI ์Œ์•… ์ƒ์„ฑ</div>
882
+ <div class="option-details">
883
+ <span>$20K</span>
884
+ <span>2.5๊ฐœ์›”</span>
885
+ </div>
886
+ </div>
887
+ <div class="option-card" data-category="service" data-id="voice-clone" data-cost="22" data-time="2.5">
888
+ <div class="option-name">์Œ์„ฑ ๋ณต์ œ/ํ•ฉ์„ฑ</div>
889
+ <div class="option-details">
890
+ <span>$22K</span>
891
+ <span>2.5๊ฐœ์›”</span>
892
+ </div>
893
+ </div>
894
+ <div class="option-card" data-category="service" data-id="tts" data-cost="10" data-time="1.5">
895
+ <div class="option-name">ํ…์ŠคํŠธ ์Œ์„ฑ ๋ณ€ํ™˜</div>
896
+ <div class="option-details">
897
+ <span>$10K</span>
898
+ <span>1.5๊ฐœ์›”</span>
899
+ </div>
900
+ </div>
901
+ <div class="option-card" data-category="service" data-id="podcast-gen" data-cost="18" data-time="2">
902
+ <div class="option-name">AI ํŒŸ์บ์ŠคํŠธ ์ œ์ž‘</div>
903
+ <div class="option-details">
904
+ <span>$18K</span>
905
+ <span>2๊ฐœ์›”</span>
906
+ </div>
907
+ </div>
908
+
909
+ <!-- AI ํ…์ŠคํŠธ ๊ด€๋ จ -->
910
+ <div class="option-card" data-category="service" data-id="chatbot" data-cost="10" data-time="1.5">
911
+ <div class="option-name">AI ์ฑ—๋ด‡</div>
912
+ <div class="option-details">
913
+ <span>$10K</span>
914
+ <span>1.5๊ฐœ์›”</span>
915
+ </div>
916
+ </div>
917
+ <div class="option-card" data-category="service" data-id="content-gen" data-cost="12" data-time="1.5">
918
+ <div class="option-name">์ฝ˜ํ…์ธ  ์ƒ์„ฑ AI</div>
919
+ <div class="option-details">
920
+ <span>$12K</span>
921
+ <span>1.5๊ฐœ์›”</span>
922
+ </div>
923
+ </div>
924
+ <div class="option-card" data-category="service" data-id="copywriting" data-cost="10" data-time="1.5">
925
+ <div class="option-name">AI ์นดํ”ผ๋ผ์ดํŒ…</div>
926
+ <div class="option-details">
927
+ <span>$10K</span>
928
+ <span>1.5๊ฐœ์›”</span>
929
+ </div>
930
+ </div>
931
+ <div class="option-card" data-category="service" data-id="translation" data-cost="15" data-time="2">
932
+ <div class="option-name">AI ๋ฒˆ์—ญ ์„œ๋น„์Šค</div>
933
+ <div class="option-details">
934
+ <span>$15K</span>
935
+ <span>2๊ฐœ์›”</span>
936
+ </div>
937
+ </div>
938
+
939
+ <!-- AI ๋น„์ฆˆ๋‹ˆ์Šค ๋„๊ตฌ -->
940
+ <div class="option-card" data-category="service" data-id="email-assistant" data-cost="8" data-time="1">
941
+ <div class="option-name">AI ์ด๋ฉ”์ผ ์–ด์‹œ์Šคํ„ดํŠธ</div>
942
+ <div class="option-details">
943
+ <span>$8K</span>
944
+ <span>1๊ฐœ์›”</span>
945
+ </div>
946
+ </div>
947
+ <div class="option-card" data-category="service" data-id="presentation" data-cost="15" data-time="2">
948
+ <div class="option-name">AI ํ”„๋ ˆ์  ํ…Œ์ด์…˜ ์ œ์ž‘</div>
949
+ <div class="option-details">
950
+ <span>$15K</span>
951
+ <span>2๊ฐœ์›”</span>
952
+ </div>
953
+ </div>
954
+ <div class="option-card" data-category="service" data-id="doc-summary" data-cost="10" data-time="1.5">
955
+ <div class="option-name">๋ฌธ์„œ ์š”์•ฝ AI</div>
956
  <div class="option-details">
957
+ <span>$10K</span>
958
  <span>1.5๊ฐœ์›”</span>
959
  </div>
960
  </div>
961
+ <div class="option-card" data-category="service" data-id="meeting-assistant" data-cost="18" data-time="2">
962
+ <div class="option-name">AI ํšŒ์˜ ์–ด์‹œ์Šคํ„ดํŠธ</div>
963
  <div class="option-details">
964
+ <span>$18K</span>
965
  <span>2๊ฐœ์›”</span>
966
  </div>
967
  </div>
968
+
969
+ <!-- AI ๋ถ„์„ ๋„๊ตฌ -->
970
+ <div class="option-card" data-category="service" data-id="data-analysis" data-cost="20" data-time="2.5">
971
+ <div class="option-name">AI ๋ฐ์ดํ„ฐ ๋ถ„์„</div>
972
  <div class="option-details">
973
+ <span>$20K</span>
974
  <span>2.5๊ฐœ์›”</span>
975
  </div>
976
  </div>
977
+ <div class="option-card" data-category="service" data-id="sentiment" data-cost="12" data-time="1.5">
978
+ <div class="option-name">๊ฐ์ • ๋ถ„์„ AI</div>
979
  <div class="option-details">
980
+ <span>$12K</span>
981
+ <span>1.5๊ฐœ์›”</span>
982
+ </div>
983
+ </div>
984
+ <div class="option-card" data-category="service" data-id="ocr" data-cost="10" data-time="1.5">
985
+ <div class="option-name">AI OCR ์„œ๋น„์Šค</div>
986
+ <div class="option-details">
987
+ <span>$10K</span>
988
+ <span>1.5๊ฐœ์›”</span>
989
+ </div>
990
+ </div>
991
+ <div class="option-card" data-category="service" data-id="vision-api" data-cost="18" data-time="2">
992
+ <div class="option-name">์ปดํ“จํ„ฐ ๋น„์ „ API</div>
993
+ <div class="option-details">
994
+ <span>$18K</span>
995
+ <span>2๊ฐœ์›”</span>
996
+ </div>
997
+ </div>
998
+
999
+ <!-- AI ํŠนํ™” ์„œ๋น„์Šค -->
1000
+ <div class="option-card" data-category="service" data-id="code-assistant" data-cost="15" data-time="2">
1001
+ <div class="option-name">AI ์ฝ”๋“œ ์–ด์‹œ์Šคํ„ดํŠธ</div>
1002
+ <div class="option-details">
1003
+ <span>$15K</span>
1004
  <span>2๊ฐœ์›”</span>
1005
  </div>
1006
  </div>
1007
+ <div class="option-card" data-category="service" data-id="design-gen" data-cost="18" data-time="2">
1008
+ <div class="option-name">AI ๋””์ž์ธ ์ƒ์„ฑ</div>
1009
+ <div class="option-details">
1010
+ <span>$18K</span>
1011
+ <span>2๊ฐœ์›”</span>
1012
+ </div>
1013
+ </div>
1014
+ <div class="option-card" data-category="service" data-id="3d-gen" data-cost="25" data-time="3">
1015
+ <div class="option-name">AI 3D ๋ชจ๋ธ ์ƒ์„ฑ</div>
1016
+ <div class="option-details">
1017
+ <span>$25K</span>
1018
+ <span>3๊ฐœ์›”</span>
1019
+ </div>
1020
+ </div>
1021
+ <div class="option-card" data-category="service" data-id="resume-builder" data-cost="8" data-time="1">
1022
+ <div class="option-name">AI ์ด๋ ฅ์„œ ๋นŒ๋”</div>
1023
+ <div class="option-details">
1024
+ <span>$8K</span>
1025
+ <span>1๊ฐœ์›”</span>
1026
+ </div>
1027
+ </div>
1028
+ <div class="option-card" data-category="service" data-id="education-ai" data-cost="20" data-time="2.5">
1029
+ <div class="option-name">AI ๊ต์œก ํ”Œ๋žซํผ</div>
1030
+ <div class="option-details">
1031
+ <span>$20K</span>
1032
+ <span>2.5๊ฐœ์›”</span>
1033
+ </div>
1034
+ </div>
1035
+ <div class="option-card" data-category="service" data-id="legal-ai" data-cost="22" data-time="2.5">
1036
+ <div class="option-name">AI ๋ฒ•๋ฅ  ์–ด์‹œ์Šคํ„ดํŠธ</div>
1037
+ <div class="option-details">
1038
+ <span>$22K</span>
1039
+ <span>2.5๊ฐœ์›”</span>
1040
+ </div>
1041
+ </div>
1042
  </div>
1043
  </div>
1044
 
 
1049
  <span>DB ๊ด€๋ฆฌ</span>
1050
  </div>
1051
  <div class="component-options">
1052
+ <div class="option-card" data-category="db" data-id="basic-db" data-cost="3" data-time="0.5">
1053
  <div class="option-name">๊ธฐ๋ณธ DB</div>
1054
  <div class="option-details">
1055
+ <span>$3K</span>
1056
  <span>0.5๊ฐœ์›”</span>
1057
  </div>
1058
  </div>
1059
+ <div class="option-card" data-category="db" data-id="advanced-db" data-cost="8" data-time="1">
1060
  <div class="option-name">๊ณ ๊ธ‰ DB + ๋ฐฑ์—…</div>
1061
  <div class="option-details">
1062
+ <span>$8K</span>
1063
  <span>1๊ฐœ์›”</span>
1064
  </div>
1065
  </div>
1066
+ <div class="option-card" data-category="db" data-id="enterprise-db" data-cost="12" data-time="1.5">
1067
  <div class="option-name">์—”ํ„ฐํ”„๋ผ์ด์ฆˆ DB</div>
1068
  <div class="option-details">
1069
+ <span>$12K</span>
1070
  <span>1.5๊ฐœ์›”</span>
1071
  </div>
1072
  </div>
 
1080
  <span>ํšŒ์›๊ฐ€์ž… ๋ฐ ๋กœ๊ทธ์ธ</span>
1081
  </div>
1082
  <div class="component-options">
1083
+ <div class="option-card" data-category="auth" data-id="gmail-only" data-cost="2" data-time="0.3">
1084
  <div class="option-name">Gmail ์—ฐ๋™</div>
1085
  <div class="option-details">
1086
+ <span>$2K</span>
1087
  <span>0.3๊ฐœ์›”</span>
1088
  </div>
1089
  </div>
1090
+ <div class="option-card" data-category="auth" data-id="multi-auth" data-cost="4" data-time="0.5">
1091
  <div class="option-name">๋‹ค์ค‘ ์†Œ์…œ ๋กœ๊ทธ์ธ</div>
1092
  <div class="option-details">
1093
+ <span>$4K</span>
1094
  <span>0.5๊ฐœ์›”</span>
1095
  </div>
1096
  </div>
1097
+ <div class="option-card" data-category="auth" data-id="custom-auth" data-cost="6" data-time="1">
1098
  <div class="option-name">์ปค์Šคํ…€ ์ธ์ฆ ์‹œ์Šคํ…œ</div>
1099
  <div class="option-details">
1100
+ <span>$6K</span>
1101
  <span>1๊ฐœ์›”</span>
1102
  </div>
1103
  </div>
 
1111
  <span>ํฌ๋ ˆ๋”ง ๊ด€๋ฆฌ</span>
1112
  </div>
1113
  <div class="component-options">
1114
+ <div class="option-card" data-category="credit" data-id="basic-credit" data-cost="3" data-time="0.5">
1115
  <div class="option-name">๊ธฐ๋ณธ ํฌ๋ ˆ๋”ง ์‹œ์Šคํ…œ</div>
1116
  <div class="option-details">
1117
+ <span>$3K</span>
1118
  <span>0.5๊ฐœ์›”</span>
1119
  </div>
1120
  </div>
1121
+ <div class="option-card" data-category="credit" data-id="advanced-credit" data-cost="6" data-time="1">
1122
  <div class="option-name">๊ณ ๊ธ‰ ํฌ๋ ˆ๋”ง + ๊ตฌ๋…</div>
1123
  <div class="option-details">
1124
+ <span>$6K</span>
1125
  <span>1๊ฐœ์›”</span>
1126
  </div>
1127
  </div>
 
1135
  <span>ํŽ˜์ด๋จผํŠธ ์ง€์›</span>
1136
  </div>
1137
  <div class="component-options">
1138
+ <div class="option-card" data-category="payment" data-id="basic-payment" data-cost="4" data-time="0.5">
1139
  <div class="option-name">๊ธฐ๋ณธ ๊ฒฐ์ œ (์นด๋“œ)</div>
1140
  <div class="option-details">
1141
+ <span>$4K</span>
1142
  <span>0.5๊ฐœ์›”</span>
1143
  </div>
1144
  </div>
1145
+ <div class="option-card" data-category="payment" data-id="multi-payment" data-cost="8" data-time="1">
1146
  <div class="option-name">๋‹ค์ค‘ ๊ฒฐ์ œ ์ˆ˜๋‹จ</div>
1147
  <div class="option-details">
1148
+ <span>$8K</span>
1149
  <span>1๊ฐœ์›”</span>
1150
  </div>
1151
  </div>
1152
+ <div class="option-card" data-category="payment" data-id="global-payment" data-cost="10" data-time="1.5">
1153
  <div class="option-name">๊ธ€๋กœ๋ฒŒ ๊ฒฐ์ œ ์‹œ์Šคํ…œ</div>
1154
  <div class="option-details">
1155
+ <span>$10K</span>
1156
  <span>1.5๊ฐœ์›”</span>
1157
  </div>
1158
  </div>
 
1166
  <span>๋งˆ์ผ€ํŒ… ์ง€์›</span>
1167
  </div>
1168
  <div class="component-options">
1169
+ <div class="option-card" data-category="marketing" data-id="basic-marketing" data-cost="5" data-time="1">
1170
  <div class="option-name">๊ธฐ๋ณธ ๋งˆ์ผ€ํŒ… ๋„๊ตฌ</div>
1171
  <div class="option-details">
1172
+ <span>$5K</span>
1173
  <span>1๊ฐœ์›”</span>
1174
  </div>
1175
  </div>
1176
+ <div class="option-card" data-category="marketing" data-id="advanced-marketing" data-cost="10" data-time="1.5">
1177
  <div class="option-name">๊ณ ๊ธ‰ ๋งˆ์ผ€ํŒ… ์ž๋™ํ™”</div>
1178
  <div class="option-details">
1179
+ <span>$10K</span>
1180
  <span>1.5๊ฐœ์›”</span>
1181
  </div>
1182
  </div>
 
1190
  <span>๊ฐœ๋ฐœ ๋ฐ ๊ธฐ์ˆ  ์ธ๋ ฅ ์ง€์›</span>
1191
  </div>
1192
  <div class="component-options">
1193
+ <div class="option-card" data-category="support" data-id="basic-support" data-cost="3" data-time="0">
1194
  <div class="option-name">๊ธฐ๋ณธ ๊ธฐ์ˆ  ์ง€์›</div>
1195
  <div class="option-details">
1196
+ <span>์›” $3K</span>
1197
  <span>์ฆ‰์‹œ</span>
1198
  </div>
1199
  </div>
1200
+ <div class="option-card" data-category="support" data-id="dedicated-support" data-cost="8" data-time="0">
1201
  <div class="option-name">์ „๋‹ด ๊ฐœ๋ฐœ์ž ์ง€์›</div>
1202
  <div class="option-details">
1203
+ <span>์›” $8K</span>
1204
  <span>์ฆ‰์‹œ</span>
1205
  </div>
1206
  </div>
 
1214
  <span>์›๊ฒฉ ๋ชจ๋‹ˆํ„ฐ๋ง ์ง€์›</span>
1215
  </div>
1216
  <div class="component-options">
1217
+ <div class="option-card" data-category="monitoring" data-id="basic-monitor" data-cost="2" data-time="0.3">
1218
  <div class="option-name">๊ธฐ๋ณธ ๋ชจ๋‹ˆํ„ฐ๋ง</div>
1219
  <div class="option-details">
1220
+ <span>$2K</span>
1221
  <span>0.3๊ฐœ์›”</span>
1222
  </div>
1223
  </div>
1224
+ <div class="option-card" data-category="monitoring" data-id="advanced-monitor" data-cost="4" data-time="0.5">
1225
  <div class="option-name">๊ณ ๊ธ‰ ๋ถ„์„ + ์•Œ๋ฆผ</div>
1226
  <div class="option-details">
1227
+ <span>$4K</span>
1228
  <span>0.5๊ฐœ์›”</span>
1229
  </div>
1230
  </div>
 
1238
  <span>์ถ”๊ฐ€ ๊ธฐ๋Šฅ (๋ณต์ˆ˜ ์„ ํƒ ๊ฐ€๋Šฅ)</span>
1239
  </div>
1240
  <div class="component-options">
1241
+ <div class="option-card" data-category="additional" data-id="admin-panel" data-cost="5" data-time="0.5">
1242
  <div class="option-name">๊ด€๋ฆฌ์ž ๋Œ€์‹œ๋ณด๋“œ</div>
1243
  <div class="option-details">
1244
+ <span>$5K</span>
1245
  <span>0.5๊ฐœ์›”</span>
1246
  </div>
1247
  </div>
1248
+ <div class="option-card" data-category="additional" data-id="api-system" data-cost="8" data-time="1">
1249
  <div class="option-name">API ์‹œ์Šคํ…œ</div>
1250
  <div class="option-details">
1251
+ <span>$8K</span>
1252
  <span>1๊ฐœ์›”</span>
1253
  </div>
1254
  </div>
1255
+ <div class="option-card" data-category="additional" data-id="analytics" data-cost="6" data-time="0.5">
1256
  <div class="option-name">๋ถ„์„ ๋„๊ตฌ</div>
1257
  <div class="option-details">
1258
+ <span>$6K</span>
1259
  <span>0.5๊ฐœ์›”</span>
1260
  </div>
1261
  </div>
1262
+ <div class="option-card" data-category="additional" data-id="multi-language" data-cost="4" data-time="0.5">
1263
  <div class="option-name">๋‹ค๊ตญ์–ด ์ง€์›</div>
1264
  <div class="option-details">
1265
+ <span>$4K</span>
1266
  <span>0.5๊ฐœ์›”</span>
1267
  </div>
1268
  </div>
 
1276
  <h3>๋งž์ถค AI SaaS ๊ฒฌ์ ์„œ</h3>
1277
  <p>์„ ํƒํ•˜์‹  ๊ตฌ์„ฑ์œผ๋กœ ์‚ฐ์ถœ๋œ ์ƒ์„ธ ๊ฒฌ์ ์ž…๋‹ˆ๋‹ค</p>
1278
  </div>
 
 
 
 
 
 
1279
 
1280
  <div class="custom-summary">
1281
  <div class="summary-item">
1282
  <div class="summary-label">์ดˆ๊ธฐ ๊ฐœ๋ฐœ ๋น„์šฉ</div>
1283
+ <div class="summary-value" id="initialCost">$0K</div>
1284
  </div>
1285
  <div class="summary-item">
1286
  <div class="summary-label">์˜ˆ์ƒ ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„</div>
 
1288
  </div>
1289
  <div class="summary-item">
1290
  <div class="summary-label">์ด ๋น„์šฉ (<span id="periodText">3</span>๊ฐœ์›”)</div>
1291
+ <div class="summary-value" id="totalCost">$0K</div>
1292
  </div>
1293
  </div>
1294
 
 
1297
  <div class="component-list" id="componentList"></div>
1298
  </div>
1299
 
1300
+
 
 
 
 
 
 
 
 
 
 
1301
 
1302
  <div class="monthly-breakdown">
1303
  <div class="monthly-item">
1304
  <div class="monthly-label">์›” ์„œ๋ฒ„ ๋น„์šฉ</div>
1305
+ <div class="monthly-value" id="serverCost">$0K</div>
1306
  </div>
1307
  <div class="monthly-item">
1308
  <div class="monthly-label">์›” API ๋น„์šฉ</div>
1309
+ <div class="monthly-value" id="apiCost">$0K</div>
1310
  </div>
1311
  <div class="monthly-item">
1312
  <div class="monthly-label">์›” ์œ ์ง€๋ณด์ˆ˜</div>
1313
+ <div class="monthly-value" id="maintenanceCost">$0K</div>
1314
  </div>
1315
  <div class="monthly-item">
1316
  <div class="monthly-label">์›” ์ด ์šด์˜๋น„</div>
1317
+ <div class="monthly-value" id="totalMonthlyCost">$0K</div>
1318
  </div>
1319
  </div>
1320
  </div>
 
1461
  componentListHTML += `
1462
  <div class="component-list-item">
1463
  <span><strong>${categoryNames[category]}</strong>: ${value.name}</span>
1464
+ <span>${category === 'support' ? '์›” ' : ''}${value.cost}K</span>
1465
  </div>
1466
  `;
1467
  } else {
 
1473
  componentListHTML += `
1474
  <div class="component-list-item">
1475
  <span><strong>${categoryNames[category]}</strong>: ${item.name}</span>
1476
+ <span>${item.cost}K</span>
1477
  </div>
1478
  `;
1479
  });
 
1486
  const maintenanceCost = Math.round(initialCost * 0.01); // ์ดˆ๊ธฐ ๋น„์šฉ์˜ 1%
1487
  const totalMonthly = serverCost + apiCost + maintenanceCost + monthlySupport;
1488
 
 
 
 
1489
  // ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„ ์กฐ์ • (์ตœ์†Œ 3๊ฐœ์›”)
1490
  const adjustedTime = Math.max(3, Math.ceil(maxTime));
1491
 
1492
+ // ๋น„์šฉ ๊ทœ๋ชจ์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ๊ธฐ๊ฐ„ ์„ ํƒ
1493
+ if (initialCost < 50) {
1494
+ currentPeriod = 3;
1495
+ } else if (initialCost < 100) {
1496
+ currentPeriod = 6;
1497
+ } else {
1498
+ currentPeriod = 12;
1499
+ }
1500
+
1501
+ // ์ด ๋น„์šฉ ๊ณ„์‚ฐ (๊ธฐ๊ฐ„๋ณ„)
1502
+ const totalCost = initialCost + (totalMonthly * currentPeriod);
1503
+
1504
  // ๊ฒฐ๊ณผ ํ‘œ์‹œ
1505
+ document.getElementById('initialCost').textContent = `${initialCost}K`;
1506
  document.getElementById('devTime').textContent = `${adjustedTime}๊ฐœ์›”`;
1507
+ document.getElementById('totalCost').textContent = `${totalCost}K`;
1508
  document.getElementById('periodText').textContent = currentPeriod;
1509
  document.getElementById('componentList').innerHTML = componentListHTML;
1510
 
 
 
 
 
 
 
1511
  // ์›”๋ณ„ ๋น„์šฉ ํ‘œ์‹œ
1512
+ document.getElementById('serverCost').textContent = `${serverCost}K`;
1513
+ document.getElementById('apiCost').textContent = `${apiCost}K`;
1514
+ document.getElementById('maintenanceCost').textContent = `${maintenanceCost}K`;
1515
+ document.getElementById('totalMonthlyCost').textContent = `${totalMonthly}K`;
1516
  }
1517
 
1518
  // ๊ธฐ์กด ๋น„์šฉ ๊ณ„์‚ฐ ํ•จ์ˆ˜