From 2c8985d4f671e2661156659a30821f9cb3e52b24 Mon Sep 17 00:00:00 2001 From: designDefined Date: Sun, 16 Jun 2024 21:58:34 +0900 Subject: [PATCH 01/14] feat: article get --- .../app/article/[articleId]/ArticleDetail.css | 11 ++ client/src/app/article/[articleId]/page.tsx | 106 ++++++++++++++++++ client/src/app/article/write/ArticleWrite.css | 0 client/src/app/article/write/page.tsx | 0 4 files changed, 117 insertions(+) create mode 100644 client/src/app/article/[articleId]/ArticleDetail.css create mode 100644 client/src/app/article/[articleId]/page.tsx create mode 100644 client/src/app/article/write/ArticleWrite.css create mode 100644 client/src/app/article/write/page.tsx diff --git a/client/src/app/article/[articleId]/ArticleDetail.css b/client/src/app/article/[articleId]/ArticleDetail.css new file mode 100644 index 0000000..5b46591 --- /dev/null +++ b/client/src/app/article/[articleId]/ArticleDetail.css @@ -0,0 +1,11 @@ +.page { + background-color: black; +} + +.header { + margin: 0 0 var(--primitives_spacing-4) 0; +} + +.body { + color: white; +} diff --git a/client/src/app/article/[articleId]/page.tsx b/client/src/app/article/[articleId]/page.tsx new file mode 100644 index 0000000..c69fe1b --- /dev/null +++ b/client/src/app/article/[articleId]/page.tsx @@ -0,0 +1,106 @@ +"use client"; + +import "./ArticleDetail.css"; +import Header from "@components/Header"; + +import Footer from "@components/Footer"; +import { useEffect, useState } from "react"; +import { z } from "zod"; + +type ArticleDetailProps = { + params: { + articleId: number; + }; +}; + +export default function ArticleDetail(props: ArticleDetailProps) { + const id = props.params.articleId; + const [result, setResult] = useState(""); + + useEffect(() => { + fetch("http://localhost:8080/articles/" + id) + .then((res) => res.json()) + .then(z.object({ content: z.string() }).parse) + .then(({ content }) => setResult(content)); + }, []); + + return ( +
+
+
+
+
{result}
+
+
+
+
+ ); +} + +// 서버 데이터로 대체 예정입니다. +const samplePostData = { + id: 1, + title: "지원 사업 관련 질문 있습니다!", + content: + "나무들이 서로 속삭이는 듯한 소리가 숲속을 가득 채우고 있었다. 간간히 부는 바람이 나뭇잎을 흔들며, 그 소리는 마치 오래된 이야기를 들려주는 것 같았다. 이 숲의 한가운데서, 한 소년이 고개를 들어 하늘을 바라보았다. 햇빛이 나뭇가지 사이로 비치며, 그의 얼굴에 따스한 빛을 더했다. 소년은 숲이 주는 평화로움 속에서 잠시의 여유를 즐기며, 모험을 꿈꾸었다. 이 순간, 그는 어떠한 걱정도, 두려움도 잊고 오직 순수한 기쁨을 느끼며, 자연과 하나가 되었다.", + postType: "INFORMATION" as const, + likesCount: 20, + viewsCount: 100, + commentsCount: 5, + createdTime: new Date("2021-08-01"), + lastModifiedTime: new Date("2021-08-01"), + createdUser: { + id: 1, + name: "날아오르는 고라파덕", + thumbnailImage: null, + }, + tags: [ + { + id: 1, + name: "정보", + }, + { + id: 2, + name: "월간Best", + }, + ], +}; + +const sampleCommentData = [ + { + id: 1, + content: "너무 좋은 글이네요! 감사합니다.", + likesCount: 20, + createdTime: new Date("2021-08-01"), + lastModifiedTime: new Date("2021-08-01"), + createdUser: { + id: 1, + name: "날아오르는 고라파덕", + thumbnailImage: null, + }, + }, + { + id: 2, + content: "너무 좋은 글이네요! 감사합니다.", + likesCount: 20, + createdTime: new Date("2021-08-01"), + lastModifiedTime: new Date("2021-08-01"), + createdUser: { + id: 1, + name: "날아오르는 고라파덕", + thumbnailImage: null, + }, + }, + { + id: 3, + content: "너무 좋은 글이네요! 감사합니다.", + likesCount: 20, + createdTime: new Date("2021-08-01"), + lastModifiedTime: new Date("2021-08-01"), + createdUser: { + id: 1, + name: "날아오르는 고라파덕", + thumbnailImage: null, + }, + }, +]; diff --git a/client/src/app/article/write/ArticleWrite.css b/client/src/app/article/write/ArticleWrite.css new file mode 100644 index 0000000..e69de29 diff --git a/client/src/app/article/write/page.tsx b/client/src/app/article/write/page.tsx new file mode 100644 index 0000000..e69de29 From f9147284ef1fafab6740c97ea053a9453c882c22 Mon Sep 17 00:00:00 2001 From: nuagenic Date: Sun, 16 Jun 2024 22:04:49 +0900 Subject: [PATCH 02/14] feat: Add styles to article content(sample) --- client/src/app/article/[articleId]/ArticleDetail.css | 2 ++ client/src/app/article/[articleId]/page.tsx | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/client/src/app/article/[articleId]/ArticleDetail.css b/client/src/app/article/[articleId]/ArticleDetail.css index 5b46591..8251129 100644 --- a/client/src/app/article/[articleId]/ArticleDetail.css +++ b/client/src/app/article/[articleId]/ArticleDetail.css @@ -8,4 +8,6 @@ .body { color: white; + padding: 0 24%; + margin-bottom: var(--primitives_spacing-10); } diff --git a/client/src/app/article/[articleId]/page.tsx b/client/src/app/article/[articleId]/page.tsx index c69fe1b..3384509 100644 --- a/client/src/app/article/[articleId]/page.tsx +++ b/client/src/app/article/[articleId]/page.tsx @@ -6,6 +6,7 @@ import Header from "@components/Header"; import Footer from "@components/Footer"; import { useEffect, useState } from "react"; import { z } from "zod"; +import typography from "@styles/typography.module.css"; type ArticleDetailProps = { params: { @@ -29,7 +30,9 @@ export default function ArticleDetail(props: ArticleDetailProps) {
-
{result}
+
+
{result}
+
From db25527d78c67d5e4796db73c0a85557de92972b Mon Sep 17 00:00:00 2001 From: designDefined Date: Sun, 16 Jun 2024 22:16:50 +0900 Subject: [PATCH 03/14] feat: Article write --- client/src/app/article/write/ArticleWrite.css | 11 +++++ client/src/app/article/write/page.tsx | 46 +++++++++++++++++++ server/src/routers/articles/index.ts | 2 + 3 files changed, 59 insertions(+) diff --git a/client/src/app/article/write/ArticleWrite.css b/client/src/app/article/write/ArticleWrite.css index e69de29..5b46591 100644 --- a/client/src/app/article/write/ArticleWrite.css +++ b/client/src/app/article/write/ArticleWrite.css @@ -0,0 +1,11 @@ +.page { + background-color: black; +} + +.header { + margin: 0 0 var(--primitives_spacing-4) 0; +} + +.body { + color: white; +} diff --git a/client/src/app/article/write/page.tsx b/client/src/app/article/write/page.tsx index e69de29..8224843 100644 --- a/client/src/app/article/write/page.tsx +++ b/client/src/app/article/write/page.tsx @@ -0,0 +1,46 @@ +"use client"; + +import "./ArticleWrite.css"; +import Header from "@components/Header"; + +import Footer from "@components/Footer"; +import { useCallback, useState } from "react"; +import { useRouter } from "next/navigation"; +import { z } from "zod"; + +export default function ArticleWrite() { + const [data, setData] = useState(""); + const router = useRouter(); + + const onSubmit = useCallback(() => { + fetch("http://localhost:8080/articles", { + method: "POST", + body: JSON.stringify({ content: data }), + headers: { + "Content-Type": "application/json", + }, + }) + .then((res) => res.json()) + .then( + z.object({ + insertedId: z.number(), + }).parse, + ) + .then(({ insertedId }) => router.push(`/article/${insertedId}`)); + }, [data, router]); + + return ( +
+
+
+
+
+ setData(e.target.value)} /> + +
+
+
+
+
+ ); +} diff --git a/server/src/routers/articles/index.ts b/server/src/routers/articles/index.ts index d425894..a322edd 100644 --- a/server/src/routers/articles/index.ts +++ b/server/src/routers/articles/index.ts @@ -32,7 +32,9 @@ router.get( router.post( "/", wrap(async (req, res) => { + console.log(req); const { content } = z.object({ content: z.string() }).parse(req.body); + const insertedId = await ( await connection ) From e2f58cbfe8b94e99a515d85ae281e86e497c3d66 Mon Sep 17 00:00:00 2001 From: nuagenic Date: Sun, 16 Jun 2024 22:22:41 +0900 Subject: [PATCH 04/14] feat: Add styles for article write(sample) --- client/src/app/article/write/ArticleWrite.css | 21 +++++++++++++++++++ client/src/app/article/write/page.tsx | 8 +++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/client/src/app/article/write/ArticleWrite.css b/client/src/app/article/write/ArticleWrite.css index 5b46591..8c2ef0a 100644 --- a/client/src/app/article/write/ArticleWrite.css +++ b/client/src/app/article/write/ArticleWrite.css @@ -8,4 +8,25 @@ .body { color: white; + padding: 0 24%; + margin-bottom: var(--primitives_spacing-10); +} + +.body input { + border: none; + outline: none; + background-color: var(--surface-primary); + padding: 0; + height: 50px; + margin-right: var(--primitives_spacing-4); +} + +.body button { + border: none; + outline: none; + cursor: pointer; + background-color: var(--surface-primary); + color: var(--text-secondary); + text-align: left; + padding: 10px; } diff --git a/client/src/app/article/write/page.tsx b/client/src/app/article/write/page.tsx index 8224843..0c09522 100644 --- a/client/src/app/article/write/page.tsx +++ b/client/src/app/article/write/page.tsx @@ -8,6 +8,8 @@ import { useCallback, useState } from "react"; import { useRouter } from "next/navigation"; import { z } from "zod"; +import typography from "@styles/typography.module.css"; + export default function ArticleWrite() { const [data, setData] = useState(""); const router = useRouter(); @@ -35,8 +37,10 @@ export default function ArticleWrite() {
- setData(e.target.value)} /> - +
+ setData(e.target.value)} /> + +