SOPTOON

개발자

권소희	서혜은	김지윤
@Sohee Kwon	@Hyeeun Seo	@Jiyun Kim

Tech

Code convention

• eslint, prettier사용
• 변수, 함수 Camel case 기본, 폴더이름 소문자 시작, 파일 이름(컴포넌트만) 대문자 시작
• Styled 컴포넌트 : 컴포넌트 이름 앞에 Styled 붙여주기, 가장 상위 styled 컴포넌트 이름 => StyledRoot, styled 컴포넌트 안에서 className 쓰지 않기
• 함수 선언 방식 : arrow function
• 함수 이름 : 동사 시작 ex) is : return [Boolean]
• Event handler의 이름 : handle로 시작
• 미디어 쿼리 : 소희 언니꺼 참고(react-responsive)
• api 호출 함수 : api.js에 넣어놓기
• 배열, 객체는 리터럴로 선언한다
• 배열, 객체 복사는 spread연산자 사용하기
• 객체선언시 축약표현 사용하기(object-shorthand)

Commit message convention

• feat: 새로운 기능의 추가
• fix: 버그 수정
• docs: 문서 수정
• style: 스타일 관련 기능(코드 포맷팅, 세미콜론 누락, 코드 자체의 변경이 없는 경우)
• refactor: 코드 리팩토링
• test: 테스트 코트, 리팩토링 테스트 코드 추가
• chore: 빌드 업무 수정, 패키지 매니저 수정(ex .gitignore 수정 같은 경우)

Git Branch convention

Git Flow 방식

• main : 최종적으로 배포되는 브랜치

• develop : feature 브랜치가 merge되는 개발의 중심 브랜치

• feature/{구현기능명} : develop 브랜치 아래에서 컴포넌트 기능 단위로 나누어 브랜치 만들기

Directory Structure

⎡ 📁 Public
⎜  ⎿ index.html
⎣ 📁 src
   ⎿ 📁 assets
   ⎹  ⎿ 📁 fonts
   ⎹  ⎿ 📁 icons
   ⎹  ⎿ 📁 images
   ⎿ 📁 components
   ⎹  ⎿ 📁 common 
   ⎹  ⎹  ⎿ CommonNav.jsx
   ⎹  ⎹  ⎿ Footer.jsx
   ⎹  ⎹  ⎿ FooterBase.jsx
   ⎹  ⎹  ⎿ MainHeader.jsx
   ⎹  ⎹  ⎿ StyledLine.jsx
   ⎹  ⎿ 📁 episode
   ⎹  ⎹  ⎿ 📁 commentwrite
   ⎹  ⎹  ⎹  ⎿ Comment.jsx
   ⎹  ⎹  ⎹  ⎿ SideButton.jsx
   ⎹  ⎹  ⎹  ⎿ StarScore.jsx
   ⎹  ⎹  ⎹  ⎿ WriterComment.jsx
   ⎹  ⎹  ⎿ CategoryTab.jsx
   ⎹  ⎹  ⎿ Comment.jsx
   ⎹  ⎹  ⎿ CommentsList.jsx
   ⎹  ⎹  ⎿ CommentsListFooter.jsx
   ⎹  ⎹  ⎿ CommentsListHeader.jsx
   ⎹  ⎹  ⎿ CommentsListMain.jsx
   ⎹  ⎹  ⎿ CommentsWriteMain.jsx
   ⎹  ⎹  ⎿ EpisodeImg.jsx
   ⎹  ⎹  ⎿ EpisodeSlider.jsx
   ⎹  ⎹  ⎿ EpisodeSliderWrapper.jsx
   ⎹  ⎹  ⎿ LocalNav.jsx
   ⎹  ⎹  ⎿ TabItem.jsx
   ⎹  ⎹  ⎿ View.jsx
   ⎹  ⎹  ⎿ ViewHeader.jsx
   ⎹  ⎹  ⎿ ViewMain.jsx
   ⎹  ⎹  ⎿ WebtoonIntro.jsx
   ⎹  ⎹  ⎿ WebtoonThumbnail.jsx
   ⎹  ⎹  ⎿ WebtoonThumbnailBtn.jsx
   ⎹  ⎹  ⎿ WeeklyTab.jsx
   ⎹  ⎿ 📁 home
   ⎹  ⎹  ⎿ 📁 genre
   ⎹  ⎹  ⎹  ⎿ Button.jsx
   ⎹  ⎹  ⎹  ⎿ Card.jsx
   ⎹  ⎹  ⎹  ⎿ Tag.jsx
   ⎹  ⎹  ⎹  ⎿ webtoonList.js
   ⎹  ⎹  ⎿ BaseInfoWrapper.jsx
   ⎹  ⎹  ⎿ CartoonInfo.jsx
   ⎹  ⎹  ⎿ ChallengeWebtoonBase.jsx
   ⎹  ⎹  ⎿ ChallengeWebtoonBox.jsx
   ⎹  ⎹  ⎿ ChallengeWebtoonGroupHeader.jsx
   ⎹  ⎹  ⎿ GenreWebtoon.jsx
   ⎹  ⎹  ⎿ ImgSlider.jsx
   ⎹  ⎹  ⎿ PopularityGenreCartoonBase.jsx
   ⎹  ⎹  ⎿ PopularityGenreCartoonBox.jsx
   ⎹  ⎹  ⎿ TodayWebtoon.jsx
   ⎹  ⎹  ⎿ TodayWebtoonRight.jsx
   ⎹  ⎹  ⎿ TodayWebtoonSection.jsx
   ⎹  ⎹  ⎿ WebtoonInfo.jsx
   ⎿ 📁 libs
   ⎹  ⎿ 📁 constant
   ⎹  ⎮ ⎿ colors.js
   ⎹  ⎿ api.js
   ⎿ 📁 pages
   ⎹  ⎿ Episode.js
   ⎹  ⎿ Home.js
   ⎿ 📁 routes
   ⎹  ⎿ MainRouter.js
   ⎿ 📁 styles
   ⎹  ⎿ globalStyle.js
   ⎹  ⎿ mediaQuery.js
   ⎹  ⎿ Screen.jsx
   ⎿ APP.js
   ⎿ index.js