diff --git a/apps/landing/devup.json b/apps/landing/devup.json index ecf8808d..9055ce58 100644 --- a/apps/landing/devup.json +++ b/apps/landing/devup.json @@ -38,7 +38,7 @@ "kakaoButtonActive": "#B77D00" }, "dark": { - "primary": "#737FE4", + "primary": "#6670F9", "secondary": "#2A4586", "link": "#006BFF", "text": "#EDEDED", @@ -237,7 +237,7 @@ { "fontFamily": "Pretendard", "fontStyle": "normal", - "fontWeight": 600, + "fontWeight": 700, "fontSize": "24px", "lineHeight": 1.3, "letterSpacing": "-0.03em" @@ -350,7 +350,7 @@ { "fontFamily": "Pretendard", "fontStyle": "normal", - "fontWeight": 600, + "fontWeight": 700, "fontSize": "30px", "lineHeight": 1.3, "letterSpacing": "-0.03em" @@ -427,14 +427,27 @@ "letterSpacing": "-0.03em" } ], - "captionBold": { - "fontFamily": "Pretendard", - "fontStyle": "normal", - "fontWeight": 700, - "fontSize": "14px", - "lineHeight": 1.3, - "letterSpacing": "-0.03em" - }, + "captionBold": [ + { + "fontFamily": "Pretendard", + "fontStyle": "normal", + "fontWeight": 700, + "fontSize": "13px", + "lineHeight": 1.3, + "letterSpacing": "-0.03em" + }, + null, + null, + null, + { + "fontFamily": "Pretendard", + "fontStyle": "normal", + "fontWeight": 700, + "fontSize": "14px", + "lineHeight": 1.3, + "letterSpacing": "-0.03em" + } + ], "textSbold": { "fontFamily": "Pretendard", "fontStyle": "normal", @@ -485,14 +498,27 @@ "letterSpacing": "-0.03em" } ], - "bodyReg": { - "fontFamily": "Pretendard", - "fontStyle": "normal", - "fontWeight": 400, - "fontSize": "16px", - "lineHeight": 1.5, - "letterSpacing": "-0.03em" - }, + "bodyReg": [ + { + "fontFamily": "Pretendard", + "fontStyle": "normal", + "fontWeight": 400, + "fontSize": "14px", + "lineHeight": 1.5, + "letterSpacing": "-0.03em" + }, + null, + null, + null, + { + "fontFamily": "Pretendard", + "fontStyle": "normal", + "fontWeight": 400, + "fontSize": "16px", + "lineHeight": 1.5, + "letterSpacing": "-0.03em" + } + ], "smallBold": { "fontFamily": "Pretendard", "fontStyle": "normal", diff --git a/apps/landing/src/app/(detail)/components/Card.tsx b/apps/landing/src/app/(detail)/components/Card.tsx new file mode 100644 index 00000000..f9e1b4f2 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/Card.tsx @@ -0,0 +1,22 @@ +import { VStack } from '@devup-ui/react' + +export default function Card({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/landing/src/app/(detail)/components/LeftMenu.tsx b/apps/landing/src/app/(detail)/components/LeftMenu.tsx new file mode 100644 index 00000000..8e7613ee --- /dev/null +++ b/apps/landing/src/app/(detail)/components/LeftMenu.tsx @@ -0,0 +1,55 @@ +import { VStack } from '@devup-ui/react' + +import { MenuItem } from '../docs/MenuItem' + +export function LeftMenu() { + return ( + + Overview + + Form + + + Layout + + + Theme + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/layout.tsx b/apps/landing/src/app/(detail)/components/layout.tsx new file mode 100644 index 00000000..d8579415 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/layout.tsx @@ -0,0 +1,28 @@ +import { Box, Flex } from '@devup-ui/react' + +import { RightIndex } from '../docs/RightIndex' +import { LeftMenu } from './LeftMenu' + +export default function Layout({ + children, +}: Readonly<{ children: React.ReactNode }>) { + return ( + <> + + + + + + + + {children} + + + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx new file mode 100644 index 00000000..dc03f213 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/overview/page.tsx @@ -0,0 +1,491 @@ +import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react' + +import * as Icons from '@/components/icons/components' + +import Card from '../Card' + +export default function Page() { + return ( + + + Overview + + + Devup UI Components + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam + venenatis, elit in hendrerit porta, augue ante scelerisque diam, ac + egestas lacus est nec urna. Cras commodo risus hendrerit, suscipit nibh + at, porttitor dui. Vivamus tincidunt pretium nibh et pulvinar. Nam quis + tristique neque, vitae facilisis justo. Ut non tristique dui. + + + + Form + + + +
+ +
+ + + Button + + + + +
+ +
+ + + Text Box + + + + +
+ +
+ + + Text area + + + + +
+ +
+ + + Dropdown + + + + +
+ +
+ + + Radio + + + + +
+ +
+ + + Checkbox + + + + +
+ +
+ + + Stepper + + + + +
+ +
+ + + Toggle + + + + +
+ +
+ + + Slider + + + + +
+ +
+ + + Date picker + + + + +
+ +
+ + + Color picker + + + + +
+ +
+ + + Uploader + + + + +
+ +
+ + + Pagination + + + + +
+ +
+ + + Progress bar + + + + +
+ +
+ + + Search + + + + +
+ +
+ + + Select + + + + +
+ +
+ + + Label + + + + + + + + Layout + + + +
+ +
+ + + Footer + + + + +
+ +
+ + + Tooltip + + + + +
+ +
+ + + Tab + + + + +
+ +
+ + + Menu + + + + +
+ +
+ + + Header + + + + +
+ +
+ + + Confirm + + + + +
+ +
+ + + Snackbar + + + + +
+ +
+ + + Bottom sheet + + + + + + + + Theme + + + +
+ +
+ + + Theme Button + + + + + + + ) +} diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx index a5b86dd1..286b3354 100644 --- a/apps/landing/src/components/Header/index.tsx +++ b/apps/landing/src/components/Header/index.tsx @@ -93,6 +93,16 @@ export function Header() { Docs + + + Components + + ) { + const theme = useTheme() + return ( + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconButtonComponent.tsx b/apps/landing/src/components/icons/components/IconButtonComponent.tsx new file mode 100644 index 00000000..9419579c --- /dev/null +++ b/apps/landing/src/components/icons/components/IconButtonComponent.tsx @@ -0,0 +1,64 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconButtonComponent({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconCheckboxComp.tsx b/apps/landing/src/components/icons/components/IconCheckboxComp.tsx new file mode 100644 index 00000000..a48bb156 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconCheckboxComp.tsx @@ -0,0 +1,81 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconCheckboxComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconColorPickerComp.tsx b/apps/landing/src/components/icons/components/IconColorPickerComp.tsx new file mode 100644 index 00000000..4e3cfb2b --- /dev/null +++ b/apps/landing/src/components/icons/components/IconColorPickerComp.tsx @@ -0,0 +1,125 @@ +'use client' + +import { useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconColorPickerComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconConfirmComp.tsx b/apps/landing/src/components/icons/components/IconConfirmComp.tsx new file mode 100644 index 00000000..23d7d40c --- /dev/null +++ b/apps/landing/src/components/icons/components/IconConfirmComp.tsx @@ -0,0 +1,70 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconConfirmComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconDatePickerComp.tsx b/apps/landing/src/components/icons/components/IconDatePickerComp.tsx new file mode 100644 index 00000000..ee939368 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconDatePickerComp.tsx @@ -0,0 +1,362 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconDatePickerComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconDropdownComp.tsx b/apps/landing/src/components/icons/components/IconDropdownComp.tsx new file mode 100644 index 00000000..ca3f0670 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconDropdownComp.tsx @@ -0,0 +1,78 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconDropdownComp({ + className, + ...props +}: { + className?: string + props?: SVGProps +}) { + const theme = useTheme() + return ( + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconFooterComp.tsx b/apps/landing/src/components/icons/components/IconFooterComp.tsx new file mode 100644 index 00000000..8e3b517b --- /dev/null +++ b/apps/landing/src/components/icons/components/IconFooterComp.tsx @@ -0,0 +1,58 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconFooterComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconHeaderComp.tsx b/apps/landing/src/components/icons/components/IconHeaderComp.tsx new file mode 100644 index 00000000..5fbd660a --- /dev/null +++ b/apps/landing/src/components/icons/components/IconHeaderComp.tsx @@ -0,0 +1,65 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconHeaderComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconLabelComp.tsx b/apps/landing/src/components/icons/components/IconLabelComp.tsx new file mode 100644 index 00000000..1ec314aa --- /dev/null +++ b/apps/landing/src/components/icons/components/IconLabelComp.tsx @@ -0,0 +1,46 @@ +'use client' + +import { useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconLabelComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconMenuComp.tsx b/apps/landing/src/components/icons/components/IconMenuComp.tsx new file mode 100644 index 00000000..33c34eae --- /dev/null +++ b/apps/landing/src/components/icons/components/IconMenuComp.tsx @@ -0,0 +1,66 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconMenuComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconPagination.tsx b/apps/landing/src/components/icons/components/IconPagination.tsx new file mode 100644 index 00000000..6eca1f17 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconPagination.tsx @@ -0,0 +1,89 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconPagination({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + + return ( + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconProgressBar.tsx b/apps/landing/src/components/icons/components/IconProgressBar.tsx new file mode 100644 index 00000000..cc8b98ec --- /dev/null +++ b/apps/landing/src/components/icons/components/IconProgressBar.tsx @@ -0,0 +1,82 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconProgressBar({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconRadioComp.tsx b/apps/landing/src/components/icons/components/IconRadioComp.tsx new file mode 100644 index 00000000..182e033b --- /dev/null +++ b/apps/landing/src/components/icons/components/IconRadioComp.tsx @@ -0,0 +1,75 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconRadioComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconSearchComp.tsx b/apps/landing/src/components/icons/components/IconSearchComp.tsx new file mode 100644 index 00000000..08cb5509 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconSearchComp.tsx @@ -0,0 +1,42 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconSearchComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + + return ( + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconSelectComp.tsx b/apps/landing/src/components/icons/components/IconSelectComp.tsx new file mode 100644 index 00000000..ab5380a7 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconSelectComp.tsx @@ -0,0 +1,57 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconSelectComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconSliderComp.tsx b/apps/landing/src/components/icons/components/IconSliderComp.tsx new file mode 100644 index 00000000..767af99e --- /dev/null +++ b/apps/landing/src/components/icons/components/IconSliderComp.tsx @@ -0,0 +1,84 @@ +'use client' + +import { css } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconSliderComp({ + className, + ...props +}: SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconSnackbarComp.tsx b/apps/landing/src/components/icons/components/IconSnackbarComp.tsx new file mode 100644 index 00000000..87fa4731 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconSnackbarComp.tsx @@ -0,0 +1,51 @@ +'use client' + +import { SVGProps } from 'react' + +export default function IconSnackbarComp({ + className, + ...props +}: SVGProps) { + return ( + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconStepperComp.tsx b/apps/landing/src/components/icons/components/IconStepperComp.tsx new file mode 100644 index 00000000..f0938cf6 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconStepperComp.tsx @@ -0,0 +1,61 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconStepperComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconTabComp.tsx b/apps/landing/src/components/icons/components/IconTabComp.tsx new file mode 100644 index 00000000..17241d43 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconTabComp.tsx @@ -0,0 +1,50 @@ +'use client' + +import { SVGProps } from 'react' + +export default function IconTabComp({ + className, + ...props +}: SVGProps) { + return ( + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconTextAreaComp.tsx b/apps/landing/src/components/icons/components/IconTextAreaComp.tsx new file mode 100644 index 00000000..5eb28586 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconTextAreaComp.tsx @@ -0,0 +1,42 @@ +'use client' + +import { useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconTextAreaComp({ + className, + ...props +}: { + className?: string + props?: SVGProps +}) { + const theme = useTheme() + return ( + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconTextBoxComp.tsx b/apps/landing/src/components/icons/components/IconTextBoxComp.tsx new file mode 100644 index 00000000..e7b9a6aa --- /dev/null +++ b/apps/landing/src/components/icons/components/IconTextBoxComp.tsx @@ -0,0 +1,62 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconTextBoxComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconThemeButtonComp.tsx b/apps/landing/src/components/icons/components/IconThemeButtonComp.tsx new file mode 100644 index 00000000..f7106502 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconThemeButtonComp.tsx @@ -0,0 +1,30 @@ +'use client' + +import { css } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconThemeButtonComp({ + className, + ...props +}: SVGProps) { + return ( + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconToggleComp.tsx b/apps/landing/src/components/icons/components/IconToggleComp.tsx new file mode 100644 index 00000000..1ce5271f --- /dev/null +++ b/apps/landing/src/components/icons/components/IconToggleComp.tsx @@ -0,0 +1,31 @@ +'use client' + +import { css } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconToggleComp({ + className, + ...props +}: SVGProps) { + return ( + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconTooltipComp.tsx b/apps/landing/src/components/icons/components/IconTooltipComp.tsx new file mode 100644 index 00000000..1d592c66 --- /dev/null +++ b/apps/landing/src/components/icons/components/IconTooltipComp.tsx @@ -0,0 +1,74 @@ +'use client' + +import { SVGProps } from 'react' + +export default function IconTooltipComp({ + className, + ...props +}: SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/IconUploaderComp.tsx b/apps/landing/src/components/icons/components/IconUploaderComp.tsx new file mode 100644 index 00000000..487309ac --- /dev/null +++ b/apps/landing/src/components/icons/components/IconUploaderComp.tsx @@ -0,0 +1,93 @@ +'use client' + +import { css, useTheme } from '@devup-ui/react' +import { SVGProps } from 'react' + +export default function IconUploaderComp({ + className, + ...props +}: SVGProps) { + const theme = useTheme() + + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/components/icons/components/index.ts b/apps/landing/src/components/icons/components/index.ts new file mode 100644 index 00000000..d49d60e1 --- /dev/null +++ b/apps/landing/src/components/icons/components/index.ts @@ -0,0 +1,55 @@ +import IconBottomSheetComp from '@/components/icons/components/IconBottomSheetComp' +import IconButtonComponent from '@/components/icons/components/IconButtonComponent' +import IconCheckboxComp from '@/components/icons/components/IconCheckboxComp' +import IconColorPickerComp from '@/components/icons/components/IconColorPickerComp' +import IconConfirmComp from '@/components/icons/components/IconConfirmComp' +import IconDatePickerComp from '@/components/icons/components/IconDatePickerComp' +import IconDropdownComp from '@/components/icons/components/IconDropdownComp' +import IconFooterComp from '@/components/icons/components/IconFooterComp' +import IconHeaderComp from '@/components/icons/components/IconHeaderComp' +import IconLabelComp from '@/components/icons/components/IconLabelComp' +import IconMenuComp from '@/components/icons/components/IconMenuComp' +import IconPagination from '@/components/icons/components/IconPagination' +import IconProgressBar from '@/components/icons/components/IconProgressBar' +import IconRadioComp from '@/components/icons/components/IconRadioComp' +import IconSearchComp from '@/components/icons/components/IconSearchComp' +import IconSelectComp from '@/components/icons/components/IconSelectComp' +import IconSliderComp from '@/components/icons/components/IconSliderComp' +import IconSnackbarComp from '@/components/icons/components/IconSnackbarComp' +import IconStepperComp from '@/components/icons/components/IconStepperComp' +import IconTabComp from '@/components/icons/components/IconTabComp' +import IconTextAreaComp from '@/components/icons/components/IconTextAreaComp' +import IconTextBoxComp from '@/components/icons/components/IconTextBoxComp' +import IconThemeButtonComp from '@/components/icons/components/IconThemeButtonComp' +import IconToggleComp from '@/components/icons/components/IconToggleComp' +import IconTooltipComp from '@/components/icons/components/IconTooltipComp' +import IconUploaderComp from '@/components/icons/components/IconUploaderComp' + +export { + IconBottomSheetComp, + IconButtonComponent, + IconCheckboxComp, + IconColorPickerComp, + IconConfirmComp, + IconDatePickerComp, + IconDropdownComp, + IconFooterComp, + IconHeaderComp, + IconLabelComp, + IconMenuComp, + IconPagination, + IconProgressBar, + IconRadioComp, + IconSearchComp, + IconSelectComp, + IconSliderComp, + IconSnackbarComp, + IconStepperComp, + IconTabComp, + IconTextAreaComp, + IconTextBoxComp, + IconThemeButtonComp, + IconToggleComp, + IconTooltipComp, + IconUploaderComp, +}