mission:mission 2 완료

UMC-Inha · Oct 6, 2024 · c701998 · c701998
1 parent 1779a73
commit c701998
Show file tree

Hide file tree

Showing 16 changed files with 111 additions and 89 deletions.
diff --git 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
@@ -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
@@ -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;
 }
diff --git 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;
 }
diff --git 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;
 }
diff --git 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;
 }
diff --git 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
@@ -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
diff --git a/mission/chapter02/mission2/src/App.jsx 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;
diff --git a/mission/chapter02/mission2/src/logo.svg → ...on/chapter02/mission2/src/assets/logo.svg b/mission/chapter02/mission2/src/logo.svg → ...on/chapter02/mission2/src/assets/logo.svg
diff --git a/mission/chapter02/mission2/src/components/MovieItem.css 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가 보이도록 설정 */
+}
diff --git a/mission/chapter02/mission2/src/components/MovieItem.jsx 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;
diff --git a/mission/chapter02/mission2/src/components/MovieList.jsx 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;
diff --git 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/...chapter02/hello-react/src/mocks/movies.js → ...on/chapter02/mission2/src/mocks/movies.js b/...chapter02/hello-react/src/mocks/movies.js → ...on/chapter02/mission2/src/mocks/movies.js