⭐Planmate ReadMe⭐

✨ 프로젝트 소개

PlanMate는 전문직 준비생들을 위한 학습 관리 및 커뮤니티 플랫폼입니다.

사용자가 효율적으로 학습 시간을 관리하고, 학습 패턴을 분석하며, 필요한 정보를 공유할 수 있도록 다양한 기능을 제공합니다.

⏰ 개발 기간

1차 개발: 2023.05 ~ 2023.08
2차 개발: 2024.01

👪 팀원 구성

역할	이름
🖥️ FrontEnd	이성훈
🛠️ BackEnd	김호진
🎨 디자인	박소현
📝 기획	김인서

♻️ 개발 환경

카테고리	기술/도구
Front-end	React, TypeScript, Redux, styled-components
Back-end	Java, Spring
버전 및 이슈 관리	Git, GitHub
협업 도구	Notion, Slack, Figma
배포 서비스	Vercel
디자인	Figma

📃 컨벤션

파일 및 폴더 명명 규칙

컴포넌트 파일: PascalCase (예: TimerButton.tsx)
훅 파일: camelCase, 'use' 접두사 사용 (예: useTimerItem.ts)
스타일 파일: styled.ts로 통일
유틸리티 파일: camelCase (예: dateUtils.ts)

변수 및 함수 명명

항목	규칙	예시
변수	camelCase	totalTime, studyHours
상수	UPPER_SNAKE_CASE	MAX_HOURS
함수	camelCase	calculateTotalTime()
컴포넌트	PascalCase	PostItem
인터페이스, 타입	PascalCase	UserType
이벤트 핸들러	'on' 접두사 사용	onSubmit

커밋 컨벤션

커밋 타입	설명
Feat	새로운 기능 추가
Fix	버그 수정
Remove	파일 삭제
Design	디자인
Rename	이름 변경
Move	파일 이동 (디렉토리 구조 변경)
Style	코드 포맷팅, 세미콜론 누락 등 (코드 변경 없음)
Refactor	코드 리팩토링
Test	테스트 코드 추가 또는 수정
Chore	빌드 프로세스 또는 보조 도구 변경

🛠️ 채택한 개발 기술

Typescript
React
Redux
styled-components
framer-motion
draft-js

🏗️ 프로젝트 구조

┣ 📂api # API 관련 함수 및 타입 정의
┣ 📂assets # 이미지, 아이콘 등 정적 자원
┣ 📂components # 재사용 가능한 React 컴포넌트
┣ 📂constants # 상수 정의
┣ 📂hooks # 커스텀 React 훅
┣ 📂modules # 상태 관리 모듈 (Redux)
┣ 📂pages # 페이지 컴포넌트
┣ 📂utils # 유틸리티 함수
┣ 📜App.tsx # 앱의 메인 컴포넌트
┣ 📜index.tsx # 앱의 진입점
┗ 📜router.tsx # 라우팅 설정

📄 페이지별 기능

⏱️[타이머]

1. 과목별 시간 측정 및 기본 CRUD

default.mp4

과목 추가: "과목 추가" 버튼을 통해 사용자가 새로운 과목을 추가할 수 있습니다.
과목 시간 측정: 각 과목별로 독립적인 타이머가 있어 공부 시간을 측정할 수 있습니다. 타이머가 실시간으로 업데이트되어 현재 공부 중인 시간을 정확히 보여줍니다.
과목 편집: 과목명 변경, 색상 변경 등의 편집 기능이 있습니다.
과목 삭제: 불필요한 과목을 삭제할 수 있습니다.

2. 오늘 공부량 통계 시각화

총 공부 시간: 좌측 상단에 오늘의 총 공부 시간이 표시됩니다.
과목별 공부 시간 비율: 원형 그래프를 통해 각 과목의 공부 시간 비율을 시각적으로 보여줍니다.
과목별 상세 시간: 각 과목별로 오늘 공부한 시간이 표시됩니다.

3. D-Day 표시

D-Day 표시: D-Day 페이지에서 고정한 D-Day를 타이머 페이지에서 확인할 수 있습니다.
D-Day 링크: D-Day 설정 페이지로의 빠른 접근을 위해 타이머 페이지에 직접 링크가 제공됩니다.

📊[통계]

1. 캘린더를 이용한 날짜별 통계 시각화

월별 캘린더 형태로 학습 데이터를 표시
각 날짜에 해당하는 학습 시간을 한눈에 확인 가능

2. 학습량에 따라 색상을 다르게 표시

날짜별 총 공부 시간에 따라 색상 강도가 달라짐
학습량이 많을수록 더 진한 색상으로 표시되어 직관적인 파악 가능

3. 시간별 그래프를 이용한 상세 분석

선택한 날짜의 시간대별 학습량을 그래프로 표시
하루 중 가장 집중적으로 학습한 시간대를 쉽게 확인 가능
어제와의 학습량 비교를 통한 동기부여 가능

4. 과목별 학습 시간 비교

원형 그래프를 통해 각 과목의 학습 시간 비율을 시각화
과목 간 학습 시간 균형을 한눈에 파악 가능

📆[플래너]

default.mp4

1. 드래그&드랍으로 학습시간 추가

사용자는 캘린더에 드래그&드랍 방식으로 쉽게 학습 시간을 추가할 수 있습니다.

2. 과목 별 색상 설정

각 과목에 대해 사용자 정의 색상을 설정할 수 있어 시각적으로 구분하기 쉽습니다.

3. 과목 수정 기능

과목을 클릭하면 시간, 제목, 색상 등을 수정할 수 있는 편집 모달이 활성화됩니다.

4. 삭제 버튼 활성화

과목 위에 마우스를 올리면 우측 상단에 삭제 버튼이 나타나며, 클릭 시 해당 과목을 삭제할 수 있습니다.

5. 주차별 스케줄 확인

좌측 상단의 화살표 버튼을 클릭하여 이전 주차의 스케줄을 확인할 수 있습니다.

ℹ️[수험 정보]

1. 태그 별 필터링

사용자는 상단의 태그를 클릭하여 관심 있는 분야의 게시물만 필터링할 수 있습니다.
예: #감정평가사, #회계사 등

2. 게시물 10개씩 보여짐

각 페이지에서 최대 10개의 게시물을 표시하여 사용자가 쉽게 탐색할 수 있도록 합니다.

3. 페이지네이션 최적화

createPaginationNumbers 함수를 통해 페이지네이션을 최적화하여, 현재 페이지 주변의 번호를 효과적으로 표시합니다.
총 페이지 수가 10 이하인 경우 모든 페이지 번호를 표시하며, 그 이상일 경우 현재 페이지를 중심으로 10개의 번호를 보여줍니다.

✍️[글쓰기]

default.mp4

1. 텍스트 편집 도구

draft-js를 활용한 텍스트 편집기가 구현되어 있습니다.
굵게(B), 기울임꼴(I), 밑줄(U) 등의 기본적인 텍스트 스타일링 옵션이 제공됩니다.
글자 크기 조절, 서식 지정 등의 추가 옵션도 있습니다.

2. 태그 선택

제목 입력란 옆에 태그를 선택할 수 있는 드롭다운 메뉴가 있습니다. 현재 "#기타"가 선택되어 있습니다.

3. 내용 작성

편집기 본문에 글을 작성할 수 있습니다. 현재 샘플 텍스트가 입력되어 있습니다.

4. 등록 버튼

페이지 하단 우측에 초록색 "등록" 버튼이 있어, 작성한 글을 게시할 수 있습니다.

5. 취소 버튼

"등록" 버튼 옆에 "취소" 버튼이 있어, 글 작성을 취소하고 이전 페이지로 돌아갈 수 있습니다.

⚙️[마이페이지]

1. 프로필 정보 표시

사용자의 이름과 이메일 주소가 상단에 표시됩니다.

2. D-DAY 관리

"D-DAY 관리" 섹션이 있어 중요한 날짜를 확인하고 관리할 수 있습니다.
"더보기 >" 버튼을 통해 D-DAY 설정 페이지로 이동할 수 있습니다.

3. 작성 글 모아보기

"작성한 글" 탭에서 사용자가 작성한 게시글 목록을 확인할 수 있습니다.
각 게시글의 제목, 작성 날짜, 조회수, 좋아요 수, 댓글 수가 표시됩니다.

4. 작성 댓글 모아보기

"작성한 댓글" 탭을 통해 사용자가 작성한 댓글 목록을 볼 수 있습니다.

5. 스크랩한 글 모아보기

"스크랩한 글" 탭에서 사용자가 스크랩한 게시글 목록을 확인할 수 있습니다.

6. 게시글 필터링 및 정렬

"작성한 글", "작성한 댓글", "스크랩한 글" 탭을 통해 각 카테고리별로 내용을 필터링할 수 있습니다.

7. 페이지네이션

게시글 목록 하단에 페이지 번호가 표시되어 여러 페이지의 내용을 탐색할 수 있습니다.

사용자의 활동 내역을 한눈에 볼 수 있게 구성되어 있으며, D-DAY 관리 기능을 통해 중요한 일정도 함께 관리할 수 있도록 설계되었습니다.

사용자는 자신의 게시글, 댓글, 스크랩한 글 등을 효과적으로 관리하고 확인할 수 있습니다.

✨[D-Day]

D_DAY.mp4

1. D-DAY 관리

사용자는 중요한 날짜를 D-DAY로 설정하고 관리할 수 있습니다.
왼쪽 패널에 설정된 D-DAY 목록이 표시됩니다.
D-DAY를 클릭 시 해당 D-DAY로 캘린더가 이동하고 수정 모드가 활성화됩니다.
수정 모드에서 삭제도 가능합니다.
D-DAY 좌측 핀 버튼 클릭 시 해당 D-DAY를 고정할 수 있습니다.
고정된 D-DAY는 초록색 배경을 가지며 타이머 페이지에 별도로 표시되어 강조됩니다.

2. D-DAY 추가

오른쪽 패널에서 새로운 D-DAY를 추가할 수 있습니다.
제목 입력란에 D-DAY의 이름을 입력할 수 있습니다.

3. 날짜 선택

캘린더 인터페이스를 통해 D-DAY 날짜를 쉽게 선택할 수 있습니다.
연도와 월을 상단에서 선택할 수 있으며, 날짜는 캘린더에서 직접 클릭하여 선택합니다.

4. 등록 기능

날짜 선택 후 하단의 '등록' 버튼을 클릭하여 새로운 D-DAY를 저장할 수 있습니다.

5. 실시간 업데이트

새로운 D-DAY가 추가되면 왼쪽 패널의 목록이 실시간으로 업데이트됩니다.

6. 직관적인 UI

사용자 친화적인 인터페이스로 설계되어 있어 쉽고 빠르게 D-DAY를 관리할 수 있습니다.

7. 타 페이지와의 연동

설정된 D-DAY 정보는 타이머 페이지 등 다른 페이지에서도 표시되어 사용자가 중요한 날짜를 항상 인지할 수 있게 합니다.

고정된 D-DAY 타이머 페이지에 연동

Name		Name	Last commit message	Last commit date
Latest commit History 1,156 Commits
.vscode		.vscode
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
babel.config.js		babel.config.js
cspell.json		cspell.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

shlee9999/PlanMate

Folders and files

Latest commit

History

Repository files navigation

⭐Planmate ReadMe⭐

✨ 프로젝트 소개

⏰ 개발 기간

👪 팀원 구성

♻️ 개발 환경

📃 컨벤션

파일 및 폴더 명명 규칙

변수 및 함수 명명

커밋 컨벤션

🛠️ 채택한 개발 기술

🏗️ 프로젝트 구조

📄 페이지별 기능

⏱️[타이머]

1. 과목별 시간 측정 및 기본 CRUD

2. 오늘 공부량 통계 시각화

3. D-Day 표시

📊[통계]

1. 캘린더를 이용한 날짜별 통계 시각화

2. 학습량에 따라 색상을 다르게 표시

3. 시간별 그래프를 이용한 상세 분석

4. 과목별 학습 시간 비교

📆[플래너]

1. 드래그&드랍으로 학습시간 추가

2. 과목 별 색상 설정

3. 과목 수정 기능

4. 삭제 버튼 활성화

5. 주차별 스케줄 확인

ℹ️[수험 정보]

1. 태그 별 필터링

2. 게시물 10개씩 보여짐

3. 페이지네이션 최적화

✍️[글쓰기]

1. 텍스트 편집 도구

2. 태그 선택

3. 내용 작성

4. 등록 버튼

5. 취소 버튼

⚙️[마이페이지]

1. 프로필 정보 표시

2. D-DAY 관리

3. 작성 글 모아보기

4. 작성 댓글 모아보기

5. 스크랩한 글 모아보기

6. 게시글 필터링 및 정렬

7. 페이지네이션

✨[D-Day]

1. D-DAY 관리

2. D-DAY 추가

3. 날짜 선택

4. 등록 기능

5. 실시간 업데이트

6. 직관적인 UI

7. 타 페이지와의 연동

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Languages

Packages