-사진, 감정, 장소를 함께 기록해 나만의 감정 지도를 만드는 위치 기반 기록 서비스입니다.
+# 💗 마음자국
-현재 저장소에는 팀 개발을 위한 Django 기본 구조만 구성되어 있습니다.
+**사진, 감정, 장소를 함께 기록해 나만의 감정 지도를 만드는 위치 기반 기록 서비스**
-## 기술 스택
+[](https://www.djangoproject.com/)
+[](https://www.python.org/)
+[](https://apis.map.kakao.com/)
+[](deploy/README.md)
-- Backend: Django
-- Frontend: HTML, CSS, JavaScript
-- Database: SQLite (개발 환경)
-- Map: Kakao Maps 또는 Google Maps 연동 예정
+[서비스 바로가기](https://heartmark.duckdns.org/) · [팀원](#팀원) · [문서](#문서)
-## 실행 방법
+
+
+
+
+>
+> 배포 주소 : https://heartmark.duckdns.org/
+
+
+## ✨ 소개
+
+**마음자국**은 하루하루의 순간을 **사진 · 감정 · 장소** 세 가지 축으로 기록하는 위치 기반 다이어리 서비스입니다.
+지도 위에 남긴 기록은 나만의 감정 지도가 되고, 원하는 기록만 골라 친구에게 마음 편지처럼 전할 수 있습니다.
+
+
+
+## 📑 목차
+
+- [🌟 주요 기능](#주요-기능)
+- [🛠️ 기술 스택](#기술-스택)
+- [🏗️ 아키텍처](#아키텍처)
+- [🚀 시작하기](#시작하기)
+- [🔐 환경 변수](#환경-변수)
+- [📁 프로젝트 구조](#프로젝트-구조)
+- [👥 팀원](#팀원)
+- [📚 문서](#문서)
+- [📎 출처](#출처)
+
+
+
+## 🌟 주요 기능
+
+| 기능 | 설명 | 담당 앱 |
+|---|---|---|
+| 감정 기록 | 사진과 함께 장소·감정을 기록하고 상세 조회·수정·삭제 | `records` |
+| 지도 탐색 | Kakao Maps 기반 장소 검색 및 지도 위 기록 확인 | `locations` |
+| 다이어리 · 캘린더 | 월별 캘린더와 목록으로 내 기록 모아보기 | `diary` |
+| 배경음악 | 기록마다 분위기에 맞는 BGM 연결 | `bgm` |
+| 친구 | 초대 링크로 친구 추가, 요청 수락/거절, 친구 목록 관리 | `friendships` |
+| 마음 편지 | 친구에게 기록 공유, 장소 공개 여부 선택, 공유 기록에 댓글 | `record_sharing` |
+| 소셜 허브 | 친구 관리, 공유받은 기록, 보낸 기록을 한 곳에서 확인 | `social_hub` |
+| 계정 | 이메일 가입/로그인, Google · Naver · Kakao 소셜 로그인, 캐릭터 온보딩, 탈퇴 | `accounts` |
+| 마이페이지 | 프로필 확인 및 관리 | `mypage` |
+
+
+
+## 🛠️ 기술 스택
+
+
+
+
+
+## 🏗️ 아키텍처
+
+```mermaid
+flowchart LR
+ User(["사용자"]) -->|HTTPS| Nginx["Nginx\n(리버스 프록시 · 정적/미디어 서빙)"]
+ Nginx -->|proxy_pass| Gunicorn["Gunicorn\n(WSGI, systemd 관리)"]
+ Gunicorn --> Django["Django App\n(HeartMark)"]
+ Django --> DB[("SQLite")]
+ Django -->|OAuth| Social["Google · Naver · Kakao"]
+ Django -->|지도 API| KakaoMap["Kakao Maps"]
+```
+
+
+
+
+운영 서버 배포 절차 보기
```bash
-python -m venv .venv
+source venv/bin/activate
+python manage.py migrate
+python manage.py collectstatic --noinput
+python manage.py check --deploy
+sudo systemctl restart heartmark
```
-Windows:
+
+
+
+
+## 🚀 시작하기
+
+### 요구 사항
+
+- Python 3.11+
+- pip, venv
+
+### 설치 및 실행
```bash
-.venv\Scripts\activate
+# 1. 가상환경 생성 및 활성화
+python -m venv .venv
+.venv\Scripts\activate # Windows
+# source .venv/bin/activate # macOS / Linux
+
+# 2. 의존성 설치
pip install -r requirements.txt
+
+# 3. 환경 변수 설정
+copy .env.example .env # Windows
+# cp .env.example .env # macOS / Linux
+# .env 파일을 열어 값 채우기
+
+# 4. 마이그레이션 및 서버 실행
python manage.py migrate
python manage.py runserver
```
서버 실행 후 `http://127.0.0.1:8000/`으로 접속합니다.
-## 프로젝트 구조
+
+
+## 🔐 환경 변수
+
+`.env.example`을 복사해 `.env`를 만들고 아래 값을 채웁니다.
+
+| 변수 | 설명 |
+|---|---|
+| `SITE_DOMAIN` | 서비스 도메인 (로컬은 `127.0.0.1:8000`) |
+| `SITE_NAME` | 사이트 표시 이름 |
+| `DJANGO_DEBUG` | 디버그 모드 (운영 환경에서는 반드시 `False`) |
+| `DJANGO_SECRET_KEY` | Django 시크릿 키 |
+| `DJANGO_ALLOWED_HOSTS` | 허용 호스트 목록 (콤마 구분) |
+| `DJANGO_CSRF_TRUSTED_ORIGINS` | CSRF 신뢰 오리진 (운영 도메인 등록) |
+| `DJANGO_SECURE_COOKIES` | HTTPS 환경 여부에 따른 쿠키 보안 설정 |
+| `GOOGLE_CLIENT_ID` / `GOOGLE_CLIENT_SECRET` | Google 소셜 로그인 키 |
+| `NAVER_CLIENT_ID` / `NAVER_CLIENT_SECRET` | Naver 소셜 로그인 키 |
+| `KAKAO_CLIENT_ID` / `KAKAO_CLIENT_SECRET` | Kakao 소셜 로그인 키 |
+| `KAKAO_REST_KEY` | Kakao REST API 키 (서버용) |
+| `KAKAO_JS_KEY` | Kakao Maps JavaScript 키 (클라이언트용) |
+
+
+
+## 📁 프로젝트 구조
```text
HeartMark/
-├── config/ # Django 프로젝트 설정
-│ ├── settings.py
-│ ├── urls.py
-│ ├── asgi.py
-│ └── wsgi.py
-│
-├── common/ # 통합 담당자: 공통 메인 및 공유 기능
-├── accounts/ # A: 회원, 인증, 캐릭터, 온보딩
-│ └── templates/accounts/
-├── locations/ # B: 지도 및 장소 탐색
-│ └── templates/locations/
-├── records/ # C: 기록 작성, 상세, 수정, 삭제
-│ └── templates/records/
-├── diary/ # D: 다이어리 목록 및 캘린더 조회
-│ └── templates/diary/
-│
-├── templates/
-│ ├── base.html # 전체 페이지 공통 레이아웃
-│ └── includes/
-│ ├── header.html
-│ └── bottom_nav.html
-│
+├── config/ # Django 프로젝트 설정
+├── common/ # 공통 기능
+├── accounts/ # 회원 · 인증 · 소셜 로그인 · 캐릭터 · 온보딩
+├── mypage/ # 마이페이지
+├── locations/ # 지도 및 장소 탐색
+├── records/ # 기록 작성 · 상세 · 수정 · 삭제
+├── diary/ # 다이어리 목록 및 캘린더 조회
+├── bgm/ # 기록별 배경음악
+├── friendships/ # 친구 초대 · 요청 · 목록
+├── record_sharing/ # 기록 공유(마음 편지) · 댓글
+├── social_hub/ # 친구 / 공유 기록 통합 화면
+├── deploy/ # EC2 배포 템플릿 (systemd, nginx)
+├── docs/ # 팀 협업 문서
+├── templates/ # 공통 레이아웃
├── manage.py
└── requirements.txt
```
-각 앱의 정적 파일은 충돌 방지를 위해
-`/static//css/`, `/static//js/`에 둡니다.
-
-## 역할 분담
-
-### A — 홍연우: 회원/인증 & 캐릭터·온보딩
+각 앱의 정적 파일은 `/static//css/`, `/static//js/`에 둡니다.
-- 담당 앱: `accounts`
-- 담당 화면: 로그인, 회원가입, 캐릭터 선택, 온보딩
-- 주요 모델 예정: `User`, `Character`
-- 협업: B, C, D 파트에서 공통으로 사용할 인증 구조 공유
+
-### B — 신은아: 지도 & 장소 탐색
+## 👥 팀원
-- 담당 앱: `locations`
-- 담당 화면: 메인 지도, 장소 검색, 장소 선택
-- 주요 모델 예정: `Place`
-- 협업: C가 저장한 장소 좌표와 감정 정보를 지도 핀으로 표시
+
-- 담당 앱: `records`
-- 담당 화면: 기록 작성 모달, 기록 상세, 기록 수정, 기록 삭제
-- 주요 모델 예정: `Record`
-- UI 방향: 회색 오버레이 위에 기록 작성 팝업 표시
-- 협업: B의 장소 선택 결과를 전달받아 기록에 저장
-- 협업: D의 캘린더와 목록에서 기록을 선택하면 C의 상세 화면으로 이동
+
-### D — 한지수: 다이어리 & 캘린더 조회
-- 담당 앱: `diary`
-- 담당 화면: 캘린더, 다이어리 목록
-- 협업: C가 정의한 `Record` 모델과 JSON 응답 형식을 기준으로 조회하고,
- 기록 선택 시 `records` 앱의 상세 페이지로 연결
-## 공통 개발 규칙
+
-- 공통 레이아웃은 `templates/base.html`을 상속합니다.
-- 각 담당자는 원칙적으로 자기 앱 폴더 안의 파일만 수정합니다.
-- 메인 화면 조각은 각 앱의 `templates//partials/`에 작성합니다.
-- 공용 파일은 지정된 통합 담당자 한 명만 수정합니다.
-- CSS와 JavaScript는 각 앱의 `static//` 아래에 작성합니다.
-- 앱별 URL에는 `app_name`을 사용합니다.
-- 모델 구조와 API 응답 형식은 구현 전에 팀 전체가 먼저 합의합니다.
-- 비밀키와 외부 API 키는 Git에 올리지 않습니다.
+## 📚 문서
-자세한 충돌 방지 및 통합 규칙은
-[`docs/INTEGRATION.md`](docs/INTEGRATION.md)를 확인합니다.
+| 문서 | 내용 |
+|---|---|
+| [`docs/INTEGRATION.md`](docs/INTEGRATION.md) | 개발 협업 규칙 |
+| [`friendships/README.md`](friendships/README.md) | 친구 기능 백엔드 가이드 |
+| [`deploy/README.md`](deploy/README.md) | 배포 가이드 |
-## 템플릿 사용 예시
+
-```django
-{% extends "base.html" %}
-{% load static %}
+## 📎 출처
-{% block title %}페이지 제목 | HeartMark{% endblock %}
+- 서울 자치구 지도: Kurykh, Wikimedia Commons, CC BY-SA 3.0 — 수정하여 사용함
-{% block extra_css %}
-
-{% endblock %}
-
-{% block content %}
-
-{% endblock %}
-
-{% block extra_js %}
-
-{% endblock %}
-```
+
-## 현재 상태
+
-- [x] Django 프로젝트 기본 구조
-- [x] 기능 도메인별 앱 분리
-- [x] 공통 `base.html` 및 include 구조
-- [x] 파트별 HTML, CSS, JavaScript 파일 분리
-- [ ] DB 모델 및 ERD 설계
-- [ ] 화면 디자인 및 기능 구현
-- [ ] API 연동
-- [ ] 테스트 및 배포
+Made by **Team HeartMark**
-## 출처
-- 서울 자치구 지도: Kurykh, Wikimedia Commons, CC BY-SA 3.0
-수정하여 사용함
+
