πŸ’ŒλΉ„λŒ€λ©΄, νŽΈμ§€λ‘œ λ”°λœ»ν•œ λ§ˆμŒμ„ λ‚˜λˆ„μ„Έμš”πŸ’Œ

μ†Œμ€‘ν•œ μ‚¬λžŒλ“€κ³Ό νŽΈμ§€λ₯Ό μ£Όκ³ λ°›μœΌλ©° κΈ°λ‘ν•˜λ©° κ³΅μœ ν•  수 μžˆλŠ” μ„œλΉ„μŠ€

www.letterman.life

letterman medium


Contents


Purpose

  1. μ˜¨λΌμΈμ—μ„œλ„ 기념일을 ν•¨κ»˜ν•˜κΈ° μœ„ν•΄ !
  2. ν˜Όμžμ—¬λ„ 외둭지 μ•Šμ€ 기념일을 보내기 μœ„ν•΄ !
  3. μ—¬λŸ¬μ‚¬λžŒλ“€μ„ μΆ•ν•˜ν•΄μ£Όκ³  μΆ•ν•˜λ°›κΈ° μœ„ν•΄ !

System Architecture


Tech Stack

Dev-Ops
Frontend
Backend
DB
Monitoring
Others

Features

  • νšŒμ›κ°€μž…


  • 둜그인


  • λ©”μΈνŽ˜μ΄μ§€

λ©”μΈνŽ˜μ΄μ§€μ—μ„œ 우츑 상단 κ³΅μœ λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ url이 λ³΅μ‚¬λ˜λŠ”λ° url을 νŽΈμ§€λ₯Ό λ°›κ³  싢은 μ‚¬λžŒμ—κ²Œ 전솑할 수 μžˆμŠ΅λ‹ˆλ‹€.
λ˜ν•œ 이 νŽ˜μ΄μ§€μ—μ„œ μ•„μ΄μ½˜μ„ ν΄λ¦­ν•˜λ©΄ 받은 νŽΈμ§€λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.
  • νŽΈμ§€λ₯Ό μž‘μ„±ν•˜λŠ” μ‚¬λžŒμ˜ λ©”μΈνŽ˜μ΄μ§€

이 νŽ˜μ΄μ§€μ—μ„œ μ•„μ΄μ½˜μ„ ν΄λ¦­ν•˜μ—¬ μ›ν•˜λŠ” μ΄λ²€νŠΈμ— νŽΈμ§€λ₯Ό μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

  • 마이 νŽ˜μ΄μ§€


  • νŽΈμ§€ μž‘μ„± νŽ˜μ΄μ§€


  • 디데이 νŽ˜μ΄μ§€

    νŽΈμ§€λ₯Ό λ³Ό 수 μžˆλŠ” λ‚ μ§œκ°€ 아닐 λ•Œ νŽΈμ§€λ₯Ό ν™•μΈν•˜λ©΄ λ‚˜νƒ€λ‚˜λŠ” νŽ˜μ΄μ§€ μž…λ‹ˆλ‹€.

  • νŽΈμ§€ 리슀트 νŽ˜μ΄μ§€


  • νŽΈμ§€ 캑쳐

    우츑 μƒλ‹¨μ˜ κ³΅μœ λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ μ›ν•˜λŠ” νŽΈμ§€λ₯Ό λ‹€μš΄λ°›μ„ 수 μžˆμŠ΅λ‹ˆλ‹€.


Installation

Clone Repository

git clone --recursive https://github.com/2022-SN-AI-Pre-Internship-Team-D/letterman.git

Run

docker-compose -f docker-compose.prod.yml up --build

Database


API

Swagger


File Directory

FRONTEND
letterman-front
┣ public
 ┣ images
 ┃ ┣ back1.png
 ┃ ┣ back2.png
 ┃ ┣ back3.png
 ┃ ┣ cookieimg.png
 ┃ ┣ halloweenimg.png
 ┃ ┣ letterimg.png
 ┃ ┣ newyearimg.png
 ┃ ┣ thankimg.png
 ┃ ┣ treeimg.png
 ┃ β”— valentineimg.png
 ┣ favicon.ico
 ┣ index.html
 ┣ logo192.png
 ┣ logo512.png
 ┣ manifest.json
 β”— robots.txt
┣ src
 ┣ components
 ┃ ┣ App
 ┃ ┃ β”— AuthRouter.tsx
 ┃ ┣ Audio
 ┃ ┃ β”— audioPlayer.jsx
 ┃ ┣ MailList
 ┃ ┃ ┣ EachMail.tsx
 ┃ ┃ ┣ MailInput.tsx
 ┃ ┃ β”— MoreButton.tsx
 ┃ ┣ RemainingDays
 ┃ ┃ ┣ EachCookie.tsx
 ┃ ┃ β”— FooterCookies.tsx
 ┃ ┣ MovePath.tsx
 ┃ ┣ RemainModal.tsx
 ┃ β”— ResultModal.tsx
 ┣ font
 ┃ β”— SeaweedScript.ttf
 ┣ images
 ┃ ┣ .DS_Store
 ┃ ┣ Enter.png
 ┃ ┣ back.png
 ┃ ┣ circlecheck.png
 ┃ ┣ cookieimg.png
 ┃ ┣ downloadAudio.png
 ┃ ┣ letterbg.png
 ┃ ┣ logo192.png
 ┃ ┣ mic.png
 ┃ ┣ pauseAudio.png
 ┃ ┣ pencilImage.svg
 ┃ ┣ playAudio.png
 ┃ ┣ plus.png
 ┃ ┣ postcard.png
 ┃ ┣ profile.png
 ┃ ┣ shareimg.png
 ┃ ┣ star.svg
 ┃ ┣ stopAudio.png
 ┃ ┣ urlshare.png
 ┃ β”— userprofile.png
 ┣ page
 ┃ ┣ .DS_Store
 ┃ ┣ BirthMailListPage.tsx
 ┃ ┣ LoginPage.tsx
 ┃ ┣ MailListPage.tsx
 ┃ ┣ MailWritePage.tsx
 ┃ ┣ MainPage.tsx
 ┃ ┣ MainPage2.tsx
 ┃ ┣ Mypage.tsx
 ┃ β”— SignupPage.tsx
 ┣ redux
 ┃ ┣ configStore.tsx
 ┃ β”— userID.tsx
 ┣ utils
 ┃ ┣ ColorSystem.tsx
 ┃ ┣ getUUID.tsx
 ┃ ┣ pageStyle.css
 ┃ ┣ tokenManager.tsx
 ┃ β”— useCopyClipBoard.tsx
 ┣ .DS_Store
 ┣ App.tsx
 ┣ image.d.ts
 ┣ index.tsx
 β”— tailwind.css
BACKEND
letterman-back
    β”œβ”€β”€ README.md
    β”œβ”€β”€ backend
    β”‚   β”œβ”€β”€ backend
    β”‚   β”‚   β”œβ”€β”€ __init__.py
    β”‚   β”‚   β”œβ”€β”€ __pycache__
    β”‚   β”‚   β”‚   β”œβ”€β”€ __init__.cpython-39.pyc
    β”‚   β”‚   β”‚   β”œβ”€β”€ settings.cpython-39.pyc
    β”‚   β”‚   β”‚   β”œβ”€β”€ urls.cpython-39.pyc
    β”‚   β”‚   β”‚   └── wsgi.cpython-39.pyc
    β”‚   β”‚   β”œβ”€β”€ asgi.py
    β”‚   β”‚   β”œβ”€β”€ settings.py
    β”‚   β”‚   β”œβ”€β”€ urls.py
    β”‚   β”‚   └── wsgi.py
    β”‚   β”œβ”€β”€ devenvs
    β”‚   β”‚   └── mysqldb.env
    β”‚   β”œβ”€β”€ dockerfile
    β”‚   β”œβ”€β”€ letters
    β”‚   β”‚   β”œβ”€β”€ __init__.py
    β”‚   β”‚   β”œβ”€β”€ __pycache__
    β”‚   β”‚   β”‚   β”œβ”€β”€ __init__.cpython-39.pyc
    β”‚   β”‚   β”‚   β”œβ”€β”€ admin.cpython-39.pyc
    β”‚   β”‚   β”‚   β”œβ”€β”€ apps.cpython-39.pyc
    β”‚   β”‚   β”‚   β”œβ”€β”€ models.cpython-39.pyc
    β”‚   β”‚   β”‚   β”œβ”€β”€ serializers.cpython-39.pyc
    β”‚   β”‚   β”‚   β”œβ”€β”€ urls.cpython-39.pyc
    β”‚   β”‚   β”‚   β”œβ”€β”€ utils.cpython-39.pyc
    β”‚   β”‚   β”‚   └── views.cpython-39.pyc
    β”‚   β”‚   β”œβ”€β”€ admin.py
    β”‚   β”‚   β”œβ”€β”€ apps.py
    β”‚   β”‚   β”œβ”€β”€ migrations
    β”‚   β”‚   β”‚   β”œβ”€β”€ 0001_initial.py
    β”‚   β”‚   β”‚   β”œβ”€β”€ 0002_initial.py
    β”‚   β”‚   β”‚   β”œβ”€β”€ 0003_alter_letter_anni_id.py
    β”‚   β”‚   β”‚   β”œβ”€β”€ 0004_alter_letter_anni_id.py
    β”‚   β”‚   β”‚   β”œβ”€β”€ __init__.py
    β”‚   β”‚   β”‚   └── __pycache__
    β”‚   β”‚   β”‚       β”œβ”€β”€ 0001_initial.cpython-39.pyc
    β”‚   β”‚   β”‚       β”œβ”€β”€ 0002_initial.cpython-39.pyc
    β”‚   β”‚   β”‚       β”œβ”€β”€ 0003_alter_letter_anni_id.cpython-39.pyc
    β”‚   β”‚   β”‚       β”œβ”€β”€ 0004_alter_letter_anni_id.cpython-39.pyc
    β”‚   β”‚   β”‚       └── __init__.cpython-39.pyc
    β”‚   β”‚   β”œβ”€β”€ models.py
    β”‚   β”‚   β”œβ”€β”€ serializers.py
    β”‚   β”‚   β”œβ”€β”€ tests.py
    β”‚   β”‚   β”œβ”€β”€ urls.py
    β”‚   β”‚   β”œβ”€β”€ utils.py
    β”‚   β”‚   └── views.py
    β”‚   β”œβ”€β”€ manage.py
    β”‚   β”œβ”€β”€ requirements.txt
    β”‚   └── users
    β”‚       β”œβ”€β”€ __init__.py
    β”‚       β”œβ”€β”€ __pycache__
    β”‚       β”‚   β”œβ”€β”€ __init__.cpython-39.pyc
    β”‚       β”‚   β”œβ”€β”€ admin.cpython-39.pyc
    β”‚       β”‚   β”œβ”€β”€ apps.cpython-39.pyc
    β”‚       β”‚   β”œβ”€β”€ models.cpython-39.pyc
    β”‚       β”‚   β”œβ”€β”€ serializers.cpython-39.pyc
    β”‚       β”‚   β”œβ”€β”€ urls.cpython-39.pyc
    β”‚       β”‚   └── views.cpython-39.pyc
    β”‚       β”œβ”€β”€ admin.py
    β”‚       β”œβ”€β”€ apps.py
    β”‚       β”œβ”€β”€ migrations
    β”‚       β”‚   β”œβ”€β”€ 0001_initial.py
    β”‚       β”‚   β”œβ”€β”€ __init__.py
    β”‚       β”‚   └── __pycache__
    β”‚       β”‚       β”œβ”€β”€ 0001_initial.cpython-39.pyc
    β”‚       β”‚       └── __init__.cpython-39.pyc
    β”‚       β”œβ”€β”€ models.py
    β”‚       β”œβ”€β”€ serializers.py
    β”‚       β”œβ”€β”€ tests.py
    β”‚       β”œβ”€β”€ urls.py
    β”‚       └── views.py
    └── docker-compose.yml

Monitoring Tools

  • prometheus & grafana

Demo

Letterman Demo


Team Member

사진
이름 μ–‘μ§€μœ€ κΉ€μœ λ¦Ό μ§„ν˜Έλ³‘ μ΄μˆ˜ν˜„ κΉ€μˆ˜λ―Ό κΉ€μœ λΌ
μ—­ν•  backend
devops
backend
devops
frontend
devops
frontend
devops
backend
devops
frontend
GitHub

Reference