DayGrid

일정을 기록할 수 있고 다이어리도 남길 수 있는 캘린더 어플리케이션, DayGrid 입니다.

배포주소
http://daygrid.s3-website.ap-northeast-2.amazonaws.com/info

테스트 계정
ID : [email protected]
PASSWORD: 12341234

🗓️ 서비스 소개

회원가입 및 로그인

로그인	회원가입

캘린더 및 일정 관리

월간 달력	주간 달력
일정 추가	일정 상세보기

다이어리

다이어리 리스트	다이어리 작성

마이페이지

⚙️ 기술 스택

FE

BE

Deployment

🐶 Team Maltesers

이마루한	한재연
FE 회원가입 로그인 다이어리 CRUD 글 작성 에디터 & 이미지 업로드 BE 다이어리 이미지 업로드 JWT 토큰 인증 로그아웃	FE 캘린더 페이지 일정 CRUD 마이페이지 CRUD BE 회원가입 로그인 JWT 토큰 인증 회원정보 일정

📁 디렉토리 구조

Client

├─ public
└─ src
    ├─ assets
    │     ├─ header    // 헤더에 사용되는 날짜별 로고
    │     ├─ image
    │     └─ readme    // readme에 사용된 이미지
    ├─ components
    │     ├─ calendar  // 달력 페이지를 구성하는 컴포넌트
    │     ├─ common    // 헤더, 모달창 등 여러 페이지에 포함되는 컴포넌트
    │     └─ ...
    ├─ pages
    ├─ store
    │     ├─ auth      // 인증 토큰 관리를 위한 slice
    │     ├─ diary     // 다이어리 페이지 상태 관리를 위한 slice
    │     ├─ modal     // 모달 상태 관리를 위한 slice
    │     └─ store.ts
    ├─ hooks
    ├─ styles
    │     ├─ calendar  // 달력 페이지 스타일
    │     ├─ common    // 여러 페이지에 포함되는 컴포넌트 스타일
    │     └─ ...
    ├─ ts
    └─ utils
          ├─ http.ts   // 리액트 쿼리 함수
          └─ ...

Server

├─ data
│    ├─ auth.js   // JWT 토큰 인증 로직
│    └─ db.js     // 데이터베이스 연결
├─ routes         // 기능별로 요청 분리 후 라우팅 처리
│     ├─ calendar.js
│     ├─ diary.js
│     ├─ gallery.js
│     ├─ mypage.js
│     ├─ refresh.js
│     ├─ upload.js
│     └─ userVerify.js
└─ uploads        // 이미지 업로드 관련 로직

✏️ 프로젝트 기록

팀 보드

Notion
https://quixotic-moth-78c.notion.site/DayGrid-Home-b0cc12191a64433f94ae2775ade5187c?pvs=4

페이지 기획 & 디자인

Figma
https://www.figma.com/file/sUKydSkFyWgV8Fc02KJmc9/%EC%BA%98%EB%A6%B0%EB%8D%94?type=design&node-id=0-1&mode=design

페이지 플로우, 데이터베이스 설계

Miro
https://miro.com/app/board/uXjVM0YuVe8=/