DogGuyMan / react_weather

Weather Project

배포 사이트 : https://dogguyman.github.io/react_weather/

목차

1. 기획 문서

2. 시스템 설계

---

Weather Project 기획 문서

목차

1. 개요 2. 기능적목표 3. 요구,제약사항

---

1. 개요

• 접속한 기기 (모바일, PC) 플랫폼들의 위치에 따라 현재 날씨의 정보를 시각적이고 심미적으로 제공하는 것이 주목표입니다.

2. 기능적 목표

2-1 자료 흐름도

• 1. 최상위

  • 

• 2.위도 경도 위치탐색

  • 
    • input : 팝업 허용
    • output : latitude longitude

• 3.날씨 정보 얻기

  • 
  • input : latitude longitude
  • output : weather Json

2-2 기능

1. 아이콘 : 날씨와 시간 따라 각기 다른 아이콘
   • 디자인 툴 : clip Studio ,Figma, Zeplin
2. 배경 : 날씨와 시간 따라 각기 다른 아이콘
   • 저녁에 가까워질수록 점점 어두워지기
   • 구름이 많아질수록 배경이 점점 채도 감소(탁해짐)
3. 수치적 정보 : 온도, 시간
   • 아이콘 밑에 온도 표시
   • 좌측 상단에 현재 시각 출력
4. 위치 정보 : (도/시/군/구/동/읍/면/리)
   • 위치 정보는 영어 표기

3. 제약 사항

• Client
  • 1. 웹 브라우저 사용 가능환경
  • 2. 모바일 & PC 해상도 사용환경

---

Weather Project 시스템 설계

목차

1. 개요 2. 시스템 구조 3. 모듈설계 4. UI 설계

---

1. 개요

• Dev Tech

  1. React
  2. Typescript
  3. Scss
  4. Node.js
  5. Github

2. 시스템 구조도

3. 모듈 설계

• 사용 모듈

  • API
    1. geoLocation
    2. openWeather
  • Import
    1. react-live-clock
    2. loading
    3. weather
    4. setBackground
    5. setEllipse
    6. web-vitals

• API

  • 1. geoLocation API

    모듈	설명
    모듈이름	naviagtor.geoLocation
    기능	현재 기기의 위치를 Object로 가져옵니다
    output	Geographic coordinate : { - response.coors.latitude - response.coors.longitude }

  • 2. openWeather API

    모듈	설명
    모듈이름	openWeather
    기능	geoLocation의 위도 경도의 기상정보를 가져옵니다
    output	{ "weather":[...] "wind":{...} "name" : "City Name" }

---

• Import

  • 1.react-live-clock

    모듈	설명
    모듈이름	react-live-clock
    기능	timezone 위치에 따른 시간 출력합니다

  • 2. Loading

    모듈	설명
    모듈이름	Loading
    기능	geoLocation 접근 허락 유무에 따라 Loading Page와 Error Page 그리기 OpenWeather API가 Response 되었다면 기상정보에 따라 Weather Page 그리기
    오류	someError : geoLocation 접근 거부
    멤버 변수	isLoaded: false (API Response 유무 Boolean) error : null : (에러 String) temperature : null : (온도 Number) name:null : (기상정보 : 구름, 비, 눈) curLocation : null (현재 위치 String)
    매서드	componentDidMount() : state의 업데이트 조건을 작성. _getWeather(lat, long) : openWeather API fetch후 state 초기화

  • 3. Weather

    모듈	설명
    모듈이름	Weather
    기능	Weather호출시 Prop에들어간 값을 가지고 Weather Page의 UI를 그립니다.
    멤버 변수	weatherCases : (String Key로 각 기상상테에 따라서 입력되는 정보 처리 ex). title텍스트, subtitle, image Icon)
    함수	Weather(temperature : number, name : string, curLocation : string)

  • 4. setBackground

    모듈	설명
    모듈이름	setBackground
    기능	기상 정보를 입력받고 그에 따라 배경의 색을 다양하게 그린다.
    멤버 변수	weatherCasesBG : (String Key로 기상 정보 style class에 접근한다)
    함수	Background(name:string)

  • 5. setEllipse

    모듈	설명
    모듈이름	setEllipse
    기능	기상 정보를 입력받고 그에 따라 언덕(타원 배경)의 색을 다양하게 그립니다.
    멤버 변수	weatherCasesE : (String Key로 기상 정보 style class에 접근한다)
    함수	Ellipse(name:string)

4. UI 설계

1. Create Icon with Clip Studio

2. Create weather_from with Figma

• openWeather의 아이콘과 1대1 대응하여 새로운 아이콘 만들었습니다.

3. Convert Css From with zeplin

---

Result

1. PC

2. Mobile

---

참고

1. 소프트웨어 SW 설계 문서
2. 리액트 깃허브 배포법