feat: 게시글 목록 페이지 API 연동 & 게시글 작성 페이지 UI 마무리

.env.example

@@ -1 +1 @@
-VITE_BACKEND_URL="URL_HERE
+VITE_BACKEND_URL=http://localhost:8000

package.json

@@ -25,6 +25,7 @@
     "react-router-dom": "^6.25.1",
     "react-transition-group": "^4.4.5",
     "styled-components": "^6.1.12",
+    "url-join": "^5.0.0",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

src/pages/Board.jsx

@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 import { Button } from '../components/forms/Button';
 import { Text } from '../components/typograph/Text';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import urlJoin from 'url-join';
+import { API } from '../utils/api';
 
 const Container = styled.div`
   width: 100%;
@@ -98,6 +102,16 @@ const PostCard = ({ title, description, author, image }) => {
 };
 
 export default function Board() {
+  const [posts, setPosts] = useState([]);
+
+  const [tag, setTag] = useState('전체');
+
+  useEffect(() => {
+    API.GET('/posts').then((r) => {
+      setPosts(r.data);
+    });
+  }, []);
+
   return (
     <Container>
       <TitleBox>
@@ -117,12 +131,12 @@ export default function Board() {
         </Button>
       </ButtonGroup>
       <PostItems>
-        {Array.from({ length: 9 }).map((_, index) => (
+        {posts.map((post, index) => (
           <PostCard
             key={index}
-            title="여기에 제목 입력"
-            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit....."
-            author="KERT 관리자"
+            title={post.title}
+            description={post.content}
+            author={post.admin_id}
             image={`https://picsum.photos/200?random=${index}`}
           />
         ))}

src/pages/NewArticleEditor.jsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { useEffect } from 'react';
 import useTheme from '../hooks/useTheme';
 
+import { Text } from '../components/typograph/Text';
 import { Editor } from '@toast-ui/react-editor';
 import '@toast-ui/editor/dist/toastui-editor.css';
 import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
@@ -25,6 +26,7 @@ import 'prismjs/components/prism-jsx.min'; // JSX 언어 지원을 포함합니
 
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; // 코드 블럭에 줄 번호를 추가하기 위해 이 줄을 추가합니다
 import 'prismjs/plugins/line-numbers/prism-line-numbers.min';
+import { Button } from '../components/forms/Button';
 
 const Container = styled.div`
   width: 100%;
@@ -46,6 +48,81 @@ const Container = styled.div`
   }
 `;
 
+const ArticleHeader = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  margin-bottom: 1rem;
+  gap: 1rem;
+  width: 100%;
+`;
+
+const ArticleTitleGroup = styled.div`
+  padding: 0.25rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.5rem;
+  width: 100%;
+`;
+
+const ArticleHorizontalLine = styled.hr`
+  width: 100%;
+  margin: 1.5rem 0;
+  border: 1px solid #282c30;
+`;
+
+const TitleInput = styled.input`
+  font-size: 30px;
+  font-weight: 800;
+  background: none;
+  border: 1px solid transparent;
+
+  width: 100%;
+
+  color: var(--primary-text-color);
+  outline: none;
+
+  transition: all 0.2s ease-in-out;
+  padding: 0.3rem 0;
+
+  &:focus {
+    border-bottom: 1px solid var(--primary-text-color);
+  }
+`;
+
+const DescriptionInput = styled.input`
+  font-size: 15px;
+  font-weight: normal;
+  background: none;
+  border: none;
+  width: 100%;
+  outline: none;
+
+  color: var(--secondary-text-color);
+`;
+
+const BottomBarWrapper = styled.div`
+  margin-bottom: 2.5rem;
+`;
+
+const BottomBarContainer = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  gap: 1rem;
+  justify-content: end;
+
+  background-color: black;
+  padding: 1rem 5rem;
+
+  z-index: 100;
+`;
+
 export default function NewArticle() {
   const theme = useTheme();
 
@@ -72,6 +149,17 @@ export default function NewArticle() {
 
   return (
     <Container>
+      <ArticleHeader>
+        <Text size="18px" weight="bold" color="--secondary-text-color">
+          카테고리
+        </Text>
+        <ArticleTitleGroup>
+          <TitleInput placeholder="제목을 입력하세요" />
+          <DescriptionInput placeholder="카드에 표시될 설명을 입력하세요" />
+        </ArticleTitleGroup>
+      </ArticleHeader>
+      <ArticleHorizontalLine />
+
       <Editor
         height="600px"
         initialEditType="wysiwyg"
@@ -81,6 +169,13 @@ export default function NewArticle() {
         useCommandShortcut={false}
         plugins={[colorSyntax, [codeSyntaxHighlight, { highlighter: Prism }]]}
       />
+
+      <BottomBarWrapper>
+        <BottomBarContainer>
+          <Button type="translucent">취소</Button>
+          <Button>글 게시</Button>
+        </BottomBarContainer>
+      </BottomBarWrapper>
     </Container>
   );
 }