[Python 100일 챌린지] Day 90 - 🎯 미니 프로젝트: 블로그 웹사이트

🎉 Phase 9의 마지막 날입니다!

지난 10일간 Flask로 웹 개발의 핵심을 모두 배웠습니다:

• Day 81: Flask 시작하기
• Day 82: 라우팅과 URL 처리
• Day 83: 템플릿 엔진 (Jinja2)
• Day 84: 폼 처리
• Day 85: 데이터베이스 연동
• Day 86: CRUD 애플리케이션
• Day 87: REST API
• Day 88: 사용자 인증
• Day 89: 배포 준비

오늘은 이 모든 것을 하나로 합칩니다!

완전한 기능을 가진 블로그 웹사이트를 만들어봅시다: ✅ 회원가입/로그인 ✅ 글 작성/수정/삭제 ✅ 댓글 시스템 ✅ 검색 기능 ✅ REST API ✅ 관리자 기능

실전에서 바로 사용할 수 있는 완성도 높은 프로젝트입니다! 💪

(60분 완독 ⭐⭐⭐⭐⭐)

🎯 프로젝트 개요

기능 명세

# 👤 사용자 기능
- 회원가입 (이메일 인증 제외)
- 로그인/로그아웃
- 프로필 수정
- 비밀번호 변경

# 📝 블로그 포스트
- 글 작성 (제목, 내용, 카테고리)
- 글 수정 (작성자만)
- 글 삭제 (작성자/관리자만)
- 글 목록 (페이지네이션)
- 글 상세 보기

# 💬 댓글
- 댓글 작성 (로그인 필요)
- 댓글 삭제 (작성자/관리자만)

# 🔍 검색
- 제목/내용으로 검색
- 카테고리별 필터링

# 🔧 관리자
- 모든 글/댓글 관리
- 사용자 관리

# 🌐 REST API
- GET /api/posts - 전체 글
- GET /api/posts/<id> - 특정 글
- POST /api/posts - 글 작성 (인증 필요)

프로젝트 구조

blog-website/
├── app.py                  # 메인 애플리케이션
├── config.py               # 설정 파일
├── init_db.py              # DB 초기화
├── models.py               # 데이터 모델 (선택)
├── requirements.txt        # 패키지 목록
├── .env                    # 환경 변수
├── database.db             # SQLite DB
├── templates/
│   ├── base.html           # 베이스 템플릿
│   ├── index.html          # 메인 페이지
│   ├── auth/
│   │   ├── register.html
│   │   └── login.html
│   ├── posts/
│   │   ├── list.html
│   │   ├── detail.html
│   │   ├── create.html
│   │   └── edit.html
│   └── user/
│       └── profile.html
└── static/
    ├── css/
    │   └── style.css
    └── js/
        └── main.js

---

📦 1단계: 프로젝트 초기 설정

1. 가상 환경 생성

# 프로젝트 폴더 생성
mkdir blog-website
cd blog-website

# 가상 환경 생성
python -m venv venv

# 활성화
# Windows
venv\Scripts\activate
# Mac/Linux
source venv/bin/activate

2. 패키지 설치

pip install flask python-dotenv bcrypt

requirements.txt:

Flask==3.0.0
python-dotenv==1.0.0
bcrypt==4.1.1

3. 환경 변수 설정

.env:

SECRET_KEY=your-secret-key-change-this-in-production
DATABASE_URI=sqlite:///database.db
DEBUG=True

4. 데이터베이스 스키마

init_db.py:

import sqlite3
import bcrypt

DATABASE = 'database.db'

def hash_password(password):
    return bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')

def init_database():
    """데이터베이스 초기화 및 테이블 생성"""
    conn = sqlite3.connect(DATABASE)
    cursor = conn.cursor()

    # 기존 테이블 삭제 (개발용)
    cursor.execute('DROP TABLE IF EXISTS comments')
    cursor.execute('DROP TABLE IF EXISTS posts')
    cursor.execute('DROP TABLE IF EXISTS users')

    # 사용자 테이블
    cursor.execute('''
        CREATE TABLE users (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            username TEXT UNIQUE NOT NULL,
            email TEXT UNIQUE NOT NULL,
            password_hash TEXT NOT NULL,
            role TEXT DEFAULT 'user',
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        )
    ''')

    # 포스트 테이블
    cursor.execute('''
        CREATE TABLE posts (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            title TEXT NOT NULL,
            content TEXT NOT NULL,
            category TEXT,
            author_id INTEGER NOT NULL,
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            FOREIGN KEY (author_id) REFERENCES users(id)
        )
    ''')

    # 댓글 테이블
    cursor.execute('''
        CREATE TABLE comments (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            post_id INTEGER NOT NULL,
            author_id INTEGER NOT NULL,
            content TEXT NOT NULL,
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
            FOREIGN KEY (post_id) REFERENCES posts(id),
            FOREIGN KEY (author_id) REFERENCES users(id)
        )
    ''')

    # 관리자 계정 생성
    admin_password = hash_password('admin123')
    cursor.execute('''
        INSERT INTO users (username, email, password_hash, role)
        VALUES (?, ?, ?, ?)
    ''', ('admin', '[email protected]', admin_password, 'admin'))

    # 샘플 사용자
    user_password = hash_password('user123')
    cursor.execute('''
        INSERT INTO users (username, email, password_hash)
        VALUES (?, ?, ?)
    ''', ('홍길동', '[email protected]', user_password))

    # 샘플 포스트
    cursor.execute('''
        INSERT INTO posts (title, content, category, author_id)
        VALUES (?, ?, ?, ?)
    ''', ('Flask 블로그 시작하기', 'Flask로 블로그를 만들어봅시다!', '기술', 1))

    cursor.execute('''
        INSERT INTO posts (title, content, category, author_id)
        VALUES (?, ?, ?, ?)
    ''', ('Python 100일 챌린지', '100일간의 Python 학습 여정', '일상', 2))

    # 샘플 댓글
    cursor.execute('''
        INSERT INTO comments (post_id, author_id, content)
        VALUES (?, ?, ?)
    ''', (1, 2, '좋은 글 감사합니다!'))

    conn.commit()
    conn.close()

    print("✅ 데이터베이스 초기화 완료!")
    print("📝 관리자: admin / admin123")
    print("👤 사용자: 홍길동 / user123")

if __name__ == '__main__':
    init_database()

실행:

python init_db.py

---

🔧 2단계: 핵심 기능 구현

app.py (메인 애플리케이션)

from flask import Flask, render_template, request, redirect, url_for, flash, session, jsonify
import sqlite3
import bcrypt
from datetime import datetime
from functools import wraps
import os
from dotenv import load_dotenv

# 환경 변수 로드
load_dotenv()

app = Flask(__name__)
app.secret_key = os.environ.get('SECRET_KEY', 'dev-secret-key')

DATABASE = 'database.db'

# ========== 데이터베이스 헬퍼 ==========
def get_db():
    db = sqlite3.connect(DATABASE)
    db.row_factory = sqlite3.Row
    return db

def hash_password(password):
    return bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')

def check_password(password, hashed):
    return bcrypt.checkpw(password.encode('utf-8'), hashed.encode('utf-8'))

# ========== 데코레이터 ==========
def login_required(f):
    @wraps(f)
    def decorated_function(*args, **kwargs):
        if 'user_id' not in session:
            flash('로그인이 필요합니다', 'error')
            return redirect(url_for('login'))
        return f(*args, **kwargs)
    return decorated_function

def admin_required(f):
    @wraps(f)
    def decorated_function(*args, **kwargs):
        if 'user_id' not in session:
            flash('로그인이 필요합니다', 'error')
            return redirect(url_for('login'))

        db = get_db()
        cursor = db.cursor()
        cursor.execute('SELECT role FROM users WHERE id = ?', (session['user_id'],))
        user = cursor.fetchone()
        db.close()

        if not user or user['role'] != 'admin':
            flash('관리자만 접근할 수 있습니다', 'error')
            return redirect(url_for('index'))

        return f(*args, **kwargs)
    return decorated_function

# ========== 메인 페이지 ==========
@app.route('/')
def index():
    db = get_db()
    cursor = db.cursor()

    # 최근 포스트
    cursor.execute('''
        SELECT posts.*, users.username
        FROM posts
        JOIN users ON posts.author_id = users.id
        ORDER BY posts.created_at DESC
        LIMIT 5
    ''')
    recent_posts = cursor.fetchall()

    # 통계
    cursor.execute('SELECT COUNT(*) as count FROM posts')
    total_posts = cursor.fetchone()['count']

    cursor.execute('SELECT COUNT(*) as count FROM users')
    total_users = cursor.fetchone()['count']

    db.close()

    return render_template('index.html',
                           recent_posts=recent_posts,
                           total_posts=total_posts,
                           total_users=total_users)

# ========== 인증 ==========
@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form.get('username', '').strip()
        email = request.form.get('email', '').strip()
        password = request.form.get('password')
        password_confirm = request.form.get('password_confirm')

        # 검증
        if not username or not email or not password:
            flash('모든 필드를 입력해주세요', 'error')
            return redirect(url_for('register'))

        if password != password_confirm:
            flash('비밀번호가 일치하지 않습니다', 'error')
            return redirect(url_for('register'))

        # 비밀번호 해싱
        password_hash = hash_password(password)

        db = get_db()
        cursor = db.cursor()

        try:
            cursor.execute('''
                INSERT INTO users (username, email, password_hash)
                VALUES (?, ?, ?)
            ''', (username, email, password_hash))
            db.commit()

            flash('회원가입 성공! 로그인해주세요', 'success')
            return redirect(url_for('login'))

        except sqlite3.IntegrityError:
            flash('이미 존재하는 아이디 또는 이메일입니다', 'error')

        finally:
            db.close()

    return render_template('auth/register.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')

        db = get_db()
        cursor = db.cursor()
        cursor.execute('SELECT * FROM users WHERE username = ?', (username,))
        user = cursor.fetchone()
        db.close()

        if user and check_password(password, user['password_hash']):
            session['user_id'] = user['id']
            session['username'] = user['username']
            session['role'] = user['role']

            flash(f'환영합니다, {username}님!', 'success')
            return redirect(url_for('index'))
        else:
            flash('아이디 또는 비밀번호가 틀렸습니다', 'error')

    return render_template('auth/login.html')

@app.route('/logout')
def logout():
    session.clear()
    flash('로그아웃 되었습니다', 'success')
    return redirect(url_for('index'))

# ========== 포스트 ==========
@app.route('/posts')
def posts_list():
    db = get_db()
    cursor = db.cursor()

    # 검색/필터
    search = request.args.get('search', '')
    category = request.args.get('category', '')

    query = '''
        SELECT posts.*, users.username
        FROM posts
        JOIN users ON posts.author_id = users.id
        WHERE 1=1
    '''
    params = []

    if search:
        query += ' AND (posts.title LIKE ? OR posts.content LIKE ?)'
        params.extend([f'%{search}%', f'%{search}%'])

    if category:
        query += ' AND posts.category = ?'
        params.append(category)

    query += ' ORDER BY posts.created_at DESC'

    cursor.execute(query, params)
    posts = cursor.fetchall()
    db.close()

    return render_template('posts/list.html', posts=posts, search=search, category=category)

@app.route('/posts/<int:post_id>')
def post_detail(post_id):
    db = get_db()
    cursor = db.cursor()

    # 포스트 조회
    cursor.execute('''
        SELECT posts.*, users.username
        FROM posts
        JOIN users ON posts.author_id = users.id
        WHERE posts.id = ?
    ''', (post_id,))
    post = cursor.fetchone()

    if not post:
        db.close()
        flash('포스트를 찾을 수 없습니다', 'error')
        return redirect(url_for('posts_list'))

    # 댓글 조회
    cursor.execute('''
        SELECT comments.*, users.username
        FROM comments
        JOIN users ON comments.author_id = users.id
        WHERE comments.post_id = ?
        ORDER BY comments.created_at DESC
    ''', (post_id,))
    comments = cursor.fetchall()

    db.close()

    return render_template('posts/detail.html', post=post, comments=comments)

@app.route('/posts/create', methods=['GET', 'POST'])
@login_required
def create_post():
    if request.method == 'POST':
        title = request.form.get('title', '').strip()
        content = request.form.get('content', '').strip()
        category = request.form.get('category', '').strip()

        if not title or not content:
            flash('제목과 내용을 입력해주세요', 'error')
            return redirect(url_for('create_post'))

        db = get_db()
        cursor = db.cursor()
        cursor.execute('''
            INSERT INTO posts (title, content, category, author_id)
            VALUES (?, ?, ?, ?)
        ''', (title, content, category, session['user_id']))
        db.commit()
        post_id = cursor.lastrowid
        db.close()

        flash('포스트가 작성되었습니다', 'success')
        return redirect(url_for('post_detail', post_id=post_id))

    return render_template('posts/create.html')

@app.route('/posts/<int:post_id>/edit', methods=['GET', 'POST'])
@login_required
def edit_post(post_id):
    db = get_db()
    cursor = db.cursor()

    # 권한 확인
    cursor.execute('SELECT * FROM posts WHERE id = ?', (post_id,))
    post = cursor.fetchone()

    if not post:
        db.close()
        flash('포스트를 찾을 수 없습니다', 'error')
        return redirect(url_for('posts_list'))

    if post['author_id'] != session['user_id'] and session.get('role') != 'admin':
        db.close()
        flash('수정 권한이 없습니다', 'error')
        return redirect(url_for('post_detail', post_id=post_id))

    if request.method == 'POST':
        title = request.form.get('title', '').strip()
        content = request.form.get('content', '').strip()
        category = request.form.get('category', '').strip()

        cursor.execute('''
            UPDATE posts
            SET title = ?, content = ?, category = ?, updated_at = CURRENT_TIMESTAMP
            WHERE id = ?
        ''', (title, content, category, post_id))
        db.commit()
        db.close()

        flash('포스트가 수정되었습니다', 'success')
        return redirect(url_for('post_detail', post_id=post_id))

    db.close()
    return render_template('posts/edit.html', post=post)

@app.route('/posts/<int:post_id>/delete', methods=['POST'])
@login_required
def delete_post(post_id):
    db = get_db()
    cursor = db.cursor()

    cursor.execute('SELECT * FROM posts WHERE id = ?', (post_id,))
    post = cursor.fetchone()

    if not post:
        db.close()
        flash('포스트를 찾을 수 없습니다', 'error')
        return redirect(url_for('posts_list'))

    if post['author_id'] != session['user_id'] and session.get('role') != 'admin':
        db.close()
        flash('삭제 권한이 없습니다', 'error')
        return redirect(url_for('post_detail', post_id=post_id))

    # 댓글도 함께 삭제
    cursor.execute('DELETE FROM comments WHERE post_id = ?', (post_id,))
    cursor.execute('DELETE FROM posts WHERE id = ?', (post_id,))
    db.commit()
    db.close()

    flash('포스트가 삭제되었습니다', 'success')
    return redirect(url_for('posts_list'))

# ========== 댓글 ==========
@app.route('/posts/<int:post_id>/comments', methods=['POST'])
@login_required
def add_comment(post_id):
    content = request.form.get('content', '').strip()

    if not content:
        flash('댓글 내용을 입력해주세요', 'error')
        return redirect(url_for('post_detail', post_id=post_id))

    db = get_db()
    cursor = db.cursor()
    cursor.execute('''
        INSERT INTO comments (post_id, author_id, content)
        VALUES (?, ?, ?)
    ''', (post_id, session['user_id'], content))
    db.commit()
    db.close()

    flash('댓글이 작성되었습니다', 'success')
    return redirect(url_for('post_detail', post_id=post_id))

@app.route('/comments/<int:comment_id>/delete', methods=['POST'])
@login_required
def delete_comment(comment_id):
    db = get_db()
    cursor = db.cursor()

    cursor.execute('SELECT * FROM comments WHERE id = ?', (comment_id,))
    comment = cursor.fetchone()

    if not comment:
        db.close()
        flash('댓글을 찾을 수 없습니다', 'error')
        return redirect(url_for('index'))

    if comment['author_id'] != session['user_id'] and session.get('role') != 'admin':
        db.close()
        flash('삭제 권한이 없습니다', 'error')
        return redirect(url_for('post_detail', post_id=comment['post_id']))

    post_id = comment['post_id']
    cursor.execute('DELETE FROM comments WHERE id = ?', (comment_id,))
    db.commit()
    db.close()

    flash('댓글이 삭제되었습니다', 'success')
    return redirect(url_for('post_detail', post_id=post_id))

# ========== REST API ==========
@app.route('/api/posts', methods=['GET'])
def api_get_posts():
    db = get_db()
    cursor = db.cursor()
    cursor.execute('''
        SELECT posts.*, users.username
        FROM posts
        JOIN users ON posts.author_id = users.id
        ORDER BY posts.created_at DESC
    ''')
    posts = cursor.fetchall()
    db.close()

    return jsonify({
        'count': len(posts),
        'posts': [dict(post) for post in posts]
    })

@app.route('/api/posts/<int:post_id>', methods=['GET'])
def api_get_post(post_id):
    db = get_db()
    cursor = db.cursor()
    cursor.execute('''
        SELECT posts.*, users.username
        FROM posts
        JOIN users ON posts.author_id = users.id
        WHERE posts.id = ?
    ''', (post_id,))
    post = cursor.fetchone()
    db.close()

    if not post:
        return jsonify({'error': 'Post not found'}), 404

    return jsonify(dict(post))

# ========== 에러 핸들러 ==========
@app.errorhandler(404)
def not_found(error):
    return render_template('errors/404.html'), 404

@app.errorhandler(500)
def internal_error(error):
    return render_template('errors/500.html'), 500

if __name__ == '__main__':
    app.run(debug=True)

---

🎨 3단계: 템플릿 작성

templates/base.html (베이스 템플릿)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}블로그{% endblock %}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* 헤더 */
        header { background: #2c3e50; color: white; padding: 1rem 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        header .container { display: flex; justify-content: space-between; align-items: center; }
        header h1 { font-size: 1.5rem; }
        header h1 a { color: white; text-decoration: none; }
        header nav a { color: white; margin-left: 1.5rem; text-decoration: none; transition: opacity 0.3s; }
        header nav a:hover { opacity: 0.8; }

        /* 메인 */
        main { padding: 2rem 0; min-height: calc(100vh - 200px); }

        /* 플래시 메시지 */
        .flash-messages { margin: 1rem 0; }
        .flash { padding: 1rem; margin-bottom: 1rem; border-radius: 5px; }
        .flash-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .flash-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

        /* 카드 */
        .card { background: white; border-radius: 10px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

        /* 버튼 */
        .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 5px; text-decoration: none; border: none; cursor: pointer; font-size: 1rem; transition: all 0.3s; }
        .btn-primary { background: #007bff; color: white; }
        .btn-primary:hover { background: #0056b3; }
        .btn-success { background: #28a745; color: white; }
        .btn-success:hover { background: #218838; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-danger:hover { background: #c82333; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn-secondary:hover { background: #5a6268; }

        /* 폼 */
        .form-group { margin-bottom: 1.5rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; }
        .form-group textarea { resize: vertical; min-height: 150px; }

        /* 푸터 */
        footer { background: #2c3e50; color: white; text-align: center; padding: 2rem 0; margin-top: 3rem; }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1><a href="{{ url_for('index') }}">📝 My Blog</a></h1>
            <nav>
                <a href="{{ url_for('index') }}">홈</a>
                <a href="{{ url_for('posts_list') }}">글 목록</a>
                {% if session.user_id %}
                    <a href="{{ url_for('create_post') }}">글 쓰기</a>
                    <a href="{{ url_for('logout') }}">로그아웃 ({{ session.username }})</a>
                {% else %}
                    <a href="{{ url_for('login') }}">로그인</a>
                    <a href="{{ url_for('register') }}">회원가입</a>
                {% endif %}
            </nav>
        </div>
    </header>

    <main>
        <div class="container">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    <div class="flash-messages">
                        {% for category, message in messages %}
                            <div class="flash flash-{{ category }}">{{ message }}</div>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endwith %}

            {% block content %}{% endblock %}
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 My Blog. Made with Flask ❤️</p>
            <p><a href="/api/posts" style="color: white;">API 문서</a></p>
        </div>
    </footer>
</body>
</html>

templates/index.html (메인 페이지)

{% extends "base.html" %}

{% block content %}
<div class="card" style="text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
    <h1 style="font-size: 2.5rem; margin-bottom: 1rem;">✨ 환영합니다!</h1>
    <p style="font-size: 1.2rem;">Flask로 만든 블로그에 오신 것을 환영합니다</p>

    <div style="display: flex; gap: 2rem; justify-content: center; margin-top: 2rem;">
        <div>
            <h2 style="font-size: 2rem;">{{ total_posts }}</h2>
            <p>총 포스트</p>
        </div>
        <div>
            <h2 style="font-size: 2rem;">{{ total_users }}</h2>
            <p>총 사용자</p>
        </div>
    </div>
</div>

<h2 style="margin-bottom: 1.5rem;">📌 최근 포스트</h2>

{% for post in recent_posts %}
    <div class="card">
        <h3 style="margin-bottom: 0.5rem;">
            <a href="{{ url_for('post_detail', post_id=post['id']) }}" style="color: #333; text-decoration: none;">
                {{ post['title'] }}
            </a>
        </h3>
        <p style="color: #666; font-size: 0.9rem; margin-bottom: 1rem;">
            {{ post['username'] }} · {{ post['created_at'] }}
            {% if post['category'] %}
                · 🏷️ {{ post['category'] }}
            {% endif %}
        </p>
        <p style="color: #555;">{{ post['content'][:200] }}{% if post['content']|length > 200 %}...{% endif %}</p>
        <a href="{{ url_for('post_detail', post_id=post['id']) }}" class="btn btn-primary" style="margin-top: 1rem;">읽기 →</a>
    </div>
{% else %}
    <div class="card" style="text-align: center; color: #999;">
        <p>아직 포스트가 없습니다. 첫 번째 글을 작성해보세요!</p>
        {% if session.user_id %}
            <a href="{{ url_for('create_post') }}" class="btn btn-primary" style="margin-top: 1rem;">글 쓰기</a>
        {% endif %}
    </div>
{% endfor %}
{% endblock %}

templates/posts/list.html (포스트 목록)

{% extends "base.html" %}

{% block title %}글 목록 - 블로그{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h2>📚 전체 포스트 ({{ posts|length }}개)</h2>
    {% if session.user_id %}
        <a href="{{ url_for('create_post') }}" class="btn btn-primary">✏️ 새 글 쓰기</a>
    {% endif %}
</div>

<!-- 검색 폼 -->
<div class="card">
    <form method="GET" style="display: flex; gap: 1rem;">
        <input type="text" name="search" placeholder="제목 또는 내용 검색" value="{{ search }}" style="flex: 2; padding: 0.75rem; border: 1px solid #ddd; border-radius: 5px;">
        <select name="category" style="flex: 1; padding: 0.75rem; border: 1px solid #ddd; border-radius: 5px;">
            <option value="">모든 카테고리</option>
            <option value="기술" {% if category == '기술' %}selected{% endif %}>기술</option>
            <option value="일상" {% if category == '일상' %}selected{% endif %}>일상</option>
            <option value="리뷰" {% if category == '리뷰' %}selected{% endif %}>리뷰</option>
        </select>
        <button type="submit" class="btn btn-primary">🔍 검색</button>
    </form>
</div>

<!-- 포스트 목록 -->
{% for post in posts %}
    <div class="card">
        <h3 style="margin-bottom: 0.5rem;">
            <a href="{{ url_for('post_detail', post_id=post['id']) }}" style="color: #333; text-decoration: none;">
                {{ post['title'] }}
            </a>
        </h3>
        <p style="color: #666; font-size: 0.9rem; margin-bottom: 1rem;">
            👤 {{ post['username'] }} · 📅 {{ post['created_at'] }}
            {% if post['category'] %}· 🏷️ {{ post['category'] }}{% endif %}
        </p>
        <p style="color: #555;">{{ post['content'][:300] }}{% if post['content']|length > 300 %}...{% endif %}</p>
        <a href="{{ url_for('post_detail', post_id=post['id']) }}" class="btn btn-primary" style="margin-top: 1rem;">자세히 보기 →</a>
    </div>
{% else %}
    <div class="card" style="text-align: center; color: #999;">
        <h3>검색 결과가 없습니다</h3>
        <p>다른 키워드로 검색해보세요</p>
    </div>
{% endfor %}
{% endblock %}

templates/posts/detail.html (포스트 상세)

{% extends "base.html" %}

{% block title %}{{ post['title'] }} - 블로그{% endblock %}

{% block content %}
<div class="card">
    <h1 style="margin-bottom: 1rem;">{{ post['title'] }}</h1>
    <p style="color: #666; margin-bottom: 2rem;">
        👤 {{ post['username'] }} · 📅 {{ post['created_at'] }}
        {% if post['category'] %}· 🏷️ {{ post['category'] }}{% endif %}
    </p>

    <div style="line-height: 1.8; white-space: pre-wrap;">{{ post['content'] }}</div>

    {% if session.user_id and (session.user_id == post['author_id'] or session.role == 'admin') %}
        <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #ddd; display: flex; gap: 1rem;">
            <a href="{{ url_for('edit_post', post_id=post['id']) }}" class="btn btn-secondary">✏️ 수정</a>
            <form method="POST" action="{{ url_for('delete_post', post_id=post['id']) }}" style="display: inline;">
                <button type="submit" class="btn btn-danger" onclick="return confirm('정말 삭제하시겠습니까?')">🗑️ 삭제</button>
            </form>
        </div>
    {% endif %}
</div>

<!-- 댓글 섹션 -->
<div class="card">
    <h2 style="margin-bottom: 1.5rem;">💬 댓글 ({{ comments|length }}개)</h2>

    {% if session.user_id %}
        <form method="POST" action="{{ url_for('add_comment', post_id=post['id']) }}" style="margin-bottom: 2rem;">
            <div class="form-group">
                <textarea name="content" placeholder="댓글을 입력하세요" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">댓글 작성</button>
        </form>
    {% else %}
        <p style="text-align: center; color: #999; padding: 2rem; background: #f8f9fa; border-radius: 5px;">
            댓글을 작성하려면 <a href="{{ url_for('login') }}">로그인</a>해주세요
        </p>
    {% endif %}

    {% for comment in comments %}
        <div style="border-left: 3px solid #007bff; padding-left: 1rem; margin-bottom: 1.5rem;">
            <p style="font-weight: bold; margin-bottom: 0.5rem;">
                {{ comment['username'] }}
                <span style="font-weight: normal; color: #666; font-size: 0.9rem;">· {{ comment['created_at'] }}</span>
            </p>
            <p style="white-space: pre-wrap;">{{ comment['content'] }}</p>
            {% if session.user_id and (session.user_id == comment['author_id'] or session.role == 'admin') %}
                <form method="POST" action="{{ url_for('delete_comment', comment_id=comment['id']) }}" style="margin-top: 0.5rem;">
                    <button type="submit" class="btn btn-danger" style="font-size: 0.9rem; padding: 0.4rem 1rem;" onclick="return confirm('댓글을 삭제하시겠습니까?')">삭제</button>
                </form>
            {% endif %}
        </div>
    {% else %}
        <p style="text-align: center; color: #999;">아직 댓글이 없습니다</p>
    {% endfor %}
</div>

<a href="{{ url_for('posts_list') }}" class="btn btn-secondary">← 목록으로</a>
{% endblock %}

---

🎉 완성!

실행하기

# 데이터베이스 초기화
python init_db.py

# 서버 실행
python app.py

# 브라우저에서 접속
# http://localhost:5000

테스트 계정

관리자:
- 아이디: admin
- 비밀번호: admin123

일반 사용자:
- 아이디: 홍길동
- 비밀번호: user123

---

📝 마무리

Phase 9에서 배운 것들

✅ Day 81: Flask 기초
✅ Day 82: 라우팅
✅ Day 83: 템플릿
✅ Day 84: 폼 처리
✅ Day 85: 데이터베이스
✅ Day 86: CRUD
✅ Day 87: REST API
✅ Day 88: 사용자 인증
✅ Day 89: 배포 준비
✅ Day 90: 종합 프로젝트

다음 단계

# 프로젝트 개선 아이디어:

1. 파일 업로드 (이미지 첨부)
2. 페이지네이션 (한 페이지에 10개씩)
3. 좋아요 기능
4. 태그 시스템
5. 이메일 인증
6. 소셜 로그인 (Google, GitHub)
7. 마크다운 지원
8. 검색 고도화
9. 알림 시스템
10. 실시간 채팅

---

🏆 축하합니다!

Phase 9: 웹 개발 입문을 완료했습니다!

10일 동안 Flask로 완전한 웹 애플리케이션을 만드는 방법을 배웠습니다. 이제 여러분은 자신만의 웹사이트를 만들 수 있습니다!

다음 Phase에서 뵙겠습니다! 🚀

---

“완성된 프로젝트는 시작의 끝이자, 새로운 시작의 시작입니다!” 🎯

Day 90/100

Phase 9: 웹 개발 입문 완료!

#100DaysOfPython