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};
+`;