🌞 Project 1 - Naonna

💻 프로젝트 바로가기

📑 목차

• ✨ 프로젝트 소개
• 🧑‍🤝‍🧑 팀원 소개
• 🛠️ 기술 스택
• ⚙ 프로젝트 구조
• 📝 프로젝트 상세정보

✨ 프로젝트 소개

밖에서 만나는 약속을 잡을 때, 신경쓰지 않을 수 없는 중요한 요소, 날씨! GDSC KNU 1기 프로젝트 1팀에서 제작한 서비스 '나온나'에서. 약속을 잡을 위치를 지정하면, 일주일간의 날씨를 계산해서, 여러분들께 최적의 날씨를 추천해 드립니다!

🧑‍🤝‍🧑 팀원 소개

FrontEnd

이휘찬	장윤성

BackEnd

이민우	이지혁

Data

김은정

🛠️ 기술 스택

⚙ 프로젝트 구조

src
│  district.json
│  index.css
│  index.tsx
│  
├─api
│      changeWeatherData.ts
│      getWeatherData.ts
│      postWeatherData.ts
│      
├─components
│  │  App.tsx
│  │  CategorySelect.tsx
│  │  Deck.tsx
│  │  Error.tsx
│  │  ItemSelector.tsx
│  │  OptionHeader.tsx
│  │  Pill.tsx
│  │  ResultCalendar.tsx
│  │  ResultDetail.tsx
│  │  Stack.tsx
│  │  StepHeader.tsx
│  │  WeatherMain.tsx
│  │  WeatherScoreList.tsx
│  │  
│  ├─Loader
│  │      index.css
│  │      Loader.tsx
│  │      
│  └─styles
│          common.ts
│          
├─icon
│      Arrow.tsx
│      Down.tsx
│      Warning.tsx
│      
├─pages
│  │  Main.tsx
│  │  Option.tsx
│  │  OptionResult.tsx
│  │  
│  └─option
│          StepOne.tsx
│          StepThree.tsx
│          StepTwo.tsx
│          
├─routes
│      RootRouter.tsx
│      
├─store
│      store.ts
│      
└─types
        apiTypes.ts
        component-props.ts
        districtType.ts
        storeType.ts

📝 프로젝트 상세정보

메인화면

현재 자신의 위치의 날씨와 날씨 점수, 그리고 시간대별 날씨를 알 수 있습니다.

날짜 선택

약속을 잡을 날짜들을 선택합니다.

지역 선택

약속이 있는 지역을 선택합니다.

카테고리 선택

위의 카테고리를 선택하면 약속의 종류에 따라서 날씨 우선순위가 변경됩니다. 약속의 종류에 따라서 날씨 점수 산정방법을 커스텀 할 수 있습니다.

결과

결과창은 날씨점수의 순위별로 날씨, 자외선, 습도, 미세먼지 농도, 최고 & 최저기온 그리고 날씨 점수를 보여줍니다. 옆으로 드래그 하면 다음 순위의 날짜를 확인 할 수 있습니다.

스와이프 창

해당 창을 옆으로 드래그 하면 결과를 다시 확인 할 수 있습니다.