feat(main): Add main page #152
Conversation
Jay-WKJun
requested review from
Seung-wan,
endmoseung,
SeolJaeHyeok and
ding-co
There was a problem hiding this comment.
๊ฒฝ์ค๋ ๊ณ ์ ๋ง์ผ์
จ์ต๋๋ค!
์ ๋ vanila extract ์ ์ฉ์ ๋ฏธ๋ค๋๋๋ฐ ๋๋จํ์ญ๋๋ค.. ใ
ใ
์ฝ๋ ๋๋ฌด ์๋ดค๊ณ ๊ถ๊ธํ๊ฑฐ ๋ช๊ฐ ์ ์ด๋จ์ด์ฉ!!
++
์ ๊ณ ๋๋ ํ์ฌ ๊ณ์ ์ด์๋ค์.. @SeolJaeHyeok ์ด๊ฑธ๋ก ํ๋ค๊ณ ์๊ฐํด์ฃผ์ธ์..
| import React, { Suspense } from 'react'; | ||
|
|
||
| import { ArticleSummary } from '@/components'; | ||
| import { ArticlesApi } from '@/gen'; |
There was a problem hiding this comment.
NIT: /gen ๋๋ ํ ๋ฆฌ๋ฅผ git ignore ์์ผ์ฃผ์ ๊ฑฐ ๊ฐ์๋ฐ ํน์ ์ด์ ๊ฐ ๋ฌด์์ธ์ง ๊ถ๊ธํด์!
There was a problem hiding this comment.
gen ๋ถ๋ถ์ ๋ฒ์ ์ ๋ฐ๋ผ ๋ณ๊ฒฝ์ด ์์ ์ ์์ต๋๋ค. ๋ฐ๋ผ์, node_modules์ฒ๋ผ gitignore๋ก ๊ด๋ฆฌํด์ฃผ๋๊ฒ ์ต์ ์ด๋ผ๊ณ ์๊ฐํ์ต๋๋ค.
| <Suspense> | ||
| <section> | ||
| {articles.map((article) => { | ||
| return ( | ||
| <ArticleSummary | ||
| key={`${article.title}-${article.author}-${article.createdAt}`} | ||
| article={article} | ||
| /> | ||
| ); | ||
| })} | ||
| </section> | ||
| </Suspense> |
There was a problem hiding this comment.
ArticleSummary ์ปดํฌ๋ํธ๋ฅผ ๋ณด๋ Suspense๊ฐ ๊ฐ์งํ ๋งํ ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์๋๊ฑฐ ๊ฐ์๋ฐ ์ ๋ถ๋ถ์ด ์ ๋๋ก ๋์ํ๋๊ฑธ๊น์?!?
There was a problem hiding this comment.
์ ๋ต ใ ใ ใ ๊ทธ ๋ถ๋ถ์ ์๊ฐํ์ง ์๊ณ ์ฐ์ Suspense๋ง ๊ฑธ์ด๋์ต๋๋ค. ใ ใ
src/app/page/Feeds.server.tsx
Outdated
| const feeds = (await articleApi.getArticles()).articles; | ||
|
|
||
| return ( | ||
| <Suspense> |
There was a problem hiding this comment.
Server Component๋ก Suspense๋ฅผ ์ฌ์ฉํ์ จ๋๋ฐ Next App Router์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํด์ฃผ๋ Loading ์ปดํฌ๋ํธ์๋ ์ด๋ป๊ฒ ์ ์กฐํฉํ ์ ์์๊น์.
There was a problem hiding this comment.
์,,, ์์งํ ๋ง์๋๋ฆฌ๋ฉด ์ ๋ ์์ง ์ ์ฌ์ฉํ ์๊ฐ ์์ด์ ๊ทธ๋ฅ ๋ ์ํ์ ๋๋ค ใ ใ
์ฐ์ ์ ์ฌ๊ธฐ์ Suspense๋ฅผ ๋ ๊ฒ์ด๋ค! ๋ผ๊ณ ๋ช ์ํด๋๋ ์ ๋๋ก ์ฝ๋๋ง ๋๋์ต๋๋ค.
| @@ -14,6 +14,9 @@ importers: | |||
| '@vanilla-extract/css': | |||
| specifier: ^1.13.0 | |||
| version: 1.13.0 | |||
| date-fns: | |||
There was a problem hiding this comment.
date-fns์ dayjs ๊ฐ ์์ฆ ๋ง์ด ์ฐ๋ ๊ฒ ๊ฐ์๋ฐ date-fns ์์ฃผ ์ฌ์ฉํ์๋์ฉ
There was a problem hiding this comment.
๋ต ์ date-fns ๋ง์ด ์ฌ์ฉํฉ๋๋ค. tree-shaking๋ ์ง์ํด์ฃผ๊ณ ๋ถ์กฑํ ๊ฒ ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๊ณ ์๊ฐ๋์์ ใ ใ
|
|
||
| ํญ์ ์๊ฐํ๋ฉด์ ๋ ๋์ ๋ฐฉ๋ฒ๊ณผ ์ฑ๋ฅ ์ธก์ ํ๋ ๋ฐฉ๋ฒ์ ์ตํ๊ธฐ. | ||
|
|
||
| - Vim ์ตํ๊ธฐ |
There was a problem hiding this comment.
Vim ์ ๋ณตํด๋ณด๊ฒ ์ต๋๋ค ๐
src/app/layout.tsx
Outdated
| <nav className={navBar}> | ||
| <h1 className={titleBanner}> | ||
| <Link href="/">Conduit</Link> | ||
| </h1> | ||
| <ul className={headControllers}> | ||
| <li className={controlButton}>Home</li> | ||
| <li className={controlButton}>New Article</li> | ||
| <li className={controlButton}>Setting</li> | ||
| <li className={controlButton}>Profile</li> | ||
| </ul> | ||
| </nav> |
There was a problem hiding this comment.
NavBar ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํด์ค๋ ์ข์ ๊ฒ ๊ฐ๋ค์!
๐ ์ด์ ๋งํฌ
๐ ์์ ๋ฐฐ๊ฒฝ
๋ฉ์ธํ์ด์ง๋ฅผ ์ถ๊ฐํฉ๋๋ค.
client side์ interaction์ ์ถํ์ ์ถ๊ฐํ ์์ ์ ๋๋ค. (with react-query)
์์ง login ๋ก์ง์ด ์์ด login ์ฌ๋ถ์ ๋ฐ๋ฅธ header์ ๋ด์ฉ ๋ณํ๋ ์์ง ๊ตฌํํ์ง ์์์ต๋๋ค.
๐ ๏ธ ๊ตฌํ ๋ด์ฉ
๐ก ์ฐธ๊ณ ์ฌํญ
๐ผ๏ธ ์คํฌ๋ฆฐ์ท