💄 Design: 지출 내역 Item 디자인 (#1)

acoountbook/src/components/home/content/Content.jsx

@@ -1,5 +1,21 @@
 import * as C from "./Content.style";
+import ContentItem from "./ContentItem";
 
 export default function Content() {
-  return <C.Container>content</C.Container>;
+  return (
+    <C.Container>
+      <ContentItem
+        date="2024-01-05"
+        category="식비"
+        content="세광양대창"
+        price="100,000원"
+      />
+      <ContentItem
+        date="2024-01-10"
+        category="도서"
+        content="모던 자바스크립트"
+        price="40,500원"
+      />
+    </C.Container>
+  );
 }

acoountbook/src/components/home/content/Content.style.js

@@ -1,7 +1,12 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  padding: 20px;
+
   background-color: white;
   border-radius: 16px;
-  padding: 20px;
 `;

acoountbook/src/components/home/content/ContentItem.jsx

@@ -0,0 +1,15 @@
+import * as C from "./ContentItem.style";
+
+export default function ContentItem({ date, category, content, price }) {
+  return (
+    <C.Container>
+      <div>
+        <C.Date>{date}</C.Date>
+        <C.Content>
+          {category} - {content}
+        </C.Content>
+      </div>
+      <C.Price>{price}</C.Price>
+    </C.Container>
+  );
+}

acoountbook/src/components/home/content/ContentItem.style.js

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 15px 20px;
+
+  border-radius: 8px;
+
+  background-color: rgb(249, 249, 249);
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px;
+
+  cursor: pointer;
+`;
+
+export const Date = styled.div`
+  margin-bottom: 5px;
+  color: rgb(102, 102, 102);
+  font-size: 14px;
+`;
+
+export const Content = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+  color: #92b1d4;
+  flex-shrink: 0;
+`;
+
+export const Price = styled.div`
+  font-size: 16px;
+  font-weight: bold;
+  color: #92b1d4;
+  flex-shrink: 0;
+`;