+
)}
diff --git a/src/shared/ui/SelectableItem.tsx b/src/shared/ui/SelectableItem.tsx
deleted file mode 100644
index fbcea51..0000000
--- a/src/shared/ui/SelectableItem.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {tv, type VariantProps} from 'tailwind-variants';
-
-const selectableItemStyles = tv({
- base: 'cursor-pointer bg-background w-full flex items-center rounded-[9px] pl-4.5 pr-7.5 py-4 gap-4 border',
- variants: {
- selected: {
- true: 'border-primary',
- false: 'border-transparent',
- },
- },
- defaultVariants: {
- selected: false,
- },
-});
-
-type SelectableItemVariants = VariantProps
;
-
-interface SelectableItemProps extends SelectableItemVariants {
- selected?: boolean;
- leftIcon?: React.ReactNode;
- title: string;
- rightIcon?: React.ReactNode;
-}
-
-const SelectableItem = ({
- selected = false,
- leftIcon,
- title,
- rightIcon,
-}: SelectableItemProps) => {
- return (
-
-
{leftIcon}
-
{title}
-
{rightIcon}
-
- );
-};
-
-export default SelectableItem;
diff --git a/src/shared/ui/Badge.tsx b/src/shared/ui/badge/Badge.tsx
similarity index 58%
rename from src/shared/ui/Badge.tsx
rename to src/shared/ui/badge/Badge.tsx
index 493baaf..8dfbaaf 100644
--- a/src/shared/ui/Badge.tsx
+++ b/src/shared/ui/badge/Badge.tsx
@@ -1,58 +1,28 @@
-import {tv, type VariantProps} from 'tailwind-variants/lite';
import Correct from '@/assets/svg/correct.svg?react';
import Incorrect from '@/assets/svg/incorrect.svg?react';
import Unsubmitted from '@/assets/svg/unsubmitted.svg?react';
-
-const badgeStyles = tv({
- base: 'rounded-full px-3.5 py-1.5 leading-[19px] text-center text-base font-medium border whitespace-nowrap',
-});
-
-const scheduleBadgeStyles = tv({
- extend: badgeStyles,
- variants: {
- schedule: {
- upcoming:
- 'bg-radial-[50%_50%_at_50%_50%] from-[#7D63FF] from-38% to-[#AB9AFF] to-100% text-white',
- later: 'bg-[#403D4D] border-[#5C5B7F] text-white',
- },
- },
-});
-
-const submissionBadgeStyles = tv({
- extend: badgeStyles,
- base: 'bg-transparent flex-center gap-2 text-sm',
- variants: {
- status: {
- CORRECT: 'border-primary text-primary',
- INCORRECT: 'border-[#FF6F6F] text-[#FF6F6F]',
- NOT_SUBMITTED: 'border-light-black text-light-black',
- },
- },
-});
-
-const indexBadgeStyles = tv({
- extend: badgeStyles,
- variants: {
- kind: {
- unit: 'bg-secondary-black border-secondary-black text-white',
- problem: 'bg-light-black border-light-black text-white',
- },
- },
-});
+import {
+ indexBadgeStyles,
+ scheduleBadgeStyles,
+ submissionBadgeStyles,
+ type IndexBadgeVariants,
+ type ScheduleBadgeVariants,
+ type SubmissionBadgeVariants,
+} from './badge-styles';
type ScheduleBadgeProps = {
variant: 'schedule';
children: React.ReactNode;
-} & VariantProps;
+} & ScheduleBadgeVariants;
type SubmissionBadgeProps = {
variant: 'submission';
-} & VariantProps;
+} & SubmissionBadgeVariants;
type IndexBadgeProps = {
children: React.ReactNode;
variant: 'index';
-} & VariantProps;
+} & IndexBadgeVariants;
type BadgeProps = ScheduleBadgeProps | SubmissionBadgeProps | IndexBadgeProps;
diff --git a/src/shared/ui/badge/badge-styles.ts b/src/shared/ui/badge/badge-styles.ts
new file mode 100644
index 0000000..13a0316
--- /dev/null
+++ b/src/shared/ui/badge/badge-styles.ts
@@ -0,0 +1,43 @@
+import {tv, type VariantProps} from 'tailwind-variants/lite';
+export const badgeStyles = tv({
+ base: 'rounded-full px-3.5 py-1.5 leading-[19px] text-center text-base font-medium border whitespace-nowrap',
+});
+
+export const scheduleBadgeStyles = tv({
+ extend: badgeStyles,
+ variants: {
+ schedule: {
+ upcoming:
+ 'bg-radial-[50%_50%_at_50%_50%] from-[#7D63FF] from-38% to-[#AB9AFF] to-100% text-white',
+ later: 'bg-[#403D4D] border-[#5C5B7F] text-white',
+ },
+ },
+});
+
+export const submissionBadgeStyles = tv({
+ extend: badgeStyles,
+ base: 'bg-transparent flex-center gap-2 text-sm',
+ variants: {
+ status: {
+ CORRECT: 'border-primary text-primary',
+ INCORRECT: 'border-[#FF6F6F] text-[#FF6F6F]',
+ NOT_SUBMITTED: 'border-light-black text-light-black',
+ },
+ },
+});
+
+export const indexBadgeStyles = tv({
+ extend: badgeStyles,
+ variants: {
+ kind: {
+ unit: 'bg-secondary-black border-secondary-black text-white',
+ problem: 'bg-light-black border-light-black text-white',
+ },
+ },
+});
+
+export type ScheduleBadgeVariants = VariantProps;
+export type SubmissionBadgeVariants = VariantProps<
+ typeof submissionBadgeStyles
+>;
+export type IndexBadgeVariants = VariantProps;
diff --git a/src/shared/ui/button/Button.tsx b/src/shared/ui/button/Button.tsx
new file mode 100644
index 0000000..b9320f2
--- /dev/null
+++ b/src/shared/ui/button/Button.tsx
@@ -0,0 +1,36 @@
+import {twMerge} from 'tailwind-merge';
+import {buttonStyles, type ButtonVariants} from './button-styles';
+
+interface ButtonProps extends ButtonVariants {
+ children: React.ReactNode;
+ className?: string;
+ type?: 'button' | 'submit';
+ disabled?: boolean;
+ formID?: string;
+ onClick?: () => void;
+ onMouseEnter?: () => void;
+ onMouseLeave?: () => void;
+}
+
+const Button = ({
+ children,
+ onClick,
+ type = 'button',
+ disabled = false,
+ formID,
+ className,
+ ...props
+}: ButtonProps) => {
+ return (
+
+ );
+};
+
+export default Button;
diff --git a/src/shared/ui/Button.tsx b/src/shared/ui/button/button-styles.ts
similarity index 62%
rename from src/shared/ui/Button.tsx
rename to src/shared/ui/button/button-styles.ts
index c82a641..936e10f 100644
--- a/src/shared/ui/Button.tsx
+++ b/src/shared/ui/button/button-styles.ts
@@ -1,7 +1,6 @@
import {tv, type VariantProps} from 'tailwind-variants/lite';
-import {twMerge} from 'tailwind-merge';
-const button = tv({
+export const buttonStyles = tv({
base: 'cursor-pointer rounded-[10px] border',
variants: {
color: {
@@ -18,7 +17,7 @@ const button = tv({
default: 'w-24 h-10 px-3 py-1.5',
compact: 'w-fit px-3 py-1.5 leading-5',
wide: 'w-40 py-[15px]',
- none: 'w-fit p-0',
+ none: 'p-0',
icon: 'w-16 h-16 p-0 rounded-full', // 아이콘 버튼 rounded 속성 적용
},
content: {
@@ -35,35 +34,4 @@ const button = tv({
},
});
-type ButtonVariants = VariantProps;
-
-interface ButtonProps extends ButtonVariants {
- children: React.ReactNode;
- className?: string;
- type?: 'button' | 'submit';
- disabled?: boolean;
- onClick?: () => void;
- onMouseEnter?: () => void;
- onMouseLeave?: () => void;
-}
-
-const Button = ({
- children,
- onClick,
- type = 'button',
- disabled = false,
- className,
- ...props
-}: ButtonProps) => {
- return (
-
- );
-};
-
-export default Button;
+export type ButtonVariants = VariantProps;
diff --git a/src/shared/ui/Checkbox.module.css b/src/shared/ui/checkbox/Checkbox.module.css
similarity index 100%
rename from src/shared/ui/Checkbox.module.css
rename to src/shared/ui/checkbox/Checkbox.module.css
diff --git a/src/shared/ui/Checkbox.tsx b/src/shared/ui/checkbox/Checkbox.tsx
similarity index 100%
rename from src/shared/ui/Checkbox.tsx
rename to src/shared/ui/checkbox/Checkbox.tsx
diff --git a/src/shared/ui/list-row/ListRow.tsx b/src/shared/ui/list-row/ListRow.tsx
new file mode 100644
index 0000000..91316f0
--- /dev/null
+++ b/src/shared/ui/list-row/ListRow.tsx
@@ -0,0 +1,27 @@
+import {ListRowStyles, type ListRowVariants} from './list-row-styles';
+
+interface ListRowProps extends ListRowVariants {
+ selected?: boolean;
+ leftIcon?: React.ReactNode;
+ title: string;
+ rightIcon?: React.ReactNode;
+ className?: string;
+}
+
+const ListRow = ({
+ selected = false,
+ leftIcon,
+ title,
+ rightIcon,
+ className,
+}: ListRowProps) => {
+ return (
+
+
{leftIcon}
+
{title}
+
{rightIcon}
+
+ );
+};
+
+export default ListRow;
diff --git a/src/shared/ui/list-row/list-row-styles.ts b/src/shared/ui/list-row/list-row-styles.ts
new file mode 100644
index 0000000..5b4135f
--- /dev/null
+++ b/src/shared/ui/list-row/list-row-styles.ts
@@ -0,0 +1,16 @@
+import {tv, type VariantProps} from 'tailwind-variants';
+
+export const ListRowStyles = tv({
+ base: 'cursor-pointer bg-background w-full flex items-center rounded-[9px] pl-4.5 pr-7.5 py-4 gap-4 border',
+ variants: {
+ selected: {
+ true: 'border-primary',
+ false: 'border-transparent',
+ },
+ },
+ defaultVariants: {
+ selected: false,
+ },
+});
+
+export type ListRowVariants = VariantProps;
diff --git a/src/widgets/assignment-form-layout/ui/AssignmentFormLayout.tsx b/src/widgets/assignment-form-layout/ui/AssignmentFormLayout.tsx
index 461335a..9c861d8 100644
--- a/src/widgets/assignment-form-layout/ui/AssignmentFormLayout.tsx
+++ b/src/widgets/assignment-form-layout/ui/AssignmentFormLayout.tsx
@@ -1,4 +1,4 @@
-import Button from '@/shared/ui/Button';
+import Button from '@/shared/ui/button/Button';
import SurfaceCard from '@/shared/ui/SurfaceCard';
type AssignmentFormLayoutProps = {
diff --git a/src/widgets/assignment-page-layout/ui/AssignmentPageLayout.tsx b/src/widgets/assignment-page-layout/ui/AssignmentPageLayout.tsx
index 213ea1a..6dc960a 100644
--- a/src/widgets/assignment-page-layout/ui/AssignmentPageLayout.tsx
+++ b/src/widgets/assignment-page-layout/ui/AssignmentPageLayout.tsx
@@ -1,5 +1,5 @@
import SurfaceCard from '@/shared/ui/SurfaceCard';
-import Button from '@/shared/ui/Button';
+import Button from '@/shared/ui/button/Button';
import {CourseSelector} from '@/features/course/filter-course';
interface AssignmentPageLayoutProps {