라꾸라꾸

공유 먼슬리 다이어리, 라꾸라꾸🌙

" 나만의 다이어리를 작성하여 여러분만의 라이프 스타일을 꾸려보세요! ✨ ✨

목차

1. ✏️ 기획 및 설계
2. 📍 서비스 소개
3. ⏰ 개발 일정
4. 👨‍👩‍👦‍👦 팀원 소개
5. 🛠️ 기술스택 및 라이브러리
6. 🔨 개발
7. ✨ 주요기능 소개
8. 📲 와이어프레임

✏️ 기획 및 설계

• 🌞 피그마
• 📝노션
• ✍코딩 컨벤션

📍 서비스 소개

" 나만의 다이어리를 작성하여 여러분만의 라이프 스타일을 꾸려보세요! ✨"

'라꾸라꾸'는 웹 기반 공유 다이어리 서비스로, 쉽고 간단하게 다이어리를 작성하여 나만의 라이프스타일을 꾸미고 이를 공유하고자 하는 유저들을 위해 제작되었습니다. 웹 기반 서비스이기 때문에 간편하게 휴대하고 걱정없이 저장할 수 있으며, 나의 일기를 한 눈에 확인하고 친구와 공유하며 댓글로 소통할 수 있습니다. 또한 기본 제공되는 300여종의 스티커 및 템플릿를 활용하여 간단하게 다이어리를 꾸밀 수 있으며 원하는 사진을 스티커로 만들어 나만의 다이어리를 만들 수 있습니다.

본 프로젝트는 이화여대 커리어 클럽 웹개발 동아리 EFUB의 여름 프로젝트인 🏖SWS(Summer Web Surf)의 일환으로 진행되었음을 밝힙니다.

⏰ 개발 일정

(2022.03.15 ~ 2022.07.03)

• 기획 및 디자인 : 2022.03.15 ~ 2022.07.03
• 개발 : 2022.07.04 ~ 2022.08.06

👨‍👨‍👨‍👨‍ 팀원 소개

김서연	박희진	신유진	안민경
알림창 및 다이어리 꾸미기 (스티커, 사진)	유저 회원가입과 로그인 / 댓글 폼과 댓글 목록	프로필 / 설정 / 다이어리 꾸미기 (속지,텍스트)	먼슬리 / 친구 목록 및 추가

🔨 개발

실행

git clone 
npm install
npm start

🗃 폴더 구조

├── 📁public 
├── 📁src
│   ├── 📁assets 
│   ├── 📁components 
│   │   ├── 📁common
│   │   ├── 📁LandingPage
│   │   ├── 📁LoginPage
│   │   ├── 📁SignupPage
│   │   ├── 📁MainPage
│   │   ├── 📁MonthlyPage
│   │   ├── 📁SideBar
│   │   ├── 📁SocialPage
│   │   ├── 📁DiaryPage
│   │   └── 📄index.js
│   ├── 📁fonts
│   ├── 📁styles
│   ├── 📄App.css
│   ├── 📄App.js
│   ├── 📄index.css
│   └── 📄index.js
└── 📜etc (setting files)

라우팅 구조

• 랜딩페이지 /
• 로그인 /login
• 회원가입 /register
• 먼슬리페이지 /main/{nickname}
• 설정 /main/{nickname}/setting
• 친구목록 /main/{nickname}/social
• 다이어리 내부 -> /main/{nickname}/diary/{date}

📚 기술스택 및 라이브러리

"dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/material": "^5.9.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "date-fns": "^2.28.0",
    "emoji-picker-react": "^3.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-konva": "^18.2.1",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-use": "^17.4.0",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "styled-components": "^5.3.5",
    "use-image": "^1.0.12",
    "web-vitals": "^2.1.4"
  }

✨ 주요기능 소개

1️⃣먼슬리 달력

라꾸라꾸의 기본 화면입니다. 날짜를 클릭하고, 그 날의 다이어리를 자유롭게 꾸며보세요!

1. 먼슬리 달력: 날짜를 클릭하여 다이어리를 생성할 수 있고, 이미 생성된 다이어리를 조회할 수 있습니다.
2. 프로필: 프로필 수정 버튼을 클릭하여 원하는 프로필 이미지와 자기소개를 설정할 수 있습니다.
3. 알림창: 좋아요, 댓글, 대댓글 등의 알림을 확인할 수 있습니다.

2️⃣다이어리 꾸미기

자신의 취향에 따라 속지,텍스트,사진,스티커를 적용하여 다이어리를 자유롭게 꾸며보세요!

1. 상단 탭: 다이어리 꾸미기를 완료한 후에 오른쪽의 디스크 버튼을 누르면 다이어리를 저장할 수 있습니다.
2. 하단 탭: 속지,텍스트,사진,스티커 중 적용하기를 원하는 요소를 클릭하여 캔버스에 생성히여 자신의 취향에 따라 적용할 수 있습니다.
3. 캔버스: 속지,텍스트,사진,스티커를 캔버스에 원하는 디자인,회전,크기로 자유롭게 생성할 수 있습니다.

3️⃣친구와 공유하기

UID를 통해 다이어리를 공유하고 싶은 친구를 추가해 친구의 다이어리에 놀러갈 수 있습니다.
친구와 서로의 다이어리에 좋아요를 누르고 댓글을 달며 자유롭게 공유해보세요!

1. 친구 목록: 친구를 맺고, 끊을 수 있으며 친구의 다이어리로 이동할 수 있습니다.
2. 친구 추가: 친구의 UID를 검색하여 친구를 추가할 수 있습니다.
3. 좋아요, 댓글, 대댓글: 친구의 다이어리에 좋아요를 누르고, 댓글과 대댓글을 달며 친구와 다이어리를 통해 소통할 수 있습니다.

📲 와이어프레임