- 접속한 기기 (모바일, PC) 플랫폼들의 위치에 따라 현재 날씨의 정보를 시각적이고 심미적으로 제공하는 것이 주목표입니다.
-
1. 최상위
-
2.위도 경도 위치탐색
-
3.날씨 정보 얻기
- 아이콘 : 날씨와 시간 따라 각기 다른 아이콘
- 디자인 툴 : clip Studio ,Figma, Zeplin
- 배경 : 날씨와 시간 따라 각기 다른 아이콘
- 저녁에 가까워질수록 점점 어두워지기
- 구름이 많아질수록 배경이 점점 채도 감소(탁해짐)
- 수치적 정보 : 온도, 시간
- 아이콘 밑에 온도 표시
- 좌측 상단에 현재 시각 출력
- 위치 정보 : (도/시/군/구/동/읍/면/리)
- 위치 정보는 영어 표기
- Client
-
- 웹 브라우저 사용 가능환경
-
- 모바일 & PC 해상도 사용환경
-
1. 개요 2. 시스템 구조 3. 모듈설계 4. UI 설계
-
- React
- Typescript
- Scss
- Node.js
- Github
-
- API
- geoLocation
- openWeather
- Import
- react-live-clock
- loading
- weather
- setBackground
- setEllipse
- web-vitals
- API
-
-
모듈 설명 모듈이름 naviagtor.geoLocation 기능 현재 기기의 위치를 Object로 가져옵니다 output Geographic coordinate : {
- response.coors.latitude
- response.coors.longitude
} -
모듈 설명 모듈이름 openWeather 기능 geoLocation의 위도 경도의 기상정보를 가져옵니다 output {
"weather":[...]
"wind":{...}
"name" : "City Name"
}
-
-
-
모듈 설명 모듈이름 react-live-clock 기능 timezone 위치에 따른 시간 출력합니다 -
모듈 설명 모듈이름 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 초기화 -
모듈 설명 모듈이름 Weather 기능 Weather호출시 Prop에들어간 값을 가지고 Weather Page의 UI를 그립니다. 멤버 변수 weatherCases : (String Key로 각 기상상테에 따라서 입력되는 정보 처리
ex). title텍스트, subtitle, image Icon)함수 Weather(temperature : number, name : string, curLocation : string) -
모듈 설명 모듈이름 setBackground 기능 기상 정보를 입력받고 그에 따라 배경의 색을 다양하게 그린다. 멤버 변수 weatherCasesBG : (String Key로 기상 정보 style class에 접근한다) 함수 Background(name:string) -
모듈 설명 모듈이름 setEllipse 기능 기상 정보를 입력받고 그에 따라 언덕(타원 배경)의 색을 다양하게 그립니다. 멤버 변수 weatherCasesE : (String Key로 기상 정보 style class에 접근한다) 함수 Ellipse(name:string)
-
- openWeather의 아이콘과 1대1 대응하여 새로운 아이콘 만들었습니다.