From c701998403f11ed8b3f2abb03518667c2be458a2 Mon Sep 17 00:00:00 2001
From: gaaahee <lgh4155@naver.com>
Date: Sun, 6 Oct 2024 21:53:25 +0900
Subject: [PATCH] =?UTF-8?q?mission:mission=202=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 keyword/chapter02/hello-react/src/App.jsx     |  2 +-
 mission/chapter02/mission1/src/App.jsx        |  4 +-
 .../mission1/src/components/Button.css        |  6 ++-
 .../mission1/src/components/Input.css         |  5 ++-
 .../mission1/src/components/TodoForm.css      | 11 ++++--
 .../mission1/src/components/TodoList.css      |  2 +-
 mission/chapter02/mission2/public/index.html  |  2 +-
 mission/chapter02/mission2/src/App.css        | 38 -------------------
 mission/chapter02/mission2/src/App.js         | 25 ------------
 mission/chapter02/mission2/src/App.jsx        | 15 ++++++++
 .../mission2/src/{ => assets}/logo.svg        |  0
 .../mission2/src/components/MovieItem.css     | 38 +++++++++++++++++++
 .../mission2/src/components/MovieItem.jsx     | 21 ++++++++++
 .../mission2/src/components/MovieList.jsx     | 18 +++++++++
 mission/chapter02/mission2/src/index.css      | 13 -------
 .../chapter02/mission2}/src/mocks/movies.js   |  0
 16 files changed, 111 insertions(+), 89 deletions(-)
 delete mode 100644 mission/chapter02/mission2/src/App.js
 create mode 100644 mission/chapter02/mission2/src/App.jsx
 rename mission/chapter02/mission2/src/{ => assets}/logo.svg (100%)
 create mode 100644 mission/chapter02/mission2/src/components/MovieItem.css
 create mode 100644 mission/chapter02/mission2/src/components/MovieItem.jsx
 create mode 100644 mission/chapter02/mission2/src/components/MovieList.jsx
 rename {keyword/chapter02/hello-react => mission/chapter02/mission2}/src/mocks/movies.js (100%)

diff --git a/keyword/chapter02/hello-react/src/App.jsx b/keyword/chapter02/hello-react/src/App.jsx
index bb2dbae..ca91d51 100644
--- a/keyword/chapter02/hello-react/src/App.jsx
+++ b/keyword/chapter02/hello-react/src/App.jsx
@@ -55,7 +55,7 @@ function App() {
         <button onClick={() => addTodo()} type = 'submit'>할 일 등록</button>
       </form>
       <div>
-        {todos.map((todo, _) => (
+        {todos.map((todo) => (
           <div key={todo.id} style={{display: 'flex', gap: '20px'}}>
             {/* 수정이 아닐 때 */}
             {editingId !== todo.id && (
diff --git a/mission/chapter02/mission1/src/App.jsx b/mission/chapter02/mission1/src/App.jsx
index 99b5f78..981d3cc 100644
--- a/mission/chapter02/mission1/src/App.jsx
+++ b/mission/chapter02/mission1/src/App.jsx
@@ -8,8 +8,8 @@ function App() {
   // 1. 할 일 목록을 관리
   const [todos, setTodos] = useState([
     // todos : 할 일 목록, setTodos : 할 일 목록을 업데이트 하는 함수
-    { id: 1, task: '투두 만들어보기' },
-    { id: 2, task: '희연 혜원 혜윤 건 찬민' },
+    // { id: 1, task: '투두 만들어보기' },
+    // { id: 2, task: '희연 혜원 혜윤 건 찬민' },
   ]);
   // 2. 사용자가 입력하는 새로운 할 일을 텍스트로 저장하고 관리
   const [text, setText] = useState('');
diff --git a/mission/chapter02/mission1/src/components/Button.css b/mission/chapter02/mission1/src/components/Button.css
index 887db4a..0a9ce85 100644
--- a/mission/chapter02/mission1/src/components/Button.css
+++ b/mission/chapter02/mission1/src/components/Button.css
@@ -1,6 +1,6 @@
 .custom-button {
   padding: 10px 15px;
-  background-color: #007bff;
+  background-color: #ccabe0;
   color: white;
   border: none;
   border-radius: 5px;
@@ -13,5 +13,7 @@
 }
 
 .custom-button:hover:not(:disabled) {
-  background-color: #0056b3;
+  /* 마우스를 올려놓은 버튼의 배경색을 변경함
+  단, 버튼이 활성화된 경우에만 적용 */
+  background-color: #ccabe0;
 }
\ No newline at end of file
diff --git a/mission/chapter02/mission1/src/components/Input.css b/mission/chapter02/mission1/src/components/Input.css
index fe5cc57..17b5b4b 100644
--- a/mission/chapter02/mission1/src/components/Input.css
+++ b/mission/chapter02/mission1/src/components/Input.css
@@ -2,11 +2,12 @@
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  width: 100%;
+  margin : 0 auto;
+  max-width: 70%;
   box-sizing: border-box;
 }
 
 .custom-input:focus {
-  border-color: #007bff;
+  border-color: #ccabe0;
   outline: none;
 }
\ No newline at end of file
diff --git a/mission/chapter02/mission1/src/components/TodoForm.css b/mission/chapter02/mission1/src/components/TodoForm.css
index 169dde0..f0cfa32 100644
--- a/mission/chapter02/mission1/src/components/TodoForm.css
+++ b/mission/chapter02/mission1/src/components/TodoForm.css
@@ -1,14 +1,17 @@
 .todo-form {
   display: flex;
-  gap: 10px;
+  align-items: center; /* 수직 방향으로 가운데 정렬 */
+  justify-content: center; /* 수평 방향으로 가운데 정렬 */
+  gap: 0; /* 인풋창과 버튼 사이의 간격을 없앱니다 */
   margin-bottom: 20px;
-  align-items: center;
 }
 
 .todo-form input {
-  flex: 1;
+  flex: 1; /* 입력창이 버튼을 제외한 나머지 영역을 차지하도록 설정 */
+  margin: 5px;
 }
 
 .todo-form button {
-  flex-shrink: 0;
+  flex-shrink: 0; /* 버튼 크기가 축소되지 않도록 설정 */
+  margin-left: 5px;
 }
\ No newline at end of file
diff --git a/mission/chapter02/mission1/src/components/TodoList.css b/mission/chapter02/mission1/src/components/TodoList.css
index b543838..9bc6d9f 100644
--- a/mission/chapter02/mission1/src/components/TodoList.css
+++ b/mission/chapter02/mission1/src/components/TodoList.css
@@ -1,4 +1,4 @@
 .todo-list {
-  max-width: 600px;
+  max-width: 600px; /* 600px 이상 커지지 않도록 제한 */
   margin: 0 auto;
 }
\ No newline at end of file
diff --git a/mission/chapter02/mission2/public/index.html b/mission/chapter02/mission2/public/index.html
index aa069f2..5eb2a8b 100644
--- a/mission/chapter02/mission2/public/index.html
+++ b/mission/chapter02/mission2/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>mission 2</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/mission/chapter02/mission2/src/App.css b/mission/chapter02/mission2/src/App.css
index 74b5e05..e69de29 100644
--- a/mission/chapter02/mission2/src/App.css
+++ b/mission/chapter02/mission2/src/App.css
@@ -1,38 +0,0 @@
-.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);
-  }
-}
diff --git a/mission/chapter02/mission2/src/App.js b/mission/chapter02/mission2/src/App.js
deleted file mode 100644
index 3784575..0000000
--- a/mission/chapter02/mission2/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
diff --git a/mission/chapter02/mission2/src/App.jsx b/mission/chapter02/mission2/src/App.jsx
new file mode 100644
index 0000000..ffad6b6
--- /dev/null
+++ b/mission/chapter02/mission2/src/App.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { MOVIES } from './mocks/movies'; // API
+import MovieList from './components/MovieList';
+
+function App() {
+  /* MOVIES : 전체 영화 데이터를 가지는 객체
+  MOVIES.results : 영화 목록을 가지는 배열 */
+  return (
+    <div className = "App">
+      <MovieList movies={MOVIES.results} /> {/* MovieList 컴포넌트에 movies라는 이름의 props로 영화 목록 전달 */}
+    </div>
+  );
+}
+
+export default App;
\ No newline at end of file
diff --git a/mission/chapter02/mission2/src/logo.svg b/mission/chapter02/mission2/src/assets/logo.svg
similarity index 100%
rename from mission/chapter02/mission2/src/logo.svg
rename to mission/chapter02/mission2/src/assets/logo.svg
diff --git a/mission/chapter02/mission2/src/components/MovieItem.css b/mission/chapter02/mission2/src/components/MovieItem.css
new file mode 100644
index 0000000..345385b
--- /dev/null
+++ b/mission/chapter02/mission2/src/components/MovieItem.css
@@ -0,0 +1,38 @@
+.movie-item {
+  border-style: none;
+  padding: 4px;
+  margin: 4px;
+  width: 8.5%;
+  display: inline-block;
+  vertical-align: top;
+  text-align: center;
+}
+
+.img-container {
+  position: relative; /* 자식 요소들이 부모 요소를 기준으로 위치하도록 함 */
+  width: 100%;
+  height: auto;
+}
+
+.img-container img {
+  border-radius: 5px;
+  width: 100%;
+  height: auto; /* 이미지의 원래 비율에 맞게 높이가 너비에 따라 자동 조정 */
+  display: block; /* 이미지의 하단 여백 제거 */
+}
+
+.overlay {
+  position: absolute; /* 부모 요소를 기준으로 위치 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: 0.15s ease;
+  background-color: rgba(0, 0, 0, 0.5); /* 배경색을 지정 */
+  border-radius: 5px;
+}
+
+.img-container:hover .overlay {
+  opacity: 1; /* img-container에 hover 되었을 때 overlay가 보이도록 설정 */
+}
\ No newline at end of file
diff --git a/mission/chapter02/mission2/src/components/MovieItem.jsx b/mission/chapter02/mission2/src/components/MovieItem.jsx
new file mode 100644
index 0000000..f36a13d
--- /dev/null
+++ b/mission/chapter02/mission2/src/components/MovieItem.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import './MovieItem.css';
+
+function MovieItem({ movie }) {
+  /* movie : MovieList 컴포넌트로부터 전달 받은 영화 1개의 정보를 담고 있는 객체 */
+  /* const movie = props.movie; 대신 구조 분해 할당을 사용
+      -> props 객체 안에 movie 데이터를 꺼내 사용하겠다! */
+  return (
+    <div className="movie-item">
+      <div className="img-container">
+        <img
+          src={`https://image.tmdb.org/t/p/w200${movie.poster_path}`} // 영화 포스터 경로로 이미지 출력
+          alt={movie.title}
+        />
+        <div className="overlay"></div>
+      </div>
+    </div>
+  );
+}
+
+export default MovieItem;
\ No newline at end of file
diff --git a/mission/chapter02/mission2/src/components/MovieList.jsx b/mission/chapter02/mission2/src/components/MovieList.jsx
new file mode 100644
index 0000000..b7df157
--- /dev/null
+++ b/mission/chapter02/mission2/src/components/MovieList.jsx
@@ -0,0 +1,18 @@
+// 영화 목록을 보여주는 컴포넌트
+import React from 'react';
+import MovieItem from './MovieItem';
+
+function MovieList({ movies }) {
+  /* 부모 컴포넌트인 App.jsx 로부터 movies라는 props를 받음 */
+  return (
+    <div className="movie-list">
+      {movies.map((movie) => (
+        <MovieItem key={movie.id} movie={movie} /> // 각 영화를 MovieItem으로 전달
+      ))}
+    </div>
+    /* 여기서 movies : 영화 목록을 가진 배열(results 배열)
+              movie : 1개의 영화 객체(results 배열의 각 항목) */
+  );
+}
+
+export default MovieList;
\ No newline at end of file
diff --git a/mission/chapter02/mission2/src/index.css b/mission/chapter02/mission2/src/index.css
index ec2585e..e69de29 100644
--- a/mission/chapter02/mission2/src/index.css
+++ b/mission/chapter02/mission2/src/index.css
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  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',
-    monospace;
-}
diff --git a/keyword/chapter02/hello-react/src/mocks/movies.js b/mission/chapter02/mission2/src/mocks/movies.js
similarity index 100%
rename from keyword/chapter02/hello-react/src/mocks/movies.js
rename to mission/chapter02/mission2/src/mocks/movies.js