(21.12.13~14)
Pages 구조
- series, article, user, channel, purchase, auth 폴더로 구분하고 파일 정리 (네이밍에 유의!!)
axios // 추상화 더 해야함
- axiosWithFile
- axiosWithJson
- axios
api 호출부 컨벤션
이미지 업로드 → 이미지 업로드가 있는 부분 (시리즈 생성, 시리즈 수정, 아티클 생성, 아티클 수정, 내 정보 변경)
- upload, ImageUpload 컴포넌트에 상태 제거하고, 연동
컴포넌트화, 코드 일관성
- 중복되는 컴포넌트 분리, 컴포넌트 구조 다시 세우기
commons
Wrapper => export 위치
Title => export 위치
TextArea => export위치
Spinner => export 위치
Select => export 위치
Modal => export 위치
Input => export 위치
Icon - home, like, user => export 위치
- 실제 사용 예시 ex) Like아이콘
import { IconWrapper } from '@components'; <IconWrapper color="orange" fontSize="3rem"> <Icons.Like /> </IconWrapper>
Button => export 위치
domain
CardList => 분리? 😱(박예진)
SeriesDetail => 길어서 정리 필요 😱(박예진)
Category => 버튼 개수 하드코딩(카테고리 추가 될 경우 or 카테고리 이름이 바뀔 경우)?, export 위치
CommentList => 사용하지 않는 컴포넌트
Header -logo, , userModal => export 위치, modal 쓰나?
yarn add polished 해주세요!CSS 스타일 constants (만들어놓고 왜 안쓰니?)
- 상수화 해놓은 것 치환
- SignUpPage => red색상 -> ${theme.color.red}
- SiginInPage => red색상 -> ${theme.color.red}
- #041b2d => ${theme.color.sub}
- #ffb15c => ${theme.color.main}
- #4b4b4b ⇒ ${theme.color.greyDark}
- #f2f2f2 ⇒ ${theme.color.greyLight}
- #eaeaea ⇒ ${theme.color.grey}
- #bdbdbd ⇒ ${theme.color.greyMedium}
서치 키워드: font-size
- 0.875rem ⇒ ${theme.font.small}
- 1rem ⇒ ${theme.font.base}
- 1.125rem ⇒ ${theme.font.medium}
- 1.5rem ⇒ ${theme.font.large}
***사이즈도 font~로 적용돼서 이거 바꿔야함.
서치 키워드: box-shadow
- ${theme.style.boxShadow}
500 에러 페이지 적용