From 0a5f8068fcf39ac7914dffa05fcb3149bf144c75 Mon Sep 17 00:00:00 2001
From: 05ovo2e <jiwonpark2229@gmail.com>
Date: Sun, 23 Jun 2024 22:18:54 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[Round2]=20React=20=EC=9B=B9=20=EA=B0=9C?=
 =?UTF-8?q?=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dicegame/App.js"                          | 12 +++
 .../dicegame/Dice.js"                         |  0
 .../dicegame/index.js"                        | 10 ++
 .../hello_react/App.css"                      | 38 ++++++++
 .../hello_react/App.js"                       | 26 ++++++
 .../hello_react/index.css"                    | 13 +++
 .../hello_react/index.js"                     | 17 ++++
 .../rock-scissor-paper/App.js"                | 76 ++++++++++++++++
 .../rock-scissor-paper/Button.js"             |  8 ++
 .../rock-scissor-paper/HandButton.css"        | 27 ++++++
 .../rock-scissor-paper/HandButton.js"         | 14 +++
 .../rock-scissor-paper/HandIcon.js"           | 17 ++++
 .../rock-scissor-paper/index.js"              |  4 +
 .../rock-scissor-paper/utils.js"              | 22 +++++
 .../foodit/App.js"                            | 91 +++++++++++++++++++
 .../foodit/FoodList.js"                       | 30 ++++++
 .../foodit/api.js"                            | 14 +++
 .../foodit/index.html"                        | 43 +++++++++
 .../foodit/index.js"                          |  4 +
 .../moviepedia/App.js"                        | 81 +++++++++++++++++
 .../moviepedia/ReviewForm.css"                |  9 ++
 .../moviepedia/ReviewForm.js"                 | 31 +++++++
 .../moviepedia/ReviewList.css"                | 12 +++
 .../moviepedia/ReviewList.js"                 | 56 ++++++++++++
 .../moviepedia/api.js"                        | 15 +++
 .../moviepedia/index.html"                    | 10 ++
 .../moviepedia/index.js"                      |  4 +
 27 files changed, 684 insertions(+)
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/App.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/Dice.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/index.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/App.css"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/App.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/index.css"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/index.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/App.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/Button.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandButton.css"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandButton.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandIcon.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/index.js"
 create mode 100644 "05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/utils.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/App.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodList.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/api.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/index.html"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/index.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/App.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/api.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/index.html"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/index.js"

diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/App.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/App.js"
new file mode 100644
index 00000000..a1a20646
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/App.js"	
@@ -0,0 +1,12 @@
+import Dice from './Dice';
+
+function App() {
+    return (
+        <div>
+            <Dice />
+        </div>
+    );
+
+}
+
+export default App;
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/Dice.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/Dice.js"
new file mode 100644
index 00000000..e69de29b
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/index.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/index.js"
new file mode 100644
index 00000000..e3ca7986
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/dicegame/index.js"	
@@ -0,0 +1,10 @@
+
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <App />, document.getElementById('root')
+);
+
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/App.css" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/App.css"
new file mode 100644
index 00000000..74b5e053
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/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);
+  }
+}
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/App.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/App.js"
new file mode 100644
index 00000000..19acd9a8
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/App.js"	
@@ -0,0 +1,26 @@
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>안녕 리액트!</h1>
+        <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/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/index.css" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/index.css"
new file mode 100644
index 00000000..ec2585e8
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/index.css"	
@@ -0,0 +1,13 @@
+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/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/index.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/index.js"
new file mode 100644
index 00000000..d563c0fb
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/hello_react/index.js"	
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/App.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/App.js"
new file mode 100644
index 00000000..146d01b5
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/App.js"	
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import Button from './Button';
+import HandButton from './HandButton';
+import HandIcon from './HandIcon';
+import { compareHand, generateRandomHand } from './utils';
+
+const INITIAL_VALUE = 'rock';
+
+function getResult(me, other) {
+  const comparison = compareHand(me, other);
+  if (comparison > 0) return '승리';
+  if (comparison < 0) return '패배';
+  return '무승부';
+}
+
+function App() {
+  const [hand, setHand] = useState(INITIAL_VALUE);
+  const [otherHand, setOtherHand] = useState(INITIAL_VALUE);
+  const [gameHistory, setGameHistory] = useState([]);
+  const [score, setScore] = useState(0);
+  const [otherScore, setOtherScore] = useState(0);
+  const [bet, setBet] = useState(1);
+
+  const handleButtonClick = (nextHand) => {
+    const nextOtherHand = generateRandomHand();
+    const nextHistoryItem = getResult(nextHand, nextOtherHand);
+    const comparison = compareHand(nextHand, nextOtherHand);
+    setHand(nextHand);
+    setOtherHand(nextOtherHand);
+    setGameHistory([...gameHistory, nextHistoryItem]);
+    if (comparison > 0) setScore(score + bet);
+    if (comparison < 0) setOtherScore(otherScore + bet);
+  };
+
+  const handleClearClick = () => {
+    setHand(INITIAL_VALUE);
+    setOtherHand(INITIAL_VALUE);
+    setGameHistory([]);
+    setScore(0);
+    setOtherScore(0);
+    setBet(1);
+  };
+
+  const handleBetChange = (e) => {
+    let num = Number(e.target.value);
+    if (num > 9) num %= 10;
+    if (num < 1) num = 1;
+    num = Math.floor(num);
+    setBet(num);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleClearClick}>처음부터</Button>
+      <div>
+        {score} : {otherScore}
+      </div>
+      <div>
+        <HandIcon value={hand} />
+        VS
+        <HandIcon value={otherHand} />
+      </div>
+      <div>
+        <input type="number" value={bet} min={1} max={9} onChange={handleBetChange}></input>
+      </div>
+      <p>승부 기록: {gameHistory.join(', ')}</p>
+      <div>
+        <HandButton value="rock" onClick={handleButtonClick} />
+        <HandButton value="scissor" onClick={handleButtonClick} />
+        <HandButton value="paper" onClick={handleButtonClick} />
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/Button.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/Button.js"
new file mode 100644
index 00000000..a2796459
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/Button.js"	
@@ -0,0 +1,8 @@
+
+
+function Button({ children, onClick }) {
+  
+  return <button onClick={onClick}>{children}</button>;
+}
+
+export default Button;
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandButton.css" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandButton.css"
new file mode 100644
index 00000000..809a0b1c
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandButton.css"	
@@ -0,0 +1,27 @@
+.HandButton {
+  width: 166px;
+  height: 166px;
+  border: none;
+  outline: none;
+  text-align: center;
+  cursor: pointer;
+  background-color: transparent;
+  background-image: url('./assets/purple.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.HandButton .HandButton-icon {
+  opacity: 0.45;
+  width: 55px;
+  height: 55px;
+}
+
+.HandButton:hover {
+  background-image: url('./assets/yellow.svg');
+}
+
+.HandButton:hover .HandButton-icon {
+  opacity: 0.87;
+}
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandButton.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandButton.js"
new file mode 100644
index 00000000..b522c935
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandButton.js"	
@@ -0,0 +1,14 @@
+import HandIcon from './HandIcon';
+import './HandButton.css';
+
+// CSS 파일로 스타일을 적용해 주세요
+function HandButton({ value, onClick }) {
+  const handleClick = () => onClick(value);
+  return (
+    <button className="HandButton" onClick={onClick}>
+      <HandIcon className="HandButton-icon" value={value} />
+    </button>
+  );
+}
+
+export default HandButton;
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandIcon.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandIcon.js"
new file mode 100644
index 00000000..cba3552d
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/HandIcon.js"	
@@ -0,0 +1,17 @@
+import rockImg from './assets/rock.svg';
+import scissorImg from './assets/scissor.svg';
+import paperImg from './assets/paper.svg';
+
+const IMAGES = {
+  rock: rockImg,
+  scissor: scissorImg,
+  paper: paperImg,
+};
+
+// className prop을 추가하고, img 태그에 적용해주세요
+function HandIcon({ className, value }) {
+  const src = IMAGES[value];
+  return <img className = {className} src={src} alt={value} />;
+}
+
+export default HandIcon;
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/index.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/index.js"
new file mode 100644
index 00000000..606d7ac4
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/index.js"	
@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git "a/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/utils.js" "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/utils.js"
new file mode 100644
index 00000000..ee002c31
--- /dev/null
+++ "b/05ovo2e/Round2/React \354\233\271 \352\260\234\353\260\234 \354\213\234\354\236\221\355\225\230\352\270\260/rock-scissor-paper/utils.js"	
@@ -0,0 +1,22 @@
+const HANDS = ['rock', 'scissor', 'paper'];
+
+const WINS = {
+  rock: 'scissor',
+  scissor: 'paper',
+  paper: 'rock',
+};
+
+export function compareHand(a, b) {
+  if (WINS[a] === b) return 1;
+  if (WINS[b] === a) return -1;
+  return 0;
+}
+
+function random(n) {
+  return Math.floor(Math.random() * n);
+}
+
+export function generateRandomHand() {
+  const idx = random(HANDS.length);
+  return HANDS[idx];
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/App.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/App.js"
new file mode 100644
index 00000000..0004b973
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/App.js"	
@@ -0,0 +1,91 @@
+import FoodList from "./FoodList";
+import { useEffect, useState } from "react";
+import { getFoods } from "../api";
+
+function App() {
+  // 칼로리 높은 순으로 정렬
+  const [order, setOrder] = useState("createdAt");
+  const [items, setItems] = useState([]);
+  const [cursor, setCursor] = useState(null);
+
+  //isLoading : 로딩 상태, loadingError: 에러 객체를 값으로 함
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingError, setLoadingError] = useState(null);
+
+  // 검색 기능
+  const [search, setSearch] = useState("");
+
+  const sortedItems = items.sort((a, b) => b[order] - a[order]);
+
+  const handleNewestClick = () => setOrder("createdAt");
+  const handleCalorieClick = () => setOrder("calorie");
+
+  const handleDelete = (id) => {
+    const nextItems = items.filter((item) => item.id !== id);
+    setItems(nextItems);
+  };
+
+  const handleLoad = async (options) => {
+    let result;
+    try {
+      setLoadingError(null);
+      setIsLoading(true);
+      result = await getFoods(options);
+    } catch (error) {
+      setLoadingError(error);
+      return;
+    } finally {
+      setIsLoading(false);
+    }
+
+    const {
+      foods,
+      paging: { nextCursor },
+    } = result;
+
+    if (!options.cursor) {
+      setItems(foods);
+    } else {
+      setItems((prevItems) => [...prevItems, ...foods]);
+    }
+    setCursor(nextCursor);
+  };
+
+  const handleLoadMore = () => {
+    handleLoad({ order, cursor, search });
+  };
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    setSearch(e.target["search"].value);
+  };
+
+  useEffect(() => {
+    handleLoad({
+      order,
+      search,
+    });
+  }, [order, search]);
+
+  return (
+    <div>
+      <div>
+        <button onClick={handleNewestClick}>최신순</button>
+        <button onClick={handleCalorieClick}>칼로리순</button>
+        <form onSubmit={handleSearchSubmit}>
+          <input name="search" />
+          <button type="submit">검색</button>
+        </form>
+      </div>
+      <FoodList items={sortedItems} onDelete={handleDelete} />
+      {cursor && (
+        <button disabled={isLoading} onClick={handleLoadMore}>
+          더 보기
+        </button>
+      )}
+      {loadingError?.message && <span>{loadingError.message}</span>}
+    </div>
+  );
+}
+
+export default App;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodList.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodList.js"
new file mode 100644
index 00000000..f965a68e
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodList.js"	
@@ -0,0 +1,30 @@
+function FoodListItem({ item, onDelete }) {
+  const { imgUrl, title, calorie, content } = item;
+  const handleDeleteClick = () => {
+    onDelete(item.id);
+  };
+
+  return (
+    <div>
+      <img src={imgUrl} alt={title} />
+      <div>{title}</div>
+      <div>{calorie}</div>
+      <div>{content}</div>
+      <button onClick={handleDeleteClick}>삭제</button>
+    </div>
+  );
+}
+
+function FoodList({ items, onDelete }) {
+  return (
+    <ul className="FoodList">
+      {items.map((item) => (
+        <li key={item.id}>
+          <FoodListItem item={item} onDelete={onDelete} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default FoodList;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/api.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/api.js"
new file mode 100644
index 00000000..aa4df299
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/api.js"	
@@ -0,0 +1,14 @@
+export async function getFoods({
+  order = "",
+  cursor = "",
+  limit = 10,
+  search = "",
+}) {
+  const query = `order=${order}&cursor=${cursor}&limit=${limit}&search=${search}`;
+  const response = await fetch(`https://learn.codeit.kr/api/foods?${query}`);
+  if (!response.ok) {
+    throw new Error("데이터를 불러오는데 실패했습니다");
+  }
+  const body = await response.json();
+  return body;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/index.html" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/index.html"
new file mode 100644
index 00000000..aa069f27
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/index.html"	
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      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>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/index.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/index.js"
new file mode 100644
index 00000000..463687cd
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/index.js"	
@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/App.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/App.js"
new file mode 100644
index 00000000..37f0478a
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/App.js"	
@@ -0,0 +1,81 @@
+import ReviewList from "./ReviewList";
+import { useEffect, useState } from "react";
+import { getReviews } from "../api";
+import ReviewForm from "./ReviewForm";
+
+const LIMIT = 6;
+
+// 최상위 컴포넌트
+function App() {
+  // 별점 높은 순으로 정렬
+  const [order, setOrder] = useState("createdAt");
+  const [offset, setOffset] = useState(0);
+  const [hasNext, setHasNext] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingError, setLoadingError] = useState(null);
+  const [items, setItems] = useState([]);
+  const sortedItems = items.sort((a, b) => b[order] - a[order]);
+
+  const handleNewestClick = () => setOrder("createdAt");
+  const handleBestClick = () => setOrder("rating");
+
+  const handleDelete = (id) => {
+    const nextItems = items.filter((item) => item.id !== id);
+    setItems(nextItems);
+  };
+
+  const handleLoad = async (options) => {
+    // 네트워크 로딩 처리 try-catch-finally와 isLoading 값 이용
+    let result;
+    try {
+      setLoadingError(null);
+      setIsLoading(true);
+      result = await getReviews(options);
+    } catch (error) {
+      setLoadingError(error);
+      return;
+    } finally {
+      setIsLoading(false);
+    }
+    const { paging, reviews } = result;
+
+    if (options.offset === 0) {
+      setItems(reviews);
+    } else {
+      // 콜백함수 prevItems 사용으로 삭제한 데이터가 다시 set되는 것 방지
+      setItems((prevItems) => [...prevItems, ...reviews]);
+    }
+    setOffset(options.offset + options.limit);
+    setHasNext(paging.hasNext);
+  };
+
+  const handleLoadMore = async () => {
+    await handleLoad({ order, offset, limit: LIMIT });
+  };
+
+  // 실행할 콜백 함수와 빈 배열을 넘겨 주면
+  // 리액트는 콜백 함수를 맨 처음 렌더링할 때만 실행함 (무한 루프x)
+  useEffect(() => {
+    handleLoad({ order, offset: 0, limit: LIMIT });
+    // order 버튼 클릭마다 state가 바뀌어서 재렌더링이 일어남
+    // 정렬된 데이터 서버 요청에 사용
+  }, [order]);
+
+  return (
+    <div>
+      <div>
+        <button onClick={handleNewestClick}>최신순</button>
+        <button onClick={handleBestClick}>베스트순</button>
+      </div>
+      <ReviewList items={sortedItems} onDelete={handleDelete} />
+      {hasNext && (
+        <button disabled={isLoading} onClick={handleLoadMore}>
+          더 보기
+        </button>
+      )}
+      {loadingError?.message && <span>{loadingError.message}</span>}
+    </div>
+  );
+}
+
+export default App;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.css" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.css"
new file mode 100644
index 00000000..b6bf3951
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.css"	
@@ -0,0 +1,9 @@
+.ReviewForm {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+}
+
+.ReviewForm > :not(:last-child) {
+  margin-bottom: 20px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.js"
new file mode 100644
index 00000000..5e266886
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.js"	
@@ -0,0 +1,31 @@
+import { useState } from "react";
+import "./ReviewForm.css";
+
+function ReviewForm() {
+  const [title, setTitle] = useState("");
+  const [rating, setRating] = useState(0);
+  const [content, setContent] = useState("");
+
+  const handleTitleChange = (e) => {
+    setTitle(e.target.value);
+  };
+
+  const handleRatingChange = (e) => {
+    const nextRating = Number(e.target.value);
+    setRating(nextRating);
+  };
+
+  const handleContentChange = (e) => {
+    setContent(e.target.value);
+  };
+
+  return (
+    <form className="ReviewForm">
+      <input value={title} onChange={handleTitleChange} />
+      <input type="number" value={rating} onChange={handleRatingChange} />
+      <textarea value={content} onChange={handleContentChange} />
+    </form>
+  );
+}
+
+export default ReviewForm;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.css" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.css"
new file mode 100644
index 00000000..32883137
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.css"	
@@ -0,0 +1,12 @@
+.ReviewListItem {
+  display: flex;
+  padding: 10px;
+  align-items: center;
+}
+
+.ReviewListItem-img {
+  width: 200px;
+  height: 300px;
+  object-fit: cover;
+  margin-right: 20px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.js"
new file mode 100644
index 00000000..bb63ca1c
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.js"	
@@ -0,0 +1,56 @@
+import "./ReviewList.css";
+
+// 영화 포스터, 제목, 줄거리
+function formatDate(value) {
+  const date = new Date(value);
+  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
+}
+
+function ReviewListItem({ item, onDelete }) {
+  const handleDeleteClick = () => {
+    onDelete(item.id);
+  };
+  return (
+    <div className="ReviewListItem">
+      <img className="ReviewListItem-img" src={item.imgUrl} alt={item.title} />
+      <div>
+        <h1>{item.title}</h1>
+        <p>{item.rating}</p>
+        <p>{formatDate(item.createdAt)}</p>
+        <p>{item.content}</p>
+        <button onClick={handleDeleteClick}>삭제</button>
+      </div>
+    </div>
+  );
+}
+
+function ReviewList({ items, onDelete }) {
+  return (
+    <ul>
+      {items.map((item) => {
+        return (
+          // 요소들의 순서가 바뀌어도 그대로 유지되게 함
+          // 데이터를 구분할 수 있는 고유한 값(id)로 지정
+          <li key={item.id}>
+            <ReviewListItem item={item} onDelete={onDelete} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+// 영화 제목만
+/*
+function ReviewList({ items }) {
+  return (
+    <ul>
+      {items.map((item) => {
+        return <li>{item.title}</li>;
+      })}
+    </ul>
+  );
+}
+*/
+
+export default ReviewList;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/api.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/api.js"
new file mode 100644
index 00000000..c75e8342
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/api.js"	
@@ -0,0 +1,15 @@
+export async function getReviews({
+  order = "createdAt",
+  offset = 0,
+  limit = 6,
+}) {
+  const query = `order=${order}&offset=${offset}&limit=${limit}`;
+  const response = await fetch(
+    `https://learn.codeit.kr/api/film-reviews?${query}`
+  );
+  if (!response.ok) {
+    throw new Error("리뷰를 불러오는데 실패했습니다.");
+  }
+  const body = await response.json();
+  return body;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/index.html" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/index.html"
new file mode 100644
index 00000000..b52a0c7d
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/index.html"	
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>MOVIE PEDIA</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/index.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/index.js"
new file mode 100644
index 00000000..39c28e24
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/index.js"	
@@ -0,0 +1,4 @@
+import ReactDOM from "react-dom";
+import App from "./components/App";
+
+ReactDOM.render(<App />, document.getElementById("root"));

From b72bf95339db67e5461390142976a50124eddddd Mon Sep 17 00:00:00 2001
From: 05ovo2e <jiwonpark2229@gmail.com>
Date: Sun, 7 Jul 2024 22:35:43 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[Round3]=20React=EB=A1=9C=20=EC=9B=B9?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=ED=8A=B8=20=EB=A7=8C=EB=93=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../foodit/App.js"                            |  72 +++++++----
 .../foodit/FileInput.js"                      |  46 +++++++
 .../foodit/FoodForm.js"                       | 100 +++++++++++++++
 .../foodit/FoodList.js"                       |  72 +++++++++--
 .../foodit/LocaleContext.js"                  |  37 ++++++
 .../foodit/LocaleSelect.js"                   |  17 +++
 .../foodit/api.js"                            |  39 +++++-
 .../foodit/useTranslate.js"                   |  24 ++++
 .../moviepedia/App.js"                        | 114 ++++++++++--------
 .../moviepedia/FileInput.js"                  |  45 +++++++
 .../moviepedia/LocaleContext.js"              |  37 ++++++
 .../moviepedia/LocaleSelect.js"               |  17 +++
 .../moviepedia/Rating.css"                    |   7 ++
 .../moviepedia/Rating.js"                     |  39 ++++++
 .../moviepedia/RatingInput.css"               |   3 +
 .../moviepedia/RatingInput.js"                |  23 ++++
 .../moviepedia/ReviewForm.js"                 |  81 ++++++++++---
 .../moviepedia/ReviewList.js"                 |  68 +++++++----
 .../moviepedia/api.js"                        |  43 ++++++-
 .../moviepedia/useAsync.js"                   |  25 ++++
 .../moviepedia/useTranslate.js"               |  30 +++++
 .../codethat/Main.js"                         |  33 +++++
 .../codethat/api/index.js"                    |  42 +++++++
 .../codethat/api/mock.json"                   |   1 +
 .../codethat/components/App.font.css"         |  48 ++++++++
 .../codethat/components/App.js"               |  19 +++
 .../codethat/components/App.module.css"       |  43 +++++++
 .../codethat/components/Avatar.js"            |   7 ++
 .../codethat/components/Avatar.module.css"    |   6 +
 .../codethat/components/Button.js"            |  30 +++++
 .../codethat/components/Button.module.css"    |  24 ++++
 .../codethat/components/Card.js"              |   8 ++
 .../codethat/components/Card.module.css"      |   6 +
 .../codethat/components/Container.js"         |  10 ++
 .../codethat/components/Container.module.css" |  11 ++
 .../codethat/components/CourseIcon.js"        |  56 +++++++++
 .../components/CourseIcon.module.css"         |   4 +
 .../codethat/components/CourseItem.js"        |  36 ++++++
 .../components/CourseItem.module.css"         |  36 ++++++
 .../codethat/components/DateText.js"          |   8 ++
 .../codethat/components/Footer.js"            |  40 ++++++
 .../codethat/components/Footer.module.css"    |  44 +++++++
 .../codethat/components/Lined.js"             |   7 ++
 .../codethat/components/Lined.module.css"     |   6 +
 .../codethat/components/ListPage.js"          |  39 ++++++
 .../codethat/components/ListPage.module.css"  |  49 ++++++++
 .../codethat/components/Nav.js"               |  40 ++++++
 .../codethat/components/Nav.module.css"       |  30 +++++
 .../codethat/components/SearchBar.module.css" |  35 ++++++
 .../codethat/components/Tags.js"              |  13 ++
 .../codethat/components/Tags.module.css"      |  19 +++
 .../codethat/components/UserMenu.js"          |  40 ++++++
 .../codethat/components/UserMenu.module.css"  |  52 ++++++++
 .../codethat/components/Warn.js"              |  15 +++
 .../codethat/components/Warn.module.css"      |  30 +++++
 .../codethat/components/Writer.js"            |  12 ++
 .../codethat/index.js"                        |   4 +
 .../codethat/pages/CourseListPage.js"         |  61 ++++++++++
 .../codethat/pages/CourseListPage.module.css" |  23 ++++
 .../codethat/pages/CoursePage.js"             |  53 ++++++++
 .../codethat/pages/CoursePage.module.css"     |  53 ++++++++
 .../codethat/pages/HomePage.js"               |  36 ++++++
 .../codethat/pages/HomePage.module.css"       |  70 +++++++++++
 .../codethat/pages/NotFoundPage.js"           |  24 ++++
 .../codethat/pages/NotFoundPage.module.css"   |   8 ++
 .../codethat/pages/QuestionListPage.js"       |  88 ++++++++++++++
 .../pages/QuestionListPage.module.css"        |  55 +++++++++
 .../codethat/pages/QuestionPage.js"           |  97 +++++++++++++++
 .../codethat/pages/QuestionPage.module.css"   |  99 +++++++++++++++
 .../codethat/pages/WishlistPage.js"           |  60 +++++++++
 .../codethat/pages/WishlistPage.module.css"   |  44 +++++++
 .../codethat/utils/getCourseColor.js"         |  23 ++++
 72 files changed, 2514 insertions(+), 122 deletions(-)
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FileInput.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodForm.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/LocaleContext.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/LocaleSelect.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/useTranslate.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/FileInput.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/LocaleContext.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/LocaleSelect.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/Rating.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/Rating.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/RatingInput.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/RatingInput.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/useAsync.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/useTranslate.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/Main.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/api/index.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/api/mock.json"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.font.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Avatar.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Avatar.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Button.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Button.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Card.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Card.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Container.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Container.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseIcon.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseIcon.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseItem.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseItem.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/DateText.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Footer.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Footer.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Lined.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Lined.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/ListPage.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/ListPage.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Nav.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Nav.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/SearchBar.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Tags.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Tags.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/UserMenu.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/UserMenu.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Warn.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Warn.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Writer.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/index.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CourseListPage.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CourseListPage.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CoursePage.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CoursePage.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/HomePage.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/HomePage.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/NotFoundPage.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/NotFoundPage.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionListPage.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionListPage.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionPage.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionPage.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/WishlistPage.js"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/WishlistPage.module.css"
 create mode 100644 "05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/utils/getCourseColor.js"

diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/App.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/App.js"
index 0004b973..5b166839 100644
--- "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/App.js"	
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/App.js"	
@@ -1,26 +1,26 @@
-import FoodList from "./FoodList";
 import { useEffect, useState } from "react";
-import { getFoods } from "../api";
+import { createFood, updateFood, getFoods, deleteFood } from "../api";
+import FoodList from "./FoodList";
+import FoodForm from "./FoodForm";
+import { LocaleProvider } from "../contexts/LocaleContext";
+import LocaleSelect from "./LocaleSelect";
 
 function App() {
-  // 칼로리 높은 순으로 정렬
   const [order, setOrder] = useState("createdAt");
-  const [items, setItems] = useState([]);
   const [cursor, setCursor] = useState(null);
-
-  //isLoading : 로딩 상태, loadingError: 에러 객체를 값으로 함
+  const [items, setItems] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [loadingError, setLoadingError] = useState(null);
-
-  // 검색 기능
   const [search, setSearch] = useState("");
 
-  const sortedItems = items.sort((a, b) => b[order] - a[order]);
-
   const handleNewestClick = () => setOrder("createdAt");
+
   const handleCalorieClick = () => setOrder("calorie");
 
-  const handleDelete = (id) => {
+  const handleDelete = async (id) => {
+    const result = await deleteFood(id);
+    if (!result) return;
+
     const nextItems = items.filter((item) => item.id !== id);
     setItems(nextItems);
   };
@@ -37,12 +37,10 @@ function App() {
     } finally {
       setIsLoading(false);
     }
-
     const {
       foods,
       paging: { nextCursor },
     } = result;
-
     if (!options.cursor) {
       setItems(foods);
     } else {
@@ -52,7 +50,11 @@ function App() {
   };
 
   const handleLoadMore = () => {
-    handleLoad({ order, cursor, search });
+    handleLoad({
+      order,
+      cursor,
+      search,
+    });
   };
 
   const handleSearchSubmit = (e) => {
@@ -60,6 +62,23 @@ function App() {
     setSearch(e.target["search"].value);
   };
 
+  const handleCreateSuccess = (newItem) => {
+    setItems((prevItems) => [newItem, ...prevItems]);
+  };
+
+  const handleUpdateSuccess = (newItem) => {
+    setItems((prevItems) => {
+      const splitIdx = prevItems.findIndex((item) => item.id === newItem.id);
+      return [
+        ...prevItems.slice(0, splitIdx),
+        newItem,
+        ...prevItems.slice(splitIdx + 1),
+      ];
+    });
+  };
+
+  const sortedItems = items.sort((a, b) => b[order] - a[order]);
+
   useEffect(() => {
     handleLoad({
       order,
@@ -68,23 +87,30 @@ function App() {
   }, [order, search]);
 
   return (
-    <div>
+    <LocaleProvider value={"ko"}>
       <div>
+        <LocaleSelect />
+        <FoodForm onSubmit={createFood} onSubmitSuccess={handleCreateSuccess} />
         <button onClick={handleNewestClick}>최신순</button>
         <button onClick={handleCalorieClick}>칼로리순</button>
         <form onSubmit={handleSearchSubmit}>
           <input name="search" />
           <button type="submit">검색</button>
         </form>
+        <FoodList
+          items={sortedItems}
+          onUpdate={updateFood}
+          onUpdateSuccess={handleUpdateSuccess}
+          onDelete={handleDelete}
+        />
+        {cursor && (
+          <button disabled={isLoading} onClick={handleLoadMore}>
+            더보기
+          </button>
+        )}
+        {loadingError && <p>{loadingError.message}</p>}
       </div>
-      <FoodList items={sortedItems} onDelete={handleDelete} />
-      {cursor && (
-        <button disabled={isLoading} onClick={handleLoadMore}>
-          더 보기
-        </button>
-      )}
-      {loadingError?.message && <span>{loadingError.message}</span>}
-    </div>
+    </LocaleProvider>
   );
 }
 
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FileInput.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FileInput.js"
new file mode 100644
index 00000000..57f4c18b
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FileInput.js"	
@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from "react";
+
+function FileInput({ name, value, onChange }) {
+  const [preview, setPreview] = useState();
+  const inputRef = useRef();
+
+  const handleChange = (e) => {
+    const nextValue = e.target.files[0];
+    onChange(name, nextValue);
+  };
+
+  const handleClearClick = () => {
+    const inputNode = inputRef.current;
+    if (!inputNode) return;
+
+    inputNode.value = "";
+    onChange(name, null);
+  };
+
+  useEffect(() => {
+    if (!value) return;
+    // ObjectURL 만들기
+    const nextPreview = URL.createObjectURL(value);
+    setPreview(nextPreview);
+
+    return () => {
+      setPreview();
+      // ObjectURL 해제하기
+      URL.revokeObjectURL(nextPreview);
+    };
+  }, [value]);
+
+  return (
+    <div>
+      <img src={preview} alt="이미지 미리보기" />
+      <input
+        type="file"
+        accept="image/png, image/jpeg"
+        onChange={handleChange}
+        ref={inputRef}
+      />
+      {value && <button onClick={handleClearClick}>X</button>}
+    </div>
+  );
+}
+export default FileInput;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodForm.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodForm.js"
new file mode 100644
index 00000000..1ade9cb5
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodForm.js"	
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import FileInput from "./FileInput";
+
+function sanitize(type, value) {
+  switch (type) {
+    case "number":
+      return Number(value) || 0;
+
+    default:
+      return value;
+  }
+}
+
+const INITIAL_VALUES = {
+  imgFile: null,
+  title: "",
+  calorie: 0,
+  content: "",
+};
+
+function FoodForm({
+  initialValues = INITIAL_VALUES,
+  initialPreview,
+  onSubmit,
+  onSubmitSuccess,
+  onCancel,
+}) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submittingError, setSubmittingError] = useState(null);
+  const [values, setValues] = useState(initialValues);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const formData = new FormData();
+    formData.append("imgFile", values.imgFile);
+    formData.append("title", values.title);
+    formData.append("calorie", values.calorie);
+    formData.append("content", values.content);
+    let result;
+    try {
+      setSubmittingError(null);
+      setIsSubmitting(true);
+      result = await onSubmit(formData);
+    } catch (error) {
+      setSubmittingError(error);
+      return;
+    } finally {
+      setIsSubmitting(false);
+    }
+    const { food } = result;
+    setValues(initialValues);
+    onSubmitSuccess(food);
+  };
+
+  const handleChange = (name, value) => {
+    setValues((prevValues) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value, type } = e.target;
+    handleChange(name, sanitize(type, value));
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <FileInput
+        name="imgFile"
+        initialPreview={initialPreview}
+        value={values.imgFile}
+        onChange={handleChange}
+      />
+      <input name="title" value={values.title} onChange={handleInputChange} />
+      <input
+        type="number"
+        name="calorie"
+        value={values.calorie}
+        onChange={handleInputChange}
+      />
+      <input
+        name="content"
+        value={values.content}
+        onChange={handleInputChange}
+      />
+      {onCancel && (
+        <button type="button" onClick={onCancel}>
+          취소
+        </button>
+      )}
+      <button type="submit" disabled={isSubmitting}>
+        확인
+      </button>
+      {submittingError && <p>{submittingError.message}</p>}
+    </form>
+  );
+}
+
+export default FoodForm;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodList.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodList.js"
index f965a68e..ca33cf94 100644
--- "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodList.js"	
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/FoodList.js"	
@@ -1,28 +1,80 @@
-function FoodListItem({ item, onDelete }) {
-  const { imgUrl, title, calorie, content } = item;
+import { useState } from "react";
+import FoodForm from "./FoodForm";
+import useTranslate from "../hooks/useTranslate";
+
+function formatDate(value) {
+  const date = new Date(value);
+  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
+}
+
+function FoodListItem({ item, onEdit, onDelete }) {
+  const t = useTranslate();
+  const { imgUrl, title, calorie, content, createdAt } = item;
+
+  const handleEditClick = () => {
+    onEdit(item.id);
+  };
+
   const handleDeleteClick = () => {
     onDelete(item.id);
   };
 
   return (
-    <div>
+    <div className="FoodListItem">
       <img src={imgUrl} alt={title} />
       <div>{title}</div>
       <div>{calorie}</div>
       <div>{content}</div>
-      <button onClick={handleDeleteClick}>삭제</button>
+      <div>{formatDate(createdAt)}</div>
+      <button onClick={handleEditClick}>{t("edit button")}</button>
+      <button onClick={handleDeleteClick}>{t("delete button")}</button>
     </div>
   );
 }
 
-function FoodList({ items, onDelete }) {
+function FoodList({ items, onUpdate, onUpdateSuccess, onDelete }) {
+  const [editingId, setEditingId] = useState(null);
+
+  const handleCancel = () => {
+    setEditingId(null);
+  };
+
   return (
     <ul className="FoodList">
-      {items.map((item) => (
-        <li key={item.id}>
-          <FoodListItem item={item} onDelete={onDelete} />
-        </li>
-      ))}
+      {items.map((item) => {
+        if (item.id === editingId) {
+          const { id, imgUrl, title, calorie, content } = item;
+          const initialValues = { title, calorie, content, imgFile: null };
+
+          const handleSubmit = (formData) => onUpdate(id, formData);
+
+          const handleSubmitSuccess = (newItem) => {
+            onUpdateSuccess(newItem);
+            setEditingId(null);
+          };
+
+          return (
+            <li key={item.id}>
+              <FoodForm
+                initialValues={initialValues}
+                initialPreview={imgUrl}
+                onSubmit={handleSubmit}
+                onSubmitSuccess={handleSubmitSuccess}
+                onCancel={handleCancel}
+              />
+            </li>
+          );
+        }
+        return (
+          <li key={item.id}>
+            <FoodListItem
+              item={item}
+              onEdit={setEditingId}
+              onDelete={onDelete}
+            />
+          </li>
+        );
+      })}
     </ul>
   );
 }
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/LocaleContext.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/LocaleContext.js"
new file mode 100644
index 00000000..d8f5a347
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/LocaleContext.js"	
@@ -0,0 +1,37 @@
+import { createContext, useContext, useState } from "react";
+
+const LocaleContext = createContext();
+
+export function LocaleProvider({ defaultValue = "ko", children }) {
+  const [locale, setLocale] = useState(defaultValue);
+
+  return (
+    <LocaleContext.Provider value={{ locale, setLocale }}>
+      {children}
+    </LocaleContext.Provider>
+  );
+}
+
+export function useLocale() {
+  const context = useContext(LocaleContext);
+
+  if (!context) {
+    throw new Error("반드시 LocaleProvider 안에서 사용해야 합니다");
+  }
+
+  const { locale } = context;
+
+  return locale;
+}
+
+export function useSetLocale() {
+  const context = useContext(LocaleContext);
+
+  if (!context) {
+    throw new Error("반드시 LocaleProvider 안에서 사용해야 합니다");
+  }
+
+  const { setLocale } = context;
+
+  return setLocale;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/LocaleSelect.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/LocaleSelect.js"
new file mode 100644
index 00000000..07fcfd3a
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/LocaleSelect.js"	
@@ -0,0 +1,17 @@
+import { useLocale, useSetLocale } from "../contexts/LocaleContext";
+
+function LocaleSelect() {
+  const locale = useLocale();
+  const setLocale = useSetLocale();
+  const handleChange = (e) => setLocale(e.target.value);
+
+  return (
+    <select value={locale} onChange={handleChange}>
+      <option value="ko">한국어</option>
+      <option value="en">English</option>
+      <option value="fr">Francais</option>
+    </select>
+  );
+}
+
+export default LocaleSelect;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/api.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/api.js"
index aa4df299..bafbe2e4 100644
--- "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/api.js"	
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/api.js"	
@@ -1,3 +1,5 @@
+const BASE_URL = "https://learn.codeit.kr/api";
+
 export async function getFoods({
   order = "",
   cursor = "",
@@ -5,10 +7,45 @@ export async function getFoods({
   search = "",
 }) {
   const query = `order=${order}&cursor=${cursor}&limit=${limit}&search=${search}`;
-  const response = await fetch(`https://learn.codeit.kr/api/foods?${query}`);
+  const response = await fetch(`${BASE_URL}/foods?${query}`);
   if (!response.ok) {
     throw new Error("데이터를 불러오는데 실패했습니다");
   }
   const body = await response.json();
   return body;
 }
+
+export async function createFood(formData) {
+  const response = await fetch(`${BASE_URL}/foods`, {
+    method: "POST",
+    body: formData,
+  });
+  if (!response.ok) {
+    throw new Error("데이터를 생성하는데 실패했습니다");
+  }
+  const body = await response.json();
+  return body;
+}
+
+export async function updateFood(id, formData) {
+  const response = await fetch(`${BASE_URL}/foods/${id}`, {
+    method: "PUT",
+    body: formData,
+  });
+  if (!response.ok) {
+    throw new Error("데이터를 수정하는데 실패했습니다");
+  }
+  const body = await response.json();
+  return body;
+}
+
+export async function deleteFood(id) {
+  const response = await fetch(`${BASE_URL}/foods/${id}`, {
+    method: "DELETE",
+  });
+  if (!response.ok) {
+    throw new Error("데이터를 삭제하는데 실패했습니다");
+  }
+  const body = await response.json();
+  return body;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/useTranslate.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/useTranslate.js"
new file mode 100644
index 00000000..40840860
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/foodit/useTranslate.js"	
@@ -0,0 +1,24 @@
+import { useLocale } from "../contexts/LocaleContext";
+
+const dict = {
+  ko: {
+    "edit button": "수정",
+    "delete button": "삭제",
+  },
+  en: {
+    "edit button": "Edit",
+    "delete button": "Delete",
+  },
+  fr: {
+    "edit button": "Modifier",
+    "delete button": "Supprimer",
+  },
+};
+
+function useTranslate() {
+  const locale = useLocale();
+  const translate = (key) => dict[locale][key] || "";
+  return translate;
+}
+
+export default useTranslate;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/App.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/App.js"
index 37f0478a..81e56fec 100644
--- "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/App.js"	
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/App.js"	
@@ -1,80 +1,98 @@
+import { useCallback, useEffect, useState } from "react";
 import ReviewList from "./ReviewList";
-import { useEffect, useState } from "react";
-import { getReviews } from "../api";
 import ReviewForm from "./ReviewForm";
+import { createReview, deleteReview, getReviews, updateReview } from "../api";
+import useAsync from "../hooks/useAsync";
+import { LocaleProvider } from "../contexts/LocaleContext";
+import LocaleSelect from "./LocaleSelect";
 
 const LIMIT = 6;
 
-// 최상위 컴포넌트
 function App() {
-  // 별점 높은 순으로 정렬
   const [order, setOrder] = useState("createdAt");
   const [offset, setOffset] = useState(0);
   const [hasNext, setHasNext] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [loadingError, setLoadingError] = useState(null);
+  const [isLoading, loadingError, getReviewsAsync] = useAsync(getReviews);
   const [items, setItems] = useState([]);
   const sortedItems = items.sort((a, b) => b[order] - a[order]);
 
   const handleNewestClick = () => setOrder("createdAt");
+
   const handleBestClick = () => setOrder("rating");
 
-  const handleDelete = (id) => {
-    const nextItems = items.filter((item) => item.id !== id);
-    setItems(nextItems);
+  const handleDelete = async (id) => {
+    const result = await deleteReview(id);
+    if (!result) return;
+
+    setItems((prevItems) => prevItems.filter((item) => item.id !== id));
   };
 
-  const handleLoad = async (options) => {
-    // 네트워크 로딩 처리 try-catch-finally와 isLoading 값 이용
-    let result;
-    try {
-      setLoadingError(null);
-      setIsLoading(true);
-      result = await getReviews(options);
-    } catch (error) {
-      setLoadingError(error);
-      return;
-    } finally {
-      setIsLoading(false);
-    }
-    const { paging, reviews } = result;
+  const handleLoad = useCallback(
+    async (options) => {
+      const result = await getReviewsAsync(options);
+      if (!result) return;
 
-    if (options.offset === 0) {
-      setItems(reviews);
-    } else {
-      // 콜백함수 prevItems 사용으로 삭제한 데이터가 다시 set되는 것 방지
-      setItems((prevItems) => [...prevItems, ...reviews]);
-    }
-    setOffset(options.offset + options.limit);
-    setHasNext(paging.hasNext);
-  };
+      const { paging, reviews } = result;
+      if (options.offset === 0) {
+        setItems(reviews);
+      } else {
+        setItems((prevItems) => [...prevItems, ...reviews]);
+      }
+      setOffset(options.offset + options.limit);
+      setHasNext(paging.hasNext);
+    },
+    [getReviewsAsync]
+  );
 
   const handleLoadMore = async () => {
     await handleLoad({ order, offset, limit: LIMIT });
   };
 
-  // 실행할 콜백 함수와 빈 배열을 넘겨 주면
-  // 리액트는 콜백 함수를 맨 처음 렌더링할 때만 실행함 (무한 루프x)
+  const handleCreateSuccess = (review) => {
+    setItems((prevItems) => [review, ...prevItems]);
+  };
+
+  const handleUpdateSuccess = (review) => {
+    setItems((prevItems) => {
+      const splitIdx = prevItems.findIndex((item) => item.id === review.id);
+      return [
+        ...prevItems.slice(0, splitIdx),
+        review,
+        ...prevItems.slice(splitIdx + 1),
+      ];
+    });
+  };
+
   useEffect(() => {
     handleLoad({ order, offset: 0, limit: LIMIT });
-    // order 버튼 클릭마다 state가 바뀌어서 재렌더링이 일어남
-    // 정렬된 데이터 서버 요청에 사용
-  }, [order]);
+  }, [order, handleLoad]);
 
   return (
-    <div>
+    <LocaleProvider defaultValue={"ko"}>
       <div>
-        <button onClick={handleNewestClick}>최신순</button>
-        <button onClick={handleBestClick}>베스트순</button>
+        <LocaleSelect />
+        <div>
+          <button onClick={handleNewestClick}>최신순</button>
+          <button onClick={handleBestClick}>베스트순</button>
+        </div>
+        <ReviewForm
+          onSubmit={createReview}
+          onSubmitSuccess={handleCreateSuccess}
+        />
+        <ReviewList
+          items={sortedItems}
+          onDelete={handleDelete}
+          onUpdate={updateReview}
+          onUpdateSuccess={handleUpdateSuccess}
+        />
+        {hasNext && (
+          <button disabled={isLoading} onClick={handleLoadMore}>
+            더 보기
+          </button>
+        )}
+        {loadingError?.message && <span>{loadingError.message}</span>}
       </div>
-      <ReviewList items={sortedItems} onDelete={handleDelete} />
-      {hasNext && (
-        <button disabled={isLoading} onClick={handleLoadMore}>
-          더 보기
-        </button>
-      )}
-      {loadingError?.message && <span>{loadingError.message}</span>}
-    </div>
+    </LocaleProvider>
   );
 }
 
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/FileInput.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/FileInput.js"
new file mode 100644
index 00000000..d2ebfd98
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/FileInput.js"	
@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+
+function FileInput({ name, value, initalPreview, onChange }) {
+  const [preview, setPreview] = useState(initalPreview);
+  const inputRef = useRef();
+
+  const handleChange = (e) => {
+    const nextValue = e.target.files[0];
+    onChange(name, nextValue);
+  };
+
+  const handleClearClick = () => {
+    const inputNode = inputRef.current;
+    if (!inputNode) return;
+
+    inputNode.value = "";
+    onChange(name, null);
+  };
+
+  useEffect(() => {
+    if (!value) return;
+    const nextPreview = URL.createObjectURL(value);
+    setPreview(nextPreview);
+
+    return () => {
+      setPreview(initalPreview);
+      URL.revokeObjectURL(nextPreview);
+    };
+  }, [value, initalPreview]);
+
+  return (
+    <div>
+      <img src={preview} alt="이미지 미리보기" />
+      <input
+        type="file"
+        accept="image/png, image/jpeg"
+        onChange={handleChange}
+        ref={inputRef}
+      />
+      {value && <button onClick={handleClearClick}>X</button>}
+    </div>
+  );
+}
+
+export default FileInput;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/LocaleContext.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/LocaleContext.js"
new file mode 100644
index 00000000..d8f5a347
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/LocaleContext.js"	
@@ -0,0 +1,37 @@
+import { createContext, useContext, useState } from "react";
+
+const LocaleContext = createContext();
+
+export function LocaleProvider({ defaultValue = "ko", children }) {
+  const [locale, setLocale] = useState(defaultValue);
+
+  return (
+    <LocaleContext.Provider value={{ locale, setLocale }}>
+      {children}
+    </LocaleContext.Provider>
+  );
+}
+
+export function useLocale() {
+  const context = useContext(LocaleContext);
+
+  if (!context) {
+    throw new Error("반드시 LocaleProvider 안에서 사용해야 합니다");
+  }
+
+  const { locale } = context;
+
+  return locale;
+}
+
+export function useSetLocale() {
+  const context = useContext(LocaleContext);
+
+  if (!context) {
+    throw new Error("반드시 LocaleProvider 안에서 사용해야 합니다");
+  }
+
+  const { setLocale } = context;
+
+  return setLocale;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/LocaleSelect.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/LocaleSelect.js"
new file mode 100644
index 00000000..07fcfd3a
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/LocaleSelect.js"	
@@ -0,0 +1,17 @@
+import { useLocale, useSetLocale } from "../contexts/LocaleContext";
+
+function LocaleSelect() {
+  const locale = useLocale();
+  const setLocale = useSetLocale();
+  const handleChange = (e) => setLocale(e.target.value);
+
+  return (
+    <select value={locale} onChange={handleChange}>
+      <option value="ko">한국어</option>
+      <option value="en">English</option>
+      <option value="fr">Francais</option>
+    </select>
+  );
+}
+
+export default LocaleSelect;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/Rating.css" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/Rating.css"
new file mode 100644
index 00000000..0b2523fc
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/Rating.css"	
@@ -0,0 +1,7 @@
+.Rating-star {
+  color: slategray;
+}
+
+.Rating-star.selected {
+  color: yellowgreen;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/Rating.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/Rating.js"
new file mode 100644
index 00000000..af1e1f56
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/Rating.js"	
@@ -0,0 +1,39 @@
+import "./Rating.css";
+
+const RATINGS = [1, 2, 3, 4, 5];
+
+function Star({ selected = false, rating = 0, onSelect, onHover }) {
+  const className = `Rating-star ${selected ? "selected" : ""}`;
+
+  const handleClick = onSelect ? () => onSelect(rating) : undefined;
+
+  const handleMouesOver = onHover ? () => onHover(rating) : undefined;
+
+  return (
+    <span
+      className={className}
+      onClick={handleClick}
+      onMouseOver={handleMouesOver}
+    >
+      ★
+    </span>
+  );
+}
+
+function Rating({ className, value = 0, onSelect, onHover, onMouseOut }) {
+  return (
+    <div className={className} onMouseOut={onMouseOut}>
+      {RATINGS.map((rating) => (
+        <Star
+          key={rating}
+          selected={value >= rating}
+          rating={rating}
+          onSelect={onSelect}
+          onHover={onHover}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default Rating;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/RatingInput.css" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/RatingInput.css"
new file mode 100644
index 00000000..abb151a4
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/RatingInput.css"	
@@ -0,0 +1,3 @@
+.RatingInput {
+  cursor: pointer;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/RatingInput.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/RatingInput.js"
new file mode 100644
index 00000000..710bcdf8
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/RatingInput.js"	
@@ -0,0 +1,23 @@
+import { useState } from "react";
+import Rating from "./Rating";
+import "./RatingInput.css";
+
+function RatingInput({ name, value, onChange }) {
+  const [rating, setRating] = useState(value);
+
+  const handleSelect = (nextValue) => onChange(name, nextValue);
+
+  const handleMouseOut = () => setRating(value);
+
+  return (
+    <Rating
+      className="RatingInput"
+      value={rating}
+      onSelect={handleSelect}
+      onHover={setRating}
+      onMouseOut={handleMouseOut}
+    />
+  );
+}
+
+export default RatingInput;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.js"
index 5e266886..f19da591 100644
--- "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.js"	
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewForm.js"	
@@ -1,29 +1,80 @@
 import { useState } from "react";
+import useAsync from "../hooks/useAsync";
+import FileInput from "./FileInput";
+import RatingInput from "./RatingInput";
 import "./ReviewForm.css";
+import useTranslate from "../hooks/useTranslate";
 
-function ReviewForm() {
-  const [title, setTitle] = useState("");
-  const [rating, setRating] = useState(0);
-  const [content, setContent] = useState("");
+const INITIAL_VALUES = {
+  title: "",
+  rating: 0,
+  content: "",
+  imgFile: null,
+};
 
-  const handleTitleChange = (e) => {
-    setTitle(e.target.value);
+function ReviewForm({
+  initialValues = INITIAL_VALUES,
+  initialPreview,
+  onCancel,
+  onSubmit,
+  onSubmitSuccess,
+}) {
+  const t = useTranslate();
+  const [values, setValues] = useState(initialValues);
+  const [isSubmitting, submittingError, onSubmitAsync] = useAsync(onSubmit);
+
+  const handleChange = (name, value) => {
+    setValues((prevValues) => ({
+      ...prevValues,
+      [name]: value,
+    }));
   };
 
-  const handleRatingChange = (e) => {
-    const nextRating = Number(e.target.value);
-    setRating(nextRating);
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    handleChange(name, value);
   };
 
-  const handleContentChange = (e) => {
-    setContent(e.target.value);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const formData = new FormData();
+    formData.append("title", values.title);
+    formData.append("rating", values.rating);
+    formData.append("content", values.content);
+    formData.append("imgFile", values.imgFile);
+
+    const result = await onSubmitAsync(formData);
+    if (!result) return;
+
+    const { review } = result;
+    setValues(INITIAL_VALUES);
+    onSubmitSuccess(review);
   };
 
   return (
-    <form className="ReviewForm">
-      <input value={title} onChange={handleTitleChange} />
-      <input type="number" value={rating} onChange={handleRatingChange} />
-      <textarea value={content} onChange={handleContentChange} />
+    <form className="ReviewForm" onSubmit={handleSubmit}>
+      <FileInput
+        name="imgFile"
+        value={values.imgFile}
+        initialPreview={initialPreview}
+        onChange={handleChange}
+      />
+      <input name="title" value={values.title} onChange={handleInputChange} />
+      <RatingInput
+        name="rating"
+        value={values.rating}
+        onChange={handleChange}
+      />
+      <textarea
+        name="content"
+        value={values.content}
+        onChange={handleInputChange}
+      />
+      {onCancel && <button onClick={onCancel}>{t("cancel button")}</button>}
+      <button disabled={isSubmitting} type="submit">
+        {t("confirm button")}
+      </button>
+      {submittingError && <div>{submittingError.message}</div>}
     </form>
   );
 }
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.js"
index bb63ca1c..9eefe219 100644
--- "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.js"	
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/ReviewList.js"	
@@ -1,38 +1,77 @@
+import { useState } from "react";
+import Rating from "./Rating";
+import ReviewForm from "./ReviewForm";
 import "./ReviewList.css";
+import useTranslate from "../hooks/useTranslate";
 
-// 영화 포스터, 제목, 줄거리
 function formatDate(value) {
   const date = new Date(value);
   return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
 }
 
-function ReviewListItem({ item, onDelete }) {
+function ReviewListItem({ item, onDelete, onEdit }) {
+  const t = useTranslate();
   const handleDeleteClick = () => {
     onDelete(item.id);
   };
+
+  const handleEditClick = () => {
+    onEdit(item.id);
+  };
+
   return (
     <div className="ReviewListItem">
       <img className="ReviewListItem-img" src={item.imgUrl} alt={item.title} />
       <div>
         <h1>{item.title}</h1>
-        <p>{item.rating}</p>
+        <Rating value={item.rating} />
         <p>{formatDate(item.createdAt)}</p>
         <p>{item.content}</p>
-        <button onClick={handleDeleteClick}>삭제</button>
+        <button onClick={handleEditClick}>{t("edit button")}</button>
+        <button onClick={handleDeleteClick}>{t("delete button")}</button>
       </div>
     </div>
   );
 }
 
-function ReviewList({ items, onDelete }) {
+function ReviewList({ items, onUpdate, onUpdateSuccess, onDelete }) {
+  const [editingId, setEditingId] = useState(null);
+
+  const handleCancel = () => setEditingId(null);
+
   return (
     <ul>
       {items.map((item) => {
+        if (item.id === editingId) {
+          const { id, imgUrl, title, rating, content } = item;
+          const initialValues = { title, rating, content, imgFile: null };
+
+          const handleSubmit = (formData) => onUpdate(id, formData);
+
+          const handleSubmitSuccess = (review) => {
+            onUpdateSuccess(review);
+            setEditingId(null);
+          };
+
+          return (
+            <li key={item.id}>
+              <ReviewForm
+                initialValues={initialValues}
+                initialPreview={imgUrl}
+                onSubmit={handleSubmit}
+                onSubmitSuccess={handleSubmitSuccess}
+                onCancel={handleCancel}
+              />
+            </li>
+          );
+        }
         return (
-          // 요소들의 순서가 바뀌어도 그대로 유지되게 함
-          // 데이터를 구분할 수 있는 고유한 값(id)로 지정
           <li key={item.id}>
-            <ReviewListItem item={item} onDelete={onDelete} />
+            <ReviewListItem
+              item={item}
+              onDelete={onDelete}
+              onEdit={setEditingId}
+            />
           </li>
         );
       })}
@@ -40,17 +79,4 @@ function ReviewList({ items, onDelete }) {
   );
 }
 
-// 영화 제목만
-/*
-function ReviewList({ items }) {
-  return (
-    <ul>
-      {items.map((item) => {
-        return <li>{item.title}</li>;
-      })}
-    </ul>
-  );
-}
-*/
-
 export default ReviewList;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/api.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/api.js"
index c75e8342..acc3928b 100644
--- "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/api.js"	
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/api.js"	
@@ -1,14 +1,49 @@
+const BASE_URL = "https://learn.codeit.kr/api";
+
 export async function getReviews({
   order = "createdAt",
   offset = 0,
   limit = 6,
 }) {
   const query = `order=${order}&offset=${offset}&limit=${limit}`;
-  const response = await fetch(
-    `https://learn.codeit.kr/api/film-reviews?${query}`
-  );
+  const response = await fetch(`${BASE_URL}/film-reviews?${query}`);
   if (!response.ok) {
-    throw new Error("리뷰를 불러오는데 실패했습니다.");
+    throw new Error("리뷰를 불러오는데 실패했습니다");
+  }
+  const body = await response.json();
+  return body;
+}
+
+export async function createReview(formData) {
+  const response = await fetch(`${BASE_URL}/film-reviews`, {
+    method: "POST",
+    body: formData,
+  });
+  if (!response.ok) {
+    throw new Error("리뷰를 생성하는데 실패했습니다.");
+  }
+  const body = await response.json();
+  return body;
+}
+
+export async function updateReview(id, formData) {
+  const response = await fetch(`${BASE_URL}/film-reviews/${id}`, {
+    method: "PUT",
+    body: formData,
+  });
+  if (!response.ok) {
+    throw new Error("리뷰를 수정하는데 실패했습니다.");
+  }
+  const body = await response.json();
+  return body;
+}
+
+export async function deleteReview(id) {
+  const response = await fetch(`${BASE_URL}/film-reviews/${id}`, {
+    method: "DELETE",
+  });
+  if (!response.ok) {
+    throw new Error("리뷰를 삭제하는데 실패했습니다.");
   }
   const body = await response.json();
   return body;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/useAsync.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/useAsync.js"
new file mode 100644
index 00000000..451250bc
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/useAsync.js"	
@@ -0,0 +1,25 @@
+import { useCallback, useState } from "react";
+
+function useAsync(asyncFunction) {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(null);
+
+  const wrappedFunction = useCallback(
+    async (...args) => {
+      setPending(true);
+      setError(null);
+      try {
+        return await asyncFunction(...args);
+      } catch (error) {
+        setError(error);
+      } finally {
+        setPending(false);
+      }
+    },
+    [asyncFunction]
+  );
+
+  return [pending, error, wrappedFunction];
+}
+
+export default useAsync;
diff --git "a/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/useTranslate.js" "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/useTranslate.js"
new file mode 100644
index 00000000..484c9722
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \353\215\260\354\235\264\355\204\260 \353\213\244\353\243\250\352\270\260/moviepedia/useTranslate.js"	
@@ -0,0 +1,30 @@
+import { useLocale } from "../contexts/LocaleContext";
+
+const dict = {
+  ko: {
+    "confirm button": "확인",
+    "cancel button": "취소",
+    "edit button": "수정",
+    "delete button": "삭제",
+  },
+  en: {
+    "confirm button": "OK",
+    "cancel button": "Cancel",
+    "edit button": "Edit",
+    "delete button": "Delete",
+  },
+  fr: {
+    "confirm button": "Confirmer",
+    "cancel button": "Annuler",
+    "edit button": "Modifier",
+    "delete button": "Supprimer",
+  },
+};
+
+function useTranslate() {
+  const locale = useLocale();
+  const translate = (key) => dict[locale][key] || "";
+  return translate;
+}
+
+export default useTranslate;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/Main.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/Main.js"
new file mode 100644
index 00000000..72b08d95
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/Main.js"	
@@ -0,0 +1,33 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import App from "./components/App";
+import HomePage from "./pages/HomePage";
+import CoursePage from "./pages/CoursePage";
+import CourseListPage from "./pages/CourseListPage";
+import WishlistPage from "./pages/WishlistPage";
+import QuestionListPage from "./pages/QuestionListPage";
+import QuestionPage from "./pages/QuestionPage";
+import NotFoundPage from "./pages/NotFoundPage";
+
+function Main() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route index element={<HomePage />} />
+          <Route path="courses">
+            <Route index element={<CourseListPage />} />
+            <Route path=":courseSlug" element={<CoursePage />} />
+          </Route>
+          <Route path="questions">
+            <Route index element={<QuestionListPage />} />
+            <Route path=":questionsId" element={<QuestionPage />} />
+          </Route>
+          <Route path="wishlist" element={<WishlistPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default Main;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/api/index.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/api/index.js"
new file mode 100644
index 00000000..015a752c
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/api/index.js"	
@@ -0,0 +1,42 @@
+import mock from './mock.json';
+const { courses, questions } = mock;
+
+function filterByKeyword(items, keyword) {
+  const lowered = keyword.toLowerCase();
+  return items.filter(({ title }) => title.toLowerCase().includes(lowered));
+}
+
+export function getCourses(keyword) {
+  if (!keyword) return courses;
+  return filterByKeyword(courses, keyword);
+}
+
+export function getCourseBySlug(courseSlug) {
+  return courses.find((course) => course.slug === courseSlug);
+}
+
+export function getQuestions(keyword) {
+  if (!keyword) return questions;
+  return filterByKeyword(questions, keyword);
+}
+
+export function getQuestionById(questionId) {
+  return questions.find((question) => question.id === questionId);
+}
+
+const WISHLIST_KEY = 'codethat-wishlist';
+const wishlist = JSON.parse(localStorage.getItem(WISHLIST_KEY) || '{}');
+
+export function addWishlist(courseSlug) {
+  wishlist[courseSlug] = true;
+  localStorage.setItem(WISHLIST_KEY, JSON.stringify(wishlist));
+}
+
+export function deleteWishlist(courseSlug) {
+  delete wishlist[courseSlug];
+  localStorage.setItem(WISHLIST_KEY, JSON.stringify(wishlist));
+}
+
+export function getWishlist() {
+  return courses.filter((course) => wishlist[course.slug]);
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/api/mock.json" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/api/mock.json"
new file mode 100644
index 00000000..248e6330
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/api/mock.json"	
@@ -0,0 +1 @@
+{"courses":[{"id":"5e71ac5d8b427122575e1d92","code":"101","title":"프로그래밍 기초 in Python","difficulty":1,"slug":"intro-to-python-programming","summary":"웹/앱 개발, 데이터 분석, 인공지능/머신러닝, 업무 자동화 등으로 나아가기 위한 첫 걸음!","language":"PYTHON","photoUrl":"python","newReleased":false,"topics":[{"topic":{"id":"5e71b88447e1487937461f50","slug":"getting-started-with-python","title":"프로그래밍 시작하기 in Python","summary":"프로그래밍의 진입 장벽이 너무 높게 느껴진다면? 파이썬으로 프로그래밍을 시작하세요! 설치 과정부터 파이썬의 기본적인 개념들까지 모두 알려 드립니다."}},{"topic":{"id":"5e71b98d855e806094b57ad0","slug":"core-concept-of-python-programming","title":"프로그래밍 핵심 개념 in Python","summary":"자료형, 추상화, 제어문... 쉽다면 쉬운 개념이지만, 많은 이들이 제대로 알고 있지 못한 프로그래밍 핵심 개념. 여러분은 완벽하게 알고 가시길 바랍니다!"}},{"topic":{"id":"5e71b9ce8b427122577e26f1","slug":"python-programming-and-data","title":"프로그래밍과 데이터 in Python","summary":"프로그래밍이란 결국 데이터를 받아서 처리하는 것인데요. 그렇다면 프로그래밍을 잘하기 위해서는 데이터를 제대로 알아야겠죠? 그 비결을 알려드립니다!"}},{"topic":{"id":"5e71ba1e855e806094b6ea9b","slug":"making-use-of-python","title":"파이썬 응용하기","summary":"파이썬 문법과 프로그래밍 개념은 배웠는데, 어떻게 활용해야 할지 모르겠다고요? 데이터 분석, 로또 시뮬레이션 등 프로젝트를 해 보며 아이디어를 얻어 보세요."}}]},{"id":"5f44779ba1fe743841ae7939","code":"111","title":"Python 중급","difficulty":2,"slug":"python-intermediate","summary":"파이썬을 파고들어, 서버 개발, 업무 자동화, 게임 개발 등 무엇이든 할 수 있는 기반을 다져 보아요.","language":"PYTHON","photoUrl":"python","newReleased":false,"topics":[{"topic":{"id":"5f4478daa1fe743841b42acf","slug":"python-module-and-package","title":"파이썬 모듈과 패키지","summary":"파이썬 실력을 한 단계 향상해 주는 모듈과 패키지, 이번 토픽을 통해 마스터하세요!"}},{"topic":{"id":"5f4872fe372038687eb80444","slug":"python-environment-for-mac","title":"파이썬 환경 for Mac","summary":"파이썬 지금까지는 그냥 설치되는대로 사용해 왔죠? 이번 토픽에서 파이썬 환경에 대해 자세히 알아보세요! "}}]},{"id":"5e345223b3aa703b8a9a4f38","code":"121","title":"객체 지향 프로그래밍","difficulty":2,"slug":"object-oriented-programming","summary":"개발 업무에서 가장 널리 쓰이는 프로그래밍 방법론. 확장성 있고 관리가 쉬운 코드를 설계해 보세요.","language":"PYTHON","photoUrl":"oop","newReleased":false,"topics":[{"topic":{"id":"5e345230d909cbb85ba2eb41","slug":"what-is-oop","title":"객체 지향 프로그래밍이란?","summary":"객체 지향 프로그래밍, 바로 시작해 봅시다. 여러분도 게임 캐릭터, 블로그 유저 같은 요소들을 객체 지향적으로 설계하고 작성할 수 있습니다."}},{"topic":{"id":"5e345230d909cbb85ba2eb42","slug":"four-pillars-of-oop","title":"객체 지향 프로그래밍의 4개의 기둥","summary":"객체 지향에는 네 가지 핵심 기둥이 있다는 것 아셨나요? 좋은 객체 지향 프로그래밍에 대한 기준을 세워봅시다."}},{"topic":{"id":"5e345230d909cbb85ba2eb43","slug":"solid-principles-of-oop","title":"견고한 객체 지향 프로그래밍","summary":"객체 지향 프로그래밍의 마지막 걸음. 코드의 규모가 커질 수록 복잡성은 증가합니다. 객체 지향 코드를 견고하게 관리할 수 있는 방법을 배워 보세요."}}]},{"id":"5e345223b3aa703b8a9a4f37","code":"122","title":"알고리즘의 정석","difficulty":2,"slug":"algorithms","summary":"컴퓨터 과학의 핵심이자 개발자 면접의 핵심인 알고리즘! 효율적인 코드 작성의 밑바탕을 쌓아 보세요.","language":"PYTHON","photoUrl":"algorithm","newReleased":false,"topics":[{"topic":{"id":"5e345230d909cbb85ba2eb3d","slug":"what-is-a-good-algorithm","title":"좋은 알고리즘이란?","summary":"알고리즘이 정확히 뭘까요? 그렇다면 좋은 알고리즘이란 뭘까요? 알고리즘의 효율성을 평가하는 방법을 배우며 알고리즘 세계에 입문하세요."}},{"topic":{"id":"5e345230d909cbb85ba2eb3e","slug":"recursion","title":"재귀 함수","summary":"함수 안에 함수 안에 함수... 뭐지, 인셉션인가? 헷갈리지만 개발자라면 피할 수 없는 재귀 함수! 개념을 정확히 파악하고 연습을 통해 재귀와 친해지세요."}},{"topic":{"id":"5e345230d909cbb85ba2eb3f","slug":"algorithmic-paradigms","title":"알고리즘 패러다임","summary":"알고리즘에도 공식이 있다? 그게 바로 알고리즘 패러다임! 여지껏 해 왔던 순진한 방식이 아닌, 정말 효율적인 알고리즘을 생각해 내는 힘을 길러 보세요."}},{"topic":{"id":"5e345230d909cbb85ba2eb40","slug":"practicing-algorithmic-problem-solving","title":"문제 해결 능력 기르기","summary":"개발자 면접을 보면 알고리즘 문제를 낸다던데… 그럼 훈련을 해야겠죠? 실전 문제들을 보고, 분석하는 단계부터 실제 코드를 구현하는 단계까지 모두 연습하세요."}}]},{"id":"5e345223b3aa703b8a9a4f39","code":"131","title":"자료 구조","difficulty":2,"slug":"data-structures","summary":"방대한 데이터를 효율적으로 관리하는 방법을 배워, 컴퓨터 과학의 기본기를 탄탄하게 쌓아봐요.","language":"PYTHON","photoUrl":"ds","newReleased":false,"topics":[{"topic":{"id":"5e345230d909cbb85ba2eb45","slug":"data-structure-basics","title":"기본 자료 구조들","summary":"자료 구조, 어디서부터 시작하지? 메모리, 추상 자료형 등 가장 기본부터 공부하세요! 그 후 기본 자료 구조들은 쉽게 이해하실 수 있을 것입니다."}},{"topic":{"id":"5e345230d909cbb85ba2eb46","slug":"trees","title":"트리","summary":"기본 자료 구조들은 이미 다 완벽하게 파악하셨다고요? 이번에는 좀 더 복잡하지만, 컴퓨터 과학 이곳저곳에서 많이 활용하는 트리를 배우시는 건 어떠신가요?"}},{"topic":{"id":"5e345230d909cbb85ba2eb47","slug":"graphs","title":"그래프","summary":"실세상에 존재하는 데이터들은 대부분 서로 연결되어 있는 경우가 많은데요. 컴퓨터에서 이런 데이터들을 저장하고 사용할 수 있게 해주는 그래프에 대해서 배워봅시다!"}}]},{"id":"5e345223b3aa703b8a9a4f32","code":"311","title":"데이터 사이언스 입문","difficulty":2,"slug":"data-science","summary":"데이터를 이해하고 다루는 능력을 기르고, 데이터 중심으로 다변하는 산업에서 경쟁력을 키우세요.","language":"PYTHON","photoUrl":"data-science","newReleased":false,"topics":[{"topic":{"id":"5e345230d909cbb85ba2eb38","slug":"getting-started-with-data-science","title":"데이터 사이언스 시작하기","summary":"데이터 사이언스... 말로만 많이 들었지, 실제 뭔지는 모르겠죠? 데이터 사이언스가 무엇인지 배우고, 데이터 사이언스를 하기 위해 필요한 도구들을 익혀 보세요."}},{"topic":{"id":"5e345230d909cbb85ba2eb39","slug":"mastering-pandas-dataframe","title":"DataFrame 다루기","summary":"엑셀에서는 데이터를 표에 담는다면, 파이썬에서는 DataFrame에 담는다! 데이터 사이언스를 하기 전에, DataFrame을 현란하게 다룰 수 있도록 준비하세요."}},{"topic":{"id":"5e345230d909cbb85ba2eb3a","slug":"data-analysis-and-visualization","title":"데이터 분석과 시각화","summary":"데이터를 아무리 많이 모아도, 활용할 줄 모르면 말짱 도루묵! 데이터를 분석해서 의미를 도출하고, 시각적으로 멋지게 표현하는 방법까지 배워 보세요."}},{"topic":{"id":"5e345230d909cbb85ba2eb3b","slug":"improving-data-quality","title":"데이터 퀄리티 높이기","summary":"쓰레기를 넣으면 쓰레기가 나온다? 아무리 분석이 훌륭해도 데이터가 별로면 의미 없습니다! 좋은 데이터의 기준을 이해하고, 쓰레기 데이터를 보석으로 재가공하세요."}},{"topic":{"id":"5e345230d909cbb85ba2eb3c","slug":"collecting-and-creating-data","title":"데이터 만들기","summary":"분석을 하기 위해 필요한 데이터를 수집해야겠죠? 웹사이트를 분해하는 코드도 작성하고, 자동으로 웹을 돌아다니면서 정보를 수집하는 프로그램도 만들어 보세요."}}]},{"id":"5e6732574b0b59235a15c86b","code":"321","title":"머신 러닝","difficulty":3,"slug":"machine-learning","summary":"이 시대의 핵심 IT 키워드인 인공 지능(AI). 그 기반이 되는 기술인 머신 러닝으로 시작해 보세요.","language":"PYTHON","photoUrl":"machine-learning","newReleased":false,"topics":[{"topic":{"id":"5e6731d2e1c354224fb88efb","slug":"pre-machine-learning","title":"머신 러닝 기본기","summary":"머신 러닝이란 뭐고, 배우기 전에 미리 알고 있어야 되는 내용은 뭐가 있을까요? 머신 러닝을 본격적으로 시작하기 전에 이번 토픽에서 제대로 짚고 넘어갑시다!"}},{"topic":{"id":"5e6731eafa82385b57335783","slug":"elementary-supervised-algorithms","title":"기본 지도 학습 알고리즘들","summary":"머신 러닝이라는 과목 안에는 기계를 학습시키는 다양한 방법들이 있는데요. 이번 토픽에서는 다양한 알고리즘들 중 가장 기본이 되는 알고리즘들에 대해서 배워봅시다."}},{"topic":{"id":"5e67320c4b0b59235a14e8fd","slug":"optimizing-machine-learning-models","title":"머신 러닝, 더 빠르고 정확하게","summary":"머신 러닝은 경험을 통해 프로그램의 성능을 최적화하는 학문인데요. 이번 레슨에서는 좀 더 빠르고 정확하게 프로그램을 학습시키는 방법에 대해서 배워봅시다!"}},{"topic":{"id":"5e6731fce1c354224fb953ba","slug":"decision-tree-and-ensemble","title":"결정 트리와 앙상블 기법","summary":"결정 트리와, 수많은 결정 트리를 합쳐서 좋은 성능의 모델을 만들어내는 앙상블 기반 알고리즘들 대해서 배워봅시다."}}]},{"id":"5f69873536e82326c31293c7","code":"331","title":"머신 러닝 실전","difficulty":3,"slug":"machine-learning-in-practice","summary":"머신 러닝이 우리 생활 속에서 어디에 사용되고, 어떻게 적용되는지 실전 예제를 통해 알아 보아요!","language":"PYTHON","photoUrl":"machine-learning","newReleased":false,"topics":[{"topic":{"id":"5f6987ff36e82326c315f90f","slug":"recommender-systems","title":"추천 시스템","summary":"추천 시스템이란 무엇이고, 우리 생활에 어떤 영향을 미치고 있을까요? 이번 토픽에서 추천 시스템이 우리의 생활을 어떻게 지배하고 있는지를 배워봅시다!"}},{"topic":{"id":"5f6da787dab0f329c5c63eb1","slug":"natural_language_processing","title":"자연어 처리","summary":"자연어란 컴퓨터가 아니라 사람들이 사용하는 언어를 뜻하는데요. 머신 러닝을 사용해서 어떻게 사람들의 언어를 컴퓨터로 처리하는지 배워봅시다!"}}]},{"id":"5e673408e1c354224fc0c8eb","code":"336","title":"딥 러닝","difficulty":3,"slug":"deep-learning","summary":"1950년대부터 해 온 인공 지능 연구. 최근 들어 급격한 발전이 이루어졌는데요. 엄청난 성능의 딥 러닝 덕분에 가능했던 것입니다. 그저 마법 같은 이 기술의 원리와 활용법을 알려드리겠습니다.","language":"PYTHON","photoUrl":"deep-learning","newReleased":false,"topics":[{"topic":{"id":"5e673393e1c354224fbec491","slug":"ann-theory","title":"인공 신경망 이론","summary":"인공 지능 연구의 핵심인 딥 러닝의 가장 기본이 되는 알고리즘 인공 신경망. 도대체 어떤 원리로 작동하는 걸까요? 이번 토픽에서 자세하고 정확하게 알아봅시다."}},{"topic":{"id":"5e6733a5fa82385b573954da","slug":"deep-learning-topic-2","title":"인공 신경망 쉽게 사용하기","summary":"신경망은 이론만 알고 바로 실전에서 사용하기는 굉장히 어렵습니다. 이번 토픽에서는 라이브러리를 사용해서 신경망을 쉽게 사용하는 방법에 대해서 알아보겠습니다!"}}]},{"id":"5f35fac7bae77a76bba6d44a","code":"501","title":"프로그래밍 기초 in JavaScript","difficulty":1,"slug":"intro-to-programming-in-javascript","summary":"웹 개발을 하고 싶다면 필수! 무엇이든 할 수 있는 기반을 다지려면 자바스크립트로 시작하세요.","language":"JAVASCRIPT","photoUrl":"js","newReleased":false,"topics":[{"topic":{"id":"5f35fd346008aa33709c1d6c","slug":"getting-started-with-javascript","title":"프로그래밍 시작하기 in JavaScript","summary":"프로그래밍의 진입 장벽이 너무 높게 느껴지나요? 자바스크립트로 프로그래밍을 시작해보세요! 간단한 환경 설정부터 기본적인 개념까지 모두 알려드립니다."}},{"topic":{"id":"5f361b01bae77a76bbf4b184","slug":"core-concept-of-javascript-programming","title":"프로그래밍 핵심 개념 in JavaScript","summary":"자료형, 추상화, 제어문... 쉽다면 쉬운 개념이지만, 많은 이들이 제대로 알고 있지 못한 프로그래밍 핵심 개념. 여러분은 완벽하게 알고 가시길 바랍니다!"}},{"topic":{"id":"5f361e2abae77a76bbfd815b","slug":"javascript-programming-and-data","title":"프로그래밍과 데이터 in JavaScript","summary":"프로그래밍이란 결국 데이터를 받아서 처리하는 것인데요. 그렇다면 프로그래밍을 잘하기 위해서는 데이터를 제대로 알아야겠죠? 그 비결을 알려드립니다!"}}]},{"id":"5e345223b3aa703b8a9a4f36","code":"502","title":"웹 퍼블리싱","difficulty":1,"slug":"web-publishing","summary":"웹 개발의 가장 기본이라 할 수 있는 HTML과 CSS를 통해 내 머릿속의 아이디어를 실현해 보세요!","language":"HTML_CSS","photoUrl":"web-publishing","newReleased":false,"topics":[{"topic":{"id":"5e345230d909cbb85ba2eb32","slug":"getting-started-with-html-css","title":"HTML/CSS 시작하기","summary":"\"웹사이트 어떻게 만들지...\" 고민이라면? 일단 HTML과 CSS부터 공부하세요. 생각보다 너무 쉬워서 놀랄 수도 있습니다!"}},{"topic":{"id":"5e345230d909cbb85ba2eb33","slug":"html-css-core-concepts","title":"HTML/CSS 핵심 개념","summary":"처음에는 쉬워 보이는 HTML/CSS, 하다 보면 생각처럼 안 돼서 화가 납니다! 하지만 원리를 잘 익히면 브라우저를 마치 그림판처럼 자유자재로 쓸 수 있습니다."}},{"topic":{"id":"5e345230d909cbb85ba2eb35","slug":"responsive-web-publishing","title":"반응형 웹 퍼블리싱","summary":"분명 예쁘게 만들었는데... 스마트폰, 타블렛에서는 왜 깨질까요? 반응형 웹 퍼블리싱을 배워서 어떤 기기에서든 잘 동작하는 웹사이트를 만들어 보세요."}}]},{"id":"5e673b9a4b0b59235a36f0bd","code":"511","title":"JavaScript 중급","difficulty":2,"slug":"javascript-intermediate","summary":"웹의 핵심 언어인 자바스크립트의 여러 심화 문법을 통해, 웹 개발에 한 걸음 더 내딛어 보세요.","language":"PYTHON","photoUrl":"js","newReleased":false,"topics":[{"topic":{"id":"5e673b55fa82385b5756be4b","slug":"interactive-javascript","title":"인터랙티브 자바스크립트","summary":"웹 페이지를 움직이는 마법, 자바스크립트로 웹을 다루는 기본 원리들을 제대로 익혀보세요!"}},{"topic":{"id":"5e673b6efa82385b57575760","slug":"modern-javascript","title":"모던 자바스크립트","summary":"ES6? ECMAScript? 자바스크립트도 버전이 있었어? 좀 더 트렌디한 자바스크립트를 익혀보세요!"}},{"topic":{"id":"5e673b63e1c354224fdc6c8a","slug":"object-oriented-javascript","title":"자바스크립트 객체 지향 기본기","summary":"웹 개발을 하려면 자바스크립트의 객체에 대한 이해가 필수적입니다. 관련된 핵심 내용을 빠르게 배워봅시다!"}},{"topic":{"id":"5fe160496552dd371745a0b3","slug":"basics-of-js-web-dev","title":"자바스크립트 웹 개발 기본기","summary":"자바스크립트로 웹 개발을 하려면 '웹 기초'부터 시작해서 'Promise 객체'까지 다양한 내용을 배워야 합니다. 필요한 배경 지식들을 제대로 쌓아봅시다."}}]},{"id":"5f3cd65b92f99f1bae2b7238","code":"512","title":"jQuery","difficulty":2,"slug":"jquery","summary":"요즘은 인터랙티브한 사이트가 대세! jQuery와 함께 웹 프론트엔드 개발을 시작하세요.","language":"PYTHON","photoUrl":"jquery","newReleased":false,"topics":[{"topic":{"id":"5e345230d909cbb85ba2eb34","slug":"getting-started-with-jquery","title":"jQuery 시작하기","summary":"인터랙티브한 사이트를 더 쉽게 만들고 싶다면? jQuery가 해결책! 복잡한 기능도 jQuery를 사용하면 몇 줄 안에 해결!"}},{"topic":{"id":"5e345230d909cbb85ba2eb37","slug":"making-use-of-jquery","title":"jQuery 활용하기","summary":"jQuery에 익숙해 졌다면, 본격적인 활용을 해 봅시다. 내부 동작 원리부터 포트폴리오까지!"}}]},{"id":"5f598b6e3ea115401463e4cb","code":"516","title":"Django 웹 개발","difficulty":2,"slug":"django-web-development","summary":"파이썬으로 웹 개발을 하고싶다면? 지금 바로 Django 웹 개발을 시작해보세요. 여러분이 알고 있는 모든 파이썬 지식을 웹 개발에 그대로 적용할 수 있습니다.","language":"PYTHON","photoUrl":"django","newReleased":true,"topics":[{"topic":{"id":"5f598c663c56b861a75cdcdd","slug":"getting-started-with-django","title":"Django 웹 개발 시작하기","summary":"설치부터 배포까지 하나의 토픽으로 Django의 매력을 느껴보세요! Django가 무엇인지 왜 사용하는지를 알고 예제를 통해 전체 구조와 흐름을 파악합니다."}},{"topic":{"id":"5f59911f85fa717f8c38ecdb","slug":"django-crud","title":"Django CRUD","summary":"웹 사이트 기능의 대부분은 CRUD 애플리케이션입니다. 이번 토픽에서 CRUD를 중심으로 웹 사이트의 핵심 기능을 구현해봅시다."}},{"topic":{"id":"6078f3dd68a063759459007a","slug":"django-user-system","title":"Django 유저 기능 구현하기","summary":"요즘 대부분의 웹서비스는 유저 기능이 있습니다. 유저 기능이란 정확히 뭘까요? 유저 기능은 어떻게 만드는 걸까요? 이번 토픽에서 알아보세요!"}},{"topic":{"id":"60f634203bda4b6064f238ad","slug":"django-understanding-models","title":"Django 모델 파헤치기","summary":"데이터 모델링부터 마이그레이션까지! Django 모델을 파헤쳐 봅시다."}}]},{"id":"5e673b1c4b0b59235a34af87","code":"521","title":"React 프론트엔드 개발","difficulty":2,"slug":"react-frontend-development","summary":"단순한 웹 문서가 아니라 완성도 높은 웹 화면을 개발해보고 싶나요? React를 사용하면 복잡한 웹 화면을 효율적으로 개발할 수 있습니다. 영향력이 점점 커지고 있는 React 프론트엔드 개발에 도전해 보세요!","language":"PYTHON","photoUrl":"react","newReleased":true,"topics":[{"topic":{"id":"5e673842e1c354224fd04c56","slug":"getting-started-with-react","title":"React 웹 개발 시작하기","summary":"개발 환경 설정부터 실제 배포까지! 리액트 프로젝트를 직접 만들어보면서 리액트의 기초를 배우면서 프론트엔드 웹 개발을 이해해봅시다."}},{"topic":{"id":"5e673a87e1c354224fd9dfa7","slug":"react-topic-2","title":"React로 데이터 다루기","summary":"간단한 게시판이나 상품 목록 페이지를 만들어 보고 싶나요? 그렇다면 배열 렌더링, 페이지네이션, 입력 폼처럼 리액트로 데이터 다루는 방법을 배워보세요!"}}]},{"id":"5e6737c14b0b59235a28c35a","code":"524","title":"Node.js 백엔드 개발","difficulty":3,"slug":"nodejs-backend-development","summary":"요즘 가장 핫한 Node.js와 Express로, 서비스의 \"브레인\" 역할을 하는 서버 개발을 시작해 보세요!","language":"PYTHON","photoUrl":"node-js","newReleased":true,"topics":[{"topic":{"id":"5e6736a2e1c354224fcb477f","slug":"intro-to-nodejs","title":"Node.js 기본기","summary":"Node.js를 배우면 자바스크립트 하나만 알아도 프론트엔드와 백엔드를 개발할 수 있습니다. Node.js로 고성능 웹 서버 프로그램을 개발하는 법을 배워봅시다."}},{"topic":{"id":"5e6736d64b0b59235a26735f","slug":"intro-to-express","title":"Express 기본기","summary":"Node.js에는 Express라는 대표적인 웹 서버 프레임워크가 있습니다. 간단한 프로젝트를 수행하면서 Express의 기본적인 사용법을 알아봅시다. "}},{"topic":{"id":"5e6736e94b0b59235a26ac2c","slug":"nodejs-user-authentication","title":"Express 활용하기","summary":"Node.js로 실무 수준의 프로젝트를 수행하려면 더 깊은 내용을 알아야합니다. Node.js와 Express 및 필수 패키지들을 더 깊게 공부해봅시다."}}]},{"id":"5e345223b3aa703b8a9a4f35","code":"701","title":"자바 기초","difficulty":1,"slug":"intro-to-java","summary":"프로그래밍 역사상 가장 꾸준한 인기 언어인 자바를 통해 앱 개발과 웹 개발의 핵심을 습득해 봐요.","language":"JAVA","photoUrl":"java","newReleased":false,"topics":[{"topic":{"id":"5e345230d909cbb85ba2eb2e","slug":"java-basics","title":"자바 왕기초","summary":"자바가 처음에는 배우기 조금 어려운 언어입니다. 복잡한 문법들은 모두 제쳐두고, 먼저 가장 기본적인 개념들부터 완벽하게 익혀 봅시다."}},{"topic":{"id":"5e345230d909cbb85ba2eb2f","slug":"java-oop","title":"자바 객체 지향 프로그래밍","summary":"대표적인 객체 지향 프로그래밍 언어인 자바! 자바를 제대로 알기 위해서는 “객체”가 뭔지 알아야 하죠. 실무 프로젝트를 통해 객체 지향 프로그래밍을 정복하세요!"}},{"topic":{"id":"5e345230d909cbb85ba2eb31","slug":"intermediate-java-concepts","title":"자바 중급 개념","summary":"자바 초보를 탈출하고 싶다면? 상속, 인터페이스, 추상 클래스 등 객체 지향 프로그래밍 심화 개념과 캐스팅, 제네릭 등 자바 중급 개념을 공부하세요!"}}]},{"id":"5e345223b3aa703b8a9a4f3a","code":"801","title":"컴퓨터 개론","difficulty":0,"slug":"intro-to-computer","summary":"어디서부터 시작해야 할지 고민된다면, 컴퓨터 개론 코스를 통해 프로그래밍의 첫 걸음을 시작해 봐요!","language":"PYTHON","photoUrl":"intro-to-computer","newReleased":false,"topics":[{"topic":{"id":"5e71b88447e1487937461f50","slug":"getting-started-with-python","title":"프로그래밍 시작하기 in Python","summary":"프로그래밍의 진입 장벽이 너무 높게 느껴진다면? 파이썬으로 프로그래밍을 시작하세요! 설치 과정부터 파이썬의 기본적인 개념들까지 모두 알려 드립니다."}},{"topic":{"id":"5e345230d909cbb85ba2eb48","slug":"intro-to-programming-languages","title":"프로그래밍 언어 이해하기","summary":"전공자는 물론 비전공자도 이 토픽만 들어도 기본적인 프로그래밍 언어의 특징과 분야를 이해할 수 있습니다. 비전공자를 위한 기초강의!"}},{"topic":{"id":"5e345230d909cbb85ba2eb49","slug":"intro-to-the-world-of-programming","title":"프로그래머의 세계 이해하기","summary":"현직 프로그래머들은 뭔가 다른 세상에 살고 있다고 느낄 때가 많이 있는데요. 그들의 일상을 한번 들여다 봅시다."}},{"topic":{"id":"5e345230d909cbb85ba2eb4a","slug":"intro-to-software","title":"소프트웨어 이해하기","summary":"프로그래머가 되기 위해서는 어떤 프로그램이 사용되고 있는지 알아야겠죠? 이 세상에 존재하는 소프트웨어의 큰 그림을 살펴봅시다."}}]},{"id":"5e67354afa82385b573ef490","code":"802","title":"4차 산업 혁명 생존 가이드","difficulty":1,"slug":"fourth-industrial-revolution","summary":"클라우드, 인공지능, 가상현실, 블록체인 등, 21세기 핫한 기술의 핵심 개념과 원리를 깨우쳐 보아요!","language":"PYTHON","photoUrl":"fourth-revolution","newReleased":false,"topics":[{"topic":{"id":"6077b3fade87cf1b12ec42da","slug":"cloud-computing","title":"클라우드 컴퓨팅","summary":"우리는 클라우드 덕분에 수많은 서비스를 편리하게 쓰고 있습니다. 클라우드가 뭘까요? 클라우드의 개념, 시장 상황, 사용법, 그 미래까지 알아봅시다. "}},{"topic":{"id":"5e6734f04b0b59235a1ef6bf","slug":"artificial-intelligence","title":"인공지능","summary":"오늘날 많은 분야에서 인공지능이 사용되고 있습니다. 인공지능 안에는 다양한 종류의 기술이 포함되어 있는데요. 이 기술들의 원리와 활용 분야를 살펴봅시다."}},{"topic":{"id":"5e6735004b0b59235a1ef82c","slug":"vr-and-ar","title":"증강 현실 & 가상 현실","summary":"증강 현실과 가상 현실은 우리에게 또다른 세계를 선물해주는 기술입니다. 이 기술들의 의의와 현재 시장 상황 등을 살펴보도록 합시다.  "}},{"topic":{"id":"5e67350f4b0b59235a1efdb3","slug":"blockchain","title":"블록체인","summary":"블록체인은 동일한 정보를 여러 주체에게 분산 저장해서 정보의 조작을 막을 수 있는 기술입니다. 그 안에 들어있는 구체적인 원리와 기술의 전망을 알아봅시다. "}}]},{"id":"5f991185d15fc22b2259f646","code":"811","title":"업무 자동화 for Windows","difficulty":1,"slug":"automation-for-windows","summary":"업무 효율은 일을 얼마나 빨리하는지에 달려 있다고요? 얼마나 자동화하느냐에 달려 있습니다! 업무 자동화의 파급력, 직접 경험해 보세요!","language":"PYTHON","photoUrl":"automation","newReleased":false,"topics":[{"topic":{"id":"5fb484501c8d503ae10090d3","slug":"web-automation","title":"웹 자동화","summary":"웹에서 하던 귀찮은 작업을 이제 자동으로! '웹 자동화'에 대해 알아보세요. "}},{"topic":{"id":"5e672fdffa82385b572c4356","slug":"file-automation-for-windows","title":"파일 자동화 for Windows","summary":"우리는 하루에도 수많은 파일과 폴더를 다루고 있습니다. 이걸 자동화할 수 있다면? 생각보다 간단하답니다. 바로 시작해 보세요!"}}]},{"id":"5e670229fa82385b57bce83f","code":"812","title":"업무 자동화 for Mac","difficulty":1,"slug":"automation-for-mac","summary":"업무 효율은 일을 얼마나 빨리하는지에 달려 있다고요? 얼마나 자동화하느냐에 달려 있습니다! 업무 자동화의 파급력, 직접 경험해 보세요!","language":"PYTHON","photoUrl":"automation","newReleased":false,"topics":[{"topic":{"id":"5fb484501c8d503ae10090d3","slug":"web-automation","title":"웹 자동화","summary":"웹에서 하던 귀찮은 작업을 이제 자동으로! '웹 자동화'에 대해 알아보세요. "}},{"topic":{"id":"5e672fcafa82385b572c3408","slug":"file-automation-for-mac","title":"파일 자동화 for Mac","summary":"우리는 하루에도 수많은 파일과 폴더를 다루고 있습니다. 이걸 자동화할 수 있다면? 생각보다 간단하답니다. 바로 시작해 보세요!"}}]},{"id":"5e673086fa82385b572ef1ed","code":"901","title":"유닉스 커맨드 라인","difficulty":1,"slug":"unix-command-line","summary":"리눅스, 우분투, macOS를 한 방에 배우고 싶다면? 그 시작점인 유닉스의 핵심만 요약해서 배워 보세요.","language":"PYTHON","photoUrl":"unix","newReleased":false,"topics":[{"topic":{"id":"5e6730e74b0b59235a11460a","slug":"unix-commands","title":"유닉스 커맨드 배우기","summary":"커맨드 환경은 개발자라면 실무에서 언제든 마주칠 수 있습니다. 더 다양한 작업을 빠르게 할 수 있는 커맨드, 바로 배워봅시다."}}]},{"id":"5e67317c4b0b59235a12e2a6","code":"902","title":"Git으로 배우는 버전 관리","difficulty":2,"slug":"version-control-with-git","summary":"개발자들의 필수 소양인 Git. 코드의 버전을 관리하며 다른 사람들과 협업하는 방식을 익혀 보세요.","language":"PYTHON","photoUrl":"git","newReleased":false,"topics":[{"topic":{"id":"5e673156fa82385b57317531","slug":"git","title":"Git","summary":"개발자라면 프로젝트의 버전을 관리하고, 다른 개발자와 협업하기 위해 Git을 사용할 줄 알아야 합니다. 이번 토픽에서 Git을 사용하는 법을 익혀봅시다."}}]},{"id":"5f991641d15fc22b226c4622","code":"903","title":"비개발자를 위한 SQL 데이터베이스","difficulty":1,"slug":"sql-database-for-data-analytics","summary":"비개발자는 조회 기능만으로도 실무에 충분합니다. 다수 기업에서 사용하는 SQL 역량을 쌓아보세요!","language":"PYTHON","photoUrl":"sql","newReleased":false,"topics":[{"topic":{"id":"5e67409cfa82385b5769cbb5","slug":"data-analysis-using-sql","title":"SQL로 하는 데이터 분석","summary":"데이터베이스에 저장된 데이터를 분석하려면 SQL을 사용할 줄 알아야 합니다. 이번 토픽에서 SQL로 데이터를 분석하는 방법을 제대로 배워봅시다.  "}}]},{"id":"5e6740cb4b0b59235a49dfbf","code":"904","title":"개발자를 위한 SQL 데이터베이스","difficulty":2,"slug":"sql-database-for-developers","summary":"다수 기업에서 사용하는 SQL을 통해 데이터와 데이터베이스에 필요한 역량을 쌓아보세요!","language":"PYTHON","photoUrl":"sql","newReleased":false,"topics":[{"topic":{"id":"5e67409cfa82385b5769cbb5","slug":"data-analysis-using-sql","title":"SQL로 하는 데이터 분석","summary":"데이터베이스에 저장된 데이터를 분석하려면 SQL을 사용할 줄 알아야 합니다. 이번 토픽에서 SQL로 데이터를 분석하는 방법을 제대로 배워봅시다.  "}},{"topic":{"id":"5e6740ac4b0b59235a49bf7f","slug":"data-management-using-sql","title":"SQL로 하는 데이터 관리","summary":"개발자라면 데이터를 데이터베이스에 새로 삽입하거나 기존 데이터를 갱신/삭제할 수 있어야 합니다. SQL로 이 작업들을 하는 방법을 배워봅시다."}},{"topic":{"id":"5f1175247e77811acda9d247","slug":"database-modeling-and-normalization","title":"데이터베이스 모델링","summary":"끊임없이 변하는 환경에서 데이터베이스 내부의 구조를 손쉽게 수정하기 위해서는 첫 설계 시점부터 다양한 요소를 고려해야합니다. 이때 고려해야할 요소들을 배워봅시다."}},{"topic":{"id":"6034d0b5bc1c9d4cea666ec9","slug":"data-modeling-in-practice","title":"데이터베이스 모델링 실전","summary":"모델링 이론은 다 알겠는데, 막상 직접 하려고 하니 막막하신가요? 모델링 실전 토픽에서 다양한 경우들을 경험해보세요!"}}]},{"id":"5f9924b6d15fc22b229d7c7e","code":"915","title":"컴퓨터 아키텍처","difficulty":1,"slug":"computer-architecture","summary":"컴퓨터의 동작 원리에 대해 자세히 알고 싶으신가요? 컴퓨터 프로그램이 실행되는 과정을 직접 살펴보세요!","language":"PYTHON","photoUrl":"computer-architecture","newReleased":false,"topics":[{"topic":{"id":"5f9924e2d15fc22b229e0828","slug":"understanding-computer-architecture","title":"컴퓨터 구조 이해하기","summary":"모든 개발자들에게 도움이 되는 컴퓨터 지식! 베일에 싸여 있던 컴퓨터의 내부를 들여다보세요."}}]}],"questions":[{"id":"616825","title":"특정 인덱스에 있는 컴포넌트만 바꾸기","content":"제가 커뮤니티 사이트를 개발하는 중인데 일부 글만 다르게 컴포넌트를 렌더링해주고 싶습니다 (예를들면 짝수 번째만 다른 걸 보여준다던지 한다는 거요) 어떻게 하나요?","answers":[{"createdAt":"2021-10-14T16:34:20.477Z","updatedAt":"2021-10-14T16:34:20.477Z","content":"뒤에서 배우실 건데요.. map 함수 콜백에서 리턴할 때 조건문으로 다르게 리턴하시면 됩니당. 저도 그런 식으로 했었어여","writer":{"name":"잭 도시","profile":{"photo":"https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Jack_Dorsey_2014_%28cropped%29.jpg/440px-Jack_Dorsey_2014_%28cropped%29.jpg"},"level":"UNIVERSE"},"id":"CuN8x9cWKR"}],"createdAt":"2021-10-14T12:42:25.27Z","updatedAt":"2021-10-14T16:34:20.478Z","writer":{"name":"아론 슈워츠","profile":{"photo":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Aaron_Swartz_profile.jpg/440px-Aaron_Swartz_profile.jpg"},"level":"EARTH"}},{"id":"616933d8715928349b3a11b7","title":"정말 기초적인 자바 질문인데.. 이해하는데 어려움이 있어 질문 드리겠습니다","content":"직각 이등변 삼각형을 출력하기 위해서는, 반복문 내에 반복문을 써야 한다는데 정확히 어떤 것을 의미하는 건가요?","answers":[{"createdAt":"2021-10-15T08:26:45.875Z","updatedAt":"2021-10-15T08:26:45.875Z","content":"반복을 하는 도중에 반복을 한다고 생각합니다. 예를 들자면 전단지에서 목차가 없는데 중국집을 찾고 싶으면 책장을 넘기는것과 가게가 중국집인지 확인하는것을 반복하잖아요? 그런데 반복문안에 반복문을 넣는다는건 책장을 넘기고 가게가 중국집인지 확인하고 다음장을 넘기고 중국집인지 확인하는겁니다. 반복문안에 반복문을 안넣으면 책장을 넘기고 넘기고 또 넘기고 다 넘기고 난 후에 가게가 중국집인지 확인하고 확인하고 또 확인하는 것 입니다. 저도 정확히 초보라 다른 분들의 설명이있었으면 좋겠네요.","writer":{"name":"신속배달","profile":{"photo":"/imgs/default_1.jpg"},"level":"STONE"},"id":"aE6CnXYTzj"}],"like":null,"likeCount":0,"totalLikeCount":0,"createdAt":"2021-10-15T07:55:04.808Z","updatedAt":"2021-10-15T08:26:45.88Z","writer":{"name":"자바칩 프라푸치노","profile":{"photo":"/imgs/default_2.jpg"},"level":"STONE"}},{"id":"61690a","title":"리액트 질문입니다","content":"Context라는 걸 쓰는 이유가 뭔가요?","answers":[],"createdAt":"2021-10-15T04:57:48.152Z","updatedAt":"2021-10-15T04:57:48.467Z","writer":{"name":"세르게이","profile":{"photo":"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Sergey_Brin_cropped.jpg/440px-Sergey_Brin_cropped.jpg"},"level":"STONE"}},{"id":"616903","title":"오류는 안나지만 원하는 대로 렌더링되지 않아요. 무엇이 잘못 되었을까요?","status":"PUBLISHED","content":"items.map((item) => ListItem) 이런식으로 렌더링하면 안 되나요? 넘 어렵네여;;","answers":[],"createdAt":"2021-10-15T04:28:53.677Z","updatedAt":"2021-10-15T05:54:27.711Z","writer":{"name":"폴 그레이엄","profile":{"photo":"https://upload.wikimedia.org/wikipedia/commons/e/e3/Paulgraham_240x320.jpg"},"level":"NEW"}},{"id":"6168fd","title":"리액트 설치가 되지 않습니다.","content":"노드 설치 파일은 다운로드했는데 실행하니까 멈춰서 진행되지 않는데 ... 혹시 최소사양 같은게 있나요?","answers":[{"createdAt":"2021-10-15T04:11:04.43Z","updatedAt":"2021-10-15T04:11:04.43Z","content":"혹시 현재 사용 중인 윈도우즈에 맞는 버전으로 까셨나요?","writer":{"name":"Ryan Dahl","profile":{"photo":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Ryan_Dahl.jpg/1024px-Ryan_Dahl.jpg"},"level":"UNIVERSE"},"id":"Jr2Z0jnnQm"}],"createdAt":"2021-10-15T04:03:36.549Z","updatedAt":"2021-10-15T04:11:04.432Z","writer":{"name":"조던 워크","profile":{"photo":"/imgs/default_2.jpg"},"level":"NEW"}},{"id":"6168df","title":"제가 이해한 게 맞는 건가요???","content":"그니까 f`(x,y) = 2x + 4y인 거고,예를 들어 (x,y) = (1,3)인 지점에서의 기울기는y를 3에 고정시킨 경우 f`(x, 3)이며 x의 기울기는 2x를 1에 고정시킨 경우 f`(1, y)이며 y의 기울기는 12따라서 한 좌표점에 대해 기울기는 x에 대한 기울기, y에 대한 기울기 이렇게 2개가 나온다이게 맞을까요?","answers":[],"createdAt":"2021-10-15T01:56:19.018Z","updatedAt":"2021-10-15T08:28:42.989Z","writer":{"name":"앨런 튜링","profile":{"photo":"/imgs/default_1.jpg"},"level":"SUN"}},{"id":"6168c5","title":"마지막 조건에서 elif 말고 else","content":"문제에서 마지막에 else: print(\"F\")말고, 저는 elif total 60: print(\"F\")로 했는데 오류가 뜨네요. 왜 그런 건가요? 마지막 조건문까지 온거면 전부 60점 미만이라는 건데, 그러면 elif total 60:에 해당하는 모든 경우에 대해 True 여서 상관 없지 않나요?","answers":[{"createdAt":"2021-10-15T04:12:21.523Z","updatedAt":"2021-10-15T04:12:21.523Z","content":"elif total 60 만 봐서는 틀린게 없는 거 같아요. 전체 코드를 답변으로 올려주시면 확인 해볼게요!","writer":{"name":"파이소닉","profile":{"photo":"/imgs/default_1.jpg"},"level":"UNIVERSE"},"id":"1aOaXCLtar"}],"createdAt":"2021-10-15T00:04:21.247Z","updatedAt":"2021-10-15T04:12:21.525Z","writer":{"name":"파이썬 초보","profile":{"photo":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Guido_van_Rossum_OSCON_2006_cropped.png/300px-Guido_van_Rossum_OSCON_2006_cropped.png"},"level":"NEW"}},{"id":"616878","title":"스테이트 초기화하는 방법","content":"초기값으로 스테이트 값을 바꾸려면 어떻게 해야하나요??","answers":[{"createdAt":"2021-10-15T04:15:29.513Z","updatedAt":"2021-10-15T04:15:29.513Z","content":"세터 함수를 사용하셔서 원하는 값으로 스테이트를 바꿀 수 있는데요, 초기값으로 세터 함수를 실행하면 됩니당.","writer":{"name":"호랑이","profile":{"photo":"/imgs/default_2.jpg"},"level":"UNIVERSE"},"id":"JQk6tz8JdJ"}],"createdAt":"2021-10-14T18:34:02.059Z","updatedAt":"2021-10-15T06:26:50.477Z","writer":{"name":"리액트 초보","profile":{"photo":"/imgs/default_3.jpg"},"level":"STONE"}},{"id":"616861","title":"터미널 오류","content":"ENOENT: no such file or directory 라는 오류가 나요","answers":[{"createdAt":"2021-10-15T04:32:30.64Z","updatedAt":"2021-10-15T04:32:30.64Z","content":"혹시 올바른 폴더에서 npm start를 하신 건지 확인해보세요!!","writer":{"name":"Ryan Dahl","profile":{"photo":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Ryan_Dahl.jpg/1024px-Ryan_Dahl.jpg"},"level":"UNIVERSE"},"id":"LX5e5LuMms"}],"createdAt":"2021-10-14T16:55:46.394Z","updatedAt":"2021-10-15T06:47:48.12Z","writer":{"name":"Soy Fried Chicken","profile":{"photo":"/imgs/default_3.jpg"},"level":"SUN"}},{"id":"61682a","title":"어디가 잘못 된걸까요?","content":"useContext() 를 실행해도 컨텍스트 값이 안 나와요","answers":[{"createdAt":"2021-10-14T13:29:56.575Z","updatedAt":"2021-10-14T13:29:56.575Z","content":"아규먼트로 만드신 컨텍스트를 넣어보세요! 아마 컨텍스트를 지정해주지 않아서 그런 것 같습니다.","writer":{"name":"호랑이","profile":{"photo":"/imgs/default_1.jpg"},"level":"UNIVERSE"},"id":"1eEedACi4K"}],"createdAt":"2021-10-14T13:05:02.287Z","updatedAt":"2021-10-15T04:00:29.582Z","writer":{"name":"로드스터","profile":{"photo":"/imgs/default_1.jpg"},"level":"ROCK"}}]}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.font.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.font.css"
new file mode 100644
index 00000000..751cc02d
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.font.css"	
@@ -0,0 +1,48 @@
+/** Noto Sans(Google Fonts) */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');
+
+/* GmarketSans(https://noonnu.cc/font_page/366) */
+@font-face {
+  font-family: 'Gmarket Sans';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff')
+    format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gmarket Sans';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff')
+    format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Gmarket Sans';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff')
+    format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+:root {
+  --gmarket-sans: 'Gmarket Sans';
+  --noto-sans: -apple-system, 'Noto Sans KR', sans-serif;
+}
+
+html {
+  font-family: var(--noto-sans);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+a,
+h1,
+h2,
+h3,
+h4,
+button {
+  font-family: var(--gmarket-sans);
+  font-weight: 500;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.js"
new file mode 100644
index 00000000..5f7199be
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.js"	
@@ -0,0 +1,19 @@
+import { Outlet } from "react-router-dom";
+import Nav from "../components/Nav";
+import Footer from "../components/Footer";
+import styles from "./App.module.css";
+import "./App.font.css";
+
+function App() {
+  return (
+    <>
+      <Nav className={styles.nav} />
+      <div className={styles.body}>
+        <Outlet />
+      </div>
+      <Footer className={styles.footer} />
+    </>
+  );
+}
+
+export default App;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.module.css"
new file mode 100644
index 00000000..667aac86
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/App.module.css"	
@@ -0,0 +1,43 @@
+@import-normalize; /* bring in normalize.css styles */
+
+* {
+  box-sizing: border-box;
+  word-break: keep-all;
+}
+
+html {
+  overflow-y: scroll;
+  background-color: #f9f9f9;
+}
+
+body {
+  margin: 0;
+}
+
+a,
+a:hover,
+a:active,
+a:visited {
+  color: #494949;
+  text-decoration: none;
+}
+
+:root {
+  --box-shadow: 5px 5px 10px 0 rgb(0 0 0 / 5%);
+}
+
+:global(#root) {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.nav,
+.footer {
+  flex: none;
+}
+
+.body {
+  position: relative;
+  flex-grow: 1;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Avatar.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Avatar.js"
new file mode 100644
index 00000000..0b8fe6e1
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Avatar.js"	
@@ -0,0 +1,7 @@
+import styles from './Avatar.module.css';
+
+function Avatar({ photo, name }) {
+  return <img className={styles.avatar} src={photo} alt={name} title={name} />;
+}
+
+export default Avatar;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Avatar.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Avatar.module.css"
new file mode 100644
index 00000000..4ce17de1
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Avatar.module.css"	
@@ -0,0 +1,6 @@
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Button.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Button.js"
new file mode 100644
index 00000000..0771a499
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Button.js"	
@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import styles from './Button.module.css';
+
+function Button({ variant, className, as, ...restProps }) {
+  if (as === 'div') {
+    return (
+      <div
+        {...restProps}
+        className={classNames(
+          styles.button,
+          variant && styles[variant],
+          className,
+        )}
+      />
+    );
+  }
+
+  return (
+    <button
+      {...restProps}
+      className={classNames(
+        styles.button,
+        variant && styles[variant],
+        className,
+      )}
+    />
+  );
+}
+
+export default Button;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Button.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Button.module.css"
new file mode 100644
index 00000000..5615b2e6
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Button.module.css"	
@@ -0,0 +1,24 @@
+.button {
+  padding: 13px 41px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+  background-color: #494949;
+  border: none;
+  border-radius: 5px;
+  outline: none;
+}
+
+div.button {
+  display: inline-block;
+}
+
+.button.round {
+  padding: 9px 22px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #fff;
+  background-color: #494949;
+  border-radius: 9999px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Card.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Card.js"
new file mode 100644
index 00000000..6518f188
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Card.js"	
@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import styles from './Card.module.css';
+
+function Card({ className, children }) {
+  return <div className={classNames(styles.card, className)}>{children}</div>;
+}
+
+export default Card;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Card.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Card.module.css"
new file mode 100644
index 00000000..568f6877
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Card.module.css"	
@@ -0,0 +1,6 @@
+.card {
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: var(--box-shadow);
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Container.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Container.js"
new file mode 100644
index 00000000..97f77ecd
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Container.js"	
@@ -0,0 +1,10 @@
+import classNames from 'classnames';
+import styles from './Container.module.css';
+
+function Container({ className, children }) {
+  return (
+    <div className={classNames(styles.container, className)}>{children}</div>
+  );
+}
+
+export default Container;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Container.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Container.module.css"
new file mode 100644
index 00000000..b86324f9
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Container.module.css"	
@@ -0,0 +1,11 @@
+.container {
+  width: 100%;
+  max-width: 840px;
+  margin: 0 auto;
+}
+
+@media (max-width: 840px) {
+  .container {
+    padding: 0 calc(14px * 5);
+  }
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseIcon.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseIcon.js"
new file mode 100644
index 00000000..483076f9
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseIcon.js"	
@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import algorithm from '../assets/icon--algorithm.svg';
+import automation from '../assets/icon--automation.svg';
+import computerArchitecture from '../assets/icon--computer-architecture.svg';
+import dataScience from '../assets/icon--data-science.svg';
+import deepLearning from '../assets/icon--deep-learning.svg';
+import defaultIcon from '../assets/icon--default.svg';
+import django from '../assets/icon--django.svg';
+import ds from '../assets/icon--ds.svg';
+import fourthRevolution from '../assets/icon--fourth-revolution.svg';
+import git from '../assets/icon--git.svg';
+import introToComputer from '../assets/icon--intro-to-computer.svg';
+import java from '../assets/icon--java.svg';
+import jquery from '../assets/icon--jquery.svg';
+import js from '../assets/icon--js.svg';
+import machineLearning from '../assets/icon--machine-learning.svg';
+import nodeJs from '../assets/icon--node-js.svg';
+import oop from '../assets/icon--oop.svg';
+import python from '../assets/icon--python.svg';
+import react from '../assets/icon--react.svg';
+import sql from '../assets/icon--sql.svg';
+import unix from '../assets/icon--unix.svg';
+import webPublishing from '../assets/icon--web-publishing.svg';
+
+import styles from './CourseIcon.module.css'
+
+const ICONS = {
+  algorithm: algorithm,
+  automation: automation,
+  'computer-architecture': computerArchitecture,
+  'data-science': dataScience,
+  'deep-learning': deepLearning,
+  default: defaultIcon,
+  django: django,
+  ds: ds,
+  'fourth-revolution': fourthRevolution,
+  git: git,
+  'intro-to-computer': introToComputer,
+  java: java,
+  jquery: jquery,
+  js: js,
+  'machine-learning': machineLearning,
+  'node-js': nodeJs,
+  oop: oop,
+  python: python,
+  react: react,
+  sql: sql,
+  unix: unix,
+  'web-publishing': webPublishing,
+};
+
+function CourseIcon({ className, photoUrl = 'default' }) {
+  return <img className={classNames(styles.courseIcon, className)} src={ICONS[photoUrl]} alt={photoUrl} />;
+}
+
+export default CourseIcon;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseIcon.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseIcon.module.css"
new file mode 100644
index 00000000..371545c5
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseIcon.module.css"	
@@ -0,0 +1,4 @@
+.courseIcon {
+  width: 60px;
+  height: 60px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseItem.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseItem.js"
new file mode 100644
index 00000000..de6143c0
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseItem.js"	
@@ -0,0 +1,36 @@
+import { Link } from "react-router-dom";
+import Card from "./Card";
+import CourseIcon from "./CourseIcon";
+import Tags from "./Tags";
+import getCourseColor from "../utils/getCourseColor";
+import styles from "./CourseItem.module.css";
+
+const DIFFICULTY = ["입문", "초급", "중급", "고급"];
+
+function CourseItem({ course }) {
+  const showSummary = course.summary && course.title !== course.summary;
+  const courseColor = getCourseColor(course.code);
+  const difficulty = DIFFICULTY[course.difficulty || 0];
+  const thumbStyle = {
+    borderColor: courseColor,
+  };
+
+  return (
+    <Card className={styles.courseItem}>
+      <div className={styles.thumb} style={thumbStyle}>
+        <CourseIcon photoUrl={course.photoUrl} />
+      </div>
+      <div className={styles.content}>
+        <h2 className={styles.title}>
+          <Link to={`/courses/${course.slug}`}>{course.title}</Link>
+        </h2>
+        <p className={styles.description}>{showSummary && course.summary}</p>
+        <div>
+          <Tags values={[course.language, difficulty]} />
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export default CourseItem;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseItem.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseItem.module.css"
new file mode 100644
index 00000000..2c053012
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/CourseItem.module.css"	
@@ -0,0 +1,36 @@
+.courseItem .thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30px 0;
+  border-top: 10px solid black;
+}
+
+.courseItem .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 134px;
+  padding: 20px 20px 30px;
+  background-color: #f9f9f9;
+  border-top: solid 1px #ebebeb;
+}
+
+.courseItem .title {
+  margin: 0 0 10px;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.courseItem .description {
+  display: -webkit-box;
+  margin: 0 0 10px;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 300;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/DateText.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/DateText.js"
new file mode 100644
index 00000000..1e2f362d
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/DateText.js"	
@@ -0,0 +1,8 @@
+import { memo } from 'react'
+
+function DateText({ value }) {
+  if (!value) return;
+  return new Date(value).toLocaleDateString('ko-KR');
+}
+
+export default memo(DateText);
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Footer.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Footer.js"
new file mode 100644
index 00000000..a1a46540
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Footer.js"	
@@ -0,0 +1,40 @@
+import logo from '../assets/grayLogo.svg';
+import facebookIcon from '../assets/facebook.svg';
+import twitterIcon from '../assets/twitter.svg';
+import instagramIcon from '../assets/instagram.svg';
+import styles from './Footer.module.css';
+import Container from './Container';
+
+function Footer() {
+  return (
+    <div className={styles.footer}>
+      <Container>
+        <ul className={styles.links}>
+          <li>코드댓 소개</li>
+          <li>개인정보 취급방침</li>
+          <li>사용자 이용약관</li>
+          <li>자주 묻는 질문</li>
+        </ul>
+        <ul className={styles.info}>
+          <li>(주)코드댓</li>
+          <li>대표 | 강영훈 </li>
+          <li>개인정보보호책임자 | 강영훈 </li>
+          <li>대표 번호 | 02-****-**** </li>
+          <li>사업자번호 | ***-**-****</li>
+          <li>통신판매업 | 제****-서울**-****호 </li>
+          <li>주소 | 서울특별시 중구 청계천로 100 코드댓 </li>
+        </ul>
+        <div className={styles.icons}>
+          <img src={logo} alt="codethat" />
+          <div className={styles.sns}>
+            <img src={facebookIcon} alt="facebook icon" />
+            <img src={twitterIcon} alt="twitter icon" />
+            <img src={instagramIcon} alt="instagram icon" />
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default Footer;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Footer.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Footer.module.css"
new file mode 100644
index 00000000..f39b6989
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Footer.module.css"	
@@ -0,0 +1,44 @@
+.footer {
+  padding: 20px 0 53px;
+  color: #878787;
+  background-color: #494949;
+}
+
+.links {
+  padding: 0;
+  color: #c4c4c4;
+  list-style: none;
+}
+
+.links > * {
+  display: inline-block;
+  line-height: 1.64;
+}
+
+.links > :not(:last-child) {
+  margin-right: 30px;
+}
+
+.info {
+  padding: 0;
+  margin-bottom: 36px;
+  list-style: none;
+}
+
+.info > * {
+  display: inline-block;
+  line-height: 1.64;
+}
+
+.info > :not(:last-child) {
+  margin-right: 30px;
+}
+
+.icons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.sns :not(:last-child) {
+  margin-right: 13px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Lined.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Lined.js"
new file mode 100644
index 00000000..a8745be2
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Lined.js"	
@@ -0,0 +1,7 @@
+import styles from './Lined.module.css';
+
+function Lined({ children }) {
+  return <span className={styles.lined}>{children}</span>;
+}
+
+export default Lined;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Lined.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Lined.module.css"
new file mode 100644
index 00000000..a8ceab7d
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Lined.module.css"	
@@ -0,0 +1,6 @@
+.lined {
+  padding-bottom: 4px;
+
+  /* thick underline */
+  box-shadow: inset 0 -14px #ebebeb;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/ListPage.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/ListPage.js"
new file mode 100644
index 00000000..b127f922
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/ListPage.js"	
@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import Container from './Container';
+import styles from './ListPage.module.css';
+import catalog from '../assets/catalog.svg';
+import community from '../assets/community.svg';
+
+const ICON = {
+  catalog: {
+    src: catalog,
+    alt: '책',
+  },
+  community: {
+    src: community,
+    alt: '말풍선',
+  },
+};
+
+function ListPage({
+  variant = 'catalog',
+  title = '',
+  description = '',
+  children,
+}) {
+  const icon = ICON[variant] || ICON.catalog;
+  return (
+    <>
+      <div className={classNames(styles.bg, styles[variant])}>
+        <img className={styles.icon} src={icon.src} alt={icon.alt} />
+        <div className={styles.texts}>
+          <h1 className={styles.heading}>{title}</h1>
+          <p className={styles.description}>{description}</p>
+        </div>
+      </div>
+      <Container className={styles.container}>{children}</Container>
+    </>
+  );
+}
+
+export default ListPage;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/ListPage.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/ListPage.module.css"
new file mode 100644
index 00000000..d176a74c
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/ListPage.module.css"	
@@ -0,0 +1,49 @@
+.bg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 38px 0 58px;
+}
+
+.bg.catalog {
+  background-color: #ebebeb;
+}
+
+.bg.community {
+  background-color: #73bfad;
+}
+
+.icon {
+  height: 44px;
+  margin-right: 30px;
+}
+
+.heading {
+  margin: 0 0 5px;
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.description {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.catalog .heading {
+  color: #545454;
+}
+
+.catalog .description {
+  color: #878787;
+}
+
+.community .heading,
+.community .description {
+  color: #fff;
+}
+
+.container {
+  margin-top: -20px;
+  margin-bottom: 100px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Nav.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Nav.js"
new file mode 100644
index 00000000..d8379750
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Nav.js"	
@@ -0,0 +1,40 @@
+import { Link, NavLink } from "react-router-dom";
+import Container from "./Container";
+import UserMenu from "./UserMenu";
+import logoImg from "../assets/logo.svg";
+import styles from "./Nav.module.css";
+
+function getLinkStyle({ isActive }) {
+  return {
+    textDecoration: isActive ? "underline" : "",
+  };
+}
+
+function Nav() {
+  return (
+    <div className={styles.nav}>
+      <Container className={styles.container}>
+        <Link to="/'">
+          <img src={logoImg} alt="Codethat Logo" />
+        </Link>
+        <ul className={styles.menu}>
+          <li>
+            <NavLink style={getLinkStyle} to="/courses">
+              카탈로그
+            </NavLink>
+          </li>
+          <li>
+            <NavLink style={getLinkStyle} to="/questions">
+              커뮤니티
+            </NavLink>
+          </li>
+          <li>
+            <UserMenu />
+          </li>
+        </ul>
+      </Container>
+    </div>
+  );
+}
+
+export default Nav;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Nav.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Nav.module.css"
new file mode 100644
index 00000000..921b5fce
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Nav.module.css"	
@@ -0,0 +1,30 @@
+.nav {
+  position: relative;
+  z-index: 1;
+  padding: 15px 0;
+  background-color: #fff;
+  box-shadow: var(--box-shadow);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+ul.menu {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+ul.menu > li:not(:last-child) {
+  margin-right: 30px;
+}
+
+ul.menu a:hover,
+ul.menu a:active {
+  text-decoration: underline;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/SearchBar.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/SearchBar.module.css"
new file mode 100644
index 00000000..e3543f94
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/SearchBar.module.css"	
@@ -0,0 +1,35 @@
+.form {
+  display: flex;
+  height: 40px;
+  box-shadow: var(--box-shadow);
+}
+
+.form input {
+  flex: 1 1;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  border-radius: 5px 0 0 5px;
+  outline: none;
+}
+
+.form input::placeholder {
+  color: #878787;
+}
+
+.form button[type="submit"] {
+  flex: none;
+  padding: 8px 10px;
+  color: #fff;
+  cursor: pointer;
+  background-color: #545454;
+  border: none;
+  border-radius: 0 5px 5px 0;
+  outline: none;
+}
+
+.form button[type="submit"] img {
+  width: 24px;
+  height: 24px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Tags.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Tags.js"
new file mode 100644
index 00000000..246f4649
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Tags.js"	
@@ -0,0 +1,13 @@
+import styles from './Tags.module.css';
+
+function Tags({ values = [] }) {
+  return (
+    <ul className={styles.tags}>
+      {values.map((value) => (
+        <li key={value}>{value}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default Tags;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Tags.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Tags.module.css"
new file mode 100644
index 00000000..54c55824
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Tags.module.css"	
@@ -0,0 +1,19 @@
+ul.tags {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+ul.tags > li {
+  display: inline-block;
+  padding: 2px 6px 3px;
+  font-size: 12px;
+  color: #878787;
+  background-color: #ebebeb;
+  border-radius: 5px;
+  opacity: .8;
+}
+
+ul.tags > li:not(:last-child) {
+  margin-right: 10px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/UserMenu.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/UserMenu.js"
new file mode 100644
index 00000000..aed81d8c
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/UserMenu.js"	
@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from 'react';
+import personIcon from '../assets/person.png';
+import styles from './UserMenu.module.css';
+
+function UserMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleButtonClick = useCallback((e) => {
+    e.stopPropagation();
+    setIsOpen((nextIsOpen) => !nextIsOpen);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = () => setIsOpen(false);
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <div className={styles.userMenu}>
+      <button className={styles.iconButton} onClick={handleButtonClick}>
+        <img src={personIcon} alt="유저 메뉴" />
+      </button>
+      {isOpen && (
+        <ul className={styles.popup}>
+          <li>위시리스트</li>
+          <li className={styles.disabled}>회원가입</li>
+          <li className={styles.disabled}>로그인</li>
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default UserMenu;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/UserMenu.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/UserMenu.module.css"
new file mode 100644
index 00000000..e6c05308
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/UserMenu.module.css"	
@@ -0,0 +1,52 @@
+.userMenu {
+  position: relative;
+}
+
+.iconButton {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.userMenu,
+.iconButton,
+.iconButton img {
+  width: 30px;
+  height: 30px;
+}
+
+ul.popup {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  background-color: #fff;
+  position: absolute;
+  top: calc(100% + 25px);
+  right: -10px;
+  border: 1px solid #ebebeb;
+  box-shadow: var(--box-shadow);
+  border-radius: 5px 0 5px 5px;
+  overflow: hidden;
+}
+
+ul.popup li {
+  padding: 15px 19px;
+  font-family: var(--noto-sans);
+}
+
+ul.popup li:hover {
+  background-color: #f4f4f4;
+  cursor: pointer;
+}
+
+ul.popup li.disabled {
+  background-color: #fff;
+  color: #c4c4c4;
+  user-select: none;
+  cursor: default;
+}
+
+.userMenu ul.popup a:hover {
+  text-decoration: none;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Warn.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Warn.js"
new file mode 100644
index 00000000..34a14d52
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Warn.js"	
@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import warnIcon from '../assets/warn.svg';
+import styles from './Warn.module.css';
+
+function Warn({ className, variant = '', title = '', description = '' }) {
+  return (
+    <div className={classNames(styles.warn, styles[variant], className)}>
+      <img className={styles.icon} src={warnIcon} alt="경고" />
+      <h2 className={styles.title}>{title}</h2>
+      <p className={styles.description}>{description}</p>
+    </div>
+  );
+}
+
+export default Warn;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Warn.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Warn.module.css"
new file mode 100644
index 00000000..ed6f892d
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Warn.module.css"	
@@ -0,0 +1,30 @@
+.warn {
+  text-align: center;
+}
+
+.icon {
+  display: block;
+  margin: 0 auto;
+}
+
+.title {
+  margin: 20px auto 3px;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.big .title {
+  font-size: 24px;
+}
+
+.description {
+  margin: 0;
+  font-weight: 500;
+  line-height: 2.07;
+  color: #878787;
+}
+
+.big .description {
+  font-size: 18px;
+  line-height: 1.61;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Writer.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Writer.js"
new file mode 100644
index 00000000..4bf23ba1
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/components/Writer.js"	
@@ -0,0 +1,12 @@
+import Avatar from './Avatar';
+
+function Writer({ value }) {
+  return (
+    <div>
+      <Avatar src={value.profile.photo} />
+      <p>{value.name}</p>
+    </div>
+  );
+}
+
+export default Writer;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/index.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/index.js"
new file mode 100644
index 00000000..ae3dcad1
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/index.js"	
@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom';
+import Main from './Main';
+
+ReactDOM.render(<Main />, document.getElementById('root'));
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CourseListPage.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CourseListPage.js"
new file mode 100644
index 00000000..4fdea5bf
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CourseListPage.js"	
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import ListPage from "../components/ListPage";
+import Warn from "../components/Warn";
+import CourseItem from "../components/CourseItem";
+import { getCourses } from "../api";
+import styles from "./CourseListPage.module.css";
+import searchBarStyles from "../components/SearchBar.module.css";
+import searchIcon from "../assets/search.svg";
+import { useSearchParams } from "react-router-dom";
+
+function CourseListPage() {
+  const [searchParam, setSearchParam] = useSearchParams();
+  const initKeyword = searchParam.get("keyword");
+  const [keyword, setKeyword] = useState(initKeyword || "");
+  const courses = getCourses(initKeyword);
+
+  const handleKeywordChange = (e) => setKeyword(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setSearchParam(keyword ? { keyword } : {});
+  };
+
+  return (
+    <ListPage
+      variant="catalog"
+      title="모든 코스"
+      description="자체 제작된 코스들로 기초를 쌓으세요."
+    >
+      <form className={searchBarStyles.form} onSubmit={handleSubmit}>
+        <input
+          name="keyword"
+          value={keyword}
+          onChange={handleKeywordChange}
+          placeholder="검색으로 코스 찾기"
+        ></input>
+        <button type="submit">
+          <img src={searchIcon} alt="검색" />
+        </button>
+      </form>
+
+      <p className={styles.count}>총 {courses.length}개 코스</p>
+
+      {initKeyword && courses.length === 0 ? (
+        <Warn
+          className={styles.emptyList}
+          title="조건에 맞는 코스가 없어요."
+          description="올바른 검색어가 맞는지 다시 한 번 확인해 주세요."
+        />
+      ) : (
+        <div className={styles.courseList}>
+          {courses.map((course) => (
+            <CourseItem key={course.id} course={course} />
+          ))}
+        </div>
+      )}
+    </ListPage>
+  );
+}
+
+export default CourseListPage;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CourseListPage.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CourseListPage.module.css"
new file mode 100644
index 00000000..02dbea86
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CourseListPage.module.css"	
@@ -0,0 +1,23 @@
+.courseList {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 20px;
+}
+
+@media (max-width: 840px) {
+  .courseList {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.emptyList {
+  margin: 40px auto;
+}
+
+.count {
+  margin: 20px 0;
+  font-size: 14px;
+  font-weight: 300;
+  color: #878787;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CoursePage.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CoursePage.js"
new file mode 100644
index 00000000..bea4999f
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CoursePage.js"	
@@ -0,0 +1,53 @@
+import { addWishlist, getCourseBySlug } from "../api";
+import Button from "../components/Button";
+import Container from "../components/Container";
+import Card from "../components/Card";
+import CourseIcon from "../components/CourseIcon";
+import getCourseColor from "../utils/getCourseColor";
+import styles from "./CoursePage.module.css";
+import { Navigate, useParams, useNavigate } from "react-router-dom";
+
+function CoursePage() {
+  const { courseSlug } = useParams();
+  const navigate = useNavigate();
+  const course = getCourseBySlug(courseSlug);
+  const courseColor = getCourseColor(course?.code);
+
+  if (!course) {
+    return <Navigate to="/courses" />;
+  }
+
+  const headerStyle = {
+    borderTopColor: courseColor,
+  };
+
+  const handleAddWishlistClick = () => {
+    addWishlist(course?.slug);
+    navigate("/wishlist");
+  };
+
+  return (
+    <>
+      <div className={styles.header} style={headerStyle}>
+        <Container className={styles.content}>
+          <CourseIcon photoUrl={course.photoUrl} />
+          <h1 className={styles.title}>{course.title}</h1>
+          <Button variant="round" onClick={handleAddWishlistClick}>
+            + 코스 담기
+          </Button>
+          <p className={styles.summary}>{course.summary}</p>
+        </Container>
+      </div>
+      <Container className={styles.topics}>
+        {course.topics.map(({ topic }) => (
+          <Card className={styles.topic} key={topic.slug}>
+            <h3 className={styles.title}>{topic.title}</h3>
+            <p className={styles.summary}>{topic.summary}</p>
+          </Card>
+        ))}
+      </Container>
+    </>
+  );
+}
+
+export default CoursePage;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CoursePage.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CoursePage.module.css"
new file mode 100644
index 00000000..b3cdcc50
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/CoursePage.module.css"	
@@ -0,0 +1,53 @@
+.header {
+  background-color: #fff;
+  border-top: 10px solid #000;
+}
+
+.header .content {
+  padding: 65px 10px 20px;
+  text-align: center;
+}
+
+.header .title {
+  margin: 10px auto 20px;
+  font-size: 22px;
+  font-weight: bold;
+  color: #545454;
+  text-align: center;
+}
+
+.header .summary {
+  padding: 11px 68px;
+  margin: 20px 0 0;
+  font-size: 12px;
+  color: #878787;
+  background-color: #f9f9f9;
+  border: solid 2px #f4f4f4;
+  border-radius: 5px;
+}
+
+.topics {
+  margin: 30px auto 100px;
+}
+
+.topic {
+  padding: 28px 50px;
+}
+
+.topic:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.topic .title {
+  margin: 0 auto 10px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #545454;
+}
+
+.topic .summary {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: #878787;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/HomePage.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/HomePage.js"
new file mode 100644
index 00000000..9b96e428
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/HomePage.js"	
@@ -0,0 +1,36 @@
+import Button from '../components/Button';
+import Container from '../components/Container';
+import Lined from '../components/Lined';
+import styles from './HomePage.module.css';
+import landingImg from '../assets/landing.svg';
+
+function HomePage() {
+  return (
+    <>
+      <div className={styles.bg} />
+      <Container className={styles.container}>
+        <div className={styles.texts}>
+          <h1 className={styles.heading}>
+            <Lined>코딩이 처음이라면,</Lined>
+            <br />
+            <strong>코드댓</strong>
+          </h1>
+          <p className={styles.description}>
+            11만 명이 넘는 비전공자, 코딩 입문자가 코드댓 무제한 멤버십을
+            선택했어요.
+            <br />
+            지금 함께 시작해보실래요?
+          </p>
+          <div>
+            <Button>지금 시작하기</Button>
+          </div>
+        </div>
+        <div className={styles.figure}>
+          <img src={landingImg} alt="그래프, 모니터, 윈도우, 자물쇠, 키보드" />
+        </div>
+      </Container>
+    </>
+  );
+}
+
+export default HomePage;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/HomePage.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/HomePage.module.css"
new file mode 100644
index 00000000..f4ff6791
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/HomePage.module.css"	
@@ -0,0 +1,70 @@
+.bg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  background:
+    linear-gradient(
+      135deg,
+      #f9f9f9 48%,
+      #ebebeb 48%,
+      #ebebeb 78%,
+      #f9f9f9 78%
+    );
+}
+
+.container {
+  display: flex;
+  margin: 120px auto 226px;
+}
+
+.texts {
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 100px;
+}
+
+.heading {
+  margin: 15px 0;
+  font-weight: 500;
+  line-height: 1.39;
+}
+
+.description {
+  margin: 15px 0 25px;
+  font-size: 18px;
+  line-height: 1.61;
+  color: #878787;
+  text-align: left;
+  letter-spacing: normal;
+}
+
+.figure {
+  flex: 1 1;
+  padding: 20px;
+  text-align: center;
+}
+
+.figure img {
+  width: 100%;
+  max-width: 418px;
+}
+
+@media (max-width: 840px) {
+  .container {
+    flex-direction: column-reverse;
+    margin: 60px auto 226px;
+  }
+
+  .text {
+    margin-right: 0;
+  }
+
+  .figure {
+    margin-bottom: 40px;
+  }
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/NotFoundPage.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/NotFoundPage.js"
new file mode 100644
index 00000000..33267a4d
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/NotFoundPage.js"	
@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+import Button from "../components/Button";
+import Container from "../components/Container";
+import Warn from "../components/Warn";
+import styles from "./NotFoundPage.module.css";
+
+function NotFoundPage() {
+  return (
+    <Container className={styles.container}>
+      <Warn
+        variant="big"
+        title="존재하지 않는 페이지에요."
+        description="올바른 주소가 맞는지 다시 한 번 확인해 주세요."
+      />
+      <div className={styles.link}>
+        <Link to="/">
+          <Button as="div">홈으로 가기</Button>
+        </Link>
+      </div>
+    </Container>
+  );
+}
+
+export default NotFoundPage;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/NotFoundPage.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/NotFoundPage.module.css"
new file mode 100644
index 00000000..9674541b
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/NotFoundPage.module.css"	
@@ -0,0 +1,8 @@
+.container {
+  margin: 80px auto;
+}
+
+.link {
+  margin: 30px auto;
+  text-align: center;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionListPage.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionListPage.js"
new file mode 100644
index 00000000..cf78b537
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionListPage.js"	
@@ -0,0 +1,88 @@
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import DateText from "../components/DateText";
+import ListPage from "../components/ListPage";
+import Warn from "../components/Warn";
+import Card from "../components/Card";
+import Avatar from "../components/Avatar";
+import styles from "./QuestionListPage.module.css";
+import searchBarStyles from "../components/SearchBar.module.css";
+import searchIcon from "../assets/search.svg";
+import { useSearchParams } from "react-router-dom";
+import { getQuestions } from "../api";
+
+function QuestionItem({ question }) {
+  return (
+    <Card className={styles.questionItem} key={question.title}>
+      <div className={styles.info}>
+        <p className={styles.title}>
+          <Link to={`/questions/${question.id}`}>{question.title}</Link>
+          {question.answers.length > 0 && (
+            <span className={styles.count}>[{question.answers.length}]</span>
+          )}
+        </p>
+        <p className={styles.date}>
+          <DateText value={question.createdAt} />
+        </p>
+      </div>
+      <div className={styles.writer}>
+        <Avatar
+          photo={question.writer.profile.photo}
+          name={question.writer.name}
+        />
+      </div>
+    </Card>
+  );
+}
+
+function QuestionListPage() {
+  const [searchParam, setSearchParam] = useSearchParams();
+  const initKeyword = searchParam.get("keyword");
+  const [keyword, setKeyword] = useState(initKeyword);
+  const questions = getQuestions(initKeyword || "");
+
+  const handleKeywordChange = (e) => setKeyword(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setSearchParam(keyword ? { keyword } : {});
+  };
+
+  return (
+    <ListPage
+      variant="community"
+      title="커뮤니티"
+      description="코드댓의 2만 수강생들과 함께 공부해봐요."
+    >
+      <form className={searchBarStyles.form} onSubmit={handleSubmit}>
+        <input
+          name="keyword"
+          value={keyword}
+          placeholder="검색으로 질문 찾기"
+          onChange={handleKeywordChange}
+        />
+        <button type="submit">
+          <img src={searchIcon} alt="검색" />
+        </button>
+      </form>
+
+      <p className={styles.count}>총 {questions.length}개 질문</p>
+
+      {initKeyword && questions.length === 0 ? (
+        <Warn
+          className={styles.emptyList}
+          title="조건에 맞는 질문이 없어요."
+          description="올바른 검색어가 맞는지 다시 한 번 확인해 주세요."
+        />
+      ) : (
+        <div className={styles.questionList}>
+          {questions.map((question) => (
+            <QuestionItem key={question.id} question={question} />
+          ))}
+        </div>
+      )}
+    </ListPage>
+  );
+}
+
+export default QuestionListPage;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionListPage.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionListPage.module.css"
new file mode 100644
index 00000000..74c07f55
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionListPage.module.css"	
@@ -0,0 +1,55 @@
+.questionList {
+  margin-top: 20px;
+}
+
+.count {
+  margin: 20px 0;
+  font-size: 14px;
+  font-weight: 300;
+  color: #878787;
+}
+
+.emptyList {
+  margin: 40px auto;
+}
+
+.questionItem {
+  display: flex;
+  align-items: center;
+  padding: 19px 30px 20px;
+}
+
+.questionItem:not(:last-child) {
+  margin-bottom: 11px;
+}
+
+.questionItem .info {
+  flex: 1 1;
+}
+
+.questionItem .title {
+  margin: 0 auto 10px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #494949;
+}
+
+.questionItem .title a {
+  font-family: var(--notosans);
+}
+
+.questionItem .title .count {
+  margin-left: 5px;
+  color: #fe92ab;
+}
+
+.questionItem .date {
+  margin: 0;
+  font-size: 12px;
+  color: #c4c4c4;
+}
+
+.questionItem .writer {
+  flex: none;
+  margin-left: 30px;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionPage.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionPage.js"
new file mode 100644
index 00000000..d6d7ab07
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionPage.js"	
@@ -0,0 +1,97 @@
+import classNames from "classnames";
+import { getQuestionById } from "../api";
+import Avatar from "../components/Avatar";
+import Card from "../components/Card";
+import Container from "../components/Container";
+import DateText from "../components/DateText";
+import Lined from "../components/Lined";
+import Warn from "../components/Warn";
+import styles from "./QuestionPage.module.css";
+import { Navigate, useParams } from "react-router-dom";
+
+function QuestionPage() {
+  const { questionsId } = useParams();
+  const question = getQuestionById(questionsId);
+
+  if (!question) {
+    return <Navigate to="/questions" />;
+  }
+
+  return (
+    <>
+      <div className={styles.header}>
+        <Container>
+          <div className={styles.question}>
+            <div className={styles.questionInfo}>
+              <div className={styles.content}>
+                <div className={styles.title}>
+                  {question.title}
+                  {question.answers > 0 && (
+                    <span className={styles.count}>
+                      {question.answers.length}
+                    </span>
+                  )}
+                </div>
+                <div className={styles.date}>
+                  <DateText value={question.createdAt} />
+                </div>
+              </div>
+              <Writer className={styles.author} writer={question.writer} />
+            </div>
+            <p
+              className={styles.content}
+              dangerouslySetInnerHTML={{ __html: question.content }}
+            />
+          </div>
+        </Container>
+      </div>
+      <Container className={styles.answers}>
+        <h2 className={styles.count}>
+          <Lined>{question.answers.length}개 답변</Lined>
+        </h2>
+        {question.answers.length > 0 ? (
+          question.answers.map((answer) => (
+            <Answer
+              key={answer.id}
+              className={styles.answerItem}
+              answer={answer}
+            />
+          ))
+        ) : (
+          <Warn
+            title="답변을 기다리고 있어요."
+            description="이 질문의 첫 번째 답변을 달아주시겠어요?"
+          />
+        )}
+      </Container>
+    </>
+  );
+}
+
+function Writer({ className, writer }) {
+  return (
+    <div className={classNames(className, styles.writer)}>
+      <div className={styles.info}>
+        <div className={styles.name}>{writer.name}</div>
+        <div className={styles.level}>{writer.level}</div>
+      </div>
+      <Avatar photo={writer.profile.photo} name={writer.name} />
+    </div>
+  );
+}
+
+function Answer({ className, answer }) {
+  return (
+    <Card className={classNames(styles.answer, className)} key={answer.id}>
+      <p dangerouslySetInnerHTML={{ __html: answer.content }} />
+      <div className={styles.answerInfo}>
+        <div className={styles.date}>
+          <DateText value={answer.createdAt} />
+        </div>
+        <Writer writer={answer.writer} />
+      </div>
+    </Card>
+  );
+}
+
+export default QuestionPage;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionPage.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionPage.module.css"
new file mode 100644
index 00000000..bb200993
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/QuestionPage.module.css"	
@@ -0,0 +1,99 @@
+.header {
+  padding-top: 39px;
+  padding-bottom: 33px;
+  background-color: #fff;
+}
+
+.count {
+  margin: 0 0 22px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #878787;
+}
+
+.question,
+.count,
+.answerItem {
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+.questionInfo {
+  display: flex;
+  margin-bottom: 18px;
+}
+
+.questionInfo .content {
+  flex: 1;
+}
+
+.questionInfo .author {
+  flex: none;
+}
+
+.questionInfo .title {
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #494949;
+}
+
+.questionInfo .title .count {
+  margin-left: 5px;
+  color: #fe92ab;
+}
+
+.questionInfo .date {
+  font-size: 12px;
+  font-weight: 500;
+  color: #c4c4c4;
+}
+
+.answers {
+  margin: 30px auto 80px;
+}
+
+.answerItem {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.answerItem:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.writer {
+  display: flex;
+  align-items: center;
+}
+
+.writer .info {
+  margin-right: 10px;
+}
+
+.writer .name {
+  margin-bottom: 5px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #494949;
+}
+
+.writer .level {
+  font-size: 12px;
+  font-weight: 500;
+  color: #c4c4c4;
+}
+
+.answerInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.answerInfo .date {
+  align-self: flex-end;
+  font-size: 12px;
+  font-weight: 500;
+  color: #c4c4c4;
+}
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/WishlistPage.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/WishlistPage.js"
new file mode 100644
index 00000000..4932a333
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/WishlistPage.js"	
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { deleteWishlist, getWishlist } from '../api';
+import Button from '../components/Button';
+import Container from '../components/Container';
+import CourseItem from '../components/CourseItem';
+import Warn from '../components/Warn';
+import closeButton from '../assets/closeButton.svg';
+import styles from './WishlistPage.module.css';
+
+function WishlistPage() {
+  const [courses, setCourses] = useState([]);
+
+  const handleDelete = (courseSlug) => {
+    deleteWishlist(courseSlug);
+    const nextCourses = getWishlist();
+    setCourses(nextCourses);
+  };
+
+  useEffect(() => {
+    const nextCourses = getWishlist();
+    setCourses(nextCourses);
+  }, []);
+
+  return (
+    <Container className={styles.container}>
+      <h1 className={styles.title}>나의 위시리스트</h1>
+      {courses.length === 0 ? (
+        <>
+          <Warn
+            className={styles.emptyList}
+            title="담아 놓은 코스가 없어요."
+            description="카탈로그에서 나에게 필요한 코스를 찾아보세요."
+          />
+          <div className={styles.link}>
+            <Link to="/courses">
+              <Button as="div">코스 찾아보기</Button>
+            </Link>
+          </div>
+        </>
+      ) : (
+        <ul className={styles.items}>
+          {courses.map((course) => (
+            <li key={course.slug} className={styles.item}>
+              <CourseItem course={course} />
+              <img
+                className={styles.delete}
+                src={closeButton}
+                alt="닫기"
+                onClick={() => handleDelete(course.slug)}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </Container>
+  );
+}
+
+export default WishlistPage;
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/WishlistPage.module.css" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/WishlistPage.module.css"
new file mode 100644
index 00000000..1c2a673f
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/pages/WishlistPage.module.css"	
@@ -0,0 +1,44 @@
+.container {
+  margin: 50px auto;
+}
+
+.title {
+  margin: 30px auto;
+  text-align: center;
+}
+
+ul.items {
+  width: 30%;
+  min-width: 260px;
+  padding: 0;
+  margin: 0 auto;
+  list-style: none;
+}
+
+.item {
+  margin-bottom: 30px;
+}
+
+.item {
+  position: relative;
+}
+
+.delete {
+  display: none;
+  position: absolute;
+  top: 20px;
+  right: calc(10px - 8px);
+  cursor: pointer;
+}
+
+.item:hover .delete {
+  display: block;
+}
+
+.emptyList {
+  margin: 50px auto 30px;
+}
+
+.link {
+  text-align: center;
+}
\ No newline at end of file
diff --git "a/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/utils/getCourseColor.js" "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/utils/getCourseColor.js"
new file mode 100644
index 00000000..c58f2960
--- /dev/null
+++ "b/05ovo2e/Round2/React\353\241\234 \354\233\271 \354\202\254\354\235\264\355\212\270 \353\247\214\353\223\244\352\270\260/codethat/utils/getCourseColor.js"	
@@ -0,0 +1,23 @@
+const COLORS = {
+  purple: '#d19fe9',
+  green: '#7cd9c2',
+  yellow: '#f7d16f',
+};
+
+function getCourseColor(code = '000') {
+  const firstCode = code.charAt(0);
+  switch (firstCode) {
+    case 3:
+    case 9:
+      return COLORS.green;
+    case 5:
+      return COLORS.yellow;
+    case 1:
+    case 7:
+    case 8:
+    default:
+      return COLORS.purple;
+  }
+}
+
+export default getCourseColor;