Merge pull request #20 from IxxP-Girls/feature/boardpage-layout

Feature/boardpage layout
IxxP-Girls · Dec 6, 2023 · fa082e8 · fa082e8
2 parents dd4b1e0 + 3e674ea
commit fa082e8
Show file tree

Hide file tree

Showing 31 changed files with 853 additions and 84 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -3,12 +3,14 @@ import { RouterProvider } from 'react-router-dom';
 import routerConfig from './router/routerConfig';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Global } from '@emotion/react';
 import { MantineProvider, createTheme } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import GlobalStyles from './styles/GlobalStyles';
 import '@mantine/core/styles.css';
 import '@mantine/carousel/styles.css';
 import '@mantine/dates/styles.css';
-import { Global } from '@emotion/react';
-import GlobalStyles from './styles/GlobalStyles';
+import '@mantine/notifications/styles.css';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -32,6 +34,7 @@ function App() {
       <QueryClientProvider client={queryClient}>
         <MantineProvider theme={theme} defaultColorScheme="dark">
           <Global styles={GlobalStyles} />
+          <Notifications position="bottom-right" />
           <RouterProvider router={routerConfig} />
         </MantineProvider>
         <ReactQueryDevtools initialIsOpen={false} />

diff --git a/src/components/Root/Root.jsx b/src/components/Root/Root.jsx
@@ -1,7 +1,7 @@
 import { Container } from '@mantine/core';
 import BaseCarousel from '../common/BaseCarousel';
 import Dates from './Dates';
-import { carouselData } from '../../constants/carouselData';
+import { carouselData } from '../../constants/mockData';
 
 const Root = () => {
   return (

diff --git a/src/components/boardPage/Board/Board.jsx b/src/components/boardPage/Board/Board.jsx
@@ -0,0 +1,86 @@
+import { Divider, Flex, Text, Title, Container, Textarea, Paper, Button } from '@mantine/core';
+import formatDate from '../../../utils/formatDate';
+import { FaRegHeart, FaRegCommentDots } from 'react-icons/fa6';
+import { FaUserCircle } from 'react-icons/fa';
+import { useState } from 'react';
+import { IoMdUnlock, IoMdLock } from 'react-icons/io';
+import { TbEyeFilled } from 'react-icons/tb';
+import Comments from './Comments';
+
+const Board = ({ timestamp = 1556406509760 }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Flex direction={'column'} w={'100%'} gap={10} py={20}>
+      <Flex align={'flex-start'} justify={'space-between'} direction={'column'} gap={10}>
+        <Text>{'[동행 구해요]'}</Text>
+        <Title order={3}>{'블랙핑크 팝업행사 같이 가실 분 구해요.'}</Title>
+        <Flex justify={'space-between'} w={'100%'} pr={10}>
+          <Flex align={'center'} gap={7}>
+            <FaUserCircle size={24} />
+            <Text fz={20} mr={5}>
+              test
+            </Text>
+            <Text fz={18} fw={300} c={'dark.2'}>
+              {formatDate(timestamp)}
+            </Text>
+          </Flex>
+          <Flex align={'center'} gap={5} c={'dark.2'}>
+            <TbEyeFilled />
+            <Text>7</Text>
+          </Flex>
+        </Flex>
+      </Flex>
+      <Divider mb={10} />
+      <Text mih={'300px'} bg={'dark.6'} w={'100%'} my={10} p={20}>{`11월 24일 11시 타임 가실 분, 채팅 주세요.`}</Text>
+      <Flex gap={10}>
+        <Flex
+          align={'center'}
+          gap={2}
+          style={{ border: '1px solid', cursor: 'pointer' }}
+          w={'13%'}
+          px={10}
+          py={5}
+          justify={'space-between'}>
+          <FaRegHeart />
+          <Text>{'공감해요'}</Text>
+          <Text>{'7'}</Text>
+        </Flex>
+        <Flex
+          align={'center'}
+          gap={2}
+          style={{ border: '1px solid', cursor: 'pointer' }}
+          w={'10%'}
+          px={10}
+          py={5}
+          justify={'space-between'}
+          onClick={() => setIsOpen(!isOpen)}>
+          <FaRegCommentDots />
+          <Text>{'댓글'}</Text>
+          <Text>{'7'}</Text>
+        </Flex>
+      </Flex>
+      {isOpen && (
+        <Container h={'auto'} p={15} w={'100%'}>
+          <Comments />
+          <Paper p={10} withBorder radius={0}>
+            <Flex align={'center'} gap={5} mb={5}>
+              <FaUserCircle size={20} />
+              <Text>userName</Text>
+            </Flex>
+            <Textarea placeholder="댓글을 입력하세요." />
+            <Flex align={'center'} justify={'flex-end'} m={5} gap={5}>
+              <Text>비밀댓글</Text>
+              <IoMdUnlock size={20} />
+              <Button variant="outline" radius={0}>
+                등록
+              </Button>
+            </Flex>
+          </Paper>
+        </Container>
+      )}
+    </Flex>
+  );
+};
+
+export default Board;
diff --git a/src/components/boardPage/Board/Comment.jsx b/src/components/boardPage/Board/Comment.jsx
@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import ParentComment from './ParentComment';
+import SubComment from './SubComment';
+import { Textarea, Paper, Flex, Text, Button } from '@mantine/core';
+import { IoMdUnlock, IoMdLock } from 'react-icons/io';
+import { FaUserCircle } from 'react-icons/fa';
+import { TbRadiusBottomLeft } from 'react-icons/tb';
+
+const Comment = ({ commentId, username, content, createdAt, likeCount, likeCheck, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <ParentComment
+        commentId={commentId}
+        username={username}
+        content={content}
+        createdAt={createdAt}
+        likeCount={likeCount}
+        likeCheck={likeCheck}
+        handleClick={() => setIsOpen(!isOpen)}
+      />
+      {isOpen && (
+        <>
+          {children &&
+            children.map(({ commentId, username, content, createdAt, likeCount, likeCheck, parentId }) => (
+              <SubComment
+                key={commentId}
+                commentId={commentId}
+                username={username}
+                content={content}
+                createdAt={createdAt}
+                likeCount={likeCount}
+                likeCheck={likeCheck}
+                parentId={parentId}
+              />
+            ))}
+          <Flex direction={'column'} py={15}>
+            <Flex px={30} gap={10}>
+              <TbRadiusBottomLeft size={25} />
+              <Paper p={10} withBorder radius={0} w={'100%'} ml={20}>
+                <Flex align={'center'} gap={5} mb={5}>
+                  <FaUserCircle size={20} />
+                  <Text>userName</Text>
+                </Flex>
+                <Textarea placeholder="댓글을 입력하세요." />
+                <Flex align={'center'} justify={'flex-end'} m={5} gap={5}>
+                  <Text>비밀댓글</Text>
+                  <IoMdUnlock size={20} />
+                  <Button variant="outline" radius={0}>
+                    등록
+                  </Button>
+                </Flex>
+              </Paper>
+            </Flex>
+          </Flex>
+        </>
+      )}
+    </>
+  );
+};
+
+export default Comment;
diff --git a/src/components/boardPage/Board/Comments.jsx b/src/components/boardPage/Board/Comments.jsx
@@ -0,0 +1,31 @@
+import { commentsData } from '../../../constants/mockData';
+import Comment from './Comment';
+import { Pagination } from '@mantine/core';
+
+const Comments = () => {
+  return (
+    <>
+      {commentsData.map(({ commentId, username, content, createdAt, likeCount, likeCheck, children }) => (
+        <Comment
+          key={commentId}
+          commentId={commentId}
+          username={username}
+          content={content}
+          createdAt={createdAt}
+          likeCount={likeCount}
+          likeCheck={likeCheck}
+          children={children}
+        />
+      ))}
+      <Pagination
+        total={commentsData.length / 10 + 1}
+        color="green"
+        display={'flex'}
+        style={{ justifyContent: 'center' }}
+        py={10}
+      />
+    </>
+  );
+};
+
+export default Comments;
diff --git a/src/components/boardPage/Board/ParentComment.jsx b/src/components/boardPage/Board/ParentComment.jsx
@@ -0,0 +1,37 @@
+import { Button, Flex, Text, Divider } from '@mantine/core';
+import { FaUserCircle, FaRegHeart, FaHeart } from 'react-icons/fa';
+import formatDetailDate from '../../../utils/formatDetailDate';
+
+const ParentComment = ({ commentId, username, content, createdAt, likeCount, likeCheck, handleClick }) => {
+  const handleSubClick = () => {
+    handleClick;
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Flex direction={'column'} pt={10}>
+      <Flex align={'center'} py={5} gap={5}>
+        <FaUserCircle size={25} />
+        <Text fz={18} fw={600}>
+          {username}
+        </Text>
+      </Flex>
+      <Text>{content}</Text>
+      <Text fz={16} fw={600} c={'dark.2'}>
+        {formatDetailDate(createdAt)}
+      </Text>
+      <Flex justify={'space-between'} my={10}>
+        <Button color={'dark.2'} c={'dark.0'} variant="outline" px={10} radius={0} onClick={handleClick}>
+          답글
+        </Button>
+        <Button color={'dark.2'} c={'dark.0'} variant="outline" px={10} radius={0}>
+          {likeCheck ? <FaHeart /> : <FaRegHeart />}
+          <Text ml={5}>{likeCount}</Text>
+        </Button>
+      </Flex>
+      <Divider mt={10} />
+    </Flex>
+  );
+};
+
+export default ParentComment;
diff --git a/src/components/boardPage/Board/SubComment.jsx b/src/components/boardPage/Board/SubComment.jsx
@@ -0,0 +1,35 @@
+import { Button, Divider, Flex, Container, Text } from '@mantine/core';
+import { FaUserCircle, FaRegHeart, FaHeart } from 'react-icons/fa';
+import { TbRadiusBottomLeft } from 'react-icons/tb';
+import formatDetailDate from '../../../utils/formatDetailDate';
+
+const SubComment = ({ commentId, username, content, createdAt, likeCount, likeCheck, parentId }) => {
+  return (
+    <Flex direction={'column'} py={15}>
+      <Flex px={30}>
+        <TbRadiusBottomLeft size={25} />
+        <Container m={0} p={0} w={'100%'}>
+          <Flex justify={'space-between'}>
+            <Flex align={'center'} pl={20} py={5} gap={5}>
+              <FaUserCircle size={25} />
+              <Text fz={18} fw={600}>
+                {username}
+              </Text>
+            </Flex>
+            <Button color={'dark.2'} c={'dark.0'} variant="outline" px={10} radius={0}>
+              {likeCheck ? <FaHeart /> : <FaRegHeart />}
+              <Text ml={5}>{likeCount}</Text>
+            </Button>
+          </Flex>
+          <Text pl={20}>{content}</Text>
+          <Text pl={20} fz={16} fw={600} c={'dark.2'}>
+            {formatDetailDate(createdAt)}
+          </Text>
+        </Container>
+      </Flex>
+      <Divider mt={10} />
+    </Flex>
+  );
+};
+
+export default SubComment;
diff --git a/src/components/boardPage/Boards/BoardItem.jsx b/src/components/boardPage/Boards/BoardItem.jsx
@@ -0,0 +1,41 @@
+import { Grid, Text } from '@mantine/core';
+import formatDate from '../../../utils/formatDate';
+import { useNavigate } from 'react-router-dom';
+
+const BoardItem = ({ category, title, counts, writer, timestamp }) => {
+  const navigate = useNavigate();
+
+  return (
+    <Grid
+      py={9}
+      styles={{
+        col: {
+          display: 'flex',
+          justifyContent: 'center',
+        },
+      }}
+      onClick={() => navigate('/board')}
+      h={70}
+      pos={'relative'}
+      display={'flex'}
+      align="center">
+      <Grid.Col span={2}>
+        <Text>{category}</Text>
+      </Grid.Col>
+      <Grid.Col span={5}>
+        <Text>{title}</Text>
+      </Grid.Col>
+      <Grid.Col span={1}>
+        <Text>{counts}</Text>
+      </Grid.Col>
+      <Grid.Col span={2}>
+        <Text>{writer}</Text>
+      </Grid.Col>
+      <Grid.Col span={2}>
+        <Text>{formatDate(timestamp)}</Text>
+      </Grid.Col>
+    </Grid>
+  );
+};
+
+export default BoardItem;