TickyTocky

📑 서비스 소개

• 팀의 업무와 일정을 관리할 수 있는 웹서비스입니다.
• 서비스를 위한 개발을 목표로 기획/디자인/개발을 진행하였습니다.
• 📢 기획 및 발표자료 : [TickyTocky]서비스 발표.pdf

🔗 배포링크

https://ticky-tocky.vercel.app/

🔑 Demo 계정

ID: [email protected]
PW: Demo1234

🖥️ Taskify 대시보드

👻 팀 소개

FE 팀장 - 허우림

FE 팀원 - 김희수

FE 팀원 - 유미정

FE 팀원 - 고성선

FE 팀원 - 우준석

✨ 주요 기능 구현

🙋‍♂️ 허우림

• 팀장으로서 회의 및 목표 수립&실행 주도
• 프로젝트(ESLint, husky 등) 및 github repo(issue, PR 등) 세팅
• mydashboard, dashboard edit 페이지 CRUD 기능 구현 및 UI 구현
• 공용 컴포넌트 구현: Common Modal / Icon Modal / Navigation
• 팀노션 세팅 및 프로젝트 기록 문서화

🙋‍♂️ 김희수

• SCSS 전역 파일 세팅: base / mixins / variables
• 할 일 관련 CRUD 기능 구현 및 모달 UI 구현
• 댓글 관련 CRUD 기능 구현, 권한 관련 접근 제한 및 댓글 업데이트 UI 구현
• 공용 컴포넌트 구현: react-hook-form 기반 Input 필드별 공용 컴포넌트 구현 및 유효성 검사
• 공용 레이아웃 구현: FullLayout / MainLayout / EmptyLayout / Auth

🙋‍♂️ 유미정

• 서비스 배포
• 컬럼 관련 CRUD 기능 구현 및 모달 UI 구현
• 공용 컴포넌트 구현: Avatar / Breadcrumb / Invitation Members / Profile Modal
• 공용 레이아웃 구현: MyHeader / BoardHeader

🙋‍♂️ 고성선

• 깃허브 PR 템플릿 세팅
• 로그인 , 회원가입 API
• 계정 수정, 비밀번호 변경 기능 구현
• 로딩 페이지 구현
• 공용 컴포넌트 구현: BaseButton / IconButton / LinkButton / MixButton

🙋‍♂️ 우준석

• 초대 관련 CRUD 기능 구현 및 팝업 UI 구현
• 랜딩 페이지 구현
• 공용 컴포넌트 구현: TagField / CardTags / Dropdown / DropdownList / DropdownTag / KebabDropdown

💻 주요 기능 시연

1️⃣ 대시보드 생성

create.dashboard.mov

2️⃣ 컬럼 생성, 할 일 생성

create.mov

3️⃣ 댓글 생성

comment.mov

🛠️ Dev Tools

🖥️ 프로젝트 실행 방법

git clone https://github.com/TickyTocky/TickyTocky.git

cd TickyTocky

npm i

npm run dev

📁 디렉토리 구조

TickyTocky
├── src
│   ├── api                * axios, api 객체 저장소
│   ├── components         * 공용 컴포넌트, 페이지 컴포넌트 모음
│   ├── constants          * 재사용 객체 모음
│   ├── hooks              * logic 모음
│   ├── pages              * 페이지 모음
│   ├── services           * 로컬스토리지
│   ├── stores             * zustand 전역 상태 관리
│   ├── styles             * SCSS 전역 파일
│   └── utils              * 재사용되는 유틸 함수 모음

🤔 커밋 규칙

📝 코드 컨벤션

• 최상단에서 ‘next’, ‘react’ 선언 후 라이브러리(lib), 컴포넌트(components), 스토어(stores), hooks, 변수(constants), css(styles) 등 묶음으로 나누어 선언한다.
• 절대경로를 사용한다. 단, 같은 폴더 내에 있는 SCSS 파일은 상대경로를 사용한다.
• mixins 사용시 파라미터 값은 문자 그대로 사용한다. (싱글 쿼터 사용하지 마십시오)
• 불리언 함수는 is-로 시작한다.
• 사용자 정의 함수는 handle-로 시작한다.
• props로 받은 함수는 on-으로 시작한다.
• 익명 함수의 사용을 최소화한다.
• 상수는 영문 대문자 스네이크 케이스를 사용한다.
• 명확하고 이해하기 쉬운 변수명으로 작성한다.
• 외부에서 import되는 이미지는 constants 폴더에서 관리한다.
• 변수명은 축약으로 쓰지 않고 전체단어를 포함해서 작성한다. (예시: pw ❌ / password ⭕️, error-msg ❌ / error-message ⭕️)
• 훅, 함수, 변수를 명확하게 구분할 수 있는 이름으로 작성한다.
• 매직넘버 사용을 최소화한다. (constants 폴더 안에 변수로 지정해서 사용)
• console.log(), 의미없는 주석은 삭제한다.
• 한 줄 조건문일 경우에도 {} 중괄호를 생략하여 작성하지 않는다.