From ae84bceadfce6a31c395747897319ddae1d94287 Mon Sep 17 00:00:00 2001 From: judahwon Date: Sat, 26 Oct 2024 15:08:21 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20postdetail=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 29 +++- src/components/server/posts/PostDetail.tsx | 180 +++++++++++++-------- tailwind.config.ts | 3 + 3 files changed, 142 insertions(+), 70 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 896e8d4..82d327c 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,6 +8,7 @@ --accent-color: #0099CC; --background-color: #F8F8F8; --text-color: #333333; + --text-secondary-color: #666666; --border-color: #CCCCCC; /* 밝은 테마의 기본 테두리 색상 */ } @@ -17,6 +18,7 @@ --accent-color: #66A2B7; --background-color: #121212; --text-color: #E5E5E5; + --text-secondary-color: #B0B0B0; --border-color: #666666; /* 다크 테마의 기본 테두리 색상 */ } @@ -43,7 +45,7 @@ color: var(--primary-color); } .text-sub { - color: var(--secondary-color); + color: var(--text-secondary-color); } .text-accent { color: var(--accent-color); @@ -56,8 +58,23 @@ .h-content { height: calc(100vh - 64px); } -/* body { - color: var(--foreground); - background: var(--background); - font-family: Arial, Helvetica, sans-serif; -} */ + +.hyperlink { + color: var(--accent-color); + text-decoration: underline; + &:hover { + color: var(--primary-color); + font-weight: 700; + } +} + +@layer base { + @media (min-width: 640px) { + section > :not(h2) { + margin-left: 8px; + } + h2{ + font-weight: 700; + } + } +} diff --git a/src/components/server/posts/PostDetail.tsx b/src/components/server/posts/PostDetail.tsx index fa510db..5d85a9f 100644 --- a/src/components/server/posts/PostDetail.tsx +++ b/src/components/server/posts/PostDetail.tsx @@ -1,5 +1,6 @@ import { getTermData } from '@/utils/termsData'; import { notFound } from 'next/navigation'; +import { ExternalLink } from 'lucide-react'; interface Props { slug: string @@ -14,77 +15,124 @@ const PostDetail = async ({ slug }: Props) => { return (
-
+
-

{term.title.ko}

-

{term.description.short}

+

{term.title.ko}

+

{term.description.short}

-
-

{'발행일:'} {term.metadata.created_at}

-

{'수정일:'} {term.metadata.updated_at}

+
+

{'발행:'} {term.metadata.created_at}

+

{'수정:'} {term.metadata.updated_at}

-
-
-
-

{'개념'}

+
+
+

{'발행:'} {term.metadata.created_at}

+
+

{'수정:'} {term.metadata.updated_at}

+
+ +
+
+

+ {'#'} + {'개념'} +

{term.description.full}

-
-

{'난이도'}

-

{'Level:'} {term.difficulty.level} stars

-

{'Description:'} {term.difficulty.description}

+
+

+ {'#'} + {'난이도'} +

+

{term.difficulty.level}{' stars'}

+

{term.difficulty.description}

-
-

{'관련성'}

-
-
삼각형
-

직무

-

관련도

-

설명

-

{'Data Analyst'}

-

{term.relevance.analyst.score} stars

-

{term.relevance.analyst.description}

-

{'Data Engineer'}

-

{term.relevance.engineer.score} stars

-

{term.relevance.engineer.description}

-

{'Data Scientist'}

-

{term.relevance.scientist.score} stars

-

{term.relevance.scientist.description}

+
+

+ {'#'} + {'관련성'} +

+
+
{'삼각형'}
+
+

{'직무'}

+

{'관련도'}

+

{'설명'}

+ +
+ {/*

{'직무'}

*/} +

{'Data Analyst'}

+

{'Data Engineer'}

+

{'Data Scientist'}

+
+ +
+ {/*

{'관련도'}

*/} +

{term.relevance.analyst.score}{' stars'}

+

{term.relevance.engineer.score}{' stars'}

+

{term.relevance.scientist.score}{' stars'}

+
+ +
+ {/*

{'설명'}

*/} +

{term.relevance.analyst.description}

+

{term.relevance.engineer.description}

+

{term.relevance.scientist.description}

+
+
-
-

{'관련용어'}

+
+

+ {'#'} + {'관련용어'} +

-
-

{'사용사례'}

+
+

+ {'#'} + {'사용사례'} +

{term.usecase.industries.join(', ')}

{term.usecase.example}

-

{term.usecase.description}

+

{term.usecase.description}

-
-

{'레퍼런스'}

+
+

+ {'#'} + {'레퍼런스'} +

{'1. Tutorials'}

@@ -95,12 +143,10 @@ const PostDetail = async ({ slug }: Props) => { {term.references.books.map((book, index) => (
  • - {' by '}{book.authors.join(', ')}{'('}{book.year}{', '}{book.publisher}{')'} -
    - {'ISBN: '}{book.isbn} + {book.title}
    +
    {' by '}{book.authors.join(', ')}{'('}{book.year}{', '}{book.publisher}{')'}
    +
    {'ISBN: '}{book.isbn}
    • ))} @@ -110,13 +156,9 @@ const PostDetail = async ({ slug }: Props) => {
      {term.references.academic.map((paper, index) => (
    • - - {paper.authors.join(', ')}{' ('}{paper.year}{') '} -
      - {'DOI: '}{paper.doi} -
      + {paper.title} +
      {paper.authors.join(', ')}{' ('}{paper.year}{') '}
      +
      {'DOI: '}{paper.doi}
      • ))}
    @@ -126,20 +168,30 @@ const PostDetail = async ({ slug }: Props) => {
      {term.references.opensource.map((project, index) => (
    • - - {project.description} - {'(License: '}{project.license}{')'} + {project.name} +
      {project.description}
      +
      {'(License: '}{project.license}{')'}
      • ))}
    -
    -

    {'Tags'}

    -

    {term.tags.join(', ')}

    +
    +

    + {'#'} + {'Tags'} +

    +
    + {term.tags.map((tag, index) => ( + + ))} +
    {/*
    @@ -154,9 +206,9 @@ const PostDetail = async ({ slug }: Props) => {

    {term.publish ? 'Published' : 'Not Published'}

    */}
    -
    - TOC -
    +
    + {'TOC'} +
    ); diff --git a/tailwind.config.ts b/tailwind.config.ts index 7399f91..609400f 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,6 +5,9 @@ const config: Config = { content: ['./src/**/*.{ts,tsx,mdx}'], theme: { extend: { + colors: { + 'custom-border': 'var(--border-color)', + }, }, }, plugins: [],