[#26] comment 껍데기

INSPJT · Mar 27, 2021 · 6073598 · 6073598
1 parent b509bfa
commit 6073598
Show file tree

Hide file tree

Showing 17 changed files with 530 additions and 9 deletions.
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1 +1,2 @@
-<div id="global_modal"></div>
+<div id="global_modal"></div>
+<div id="global_comment"></div>
diff --git a/components/Comment/AuthorComment.tsx b/components/Comment/AuthorComment.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { User } from 'types/index';
+import styled from '@emotion/styled';
+import CreatedItem from 'components/Comment/CreatedItem';
+import CommentThumbnail from 'components/Comment/CommentThumbnail';
+
+export type AuthorCommentProps = {
+  content: string;
+  author: User;
+  created: number;
+};
+
+const AuthorComment = (props: AuthorCommentProps) => {
+  const { content, author, created } = props;
+
+  return (
+    <VerticalMiddleDiv>
+      <CommentThumbnail author={author} />
+      <InlineDiv>
+        <div>
+          <InlineH3>{author.nickName}</InlineH3>
+          <StyledSpan>{content}</StyledSpan>
+        </div>
+        <CreatedItem currentTime={created} />
+      </InlineDiv>
+    </VerticalMiddleDiv>
+  );
+};
+
+const VerticalMiddleDiv = styled.div`
+  border-bottom: 1px solid rgba(239, 239, 239, 1);
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  display: flex;
+  align-items: center;
+`;
+
+const StyledSpan = styled.span`
+  font-size: 14px;
+`;
+
+const InlineH3 = styled.h3`
+  display: inline-block;
+  font-size: 18px;
+  margin-right: 10px;
+`;
+
+const InlineDiv = styled.div`
+  display: inline-block;
+`;
+
+export default AuthorComment;
diff --git a/components/Comment/CommentArea.tsx b/components/Comment/CommentArea.tsx
@@ -0,0 +1,66 @@
+import { User } from 'types/index';
+import CommentThumbnail from 'components/Comment/CommentThumbnail';
+import styled from '@emotion/styled';
+
+export type CommentAreaProps = {
+  author: User;
+};
+
+const CommentArea = (props: CommentAreaProps) => {
+  const { author } = props;
+
+  return (
+    <StyledCommentArea>
+      <CommentThumbnail author={author} />
+      <InlineDiv>
+        <StyledForm>
+          <StyledTextArea placeholder="댓글 달기..." />
+          <StyledSubmitButton>게시</StyledSubmitButton>
+        </StyledForm>
+      </InlineDiv>
+    </StyledCommentArea>
+  );
+};
+
+const InlineDiv = styled.div`
+  display: inline-block;
+`;
+
+const StyledTextArea = styled.textarea`
+  background-color: transparent;
+  padding: 0;
+  height: 18px;
+  border: 0;
+  color: rgba(142, 142, 142, 1);
+`;
+
+const StyledForm = styled.form`
+  display: flex;
+  align-items: center;
+  border-radius: 30px;
+  margin-right: 16px;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  background-color: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(219, 219, 219, 1);
+`;
+
+const StyledCommentArea = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: rgba(239, 239, 239, 1);
+  border-top: 1px solid rgba(219, 219, 219, 1);
+  border-bottom: 1px solid rgba(219, 219, 219, 1);
+  padding: 8px 0;
+`;
+
+const StyledSubmitButton = styled.button`
+  height: 18px;
+  background-color: transparent;
+  border: 0;
+  color: rgba(0, 149, 246, 0.3);
+  font-size: 14px;
+`;
+
+export default CommentArea;
diff --git a/components/Comment/CommentBody.tsx b/components/Comment/CommentBody.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import CreatedBottom from 'components/Comment/CommentBottom';
+
+import { User } from 'types/index';
+import styled from '@emotion/styled';
+import CommentThumbnail from 'components/Comment/CommentThumbnail';
+
+export type CommentBodyProps = {
+  content: string;
+  author: User;
+  isLike: Boolean;
+  likeLength: number;
+  created: number;
+};
+
+const CommentBody = (props: CommentBodyProps) => {
+  const { content, author, isLike, likeLength, created } = props;
+
+  let heartUrl = '';
+  if (isLike) {
+    heartUrl = 'https://www.pinclipart.com/picdir/middle/87-877828_save-the-heart-by-ofirma85-instagram-like-icon.png';
+  } else {
+    heartUrl =
+      'https://png.pngitem.com/pimgs/s/63-630682_transparent-heart-doodle-png-transparent-instagram-heart-icon.png';
+  }
+
+  return (
+    <VerticalMiddleDiv>
+      <InlineDiv>
+        <div>
+          <CommentThumbnail author={author} />
+          <InlineDiv>
+            <div>
+              <InlineH3>{author.nickName}</InlineH3>
+              <StyledSpan>{content}</StyledSpan>
+            </div>
+            <CreatedBottom likeLength={likeLength} created={created} />
+          </InlineDiv>
+        </div>
+      </InlineDiv>
+      <StyledHeart type="button">
+        <HeartImg src={heartUrl} alt="heart" />
+      </StyledHeart>
+    </VerticalMiddleDiv>
+  );
+};
+
+const VerticalMiddleDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const StyledSpan = styled.span`
+  font-size: 14px;
+`;
+
+const InlineH3 = styled.h3`
+  display: inline-block;
+  font-size: 18px;
+  margin-right: 10px;
+`;
+
+const InlineDiv = styled.div`
+  display: inline-block;
+`;
+
+const HeartImg = styled.img`
+  width: 12px;
+  height: 12px;
+  float: right;
+`;
+
+const StyledHeart = styled.button`
+  display: inline-block;
+  background-color: transparent;
+  border: none;
+`;
+
+export default CommentBody;
diff --git a/components/Comment/CommentBottom.tsx b/components/Comment/CommentBottom.tsx
@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import CreatedItem from 'components/Comment/CreatedItem';
+
+export type CommentBottomProps = {
+  likeLength: number;
+  created: number;
+};
+
+const CommentBottom = (props: CommentBottomProps) => {
+  const { likeLength, created } = props;
+
+  return (
+    <>
+      <CreatedItem currentTime={created} />
+      <StyledLikeItem>좋아요 {likeLength}개</StyledLikeItem>
+      <StyledReplyItem>답글 달기</StyledReplyItem>
+    </>
+  );
+};
+
+const StyledLikeItem = styled.button`
+  color: rgba(142, 142, 142, 1);
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+  border: none;
+  background-color: transparent;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: auto;
+  -webkit-text-size-adjust: 100%;
+`;
+
+const StyledReplyItem = styled.button`
+  color: rgba(142, 142, 142, 1);
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+  border: none;
+  background-color: transparent;
+  align-items: flex-start;
+  box-sizing: border-box;
+`;
+
+export default CommentBottom;
diff --git a/components/Comment/CommentItem.tsx b/components/Comment/CommentItem.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { User } from 'types/index';
+import CommentBody from 'components/Comment/CommentBody';
+import CommentReply from 'components/Comment/CommentReply';
+
+export type CommentItemProps = {
+  content: string;
+  author: User;
+  isLike: Boolean;
+  likeLength: number;
+  replyLength: number;
+  created: number;
+};
+
+const CommentItem = (props: CommentItemProps) => {
+  const { content, author, isLike, likeLength, replyLength, created } = props;
+
+  if (replyLength) {
+    return (
+      <>
+        <CommentBody
+          thumbnail={author.thumbnail}
+          created={created}
+          isLike={isLike}
+          author={author}
+          likeLength={likeLength}
+          content={content}
+        />
+        <CommentReply replyLength={replyLength} />
+      </>
+    );
+  }
+
+  return (
+    <CommentBody
+      thumbnail={author.thumbnail}
+      created={created}
+      isLike={isLike}
+      author={author}
+      likeLength={likeLength}
+      content={content}
+    />
+  );
+};
+
+export default CommentItem;
diff --git a/components/Comment/CommentNav.tsx b/components/Comment/CommentNav.tsx
@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+
+const CommentNav = () => {
+  return (
+    <StyledNav>
+      <StyledDiv>
+        <a href="/">
+          <span>
+            <StyledImg src="https://img.icons8.com/ios/452/back--v1.png" alt="뒤로가기" />
+          </span>
+        </a>
+      </StyledDiv>
+      <StyledDiv>
+        <StyledH1>댓글</StyledH1>
+      </StyledDiv>
+      <StyledDiv>
+        <StyledButton type="button">
+          <StyledImg src="https://cdn141.picsart.com/328472243107211.png" alt="DM" />
+        </StyledButton>
+      </StyledDiv>
+    </StyledNav>
+  );
+};
+
+const StyledH1 = styled.h1`
+  margin-block-start: 0;
+  margin-block-end: 0;
+  font-size: 16px;
+`;
+
+const StyledImg = styled.img`
+  height: 24px;
+  width: 24px;
+`;
+
+const StyledButton = styled.button`
+  background-color: transparent;
+  border: 0;
+`;
+
+const StyledDiv = styled.div`
+  position: relative;
+  display: block;
+`;
+
+const StyledNav = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex: 0 0 60px;
+`;
+
+export default CommentNav;