0819_code/index.html at main · oj-o/0819_code · GitHub

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>뉴스레터 생성기 (Client-Side)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4A4FF4; /* A vibrant blue, similar to Airtable/n8n */
            --primary-hover-color: #3A40D4;
            --background-color: #F9FAFB;
            --card-background-color: #FFFFFF;
            --text-color: #1A202C;
            --subtle-text-color: #718096;
            --border-color: #E2E8F0;
            --shadow-color: rgba(0, 0, 0, 0.05);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            margin: 0;
            padding: 40px 20px;
            background-color: var(--background-color);
            color: var(--text-color);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .container {
            max-width: 720px;
            margin: 0 auto;
            background-color: var(--card-background-color);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color);
            border: 1px solid var(--border-color);
        }

        h1 {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-color);
            text-align: center;
            margin-bottom: 16px;
        }

        p {
            text-align: center;
            color: var(--subtle-text-color);
            margin-bottom: 32px;
            line-height: 1.6;
        }

        .btn {
            display: block;
            width: 100%;
            padding: 14px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            background-color: var(--primary-color);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
        }

        .btn:hover {
            background-color: var(--primary-hover-color);
            transform: translateY(-1px);
        }

        .btn:disabled {
            background-color: #BDBDBD;
            cursor: not-allowed;
            transform: none;
        }

        .result {
            margin-top: 32px;
            padding: 24px;
            background-color: #F7FAFC;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            white-space: pre-wrap;
            font-family: 'SF Mono', 'Courier New', Courier, monospace;
            font-size: 14px;
            line-height: 1.7;
            color: var(--text-color);
            max-height: 400px;
            overflow-y: auto;
        }

        .result h2 {
            margin-top: 0;
            margin-bottom: 16px;
            font-size: 18px;
            font-weight: 600;
            color: var(--subtle-text-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
        }

        .error {
            color: #e53e3e;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>주간 뉴스레터 자동 생성</h1>
        <p>아래 버튼을 클릭하여 지난 주의 활동을 기반으로 뉴스레터 생성을 시작합니다. 생성된 이메일 내용은 시뮬레이션 결과로 아래에 표시됩니다.</p>
        <button id="generateBtn" class="btn">뉴스레터 생성 실행</button>

        <div id="result-container" class="result" style="display: none;">
            <h2>생성 결과</h2>
            <div id="result-content"></div>
        </div>
    </div>

    <script>
        const generateBtn = document.getElementById('generateBtn');
        const resultContainer = document.getElementById('result-container');
        const resultContent = document.getElementById('result-content');

        const MEMBERS_FILE = './members.csv';
        const ACTIVITIES_FILE = './activities.csv';
        const DAYS_TO_LOOK_BACK = 7;

        // 1. CSV 파싱 함수
        function parseCSV(csvText) {
            const lines = csvText.trim().split('\n');
            const headers = lines[0].split(',').map(h => h.trim());
            const records = [];
            for (let i = 1; i < lines.length; i++) {
                const values = lines[i].split(',').map(v => v.trim());
                if (values.length === headers.length) {
                    let record = {};
                    headers.forEach((header, index) => {
                        record[header] = values[index];
                    });
                    records.push(record);
                }
            }
            return records;
        }

        // 2. 데이터 로딩 함수
        async function loadData(membersPath, activitiesPath) {
            try {
                const [membersRes, activitiesRes] = await Promise.all([
                    fetch(membersPath),
                    fetch(activitiesPath)
                ]);

                if (!membersRes.ok || !activitiesRes.ok) {
                    throw new Error('데이터 파일을 불러오는 데 실패했습니다.');
                }

                const [membersText, activitiesText] = await Promise.all([
                    membersRes.text(),
                    activitiesRes.text()
                ]);

                return [parseCSV(membersText), parseCSV(activitiesText)];
            } catch (e) {
                console.error(e);
                return [null, null];
            }
        }

        // 3. 최근 활동 필터링
        function filterRecentActivities(activities, days) {
            if (!activities) return [];
            const endDate = new Date();
            const startDate = new Date();
            startDate.setDate(endDate.getDate() - days);

            return activities.filter(act => {
                const actDate = new Date(act.date);
                return actDate >= startDate && actDate <= endDate;
            });
        }

        // 4. 요약 생성 (LLM 시뮬레이션)
        function summarize(activities) {
            if (activities.length === 0) {
                return "지난 주에 기록된 활동이 없습니다.";
            }
            let summary = "지난 주 팀 활동 요약:\n\n";
            activities.forEach(row => {
                const date = new Date(row.date).toISOString().split('T')[0];
                summary += `- 활동명: ${row.activity_name} (${date})\n`;
                summary += `  - 참여자: ${row.participants}\n`;
                summary += `  - 내용: ${row.notes}\n`;
                if (row.photo_url) {
                    summary += `  - 관련 사진: ${row.photo_url}\n`;
                }
                summary += "\n";
            });
            return summary;
        }

        // 5. 뉴스레터 HTML 본문 생성
        function generateNewsletterHtml(summaryText) {
            const htmlContent = summaryText.replace(/\n/g, '<br>');
            return `
                <div style="font-family: Arial, sans-serif; line-height: 1.6;">
                    <h2>주간 팀 활동 뉴스레터</h2>
                    <p>안녕하세요, 팀 멤버 여러분!</p>
                    <p>지난 주 팀 활동들을 아래와 같이 공유드립니다.</p>
                    <hr>
                    <div style="background-color: #f9f9f9; border-left: 5px solid #ccc; padding: 10px 20px; margin: 20px 0;">
                        <p>${htmlContent}</p>
                    </div>
                    <hr>
                    <p>이번 주도 활기찬 한 주 되시길 바랍니다!</p>
                </div>
            `;
        }

        // 6. 이메일 발송 시뮬레이션
        function getSimulatedEmailContent(recipients, subject, htmlBody) {
            let output = "--- 이메일 발송 시뮬레이션 ---\n";
            output += `수신자: ${recipients.join(', ')}\n`;
            output += `제목: ${subject}\n`;
            output += "--- 본문 (HTML 미리보기) ---\n";
            output += htmlBody.replace(/<br>/g, '\n').replace(/<[^>]*>/g, ''); // 간단한 텍스트 변환
            output += "\n-----------------------\n";
            return output;
        }

        // 메인 워크플로
        async function runNewsletterProcess() {
            const [members, activities] = await loadData(MEMBERS_FILE, ACTIVITIES_FILE);

            if (!members || !activities) {
                return "<span class='error'>오류: 데이터 파일(members.csv 또는 activities.csv)을 찾을 수 없습니다.</span>";
            }

            const recentActivities = filterRecentActivities(activities, DAYS_TO_LOOK_BACK);
            if (recentActivities.length === 0) {
                return "뉴스레터에 포함할 최근 활동이 없습니다.";
            }

            const summary = summarize(recentActivities);
            const newsletterHtml = generateNewsletterHtml(summary);
            const recipientList = members.map(m => m.email);
            const subject = `[${new Date().toISOString().split('T')[0]}] 주간 팀 활동 뉴스레터`;

            return getSimulatedEmailContent(recipientList, subject, newsletterHtml);
        }

        // 버튼 클릭 이벤트
        generateBtn.addEventListener('click', async () => {
            generateBtn.disabled = true;
            generateBtn.textContent = '생성 중...';

            const result = await runNewsletterProcess();

            resultContent.innerHTML = result;
            resultContainer.style.display = 'block';

            generateBtn.disabled = false;
            generateBtn.textContent = '뉴스레터 생성 실행';
        });

    </script>
</body>
</html>