[#13] feat: LastChat Component 생성

Author: pumpkiinbell

src/components/LastChat/LastChat.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import SavedSVG from "../../assets/image/saved.svg";
+import {
+  AdditionalInfos,
+  Container,
+  Icon,
+  Icons,
+  Saved,
+  Title,
+  Unread,
+} from "./style";
+
+type Props = {
+  content: string;
+  memberURL: string[];
+  date: string;
+  elapsedTime: string;
+};
+
+const LastChat = ({ content, memberURL, date, elapsedTime }: Props) => {
+  return (
+    <Container>
+      <Title>{content}</Title>
+      <Icons>
+        {memberURL.map((uri) => (
+          <Icon key={uri} source={{ uri }} />
+        ))}
+      </Icons>
+      <AdditionalInfos>
+        {date} / {elapsedTime}
+      </AdditionalInfos>
+      <Unread />
+      {/* <SavedSVG /> */}
+    </Container>
+  );
+};
+
+LastChat.defaultProps = {
+  content: "대화 스타일이\n점점 좋아지고 있어요!",
+  memberURL: [
+    "https://avatars.githubusercontent.com/u/19240202?v=4",
+    "https://avatars.githubusercontent.com/u/20085849?s=88&u=282927c7a3ada57664ace463e42c9ddd6cfbdd0c&v=4",
+    "https://avatars.githubusercontent.com/u/40158029?s=52&v=4",
+  ],
+  date: "2021.01.10",
+  elapsedTime: "30:00",
+};
+
+export default LastChat;

src/components/LastChat/index.ts

@@ -0,0 +1 @@
+export { default } from "./LastChat";

src/components/LastChat/style.ts

@@ -0,0 +1,56 @@
+import styled from "styled-components/native";
+
+import SavedSVG from "../../assets/image/saved.svg";
+
+export const Container = styled.View`
+  width: 100%;
+  height: 145px;
+  background-color: #f5f4f9;
+  border-radius: 10px;
+
+  margin-bottom: 4%;
+  padding: 16px;
+`;
+
+export const Title = styled.Text`
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 3.5%;
+`;
+
+export const Icon = styled.Image`
+  width: 35px;
+  height: 35px;
+  border-radius: 50;
+`;
+
+export const Icons = styled.View`
+  flex-direction: row;
+`;
+
+export const AdditionalInfos = styled.Text`
+  position: absolute;
+  left: 16px;
+  bottom: 16px;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 17px;
+  color: #8f91a0;
+`;
+
+export const Saved = styled(SavedSVG)`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+`;
+
+export const Unread = styled.View`
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: 10px;
+  height: 10px;
+  background-color: #ef5d5d;
+  border-radius: 50;
+`;