💳 현대 카드 💳

NOW SOPT WEB TEAM 3

📌 합동 세미나 - 현대 카드

• 디자인 파트원들이 UX개선을 위해 기존의 서비스를 리디자인 해온 것을 서버파트와 함께 협업하여 구현하고 디자인 파트, 기획파트와 협업을 경험해볼 수 있는 세미나입니다.
• 웹 3팀은 현대카드 리디자인은 진행했어요!

🛠 기술스택

역할	종류
Library
Programming Language
Styling
Data Fetching
Formatting
Package Manager
Version Control

🌳 구현 View

🌿 Main View

🌿 Card View

🌿 Benefit View

🌿 Culture View

📚 컨벤션

1️⃣ Commit 컨벤션

commit 규칙

키워드: 내용

• 예시:
  • init: 초기 세팅
  • feat: 기능 개발

Commit 메시지 종류 설명

제목	내용
feat	새로운 기능을 추가할 경우
style	기능에 영향을 주지 않는 커밋, 코드 순서, css 등의 포맷에 관한 커밋
fix	버그를 고친 경우
refactor	프로덕션 코드 리팩토링
docs	문서를 수정한 경우, 파일 삭제, 파일명 수정 등 ex) README.md
chore	빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정
code review	코드 리뷰 반영

2️⃣ Branch 전략

브랜치 전략

feat/#이슈번호/이슈이름

Git Branch

• GitHub-Flow 전략 + develop
• 브랜치 운영
  • feat/#이슈번호/이슈이름 (camelCase): 기능을 개발하면서 각자가 사용한 브랜치
    • main: 완전히 안전하다고 판단되었을 때, 즉 배포가 가능한 최종 merge하는 브랜치
    • develop: 배포하기 전 개발 중일 때 각자의 브랜치에서 merge하는 브랜치 (default 브랜치)
      • feat/#이슈번호/기능명: feature 브랜치. 새로운 기능 개발. 개발이 완료되면 develop 브랜치로 병합
      • fix/#이슈번호/기능명: feature 브랜치 생성 후 버그가 생겼을 때 수정하는 브랜치
      • 그 외 hotfix, release 등은 사용 X

3️⃣ 코딩 컨벤션

1. 변수명, 함수명을 고민을 우선적으로 하되, 주석이 필요한 경우는 어떤 역할을 하는지 다른 사람이 이해할 수 있도록 작성하자

2. 해야 할 사항이 있다면 // TODO: 주석으로 표시하자

3. 컴포넌트 파일의 확장자는 .tsx, .jsx로 정한다

4. 컴포넌트와 일반 기능을 구현하는 함수 구분

   • 컴포넌트: 일반 함수 function을 사용

     // Bad
     const skrr = () => {
         return <div>skrr</div>
     }
     
     export default skrr
     
     // Good
     function skrr() {
         return <div>skrr</div>
     }
     
     export default skrr

   • 기능을 구현하는 함수: const를 사용

     // Bad
     function handleskrr(number) {
         return number + 1
     }
     
     // Good
     const handleSkrr = (number) => {
         return number + 1
     }

     
     

5. 변수/함수명은 20자 미만, 주석으로 변수 설명

   • 변수/함수명은 이해할 수 있을 정도로 고민

     // Bad
     const isLoading = true;
     
     // Good
     const isUserDataLoading = true;

   • 대부분의 경우 카멜 케이스를 사용

     // Bad
     const is_snake_case = 'Bad';
     
     // Good
     const camelCase = 'Good';

   • 상수는 영문 대문자 스네이크 표기법 사용

     const SYMBOLIC_CONSTANT = 'value';

   • 클래스 생성자/생성자 함수는 대문자 카멜 케이스 사용

     // 클래스
     class ClassName {}
     
     // 생성자 함수
     function Person() {}

   • URL, HTML 같은 대문자 약어는 그대로 사용

     const parseHTML = () => {}
     const parseXML = () => {}

     
     

6. 이벤트 핸들러명은 handle로 시작

   // Good
   const handleClick = () => {}
   
   // Bad
   const clickHandler = () => {}
   const onClick = () => {}
   const onSubmit = () => {}
   const onClickHandler = () => {}

📁 폴더 구조

|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
  |-- 📁 apis
  |-- 📁 assets
  |-- 📁 components
  |-- 📁 layout
  |-- 📁 pages
  |-- 📁 routes
  |-- 📁 store
  |-- 📁 styles
|-- .env
|-- .eslintrc.cjs
|-- .gitignore
|-- .prettierrc
|-- .stylelintrc
|-- index.html
|-- package.json
|-- README.md
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.js
|-- yarn.lock

🧑🏻‍💻 FE Developers 👩🏻‍💻

문성희	서대원	이예림	이채원
Home View 이벤트 리스트 조회 API	Benefit View 로그인 API 회원가입 API 레이아웃 구현	Culture View 컬쳐 리스트 조회 API	Card View 전체 카드 조회 API 카드 북마크 API 카드 필터링 조회 API