<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MVP작 효율 계산</title>
<style>
body {
font-family: 'Malgun Gothic', sans-serif;
background-color: #f4f7f6;
color: #333;
display: flex;
justify-content: center;
padding: 20px;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 1100px;
}
.top-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.calculator-container {
background-color: #fff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
flex: 1;
min-width: 320px;
}
h2 {
text-align: center;
color: #2c3e50;
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
border-bottom: 2px solid #ecf0f1;
padding-bottom: 10px;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-size: 13px;
color: #34495e;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 15px;
}
button {
width: 100%;
padding: 12px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.2s;
}
button:hover { background-color: #2980b9; }
.btn-point { background-color: #27ae60; }
.btn-point:hover { background-color: #2ecc71; }
.btn-add-rank { background-color: #f39c12; margin-top: 5px; }
.btn-add-rank:hover { background-color: #e67e22; }
.btn-delete { background-color: #e74c3c; padding: 6px 10px; font-size: 13px; margin-top: 0; width: auto; }
.btn-delete:hover { background-color: #c0392b; }
.result-group { margin-top: 20px; padding: 15px; border-radius: 8px; display: none; }
.result-item { background-color: #e8f4f8; border-left: 5px solid #3498db; }
.result-point { background-color: #e9f7ef; border-left: 5px solid #27ae60; }
.res-line { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.res-line.highlight { font-size: 17px; font-weight: bold; color: #e74c3c; border-top: 1px solid #bdc3c7; padding-top: 10px; margin-top: 10px; }
.add-rank-box {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed #bdc3c7;
}
.ranking-container {
background-color: #fff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; margin-top: 10px; text-align: center; }
th, td { padding: 12px; border-bottom: 1px solid #ddd; font-size: 14px; }
th { background-color: #34495e; color: white; white-space: nowrap; }
tr:hover { background-color: #f1f1f1; }
.rank-1 { background-color: #fff3cd !important; font-weight: bold; color: #d35400; }
.rank-2 { background-color: #f8f9fa !important; }
</style>
</head>
<body>
<div class="wrapper">
<div class="top-section">
<div class="calculator-container">
<h2>아이템 판매</h2>
<div class="input-group">
<label>사용할 총 금액 (원)</label>
<input type="text" id="budget1" class="comma-input" value="1,500,000">
</div>
<div style="display: flex; gap: 10px;">
<div class="input-group" style="flex: 1;">
<label>1세트당 가격 (원)</label>
<input type="text" id="itemPrice" class="comma-input" value="54,000">
</div>
<div class="input-group" style="flex: 1;">
<label>판매 시세 (억 메소)</label>
<input type="number" id="itemMeso" value="30" step="0.1">
</div>
</div>
<div style="display: flex; gap: 10px;">
<div class="input-group" style="flex: 1;">
<label>1억당 현금화 단가 (원)</label>
<input type="text" id="cashPerMeso1" class="comma-input" value="1,500">
</div>
<div class="input-group" style="width: 30%;">
<label>수수료 (%)</label>
<input type="number" id="feeRate" value="3" step="0.1">
</div>
</div>
<button onclick="calculateItem()">아이템 효율 계산하기</button>
<div class="result-group result-item" id="resultArea1">
<div class="res-line"><span>구매 가능 수량:</span> <span id="resQuantity">0 세트</span></div>
<div class="res-line"><span>남는 잔돈:</span> <span id="resChange">0 원</span></div>
<div class="res-line"><span>확보 메소 (<span id="resFeeDisplay">5</span>% 수수료 제외):</span> <span id="resMesoAfter">0 억 메소</span></div>
<div class="res-line highlight"><span>최종 회수 금액:</span> <span id="resFinalCash1">0 원</span></div>
<div class="res-line" style="font-weight: bold; color: #2980b9;"><span>실사용액 대비 회수율:</span> <span id="resEfficiency1">0 %</span></div>
<div class="add-rank-box">
<label style="color: #d35400;">이 결과를 랭킹에 저장하시겠습니까?</label>
<div style="display: flex; gap: 10px; align-items: center;">
<input type="text" id="rankItemName" placeholder="아이템 이름 (예:원더베리, 부티크 등)">
<button class="btn-add-rank" style="margin-top: 0; width: 120px;" onclick="addCurrentToRanking()">리스트<br>추가</button>
</div>
</div>
</div>
</div>
<div class="calculator-container">
<h2>포인트 전환</h2>
<div class="input-group">
<label>전환할 총 포인트 (원)</label>
<input type="text" id="budget2" class="comma-input" value="1,500,000">
</div>
<div class="input-group">
<label>메소 구매 시세 (1억당 / 원)</label>
<input type="text" id="buyPrice" class="comma-input" value="2,200">
</div>
<div class="input-group">
<label>메소 판매 시세 (1억당 / 원)</label>
<input type="text" id="cashPerMeso2" class="comma-input" value="1,500">
</div>
<button class="btn-point" onclick="calculatePoint()">포인트 전환 계산하기</button>
<div class="result-group result-point" id="resultArea2">
<div class="res-line"><span>사용 포인트:</span> <span id="resPointUsed">0 원</span></div>
<div class="res-line"><span>확보 메소:</span> <span id="resPointMeso">0 억 메소</span></div>
<div class="res-line highlight"><span>최종 회수 금액:</span> <span id="resFinalCash2">0 원</span></div>
<div class="res-line" style="font-weight: bold; color: #27ae60;"><span>포인트 대비 회수율:</span> <span id="resEfficiency2">0 %</span></div>
</div>
</div>
</div>
<div class="ranking-container">
<h2>📊 효율 비교 랭킹</h2>
<table id="rankingTable">
<thead>
<tr>
<th>순위</th>
<th>아이템 이름</th>
<th>세트당 가격</th>
<th>판매 시세</th>
<th>구매 가능</th>
<th>남는 잔돈</th>
<th>최종 현금화</th>
<th>회수율(효율)</th>
<th>관리</th>
</tr>
</thead>
<tbody id="rankingBody">
<tr>
<td colspan="9" style="color: #7f8c8d;">계산 결과 창에서 아이템 이름을 적고 [리스트 추가]를 누르면 랭킹이 기록됩니다.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
document.addEventListener('input', function(e) {
if(e.target.classList.contains('comma-input')) {
let value = e.target.value.replace(/,/g, '').replace(/[^0-9]/g, '');
if (value !== '') {
e.target.value = parseInt(value, 10).toLocaleString();
} else {
e.target.value = '';
}
}
});
function getNumber(id) {
return parseFloat(document.getElementById(id).value.replace(/,/g, '')) || 0;
}
let itemList = [];
let itemIdCounter = 0;
let currentCalculation = null;
function calculateItem() {
const budget = getNumber('budget1');
const itemPrice = getNumber('itemPrice');
const itemMeso = parseFloat(document.getElementById('itemMeso').value) || 0;
const cashPerMeso = getNumber('cashPerMeso1');
const feeRate = parseFloat(document.getElementById('feeRate').value) || 0;
if (itemPrice <= 0 || itemMeso <= 0) {
alert("아이템 가격과 시세를 정확히 입력해주세요.");
return;
}
const quantity = Math.floor(budget / itemPrice);
const spent = quantity * itemPrice;
const change = budget - spent;
const mesoBeforeFee = quantity * itemMeso;
const mesoAfterFee = mesoBeforeFee * (1 - (feeRate / 100));
const finalCash = Math.floor(mesoAfterFee * cashPerMeso);
let efficiency = spent > 0 ? (finalCash / spent) * 100 : 0;
currentCalculation = {
price: itemPrice,
meso: itemMeso,
quantity: quantity,
change: change,
finalCash: finalCash,
efficiency: efficiency
};
document.getElementById('resQuantity').innerText = quantity + " 세트";
document.getElementById('resChange').innerText = change.toLocaleString() + " 원";
document.getElementById('resFeeDisplay').innerText = feeRate;
document.getElementById('resMesoAfter').innerText = mesoAfterFee.toLocaleString(undefined, {maximumFractionDigits: 2}) + " 억 메소";
document.getElementById('resFinalCash1').innerText = finalCash.toLocaleString() + " 원";
document.getElementById('resEfficiency1').innerText = efficiency.toFixed(2) + " %";
document.getElementById('resultArea1').style.display = 'block';
}
function addCurrentToRanking() {
if (!currentCalculation) {
alert("먼저 [아이템 효율 계산하기] 버튼을 눌러주세요.");
return;
}
const itemName = document.getElementById('rankItemName').value.trim();
if (itemName === "") {
alert("저장할 아이템 이름을 입력해주세요. (예: 원더베리, 부티크 등)");
return;
}
itemList.push({
id: ++itemIdCounter,
name: itemName,
...currentCalculation
});
document.getElementById('rankItemName').value = '';
updateRankingBoard();
}
function deleteItem(id) {
itemList = itemList.filter(item => item.id !== id);
updateRankingBoard();
}
function updateRankingBoard() {
const tbody = document.getElementById('rankingBody');
tbody.innerHTML = '';
if (itemList.length === 0) {
tbody.innerHTML = '<tr><td colspan="9" style="color: #7f8c8d;">계산 결과 창에서 아이템 이름을 적고 [리스트 추가]를 누르면 랭킹이 기록됩니다.</td></tr>';
return;
}
itemList.sort((a, b) => b.efficiency - a.efficiency);
itemList.forEach((item, index) => {
const tr = document.createElement('tr');
if (index === 0) tr.classList.add('rank-1');
else if (index === 1) tr.classList.add('rank-2');
let rankIcon = (index + 1) + '위';
if (index === 0) rankIcon = '🥇 1위';
else if (index === 1) rankIcon = '🥈 2위';
else if (index === 2) rankIcon = '🥉 3위';
tr.innerHTML = `
<td>${rankIcon}</td>
<td><strong>${item.name}</strong></td>
<td>${item.price.toLocaleString()}원</td>
<td>${item.meso}억</td>
<td>${item.quantity}개</td>
<td>${item.change.toLocaleString()}원</td>
<td style="color: #c0392b; font-weight: bold;">${item.finalCash.toLocaleString()}원</td>
<td style="font-weight: bold;">${item.efficiency.toFixed(2)}%</td>
<td><button class="btn-delete" onclick="deleteItem(${item.id})">삭제</button></td>
`;
tbody.appendChild(tr);
});
}
function calculatePoint() {
const budget = getNumber('budget2');
const buyPrice = getNumber('buyPrice');
const cashPerMeso = getNumber('cashPerMeso2');
if (buyPrice <= 0) { alert("메소 구매 시세를 정확히 입력해주세요."); return; }
const getMeso = budget / buyPrice;
const finalCash = Math.floor(getMeso * cashPerMeso);
let efficiency = budget > 0 ? (finalCash / budget) * 100 : 0;
document.getElementById('resPointUsed').innerText = budget.toLocaleString() + " 원";
document.getElementById('resPointMeso').innerText = getMeso.toLocaleString(undefined, {maximumFractionDigits: 2}) + " 억 메소";
document.getElementById('resFinalCash2').innerText = finalCash.toLocaleString() + " 원";
document.getElementById('resEfficiency2').innerText = efficiency.toFixed(2) + " %";
document.getElementById('resultArea2').style.display = 'block';
}
</script>
</body>
</html>
깃허브
