GO-SOPT-WEB · seojisoosoo · May 11, 2023 · May 11, 2023 · May 11, 2023 · May 11, 2023
diff --git a/week4/weather/.eslintrc.cjs b/week4/weather/.eslintrc.cjs
@@ -0,0 +1,23 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "prettier"],
+  extends: [
+    "airbnb",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+  ],
+  rules: {
+    "linebreak-style": 0,
+    "import/prefer-default-export": 0,
+    "prettier/prettier": 0,
+    "import/extensions": 0,
+    "import/no-unresolved": 0,
+    "import/no-extraneous-dependencies": 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
+    "react/prop-types": 0,
+    "react/jsx-filename-extension": [2, { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+  },
+};
diff --git a/week4/weather/.gitignore b/week4/weather/.gitignore
@@ -0,0 +1,25 @@
+.env
+# 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/.prettierrc b/week4/weather/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "trailingComma": "all",
+  "bracketSameLine": true,
+  "endOfLine": "auto"
+}
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>수수의 기상예보</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": "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"
+  },
+  "dependencies": {
+    "axios": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-loading-skeleton": "^3.3.1",
+    "react-query": "^3.39.3",
+    "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/@components/common/header.jsx b/week4/weather/src/@components/common/header.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { styled } from "styled-components";
+
+export default function Header() {
+  return (
+    <HeaderWrapper>
+      <Title>🌞수수의 기상예보⛱️</Title>
+    </HeaderWrapper>
+  );
+}
+
+const HeaderWrapper = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  padding: 2rem;
+
+  background-color: ${({ theme }) => theme.colors.blue};
+`;
+
+const Title = styled.h1`
+  ${({ theme }) => theme.fonts.header};
+  color: ${({ theme }) => theme.colors.black};
+  cursor: pointer;
+`;
diff --git a/week4/weather/src/@components/common/pageLayout.jsx b/week4/weather/src/@components/common/pageLayout.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { styled } from "styled-components";
+import Header from "./header";
+
+export default function PageLayout(props) {
+  const { children } = props;
+  return (
+    <PageWrapper>
+      <Header />
+      {children}
+    </PageWrapper>
+  );
+}
+
+const PageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+`;
diff --git a/week4/weather/src/@components/common/search.jsx b/week4/weather/src/@components/common/search.jsx
@@ -0,0 +1,10 @@
+import React, { useState } from "react";
+
+export default function Search() {
+  return (
+    <>
+      <input placeholder="영어로 도시명 ex) seoul" />
+      <button type="button">날씨 검색</button>
+    </>
+  );
+}
diff --git a/week4/weather/src/@components/common/weatherCard.jsx b/week4/weather/src/@components/common/weatherCard.jsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import { styled } from "styled-components";
+import { WEATHER_TYPE } from "../../core/weatherImg";
+
+export default function WeatherCard(props) {
+  const { weatherData, title } = props;
+  const { main, clouds } = weatherData;
+  const [weatherImg, setWeatherImg] = useState("");
+
+  useEffect(() => {
+    weatherData?.weather &&
+      setWeatherImg(WEATHER_TYPE.filter((w) => w.description === weatherData?.weather[0]?.description)[0]?.imgURL);
+  }, [weatherData]);
+
+  return (
+    <WeatherCardWrapper>
+      <h1>{title}</h1>
+      <img src={weatherImg} alt={title} />
+      <p>온도 | {main?.temp}</p>
+      <p>체감 온도 | {main?.feels_like}</p>
+      <p>
+        최저/최고 | {main?.temp_min}/{main?.temp_max}
+      </p>
+      <p>구름 | {clouds?.all}</p>
+    </WeatherCardWrapper>
+  );
+}
+
+const WeatherCardWrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  margin: 1rem;
+  padding: 2rem;
+
+  border: 0.3rem solid ${({ theme }) => theme.colors.blue};
+  border-radius: 1rem;
+  background-color: ${({ theme }) => theme.colors.skyblue};
+  ${({ theme }) => theme.fonts.title}
+`;
diff --git a/week4/weather/src/@components/skeleton/SkeletonTemplate.jsx b/week4/weather/src/@components/skeleton/SkeletonTemplate.jsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { keyframes, styled } from "styled-components";
+
+export default function SkeletonTemplate() {
+  return (
+    <SkeletonBoxWrapper>
+      <Title></Title>
+      <Img></Img>
+      <Text></Text>
+    </SkeletonBoxWrapper>
+  );
+}
+
+const loading = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  50%,
+  100% {
+    transform: translateX(45rem);
+  }
+`;
+
+const SkeletonBoxWrapper = styled.section`
+  width: 28rem;
+  height: 40rem;
+
+  margin: 1rem;
+
+  background-color: #ddd;
+  border-radius: 1rem;
+
+  overflow: hidden;
+`;
+
+const Title = styled.div`
+  width: 25rem;
+  height: 3rem;
+
+  margin: 1.5rem 0 0.5rem 0;
+
+  background-color: rgba(145, 145, 145, 0.1);
+
+  animation: ${loading} 4s infinite;
+`;
+
+const Img = styled.div`
+  width: 25rem;
+  height: 25rem;
+
+  margin: 0.5rem;
+
+  background-color: rgba(145, 145, 145, 0.1);
+
+  animation: ${loading} 4s infinite;
+`;
+
+const Text = styled.div`
+  width: 25rem;
+  height: 8rem;
+
+  margin: 0.5rem;
+
+  background-color: rgba(145, 145, 145, 0.1);
+
+  animation: ${loading} 4s infinite;
+`;
diff --git a/week4/weather/src/@components/todayWeather/todayWeatherInfo.jsx b/week4/weather/src/@components/todayWeather/todayWeatherInfo.jsx
@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import WeatherCard from "../common/weatherCard";
+import useWeather from "../../hooks/useWeather";
+import ErrorPage from "../../@pages/errorPage";
+import SkeletonTemplate from "../skeleton/skeletonTemplate";
+
+export default function DetailWeatherInfo() {
+  const { area } = useParams();
+  const { fetchTodayWeatherInfo, isError, todayData, isLoading } = useWeather();
+
+  useEffect(() => {
+    fetchTodayWeatherInfo(area);
+  }, []);
+
+  useEffect(() => {
+    fetchTodayWeatherInfo(area);
+  }, [area]);
+
+  if (isError) {
+    return <ErrorPage />;
+  }
+
+  return <>{isLoading ? <SkeletonTemplate /> : <WeatherCard weatherData={todayData} title={todayData.name} />}</>;
+}
-  if (isError) {
-    return <ErrorPage />;
-  }
-
-  return <>{isLoading ? <SkeletonTemplate /> : <WeatherCard weatherData={todayData} title={todayData.name} />}</>;
-}
+  return <>{isError? <ErrorPage /> :
+      isLoading ? <SkeletonTemplate /> : <WeatherCard weatherData={todayData} title={todayData.name} />}</>;
+}
-  if (isError) {
-    return <ErrorPage />;
-  }
-
-  return <>{isLoading ? <SkeletonTemplate /> : <WeatherCard weatherData={todayData} title={todayData.name} />}</>;
-}
+  return <>{isError? <ErrorPage /> :
+      isLoading ? <SkeletonTemplate /> : <WeatherCard weatherData={todayData} title={todayData.name} />}</>;
+}
diff --git a/week4/weather/src/@components/weekWeather/weekWeatherInfo.jsx b/week4/weather/src/@components/weekWeather/weekWeatherInfo.jsx
@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import WeatherCard from "../common/weatherCard";
+import { styled } from "styled-components";
+import useWeather from "../../hooks/useWeather";
+import ErrorPage from "../../@pages/errorPage";
+import SkeletonTemplate from "../skeleton/skeletonTemplate";
+
+export default function WeekWeatherInfo() {
+  const { area } = useParams();
+  const { fetchWeekWeatherInfo, isError, weekDatas, isLoading } = useWeather();
+
+  useEffect(() => {
+    fetchWeekWeatherInfo(area);
+  }, []);
+
+  useEffect(() => {
+    fetchWeekWeatherInfo(area);
+  }, [area]);
+
+  if (isError) {
+    return <ErrorPage />;
+  }
+
+  return (
+    <CardWrapper>
+      {weekDatas.list?.slice(0, 5).map((weatherData, i) => (
+        <>
+          {isLoading ? (
+            <SkeletonTemplate />
+          ) : (
+            <WeatherCard key={i} weatherData={weatherData} title={weatherData?.dt_txt?.split(" ")[0]} />
+          )}
+        </>
+      ))}
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.section`
+  display: flex;
+  flex-wrap: wrap;
+
+  width: 100rem;
+`;
diff --git a/week4/weather/src/@pages/errorPage.jsx b/week4/weather/src/@pages/errorPage.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { styled } from "styled-components";
+
+export default function ErrorPage() {
+  return (
+    <ErrorPageWrapper>
+      <ErrorMessage>Error</ErrorMessage>
+    </ErrorPageWrapper>
+  );
+}
+
+const ErrorMessage = styled.h1`
+  ${({ theme }) => theme.fonts.header}
+`;
+
+const ErrorPageWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+
+  background-color: ${({ theme }) => theme.fonts.blue};
+`;