4조 과제 제출 (차동민, 박진영, 김성은, 김세연) #1
Conversation
…o Middle-Calendar
주석 추가 및 warning 해결
Middle calendar 주석 추가
FEAT : #10 차트에러 수정 및 전역 스타일 다듬기
STYLE:사이트 로고 수정, DOCS: README수정 및 사용되는 이미지 추가
Wallet Keeper 1.0버전 배포
| //상세 디자인 스타일은 우주부동산 피그마에 정리되어 있습니다. | ||
| export const theme: DefaultTheme = { | ||
| colors: { | ||
| blue: { | ||
| main: '#4464FF', // Blue : 프로젝트 메인 컬러, 수입 항목 + 플러스 값 | ||
| pressed: '#2C3D8F', // Deep blue : 버튼 클릭 상태 컬러 | ||
| bg: '#CDDEFF' // Light blue : 버튼 클릭하지 않은 상태, input,list등 넓은 면적 또는 bg | ||
| }, | ||
| black: { | ||
| black30: '#1f1f1f1f', //기본 블랙, 텍스트 + 배경 사용 | ||
| black50: '#1f1f1f71', //기본 블랙, 텍스트 + 배경 사용 | ||
| black100: '#1F1F1F', //기본 블랙, 텍스트 + 배경 사용 | ||
| }, | ||
| white: '#FFFFFF', // Box bg | ||
| red: '#FF6969', //소비 항목 + 마이너스 값 | ||
| // green: '#41EE53' | ||
| gray: [ | ||
| '#6A6E83', //[0] Dark Gray | ||
| '#A8B1CE', //[1] Light Gray | ||
| '#F8F9FD' //[2] White Gray | ||
| ] | ||
| } | ||
| }; | ||
|
|
There was a problem hiding this comment.
공통 브랜드 컬러를 theme.ts와 styled.d.ts를 이용하여 글로벌하게 사용하고 일관될 수 있게 세팅하고 간 점 정말 중요한거 같습니다
| import axios from 'axios'; | ||
|
|
||
| // API 공통 영역 변수 | ||
| const api = axios.create({ | ||
| baseURL: 'http://52.78.195.183:3003/api', | ||
| headers: { | ||
| 'Content-Type': 'application/json' | ||
| } | ||
| }); | ||
|
|
||
| // 기록 작성 및 수정용 interface | ||
| export interface IContent { | ||
| amount: number; | ||
| userId: string; | ||
| category: string; | ||
| date: string; | ||
| } | ||
| export interface IContentExtend extends IContent { | ||
| _id: string; | ||
| __v: number; | ||
| } | ||
|
|
||
| // 소비 기록 작성 | ||
| const postData = async (content: IContent) => { | ||
| const res = await api({ method: 'POST', url: '/expenses', data: content }); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // 소비 품목 목록 조회 | ||
| const getCategory = async (userId: string) => { | ||
| const res = await api.get(`/categories?userId=${userId}`); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // 검색어에 해당하는 소비 항목 및 금액 조회 | ||
| const getSearch = async (keyword: string, userId: string) => { | ||
| const res = await api.get(`/expenses/search?q=${keyword}&userId=${userId}`); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // 일별, 주별, 월별 소비 조회 | ||
| const getPeriod = async (period: string, userId: string) => { | ||
| const res = await api.get( | ||
| `/expenses/summary?period=${period}&userId=${userId}` | ||
| ); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // 소비 기록 수정 | ||
| const editData = async (contentId: string, content: IContent) => { | ||
| const res = await api({ | ||
| method: 'PUT', | ||
| url: `/expenses/${contentId}`, | ||
| data: content | ||
| }); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // 소비 기록 삭제 | ||
| const delData = async (contentId: string) => { | ||
| const res = await api.delete(`/expenses/${contentId}`); | ||
| return res.data; | ||
| }; | ||
|
|
||
| // 소비 기록 달력 호출 | ||
| const getCalendar = async (year: number, month: number, userId: string) => { | ||
| const res = await api.get( | ||
| `/expenses/calendar?year=${year}&month=${month}&userId=${userId}` | ||
| ); | ||
| return res.data; | ||
| }; | ||
|
|
||
| export { | ||
| postData, | ||
| getCategory, | ||
| getSearch, | ||
| getPeriod, | ||
| editData, | ||
| delData, | ||
| getCalendar | ||
| }; |
There was a problem hiding this comment.
API를 모듈화 시켜서 관리하고 주석을 상세하게 달아 놓는 것은 가장 기본적이면서도 가장 중요한 것 같습니다
프로젝트가 커질수록 기능이 많아지는 만큼 관련 함수도 많아지는데 나중에 자신이 짠 코드를 까먹는 경우, 어디 파일에 있는지
찾기 어려운 경우가 있습니다.
이번 프로젝트는 간단한 프로젝트여서 API를 하나의 파일로 정리해도 무관하지만,
규모가 큰 프로젝트나 현업에서는 API를 기능별로 파일을 나눠서 분류하는 경우도 있으니 나중에 기회가 된다면
그렇게 해보는 것도 추천드립니다!
| const Btns = styled.div` | ||
| width: 100%; | ||
| height: 9%; | ||
| background-color: ${theme.colors.blue.main}; | ||
| `; | ||
| const BtnActive = styled.button` | ||
| width: 50%; | ||
| height: 100%; | ||
| padding: 10px; | ||
| text-align: center; | ||
| font-size: 1.1rem; | ||
| font-weight: 800; | ||
| word-spacing: -0.1em; | ||
| border-radius: 40px 40px 0px 0px; | ||
| background: ${theme.colors.white}; | ||
| color: ${theme.colors.blue.main}; | ||
| border: none; | ||
| `; |
There was a problem hiding this comment.
스타일드 컴포넌트를 이용해서 CSS를 동적으로 구현하려고 하고 페이지내에서 고유하게 주려고 했던 것은 정말 좋습니다!
다만, 아쉬운 것은 스타일드 컴포넌트가 HTML 태그를 커스텀할 수 있다는 장점으로 인해 많이 고유한 태그를 커스텀할 때는 오히려 혼란을 줄 수도 있고 코드가 복잡할 수가 있습니다!
이러한 것들을 방지하기 위해서는
common영역에 들어갈 공통적으로 사용될 코드들을 최대한 만들어 놓고 가는게 좋습니다
그래야 코드 가독성도 깔끔해지는 효과를 보실 수 있습니다
가령) btn같은 버튼들을 아예 컴포넌트 파일을 따로 만든 뒤에 그안에서 styled-components로 커스텀해놓고
props를 이용해서 상황에 맞게 색깔이나 width, height 값을 변경할 수 있게 만들면 필요할 때마다 그 컴포넌트만 import해서
사용할 수 있으므로 필요한 상황에서만 커스텀 컴포넌트를 만들게 되어 좀더 일관적인 코드를 짤 수 있습니다!
| const Container = styled.div` | ||
| height: 100%; | ||
| width: 100%; | ||
| background-color: ${theme.colors.white}; | ||
| `; | ||
| const DateContain = styled.div` | ||
| width: 100%; | ||
| height: 10%; | ||
| padding-top: 40px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| `; |
There was a problem hiding this comment.
공통코드에 이어 추가설명하자면 현재 코드들을 보면
태그 단위별로 모두 커스텀해서 스타일을 주고 있는 모습을 볼 수 있습니다
코드에 정답이 있는 것은 아니지만
재사용되지 않을 코드들에 대해서는
부모요소안에서 중첩으로 스타일을 주는 것이 더욱 가독성이 좋은 코드를 짤 수 있고 효율적일 수 있습니다!
| interface IPostModalProps { | ||
| setChange: React.Dispatch<React.SetStateAction<boolean>>; | ||
| getContent: () => Promise<void>; | ||
| selectedDate: string; | ||
| setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>; | ||
| } |
There was a problem hiding this comment.
interface를 활용하여 setState 함수와 Promise 까지 타입를 지정해준 것은 정말 좋았습니다!
Promise를 interface에 선언하는 것은 어떤 면에서 의미가 있을까요?
| color: ${$IncomeColor | ||
| ? theme.colors.blue.main | ||
| : $SpendingColor | ||
| ? theme.colors.red | ||
| : theme.colors.white}; | ||
| `} |
배포사이트
Wallet Keeper
개발팀원
차동민
김성은
김세연
박진영
작성용 모달 구현,캘린더 구현,
깃허브 및 브랜치 관리
차트 구현, 디자인 구현
날짜별 조회,수정
삭제,검색기능 구현
날짜별 수입,지출,합계 구현
프로젝트기간
2023.07.05 ~ 2023.07.14
기술스택
Develoment
Config
Enviroment
Cowork Tools
전체 화면 구성
차트 부분