feat: 공지 상세 페이지 모달로 구현

IT-Cotato · Jul 23, 2024 · b9f763e · b9f763e
1 parent 56ca077
commit b9f763e
Show file tree

Hide file tree

Showing 4 changed files with 261 additions and 3 deletions.
diff --git a/src/pages/group/notice/Notice.jsx b/src/pages/group/notice/Notice.jsx
@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 import NoticeItem from './notice_components/NoticeItem';
 import NoticeCreate from './NoticeCreate';
+import NoticeDetail from './NoticeDetail';
 import { useState } from 'react';
 
+
 const Container = styled.div`
   background-color: ${({ theme }) => theme.colors.neutral[100]};
   width: 100%;
@@ -39,11 +41,19 @@ const NoticeList = styled.div`
 
 const Notice = () => {
   const [showNoticeCreate, setShowNoticeCreate] = useState(false);
+  const [showNoticeDetail, setShowNoticeDetail] = useState(false);
 
   return (
     <Container>
       <NoticeList >
-        <NoticeItem title="6월 정기 모임 관련 공지1" date="2024.05.30" isNew={true} /> {/* TODO: API 연결 필요 */}
+        <NoticeItem 
+          title="6월 정기 모임 관련 공지!!!!" 
+          date="2024.05.30" 
+          isNew={true} 
+          onClick={() => {
+            setShowNoticeDetail(true);
+            console.log("공지 아이템 클릭");
+          }} />
         <NoticeItem title="6월 정기 모임 관련 공지2" date="2024.05.30" isNew={true} />
         <NoticeItem title="6월 정기 모임 관련 공지3" date="2024.05.30" isNew={false} />
         <NoticeItem title="6월 정기 모임 관련 공지" date="2024.05.30" isNew={false} />
@@ -93,6 +103,31 @@ const Notice = () => {
           </div>
         </div>
       }
+      {
+        showNoticeDetail &&
+        <div
+          style={{
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            zIndex: 10000,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <div
+            style={{
+              width: '100%',
+              maxWidth: '649px',
+              height: '100%',
+              backgroundColor: 'white',
+            }}>
+            <NoticeDetail closeNoticeDetail={() => setShowNoticeDetail(false)} />
+          </div>
+        </div>
+      }
     </Container>
   );
 }

diff --git a/src/pages/group/notice/NoticeDetail.jsx b/src/pages/group/notice/NoticeDetail.jsx
@@ -0,0 +1,155 @@
+import styled from 'styled-components';
+import CommentItem from './notice_components/CommentItem';
+
+const Container = styled.div`
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background-color: ${({ theme }) => theme.colors.neutral[100]};
+`;
+
+const HeaderContainer = styled.div`
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid #dcdcdc;
+    background-color: white;
+`;
+
+const PreviousButton = styled.button`
+    width: 24px;
+    height: 24px;
+    background-color: blue;
+    cursor: pointer;
+`;
+
+const HeaderTitle = styled.div`
+    flex-grow: 1;
+    text-align: center;
+    color: ${({ theme }) => theme.colors.neutral[600]};
+    font-size: 20px;
+    font-weight: 700;
+`;
+
+const MoreButton = styled.div`
+    width: 24px;
+    height: 24px;
+    background-color: red;
+    cursor: pointer;
+`;
+
+const ContentContainer = styled.div`
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;    
+`;
+
+const NoticeContainer = styled.div`
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 20px;
+    background-color: white;
+`;
+
+const NoticeTitle = styled.h1`
+    width: 100%;
+    box-sizing: border-box;
+    padding: 16px 0;
+    border-bottom: 1px solid #dcdcdc;
+    font-size: 16px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.colors.neutral[600]};
+`;
+
+const NoticeContent = styled.p`
+    width: 100%;
+    box-sizing: border-box;
+    padding: 16px 0;
+    padding-bottom: 200px;
+    border-bottom: 1px solid #dcdcdc;
+    font-size: 16px;
+    color: ${({ theme }) => theme.colors.neutral[500]};
+
+`;
+
+const CommentContainer = styled.div`
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 20px;
+    background-color: white;
+
+`;
+
+const FooterContainer = styled.div`
+    width: 100%;
+    height: 64px;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    border-top: 1px solid #dcdcdc;
+    background-color: white;
+`;
+
+const InputContainer = styled.div`
+    width: 100%;
+`;
+
+const Input = styled.input`
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    border-bottom: 1px solid #dcdcdc;
+    font-size: 16px;
+    font-weight: 400;
+    background-color: ${({ theme }) => theme.colors.neutral[100]};
+    &:focus {
+        outline: none;
+        border: 1px solid ${({ theme }) => theme.colors.main[500]};
+    }
+`;
+
+const NoticeDetail = ({ closeNoticeDetail }) => {
+  return (
+    <Container>
+      <HeaderContainer>
+            <PreviousButton onClick={closeNoticeDetail} />
+            <HeaderTitle>공지사항</HeaderTitle>
+            <MoreButton />
+      </HeaderContainer>
+      <ContentContainer>
+        <NoticeContainer>
+            <NoticeTitle>이건 공지 제목</NoticeTitle>
+            <NoticeContent>이건 공지 내용</NoticeContent>
+        </NoticeContainer>
+        <CommentContainer>
+            <CommentItem name="다인" comment="댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글댓글1댓글댓글" date="2024.07.23"/>
+            <CommentItem name="다인" comment="댓글2" date="2024.07.23"/>
+            <CommentItem name="다인" comment="댓글3" date="2024.07.23"/>
+            <CommentItem name="다인" comment="댓글1" date="2024.07.23"/>
+            <CommentItem name="다인" comment="댓글1" date="2024.07.23"/>
+            <CommentItem name="다인" comment="댓글1" date="2024.07.23"/>
+            <CommentItem name="다인" comment="댓글1" date="2024.07.23"/>
+        </CommentContainer>
+      </ContentContainer>
+      <FooterContainer>
+            <InputContainer>
+                <Input placeholder='댓글을 입력하세요.'/>
+            </InputContainer>
+      </FooterContainer>
+    </Container>
+  );
+};
+
+export default NoticeDetail;
diff --git a/src/pages/group/notice/notice_components/CommentItem.jsx b/src/pages/group/notice/notice_components/CommentItem.jsx
@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  border-bottom: 1px solid rgba(221, 221, 221, 0.5);
+  padding: 16px 0px;
+  display: flex;
+  flex-direction: row;
+`;
+
+const ProfileImage = styled.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  margin-right: 8px;
+  background-color: pink;
+`;
+
+const ContentContainer = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-right: 12px;
+`;
+
+const Name = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  margin-bottom: 4px;
+`;
+
+const CommentText = styled.div`
+  font-size: 14px;
+  font-weight: 400;
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  margin-bottom: 4px;
+`;
+
+const CommentDate = styled.div`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.neutral[300]};
+`;
+
+const MoreButton = styled.button`
+  width: 16px;
+  height: 16px;
+  background: blue;
+  border: none;
+  cursor: pointer;
+`;
+
+
+// TODO: 프로필이미지도 props로 보내야함
+const CommentItem = ({ name, comment, date }) => {
+  return (
+    <Container>
+      <ProfileImage />
+      <ContentContainer>
+        <Name>{name}</Name>
+        <CommentText>{comment}</CommentText>
+        <CommentDate>{date}</CommentDate>
+      </ContentContainer>
+      <MoreButton />
+    </Container>
+  );
+}
+
+export default CommentItem;
diff --git a/src/pages/group/notice/notice_components/NoticeItem.jsx b/src/pages/group/notice/notice_components/NoticeItem.jsx
@@ -34,9 +34,9 @@ const NewTag = styled.div`
   justify-content: center;
 `;
 
-const NoticeItem = ({ title, date, isNew }) => {
+const NoticeItem = ({ title, date, isNew, onClick }) => {
   return (
-    <Container>
+    <Container onClick={onClick}>
       <NoticeTitle>
         {title} {isNew && <NewTag>N</NewTag>}
       </NoticeTitle>