🌈 이상청

이화인을 위한 기상 정보 및 옷차림 정보 제공 서비스

https://www.eweather.site/

시연 영상

시연영상

🌦 ABOUT E-WEATHER

💡 기존 교내 커뮤니티 날씨 게시판의 시각 정보 부족과, 기상정보를 종합적으로 파악할 수 없다는 문제점에서 시작하여 고안한, 이화인을 위한 기상정보 서비스입니다. 오픈 API를 활용해 매일의 기상정보를 제공하며, 옷에 대한 투표를 통해 교내 커뮤니티 날씨게시판의 기능을 시각적으로 확장합니다. 이화그린 색의 야잠, 뽀글이후드 등을 입은 이화 곰돌이를 통해 기온과 강수상태를 파악할 수 있습니다.

🛠 기술 스택 (Technique Used)

✔️ CI/CD PipeLine

🌟팀원 소개

1. 장아연(@JangAyeon)

• 백엔드 협업을 통한 REST API, Google OAuth 2.0 로그인, 쿠키/토큰에 대한 이해
• 디자이너 협업을 통한 UI/UX 이해 및 png layer 활용한 곰돌이 아바타 생성
• GitHub Action 활용한 CI/CD 구축
  ( AWS S3 & CloudFront & Route 53 통한 정적 웹호스팅과 서브 도메인 api 연결 )
• Axios interceptor 이용한 http request와 response 커스텀
• Recoil 활용한 비동기적 상태관리 및 UI 관리를 통한 사용자 경험 향상
• 미디어 쿼리와 useWindowWidth 훅을 활용한 반응형 처리
• OpenGraph Protocol 사용한 SEO 처리

2. 최은비(@eunbi)

• Save 페이지
• Vote 페이지

3. 김소현(@zhtmahthgus)

• MyPage 페이지
• SaveRecord 페이지

📋 페이지 소개

1. 로그인 페이지

PC	MOBILE

2. 메인 페이지

PC	MOBILE

• 실시간 날씨 정보
  
• carousel 이용한 일기예보
  
• 날씨 정보에 맞는 png 파일 layered하여 곰돌이 아바타 구현
  

2-1. 곰돌이 옵션 모달창 : 옷차림 추천 받기

옷차림 추천 받기

2-2. 곰돌이 옵션 모달창 : 공유하기

카카오톡 공유하기	트위터 공유하기

링크 복사하기	로컬에 곰돌이 아바타 이미지 저장

2-3. 투표하기 (로그인된 경우에만!)

PC : 투표하기	MOBILE : 투표하기

2-4. 향상된 유저 경험을 위한 suspense 이용한 비동기 통신 splash

로딩 스플래시

2-5. 로그인 X 일 때 로그인 필수 기능 사용한 경우

• 투표 목록만 볼 수 있고 클릭 시에도 투표가 불가능함
  
• 로그인인된 유저만 사용가능한 페이지로 이동하려고 하면 강제적으로 로그인 페이지로 이동함
  

📚디렉토리 구조

📁src
├── 📑.env <!--서버주소, 각종 키-->
├── 📑index.js <!--JS entry & set HOC-->
├── 📑App.js <!--Main Excution File-->
├── 📑AppRouter.js <!--Route-->
├── 📁apis <!--Api 호출-->
├── 📁assets <!--Image File (SVG) -->
├── 📁components <!--Atomic design-->
    └── 📁common <!--여러 곳에서 쓰이는 컴포넌트-->
├── 📁pages <!--Routing에 따른 렌더링할 page-->
├── 📁styles <!--Styled Component 세팅 & 스타일 관련 변수-->
├── 📁constants  <!--각종 상수 값 관리-->
├── 📁hooks <!--custiom hooks-->
├── 📁context <!--Recoil 상태 관리 : 유저 정보 및 기상 정보-->
└── 📁utils <!--각종 유틸 함수-->