[ADD]Make Covid19 Map function - Utilize Leaflet Service for making Map - Circles for Covid19 / Recovered / Deaths - Detect location of country and zoom-in - Click Effects on infoboxes by CSS 맵 구현 1) useEffect in App.js, 모든 국가의 바이러스 관련 데이터를 fetch 해온다 await fetch("https://disease.sh/v3/covid-19/countries") 2) setMapCountries 의 상태로 데이터 저장 3) 상태값 mapCenter, mapZoom, mapCountries, casesType 을 Map 컴포..

[ADD]Worldwide new cases Bar Chart - Utilize React-Chart-js2 - Use Bar Element instead of Line Element 국가별 실시간 확진자수 목록 렌더링(Live Cases by Country) 1) useEffect, 모든 국가의 바이러스 관련 데이터를 fetch 해온다 await fetch("https://disease.sh/v3/covid-19/countries") data 2) sortData function 을 이용, value(cases) 값 기준으로 국가들을 내림차순 정렬 3) setTableData(sortedData) 상태에 저장 4) Table Component 에 sortedData 를 렌더링 App.js import ..

Framework [ADD]Make Category function and Data table - Make Coronavirus/Recovered/Deaths Info Boxes - Get data from disease.sh(API) and Structure through Material UI Covid19 API(Fetch Data) import React, { useState, useEffect } from 'react' import './App.css'; import { MenuItem, FormControl, Select, Card, CardContent } from "@material-ui/core" import InfoBox from './Infobox' import Map from './M..

작업 내용 Complete chatroom function Add chat-room in each picture Chat function is available for logined user Applied CSS and CSS-Animation Applied Media-Query(Responsive Web for Laptop/Tablet/Mobile) Apply dotenv for firebase API Key Hide all of sensitive info in .env Deploy app by Firebase 배포주소: https://j-star-gram.firebaseapp.com/ chatroom.js 1) get data and render 데이터베이스에 변화가 있을때마다 새 데이터(모든 메세지..

작업 내용 파이어베이스를 이용하여 로그인 및 로그아웃을 구현 사진에 대해 이야기를 나눌 수 있는 채팅 기능을 구현 로그인 -> 채팅 기능 사용 가능 로그인X-> 사진만 볼 수 있음 상단으로 스크롤이동할 수 있는 버튼 추가 framer-motion 을 이용하여 애니메이션 적용. App.js 1) 로그인/로그아웃 구글 로그인 및 로그아웃을 구현하기 위해 firebase 의 projectAuth(=firebase.auth()) 를 이용한다. 로그인 버튼을 누르면 google 창이 뜬다. 로그인/로그아웃 변화가 생길때마다 useEffect 에서 유저 로그인 상태를 저장한다. import Title from "./comps/Title.js"; import UploadForm from "./comps/UploadF..

Modal.js framer-motion 라이브러리를 이용하여 이미지가 opacity 0->1 으로 변화하고 상단에서 아래로 떨어지도록 했다. import React from "react"; import styled from "styled-components"; import { motion } from "framer-motion"; import Chatroom from "./Chatroom"; const Modal = ({ selectedImg, setSelectedImg, user }) => { const handleClick = (e) => { // console.log(e.target.classList); if (e.target.classList.contains("backdrop")) { setSe..