simple diary - render diary list

simplediary/src/App.css

@@ -26,3 +26,37 @@ textarea {
   padding: 10px;
   cursor: pointer;
 }
+
+/* List */
+.DiaryList {
+  border: 1px solid gray;
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.DiaryList h2 {
+  text-align: center;
+}
+
+/* Item */
+.DiaryItem {
+  background-color: rgb(240, 240, 240);
+  margin-bottom: 10px;
+  padding: 20px;
+}
+
+.DiaryItem .info {
+  border-bottom: 1px solid gray;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+
+.DiaryItem .date {
+  color: gray;
+}
+
+.DiaryItem .content {
+  font-weight: bold;
+  margin-bottom: 30px;
+  margin-top: 30px;
+}

simplediary/src/App.js

@@ -1,12 +1,38 @@
 import "./App.css";
 import DiaryEditor from "./DiaryEditor";
+import DiaryList from "./DiaryList";
 
-function App() {
+const dummyList = [
+  {
+    id: 1,
+    author: "kim",
+    content: "hihi",
+    emotion: 5,
+    created_date: new Date().getTime(),
+  },
+  {
+    id: 2,
+    author: "lee",
+    content: "hihi",
+    emotion: 2,
+    created_date: new Date().getTime(),
+  },
+  {
+    id: 3,
+    author: "park",
+    content: "hihi",
+    emotion: 4,
+    created_date: new Date().getTime(),
+  },
+];
+
+const App = () => {
   return (
     <div className="App">
       <DiaryEditor />
+      <DiaryList diaryList={dummyList} />
     </div>
   );
-}
+};
 
 export default App;

simplediary/src/DiaryItem.js

@@ -0,0 +1,16 @@
+const DiaryItem = ({ author, content, created_date, emotion, id }) => {
+  return (
+    <div className="DiaryItem">
+      <div className="info">
+        <span>
+          작성자 : {author} | 감정 점수 : {emotion}
+        </span>
+        <br />
+        <span className="date">{new Date(created_date).toLocaleString()}</span>
+      </div>
+      <div className="content">{content}</div>
+    </div>
+  );
+};
+
+export default DiaryItem;

simplediary/src/DiaryList.js

@@ -0,0 +1,21 @@
+import DiaryItem from "./DiaryItem";
+
+const DiaryList = ({ diaryList }) => {
+  return (
+    <div className="DiaryList">
+      <h2>일기 리스트</h2>
+      <h4>{diaryList.length}개의 일기가 있습니다.</h4>
+      <div>
+        {diaryList.map((it) => (
+          <DiaryItem key={it.id} {...it} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+DiaryList.defaultProps = {
+  diaryList: [],
+};
+
+export default DiaryList;