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;
+    `
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		VITE_APP_WEATHER = faef74b60ddbb5dddfad18ef8c6ad3b5