File size: 3,257 Bytes
169cd1a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98185b4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>4000์ž ๋‹จ์œ„ ๋ถ„ํ• ๊ธฐ</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    textarea { width: 100%; height: 180px; resize: vertical; }
    .chunk { border: 1px solid #ccc; padding: 8px; margin: 8px 0; border-radius: 6px; background: #f9f9f9; }
    pre { margin: 6px 0 0 0; white-space: pre-wrap; word-break: break-word; }
    .toolbar { margin-bottom: 8px; }
  </style>
</head>
<body>
  <h1>4000์ž ๋‹จ์œ„ ๋ถ„ํ• ๊ธฐ</h1>
  <p>ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ์•„๋ž˜ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ 4000๊ธ€์ž์”ฉ ๋ถ„ํ• ํ•ฉ๋‹ˆ๋‹ค.</p>
  <div class="toolbar">
    <textarea id="input" placeholder="์—ฌ๊ธฐ์— ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”"></textarea>
    <br/>
    <button id="splitBtn">4000์ž ๋‹จ์œ„๋กœ ๋ถ„ํ• </button>
    <button id="clearBtn" type="button">์ดˆ๊ธฐํ™”</button>
  </div>
  <div id="output" aria-live="polite"></div>

  <script>
    (function(){
      const input = document.getElementById('input');
      const splitBtn = document.getElementById('splitBtn');
      const clearBtn = document.getElementById('clearBtn');
      const output = document.getElementById('output');
      const CHUNK = 4000;

      function chunkText(text) {
        // Unicode code points ๋‹จ์œ„๋กœ ์•ˆ์ „ํ•˜๊ฒŒ ๋ถ„ํ• 
        const cps = Array.from(text);
        const chunks = [];
        for (let i = 0; i < cps.length; i += CHUNK) {
          chunks.push(cps.slice(i, i + CHUNK).join(''));
        }
        return chunks;
      }

      function renderChunks(chunks) {
        output.innerHTML = '';
        if (!chunks.length) return;
        const ol = document.createElement('ol');
        chunks.forEach((chunk, idx) => {
          const li = document.createElement('li');
          li.className = 'chunk';
          const header = document.createElement('div');
          header.style.fontWeight = 'bold';
          header.textContent = `Chunk ${idx + 1} (${chunk.length} chars)`;
          const pre = document.createElement('pre');
          pre.textContent = chunk;
          const copyBtn = document.createElement('button');
          copyBtn.textContent = 'ํด๋ฆฝ๋ณด๋“œ์— ๋ณต์‚ฌ';
          copyBtn.style.marginLeft = '8px';
          copyBtn.addEventListener('click', async () => {
            try {
              await navigator.clipboard.writeText(chunk);
              copyBtn.textContent = '๋ณต์‚ฌ๋จ';
              setTimeout(() => { copyBtn.textContent = 'ํด๋ฆฝ๋ณด๋“œ์— ๋ณต์‚ฌ'; }, 1500);
            } catch (e) {
              copyBtn.textContent = '์‹คํŒจ';
              setTimeout(() => { copyBtn.textContent = 'ํด๋ฆฝ๋ณด๋“œ์— ๋ณต์‚ฌ'; }, 1500);
            }
          });
          li.appendChild(header);
          li.appendChild(pre);
          li.appendChild(copyBtn);
          ol.appendChild(li);
        });
        output.appendChild(ol);
      }

      splitBtn.addEventListener('click', () => {
        const text = input.value;
        const chunks = chunkText(text);
        renderChunks(chunks);
      });

      clearBtn.addEventListener('click', () => {
        input.value = '';
        output.innerHTML = '';
      });
    })();
  </script>
</body>
</html>