-
-
-
- {isOpen && }
- {!isOpen && }
-
- {isOpen && (
-
setIsOpen(false)}
- >
-
- {options.map((option) => (
-
- ))}
-
-
- )}
- {errorText &&
{errorText}}
-
{
- if (e.key === 'Enter') {
- onKeyDownEnter?.();
- }
- inputProps.onKeyDown?.(e);
- }}
- onChange={(e) => {
- inputProps.onChange?.(e);
- onChangeText?.(e.target.value);
- }}
className={`m-0 w-full rounded-sm border-[1px] border-border p-3 text-base ${hasError && 'border-red-400'}`}
/>
@pusan.ac.kr
diff --git a/frontend/src/components/common/formik/FileUploader.tsx b/frontend/src/components/common/formik/FileUploader.tsx
index b1e67f7b..efb26c8b 100644
--- a/frontend/src/components/common/formik/FileUploader.tsx
+++ b/frontend/src/components/common/formik/FileUploader.tsx
@@ -5,13 +5,12 @@ interface CustomInputProps {
label: string;
isRequired?: boolean;
errorText?: string;
- onChangeText?(text: string): void;
}
export type FileUploaderProps = BuiltInInputProps & CustomInputProps;
export const FileUploader = ({ isRequired = false, ...props }: FileUploaderProps) => {
- const { label, errorText, onChangeText, ...inputProps } = props;
+ const { label, errorText, ...inputProps } = props;
const hasError = errorText !== undefined;
return (
@@ -21,10 +20,6 @@ export const FileUploader = ({ isRequired = false, ...props }: FileUploaderProps
{
- inputProps.onChange?.(e);
- onChangeText?.(e.target.value);
- }}
className={`m-0 rounded-sm border-[1px] border-border p-3 text-base ${hasError && 'border-red-400'}`}
/>
{errorText &&
{errorText}}
diff --git a/frontend/src/components/common/formik/ImageUploader.tsx b/frontend/src/components/common/formik/ImageUploader.tsx
index d24248f8..47beded7 100644
--- a/frontend/src/components/common/formik/ImageUploader.tsx
+++ b/frontend/src/components/common/formik/ImageUploader.tsx
@@ -7,18 +7,17 @@ type BuiltInImageUploaderProps = React.DetailedHTMLProps
void;
errorText?: string;
}
-export type ImageUploader = Omit & CustomImageUploaderProps;
+export type ImageUploader = BuiltInImageUploaderProps & CustomImageUploaderProps;
-const ImageUploader = ({ name, label, image, setFieldValue, errorText }: ImageUploader) => {
+const ImageUploader = ({ name, image, fitStand = 'width', setFieldValue, errorText }: ImageUploader) => {
const [imageUrl, setImageUrl] = useState('');
const onDrop = useCallback((acceptedFiles: File[]) => {
- console.log(acceptedFiles);
if (acceptedFiles.length > 0) {
setFieldValue(name, acceptedFiles[0]);
return;
@@ -46,18 +45,20 @@ const ImageUploader = ({ name, label, image, setFieldValue, errorText }: ImageUp
<>
{imageUrl ? (
) : isDragActive ? (
파일을 놓으세요
diff --git a/frontend/src/components/common/formik/MarkdownEditor.tsx b/frontend/src/components/common/formik/MarkdownEditor.tsx
new file mode 100644
index 00000000..05cd6719
--- /dev/null
+++ b/frontend/src/components/common/formik/MarkdownEditor.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { FORM_SIZE } from '@/constants';
+import { VscInfo } from '@react-icons/all-files/vsc/VscInfo';
+import MDEditor, { MDEditorProps } from '@uiw/react-md-editor';
+
+interface CustomMarkdownEditorProps {
+ name: string;
+ label?: string;
+ isRequired?: boolean;
+ errorText?: string;
+ size?: 'sm' | 'md' | 'lg';
+ isAdmin?: boolean;
+ tooltip?: string;
+ onChange?(e: React.ChangeEvent
): void;
+}
+
+export type MarkdownEditorProps = Omit & CustomMarkdownEditorProps;
+
+export default function MarkdownEditor2({ isRequired = false, size = 'md', ...props }: MarkdownEditorProps) {
+ const { name, label, errorText, isAdmin, tooltip, onChange, ...inputProps } = props;
+ const hasError = errorText !== undefined;
+
+ return (
+
+ {label && (
+
+ )}
+
{
+ if (!e) return;
+ onChange?.(e);
+ }}
+ className={`rounded-sm border-[1px] ${isAdmin ? 'border-admin-border' : 'border-border'} outline-none ${FORM_SIZE[size].padding} ${FORM_SIZE[size].textSize} ${hasError && 'border-red-400'}`}
+ />
+ {errorText && {errorText}}
+
-
-
{
- if (e.key === 'Enter') {
- onKeyDownEnter?.();
- }
- inputProps.onKeyDown?.(e);
- }}
- onChange={(e) => {
- inputProps.onChange?.(e);
- onChangeText?.(e.target.value);
- }}
- className={`m-0 rounded-sm border-[1px] border-border p-3 text-base ${hasError && 'border-red-400'}`}
- {...inputProps}
- />
- {errorText &&
{errorText}}
-
+
+
+ {label}
+
+
+ {tooltip && (
+
+
+ {tooltip}
+
+ )}
+
+ {inputElement}
+