Skip to content

10조 과제 제출 (이은비, 김하은, 황인승)#6

Open
EungBug wants to merge 1 commit intoKDT1-FE:mainfrom
EungBug:main
Open

10조 과제 제출 (이은비, 김하은, 황인승)#6
EungBug wants to merge 1 commit intoKDT1-FE:mainfrom
EungBug:main

Conversation

@EungBug
Copy link

@EungBug EungBug commented Jul 22, 2023

apple-icon-60x60

똑플

🔗 배포주소

똑플

📄 프로젝트 소개

가계부 API를 이용하여 소비 기록과 소비 습관을 기를 수 있는 가계부 만들기
똑플 : 똑똑한 소비 플랜

🗓 프로젝트 기간

2023.07.05 ~ 2023.07.23

📌 프로젝트 기능

로그인 페이지

  • 회원가입 페이지로 이동 가능
  • 이메일 인증 후 로그인 가능
  • 구글 아이디로 간편 로그인 가능
  • 비로그인 상태에선 회원가입 페이지 외 다른 페이지 접속 불가
  • 로그아웃시 로그인 페이지로 이동

메인 페이지

  • 월간 수입 + 지출 = 총액 표시
  • 이번 달 예산 등록
  • 총액/ 예산에 따른 비율을 스피너로 표시

월간 페이지

  • fullCalendar 기능 연동
  • 등록된 입금, 지출 내역 fullCalnedar 연동후 노출
    • 입금, 지출 내역 데이터 비교
  • 등록된 입금, 지출 내역 아래 리스트로 노출
  • 리스트 내역 수정 및 삭제 기능

등록 페이지

  • 날짜 선택 datePicker 기능 연동
  • 금액 입력후 입금, 지출 클릭시 데이터 구분
  • 지출 등록시 카테고리 별 지출 등록 가능

주간 페이지

  • 월간 페이지에 등록한 입금, 지출 목록만 생성
  • 주(week)마다 구분해서 리스트 생성
  • 해당 주를 클릭하면 일(day)별로 목록 생성
  • 수정, 삭제 버튼으로 일 목록 수정, 삭제 가능

통계 페이지

  • 주간 통계, 월간 통계 탭 구분 기능
  • 주간 수입, 지출 데이터 차트 표현
    • 주간 수입, 지출 데이터 라인 차트 연동
    • 카테고리 별 지출 횟수 데이터 도넛 차트 연동
    • 지난주 총 금액 데이터 비교
  • 월간 수입, 지출 데이터 차트 표현
    • 월간 자산 분석 데이터 파이 차트 연동
    • 월간 지출 TOP 3 카테고리 데이터 막대 그래프 연동
    • 월간 카테고리 별 지출 분석 레이더 차트 연동

검색 페이지

  • 검색 기간 필터링 기능
    • DatePicker 연동
  • 검색 카테고리 필터링 기능
  • 검색 결과 목록 노출 및 총 지출 금액 노출

⚒️ 기술 스택

👩🏻‍💻🧑🏻‍💻 개발팀 소개

이은비 김하은 황인승
프로젝트 팀장,
Github 관리,
통계 페이지,
검색 페이지		 월간 페이지,
캘린더 구현,
소비 등록 페이지		 로그인, 로그아웃,
회원가입,
메인 페이지,
주간 페이지

📂 폴더구조

📦src
 ┣ 📂apis
 ┣ 📂components
 ┃ ┣ 📂chart
 ┃ ┣ 📂common
 ┃ ┣ 📂home
 ┃ ┣ 📂login
 ┃ ┣ 📂monthly
 ┃ ┣ 📂search
 ┃ ┗ 📂weekly
 ┣ 📂constants
 ┣ 📂pages
 ┣ 📂types
 ┣ 📂utils
 ┣ 📜GlobalStyle.tsx
 ┣ 📜firebase.ts
 ┣ 📜main.tsx
 ┣ 📜store.ts
 ┗ 📜vite-env.d.ts

@EungBug EungBug changed the title TEAM10 토이프로젝트 과제 제출 10조 과제 제출 (이은비, 김하은, 황인승) Jul 22, 2023
sangheon-kim
sangheon-kim reviewed Jul 31, 2023
View reviewed changes
Copy link
Contributor

@sangheon-kim sangheon-kim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다 코멘트 남겨드렸습니다

src/components/chart/MonthlyRadarChart.tsx
}, [monthlyData])

return (
<>
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React.Fragment를 사용하는게 좋아요~

src/components/common/Layout.tsx
background-color: var(--color-bg);
`

const Container = styled.div`
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

section 같은 시멘틱 태그를 사용하면 좋을거 같아요

src/components/common/Modal.tsx
closeModal: () => void
}

export const Modal = ({ children, closeModal }: ModalProps) => {
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React.PropsWithChildren을 사용하는걸 추천드려요

src/components/home/Home.tsx
export const Home = () => {
const initialGoal = useSavedGoal()

const [showModal, setShowModal] = useState(false)
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트 성능 최적화를 위해 useMemo를 사용하는게 좋아요

src/components/home/Home.tsx
}

// spinner 계산용 함수
const updateProgress = (latestTotalAmount: number) => {
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 함수는 utill로 빼서 재활용하는게 더 좋지 않을까요?

src/components/search/DateFilterTab.tsx
if (start && end) setIsOpen(false)
}

const handleTabChange = (tab: string) => {
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이벤트 핸들러 함수는 useCallback을 활용하면 성능 최적화에 좋아요

src/components/search/SearchResultItem.tsx

export const SearchResultItem = React.memo(({ data }: SearchResultItemProps) => {
return (
<Wrapper key={data.date}>
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

li태그를 wrapper로 명명한 부문이 조금 어색한것 같아요 좀더 용도가 분명한 컴포넌트 명을 고민해보시면 좋을거 같아요

src/pages/App.tsx

export const App = () => {
return (
<Routes>
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

create-browser-router를 사용하는게 성능면에서 좋아요
https://reactrouter.com/en/main/routers/create-browser-router

src/pages/HomePage.tsx

export const HomePage = () => {
return (
<>
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

자식 컴포넌트가 복수개가 아닌 단일인 경우 만 리턴해주는게 더 낫지 않을까요?

src/store.ts

export const useStore = create<IStore>(set => ({
expensesData: [],
setExpensesData: (expenses: Calendar[][]) => {
Copy link
Contributor

@sangheon-kim sangheon-kim Jul 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

loading 관련한 프로퍼티도 추가해서 관리하면 useState도 따로 로딩 상태 관리 안해도 되고 편리할거 같아요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sangheon-kim sangheon-kim sangheon-kim left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@EungBug @sangheon-kim