From 5f997e750a25fa967efc8ce5b39d6f33288781b8 Mon Sep 17 00:00:00 2001 From: eunasin7 Date: Tue, 18 Aug 2026 13:16:56 +0900 Subject: [PATCH 1/2] =?UTF-8?q?docs:=20README.md=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 328 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 226 insertions(+), 102 deletions(-) diff --git a/README.md b/README.md index 4bd84b4..153fb85 100644 --- a/README.md +++ b/README.md @@ -1,144 +1,268 @@ -# HeartMark +
-사진, 감정, 장소를 함께 기록해 나만의 감정 지도를 만드는 위치 기반 기록 서비스입니다. +# 💗 HeartMark -현재 저장소에는 팀 개발을 위한 Django 기본 구조만 구성되어 있습니다. +**사진, 감정, 장소를 함께 기록해 나만의 감정 지도를 만드는 위치 기반 기록 서비스** -## 기술 스택 +[![Django](https://img.shields.io/badge/Django-5.2-092E20?style=flat-square&logo=django&logoColor=white)](https://www.djangoproject.com/) +[![Python](https://img.shields.io/badge/Python-3.11-3776AB?style=flat-square&logo=python&logoColor=white)](https://www.python.org/) +[![Kakao Maps](https://img.shields.io/badge/Kakao_Maps-API-FFCD00?style=flat-square&logo=kakao&logoColor=black)](https://apis.map.kakao.com/) +[![Deploy](https://img.shields.io/badge/Deploy-AWS_EC2-FF9900?style=flat-square&logo=amazonaws&logoColor=white)](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` | + +
+ +## 🛠️ 기술 스택 + + + + + + + +
Backend + +![Django](https://img.shields.io/badge/Django-5.2-092E20?style=flat-square&logo=django&logoColor=white) +![django--allauth](https://img.shields.io/badge/django--allauth-social_login-44B78B?style=flat-square) +![Gunicorn](https://img.shields.io/badge/Gunicorn-WSGI-499848?style=flat-square&logo=gunicorn&logoColor=white) + +
Frontend + +![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=html5&logoColor=white) +![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=css3&logoColor=white) +![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black) + +
Database + +![SQLite](https://img.shields.io/badge/SQLite-07405E?style=flat-square&logo=sqlite&logoColor=white) + +
Map / Auth + +![Kakao Maps](https://img.shields.io/badge/Kakao_Maps-FFCD00?style=flat-square&logo=kakao&logoColor=black) +![Google](https://img.shields.io/badge/Google_OAuth-4285F4?style=flat-square&logo=google&logoColor=white) +![Naver](https://img.shields.io/badge/Naver_OAuth-03C75A?style=flat-square&logo=naver&logoColor=white) +![Kakao](https://img.shields.io/badge/Kakao_OAuth-FFCD00?style=flat-square&logo=kakaotalk&logoColor=black) + +
Infra + +![AWS EC2](https://img.shields.io/badge/AWS_EC2-FF9900?style=flat-square&logo=amazonaws&logoColor=white) +![Nginx](https://img.shields.io/badge/Nginx-009639?style=flat-square&logo=nginx&logoColor=white) +![systemd](https://img.shields.io/badge/systemd-service-orange?style=flat-square) +![WhiteNoise](https://img.shields.io/badge/WhiteNoise-static_files-lightgrey?style=flat-square) + +
+ +
+ +## 🏗️ 아키텍처 + +```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"] +``` + +- EC2(Ubuntu)에서 `heartmark.service`(systemd)가 Gunicorn 프로세스를 상시 구동합니다. +- Nginx가 앞단에서 요청을 받아 정적/미디어 파일은 직접 서빙하고, 나머지는 Gunicorn으로 프록시합니다. +- 배포 설정 템플릿: [`deploy/README.md`](deploy/README.md) · [`deploy/heartmark.service`](deploy/heartmark.service) · [`deploy/nginx-heartmark.conf`](deploy/nginx-heartmark.conf) + +
+운영 서버 배포 절차 보기 ```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가 저장한 장소 좌표와 감정 정보를 지도 핀으로 표시 +
-### C — 서영은: 기록 작성 & 상세·수정·삭제 + + + + + + + + + + + + + + + + + + + + + + + + + +
서영은신은아한지수홍연우
@dahliare@seunnna7@1wltn@wepe37
PM · FE · BEFE · BEFE · BEFE · BE
-- 담당 앱: `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 -수정하여 사용함 +
From 50e98b193ab318576d3696ea855d8085bcd684c7 Mon Sep 17 00:00:00 2001 From: eunasin7 Date: Tue, 18 Aug 2026 13:19:57 +0900 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20README.md=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 153fb85..ccc1def 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@
-# 💗 HeartMark +# 💗 마음자국 **사진, 감정, 장소를 함께 기록해 나만의 감정 지도를 만드는 위치 기반 기록 서비스** @@ -110,9 +110,7 @@ flowchart LR Django -->|지도 API| KakaoMap["Kakao Maps"] ``` -- EC2(Ubuntu)에서 `heartmark.service`(systemd)가 Gunicorn 프로세스를 상시 구동합니다. -- Nginx가 앞단에서 요청을 받아 정적/미디어 파일은 직접 서빙하고, 나머지는 Gunicorn으로 프록시합니다. -- 배포 설정 템플릿: [`deploy/README.md`](deploy/README.md) · [`deploy/heartmark.service`](deploy/heartmark.service) · [`deploy/nginx-heartmark.conf`](deploy/nginx-heartmark.conf) +
운영 서버 배포 절차 보기