[우연서]w5_리뷰요청_실시간 새 글 등록 알람

client/src/composition/Feed/Feed.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import FeedHeader from './FeedHeader';
+import FeedBody from './FeedBody';
+import FeedFooter from './FeedFooter';
+import CommentContainer from './FeedComment';
+import { IFeed } from 'react-components.d';
+import WriteCommentPresentor from './FeedComment/WriteCommentPresentor';
+
+const FeedDiv = styled.div`
+  ${props => props.theme.borders.feedBorder};
+  background-color: #fff;
+  margin-bottom: 10px;
+  width: 32rem;
+`;
+
+const FeedContentDiv = styled.div`
+  padding: 12px 12px 0;
+`;
+
+const FeedEditDiv = styled.span`
+  float: right;
+  cursor: pointer;
+  background-image: url('/images/buttons.png');
+  background-repeat: no-repeat;
+  background-size: 64px 134px;
+  background-position: 0 -66px;
+  height: 20px;
+  width: 20px;
+`;
+
+const CommentDiv = styled.div`
+  border-top: 1px solid #dadde1;
+  padding: 4px 12px;
+`;
+
+interface Iprops {
+  content: string | null | undefined;
+  createdAt: string;
+  feedinfo: IFeed;
+}
+
+function Feed({ content, createdAt, feedinfo }: Iprops) {
+  const [likeCnt, setLikeCnt] = useState<number>(0);
+  const [hasLiked, setHasLiked] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (feedinfo.totallikes) {
+      setLikeCnt(feedinfo.totallikes);
+      setHasLiked(feedinfo.hasLiked ? true : false);
+    }
+  }, []);
+
+  if (!feedinfo || !feedinfo.searchUser) return <></>;
+  return (
+    <>
+      <FeedDiv>
+        <FeedContentDiv className="mainbox">
+          <FeedEditDiv></FeedEditDiv>
+          <FeedHeader
+            thumbnail={
+              feedinfo.searchUser.thumbnail ||
+              process.env.PUBLIC_URL + '/images/profile.jpg'
+            }
+            nickName={feedinfo.searchUser.nickname}
+            createdAt={createdAt}
+          />
+          <FeedBody content={content} images={feedinfo.imglist} />
+          <FeedFooter
+            likeCnt={likeCnt}
+            setLikeCnt={setLikeCnt}
+            hasLiked={hasLiked}
+            setHasLiked={setHasLiked}
+            feedId={feedinfo.feedId}
+          />
+        </FeedContentDiv>
+        <CommentDiv>
+          {feedinfo.comments && feedinfo.comments.length > 0 ? (
+            feedinfo.comments.map(comment => {
+              return comment ? (
+                <>
+                  <CommentContainer comment={comment} />
+                  <WriteCommentPresentor feedId={feedinfo.feedId} />
+                </>
+              ) : (
+                <></>
+              );
+            })
+          ) : (
+            <>
+              <WriteCommentPresentor feedId={null} />
+            </>
+          )}
+        </CommentDiv>
+      </FeedDiv>
+    </>
+  );
+}
+
+export default Feed;

client/src/composition/Feed/FeedBody.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+import ImageContainer from "./ImageContainer";
+import { Image } from "react-components.d";
+
+const FeedContents = styled.div`
+  margin-top: 6px;
+  padding-bottom: 14px;
+`;
+
+const FeedText = styled.div`
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.38;
+  word-break: break-all;
+  white-space: pre;
+`;
+
+interface Iprops {
+  content: string | null | undefined;
+  images: (Image | null)[] | null | undefined;
+}
+const FeedBody = ({ content, images }: Iprops) => {
+  return (
+    <FeedContents>
+      <FeedText>{content}</FeedText>
+      {images && images.length > 0 && <ImageContainer images={images} />}
+    </FeedContents>
+  );
+};
+
+export default FeedBody;

client/src/composition/Feed/FeedComment/CommentPresentor.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+import Profile from 'components/Profile';
+import { Comment } from 'react-components.d';
+
+const CommentBubble = styled.div`
+  background-color: #f2f3f5;
+  border-radius: 18px;
+  box-sizing: border-box;
+  color: #1c1e21;
+  display: inline-block;
+  line-height: 16px;
+  margin: 0;
+  max-width: 100%;
+  word-wrap: break-word;
+  white-space: normal;
+  word-break: break-word;
+`;
+
+const CommentText = styled.p`
+  padding: 8px 10px;
+`;
+
+// 역할 :
+const CommentPresentor = ({ content }: Comment) => {
+  return (
+    <>
+      <Profile
+        imageUrl={process.env.PUBLIC_URL + '/images/profile.jpg'}
+        alt={'profile image'}
+        size="32px"
+      />
+      <CommentBubble>
+        <CommentText>댓글 : {content}</CommentText>
+      </CommentBubble>
+    </>
+  );
+};
+
+export default CommentPresentor;

client/src/composition/Feed/FeedComment/WriteCommentPresentor.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled from 'styled-components';
+import { darken } from 'polished';
+import { Comment } from 'react-components.d';
+import useInput, { IUseInput } from 'hooks/useInput';
+import Profile from 'components/Profile';
+const Input = styled.input`
+  all: unset;
+  box-sizing: border-box;
+  width: 80%;
+  height: 20px;
+  border: ${props => props.theme.borders.borderStyle};
+  border-radius: ${props => props.theme.borders.radius};
+  padding: 1rem;
+  transition: border-color 0.5s ease-in-out;
+  color: ${props => props.theme.colors.facebookTextColor};
+  &:focus {
+    border-color: ${props => darken(0.4, props.theme.colors.borderColor)};
+  }
+  & + & {
+    margin-top: 1.25rem;
+  }
+`;
+
+// 역할 :
+const WriteCommentPresentor = ({
+  feedId
+}: {
+  feedId: number | null | undefined;
+}) => {
+  const commentText: IUseInput = useInput('', validateNullCheck);
+
+  function validateNullCheck(e: React.ChangeEvent<HTMLInputElement>) {
+    const result = e.target.value;
+  }
+
+  function submitComment() {
+    //
+  }
+
+  return (
+    <>
+      <Profile
+        imageUrl={process.env.PUBLIC_URL + '/images/profile.jpg'}
+        alt={'profile image'}
+        size="32px"
+      />
+      <Input placeholder="댓글을 입력하세요" {...commentText} required />
+      <input type="button" value="입력" onClick={submitComment}></input>
+    </>
+  );
+};
+
+export default WriteCommentPresentor;

client/src/composition/Feed/FeedComment/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import CommentPresentor from './CommentPresentor';
+import { Comment } from 'react-components.d';
+
+// 역할 :
+const CommentContainer = ({ comment }: { comment: Comment }) => {
+  return <CommentPresentor content={comment.content} />;
+};
+
+export default CommentContainer;

client/src/composition/Feed/FeedContainer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import FeedList from './index';
+import styled from 'styled-components';
+
+const CenterContainer = styled.div`
+  margin: 0 auto;
+`;
+
+const FeedContainer = () => {
+  return (
+    <CenterContainer>
+      <FeedList />
+    </CenterContainer>
+  );
+};
+
+export default FeedContainer;