We Wear Weather

오늘, 시간대별, 주간 날씨를 제공하고 현재 시간의 날씨에 맞는 옷차림 이미지를 제공하여 사용자가 현재 날씨가 어떤지, 어떤 옷을 입어야하는지를 시각적으로 제공하는 모바일 서비스

팀원 소개

이도하

조병현

김도경

노태희

목차

• We Wear Weather
• 목차
  • 🔗 배포 링크
  • ⚙️ 실행 방법
  • 👩‍💻 기능 UI
  • ⌛ 진행 과정
    • 회의 및 기록
  • 브랜치 전략
  • 커밋 메시지 컨벤션
  • 🤝팀 규칙
    • formatting 및 lint 전략
    • 기타
    • 협업툴
  • 📂 폴더 구조
  • 🛠️ 기술 스택

🔗 배포 링크

배포 예정

⚙️ 실행 방법

npm install
npm run start

👩‍💻 기능 UI

현재위치 수집, 성별/나이 수집, 홈, 모달, 카드위젯, 서치, 주간, 설정

위치정보 수집	성별/나이 수집	현재위치에 따른 옷차림

카드 위젯 / 낮	카드 위젯 / 밤	위치 검색

주간 날씨	설정

⌛ 진행 과정

회의 및 기록

• 매주 진행 상황 및 이슈 공유
• 공유된 회의 내용을 노션에 기록
• 회의 내용을 토대로 다음주 이슈를 선정 및 Github 이슈로 등록

브랜치 전략

• main
• develop
• 기능별 브랜치: feature/forecast

커밋 메시지 컨벤션

타입	설명
Feat	새로운 기능 추가
Fix	버그 수정
Env	개발 환경 관련
Style	코드 자체의 변경이 없는 경우, formatting, semicolon 등
Refactor	코드 리팩토링 (더 효율적인 코드로 변경 등)(기능은 동일)
Design	CSS 등 사용자 UI 디자인 변경
Comment	필요한 주석 추가 및 변경
Docs	내부 문서 추가/수정
Test	테스트 코드, 리팩토링 테스트 코드 추가
Chore	빌드, 패키지 매니저 수정, 그 외 기타 수정 (.gitignore 등)
Rename	파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
Remove	파일 또는 폴더를 삭제하는 작업만한 경우
!BREAKING CHANGE	커다란 API 변경의 경우
!HOTFIX	급하게 치명적인 버그를 고치는 경우

🤝팀 규칙

formatting 및 lint 전략

// formatting
{
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "singleQuote": true,
  "proseWrap": "preserve",
  "semi": true,
  "printWidth": 120,
  "endOfLine": "lf",
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "arrowParens": "always"
}

// ESLint
{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {},
  "ignorePatterns": ["dist/", "node_modules/"]
}

기타

• 폴더명: 대문자
• React Function: 함수 표현식
• 함수: 함수 선언문
• 함수이름: camel
• 컴포넌트: pascal
• 훅,로직파일: camel
• 상수변수: 대문자

협업툴

• discord
• notion

📂 폴더 구조

project-root/
│
├── public/ # 정적 파일들
│ ├── index.html
│ └── manifest.json
│
├── src/ # 소스 코드
│ ├── Components/    # 재사용 컴포넌트들
│ ├── Hooks/         # custom hooks
│ ├── Api/           # api 함수들
│ ├── Assets/        # images, icons
│ ├── Atom/          # Recoil Atoms
│ ├── Pages/         # 페이지별 컴포넌트
│ ├── Router/        # 라우팅
│ ├── Types/         # TypeScript 타입
│ ├── Utils/         # 공통 함수
│ ├── App.tsx        # App 컴포넌트
│ ├── index.tsx      # 진입점 파일
│ └── GlobalStyle.ts # 전역 스타일 설정파일
│
├── .env
├── .gitignore
├── .prettierrc.js
├── .eslintrc
├── package.json
├── tsconfig.json
└── README.md

🛠️ 기술 스택