jds-wikipage
โโ src
โ โโ app
โ โ โโ (home)
โ โ โโ editor
โ โ โโ post-details
โ โ โโ layout.module.scss
โ โ โโ layout.tsx
โ โโ components
โ โ โโ Button
โ โ โโ Header
โ โ โโ Loader
โ โ โโ MarkdownViewer
โ โ โโ Pagination
โ โ โโ Post
โ โ โโ PostItem
โ โ โโ PostList
โ โโ mock
โ โ โโ mock.ts
โ โโ redux
โ โ โโ Providers
โ โ โโ postSlice.ts
โ โ โโ store.ts
โ โโ styles
โ โ โโ _global.scss
โ โ โโ _reset.scss
โ โ โโ _variables.scss
โ โ โโ mixins
โ โ โโ _text.scss
โ โโ types
โ โโ utils
โ ๋ชจ๋ํ๋ ๋์์ธ ๋จ์์ ๊ธฐ๋ฅ ๊ฐ๋ฐ
-
์ปดํฌ๋ํธ ๋จ์
๋ก ๋๋์ด ๊ฐ๋ฐํจ์ผ๋ก์จ์ ์ง ๋ณด์์ฑ
์ ๊ณ ๋ คํ์ต๋๋ค.- Button ์ปดํฌ๋ํธ, Header ์ปดํฌ๋ํธ, PostList ์ปดํฌ๋ํธ, PostItem ์ปดํฌ๋ํธ, MarkdownViewer ์ปดํฌ๋ํธ, Pagination ์ปดํฌ๋ํธ, Loader ์ปดํฌ๋ํธ
-
๋ค์ํ ์ฌ์ฉ ์ํฉ์ ๋์ํ๋
์ ์ฐ
ํ๊ณํ์ฅ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ
๋ฅผ ์ค๊ณํ์ต๋๋ค.-
Button ์ปดํฌ๋ํธ, Loader ์ปดํฌ๋ํธ
-
icon, text, children
๋ฑ์ํ๋กํผํฐ
๋ก ๋ฐ์ ํ๋ก์ ํธ ์ ์ฒด์์์ฌ์ฌ์ฉ
๋๋๋ก ๊ตฌํํ์ต๋๋ค. -
classnames
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํดcss์ ํ์ฅ
์ด ๊ฐ๋ฅํ๋๋ก ๊ตฌํํ์ต๋๋ค.
-
-
โ redux toolkit ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉํด ์ ์ญ ์ํ ๊ด๋ฆฌ
post ๊ด๋ จ ๋ฐ์ดํฐ
๋์ ์ญ์
์ผ๋ก ๊ด๋ฆฌ๋์ด์ผ ํ ๊ฐ์ผ๋ก ํ๋จํ์ฌ redux์์ ์์ฑ ๋ฐ ์ ์ฉํ์ต๋๋ค.
โ home / editor / post-details ํ์ด์ง ๊ฐ๋ฐ
โ๏ธ home ํ์ด์ง
- post ์์ดํ ์๋ title, subTitle์ด ๋ณด์ฌ์ง๊ณ , subTitle์ ๊ฒฝ์ฐ ๋ ธ์ถ๋๋ ๋จ์ด์ ์๋ฅผ 30๊ฐ๋ก ์ ํํ์ต๋๋ค.
Pagination
์ ๊ตฌํํ์ฌ ํ ํ์ด์ง ๋น 5๊ฐ์ ๊ฒ์๊ธ์ด ๋ ธ์ถ๋๋๋ก ๊ตฌํํ์ต๋๋ค.
โ๏ธ editor ํ์ด์ง
redux
์์ ์์ฑํ post ๊ด๋ จ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ต๋๋ค.markdown-it
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํดMarkdown ํ์์ ํ ์คํธ๋ฅผ ํ์ฑ
ํ๊ณHTML๋ก ๋ณํ
ํ์ต๋๋ค.react-markdown-editor-lite
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด ์ฌ์ฉ์๊ฐ Markdown ํ ์คํธ๋ฅผ ์ ๋ ฅํ๋ฉด ์ด๋ฅผ ์ค์๊ฐ์ผ๋ก ๋ฏธ๋ฆฌ๋ณด๊ธฐํ ์ ์๋ ์๋ํฐ๋ฅผ ๊ตฌํํ์ต๋๋ค.
โ๏ธ post-details ํ์ด์ง
react-markdown
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํดMarkdown ํ์์ ํ ์คํธ
๋ฅผReact ๊ตฌ์ฑ ์์๋ก ๋ณํ
ํ์ฌ ๋ ๋๋งํ์ต๋๋ค.rehype
๋ผ์ด๋ธ๋ฌ๋ฆฌ์ rehypeRaw ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํด Markdown ๋ด์์์ง์ HTML๋ฅผ ์ฝ์
ํ ์ ์๋๋ก ํ์ต๋๋ค.- Markdown ๋ด์์ ์ฝ์
๋ ์ด๋ฏธ์ง์ ๊ฒฝ์ฐ Next.js์
<Image> ํ๊ทธ๋ก ๊ต์ฒด
ํด์ด๋ฏธ์ง ์ต์ ํ
๊ฐ ๋๋๋ก ๊ตฌํํ์ต๋๋ค.
โ SCSS๋ฅผ ์ฌ์ฉํ ์คํ์ผ๋ง ์์
-
์ค์ฒฉ(Nesting)๊ตฌ๋ฌธ์ ํ์ฉ
ํ์ฌ ์ฝ๋์๊ฐ๋ ์ฑ
์ ๋์์ต๋๋ค. -
variable
์ ์ฌ์ฉํด ์คํ์ผ์์ผ๊ด์ฑ
๊ณผ์ ์ง ๋ณด์์ฑ
์ ํฅ์์์ผฐ์ต๋๋ค. -
mixin
์ ์ฌ์ฉํดํ ์คํธ ์คํ์ผ
์ ์ ์ํด์ฌ์ฌ์ฉ์ฑ
์ ๋์์ต๋๋ค.
โ UI/UX
Loader ์ปดํฌ๋ํธ
๋ฅผ ์ถ๊ฐ์ ์ผ๋ก ๊ตฌํํ์ฌUI/UX
๋ฅผ ํฅ์์์ผฐ์ต๋๋ค.
ํ๊ทธ | ์ค๋ช |
---|---|
feat | ์๋ก์ด ๊ธฐ๋ฅ์ ์ถ๊ฐํ ๊ฒฝ์ฐ |
chore | ํจํค์ง ๋งค๋์ ์ค์ ๋ฑ ์ฌ๋ฌ๊ฐ์ง ๊ธฐ๋ฅ๊ณผ ๋ฌด๊ดํ ๋ถ๋ถ ๋ค์ ์์ , ์ถ๊ฐ ํ๋ ๊ฒฝ์ฐ |
error | ๋ฒ๊ทธ๋ฅผ ๊ณ ์น๊ฒฝ์ฐ |
HOTFIX | ์น๋ช ์ ์ธ ๋ฒ๊ทธ ์์ , ์ด์์ค ๋น ๋ฅธ ์์ ์ด ํ์ํ ๊ฒฝ์ฐ |
design | CSS ๋ฑ ์ฌ์ฉ์ UI ๋์์ธ ๋ณ๊ฒฝ |
style | ์ฝ๋ ํฌ๋งท ๋ณ๊ฒฝ, ์ธ๋ฏธ์ฝ๋ก ๋๋ฝ ๋ฑ ๊ธฐ๋ฅ์์ ์ฝ๋ ์์ ์ด ์๋ ๊ฒฝ์ฐ |
comment | ์ฃผ์ ์ถ๊ฐ ๋ฐ ๋ณ๊ฒฝ |
docs | ๋ฌธ์๋ฅผ ์์ ํ ๊ฒฝ์ฐ |
refactor | ํ๋ก๋์ ์ฝ๋ ๋ฆฌํฉํ ๋ง |
rename | ํ์ผ๋ช ์ ์์ ํ๊ฑฐ๋ ์ฎ๊ธฐ๋ ์์ |
remove | ํ์ผ์ ์ญ์ ํ๋ ์์ |
test | Test์ฝ๋ ์ถ๊ฐ |
# ๋ ํฌ์งํ ๋ฆฌ ํด๋ก
git clone https://github.com/ssori0421/jds_wikipage
# ํจํค์ง ์ค์น
yarn
# ์คํ
yarn build ํ์ yarn start