임은빈 / 과제01

assignments_01/PGM_best_album.js

@@ -1,4 +1,45 @@
+function withGenres(u, v) {
+  let sum = 0;
+  u.map((item) => (sum += item.play));
+  const uPlays = sum;
+  sum = 0;
+  v.map((item) => (sum += item.play));
+  const vPlays = sum;
+  return vPlays - uPlays;
+}
+
+function withPlays(u, v) {
+  if (u.play == v.play) {
+    return u.id - v.id;
+  }
+  return v.play - u.play;
+}
+
 function solution(genres, plays) {
   var answer = [];
+  let hash_musics = {};
+  let len = genres.length;
+  for (let i = 0; i < len; i++) {
+    if (!hash_musics[genres[i]]) {
+      hash_musics[genres[i]] = [{ id: i, play: plays[i] }];
+      continue;
+    }
+    hash_musics[genres[i]].push({ id: i, play: plays[i] });
+  }
+
+  let musics = [];
+  let index = 0;
+  for (let key in hash_musics) {
+    musics.push(hash_musics[key]);
+    musics[index++].sort(withPlays);
+  }
+
+  musics.sort(withGenres);
+
+  for (let i = 0; i < index; i++) {
+    answer.push(musics[i][0].id);
+    if (musics[i].length > 1) answer.push(musics[i][1].id);
+  }
+
   return answer;
-}
+}

assignments_01/PGM_hate_same_number.js

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

assignments_01/PGM_largest_number.js

@@ -1,4 +1,8 @@
 function solution(numbers) {
-  var answer = '';
-  return answer;
-}
+  var answer = numbers
+    .map((c) => c + "")
+    .sort((a, b) => b + a - (a + b))
+    .join("");
+
+  return answer[0] === "0" ? "0" : answer;
+}

project_01/.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+# api key 보관
+.env

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,9 +1,94 @@
+import axios from "axios";
+import { useState } from "react";
+import styled from "styled-components";
+
 function App() {
+  const API_KEY = process.env.REACT_APP_API_KEY;
+  const [location, setLocation] = useState("");
+  const [result, setResult] = useState({});
+
+  const url = `http://openapi.seoul.go.kr:8088/${API_KEY}/json/citydata_ppltn/1/5/${location}`;
+
+  const searchPopulation = async (e) => {
+    if (e.key === "Enter") {
+      try {
+        const { data } = await axios.get(url); // Destructure 'data' from the response
+        console.log(data);
+        setResult(data); // Set the result state
+      } catch (err) {
+        alert(err);
+      }
+    }
+  };
+
   return (
-    <div>
-      <h3>Application starts from here</h3>
-    </div>
+    <AppWrap>
+      <div className="appContentWrap">
+        <input
+          placeholder="장소를 입력하세요"
+          value={location}
+          onChange={(e) => setLocation(e.target.value)}
+          type="text"
+          onKeyDown={searchPopulation}
+        />
+        {result["SeoulRtd.citydata_ppltn"] &&
+          result["SeoulRtd.citydata_ppltn"].length > 0 && ( // Check if the result contains data
+            <ResultWrap>
+              {/* <div className="place">
+                {result["SeoulRtd.citydata_ppltn"][0]["AREA_NM"]}
+              </div> */}
+              <div className="level">
+                {result["SeoulRtd.citydata_ppltn"][0]["AREA_CONGEST_LVL"]}
+              </div>
+              <div className="message">
+                {result["SeoulRtd.citydata_ppltn"][0]["AREA_CONGEST_MSG"]}
+              </div>
+            </ResultWrap>
+          )}
+      </div>
+    </AppWrap>
   );
 }
 
 export default App;
+
+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;
+  }
+`;
+
+const ResultWrap = styled.div`
+  margin-top: 60px;
+  border: 1px black solid;
+  padding: 10px;
+  border-radius: 8px;
+
+  // .place {
+  //   font-size: 24px;
+  // }
+
+  .level {
+    font-size: 60px;
+    margin: 10px 0;
+  }
+
+  .message {
+    font-size: 20px;
+    text-align: left;
+    margin: 20px 0;
+  }
+`;