[Add] 기본 모달 frame 구성 #86

모달 frame 구축, 텍스트만 들어오는 경우와 이미지 텍스트 모두 들어오는 경우를 고려해서 모달 작성
feed component재사용을 위해서 feed component에서 사이즈 받도록 수정

client/src/composition/DetailFeed/CommonModal.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ReactNode } from 'react';
+
+const ModalFrame = styled.div`
+  background-color: white;
+  height: 80%;
+  position: fixed;
+  z-index: 2000;
+  display: flex;
+`;
+
+const ImageContent = styled.div`
+  flex: 1;
+`;
+
+const TextContent = styled.div`
+  flex: 0.5;
+`;
+const ModalBackgroud = styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+`;
+
+const CloseModal = styled.p`
+  color: white;
+  float: right;
+  margin: 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+`;
+interface IProps {
+  textChildren?: ReactNode;
+  imageChildren?: ReactNode;
+  className?: string;
+  onClick?: () => void;
+}
+
+function Commonmodal({
+  onClick,
+  textChildren,
+  imageChildren,
+  className
+}: IProps) {
+  const [isOpen, setIsOpen] = useState(true);
+  const closeModal = () => {
+    setIsOpen(false);
+  };
+  return isOpen ? (
+    <>
+      <ModalBackgroud>
+        <CloseModal onClick={closeModal}>X</CloseModal>
+      </ModalBackgroud>
+
+      <ModalFrame onClick={onClick} className={className}>
+        {imageChildren && <ImageContent>{imageChildren}</ImageContent>}
+        <TextContent>{textChildren}</TextContent>
+      </ModalFrame>
+    </>
+  ) : (
+    <></>
+  );
+}
+
+export default Commonmodal;

client/src/composition/DetailFeed/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import CommonModal from './CommonModal';
+import Feed from '../Feed/Feed';
+import { useGetfeedsQuery } from 'react-components.d';
+import { getDate } from 'utils/dateUtil';
+import styled from 'styled-components';
+
+const ModalFeed = styled(Feed)`
+  border: none;
+  border-radius: 0px;
+`;
+const DetailFeed: React.FC = () => {
+  const { data } = useGetfeedsQuery({
+    variables: { first: 1, currentCursor: '9999-12-31T09:29:26.050Z' }
+  });
+
+  const valuecheck = () => {
+    return data && data.feeds && data.feeds.feedItems
+      ? data.feeds.feedItems.map((feed, idx) => {
+          return feed && feed.feed && feed.feed.createdAt ? (
+            <ModalFeed
+              key={getDate(feed.feed.createdAt).toISOString() + idx}
+              content={feed.feed.content}
+              feedinfo={feed}
+              createdAt={getDate(feed.feed.createdAt).toISOString()}
+              feedSize={'30rem'}
+            />
+          ) : (
+            <></>
+          );
+        })
+      : '';
+  };
+  return <CommonModal textChildren={valuecheck()} imageChildren={<></>} />;
+};
+
+export default DetailFeed;

client/src/composition/Feed/Feed.tsx

@@ -6,11 +6,11 @@ import FeedFooter from './FeedFooter';
 import CommentContainer from './FeedComment';
 import { IFeed } from 'react-components.d';
 
-const FeedDiv = styled.div`
+const FeedDiv = styled.div<{ feedSize: string }>`
   ${props => props.theme.borders.feedBorder};
   background-color: #fff;
   margin-bottom: 10px;
-  width: 32rem;
+  width: ${props => props.feedSize};
 `;
 
 const FeedContentDiv = styled.div`
@@ -32,9 +32,10 @@ interface Iprops {
   content: string | null | undefined;
   createdAt: string;
   feedinfo: IFeed;
+  feedSize: string;
 }
 
-function Feed({ content, createdAt, feedinfo }: Iprops) {
+function Feed({ content, createdAt, feedinfo, feedSize }: Iprops) {
   const [likeCnt, setLikeCnt] = useState<number>(0);
   const [hasLiked, setHasLiked] = useState<boolean>(false);
 
@@ -48,7 +49,7 @@ function Feed({ content, createdAt, feedinfo }: Iprops) {
   if (!feedinfo || !feedinfo.searchUser) return <></>;
   return (
     <>
-      <FeedDiv>
+      <FeedDiv feedSize={feedSize}>
         <FeedContentDiv className="mainbox">
           <FeedEditDiv></FeedEditDiv>
           <FeedHeader
@@ -78,4 +79,8 @@ function Feed({ content, createdAt, feedinfo }: Iprops) {
   );
 }
 
+Feed.defaultProps = {
+  feedSize: '32rem'
+};
+
 export default Feed;