[프로젝트 회고] 일정 관리 웹 애플리케이션 Taskify - 1주차

🚪 들어가며 

 

저는 코드잇 스프린트 프론트 엔드 9기 수료 중이며, 2024년 10월 18일(금)부터 2024년 11월 5일(화)까지 약 3주간 중급 프로젝트를 진행합니다. 이 기간 동안 4명의 팀원들과 함께 일정 관리 웹 애플리케이션 Taskify를 제작할 예정입니다.

이번 프로젝트는 Next.js 프레임워크를 사용하여 진행하는 첫 번째 프로젝트로, 로그인과 같은 사용자 기능을 처음으로 적용해보는 것에 대해 설레는 마음을 가지고 프로젝트를 시작했습니다.😎 

 

 

📚 프로젝트 소개

 

Taskify는 일정 관리와 공유 기능을 제공하는 웹 애플리케이션입니다. 사용자는 가족, 회사 등 다양한 커뮤니티를 생성하고, 멤버를 초대하여 일정과 할 일 목록을 함께 관리할 수 있습니다. 커뮤니티 내에서 작성된 일정은 카드 형태로 다른 멤버에게 공유되며, 할 일 목록의 생성, 게시, 수정, 삭제와 같은 CRUD 기능을 구현합니다. 또한, 멤버 초대, 목록 분류, 검색, 댓글 작성 기능을 더해 유기적인 커뮤니티 서비스 구축 경험을 제공합니다.

 

Landing 페이지

 

 

🔨 기술스택

 

• 개발환경: Next.js
• 빌드: Webpack
• API 관리: Axios
• 커뮤니케이션: Discord/Notion
• 버전관리: Github
• 상태관리: Zustand
• CSS: Tailwind CSS

 

 

⚒️ 나의 역할

 

저희 팀은 전체 페이지에 대해 디자인 레이아웃을 먼저 구현하고 추후에 기능을 구현하는 방식으로 프로젝트를 진행하기로 했습니다. 저의 역할도 거시적으로는 페이지 디자인에서 기능 구현으로 넘어갑니다. 아래 기재한 내용들은 1주차에 진행한 내용입니다. 

 

 

1. Landing페이지 UI 및 기능 구현 

 

Landing 페이지

 

 

가장 먼저 웹의 Landing페이지 디자인을 제작했습니다. 그동안 꾸준히 프론트엔드 공부를 해왔기 때문에 웹 페이지 UI 구현에는 큰 어려움이 없었지만, 처음으로 Tailwind CSS를 사용하여 프로젝트를 진행하는 것이기에 해당 페이지를 제작하며 이 기법의 문법을 익힐 수 있었습니다.

 

 

2. My페이지 UI 구현 

 

My 페이지

 

 

사이드바와 헤더는 팀원분께서 재사용 가능한 레이아웃으로 만들어주셔서 저는 프로필과 비밀번호 변경에 대한 컴포넌트를 추가하여 페이지를 완성했습니다. 

새 비밀번호와 새 비밀번호 확인이 일치하는지 검증하는 과정에서 한글자씩 입력할 때마다 두 상태가 일치하는지 확인하는 것은 비효율적이라고 느껴 디바운스를 통해 해당 기능을 구현하는 것과 같이 UX 개선을 의식하며 프로그래밍에 임했습니다.  

 

디바운스 설정 코드 일부

 

 

추가적으로 My페이지에서 저장 또는 변경 버튼을 클릭했을 때, 해당 이벤트가 처리되었다는 Modal창을 띄워주어야 했는데 Modal창을 처음 구현해보아 우선 해당 내용에 대해 학습하는 시간을 가졌습니다. 

 

구현해야할 Modal창

 

 

Modal의 개념을 학습하고 Next.js 프로젝트로 간단하게 Modal창을 구현해보며 이해도를 높였습니다. 또한, 해당 내용을 블로그에 포스팅하여 추후 학습이 용이하게 했습니다. (링크: https://mungyun.tistory.com/26)

[Next.js] 모달창 만들기(Modal)

 

 

3. ModalAlert 컴포넌트 기능 구현 

 

 

학습 이후, 프로젝트의 시안을 보니 다양한 종류의 Modal이 사용되고 있는 것을 확인했고, 공통으로 사용할 수 있는 Modal틀인 useModal 훅을 먼저 작성했습니다. 

 

import { useState } from "react";

const useModal = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return {
    isOpen,
    openModal,
    closeModal,
  };
};

export default useModal;

 

 

이를 활용하여, text라는 prop을 받아, 재사용할 수 있는 ModalAlert 컴포넌트를 만들었습니다. 

ModalAlert 컴포넌트 사용 예시

 

 

4. 할 일 생성 Modal 디자인 구현 

 

왼쪽의 사진인 나의 대시보드에는 To Do, On Progress, Done이라는 3개의 Column이 존재하는 것을 알 수 있고 오른쪽 사진과 같이 Column 안에 Card를 생성하는 Modal창을 디자인하고 기능을 구현하는 것이 저의 4번째 작업이었습니다. 

 

나의 대시보드와 할 일 생성 Modal창

 

 

마감일의 날짜를 입력을 input의 type='datetime'으로 하려다가 디자인에서 어려움을 겪었습니다. 그러던 중, react-datepicker라는 라이브러리를 발견하여 이를 통해 날짜 입력을 받는 것으로 구현했습니다.  

 

react-datepicker로 날짜를 입력받음.

 

 

5. 할 일 생성 Modal 기능 구현 

 

할 일 생성 Modal의 디자인을 완성하고 바로 기능 구현을 시작했습니다. 우선 아래와 같은 API 호출 함수를 생성했습니다. 

 

📌 createCardImage

• Endpoint: (예: https://sp-taskify-api.vercel.app/9-1/columns/40797/card-image)
• Method: POST
• Purpose: File 입력으로 받은 이미지를 문자열 링크로 바꾸는 데 사용됩니다. 

📌 createCard

• Endpoint: (예: https://sp-taskify-api.vercel.app/9-1/cards)
• Method: POST
• Purpose: 할 일 생성 Modal을 통해 입력받은 정보를 통해 할 일 카드를 생성합니다. 

📌 getMembers

• Endpoint: (예: https://sp-taskify-api.vercel.app/9-1/memberspage=1&size=10&dashboardId=40797)
• Method: GET
• Purpose: 초대된 맴버의 정보를 불러옵니다. 할 일 생성 Modal에서 담당자 조회 시 사용됩니다.

 

이 함수들을 사용하여 할 일 생성 Modal의 기능을 완성했습니다. 

이후, 할 일 수정 Modal 디자인과 기능을 구현하며 1주차를 마무리했습니다.

 

 

📝 팀 논의 사항

인증 과정에서 서버의 response는 다음과 같았습니다. 

 

{
  "user": {
    "id": 0,
    "email": "string",
    "nickname": "string",
    "profileImageUrl": "string",
    "createdAt": "2024-10-27T11:42:34.086Z",
    "updatedAt": "2024-10-27T11:42:34.086Z"
  },
  "accessToken": "string"
}

 

서버에서 accessToken을 set해주지 않아, 저희 팀이 직접 브라우저에 token을 set해야하는데, 쿠키에 저장할 수도 있고 로컬 스토리지에 저장할 수도 있어 어디에 저장할 지 의논했습니다. 

 

저도 관련 정보를 학습하며 토론과정에 적극적으로 참석하기 위해 노력했습니다. 아래 링크는 공부하며 기록한 포스팅입니다. 

(링크: https://mungyun.tistory.com/27)

[CS지식] 쿠키 vs 로컬 스토리지, 무엇이 다를까?

 

결과적으로, 이번 프로젝트에선 보안 옵션 설정을 통해 상대적으로 안정적인 운영을 할 수 있는 쿠키를 사용하여 토큰을 저장하는 것으로 결정했습니다.

 

 

✅ 마무리

 

좋았던 점

 

이번 프로젝트에서 Next.js와 Tailwind CSS를 처음으로 사용해 볼 수 있었던 것이 큰 장점이었습니다. 특히 Tailwind CSS로 스타일링을 진행하면서 컴포넌트를 빠르게 디자인하고, UI 구현 속도를 높일 수 있었습니다. 또한, 팀원들이 만들어준 재사용 가능한 레이아웃 덕분에 My 페이지에서의 UI 구성에 집중할 수 있었고, 팀 협업의 효율성도 크게 느꼈습니다. API를 활용한 CRUD 기능 구현에서 직접 API 호출 함수를 작성하며 데이터를 효율적으로 관리하는 방법도 배울 수 있어 좋았습니다.

 

배운 점

 

처음으로 모달을 직접 설계하면서 모달 컴포넌트를 재사용할 수 있는 형태로 만들고, useModal 훅을 작성하는 경험이 굉장히 유익했습니다. 또한, 비밀번호 검증 로직에서 디바운스를 적용해 UX를 개선하는 방식을 새로 배웠고, react-datepicker 라이브러리를 통해 날짜 입력 기능을 효율적으로 구현하는 방법도 익힐 수 있었습니다.

 

 다음주에 2주차 회고로 돌아오겠습니다! 즐거운 한 주 보내세요🙂‍↕️