📒 Medium
- 온보딩 페이지
- 캔버스 생성하기
- 배경사진 직접 업로드
- AI배경 생성하기
- AI스티커 생성하기
- 동시편집 기능
| Frontend | Backend | DB | Devops | Monitoring | Etc |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
 |
 |
 |
|||
 |
 |
 |
|||
 |
Clone Repository
git clone https://github.com/SV-Winter-BootCamp-TeamD/backend.git
frontend/.env
VITE_BASE_URL =
VITE_SOCKET_URL = backend/.env
SECRET_KEY=
DATABASE_NAME=
DATABASE_USERNAME=
DATABASE_PASSWORD=
DATABASE_HOST=
DATABASE_PORT=
MYSQL_ROOT_PASSWORD=
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_STORAGE_BUCKET_NAME=
AWS_S3_REGION_NAME=
OPENAI_API_KEY=
PIXABAY_API_KEY=Run Docker
docker compose -f docker.compose.prod.yml up --build
frontend
frontend/
├── Dockerfile
├── README.md
├── docker-compose.yml
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── animations
│ │ └── json
│ │ ├── data.json
│ │ └── webSocket.json
│ └── images
│ ├── png
│ │ ├── mm1.png
│ │ ├── mm2.png
│ │ ├── startImage.png
│ │ └── websocketImage.png
│ └── svg
│ ├── aiImage.svg
│ ├── aibackground.svg
│ ├── aisticker.svg
│ ├── avator.svg
│ ├── backarrow.svg
│ ├── background.svg
│ ├── backgroundupload.svg
│ ├── brush.svg
│ ├── download.svg
│ ├── examples
│ │ ├── example01.svg
│ │ ├── example02.svg
│ │ ├── example03.svg
│ │ ├── example04.svg
│ │ ├── example05.svg
│ │ ├── example06.svg
│ │ ├── example07.svg
│ │ ├── example08.svg
│ │ ├── example09.svg
│ │ ├── example10.svg
│ │ ├── example11.svg
│ │ ├── example12.svg
│ │ ├── example13.svg
│ │ ├── example14.svg
│ │ ├── example15.svg
│ │ ├── example16.svg
│ │ ├── example17.svg
│ │ ├── example18.svg
│ │ ├── example19.svg
│ │ ├── example20.svg
│ │ ├── example21.svg
│ │ ├── example22.svg
│ │ ├── example23.svg
│ │ ├── example24.svg
│ │ ├── example25.svg
│ │ ├── example26.svg
│ │ ├── example27.svg
│ │ ├── example28.svg
│ │ ├── example29.svg
│ │ └── example30.svg
│ ├── exit.svg
│ ├── favicon.svg
│ ├── frontarrow.svg
│ ├── hamburger.svg
│ ├── history.svg
│ ├── home.svg
│ ├── info.svg
│ ├── invite.svg
│ ├── mycanvas.svg
│ ├── object.svg
│ ├── onBoarding1.svg
│ ├── onBoarding2.svg
│ ├── palette.svg
│ ├── plus.svg
│ ├── recommendbackground.svg
│ ├── startImage.svg
│ ├── text.svg
│ ├── trashcan.svg
│ ├── upload.svg
│ ├── webSocketImage.svg
│ ├── x.svg
│ └── 무제-1.svg
├── src
│ ├── App.tsx
│ ├── animations
│ │ └── json
│ │ ├── startImage.json
│ │ └── webSocket.json
│ ├── api
│ │ └── api.ts
│ ├── components
│ │ ├── CanvasPage
│ │ │ ├── AIBackground
│ │ │ │ ├── AIBackground.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── AIBackgroundGenerator
│ │ │ │ ├── AIBackgroundGenerator.tsx
│ │ │ │ ├── Color.tsx
│ │ │ │ ├── Input.tsx
│ │ │ │ ├── Theme.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── AIBackgroundLoading
│ │ │ │ ├── AIBackgroundLoading.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── AISticker
│ │ │ │ ├── AISticker.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── AIStickerGenerator
│ │ │ │ ├── AIStickerGenerator.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── AIStickerLoading
│ │ │ │ ├── AIStickerLoading.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Canvas
│ │ │ │ ├── Canvas.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── History
│ │ │ │ ├── History.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── Invite
│ │ │ │ ├── Input.tsx
│ │ │ │ ├── Invite.tsx
│ │ │ │ ├── MemberList.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── MenuBar
│ │ │ │ ├── Button.tsx
│ │ │ │ ├── MenuBar.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── MenuSection
│ │ │ │ ├── MenuSection.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── MyCanvas
│ │ │ │ ├── MyCanvas.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── NavBar
│ │ │ │ ├── NavBar.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── RecommendBackground
│ │ │ │ ├── RecommendBackground.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── RecommendBackgroundLoading
│ │ │ │ ├── RecommendBackgroundLoading.tsx
│ │ │ │ └── index.tsx
│ │ │ └── UploadBackground
│ │ │ ├── UploadBackground.tsx
│ │ │ ├── UploadButton.tsx
│ │ │ └── index.tsx
│ │ ├── GenearateButton
│ │ │ ├── GenerateButton.tsx
│ │ │ └── index.tsx
│ │ ├── General
│ │ │ └── ReGenerateButton
│ │ │ ├── ReGenerateButton.tsx
│ │ │ └── index.tsx
│ │ ├── MainPage
│ │ │ └── CanvasPreview
│ │ │ ├── CanvasPreview.tsx
│ │ │ └── index.tsx
│ │ ├── OnBoarding
│ │ │ ├── Desk.gltf
│ │ │ ├── ImageSlider.tsx
│ │ │ ├── OnBoardingTemplate.tsx
│ │ │ ├── PathDrawing.tsx
│ │ │ ├── ThreeTest.tsx
│ │ │ ├── background2.png
│ │ │ └── index.tsx
│ │ └── SignupPage
│ │ └── img
│ │ └── background.png
│ ├── index.css
│ ├── main.tsx
│ ├── pages
│ │ ├── CanvasPage.tsx
│ │ ├── LoginPage.tsx
│ │ ├── MainPage.tsx
│ │ ├── OnBoardingPage.tsx
│ │ ├── SideBar.tsx
│ │ └── SignUpPage.tsx
│ ├── type.ts
│ └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
backend
backend
├── Dockerfile
├── README.md
├── alertmanager
│ └── config.yml
├── backend
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-310.pyc
│ │ ├── __init__.cpython-311.pyc
│ │ ├── asgi.cpython-310.pyc
│ │ ├── asgi.cpython-311.pyc
│ │ ├── celery.cpython-310.pyc
│ │ ├── celery.cpython-311.pyc
│ │ ├── settings.cpython-310.pyc
│ │ ├── settings.cpython-311.pyc
│ │ ├── urls.cpython-310.pyc
│ │ ├── urls.cpython-311.pyc
│ │ └── wsgi.cpython-310.pyc
│ ├── asgi.py
│ ├── celery.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── canvas
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-310.pyc
│ │ ├── __init__.cpython-311.pyc
│ │ ├── apps.cpython-310.pyc
│ │ ├── apps.cpython-311.pyc
│ │ ├── consumers.cpython-310.pyc
│ │ ├── consumers.cpython-311.pyc
│ │ ├── models.cpython-310.pyc
│ │ ├── models.cpython-311.pyc
│ │ ├── routing.cpython-310.pyc
│ │ ├── routing.cpython-311.pyc
│ │ ├── serializers.cpython-310.pyc
│ │ ├── serializers.cpython-311.pyc
│ │ ├── tests.cpython-310.pyc
│ │ ├── tests.cpython-311.pyc
│ │ ├── urls.cpython-310.pyc
│ │ ├── urls.cpython-311.pyc
│ │ ├── views.cpython-310.pyc
│ │ └── views.cpython-311.pyc
│ ├── apps.py
│ ├── consumers.py
│ ├── models.py
│ ├── routing.py
│ ├── serializers.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── component
│ ├── AI_utils.py
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── AI_utils.cpython-310.pyc
│ │ ├── AI_utils.cpython-311.pyc
│ │ ├── __init__.cpython-310.pyc
│ │ ├── __init__.cpython-311.pyc
│ │ ├── apps.cpython-310.pyc
│ │ ├── apps.cpython-311.pyc
│ │ ├── models.cpython-310.pyc
│ │ ├── models.cpython-311.pyc
│ │ ├── nukki.cpython-310.pyc
│ │ ├── nukki.cpython-311.pyc
│ │ ├── recommend.cpython-310.pyc
│ │ ├── recommend.cpython-311.pyc
│ │ ├── s3_utils.cpython-310.pyc
│ │ ├── s3_utils.cpython-311.pyc
│ │ ├── serializers.cpython-310.pyc
│ │ ├── serializers.cpython-311.pyc
│ │ ├── tasks.cpython-310.pyc
│ │ ├── tasks.cpython-311.pyc
│ │ ├── tests.cpython-310.pyc
│ │ ├── tests.cpython-311.pyc
│ │ ├── views.cpython-310.pyc
│ │ └── views.cpython-311.pyc
│ ├── apps.py
│ ├── models.py
│ ├── nukki.py
│ ├── recommend.py
│ ├── s3_utils.py
│ ├── serializers.py
│ ├── tasks.py
│ ├── tests.py
│ └── views.py
├── docker-compose.yml
├── grafana
│ ├── alerting
│ │ └── 1
│ │ └── __default__.tmpl
│ ├── csv
│ ├── grafana.db
│ ├── plugins
│ └── png
├── manage.py
├── nginx
│ └── log
│ └── acess.log
├── prometheus
│ ├── alert.yml
│ └── prometheus.yml
├── requirements.txt
└── user
├── __init__.py
├── __pycache__
│ ├── __init__.cpython-310.pyc
│ ├── __init__.cpython-311.pyc
│ ├── apps.cpython-310.pyc
│ ├── apps.cpython-311.pyc
│ ├── models.cpython-310.pyc
│ ├── models.cpython-311.pyc
│ ├── serializers.cpython-310.pyc
│ ├── serializers.cpython-311.pyc
│ ├── tests.cpython-310.pyc
│ ├── tests.cpython-311.pyc
│ ├── urls.cpython-310.pyc
│ ├── urls.cpython-311.pyc
│ ├── views.cpython-310.pyc
│ └── views.cpython-311.pyc
├── apps.py
├── authentication.py
├── models.py
├── serializers.py
├── tests.py
├── urls.py
└── views.py
