Merge pull request #37 from todolist-team2/fe/feature/historyAction

[FE] ActionHistoryItem 컴포넌트 구현

.gitignore

@@ -131,3 +131,6 @@ dist
 
 ## IDEA
 .idea
+
+## Data
+/frontend/data

frontend/data/WiredTiger

@@ -0,0 +1,2 @@
+WiredTiger
+WiredTiger 3.2.0: (May  9, 2019)

frontend/data/WiredTiger.lock

@@ -0,0 +1 @@
+WiredTiger lock file

frontend/data/WiredTiger.turtle

@@ -0,0 +1,6 @@
+WiredTiger version string
+WiredTiger 3.2.0: (May  9, 2019)
+WiredTiger version
+major=3,minor=2,patch=0
+file:WiredTiger.wt
+access_pattern_hint=none,allocation_size=4KB,app_metadata=,assert=(commit_timestamp=none,durable_timestamp=none,read_timestamp=none),block_allocation=best,block_compressor=,cache_resident=false,checkpoint=(WiredTigerCheckpoint.2=(addr="018b81e4db5aa6c38c81e4cf483c838d81e418aaccbe808080e2cfc0e21fc0",order=2,time=1689733718,size=20480,newest_durable_ts=0,oldest_start_ts=0,oldest_start_txn=0,newest_stop_ts=-1,newest_stop_txn=-11,write_gen=4)),checkpoint_lsn=(1,22528),checksum=uncompressed,collator=,columns=,dictionary=0,encryption=(keyid=,name=),format=btree,huffman_key=,huffman_value=,id=0,ignore_in_memory_cache_size=false,internal_item_max=0,internal_key_max=0,internal_key_truncate=true,internal_page_max=4KB,key_format=S,key_gap=10,leaf_item_max=0,leaf_key_max=0,leaf_page_max=32KB,leaf_value_max=0,log=(enabled=true),memory_page_image_max=0,memory_page_max=5MB,os_cache_dirty_max=0,os_cache_max=0,prefix_compression=false,prefix_compression_min=4,split_deepen_min_child=0,split_deepen_per_child=0,split_pct=90,value_format=S,version=(major=1,minor=1)

frontend/data/mongod.lock

@@ -0,0 +1 @@
+1

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import Main from "./components/main/Main";
 import Alert from "./components/common/Alert";
 import Container from "./styles/Container";
 import Aside from "./components/aside/Aside";
+import HistoryActionItem from "./components/common/HistoryActionItem";
 
 const App: React.FC = () => {
   const [isHistoryOpen, setIsHistoryOpen] = useState<boolean>(false);

frontend/src/components/common/HistoryActionItem.tsx

@@ -0,0 +1,90 @@
+import { css, styled } from "styled-components";
+import TTheme from "../../types/TTheme";
+
+const HistoryActionItem = styled(
+  ({
+    className,
+    userName,
+    body,
+    timeStamp,
+  }: {
+    className?: string;
+    userName: string;
+    body: string;
+    timeStamp: string;
+  }) => {
+    return (
+      <article className={className}>
+        <h4 className="blind">사용자 활동 기록</h4>
+        <figure className="image">
+          <img
+            src="https://innostudio.de/fileuploader/images/default-avatar.png"
+            alt=""
+          />
+          <figcaption className="blind">사진</figcaption>
+        </figure>
+        <img src="" alt="" />
+        <dl className="body">
+          <dt className="blind">사용자 이름</dt>
+          <dd className="user-name">{userName}</dd>
+
+          <dt className="blind">내용</dt>
+          <dd className="body">{body}</dd>
+
+          <dt className="blind">시간 표기</dt>
+          <dd className="time-stamp">
+            <time>{timeStamp}</time> 전
+          </dd>
+        </dl>
+      </article>
+    );
+  }
+)<{ theme: TTheme }>`
+  width: 348px;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  padding: 16px;
+  ${({ theme }) => {
+    const { font, color, border } = theme;
+
+    return css`
+      background-color: ${color.surface.default};
+      .image {
+        width: 40px;
+        height: 40px;
+        overflow: hidden;
+        border-radius: ${border.radius.circle};
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        .user-name {
+          font: ${font.display.medium14};
+          color: ${color.text.default};
+        }
+        .body {
+          font: ${font.display.medium14};
+          color: ${color.text.default};
+
+          strong {
+            font: ${font.display.bold14};
+            color: ${color.text.bold};
+          }
+        }
+        .time-stamp {
+          font: ${font.display.medium12};
+          color: ${color.text.weak};
+        }
+      }
+    `;
+  }}
+`;
+
+export default HistoryActionItem;