Feat: "관리자 상품 등록 페이지 구현"

package.json

@@ -6,6 +6,9 @@
     "@apollo/client": "^3.8.4",
     "@apollo/react-hooks": "^4.0.0",
     "@craco/craco": "^7.1.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/base": "^5.0.0-beta.40",

src/api/apollo/gql/queries/NoticesResponseQuery.gql.ts

@@ -1,9 +1,44 @@
 import { gql } from '@apollo/client';
 
-export const SEARCH_NOTICE = gql`
-    query SearchNotice($request: NoticeSearchRequest!){
-        searchNotice(request: $request){
-
+// 이벤트 타입들 조회
+export const GET_EVENT_TYPE = gql`
+    query GetEventType {
+        __typename(name: "EventType") {
+            enumValues {
+                name
+                description
+            }
+        }
+    }
+`;
+
+// 이벤트 목록 조회
+export const GET_EVENT_LIST = gql`
+    query GetEventList($eventType: EventType) {
+        getEventList(eventType: $eventType) {
+            id
+            startedAt
+            endedAt
+            title
+            contents
+            thumbnail
+        }
+    }
+`;
+
+// 이벤트 상세 조회
+export const GET_EVENT_INFO = gql`
+    query GetEventInfo($eventId: Long!) {
+        getEventInfo(eventId: $eventId) {
+            id
+            startedAt
+            endedAt
+            title
+            contents
+            thumbnail
+            items
+            images
+            link
         }
     }
 `;

src/components/atoms/collaseCell/CollapseCell.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TableCell } from '@mui/material';
+import clsN from 'classnames';
+import styles from './styles/CollapseCell.module.scss';
+
+export interface CollapseHaderProps {
+    size?: 'small' | 'medium';
+    item: React.ReactNode;
+    className?: string;
+}
+
+export const CollapseCell = ({ ...props }: CollapseHaderProps) => {
+    return (
+        <TableCell
+            size={props.size}
+            component="th"
+            align="center"
+            className={clsN(props.className, styles['table-cell'])}
+        >
+            {props.item}
+        </TableCell>
+    );
+};
+
+CollapseCell.defaultProps = {
+    size: 'small',
+};

src/components/atoms/collaseCell/styles/CollapseCell.module.scss

@@ -0,0 +1,7 @@
+@import "index";
+
+.table-cell{
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+
+}

src/components/atoms/collaseCell/styles/index.scss

@@ -0,0 +1 @@
+@import "../../../../styles/scss/index";

src/components/atoms/datePicker/DatePicker.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextFieldClasses } from '@mui/material';
 import { Dayjs } from 'dayjs';
 import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers';
 import clsN from 'classnames';
@@ -17,8 +18,10 @@ const DatePicker = <TData extends Dayjs>({
     value,
     onChange,
     slotProps,
+    classes,
 }: MuiDatePickerProps<TData> & {
     className?: string;
+    classes?: Partial<TextFieldClasses>;
     label?: React.ReactNode;
 }): React.ReactElement => {
     /* 렌더 */
@@ -29,7 +32,8 @@ const DatePicker = <TData extends Dayjs>({
                 textField: {
                     size: 'small',
                     classes: {
-                        root: clsN(className, styles['date-root']),
+                        ...classes,
+                        root: clsN(className, styles['date-root'], classes?.root),
                     },
                     inputProps: {
                         className: clsN(styles['date-root__input']),

src/components/atoms/input/Input.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import TextField from '@mui/material/TextField';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
 import clsN from 'classnames';
 import styles from './style/Input.module.scss';
 
@@ -20,9 +20,9 @@ interface InputProps {
     // 문자나 이미지 등의 요소가 들어갈 자리에 임시로 채워놓는 내용물을 의미
     placeholder?: string | undefined;
     // input 값
-    inputVal: string | number;
+    inputVal: unknown | undefined;
     // onChange 이벤트 활성화 시 오브젝트 e 를 통한 작업 처리 => 반환 없음
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: TextFieldProps['onChange'];
     // 여러줄 여부
     multiline?: boolean | undefined;
     // form 컨트롤의 이름을 지정 주로 폼에 있는 내용을 서버에 보낼때 활용
@@ -31,6 +31,9 @@ interface InputProps {
     fullWidth?: boolean | undefined;
     // 새로운 type 속성 추가
     type?: React.InputHTMLAttributes<unknown>['type'];
+    // ref
+    ref?: TextFieldProps['ref'];
+    required?: TextFieldProps['required'];
 }
 
 export const Input = ({
@@ -47,9 +50,12 @@ export const Input = ({
     fullWidth,
     type,
     inputVal,
+    ref,
+    required,
 }: InputProps) => {
     return (
         <TextField
+            ref={ref}
             value={inputVal}
             name={name}
             variant={variant}
@@ -69,19 +75,19 @@ export const Input = ({
             multiline={multiline}
             fullWidth={fullWidth}
             type={type} // TextField에 type 속성 전달
+            required={required}
         />
     );
 };
 
 Input.defaultProps = {
-    className: styles[''],
-    outlineClsN: styles[''],
+    className: styles['root-input'],
+    outlineClsN: styles['notched-outline'],
     variant: 'filled',
     size: 'medium',
     endAdornment: undefined,
     label: undefined,
     placeholder: undefined,
-    onChange: undefined,
     multiline: undefined,
     name: undefined,
     fullWidth: undefined,

src/components/atoms/popover/PopOver.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Popover, PopoverProps } from '@mui/material';
+
+/**
+ * popover : 클릭 후 다음 요소가 활성화 되는 컴포넌트
+ * 기존의 PopoverProps 를 Omit 하여 children 을 제외한 모든 인터페이스를 상속하였으나 아토믹 디자인 관점으론 그리 유익하지 않음
+ */
+interface PopOverProps extends Omit<PopoverProps, 'children'> {
+    children?: React.ReactNode; // 리액트 노드(선택적)
+}
+
+export const PopOver = ({ ...props }: PopOverProps) => {
+    return <Popover {...props}>{props.children}</Popover>;
+};
+PopOver.defaultProps = {
+    children: undefined,
+};

src/components/atoms/popover/styles/PopOver.module.scss

@@ -0,0 +1,2 @@
+@import "index";
+

src/components/atoms/popover/styles/index.scss

@@ -0,0 +1 @@
+@import 'src/styles/scss/index';

src/components/atoms/sortableItem/SortableItem.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable */
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+// utilities for CSS animation
+import { CSS } from '@dnd-kit/utilities';
+import { Box } from '@mui/material';
+import clsN from 'classnames';
+import styles from './style/SortableItem.module.scss';
+
+interface SortableItemProps {
+    id: string;
+    content: React.ReactNode;
+    isActive: boolean;
+    className?: string;
+}
+
+export const SortableItem = ({ id, content, isActive }: SortableItemProps) => {
+    const {
+        attributes,
+        listeners,
+        setNodeRef, // Element Reference
+        transform, // for element position moves
+        transition, // for smooth animation
+    } = useSortable({ id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform), // when Drag start elemet's position changes
+        transition, // when Drag end animation end as smoothely
+    };
+
+    return (
+        <Box
+            ref={setNodeRef}
+            style={style}
+            className={clsN({
+                [styles['sortable-item']]: !isActive,
+                [styles['sortable-item--is-active']]: isActive,
+            })}
+            {...attributes}
+            {...listeners}
+        >
+            {content}
+        </Box>
+    );
+};

src/components/atoms/sortableItem/style/SortableItem.module.scss

@@ -0,0 +1,11 @@
+@import "./index";
+
+.sortable-item{
+  padding: 4px;
+  background-color: inherit;
+  border: $border-default-color 1px;
+  border-radius: 4px;
+  &--is-active{
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
+  }
+}

src/components/commons/draggableItem/DragableItem.tsx

@@ -0,0 +1,3 @@
+const DragableItem = () => {
+    return <></>;
+};

src/components/commons/dropAndDrop/draggable/Draggable.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useDraggable } from '@dnd-kit/core';
+import { Button } from '@mui/material';
+import clsN from 'classnames';
+import styles from './styles/Draggable.module.scss';
+
+interface DraggableProps {
+    // content
+    children: React.ReactNode;
+    // important
+    id: string;
+    // button Click Event
+    onClick?: () => void;
+}
+export const Draggable = ({ ...props }: DraggableProps) => {
+    /* use Button component for Draggable
+     * why ? button's basically can interact and focus with keyboard
+     * role = "button" it's means good at optimizing for screen reader
+     * Button compoenet has basic event example "click", "tab"
+     * Button compoenet are clickable element (UX) and have cursor : pointer
+     */
+
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({
+        id: props.id,
+    });
+
+    const style = transform
+        ? {
+              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+          }
+        : undefined;
+
+    return (
+        <Button
+            ref={setNodeRef} // element Referece
+            className={clsN(styles.draggable)} // className
+            style={style} // add transform style
+            {...listeners} // add draggable event listerners
+            {...attributes} // add draggable attributes
+            onClick={props.onClick}
+        >
+            {props.children}
+        </Button>
+    );
+};

src/components/commons/dropAndDrop/draggable/styles/Draggable.module.scss

@@ -0,0 +1,7 @@
+@import "./index";
+
+.draggable{
+  &--transform{
+
+  }
+}

src/components/commons/dropAndDrop/draggable/styles/index.scss

@@ -0,0 +1 @@
+@import "src/styles/scss/index";

src/components/commons/dropAndDrop/droppable/Droppable.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useDroppable } from '@dnd-kit/core';
+import { Box } from '@mui/material';
+import clsN from 'classnames';
+import styles from './styles/Droppable.module.scss';
+
+interface DroppableProps {
+    children: React.ReactNode;
+}
+
+// for Draggable Item Landing Place
+export const Droppable = ({ ...props }: DroppableProps) => {
+    const { isOver, setNodeRef } = useDroppable({
+        id: 'droppable',
+    });
+
+    const style = {
+        color: isOver ? 'green' : undefined,
+    };
+
+    return (
+        <Box
+            ref={setNodeRef}
+            className={clsN({
+                [styles['droppable__is-over']]: isOver,
+            })}
+            style={style}
+        >
+            {props.children}
+        </Box>
+    );
+};

src/components/commons/dropAndDrop/droppable/styles/Droppable.module.scss

@@ -0,0 +1,8 @@
+@import "./index";
+
+.droppable{
+  &--is-over{
+    background-color: green;
+    color: green;
+  }
+}

src/components/commons/dropAndDrop/droppable/styles/index.scss

@@ -0,0 +1 @@
+@import "src/styles/scss/index";