커뮤니티 사이트. (프로그래머스 데브코스 5기 과제에서 제공해주신 API를 이용한)
회고 기록 + 타이머 기능이 존재하는 커뮤니티 사이트입니다.
23년 12월 22일(금) ~ 24년 1월 17일(수)
| 팀장 | 팀원(문서화 담당) | 팀원(아이디어, 발표) | 팀원(디자인) |
|---|---|---|---|
|
|
|
|
| 김영현 | 안재현 | 이종혁 | 조승현 |
- 자주쓰이는 공통컴포넌트 제작
- 잔디
- 타이머 컴포넌트 제작
- 회고작성 페이지
- chakra-ui이용한 다크모드 세팅
- 배포
- Main
- Search
- BoardEnter
- Board
- PostEdit
- 404 Error
- 회원가입
- 로그인
- 회원정보 수정
- 내가 작성한 댓글
- 내가 작성한 게시글
- 회원 상세 정보 보기
- 댓글 컴포넌트 제작
- chakra-ui + emotion
- vite
- react
- ts
- storybook
- axios
- eslint + prettier + husky
버전은 아래 명시되어있습니다
├── @chakra-ui/icons@2.1.1
├── @chakra-ui/react@2.8.2
├── @chakra-ui/storybook-addon@5.1.0
├── @chakra-ui/theme-tools@2.1.2
├── @emotion/react@11.11.3
├── @emotion/styled@11.11.0
├── @fontsource/noto-sans-kr@5.0.17
├── @storybook/addon-essentials@7.6.6
├── @storybook/addon-interactions@7.6.6
├── @storybook/addon-links@7.6.6
├── @storybook/addon-onboarding@1.0.10
├── @storybook/blocks@7.6.6
├── @storybook/react-vite@7.6.6
├── @storybook/react@7.6.6
├── @storybook/test@7.6.6
├── @types/node@20.10.6
├── @types/react-dom@18.2.18
├── @types/react@18.2.46
├── @typescript-eslint/eslint-plugin@6.16.0
├── @typescript-eslint/parser@6.16.0
├── @vitejs/plugin-react@4.2.1
├── axios@1.6.3
├── eslint-config-prettier@9.1.0
├── eslint-plugin-prettier@5.1.2
├── eslint-plugin-react-hooks@4.6.0
├── eslint-plugin-react-refresh@0.4.5
├── eslint-plugin-react@7.33.2
├── eslint@8.56.0
├── framer-motion@10.16.16
├── husky@8.0.3
├── lint-staged@15.2.0
├── prettier@3.1.1
├── react-dom@18.2.0
├── react-error-boundary@4.0.12
├── react-hook-form@7.49.2
├── react-icons@4.12.0
├── react-query@3.39.3
├── react-router-dom@6.21.1
├── react@18.2.0
├── storybook-addon-react-router-v6@2.0.10
├── storybook@7.6.6
├── typescript@5.3.3
├── vite@5.0.10
├── vitest@1.1.1
당일의 회고를 기록할 수 있습니다. 이곳도 역시 react-hook-form을 사용하여 validation및 에러, 예외처리 해주었습니다
원하는만큼 타이머를 설정하고 재생, 멈춤이 가능합니다. 제한시각인 23:45 전까지 가능합니다. react-hook-form을 이용하여 validation 하였습니다
인증된 사용자가 타이머를 사용하여 최소한 1초라도 기록하였다면 당일 잔디가 심어집니다. 기준은 임시지만 4시간 단위로 분리해두었습니다. 시간이 지날수록 색이 진해집니다.
chakra-ui의 sementicToken + colorMode를 이용하여 다크모드를 처리하였습니다. 폰트 색상은 대부분 통일하여 body에서 상속받게 하였습니다
인증된 사용자는 자신만의 D-day를 등록할 수 있습니다 form을 사용한 곳은 모두 react-hook-form을 이용하였습니다
