🍀Life-Calendar

📃Life-Calendar Web Page

개발기간: 2022-11. 01 ~ 2023-1.31

배포 주소

프론트 서버 : https://web-life-calender-front-6g2llffebnui.sel3.cloudtype.app/
백엔드 서버 :

Test 용 id, password

ID- [email protected]
PW- Test123456!

📌 유의사항

디바이스의 사이즈가 다 다르기 때문에 , 모든 디바이스의 최적화 되어있지 않습니다.
혹여, 맞지 않으시다면 화면 크기 90% 로 시도해 보시기 바랍니다.

웹개발팀 소개

김하은 (Front)	박다현 (BackEnd)
@haeunKim	@dahyeonPark

📜 프로젝트 소개

당신의 삶을 "기록" 해 보세요 . 바쁜 일상속 우리가 다시 기억 해낼수 있는건 기록 덕분 입니다. 기록 안에 추억이 있고 , 기록된 추억은 살아가는데 원동력이 됩니다. Life-calendar 는 하루의 할일, 이루고 싶은 버킷리스트 , 감정 일기를 한 곳에 적을수 있도록 구현 하였 습니다.
바쁜 일상속에도 기록 할수 있도록 최대한 간편하게 구현 하였으며, 귀여우면서도 심플한 UI를 생각하며 만들었습니다.

🎈 프로젝트 결정 이유

어렵지 않은 기능과 함께 CRUD 를 경험해 볼수 있는 프로젝트 가 어떤게 있을 까 생각 하였습니다.
위의 조건을 만족하면서 일상속에서 잘 쓰이는 서비스가 어떤게 있을까 생각하다가 "Life- Calendar" 이라는 프로젝트 아이디어가 나오게 되었습니다. 많은 기능을 필요로 하는 프로젝트를 하다가 어려워서 중도 포기 하는것 보단, 작더라도 완벽하게 구현 할수 있는 프로젝트를 하는게 맞다고 생각 했습니다.
따라 초보자인 분들이 최대한 구현할수 있는 프로젝트를 선택 하였고, 그와 동시에 의미 있는 프로젝트를 만들고 싶었습니다.

시작 가이드

Requirements

For building and running the application you need:

• Node.js 14.19.3
• Npm 9.2.0
• Strapi 3.6.6

Installation

$ git clone https://github.com/hahahaday12/Life-Calender-front.git
$ cd client

Backend

$ cd server  ->  cd lifeserver
$ nvm use v.16.19.1
$ npm install
$ npm run start

Frontend

$ cd client
$ nvm use v.8.19.3
$ npm install 
$ npm run start

---

Stacks 🐈

Environment

Config

Development Frontend

Development Backed

Communication

---

화면 구성 📺

메인 페이지	회원 가입 페이지
Calendar 페이지	List 페이지
Diary 페이지

---

✨ 주요 기능 ✨

⭐️ 1) 회원가입 기능

📌 유효성 검증을 통하여, 회원가입 가능.

-> 정규식을 사용하여 이메일 패스워드를 체크하여 일치하지 않으면 경고 메시지로 보이게 됩니다.

⭐️ 2) 로그인 기능

📌 Local storage 에 Token 저장.

-> 입력한 아이디 패스워드를 서버로 보낸 후 성공시 상태값과 Token값 을 받아와 local storage 에 보관 합니다. 실패시 “아이디 또는 비밀번호 잘못 입력 하셨습니다” 라는 알림이 뜹니다.

⭐️ 3) Todo 관리 기능

📌 하루 날짜 기준으로 데이터 조회/ Todo 등록/ Todo 상태값 변경 수정/ Todo 삭제

-> 날짜는 시스템 날짜로 기본으로 설정되며 하루에 진행될 일을 등록후 Drag And Drop으로 TODO 상태에서 Done 상태로 옮겨 하루 완료 상태를 변경할수 있습니다. 지난 날짜의 TODO도 추가등록, 삭제가 가능하며 앞으로 할일도 미리 등록해 하루 일정을 관리할수 있습니다.

⭐️ 4) Diary 관리 기능

📌 한달 날짜 기준으로 데이터 조회/ Diary 등록/ 이전 작성된 글 & 현재글 수정/ Diary 삭제

-> 한달간 작성한 Diary 정보를 카드형태로 조회하며 Diary 작성시 하루 기분의 상태를 색으로 선택할수 있게 구현했으며 , 카드형태로 등록되어 노출이 됩니다. 카드형태를 클릭하면 작성했던 제목, 내용, 선택했던 색이 다시 수정 가능하며, 삭제 및 수정시 잘못 눌렀을 경우를 대비하여 확인창이 노출되도록 구현 하였습니다.

⭐️ 5) Calendar 기능

📌 Diary Color 노출 기능

-> Diary 에서 저장한 Color 데이터를 가져와 작성한 날짜의 색을 보여 줍니다. 한달 동안의 감정을 볼수 있습니다.

---

✨ 상세 구현 기능 설명 ✨

📝 List 기능

1) Todo 등록 기능

-> input 에 할일을 입력하고, 등록 버튼을 누를시 onClick의 이벤트가 활성 되면서 content(내용) , date(날짜), status(상태값) 의 데이터가 서버 api 에 전달 됩니다. 서버에게 전달 되는 방식으로는 post 방식으로 이용 하였으며, 서버에 저장이 되면, "등록 되었습니다." 라는 알림창이 뜹니다. 그후 setState 에 변경된 값을 저장하고 변경된 데이터를 가져와 조회하는 함수를 실행합니다. 서버 Api 에서 Get 방식을 사용해 저장된 데이터를 호출하였습니다.

2) Todo 삭제 기능

-> x의 아이콘을 누르면 onClick의 이벤트 함수가 활성되면서 "삭제 하시겠습니까?" 라는 알림창이 나옵니다. 이때 취소를 클릭시 "취소 되었습니다" 라는 알림창이 나오고 확인을 클릭시 서버 Api에 delete 방식으로 선택한 id의 값이 전달되고, 성공 이라는 상태값을 전달 받으면 "삭제 되었습니다" 라는 알림창을 띄게끔 구현하였습니다. 성공의 상태값을 받아오지 못하면 에러에 대한 데이터 메시지가 콘솔창에 뜹니다.

3) Todo 완료 기능

📌 Drag and Drop 기능

-> onDragEnd 의 함수는 React의 useState Hook 을 사용하여, 컴포넌트 내에서 관리하는 상태값인 columns과 setColumns를 인자로 받습니다. columns는 드래그 앤 드롭이 적용될 여러 열(column)들을 담고 있습니다. result는 react-beautiful-dnd 라이브러리에서 제공하는 드래그 앤 드롭 이벤트 객체입니다. 이 객체에서는 드래그된 아이템, 출발지와 목적지 droppable 영역의 정보 등이 포함됩니다. 이 함수에서는 먼저, result.destination이 존재하지 않는 경우(즉, 아이템이 드롭되지 않은 경우) 함수를 종료합니다.

const onDragEnd = (result, columns, setColumns) => {
   if (!result.destination) return;
  const { source, destination } = result;

그 다음, 드래그된 아이템이 출발지와 목적지가 다른 경우와 같은 열(column) 간 이동일 경우와, 같은 열 내에서의 아이템 순서 변경일 경우를 구분합니다. 같은 열(column) 간 이동이라면, columns 상태값에서 출발지 열을 찾아 해당 열의 items 배열에서 아이템을 이동시키고, 변경된 items 배열을 다시 columns 상태값에 반영합니다. 마지막으로, ChangeStatus() 함수를 호출하여 드래그된 아이템의 상태를 변경합니다.

if (source.droppableId !== destination.droppableId) {
    console.log(result);
    const sourceColumn = columns[source.droppableId];
    const destColumn = columns[destination.droppableId];

    const sourceItems = [...sourceColumn.items];
    const destItems = [...destColumn.items];

    const [removed] = 
      sourceItems.splice(source.index, 1);
      destItems.splice(destination.index, 0, removed);
      setColumns({
        ...columns,
      [source.droppableId]: {
        ...sourceColumn,
        items: sourceItems
      },
      [destination.droppableId]: {
        ...destColumn,
        items: destItems
      }, 
      });
       ChangeStatus(result.draggableId, destination.droppableId.toLowerCase());
    }

그러나, 다른 열 간 이동이라면, 출발지 열과 목적지 열에서 아이템을 이동시키고, 이를 columns 상태값에 반영합니다.

else { 
    const column = columns[source.droppableId];
    const copiedItems = [...column.items];
    
    const [removed] = copiedItems.splice(source.index, 1);
    copiedItems.splice(destination.index, 0, removed);
      setColumns({
        ...columns,
        [source.droppableId]: {
        ...column,
        items: copiedItems
      }
    });
  }
};

이렇게 onDragEnd 함수는 드래그 앤 드롭 이벤트가 발생했을 때, 해당 이벤트에 맞게 columns 상태값을 업데이트하여, 변경된 상태값을 컴포넌트에서 렌더링하도록 합니다

📌 데이터 상태 변경 기능

-> Todo에 등록된 item의 상태가 완료된 done의 상태로 변경 되었을때 변경된 이벤트를 저장하는 함수를 만들어 주었습니다. 서버 Api 에 Patch 방식으로 선택한 item의 id 값과 함께 status 상태값을 전달해 주었고, 변경된 데이터를 가져와 보여주는 함수를 실행합니다.

4) 조회 함수 기능

-> Datepicker 라이브러리를 사용 했으며, Datepicker에서 가져온 날짜를 기준으로 조회 하고 데이터 상태(todo,done) 구분하여 화면에 노출되록 분기처리후 map으로 노출하였다.

5) 버킷 리스트 등록, 삭제 기능

📌 등록

-> input 에 할일을 입력하고, 등록 버튼을 누를시 onClick의 이벤트가 활성 되면서 title(제목) , content(내용) , date(날짜) 의 데이터가 서버 api 에 전달 됩니다. 서버에게 전달 되는 방식으로는 post 방식으로 이용 하였으며, 서버에 저장이 되면, "등록 되었습니다" 라는 알림창이 뜹니다. 그후 setState 에 변경된 값을 저장하고 변경된 데이터를 가져와 보여주는 함수를 실행합니다. 서버 Api 에서 Get 방식을 사용해 저장된 데이터를 호출하였습니다.

📌 삭제

-> x의 아이콘을 누르면 onClick의 이벤트 함수가 활성되면서 "삭제 하시겠습니까?" 라는 알림창이 나옵니다. 이때 취소를 클릭시 "다시 선택해 주세요" 라는 알림창이 나오고 확인을 클릭시 서버 Api에 delete 방식으로 선택한 id의 값이 전달되고, 서버에서 성공 이라는 상태값을 전달 받으면 "삭제 되었습니다" 라는 알림창을 띄게끔 구현하였습니다. 서버에서 상태값이 성공이 아니면 에러에 대한 메시지가 콘솔창에 뜹니다.

📕 Diary 기능

1) diary 등록 기능

-> 제목과 내용을 입력하고, 등록 버튼을 누를시 onClick의 이벤트가 활성 되면서 title(제목) , content(내용) , date(날짜) 의 데이터가 서버 api 에 전달 됩니다. 서버에게 전달 되는 방식으로는 post 방식으로 이용 하였으며, 서버에 저장이 되면, "등록 되었습니다" 라는 알림창이 뜹니다. 그후, 등록된 정보가 slider 컴포넌트에 등록되어 보이기 때문에, 기존에 입력한 데이터를 초기화 시켜주기 위해, 데이터 초기값에 대한 함수를 만들어 주었습니다. 함수 안에 setState 을 사용하여 맨처음 상태인 빈 데이터 값을 적었고, date 는 현재 시간, color는 맨처음 기본 색상을 적어 두었습니다.

2) diary 삭제 기능

-> x의 아이콘을 누르면 onClick의 이벤트 함수가 활성되면서 "삭제 하시겠습니까?" 라는 알림창이 나옵니다. 이때 취소를 클릭시 "다시 선택해 주세요" 라는 알림창이 나오고 확인을 클릭시 서버 Api에 delete 방식으로 선택한 이벤트 id의 값이 전달되고, 서버에서 성공 이라는 상태값을 전달 받으면 "삭제 되었습니다" 라는 알림창을 띄게끔 구현하였습니다. 성공의 상태값을 받아오지 못하면 에러에 대한 데이터 메시지가 콘솔창에 뜹니다.

3) diary 색 변경 기능(ColorPeeker🌈)

-> recoile 을 사용하여 상태관리를 해주었습니다. Color 라는 변수에 “감정을 나타내는 단어(key)” : “색깔 코드(value)”, 키와 벨류 값으로 넣어두었습니다.

그후, colorNameArray 라는 변수에 Color에 있는 key 값을 넣어두었고, colorArray 라는 변수에는 color 에 있는 value 값을 넣어주었습니다. 색을 선택하는 color의 type은 radio 타입의 동그란 모양으로 만들어 주었습니다. Map을 사용하여 colorArray 에 있는 color 값들을 나열해 주었고, 해당 color를 클릭시 onChange 의 이벤트 함수가 실행되게 구현 하였습니다.

Onchange 함수로 상태값이 바뀌게 되면

useEffect(() => {
    const changedColor = {
      color: colorState
    };
    setRecoilColor(changedColor);
  }, [colorState, setRecoilColor]);

useEffect 함수로 변경된 색상을 저장하는 방식으로 썼습니다.

다이어리폼에서는 리코일 상태값이 바뀌면 동일하게 useEffect 가 호출되며,

const [recoilColor, setRecoilColor] = useRecoilState(recoilColorState);
const [colorPeeker, setColorPeeker ] = useState(recoilColor.color);

 useEffect(() =>{
    const tmpColor = { ...recoilColor };
    setColorPeeker(tmpColor.color);
    let defaultDate = new Date();
    if(ViewData.date !== ""){
        defaultDate = new Date(ViewData.date);
    }
    setViewData({
      ...ViewData,
      color:tmpColor.color,
      date:defaultDate
    })
  },[recoilColor] )

recoilColor 상태값이 바뀌면서 새로운 컬러값으로 가져오게 됩니다.

4) 등록된 diary 클릭시 입력 화면에 다이어리 조회 기능

-> Sliderr 의 컴포넌트에 props 로 데이터와 함수를 전달 하였습니다.

List = 카드 정보들을 뿌려줄 데이터 리스트 Search = 조회 함수는 삭제 후 카드 리스트를 다시 조회하기 위해서 사용하였 습니다. refreshFunction = 선택한 카드리스트에 있는 값을 입력화면에 가져오기 위해서 사용 하였습니다.

<Sliderr 
 list={list} 
 search={search}
 refreshFunction={updateList}
/>

{renderDiary()} 라는 함수를 만들어 props로 전달받은 list 데이터를 map 을 사용하여 호출하였습니다.

const renderDiary = () => props.list && props.list.map((item) => (

등록된 diary의 title을 클릭시 다이어리 내용이 보여지는 이벤트 함수를 만들었습니다. Item을 파라미터로 전달하여 데이터들을 넣었고 props 로 데이터를 받아왔습니다.

 const Viewdiary = (item) => {
    const body = {
      title : item.title
      ,content : item.content
      ,color : item.color
      ,id : item._id
      ,date : new Date(KSTchangeUTC(item.date))     
    }        
      props.refreshFunction(body);
  };

📅 Calendar 기능

-> Calendar 에는 Diary 에서 저장한 Color 값이 도트의 형태로 나타나게 구현 하였습니다. Calendar 는 fullCalendar 라는 라이브를 사용 하였고 라이브러리 안에 내재되어 있는 이벤트 를 이용하여 이벤트를 도트 형태로 나타나게 구현 하였습니다. Calendar 라는 페이지에 처음 들어왔을 때 useEffect 이라는 Hook 함수를 사용하였고, Get 방식으로 서버 Api 를 이용하여 diary의 데이터를 조회해오는 함수를 호출 하였 습니다.

👫UserName 표시 기능

-> 페이지가 변경되더라도 상태관리를 유지하기 위해 recoil-persist 를 사용하였습니다. Recoil-persist를 사용하면 이전처럼 새로고침을 해도 recoil state가 없어지지 않고 sessionStorage 또는 localStorage에 보관됩니다.

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

//1. 아무것도 설정 안 하고 쓰는 경우
//localStorage에 저장되며, key 이름은 'recoil-persist'로 저장된다.
const { persistAtom } = recoilPersist();

export const userState = atom({
  key: "userState",
  default: null,
  effects_UNSTABLE: [persistAtom],
  //Recoil-persist를 적용시키려면 아래의 effects_UNSTABLE을 적어주어야 한다.
});

선언해둔 atom을 이용해서, 아래와 같이 state의 기본값에 설정해준 (userState) 값을 넣어 놓았습니다. 그후 server api를 이용해 로그인시 저장된 user의 정보는 Get 방식으로 가져왔고 그후, setUser에 가져온 data.user.name 을 저장 하였 습니다.

const Usertitle = () => {
 const [users, setUsers] = useRecoilState(userState);
   Api.user()
   .then(response => {
     setUsers(response.data.data.user.name);
   },(error) => {
     console.log(error)
     TokenRepository.removeToken();
   });

🎇 느낀점

-> 프로젝트를 기획하고 설계하는 과정에서는 작은 화면 하나도 구현하기 위해서도 다양한 고려가 필요한 것을 깨달았습니다.
실제로 코드를 작성하면서 초기에 생각한 대로 진행되지 않는 부분이 있었고, 고려하지 못한 부분도 있었습니다.
이를 통해 기획 및 설계의 중요성을 더욱 깨닫게 되었습니다.
코드 작성 과정에서는 처음에는 생각나는 대로 구현하다가, 나중에 코드를 보니 중복된 코드가 많아졌습니다.
추후 , 중복 코드를 줄이고 불필요한 코드를 다듬기 위해 리팩토링의 필요성을 깨닫게 되었습니다.
일관적인 데이터 형태 유지를 위해 상태관리를 사용하여 기능을 구현했는데, 이를 통해 상태관리에 대한 이해도가 높아지고 응용할 수 있는 기회가 되었습니다.
또한, 서버와 클라이언트 간의 HTTP 비동기 통신을 통해 데이터를 주고받는 방법에 대한 이해도가 생기게 되었습니다 .
초기에는 오류를 해결하기 위해 막연하게 찾아보기도 했지만, 디버깅 툴을 사용하여 데이터 흐름을 파악하면서 더 나은 코드를 연구하고 , 공부하는 것에 대해 즐거움을 느끼게 되었습니다.
프로젝트를 진행하면서 어려움도 있었지만, 그만큼 뜻깊은 경험이 되었습니다. 앞으로는 개선할 점들을 찾아내어 보완하고, 더욱 완성도 높은 프로젝트를 완성하고자 노력하고 싶습니다.

---

서비스 배포후 1차 수정

-> 서비스 배포후 실사용에 대한 피드백을 얻고 싶어 Okky 라는 IT 커뮤니티에 올렸습니다.
-> https://okky.kr/articles/1421448

피드백 정리

1차 수정 2023-04-05
-> Life-Clendar 오타 수정 완료
-> 이메일 정규식 수정 완료
-> 회원가입 조건 오류 수정 완료
-> input 입력창 간격 조절 완료