GO-SOPT-WEB · yesongoget · May 10, 2023 · May 10, 2023 · May 11, 2023 · May 11, 2023
diff --git a/week4_weather/.env b/week4_weather/.env
@@ -0,0 +1 @@
+VITE_APP_WEATHER = faef74b60ddbb5dddfad18ef8c6ad3b5
diff --git a/week4_weather/.eslintrc.cjs b/week4_weather/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:react/recommended',
+ 'plugin:react/jsx-runtime',
+ 'plugin:react-hooks/recommended',
+ ],
+ parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+ settings: { react: { version: '18.2' } },
+ plugins: ['react-refresh'],
+ rules: {
+ 'react-refresh/only-export-components': 'warn',
+ },
+}
diff --git a/week4_weather/.gitignore b/week4_weather/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/week4_weather/index.html b/week4_weather/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite + React</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.jsx"></script>
+ </body>
+</html>
diff --git a/week4_weather/package.json b/week4_weather/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "week4_weather",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview",
+ "start": "yarn dotenv -e .env node src/index.js"
+ },
+ "dependencies": {
+ "axios": "^1.4.0",
+ "dotenv": "^16.0.3",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.11.1",
+ "styled-components": "^6.0.0-rc.1"
+ },
+ "devDependencies": {
+ "@types/react": "^18.0.28",
+ "@types/react-dom": "^18.0.11",
+ "@vitejs/plugin-react": "^4.0.0",
+ "eslint": "^8.38.0",
+ "eslint-plugin-react": "^7.32.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.3.4",
+ "vite": "^4.3.2"
+ }
+}
diff --git a/week4_weather/public/vite.svg b/week4_weather/public/vite.svg
diff --git a/week4_weather/src/App.css b/week4_weather/src/App.css
@@ -0,0 +1,42 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/week4_weather/src/App.jsx b/week4_weather/src/App.jsx
@@ -0,0 +1,16 @@
+import { ThemeProvider } from "styled-components";
+import Router from "./Router";
+
+import GlobalStyle from "./styles/globalStyle";
+import theme from "./styles/theme";
+
+const App = () => (
+ <>
+ <ThemeProvider theme={theme}>
+ <GlobalStyle />
+ <Router />
+ </ThemeProvider>
+ </>
+);
+
+export default App;
diff --git a/week4_weather/src/Router.jsx b/week4_weather/src/Router.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Home from "./pages/Home";
+import Day from "./pages/Day";
+import Week from "./pages/Week";
+import Daycard from "./components/Daycard";
+import Weekcard from "./components/Weekcard";
+import Error from "./pages/Error";
+import ErrorMessage from "./components/ErrorMessage";
+
+const Router = () => {
+ return (
+ <BrowserRouter>
+ <Routes>
+ <Route path="/" element={<Home />} />
+ <Route path="/day" element={<Day />}>
+ <Route path=":area" element={<Daycard />} />
+ </Route>
+ <Route path="/week" element={<Week />}>
+ <Route path=":area" element={<Weekcard />} />
+ </Route>
+ <Route path="/*" element={<Error />}>
+ <Route path="*" element={<ErrorMessage />} />
+ </Route>
+ </Routes>
+ </BrowserRouter>
+ );
+};
+
+export default Router;
diff --git a/week4_weather/src/components/Daycard.jsx b/week4_weather/src/components/Daycard.jsx
@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import axios from "axios";
+import { useParams } from "react-router-dom";
+import { WEATHER_TYPE } from "../constants/weather";
+
+const Daycard = () => {
+ const { area } = useParams();
+ const [weather, setWeather] = useState({});
+ const imgURL =
+ WEATHER_TYPE.filter(
+ (item) => item.description === weather.weather?.[0].description
+ )[0]?.imgURL || WEATHER_TYPE[0].imgURL;
+
+ console.log(imgURL);
+ useEffect(() => {
+ axios
+ .get(
+ `https://api.openweathermap.org/data/2.5/weather?q=${area}&appid=${
+ import.meta.env.VITE_APP_WEATHER
+ }&units=metric`
+ )
+ .then((response) => {
+ console.log(response.data);
+ setWeather(response.data);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }, [area]);
+
+ return (
+ <St.CardWrapper>
+ {imgURL && (
+ <St.CardImg
+ src={imgURL}
+ alt={weather.weather?.[0].description || "weather"}
+ />
+ )}
+ <St.H1>{weather.name}</St.H1>
+ <St.Text>
+ <p>온도: </p>
+ <p>{weather.main?.temp}</p>
+ </St.Text>
+ <St.Text>
+ <p>체감 온도:</p>
+ <p>{weather.main?.feels_like}</p>
+ </St.Text>
+ <St.Text>
+ <p>최저/최고:</p>
+ <p>
+ {" "}
+ {weather.main?.temp_min} / {weather.main?.temp_max}
+ </p>
+ </St.Text>
+ <St.Text>
+ <p>구름: </p>
+ <p>{weather.clouds?.all} %</p>
+ </St.Text>
+ </St.CardWrapper>
+ );
+};
+
+export default Daycard;
+
+const St = {
+ CardWrapper: styled.article`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ margin-top: 4rem;
+ padding: 2rem;
+ width: 30rem;
+ height: 40rem;
+
+ background-color: ${({ theme }) => theme.colors.BackgroundBlue};
+ border-radius: 0.5rem;
+ box-shadow: 0 0 10px rgba(142, 157, 244, 0.2);
+ `,
+ CardImg: styled.img`
+ width: 15rem;
+ border-radius: 0.5rem;
+ margin-bottom: 2rem;
+ `,
+
+ H1: styled.h1`
+ ${({ theme }) => theme.fonts.Content};
+ color: ${({ theme }) => theme.colors.Blue};
+ margin-bottom: 3rem;
+ `,
+
+ Text: styled.div`
+ ${({ theme }) => theme.fonts.Content};
+ color: ${({ theme }) => theme.colors.Black};
+ margin-bottom: 1rem;
+
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+
+ margin-left: 3rem;
+ padding: 0 1.1rem;
+ gap: 1rem;
+ & > p {
+ flex: 1;
+ margin: 0;
+ align-items: center;
+ }
+ `,
+};
diff --git a/week4_weather/src/components/ErrorMessage.jsx b/week4_weather/src/components/ErrorMessage.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const ErrorMessage = () => {
+ return (
+ <ErrorWrapper> Error 404 : Not Found 해당 도시이름을 찾을 수 없습니다 </ErrorWrapper>
+ )
+}
+
+export default ErrorMessage
+
+const ErrorWrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ height: 100vh;
+
+ font-size: 2rem;
+ font-weight: bold;
+ color: ${({ theme }) => theme.colors.Blue};
+`
diff --git a/week4_weather/src/components/Header.jsx b/week4_weather/src/components/Header.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+
+const Header = () => {
+ return (
+ <St.HeaderWrapper>
+ <h1>🌈예손의 날씨예보🌈</h1>
+ </St.HeaderWrapper>
+ );
+};
+
+export default Header;
+
+const St = {
+ HeaderWrapper: styled.header`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ width: 100%;
+ height: 12rem;
+ padding: 2rem;
+
+ background-color: ${({ theme }) => theme.colors.Blue};
+
+ & > h1 {
+ ${({ theme }) => theme.fonts.Title};
+ color: ${({ theme }) => theme.colors.White};
+ cursor: pointer;
+ }
+ `,
+};
diff --git a/week4_weather/src/components/PageLayout.jsx b/week4_weather/src/components/PageLayout.jsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from 'styled-components';
+import Header from './Header';
+import SearchForecast from './SearchForecast';
+
+
+
+const PageLayout = (props) => {
+ const { children } = props;
+
+ return (
+ <St.Wrapper>
+ <Header/>
+ <SearchForecast/>
+ <St.ChildWrapper>
+ {children}
+ </St.ChildWrapper>
+ </St.Wrapper> 
+ )
+}
+
+export default PageLayout;
+
+const St = {
+ Wrapper : styled.section`
+ background-color:${({ theme }) => theme.colors.backgroundBlue};
+ width:100vw;
+ height:100%;
+ `,
+ ChildWrapper : styled.main`
+ display:flex;
+ justify-content:center;
+ `
+}