From 3b02772941e5b48cee4177cd18f89fe6297c741d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=8C=ED=8C=8C?= Date: Fri, 4 Oct 2024 17:48:40 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20API=20?= =?UTF-8?q?=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 1 + package-lock.json | 10 ++++++++++ package.json | 1 + src/pages/Board.jsx | 21 +++++++++++++++++---- 4 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..ae81a04 --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +BACKEND_URL=http://localhost:8000 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4375e7f..8406965 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,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": { @@ -4700,6 +4701,15 @@ "punycode": "^2.1.0" } }, + "node_modules/url-join": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-5.0.0.tgz", + "integrity": "sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==", + "license": "MIT", + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + } + }, "node_modules/use-sync-external-store": { "version": "1.2.2", "license": "MIT", diff --git a/package.json b/package.json index 766766f..c9a6e0b 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,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": { diff --git a/src/pages/Board.jsx b/src/pages/Board.jsx index 5931b94..7d514f3 100644 --- a/src/pages/Board.jsx +++ b/src/pages/Board.jsx @@ -1,6 +1,9 @@ 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'; const Container = styled.div` width: 100%; @@ -98,6 +101,16 @@ const PostCard = ({ title, description, author, image }) => { }; export default function Board() { + const [posts, setPosts] = useState([]); + + const [tag, setTag] = useState('전체'); + + useEffect(() => { + axios.get(urlJoin(import.meta.env.BACKEND_URL, '/posts')).then((r) => { + setPosts(r.data); + }); + }, []); + return ( @@ -117,12 +130,12 @@ export default function Board() { - {Array.from({ length: 9 }).map((_, index) => ( + {posts.map((post, index) => ( ))} From 2698009a13142a9521126020d19d8f73506c83c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=8C=ED=8C=8C?= Date: Fri, 4 Oct 2024 17:48:50 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A7=88?= =?UTF-8?q?=EB=AC=B4=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/NewArticleEditor.jsx | 95 ++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) diff --git a/src/pages/NewArticleEditor.jsx b/src/pages/NewArticleEditor.jsx index fc802af..1375012 100644 --- a/src/pages/NewArticleEditor.jsx +++ b/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 ( + + + 카테고리 + + + + + + + + + + + + + + + ); } From 6cf8d27449287ebd91ac3d31e24b66a768df4745 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=8C=ED=8C=8C?= Date: Tue, 8 Oct 2024 13:45:37 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20.env=20=EC=98=88=EC=8B=9C=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.example b/.env.example index ae81a04..52596f9 100644 --- a/.env.example +++ b/.env.example @@ -1 +1 @@ -BACKEND_URL=http://localhost:8000 \ No newline at end of file +VITE_BACKEND_URL=http://localhost:8000 \ No newline at end of file From d632ca4b5fe57664b684a538a6fb0fd1109feaed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=95=8C=ED=8C=8C?= Date: Tue, 8 Oct 2024 13:48:12 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20utils/api=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Board.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/Board.jsx b/src/pages/Board.jsx index 7d514f3..8b02d84 100644 --- a/src/pages/Board.jsx +++ b/src/pages/Board.jsx @@ -4,6 +4,7 @@ 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%; @@ -106,7 +107,7 @@ export default function Board() { const [tag, setTag] = useState('전체'); useEffect(() => { - axios.get(urlJoin(import.meta.env.BACKEND_URL, '/posts')).then((r) => { + API.GET('/posts').then((r) => { setPosts(r.data); }); }, []);