Skip to content

Commit

Permalink
feat: postdetail 레이아웃 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@hwonda
hwonda committed Oct 26, 2024
1 parent cd84d76 commit ae84bce
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 70 deletions.
29 changes: 23 additions & 6 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
--accent-color: #0099CC;
--background-color: #F8F8F8;
--text-color: #333333;
--text-secondary-color: #666666;
--border-color: #CCCCCC; /* 밝은 테마의 기본 테두리 색상 */
}

Expand All @@ -17,6 +18,7 @@
--accent-color: #66A2B7;
--background-color: #121212;
--text-color: #E5E5E5;
--text-secondary-color: #B0B0B0;
--border-color: #666666; /* 다크 테마의 기본 테두리 색상 */
}

Expand All @@ -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);
Expand All @@ -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;
}
}
}
180 changes: 116 additions & 64 deletions src/components/server/posts/PostDetail.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { getTermData } from '@/utils/termsData';
import { notFound } from 'next/navigation';
import { ExternalLink } from 'lucide-react';

interface Props {
slug: string
Expand All @@ -14,77 +15,124 @@ const PostDetail = async ({ slug }: Props) => {

return (
<div>
<section className='flex justify-between items-end my-5 py-5 border-b border-gray-500'>
<section className='flex justify-between items-end my-5 py-5 border-b border-main'>
<div className='flex flex-col'>
<h1 className="text-3xl font-bold">{term.title.ko}</h1>
<p className='text-gray-500'>{term.description.short}</p>
<h1 className="text-3xl font-bold text-primary">{term.title.ko}</h1>
<p className='text-sub'>{term.description.short}</p>
</div>
<div className='flex flex-col'>
<p className='text-gray-500'><strong>{'발행일:'}</strong> {term.metadata.created_at}</p>
<p className='text-gray-500'><strong>{'수정일:'}</strong> {term.metadata.updated_at}</p>
<div className='hidden sm:flex flex-col'>
<p className='text-sub'><strong>{'발행:'}</strong> {term.metadata.created_at}</p>
<p className='text-sub'><strong>{'수정:'}</strong> {term.metadata.updated_at}</p>
</div>
</section>
<div className='grid grid-cols-[5fr_1fr] gap-2'>
<div>
<section className="my-10">
<h2 className="text-xl font-semibold mb-3">{'개념'}</h2>
<div className='block md:grid grid-cols-[5fr_1fr] gap-2 md:mr-5'>
<div className='flex gap-2 justify-end items-center sm:hidden'>
<p className='text-sub'><strong>{'발행:'}</strong> {term.metadata.created_at}</p>
<div className='w-px h-4 bg-gray-600 dark:bg-gray-300' />
<p className='text-sub'><strong>{'수정:'}</strong> {term.metadata.updated_at}</p>
</div>

<div className='sm:ml-5'>
<section className="my-10 group">
<h2 className="text-xl font-semibold mb-3 relative flex">
<span className="text-primary sm:ml-[-20px] mr-2 sm:opacity-0 group-hover:opacity-100 transition-opacity">{'#'}</span>
{'개념'}
</h2>
<p>{term.description.full}</p>
</section>

<section className="my-10">
<h2 className="text-xl font-semibold mb-3">{'난이도'}</h2>
<p><strong>{'Level:'}</strong> {term.difficulty.level} stars</p>
<p><strong>{'Description:'}</strong> {term.difficulty.description}</p>
<section className="my-10 group">
<h2 className="text-xl font-semibold mb-3">
<span className="text-primary sm:ml-[-20px] mr-2 sm:opacity-0 group-hover:opacity-100 transition-opacity">{'#'}</span>
{'난이도'}
</h2>
<p>{term.difficulty.level}{' stars'}</p>
<p>{term.difficulty.description}</p>
</section>

<section className="my-10">
<h2 className="text-xl font-semibold mb-3">{'관련성'}</h2>
<div className='grid grid-cols-[5fr_4fr_2fr_10fr] gap-2'>
<div className='col-span-1 row-span-4 flex justify-center items-center border-gray-500 border-2'>삼각형</div>
<p>직무</p>
<p>관련도</p>
<p>설명</p>
<h3 className="text-xl font-semibold">{'Data Analyst'}</h3>
<p>{term.relevance.analyst.score} stars</p>
<p>{term.relevance.analyst.description}</p>
<h3 className="text-xl font-semibold">{'Data Engineer'}</h3>
<p>{term.relevance.engineer.score} stars</p>
<p>{term.relevance.engineer.description}</p>
<h3 className="text-xl font-semibold">{'Data Scientist'}</h3>
<p>{term.relevance.scientist.score} stars</p>
<p>{term.relevance.scientist.description}</p>
<section className="my-10 group">
<h2 className="text-xl font-semibold mb-3">
<span className="text-primary sm:ml-[-20px] mr-2 sm:opacity-0 group-hover:opacity-100 transition-opacity">{'#'}</span>
{'관련성'}
</h2>
<div className='block sm:flex justify-center'>
<div className='w-[100vw-8px] sm:w-[300px] flex justify-center items-center border-main border-2 sm:mr-2'>{'삼각형'}</div>
<div className='grid grid-cols-[3fr_2fr_10fr]'>
<p className="text-lg text-sub text-center my-2 sm:m-0">{'직무'}</p>
<p className="text-lg text-sub text-center my-2 sm:m-0">{'관련도'}</p>
<p className="text-lg text-sub pl-3 my-2 sm:m-0">{'설명'}</p>

<div className="pr-2 grid grid-rows-3">
{/* <p className="text-lg text-sub text-center self-center">{'직무'}</p> */}
<h3 className="text-center self-center">{'Data Analyst'}</h3>
<h3 className="text-center self-center">{'Data Engineer'}</h3>
<h3 className="text-center self-center">{'Data Scientist'}</h3>
</div>

<div className="px-2 border-x border-custom-border grid grid-rows-3">
{/* <p className="text-lg text-sub text-center self-center">{'관련도'}</p> */}
<p className='text-center self-center'>{term.relevance.analyst.score}{' stars'}</p>
<p className='text-center self-center'>{term.relevance.engineer.score}{' stars'}</p>
<p className='text-center self-center'>{term.relevance.scientist.score}{' stars'}</p>
</div>

<div className="pl-3 grid grid-rows-3">
{/* <p className="text-lg text-sub self-center">{'설명'}</p> */}
<p className="self-center py-1">{term.relevance.analyst.description}</p>
<p className="self-center py-1">{term.relevance.engineer.description}</p>
<p className="self-center py-1">{term.relevance.scientist.description}</p>
</div>
</div>
</div>
</section>

<section className="my-10">
<h2 className="text-xl font-semibold mb-3">{'관련용어'}</h2>
<section className="my-10 group">
<h2 className="text-xl font-semibold mb-3">
<span className="text-primary sm:ml-[-20px] mr-2 sm:opacity-0 group-hover:opacity-100 transition-opacity">{'#'}</span>
{'관련용어'}
</h2>
<ul>
{term.terms.map((item, index) => (
<li key={index} className='my-2 flex items-center'>
<p className='py-1 px-2 rounded-3xl bg-[#33CFFF] text-white'>{item.term}</p>
<span className='px-2 py-1 rounded-3xl bg-accent text-white mr-2 shrink-0'>
<a
href={item.link}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 hover:text-primary"
>
{item.term}
<ExternalLink className="size-4" />
</a>
</span>
{item.description}
{'('}<a href={item.link} target="_blank" rel="noopener noreferrer" className='border-b border-gray-500'>{'Link'}</a>{')'}
</li>
))}
</ul>
</section>

<section className="my-10">
<h2 className="text-xl font-semibold mb-3">{'사용사례'}</h2>
<section className="my-10 group">
<h2 className="text-xl font-semibold mb-3">
<span className="text-primary sm:ml-[-20px] mr-2 sm:opacity-0 group-hover:opacity-100 transition-opacity">{'#'}</span>
{'사용사례'}
</h2>
<p>{term.usecase.industries.join(', ')}</p>
<p>{term.usecase.example}</p>
<p className='text-gray-500'>{term.usecase.description}</p>
<p className='text-sub'>{term.usecase.description}</p>
</section>

<section className="my-10">
<h2 className="text-xl font-semibold mb-3">{'레퍼런스'}</h2>
<section className="my-10 group">
<h2 className="text-xl font-semibold mb-3">
<span className="text-primary sm:ml-[-20px] mr-2 sm:opacity-0 group-hover:opacity-100 transition-opacity">{'#'}</span>
{'레퍼런스'}
</h2>
<div>
<h3 className="text-xl font-semibold mt-5">{'1. Tutorials'}</h3>
<ul>
{term.references.tutorials.map((tutorial, index) => (
<li key={index}>
<a className='text-lg text-[#33cfff] border-b border-[#33cfff]' href={tutorial.link} target="_blank" rel="noopener noreferrer">{tutorial.title}</a>
<p>{tutorial.platform}</p>
<a className='text-lg text-primary hyperlink' href={tutorial.link} target="_blank" rel="noopener noreferrer">{tutorial.title}</a>
<div className='text-sub'>{tutorial.platform}</div>
</li>
))}
</ul>
Expand All @@ -95,12 +143,10 @@ const PostDetail = async ({ slug }: Props) => {
{term.references.books.map((book, index) => (
<li key={index}>
<div>
<a className='text-lg text-[#33cfff] border-b border-[#33cfff]' href={book.link} target="_blank" rel="noopener noreferrer">{book.title}</a>
</div>
{' by '}{book.authors.join(', ')}{'('}{book.year}{', '}{book.publisher}{')'}
<div>
{'ISBN: '}{book.isbn}
<a className='text-lg text-primary hyperlink' href={book.link} target="_blank" rel="noopener noreferrer">{book.title}</a>
</div>
<div className='text-sub'>{' by '}{book.authors.join(', ')}{'('}{book.year}{', '}{book.publisher}{')'}</div>
<div className='text-sub'>{'ISBN: '}{book.isbn}</div>
</li>
))}
</ul>
Expand All @@ -110,13 +156,9 @@ const PostDetail = async ({ slug }: Props) => {
<ul>
{term.references.academic.map((paper, index) => (
<li key={index}>
<div>
<a className='text-lg text-[#33cfff] border-b border-[#33cfff]' href={paper.link} target="_blank" rel="noopener noreferrer">{paper.title}</a>
</div>
{paper.authors.join(', ')}{' ('}{paper.year}{') '}
<div>
{'DOI: '}{paper.doi}
</div>
<a className='text-lg text-primary hyperlink' href={paper.link} target="_blank" rel="noopener noreferrer">{paper.title}</a>
<div className='text-sub'>{paper.authors.join(', ')}{' ('}{paper.year}{') '}</div>
<div className='text-sub'>{'DOI: '}{paper.doi}</div>
</li>
))}
</ul>
Expand All @@ -126,20 +168,30 @@ const PostDetail = async ({ slug }: Props) => {
<ul>
{term.references.opensource.map((project, index) => (
<li key={index}>
<div>
<a className='text-lg text-[#33cfff] border-b border-[#33cfff]' href={project.link} target="_blank" rel="noopener noreferrer">{project.name}</a>
</div>
{project.description}
{'(License: '}{project.license}{')'}
<a className='text-lg text-primary hyperlink' href={project.link} target="_blank" rel="noopener noreferrer">{project.name}</a>
<div className='text-sub'>{project.description}</div>
<div className='text-sub'>{'(License: '}{project.license}{')'}</div>
</li>
))}
</ul>
</div>
</section>

<section className="my-10">
<h2 className="text-xl font-semibold mb-3">{'Tags'}</h2>
<p>{term.tags.join(', ')}</p>
<section className="my-10 group">
<h2 className="text-xl font-semibold mb-3">
<span className="text-primary sm:ml-[-20px] mr-2 sm:opacity-0 group-hover:opacity-100 transition-opacity">{'#'}</span>
{'Tags'}
</h2>
<div className="flex flex-wrap gap-0.5">
{term.tags.map((tag, index) => (
<button
key={index}
className="px-3 py-1 rounded-3xl bg-accent text-white mr-2"
>
{tag}
</button>
))}
</div>
</section>

{/* <section className="my-10">
Expand All @@ -154,9 +206,9 @@ const PostDetail = async ({ slug }: Props) => {
<p>{term.publish ? 'Published' : 'Not Published'}</p>
</section> */}
</div>
<div className='sticky top-[120px] h-32 border border-gray-500'>
TOC
</div>
<div className='sticky mt-10 top-[150px] h-32 border border-main hidden md:block'>
{'TOC'}
</div>
</div>
</div>
);
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ const config: Config = {
content: ['./src/**/*.{ts,tsx,mdx}'],
theme: {
extend: {
colors: {
'custom-border': 'var(--border-color)',
},
},
},
plugins: [],
Expand Down

0 comments on commit ae84bce

Please sign in to comment.