[#63] 댓글 컴포넌트 껍데기

components/Comment/AuthorComment.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { FeedAuthor } from 'types/index';
+import styled from '@emotion/styled';
+import UserAvatar from 'components/UserAvatar';
+import { getTimeDiff } from 'utils/api/time';
+
+export type AuthorCommentProps = {
+  content: string;
+  author: FeedAuthor;
+  created: string;
+};
+
+function AuthorComment({ content, author: { displayId, profileImageUrl }, created }: AuthorCommentProps) {
+  return (
+    <VerticalMiddleDiv>
+      {/* Todo: UserAvatar에 링크달기 */}
+      <ThumbnailDiv>
+        <UserAvatar thumbnail={profileImageUrl} />
+      </ThumbnailDiv>
+      <div>
+        <div>
+          <InlineH3>
+            {/* Todo: displayId에 링크 달기 <Link href={}> */}
+            <StyledAnchor> {displayId}</StyledAnchor>
+          </InlineH3>
+          <StyledSpan>{content}</StyledSpan>
+        </div>
+        <StyledCreatedItem>{getTimeDiff(created)}</StyledCreatedItem>
+      </div>
+    </VerticalMiddleDiv>
+  );
+}
+
+const StyledCreatedItem = styled.div`
+  display: inline-block;
+  justify-content: space-between;
+  color: rgb(142, 142, 142);
+  margin-right: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: left;
+  border: none;
+  background-color: transparent;
+`;
+
+const StyledAnchor = styled.a`
+  text-decoration: none;
+  color: inherit;
+`;
+
+const VerticalMiddleDiv = styled.div`
+  border-bottom: 1px solid rgb(239, 239, 239);
+  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 ThumbnailDiv = styled.div`
+  display: inline-block;
+  margin: 0 16px;
+`;
+
+export default AuthorComment;

components/Comment/Body.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback, useState } from 'react';
+import CreatedBottom from 'components/Comment/CommentBottom';
+
+import { Member } from 'types/index';
+import styled from '@emotion/styled';
+import Icon from 'components/Icon';
+import UserAvatar from 'components/UserAvatar';
+
+export type BodyProps = {
+  feedAuthorDisplayId: string;
+  id: number;
+  content: string;
+  author: Member;
+  isLike: Boolean;
+  likeLength: number;
+  created: string;
+};
+
+function Body({ feedAuthorDisplayId, id, content, author:{displayId, profileImageUrl}, isLike, likeLength, created }: BodyProps) {
+  const [like, setLike] = useState(isLike);
+  // Todo: api 구현, comment id 필요
+  const toggleLike = useCallback(() => {
+    setLike((prev) => !prev);
+  }, []);
+  // Todo: 조건별 모달 구현, feedAuthor displayId 필요
+  return (
+    <StyledDiv>
+      <VerticalMiddleDiv>
+        <ThumbnailDiv>
+          <UserAvatar thumbnail={profileImageUrl} />
+        </ThumbnailDiv>
+        <InlineDiv>
+          <InlineH3>
+            {/* Todo: displayId link 걸기 <Link href=> */}
+            <StyledAnchor>{displayId}</StyledAnchor>
+          </InlineH3>
+          <StyledSpan>{content}</StyledSpan>
+          <CreatedBottom likeLength={likeLength} created={created} />
+        </InlineDiv>
+      </VerticalMiddleDiv>
+      <StyledButton type="button" onClick={toggleLike}>
+        <Icon name="favorite" color={like ? '#FD1D1D' : '#FFFFFF'} size="small" />
+      </StyledButton>
+    </StyledDiv>
+  );
+}
+
+const InlineDiv = styled.div`
+  display: inline-block;
+`;
+
+const StyledDiv = styled.div`
+  display: flex;
+`;
+
+const StyledAnchor = styled.a`
+  text-decoration: none;
+  color: inherit;
+`;
+
+const ThumbnailDiv = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 16px;
+`;
+
+const VerticalMiddleDiv = styled.div`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+`;
+
+const StyledSpan = styled.span`
+  display: inline-block;
+  font-size: 14px;
+`;
+
+const InlineH3 = styled.h3`
+  display: inline-block;
+  font-size: 18px;
+  margin-right: 10px;
+`;
+
+const StyledButton = styled.button`
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  border: none;
+`;
+
+export default Body;

components/Comment/CommentArea.tsx

@@ -0,0 +1,73 @@
+import { Member } from 'types/index';
+import styled from '@emotion/styled';
+import React from 'react';
+import UserAvatar from 'components/UserAvatar';
+
+export type CommentAreaProps = {
+  author: Member;
+};
+
+function CommentArea({ author: { profileImageUrl } }: CommentAreaProps) {
+  // Todo : onKeyPressed - enter, onClick 함수구현
+  return (
+    <StyledCommentArea>
+      <InlineDiv>
+        <UserAvatar thumbnail={profileImageUrl} />
+      </InlineDiv>
+      <StyledForm>
+        <StyledTextArea placeholder="댓글 달기..." />
+        <StyledSubmitButton>게시</StyledSubmitButton>
+      </StyledForm>
+    </StyledCommentArea>
+  );
+}
+
+const InlineDiv = styled.div`
+  display: inline-block;
+  margin: 0 16px;
+`;
+
+const StyledTextArea = styled.textarea`
+  display: flex;
+  resize: none;
+  flex-grow: 1;
+  background-color: transparent;
+  padding: 0;
+  height: 18px;
+  border: 0;
+  color: rgb(142, 142, 142);
+`;
+
+const StyledForm = styled.form`
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  border-radius: 30px;
+  margin-right: 16px;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid rgb(219, 219, 219);
+`;
+
+const StyledCommentArea = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: rgb(239, 239, 239);
+  border-top: 1px solid rgb(219, 219, 219);
+  border-bottom: 1px solid rgb(219, 219, 219);
+  padding: 8px 0;
+`;
+
+const StyledSubmitButton = styled.button`
+  display: flex;
+  justify-content: flex-end;
+  height: 18px;
+  background-color: transparent;
+  border: 0;
+  color: rgba(0, 149, 246, 0.3);
+  font-size: 14px;
+`;
+
+export default CommentArea;

components/Comment/CommentBottom.tsx

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import { getTimeDiff } from 'utils/api/time';
+import React from 'react';
+
+export type CommentBottomProps = {
+  likeLength: number;
+  created: string;
+};
+
+function CommentBottom({ likeLength, created }: CommentBottomProps) {
+  return (
+    <StyledDiv>
+      <StyledCreatedItem>{getTimeDiff(created)}</StyledCreatedItem>
+      <StyledLikeItem>좋아요 {likeLength}개</StyledLikeItem>
+      <StyledReplyItem>답글 달기</StyledReplyItem>
+    </StyledDiv>
+  );
+}
+
+const StyledCreatedItem = styled.div`
+  display: inline-block;
+  justify-content: space-between;
+  color: rgb(142, 142, 142);
+  margin-right: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: left;
+  border: none;
+  background-color: transparent;
+`;
+
+const StyledDiv = styled.div`
+  display: flex;
+`;
+
+const StyledLikeItem = styled.button`
+  color: rgb(142, 142, 142);
+  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: rgb(142, 142, 142);
+  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;

components/Comment/CommentItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Comment } from 'types/index';
+import Body from 'components/Comment/Body';
+import ReplyComponent from 'components/Comment/ReplyComponent';
+import styled from '@emotion/styled';
+
+export type CommentItemProps = {
+  comment: Comment;
+};
+
+function CommentItem({ comment }: CommentItemProps) {
+  const { replyLength, id, feedAuthorDisplayId, likeLength, isLike, created, content, author } = comment;
+  return (
+    <Styledli>
+      <Body
+        feedAuthorDisplayId={feedAuthorDisplayId}
+        author={author}
+        content={content}
+        created={created}
+        id={id}
+        isLike={isLike}
+        likeLength={likeLength}
+      />
+      {replyLength > 0 && <ReplyComponent replySize={replyLength} commentId={id} />}
+    </Styledli>
+  );
+}
+
+const Styledli = styled.li`
+  list-style: none;
+`;
+
+export default CommentItem;

components/Comment/CommentNav.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import Icon from 'components/Icon';
+
+function CommentNav() {
+  // Todo: 뒤로가기 구현
+  // Todo: DM 으로 이동 구현
+  return (
+    <StyledNav>
+      <StyledDiv>
+        <StyledIcon>
+          <Icon name="back" size="big" color="#000000" />
+        </StyledIcon>
+      </StyledDiv>
+      <StyledDiv>
+        <StyledH1>댓글</StyledH1>
+      </StyledDiv>
+      <StyledDiv>
+        <StyledButton type="button">
+          <Icon name="share" size="big" color="#000000" />
+        </StyledButton>
+      </StyledDiv>
+    </StyledNav>
+  );
+}
+
+const StyledIcon = styled.button`
+  transform: rotate(-90deg);
+`;
+
+const StyledH1 = styled.h1`
+  margin-block-start: 0;
+  margin-block-end: 0;
+  font-size: 16px;
+`;
+
+const StyledButton = styled.button`
+  background-color: transparent;
+  border: 0;
+`;
+
+const StyledDiv = styled.div`
+  position: relative;
+`;
+
+const StyledNav = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex: 0 0 60px;
+`;
+
+export default CommentNav;