{period}
diff --git a/src/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton.tsx b/src/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton.tsx
index e643f4cd..45e2f89d 100644
--- a/src/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton.tsx
+++ b/src/app/(sidebar)/my-recruit/containers/components/Card/common/StatusButton.tsx
@@ -1,4 +1,4 @@
-import { SwitchCase } from '@/components/SwitchCase';
+import { SwitchCase } from '@/system/utils/SwitchCase';
import { Icon } from '@/system/components';
import {
DropdownMenu,
@@ -24,8 +24,9 @@ export function StatusButton({ currentStatus }: Props) {
- {statusList.map((item) => (
+ {statusList.map((item, index) => (
-
-
-
내 공고 뽀각
-
-
-
- 내 정보 가져오기
-
-
-
-
-
- 새 공고
+
+
+
{formattedDate}
@@ -30,7 +31,7 @@ export function InfoCardItem({ title, updatedDate, cardTagList }: Props) {
@@ -39,7 +40,7 @@ export function InfoCardItem({ title, updatedDate, cardTagList }: Props) {
삭제하기
-
+
개별창으로 띄우기
diff --git a/src/container/Sidebar/SidebarButton.tsx b/src/container/Sidebar/SidebarButton.tsx
index 61d97836..8b08d02c 100644
--- a/src/container/Sidebar/SidebarButton.tsx
+++ b/src/container/Sidebar/SidebarButton.tsx
@@ -1,4 +1,4 @@
-import { If } from '@/components/If';
+import { If } from '@/system/utils/If';
import { Icon, Text } from '@/system/components';
import { motion } from 'framer-motion';
import type { IconProps } from '@/system/components';
diff --git a/src/lib/dnd-kit/DndContextWithOverlay.tsx b/src/lib/dnd-kit/DndContextWithOverlay.tsx
new file mode 100644
index 00000000..4b249a00
--- /dev/null
+++ b/src/lib/dnd-kit/DndContextWithOverlay.tsx
@@ -0,0 +1,43 @@
+import { ComponentProps, ReactNode, useEffect, useState } from 'react';
+import { DndContext, DragOverlay } from '@dnd-kit/core';
+import type { DragStartEvent, DragEndEvent } from '@dnd-kit/core';
+import { If } from '@/system/utils/If';
+import { mergeProps } from '@/utils/mergeProps';
+import { DndAdditionalProvider } from './context';
+
+interface Props extends ComponentProps {
+ OverlayElement: (props: any) => ReactNode;
+}
+
+export function DndContextWithOverlay({ OverlayElement, children, ...restProps }: Props) {
+ const [overlayElementData, setOverlayElementData] = useState(null);
+ const [selectedId, setSelectedId] = useState();
+
+ const onDragStart = ({ active }: DragStartEvent) => {
+ setOverlayElementData(active.data.current);
+ };
+
+ const onDragEnd = ({ over }: DragEndEvent) => {
+ setOverlayElementData(null);
+ setSelectedId(over?.id);
+ };
+
+ useEffect(() => {
+ if (selectedId != null) {
+ setSelectedId(undefined);
+ }
+ }, [selectedId]);
+
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/lib/dnd-kit/Draggable.tsx b/src/lib/dnd-kit/Draggable.tsx
new file mode 100644
index 00000000..c4e837b3
--- /dev/null
+++ b/src/lib/dnd-kit/Draggable.tsx
@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+import { useDraggable } from '@dnd-kit/core';
+
+interface DraggableProps {
+ id: string | number;
+ dataForOverlay: any;
+}
+
+export function Draggable({ id, children, dataForOverlay }: PropsWithChildren) {
+ const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+ id: id,
+ data: dataForOverlay,
+ });
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/lib/dnd-kit/Droppable.tsx b/src/lib/dnd-kit/Droppable.tsx
new file mode 100644
index 00000000..c0d65697
--- /dev/null
+++ b/src/lib/dnd-kit/Droppable.tsx
@@ -0,0 +1,30 @@
+import React, { ReactNode, useEffect } from 'react';
+import { useDroppable } from '@dnd-kit/core';
+import { useDndAdditionalContext } from './context';
+import { motion, useAnimationControls } from 'framer-motion';
+
+interface DroppableProps {
+ id: string | number;
+ children?: ReactNode;
+}
+
+export function Droppable({ id, children }: DroppableProps) {
+ const animationControl = useAnimationControls();
+ const { setNodeRef } = useDroppable({ id });
+ const { selectedId } = useDndAdditionalContext();
+
+ useEffect(() => {
+ if (selectedId === id) {
+ animationControl.start('highlight');
+ }
+ }, [id, selectedId]);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/lib/dnd-kit/context.ts b/src/lib/dnd-kit/context.ts
new file mode 100644
index 00000000..c9b7b1ae
--- /dev/null
+++ b/src/lib/dnd-kit/context.ts
@@ -0,0 +1,9 @@
+import { generateContext } from '@/lib';
+
+interface DndAdditionalContext {
+ selectedId: number | string;
+}
+
+export const [DndAdditionalProvider, useDndAdditionalContext] = generateContext({
+ name: 'DndContextWithOverlay',
+});
diff --git a/src/lib/dnd-kit/dnd-kit.ts b/src/lib/dnd-kit/dnd-kit.ts
new file mode 100644
index 00000000..94a6acbb
--- /dev/null
+++ b/src/lib/dnd-kit/dnd-kit.ts
@@ -0,0 +1,4 @@
+export * from '@dnd-kit/core';
+export { Draggable } from './Draggable';
+export { Droppable } from './Droppable';
+export { DndContextWithOverlay } from './DndContextWithOverlay';
diff --git a/src/system/components/Icon/Icon.tsx b/src/system/components/Icon/Icon.tsx
index 69c4f423..912a02da 100644
--- a/src/system/components/Icon/Icon.tsx
+++ b/src/system/components/Icon/Icon.tsx
@@ -26,11 +26,13 @@ import { CalendarFill } from './SVG/CalendarFill';
import { Clover } from './SVG/Clover';
import { DownChevron } from './SVG/DownChevron';
import { FolderFill } from './SVG/FolderFill';
+import { Close } from './SVG/Close';
const iconMap = {
bell: Bell,
copy: Copy,
check: Check,
+ close: Close,
division: Division,
folder: Folder,
folderFill: FolderFill,
diff --git a/src/system/components/Icon/SVG/Close.tsx b/src/system/components/Icon/SVG/Close.tsx
new file mode 100644
index 00000000..05f4524e
--- /dev/null
+++ b/src/system/components/Icon/SVG/Close.tsx
@@ -0,0 +1,10 @@
+import { IconBaseType } from '@/system/components/Icon/SVG/type';
+
+export function Close({ size, color }: IconBaseType) {
+ return (
+
+ );
+}
diff --git a/src/system/components/Icon/SVG/DownChevron.tsx b/src/system/components/Icon/SVG/DownChevron.tsx
index 47033995..3050ff30 100644
--- a/src/system/components/Icon/SVG/DownChevron.tsx
+++ b/src/system/components/Icon/SVG/DownChevron.tsx
@@ -3,7 +3,7 @@ import { IconBaseType } from '@/system/components/Icon/SVG/type';
export function DownChevron({ color, size }: IconBaseType) {
return (
);
}
diff --git a/src/system/components/Tag/Tag.tsx b/src/system/components/Tag/Tag.tsx
index db371dce..d77a671a 100644
--- a/src/system/components/Tag/Tag.tsx
+++ b/src/system/components/Tag/Tag.tsx
@@ -1,8 +1,9 @@
import { cn } from '@/utils/tailwind-util';
import { PropsWithChildren } from 'react';
+export type TagColor = 'default' | 'blue' | 'purple';
export interface TagProps {
- color?: 'default' | 'blue' | 'purple';
+ color?: TagColor;
}
// TODO: cva 사용 로직으로 변경
diff --git a/src/system/components/index.ts b/src/system/components/index.ts
index ee17bbdd..41b6007d 100644
--- a/src/system/components/index.ts
+++ b/src/system/components/index.ts
@@ -4,3 +4,5 @@ export { Icon } from './Icon/Icon';
export type { IconProps } from './Icon/Icon';
export { Text } from './Text/Text';
export type { TextProps } from './Text/Text';
+export { Tag } from './Tag/Tag';
+export type { TagProps, TagColor } from './Tag/Tag';
diff --git a/src/components/If.tsx b/src/system/utils/If.tsx
similarity index 100%
rename from src/components/If.tsx
rename to src/system/utils/If.tsx
diff --git a/src/components/Spacing.tsx b/src/system/utils/Spacing.tsx
similarity index 100%
rename from src/components/Spacing.tsx
rename to src/system/utils/Spacing.tsx
diff --git a/src/components/SwitchCase.tsx b/src/system/utils/SwitchCase.tsx
similarity index 100%
rename from src/components/SwitchCase.tsx
rename to src/system/utils/SwitchCase.tsx
diff --git a/src/types/info.ts b/src/types/info.ts
index 6b8a3ec1..a45f9a98 100644
--- a/src/types/info.ts
+++ b/src/types/info.ts
@@ -1,12 +1,12 @@
-export interface Tag {
+export interface TagType {
id: number;
name: string;
type: '인성' | '역량';
}
-export interface InfoCard {
+export interface InfoCardType {
id: number;
title: string;
updatedDate: string;
- cardTagList: Tag[];
+ cardTagList: TagType[];
}
diff --git a/src/utils/mergeProps.ts b/src/utils/mergeProps.ts
new file mode 100644
index 00000000..1c1c4c4f
--- /dev/null
+++ b/src/utils/mergeProps.ts
@@ -0,0 +1,49 @@
+/**
+ * https://github.com/andrewbranch/merge-props/blob/master/src/index.ts
+ */
+type UnionToIntersection = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+
+function pushProp(target: { [key: string]: any }, key: string, value: any): void {
+ if (key === 'className') {
+ target.className = [target.className, value].join(' ').trim();
+ } else if (key === 'style') {
+ target.style = { ...target.style, ...value };
+ } else if (typeof value === 'function') {
+ const oldFn = target[key] as Function | undefined;
+ target[key] = oldFn
+ ? (...args: any[]) => {
+ oldFn(...args);
+ (value as Function)(...args);
+ }
+ : value;
+ } else if (value === undefined || (typeof value !== 'object' && value === target[key])) {
+ return;
+ } else if (!(key in target)) {
+ target[key] = value;
+ } else {
+ throw new Error(
+ `Didn’t know how to merge prop '${key}'. ` + `Only 'className', 'style', and event handlers are supported`,
+ );
+ }
+}
+
+export function mergeProps(
+ ...props: T
+): {
+ [K in keyof UnionToIntersection]: K extends 'className'
+ ? string
+ : K extends 'style'
+ ? UnionToIntersection[K]
+ : Exclude[K], undefined>;
+} {
+ if (props.length === 1) {
+ return props[0] as any;
+ }
+
+ return props.reduce((merged, ps: any) => {
+ for (const key in ps) {
+ pushProp(merged, key, ps[key]);
+ }
+ return merged;
+ }, {}) as any;
+}
diff --git a/yarn.lock b/yarn.lock
index fefbef36..dee32a39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1549,6 +1549,42 @@ __metadata:
languageName: node
linkType: hard
+"@dnd-kit/accessibility@npm:^3.1.0":
+ version: 3.1.0
+ resolution: "@dnd-kit/accessibility@npm:3.1.0"
+ dependencies:
+ tslib: ^2.0.0
+ peerDependencies:
+ react: ">=16.8.0"
+ checksum: fcb88c961e2f4c226ab575bc4a13712419884bb0f60761befcaa23bcb6c9939dc2cac6633416f2a07baee9a8830350c6df444039332408cdaaf27cad17c6b64b
+ languageName: node
+ linkType: hard
+
+"@dnd-kit/core@npm:^6.1.0":
+ version: 6.1.0
+ resolution: "@dnd-kit/core@npm:6.1.0"
+ dependencies:
+ "@dnd-kit/accessibility": ^3.1.0
+ "@dnd-kit/utilities": ^3.2.2
+ tslib: ^2.0.0
+ peerDependencies:
+ react: ">=16.8.0"
+ react-dom: ">=16.8.0"
+ checksum: 3b8f46d2f4d2723abad4721c7bc4d1df2c4f6f26ce54673243666212cfa6f34f33e3255b53144a847da469dc736c966c19e4c45330f967ce8c01f8f878ec7f5b
+ languageName: node
+ linkType: hard
+
+"@dnd-kit/utilities@npm:^3.2.2":
+ version: 3.2.2
+ resolution: "@dnd-kit/utilities@npm:3.2.2"
+ dependencies:
+ tslib: ^2.0.0
+ peerDependencies:
+ react: ">=16.8.0"
+ checksum: 8a5015c2faa52760ab82a64287b2ac6a3d798867a1bca5ccbc1178560dbd9a1f9f1a21faea80f590ba1a4277c3eb7e7c4d3b4a39f1f32171bf6bc8174b370547
+ languageName: node
+ linkType: hard
+
"@emnapi/runtime@npm:^1.1.1":
version: 1.2.0
resolution: "@emnapi/runtime@npm:1.2.0"
@@ -5386,6 +5422,7 @@ __metadata:
resolution: "bbo-gak@workspace:."
dependencies:
"@chromatic-com/storybook": ^1.6.1
+ "@dnd-kit/core": ^6.1.0
"@radix-ui/react-dialog": ^1.1.1
"@radix-ui/react-dropdown-menu": ^2.1.1
"@radix-ui/react-popover": ^1.1.1