미리 해두길 잘했다 ^_^







사이트 아니고 그냥 로컬에서 동작하는 html파일이야


더보기/숨기기
<!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>