GO-SOPT-WEB · pinktopaz · May 10, 2023 · May 10, 2023 · May 10, 2023 · May 10, 2023
diff --git a/week4/week4-project/.eslintrc.cjs b/week4/week4-project/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}
diff --git a/week4/week4-project/.gitignore b/week4/week4-project/.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/week4-project/index.html b/week4/week4-project/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 + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/week4/week4-project/package.json b/week4/week4-project/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "week4-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.2"
+  }
+}
diff --git a/week4/week4-project/public/vite.svg b/week4/week4-project/public/vite.svg
diff --git a/week4/week4-project/src/App.tsx b/week4/week4-project/src/App.tsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { ThemeProvider } from "styled-components";
+import { useGetWeatherData } from "./lib/api/useGetWeatherData";
+import WeatherPage from "./Pages/WeatherPage";
+import Router from "./Router";
+import GlobalStyle from "./style/globalStyle";
+import theme from "./style/theme";
+
+function App() {
+  const [count, setCount] = useState(0);
+  // const { weatherInfo } = useGetWeatherData("Seoul");
+  // console.log(weatherInfo);
+  return (
+    <>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <Router />
+      </ThemeProvider>
+    </>
+  );
+}
+
+export default App;
diff --git a/week4/week4-project/src/Pages/Error404.tsx b/week4/week4-project/src/Pages/Error404.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+
+const Error404 = () => {
+  return <StErrorMsg>페이지가 존재하지 않습니다!</StErrorMsg>;
+};
+
+const StErrorMsg = styled.h2`
+  margin-left: 3rem;
+  font-size: 3rem;
+`;
+
+export default Error404;
diff --git a/week4/week4-project/src/Pages/WeatherPage.tsx b/week4/week4-project/src/Pages/WeatherPage.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import Header from "../components/atom/Header";
+import SearchInput from "../components/atom/SearchInput";
+
+const WeatherPage = () => {
+  return (
+    <div>
+      <Header />
+      <SearchInput />
+      <Outlet />
+    </div>
+  );
+};
+
+export default WeatherPage;
diff --git a/week4/week4-project/src/Router.tsx b/week4/week4-project/src/Router.tsx
@@ -0,0 +1,21 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import WeatherSection from "./components/organism/WeatherSection";
+import Error404 from "./Pages/Error404";
+import WeatherPage from "./Pages/WeatherPage";
+
+const Router = () => {
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<WeatherPage />}>
+            <Route path="/:type/:area" element={<WeatherSection />} />
+          </Route>
+          <Route path="*" element={<Error404 />} />
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
+};
+
+export default Router;
diff --git a/week4/week4-project/src/components/atom/Header.tsx b/week4/week4-project/src/components/atom/Header.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import styled from "styled-components";
+
+const Header = () => {
+  return (
+    <>
+      <StHeader>
+        <h1>☀️ 승경씨의 날씨 예보 ☀️</h1>
+      </StHeader>
+    </>
+  );
+};
+
+const StHeader = styled.header`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem;
+
+  width: 100%;
+  height: 8rem;
+
+  background-color: ${({ theme }) => theme.colors.Weather_Header_Blue};
+
+  > h1 {
+    font-size: 3.5rem;
+    color: ${({ theme }) => theme.colors.Weather_Text_White};
+  }
+`;
+
+export default Header;
diff --git a/week4/week4-project/src/components/atom/SearchInput.tsx b/week4/week4-project/src/components/atom/SearchInput.tsx
@@ -0,0 +1,81 @@
+import React, { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+const SearchInput = () => {
+  const navigate = useNavigate();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDailyInfo, setIsDailyInfo] = useState<boolean>(true);
+
+  const handleOptionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    if (e.target.value === "daily") setIsDailyInfo(true);
+    else setIsDailyInfo(false);
+  };
+
+  const handleNavigate = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const area = inputRef.current?.value;
+    const type = isDailyInfo ? "day" : "week";
+    console.log(area, type);
+    navigate(`/${type}/${area}`);
+  };
+
+  return (
+    <>
+      <StSearchForm onSubmit={(e) => handleNavigate(e)}>
+        <StPeriodOption onChange={(e) => handleOptionChange(e)}>
+          <option value="daily">오늘</option>
+          <option value="weekly">주간</option>
+        </StPeriodOption>
+
+        <input placeholder="영어로 도시명 ex) seoul " ref={inputRef} />
+        <button type="submit">날씨 검색</button>
+      </StSearchForm>
+    </>
+  );
+};
+
+const StSearchForm = styled.form`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+
+  width: 100%;
+
+  > input {
+    width: 30rem;
+    height: 6rem;
+    padding: 2rem;
+
+    border-radius: 2rem;
+    border: none;
+    background-color: ${({ theme }) => theme.colors.Weather_Header_Blue};
+
+    font-size: 2.3rem;
+  }
+
+  > button {
+    width: 10rem;
+    height: 6rem;
+
+    background-color: ${({ theme }) => theme.colors.Weather_Btn_Blue};
+    border: none;
+    border-radius: 1.5rem;
+
+    font-size: 2rem;
+    color: ${({ theme }) => theme.colors.Weather_Text_White};
+  }
+`;
+
+const StPeriodOption = styled.select`
+  width: 8rem;
+  height: 3rem;
+
+  border-radius: 3rem;
+  border: 0.2rem solid gray;
+`;
+
+export default SearchInput;
diff --git a/week4/week4-project/src/components/atom/WeatherCard.tsx b/week4/week4-project/src/components/atom/WeatherCard.tsx
@@ -0,0 +1,109 @@
+import styled from "styled-components";
+import { WeatherInfoToRender } from "../../types/weather";
+
+export interface WeatherCardProps {
+  weatherCardInfo: WeatherInfoToRender;
+  isDaily: boolean;
+}
+
+const WeatherCard = (props: WeatherCardProps) => {
+  const {
+    weatherCardInfo: {
+      name,
+      main: { feels_like, temp, temp_min, temp_max },
+      clouds: { all },
+      weatherImg,
+      dt_txt,
+    },
+    isDaily,
+  } = props;
+  let [month, date]: [string, string] = ["", ""];
+  if (dt_txt) {
+    [month, date] = dt_txt.slice(5, 10).split("-");
+  }
+
+  return (
+    <>
+      <StCardWrapper>
+        {isDaily ? (
+          <h2>{name}</h2>
+        ) : (
+          <time>
+            {month}/{date}
+          </time>
+        )}
+
+        <img src={weatherImg} />
+
+        <StWeatherInfoWrapper>
+          <li>
+            <p>체감 온도</p>
+            <h2>{temp}</h2>
+          </li>
+          <li>
+            <h2>체감 온도</h2>
+            <p>{feels_like}</p>
+          </li>
+          <li>
+            <h2>최저 / 최고</h2>
+            <p>
+              {temp_min}/{temp_max}
+            </p>
+          </li>
+          <li>
+            <h2>구름</h2>
+            <p>{all}%</p>
+          </li>
+        </StWeatherInfoWrapper>
+      </StCardWrapper>
+    </>
+  );
+};
+
+const StCardWrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem;
+  gap: 1.3rem;
+
+  width: 25rem;
+
+  background-color: ${({ theme }) => theme.colors.Weather_Card_Blue};
+  border-radius: 4rem;
+
+  > time,
+  h2 {
+    font-size: 2.5rem;
+  }
+
+  > img {
+    width: 95%;
+    height: 17rem;
+  }
+`;
+
+const StWeatherInfoWrapper = styled.ul`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.8rem;
+
+  width: 95%;
+
+  > li {
+    display: flex;
+    justify-content: space-between;
+
+    width: 100%;
+
+    > p,
+    h2 {
+      font-size: 1.5rem;
+    }
+  }
+`;
+
+export default WeatherCard;