+
+
{!isLabel && 시작 날짜}
-
+
{!isLabel && 종료 날짜}
-
+
{
+ onError: error => {
const message = error?.message || '호스트 생성에 실패했습니다. 다시 시도해주세요.';
alert(message);
},
diff --git a/src/features/event/ui/EventType.tsx b/src/features/event/ui/EventType.tsx
index 0dd9c7e5..d12e2e45 100644
--- a/src/features/event/ui/EventType.tsx
+++ b/src/features/event/ui/EventType.tsx
@@ -3,7 +3,6 @@ import OfflineIcon from '../../../../public/assets/event-manage/creation/Offline
import { useFunnelState } from '../model/FunnelContext';
import KakaoMap from '../../../shared/ui/KakaoMap';
import { AddressSearch } from '../../../shared/ui/AddressSearch';
-import { useState } from 'react';
interface EventTypeProps {
className?: string;
@@ -11,8 +10,6 @@ interface EventTypeProps {
const EventType = ({ className }: EventTypeProps) => {
const { eventState, setEventState } = useFunnelState();
- const [address, setAddress] = useState('');
- const [detailAddress, setDetailAddress] = useState('');
const handleTypeClick = (type: 'ONLINE' | 'OFFLINE') => {
setEventState(prev => ({
@@ -22,19 +19,15 @@ const EventType = ({ className }: EventTypeProps) => {
};
const handleAddressChange = (address: string) => {
- setAddress(address);
setEventState(prev => ({
...prev,
address,
- detailAddress,
}));
};
const handleDetailAddressChange = (detailAddress: string) => {
- setDetailAddress(detailAddress);
setEventState(prev => ({
...prev,
- address,
detailAddress,
}));
};
@@ -46,7 +39,7 @@ const EventType = ({ className }: EventTypeProps) => {
locationLng,
}));
};
- console.log(eventState.locationLat, eventState.locationLng);
+
return (
@@ -78,8 +71,9 @@ const EventType = ({ className }: EventTypeProps) => {
>;
useDefaultImage?: boolean;
onValidationChange?: (isValid: boolean) => void;
}
-const FileUpload = ({ value, onChange, setEventState, useDefaultImage, onValidationChange }: FileUploadProps) => {
+const FileUpload = ({ onChange, setEventState, useDefaultImage, onValidationChange }: FileUploadProps) => {
+ const { eventState } = useFunnelState();
+
const { previewUrl, fileInputRef, handleFileChange, handleDrop, setIsDragging, isDragging } = useImageUpload({
- value, // 서버에서 받아온 기본 이미지
+ value: eventState.bannerImageUrl,
onSuccess: url => {
onChange?.(url);
setEventState?.(prev => ({ ...prev, bannerImageUrl: url }));
@@ -22,9 +23,7 @@ const FileUpload = ({ value, onChange, setEventState, useDefaultImage, onValidat
});
useEffect(() => {
- if (onValidationChange) {
- onValidationChange(!!previewUrl);
- }
+ onValidationChange?.(!!previewUrl);
}, [previewUrl, onValidationChange]);
return (
diff --git a/src/features/event/ui/LinkInput.tsx b/src/features/event/ui/LinkInput.tsx
index ac42c456..b8538f75 100644
--- a/src/features/event/ui/LinkInput.tsx
+++ b/src/features/event/ui/LinkInput.tsx
@@ -1,22 +1,18 @@
-import { useEffect, useState } from 'react';
-import { FunnelState } from '../model/FunnelContext';
+import { useState } from 'react';
+import { useFunnelState } from '../model/FunnelContext';
import AddButton from '../../../../public/assets/event-manage/creation/AddBtn.svg';
import CloseButton from '../../../../public/assets/event-manage/creation/CloseBtn.svg';
import Link from '../../../../public/assets/event-manage/creation/Link.svg';
-interface LinkInputProps {
- value?: Link[];
- onChange?: (links: Link[]) => void;
- setEventState?: React.Dispatch>;
-}
-
export interface Link {
title: string;
url: string;
}
-const LinkInput = ({ value, onChange, setEventState }: LinkInputProps) => {
- const [links, setLinks] = useState([]);
+const LinkInput = () => {
+ const { eventState, setEventState } = useFunnelState();
+ const links = eventState.referenceLinks;
+
const [activeInput, setActiveInput] = useState<{ field: 'title' | 'url' | null }>({
field: null,
});
@@ -25,17 +21,11 @@ const LinkInput = ({ value, onChange, setEventState }: LinkInputProps) => {
});
const updateAll = (newLinks: Link[]) => {
- setLinks(newLinks);
- onChange?.(newLinks);
setEventState?.(prev => ({ ...prev, referenceLinks: newLinks }));
};
const addNewLink = () => {
- const newLink = {
- title: '',
- url: '',
- };
- updateAll([...links, newLink]);
+ updateAll([...(links || []), { title: '', url: '' }]);
};
const removeLink = (index: number) => {
@@ -49,10 +39,6 @@ const LinkInput = ({ value, onChange, setEventState }: LinkInputProps) => {
updateAll(newLinks);
};
- useEffect(() => {
- setLinks(value ?? []);
- }, [value]);
-
return (
>;
onValidationChange?: (isValid: boolean) => void;
}
@@ -15,13 +12,27 @@ const MAX_LENGTH = 2000;
const IMAGE_WEIGHT = 200;
const formats = [
- 'font', 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote',
- 'list', 'bullet', 'indent', 'link', 'image', 'align', 'color', 'background',
- 'size', 'h1',
+ 'font',
+ 'header',
+ 'bold',
+ 'italic',
+ 'underline',
+ 'strike',
+ 'blockquote',
+ 'list',
+ 'bullet',
+ 'indent',
+ 'link',
+ 'image',
+ 'align',
+ 'color',
+ 'background',
+ 'size',
+ 'h1',
];
-const TextEditor = ({ value = '', onChange, setEventState, onValidationChange }: TextEditorProps) => {
- const [content, setContent] = useState(value);
+const TextEditor = ({ onValidationChange }: TextEditorProps) => {
+ const { eventState, setEventState } = useFunnelState();
const quillRef = useRef(null);
const [isOverLimit, setIsOverLimit] = useState(false);
@@ -49,16 +60,40 @@ const TextEditor = ({ value = '', onChange, setEventState, onValidationChange }:
}
};
};
+
const getImageCount = (htmlContent: string): number => {
const matches = htmlContent.match(/![]()
]*src="[^"]*"[^>]*>/g);
return matches ? matches.length : 0;
};
+ const getPlainText = (htmlContent: string): string => {
+ return htmlContent.replace(/<[^>]*>/g, '').trim();
+ };
const getTotalContentLength = (htmlContent: string): number => {
const textLength = getPlainText(htmlContent).length;
const imageCount = getImageCount(htmlContent);
return textLength + imageCount * IMAGE_WEIGHT;
};
+ const handleChange = (value: string) => {
+ const totalLength = getTotalContentLength(value);
+
+ if (totalLength <= MAX_LENGTH) {
+ setEventState?.(prev => ({ ...prev, description: value }));
+ onValidationChange?.(getPlainText(value).length > 0);
+ setIsOverLimit(false);
+ } else {
+ const editorInstance = quillRef.current?.getEditor();
+ if (editorInstance) {
+ editorInstance.setContents(editorInstance.clipboard.convert(eventState.description));
+ }
+ setIsOverLimit(true);
+ }
+ };
+
+ useEffect(() => {
+ onValidationChange?.(getPlainText(eventState.description).length > 0);
+ }, [eventState.description, onValidationChange]);
+
const modules = useMemo(
() => ({
toolbar: {
@@ -79,44 +114,16 @@ const TextEditor = ({ value = '', onChange, setEventState, onValidationChange }:
}),
[]
);
- const getPlainText = (htmlContent: string): string => {
- return htmlContent.replace(/<[^>]*>/g, '').trim();
- };
-
- const handleChange = (value: string) => {
- const totalLength = getTotalContentLength(value);
-
- if (totalLength <= MAX_LENGTH) {
- setContent(value);
- onChange?.(value);
- setEventState?.(prev => ({ ...prev, description: value }));
- onValidationChange?.(getPlainText(value).length > 0);
- setIsOverLimit(false);
- } else {
- const editorInstance = quillRef.current?.getEditor();
- if (editorInstance) {
- editorInstance.setContents(editorInstance.clipboard.convert(content));
- }
- setIsOverLimit(true);
- }
- };
-
- useEffect(() => {
- setContent(value); // 외부 value가 바뀌면 내부에 반영
- const plainText = getPlainText(value);
- onValidationChange?.(plainText.length > 0);
- }, [value]);
-
- const totalLength = getTotalContentLength(content);
- const imageCount = getImageCount(content);
+ const totalLength = getTotalContentLength(eventState.description);
+ const imageCount = getImageCount(eventState.description);
return (
이벤트는 어디서 진행되나요?
관련 링크
diff --git a/src/features/event/ui/TextEditor.tsx b/src/features/event/ui/TextEditor.tsx index 6cc0f228..8c74eb9d 100644 --- a/src/features/event/ui/TextEditor.tsx +++ b/src/features/event/ui/TextEditor.tsx @@ -2,12 +2,9 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; import { uploadFile } from '../hooks/usePresignedUrlHook'; -import { FunnelState } from '../model/FunnelContext'; +import { useFunnelState } from '../model/FunnelContext'; interface TextEditorProps { - value?: string; - onChange?: (value: string) => void; - setEventState?: React.Dispatch이벤트에 대한 상세 설명
- {totalLength} / {MAX_LENGTH}자 - {imageCount > 0 && ` (이미지 ${imageCount}개 포함)`} + {totalLength} / {MAX_LENGTH}자{imageCount > 0 && ` (이미지 ${imageCount}개 포함)`}
- {isOverLimit && ( -- {MAX_LENGTH}자를 초과할 수 없습니다. -
- )} + {isOverLimit &&{MAX_LENGTH}자를 초과할 수 없습니다.
}
+
- onNextClick(Number(nextStep))}
- onPrev={onPrevClick}
- Funnel={Funnel}
- Step={Step}
- setStep={setStep}
- currentStep={currentStep}
- />
-
+ onNextClick(Number(nextStep))}
+ onPrev={onPrevClick}
+ Funnel={Funnel}
+ Step={Step}
+ setStep={setStep}
+ currentStep={currentStep}
+ />
);
};
diff --git a/vite.config.ts b/vite.config.ts
index 8d06dd4e..23f8138b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,7 @@ import autoprefixer from 'autoprefixer';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd());
- const API_BASE_URL = `${env.VITE_API_BASE_URL ?? 'http://api.gotogether.io.kr:8081'}`;
+ const API_BASE_URL = `${env.VITE_API_BASE_URL}`;
return {
plugins: [react()],