https://ui.shadcn.com/์์ ์ค์น
https://ui.shadcn.com/docs/installation/next
Next.js
Install and configure Next.js.
ui.shadcn.com
vscode extension ์ค์น - ๊ฐ๋จํ ๋ช
๋ น์ด๋ก ์ฝ๋ ์์ฑ ๊ฐ๋ฅ
(auth)ํด๋์ sign-in . sign-upํด๋ ์ถ๊ฐ
(root) meeting [id] - dynamic routes (์ฐธ๊ณ : https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)
(home) page.tsx, layout.tsx
extension์ค์น
1. ES7+ React/Redux/React-Native snippets
์๋ฅผ๋ค์ด, layout.tsx์์ rafce ์
๋ ฅ ํ ์ํฐ์
import React from 'react'
const layout = () => {
return (
<div>layout</div>
)
}
export default layout
2. tailwind css intellgence - ์๋์์ฑ
<section className="flex min-h-screen flex-1 flex-col px-6 pb-6 pt-28 max-md:pb-14 sm:px-14">
<div className='w-full'>
{children}
</div>
</section>
์ํ๋ ์์์ผ๋ก ๋ฐฐ๊ฒฝ ์ง์ ํ๊ธฐ
tailwind.config.ts์์ extend { colors { dark :{1:#267356, 2:'#125678' }์ด๋ฐ์์ผ๋ก ์ง์ ํ,
RootLayout์ผ๋ก ์์
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={'${inter.className} bg-dark-2'}>{children}</body>
</html>
);
}
bg-dark-2
์ด๋ฐ์์ผ๋ก ์์ฑ
๋ค๋น๊ฒ์ด์
๋ฐ, ์ฌ์ด๋๋ฐ ์ฒ๋ฆฌ
components/ui Navbar.tsx , Sidebar.tsx
๋ฐ๋ณต๋๋ ๋ฐ์ดํฐ๋ constantsํด๋ ๋ง๋ค์ด์ ์ฒ๋ฆฌ
constants/index.ts ์์ ์จ์ฃผ๊ณ ๋ง์ง๋ง์ export
export const sidebarLinks =[
{
label:'Home',
imgUrl: 'icons/home.svg',
route:'/',
},
{
label:'Upcoming',
imgUrl: 'icons/upcoming.svg',
route:'/upcoming',
},
{
label:'Previous',
imgUrl: 'icons/previous.svg',
route:'/previous',
},
{
label:'Recordings',
imgUrl: 'icons/Video.svg',
route:'/recordings',
},
{
label:'Personal Room',
imgUrl: 'icons/add-personal.svg',
route:'/personal-room',
},
]
๋ถ๋ฌ์ฌ๋๋
import { sidebarLinks } from '@/constants/Index'
const Sidebar = () => {
const pathname = usePathname();
return (
<section className='sticky left-0 top-0 flex h-screen w-fit flex-col
justify-between bg-dark-1 p-6 pt-28 text-white max-sm:hidden lg:w-[264px]'>
<div className='flex flex- flex-col gap-6'>
{sidebarLinks.map((link) => {
const isActive = pathname === link.route || pathname.startsWith(link.route);
//
๋ชจ๋ฅด๋ Css ์ฌ๊ธฐ์ ๊ฒ์ํ๊ธฐ
https://tailwindcss.com/
* VSCode์์ ๋ชจ๋ ๋จ์ด๋ฅผ ํ ๋ฒ์ ๋ฐ๊พธ๊ณ ์ถ์ผ๋ฉด Ctrl+Shift+L