DietPlanChecklist 컴포넌트 구현하기

가나톡ganaTOK
가나톡ganaTOK

 DietPlanChecklist 컴포넌트 구현하기

우리는 GitHub를 이용하여 인터랙티브한 체크리스트를 구현하고 블로그에 포함시키는 방법을 사용합니다. GitHub Pages를 활용하면 정적 웹사이트를 무료로 호스팅할 수 있어, 이를 통해 인터랙티브한 요소를 블로그에 추가할 수 있습니다. 다음은 GitHub를 이용한 구현 과정입니다:

  1. GitHub 저장소 생성

a) GitHub 계정에 로그인합니다. 

b) 새 저장소(repository)를 생성합니다. 이름을 "diet-plan-checklist"로 지정합니다. 

c) 저장소를 public으로 설정하고 "Initialize this repository with a README" 옵션을 선택합니다.

  1. 프로젝트 파일 생성

저장소에 다음 파일들을 생성합니다:

a) index.html (메인 HTML 파일)

b) styles.css (CSS 스타일시트) 

c) script.js (자바스크립트 파일)

  1. HTML 파일 작성 (index.html)

html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>새해 다이어트 성공의 열쇠: 1월 4주 콘텐츠 플랜</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>새해 다이어트 성공의 열쇠: 1월 4주 콘텐츠 플랜</h1>
        <p>이 인터랙티브 체크리스트를 통해 1월 동안의 다이어트 콘텐츠 계획을 관리하고 진행 상황을 추적해보세요.</p>
        <div id="checklist"></div>
        <div id="progress">
            <h3>총 진행도</h3>
            <div class="progress-bar">
                <div class="progress-fill"></div>
            </div>
            <p id="progress-text"></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

  1. CSS 스타일 작성 (styles.css)

css
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

.container {
    max-width: 800px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
}

.week {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.week h2 {
    margin-top: 0;
}

.task {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.task input[type="checkbox"] {
    margin-right: 10px;
}

.progress-bar {
    width: 100%;
    background-color: #e0e0e0;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #4CAF50;
    width: 0;
    transition: width 0.5s ease-in-out;
}

  1. 자바스크립트 작성 (script.js)

javascript
const weeks = [
    {
        title: "1주차: 새해 다이어트 결심, 이번엔 성공하는 5가지 비결",
        tasks: [
            "다이어트 실패 통계 자료 수집",
            "전문가 인터뷰 (영양사 또는 피트니스 트레이너)",
            "독자 참여 유도를 위한 코멘트 섹션 준비",
            "관련 인포그래픽 제작",
            "SNS 공유용 짧은 팁 이미지 5개 준비"
        ]
    },
    // 2, 3, 4주차 데이터도 유사한 형식으로 추가
];

function createChecklist() {
    const checklistDiv = document.getElementById('checklist');
    weeks.forEach((week, weekIndex) => {
        const weekDiv = document.createElement('div');
        weekDiv.className = 'week';
        weekDiv.innerHTML = `<h2>${week.title}</h2>`;
        
        week.tasks.forEach((task, taskIndex) => {
            const taskDiv = document.createElement('div');
            taskDiv.className = 'task';
            taskDiv.innerHTML = `
                <input type="checkbox" id="week${weekIndex}-task${taskIndex}">
                <label for="week${weekIndex}-task${taskIndex}">${task}</label>
            `;
            weekDiv.appendChild(taskDiv);
        });
        
        checklistDiv.appendChild(weekDiv);
    });
}

function updateProgress() {
    const totalTasks = weeks.reduce((sum, week) => sum + week.tasks.length, 0);
    const checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;
    const progressPercentage = (checkedTasks / totalTasks) * 100;
    
    document.querySelector('.progress-fill').style.width = `${progressPercentage}%`;
    document.getElementById('progress-text').textContent = 
        `총점: ${checkedTasks} / ${totalTasks} (${progressPercentage.toFixed(1)}% 완료)`;
}

document.addEventListener('DOMContentLoaded', () => {
    createChecklist();
    document.getElementById('checklist').addEventListener('change', updateProgress);
    updateProgress();
});

  1. GitHub Pages 활성화

a) 저장소 설정(Settings)으로 이동합니다. b) "Pages" 섹션으로 스크롤합니다. c) "Source" 드롭다운에서 "main" 브랜치를 선택합니다. d) "Save" 버튼을 클릭합니다.

  1. 블로그에 임베드

GitHub Pages에서 제공하는 URL을 사용하여 블로그에 iframe으로 임베드합니다:

html
<iframe src="https://[your-github-username].github.io/diet-plan-checklist/" 
        width="100%" height="600px" frameborder="0"></iframe>

구현 시 주의사항:

  1. GitHub 저장소는 public으로 설정되어야 합니다.
  2. 변경사항을 커밋하고 푸시할 때마다 GitHub Pages가 자동으로 업데이트됩니다.
  3. 사용자의 체크리스트 상태는 로컬 스토리지에 저장되므로, 다른 기기에서 접속하면 초기화됩니다.
  4. 보안을 위해 중요한 정보는 이 방식으로 저장하지 마세요.

이 방법을 사용하면 GitHub를 통해 무료로 호스팅되는 인터랙티브한 체크리스트를 만들 수 있습니다. 사용자들은 체크박스를 클릭하여 진행 상황을 업데이트할 수 있고, 전체 진행률을 실시간으로 확인할 수 있습니다. 블로그에 임베드하면 독자들이 직접 체크리스트를 사용하며 콘텐츠와 상호작용할 수 있습니다.

Related Posts

로드 중…