feat: 티켓 옵션 생성 퍼블리싱

design-system/ui/ChoiceChip.tsx

@@ -6,9 +6,10 @@ interface ChoiceChipProps {
   onSelect: (selected: string) => void;
   className?: string;
   labelClassName?: string;
+  buttonClassName?: string;
 }
 
-const ChoiceChip = ({ label, options, onSelect, className, labelClassName = '' }: ChoiceChipProps) => {
+const ChoiceChip = ({ label, options, onSelect, className, labelClassName = '', buttonClassName = '' }: ChoiceChipProps) => {
   const [selected, setSelected] = useState(options[0]);
 
   const handleClick = (option: string) => {
@@ -26,6 +27,7 @@ const ChoiceChip = ({ label, options, onSelect, className, labelClassName = '' }
             className={`
             flex justify-center items-center sm:text-xs md:text-sm lg:text-base px-2 rounded-full
             ${selected === option ? 'bg-white text-black' : 'text-black bg-transparent'}
+            ${buttonClassName}
           `}
             onClick={() => handleClick(option)}
           >

design-system/ui/buttons/IconButton.tsx

@@ -4,9 +4,10 @@ export interface IconButtonProps {
   iconPath: React.ReactElement;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   size?: 'small' | 'medium' | 'large';
+  iconClassName?: string;
 }
 
-const IconButton = ({ size = 'medium', iconPath, onClick }: IconButtonProps) => {
+const IconButton = ({ size = 'medium', iconPath, onClick, iconClassName }: IconButtonProps) => {
   const sizeClasses = {
     small: 'w-8 h-8',
     medium: 'w-10 h-10',
@@ -15,9 +16,9 @@ const IconButton = ({ size = 'medium', iconPath, onClick }: IconButtonProps) =>
 
   return (
     <button className={`inline-flex items-center justify-center ${sizeClasses[size]}`} onClick={onClick}>
-      <div className="w-1/2 h-1/2">{iconPath}</div>
+      <div className={`flex items-center justify-center w-1/2 h-1/2 ${iconClassName}`}>{iconPath}</div>
     </button>
   );
 };
 
-export default IconButton;
+export default IconButton;

design-system/ui/buttons/TertiaryButton.tsx

@@ -30,3 +30,5 @@ const TertiaryButton = ({ label, type, color, size, onClick, className }: Tertia
 };
 
 export default TertiaryButton;
+
+

design-system/ui/textFields/DefaultTextField.tsx

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, ChangeEvent, forwardRef, ReactElement, KeyboardEvent } from 'react';
+import { ButtonHTMLAttributes, ChangeEvent, forwardRef, ReactElement, KeyboardEvent, FocusEvent } from 'react';
 
 type Button = ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;
 
@@ -10,10 +10,14 @@ interface DefaultTextFieldProps {
   rightContent?: Button;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
   placeholder?: string;
   errorMessage?: string;
   className?: string;
   labelClassName?: string;
+  detailClassName?:string;
+  disabled?: boolean;
 }
 
 const DefaultTextField = forwardRef<HTMLInputElement, DefaultTextFieldProps>(
@@ -26,26 +30,33 @@ const DefaultTextField = forwardRef<HTMLInputElement, DefaultTextFieldProps>(
       rightContent,
       onChange,
       onKeyDown,
+      onFocus,
+      onBlur,
       placeholder = '',
       className = '',
       labelClassName = '',
       errorMessage,
+      detailClassName ='',
+      disabled = false,
       ...rest
     },
     ref
   ) => {
     return (
       <div>
         <label className={`block px-1 text-sm font-semibold text-gray-700 ${labelClassName}`}>{label}</label>
-        <label className="block px-1 mb-1 font-medium text-placeholderText sm:text-10 md:text-13">{detail}</label>
+        <label className={`block px-1 mb-1 font-medium text-placeholderText sm:text-10 md:text-13 ${detailClassName}`}>{detail}</label>
         <div className={`flex items-center justify-center `}>
           {leftText && <div className="w-24 text-base font-bold whitespace-nowrap">{leftText}</div>}
           <input
             ref={ref}
             value={value}
             onChange={onChange}
             onKeyDown={onKeyDown}
+            onFocus={onFocus}
+            onBlur={onBlur}
             placeholder={placeholder}
+            disabled={disabled}
             {...rest}
             className={`w-full border border-placeholderText rounded-[3px] px-2 py-1 outline-none placeholder:text-placeholderText text-xs font-light resize-none ${className} ${
               errorMessage ? 'border-red-500' : ''

design-system/ui/texts/IconText.tsx

@@ -18,7 +18,7 @@ const IconText = ({ size = 'medium', iconPath, children, className }: IconTextPr
 
   return (
     <button className={`${flexRowStart}`}>
-      <div className={`w-ful h-full ${sizeClasses[size]}`}>{iconPath}</div>
+      <div className={`w-full h-full ${sizeClasses[size]}`}>{iconPath}</div>
       <span className={`text-left whitespace-nowrap ${className}`}>{children}</span>
     </button>
   );

package.json

@@ -13,6 +13,7 @@
     "chromatic": "npx chromatic --project-token=chpt_d390af66464013e"
   },
   "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
     "@hookform/resolvers": "^4.1.3",
     "@tanstack/react-query": "^5.61.3",
     "autoprefixer": "^10.4.20",
@@ -62,7 +63,7 @@
     "globals": "^15.11.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^6.2.2"
   },
   "eslintConfig": {
     "extends": [

src/app/routes/Router.tsx

@@ -29,8 +29,11 @@ import MailBoxPage from '../../pages/dashboard/ui/mail/MailBoxPage';
 import EmailEditPage from '../../pages/dashboard/ui/mail/EmailEditPage';
 import PaymentPage from '../../pages/payment/ui/PaymentPage';
 import TicketConfirmPage from '../../pages/dashboard/ui/ticket/TIcketConfirmPage';
+import TicketOptionPage from '../../pages/dashboard/ui/ticket/TicketOptionPage';
+import TicketOptionCreatePage from '../../pages/dashboard/ui/ticket/TicketOptionCreatePage';
 import ResponseManagementPage from '../../pages/dashboard/ui/ResponsesManagementPage';
 import TicketOptionResponsePage from '../../pages/dashboard/ui/ticket/TicketOptionResponsePage';
+import TicketOptionAttachPage from '../../pages/dashboard/ui/ticket/TicketOptionAttachPage';
 
 const mainRoutes = [
   { path: MAIN_ROUTES.main, element: <MainPage />, requiresAuth: false },
@@ -63,6 +66,8 @@ const dashboardRoutes = [
   { path: DASHBOARD_ROUTES.eventTag, element: <EventTagPage />, requiresAuth: false },
   { path: DASHBOARD_ROUTES.ticketCreate, element: <TicketCreatePage />, requiresAuth: false },
   { path: DASHBOARD_ROUTES.ticket, element: <TicketListPage />, requiresAuth: false },
+  { path: DASHBOARD_ROUTES.ticketOption, element: <TicketOptionPage />, requiresAuth: false },
+  { path: DASHBOARD_ROUTES.ticketOptionCreate, element: <TicketOptionCreatePage />, requiresAuth: false },
   { path: DASHBOARD_ROUTES.email, element: <EmailPage />, requiresAuth: false },
   { path: DASHBOARD_ROUTES.mailBox, element: <MailBoxPage />, requiresAuth: false },
   { path: DASHBOARD_ROUTES.emailEdit, element: <EmailEditPage />, requiresAuth: false },
@@ -85,4 +90,4 @@ const router = createBrowserRouter(
   }))
 );
 
-export default router;
+export default router;

src/app/routes/routes.ts

@@ -36,6 +36,8 @@ export const DASHBOARD_ROUTES = {
   eventTag: `${MAIN_ROUTES.dashboard}/eventTag`,
   ticket: `${MAIN_ROUTES.dashboard}/ticket`,
   ticketCreate: `${MAIN_ROUTES.dashboard}/ticket/create`,
+  ticketOption: `${MAIN_ROUTES.dashboard}/ticket/option`,
+  ticketOptionCreate: `${MAIN_ROUTES.dashboard}/ticket/option/create`,
   email: `${MAIN_ROUTES.dashboard}/email`,
   mailBox: `${MAIN_ROUTES.dashboard}/mailBox`,
   emailEdit: `${MAIN_ROUTES.dashboard}/edit-email`,

src/features/dashboard/ui/Checklist.tsx

@@ -4,6 +4,10 @@ import { getMenuLists } from '../../../shared/types/dashboardType';
 import { useParams } from 'react-router-dom';
 // import completeCheck from '../../../../public/assets/dashboard/main/Check(complete).svg';
 
+const checkLists = menuLists
+  .filter(item => ['이벤트 기본 정보', '이벤트 상세와 사진', '티켓 생성하기', '티켓에 추가 옵션 부착'].includes(item.text))
+  .map(items => ({ text: items.text, path: items.path }));
+
 const CheckList = () => {
   const { id } = useParams();
   const navigate = useNavigate();

src/features/dashboard/ui/DragArea.tsx

@@ -0,0 +1,112 @@
+import { useNavigate } from 'react-router-dom';
+import DraggableList from './DraggableList';
+import { Droppable } from '@hello-pangea/dnd';
+import AddButton2 from '../../../../public/assets/dashboard/ticket/AddButton2.svg';
+import HorizontalCardButton from '../../../../design-system/ui/buttons/HorizontalCardButton';
+
+interface OptionTitle {
+  id: string;
+  content: string;
+  answerToggled: boolean;
+  responseFormat: string;
+}
+
+interface DragAreaProps {
+  data: {
+    options: { [key: string]: OptionTitle };
+    dragAreas: {
+      [key: string]: {
+        id: string;
+        title: string;
+        optionIds: string[];
+      };
+    };
+    dragAreaOrder: string[];
+  };
+  setData: React.Dispatch<React.SetStateAction<DragAreaProps['data']>>;
+  droppableId: string;
+  answerToggled: boolean;
+  responseFormat: string;
+  ticketSurveyAddButton?: boolean;
+}
+
+const DragArea = ({
+  data,
+  setData,
+  droppableId,
+  answerToggled,
+  responseFormat,
+  ticketSurveyAddButton = true,
+}: DragAreaProps) => {
+  const navigate = useNavigate();
+  const dragArea = data.dragAreas[droppableId];
+  const isOptionsArea = droppableId === 'options';
+  const isTicketArea = droppableId === 'ticket';
+
+  const handleDelete = (id: string) => {
+    if (isTicketArea) {
+      setData(prev => ({
+        ...prev,
+        dragAreas: {
+          ...prev.dragAreas,
+          ticket: {
+            ...prev.dragAreas.ticket,
+            optionIds: prev.dragAreas.ticket.optionIds.filter(optionId => optionId !== id),
+          },
+        },
+      }));
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <Droppable droppableId={droppableId} isDropDisabled={isOptionsArea}>
+        {provided => (
+          <div
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+            className={`${
+              isOptionsArea
+                ? 'h-80 grid grid-cols-2 gap-2 grid-flow-row content-start'
+                : isTicketArea
+                ? 'h-48 bg-opacity-5 flex flex-col gap-2 overflow-y-auto [&>*]:flex-shrink-0 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent hover:scrollbar-thumb-gray-300'
+                : 'h-80 grid grid-cols-2 gap-2 grid-flow-row content-start'
+            }`}
+          >
+            {dragArea.optionIds.map((optionId, index) => {
+              const option = data.options[optionId];
+              return (
+                <DraggableList
+                  key={option.id}
+                  id={option.id}
+                  content={option.content}
+                  index={index}
+                  answerToggled={option.answerToggled}
+                  responseFormat={option.responseFormat}
+                  droppableId={droppableId}
+                  isDragDisabled={false}
+                  onDelete={handleDelete}
+                />
+              );
+            })}
+            {ticketSurveyAddButton && isOptionsArea && (
+              <div className="col-span-1 flex items-center h-[3.5rem] bg-deDayBgLight rounded">
+                <HorizontalCardButton
+                  iconPath={<img src={AddButton2} alt="추가 버튼" />}
+                  className="text-sm  !justify-start [&>div]:!justify-start"
+                  label="티켓 설문 새로 생성하기"
+                  onClick={() => {
+                    navigate('/dashboard/ticket/option/create');
+                  }}
+                />
+              </div>
+            )}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </div>
+  );
+};
+
+export default DragArea;