Csh2315/과제 1 & 프로젝트

assignments_01/PGM_hate_same_number.js

@@ -1,9 +1,16 @@
-function solution(arr)
-{
-  var answer = [];
+function solution(arr) {
+  var answer = [arr[0]];
+  let current = arr[0];
+
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] !== current) {
+      answer.push(arr[i]);
+      current = arr[i];
+    }
+  }
 
   // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다.
-  console.log('Hello Javascript')
+  console.log(answer);
 
   return answer;
-}
+}

assignments_01/PGM_largest_number.js

@@ -1,4 +1,12 @@
 function solution(numbers) {
-  var answer = '';
+  let sortedNum = numbers.map((num) => num.toString());
+
+  sortedNum.sort((a, b) => (b + a).localeCompare(a + b));
+
+  if (sortedNum[0] === "0") {
+    return "0";
+  }
+
+  var answer = sortedNum.join("");
   return answer;
-}
+}

project_01/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

project_01/src/App.js

@@ -1,8 +1,61 @@
+import React, { useState } from "react";
+import Input from "./Input";
+import Result from "./Result";
+import Error from "./Error";
+import Loader from "./Loader";
+import styled from "styled-components";
+
+const AppWrap = styled.div`
+  width: 100vw;
+  height: 100vh;
+
+  .appContentWrap {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    position: absolute;
+    padding: 20px;
+  }
+
+  input {
+    padding: 16px;
+    border: 2px black solid;
+    border-radius: 16px;
+  }
+`;
+
 function App() {
+  const API_KEY = process.env.REACT_APP_API_KEY;
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [location, setLocation] = useState(""); // location 상태 추가
+
+  const handleSearch = async (location) => {
+    try {
+      setLoading(true);
+      const response = await fetch(
+        `http://openapi.seoul.go.kr:8088/${API_KEY}/json/citydata_ppltn/1/5/${location}`
+      );
+      const data = await response.json();
+      setResult(data);
+      setLoading(false);
+    } catch (error) {
+      setError(error.message);
+      setLoading(false);
+    }
+  };
+
   return (
-    <div>
-      <h3>Application starts from here</h3>
-    </div>
+    <AppWrap>
+      <div className="appContentWrap">
+        <Input onSearch={handleSearch} />
+        {loading && <Loader />}
+        {error && <Error errorMessage={error} />}
+        {result && <Result data={result} />}{" "}
+        {/* Result 컴포넌트에는 data prop을 전달해야 함 */}
+      </div>
+    </AppWrap>
   );
 }
 

project_01/src/Error.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Error = ({ errorMessage }) => {
+  return <div className="error">{errorMessage}</div>;
+};
+
+export default Error;

project_01/src/Input.js

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+
+const Input = ({ onSearch }) => {
+  const [location, setLocation] = useState("");
+
+  const handleInputChange = (e) => {
+    setLocation(e.target.value);
+  };
+
+  const searchPopulation = (e) => {
+    if (e.key === "Enter") {
+      onSearch(location);
+    }
+  };
+
+  return (
+    <input
+      placeholder="장소를 입력하세요"
+      value={location}
+      onChange={handleInputChange}
+      type="text"
+      onKeyDown={searchPopulation}
+    />
+  );
+};
+
+export default Input;

project_01/src/Loader.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Loader = () => {
+  return <div className="loader">Loading...</div>;
+};
+
+export default Loader;

project_01/src/Result.js

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "styled-components";
+
+const ResultWrap = styled.div`
+  margin-top: 60px;
+  border: 1px black solid;
+  padding: 10px;
+  border-radius: 8px;
+
+  .level {
+    font-size: 60px;
+    margin: 10px 0 20px 0;
+  }
+  .message {
+    font-size: 20px;
+    text-align: left;
+    margin-top: 8px;
+    margin-bottom: 10px;
+  }
+`;
+
+const Result = ({ data }) => {
+  if (
+    !data ||
+    !data["SeoulRtd.citydata_ppltn"] ||
+    data["SeoulRtd.citydata_ppltn"].length === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <ResultWrap>
+      <div className="level">
+        {data["SeoulRtd.citydata_ppltn"][0]["AREA_CONGEST_LVL"]}
+      </div>
+      <div className="message">
+        {data["SeoulRtd.citydata_ppltn"][0]["AREA_CONGEST_MSG"]}
+      </div>
+    </ResultWrap>
+  );
+};
+
+export default Result;

project_01/src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

project_01/src/reportWebVitals.js

@@ -1,6 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);

project_01/src/test.json

@@ -0,0 +1,101 @@
+{
+  "SeoulRtd.citydata_ppltn": [
+    {
+      "AREA_NM": "광화문·덕수궁",
+      "AREA_CD": "POI009",
+      "AREA_CONGEST_LVL": "약간 붐빔",
+      "AREA_CONGEST_MSG": "사람들이 몰려있을 가능성이 크고 붐빈다고 느낄 수 있어요. 인구밀도가 높은 구간에서는 도보 이동시 부딪힘이 발생할 수 있어요.",
+      "AREA_PPLTN_MIN": "36000",
+      "AREA_PPLTN_MAX": "38000",
+      "MALE_PPLTN_RATE": "50.0",
+      "FEMALE_PPLTN_RATE": "50.0",
+      "PPLTN_RATE_0": "0.1",
+      "PPLTN_RATE_10": "2.6",
+      "PPLTN_RATE_20": "18.1",
+      "PPLTN_RATE_30": "28.0",
+      "PPLTN_RATE_40": "25.6",
+      "PPLTN_RATE_50": "15.6",
+      "PPLTN_RATE_60": "6.2",
+      "PPLTN_RATE_70": "3.8",
+      "RESNT_PPLTN_RATE": "33.9",
+      "NON_RESNT_PPLTN_RATE": "66.1",
+      "REPLACE_YN": "N",
+      "PPLTN_TIME": "2024-02-01 10:55",
+      "FCST_YN": "Y",
+      "FCST_PPLTN": [
+        {
+          "FCST_TIME": "2024-02-01 12:00",
+          "FCST_CONGEST_LVL": "붐빔",
+          "FCST_PPLTN_MIN": "38000",
+          "FCST_PPLTN_MAX": "40000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 13:00",
+          "FCST_CONGEST_LVL": "붐빔",
+          "FCST_PPLTN_MIN": "44000",
+          "FCST_PPLTN_MAX": "46000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 14:00",
+          "FCST_CONGEST_LVL": "붐빔",
+          "FCST_PPLTN_MIN": "44000",
+          "FCST_PPLTN_MAX": "46000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 15:00",
+          "FCST_CONGEST_LVL": "붐빔",
+          "FCST_PPLTN_MIN": "38000",
+          "FCST_PPLTN_MAX": "40000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 16:00",
+          "FCST_CONGEST_LVL": "붐빔",
+          "FCST_PPLTN_MIN": "40000",
+          "FCST_PPLTN_MAX": "42000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 17:00",
+          "FCST_CONGEST_LVL": "붐빔",
+          "FCST_PPLTN_MIN": "36000",
+          "FCST_PPLTN_MAX": "38000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 18:00",
+          "FCST_CONGEST_LVL": "붐빔",
+          "FCST_PPLTN_MIN": "34000",
+          "FCST_PPLTN_MAX": "36000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 19:00",
+          "FCST_CONGEST_LVL": "붐빔",
+          "FCST_PPLTN_MIN": "36000",
+          "FCST_PPLTN_MAX": "38000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 20:00",
+          "FCST_CONGEST_LVL": "보통",
+          "FCST_PPLTN_MIN": "22000",
+          "FCST_PPLTN_MAX": "24000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 21:00",
+          "FCST_CONGEST_LVL": "보통",
+          "FCST_PPLTN_MIN": "16000",
+          "FCST_PPLTN_MAX": "18000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 22:00",
+          "FCST_CONGEST_LVL": "여유",
+          "FCST_PPLTN_MIN": "12000",
+          "FCST_PPLTN_MAX": "14000"
+        },
+        {
+          "FCST_TIME": "2024-02-01 23:00",
+          "FCST_CONGEST_LVL": "여유",
+          "FCST_PPLTN_MIN": "8500",
+          "FCST_PPLTN_MAX": "9000"
+        }
+      ]
+    }
+  ]
+}