커뮤니티 사이트. (프로그래머스 데브코스 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/[email protected]
├── @chakra-ui/[email protected]
├── @chakra-ui/[email protected]
├── @chakra-ui/[email protected]
├── @emotion/[email protected]
├── @emotion/[email protected]
├── @fontsource/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
당일의 회고를 기록할 수 있습니다. 이곳도 역시 react-hook-form을 사용하여 validation및 에러, 예외처리 해주었습니다
원하는만큼 타이머를 설정하고 재생, 멈춤이 가능합니다. 제한시각인 23:45 전까지 가능합니다. react-hook-form을 이용하여 validation 하였습니다
인증된 사용자가 타이머를 사용하여 최소한 1초라도 기록하였다면 당일 잔디가 심어집니다. 기준은 임시지만 4시간 단위로 분리해두었습니다. 시간이 지날수록 색이 진해집니다.
chakra-ui의 sementicToken + colorMode를 이용하여 다크모드를 처리하였습니다. 폰트 색상은 대부분 통일하여 body에서 상속받게 하였습니다
인증된 사용자는 자신만의 D-day를 등록할 수 있습니다 form을 사용한 곳은 모두 react-hook-form을 이용하였습니다
