[조현지] sprint10

components/fileInput.tsx

@@ -0,0 +1,73 @@
+import { MouseEvent, ChangeEvent, useEffect, useRef, useState } from 'react';
+import deleteBtn from '@/public/images/icons/ic_X.svg';
+import icPlus from '@/public/images/icons/ic_plus.svg';
+import Image from 'next/image';
+
+type Props = {
+  name: string;
+  value: File | string | null | Blob;
+  onChange: (name: string, value: File | null) => void;
+};
+
+export default function FileInput({ name, value, onChange }: Props) {
+  const [preview, setPreview] = useState<string>();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const nextValue = e.target.files?.[0];
+    if (nextValue) {
+      onChange(name, nextValue);
+    }
+  };
+
+  const handleClearClick = () => {
+    const inputNode = inputRef.current;
+    if (!inputNode) return;
+
+    inputNode.value = '';
+    onChange(name, null);
+  };
+
+  useEffect(() => {
+    if (!value) return;
+    const blob = typeof value === 'string' ? new Blob([value], { type: 'text/plain' }) : value;
+
+    const nextPreview = URL.createObjectURL(blob);
+    setPreview(nextPreview);
+
+    return () => {
+      URL.revokeObjectURL(nextPreview);
+    };
+  }, [value]);
+
+  const onClickImageUpload = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    inputRef.current?.click();
+  };
+  return (
+    <div className='flex flex-col gap-3'>
+      <p className='font-bold text-[14px] leading-4'>이미지</p>
+      <div className='relative flex gap-2'>
+        <input
+          type='file' //
+          accept='image/png, image/jpeg'
+          className='hidden'
+          ref={inputRef}
+          onChange={handleChange}
+        />
+        <button
+          onClick={onClickImageUpload}
+          className='w-[168px] h-[168px] bg-cool-gray100 rounded-xl flex flex-col items-center justify-center'>
+          <Image src={icPlus} alt='더하기 아이콘' />
+          <span className='text-cool-gray400'>이미지 등록</span>
+        </button>
+        {value && <img src={preview} alt='이미지 미리보기' className='w-[168px] h-[168px] rounded-xl' />}
+        {value && (
+          <button className='absolute right-2 top-2 md:left-[313px] lg:left-[313px]' onClick={handleClearClick}>
+            <Image src={deleteBtn} width={24} alt='삭제버튼' />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

components/submit-btn.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+type ButtonProps = {
+  children: ReactNode;
+  checkValue: boolean;
+};
+
+export default function SubmitButton({ children, checkValue }: ButtonProps) {
+  return (
+    <button className={`px-6 py-3 text-white rounded-lg ${checkValue ? 'bg-brand-blue' : 'bg-cool-gray400'}`}>
+      {children}
+    </button>
+  );
+}

pages/addboard.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect, ChangeEvent, FormEvent, KeyboardEvent } from 'react';
+import SubmitButton from '@/components/submit-btn';
+import FileInput from '@/components/fileInput';
+import { postArticle } from '@/lib/api/postArticle';
+import { useRouter } from 'next/router';
+import { postImageUrl } from '@/lib/api/postImageUrl';
+
+type Values = {
+  imgFile: File | null;
+  title: string;
+  content: string;
+};
+
+export default function AddArticleForm() {
+  const router = useRouter();
+  const [token, setToken] = useState('');
+  useEffect(() => {
+    const localToken = typeof window !== 'undefined' ? localStorage.getItem('accessToken') : null;
+    if (localToken) {
+      setToken(localToken);
+    }
+  }, []);
+
+  const [values, setValues] = useState<Values>({
+    imgFile: null,
+    title: '',
+    content: '',
+  });
+
+  const handleFileChange = (name: string, value: File | null) => {
+    setValues(prevValues => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  };
+
+  const handleChange = (name: string, value: string | null) => {
+    setValues(prevValues => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      const { title, content, imgFile } = values;
+      let imageUrl;
+
+      if (imgFile) {
+        const formData = new FormData();
+        formData.append('image', imgFile);
+
+        const imageResponse = await postImageUrl(formData, token);
+        imageUrl = imageResponse.url;
+      }
+
+      const response = await postArticle(title, content, token, imageUrl);
+
+      if (response) {
+        router.push('/boards');
+      } else {
+        console.error('Error posting article');
+      }
+    } catch (error) {
+      console.error('Error posting article:', error);
+    }
+  };
+
+  const isFormComplete = values.title.trim() !== '' && values.content.trim() !== '';
+
+  const preventDefault = (e: KeyboardEvent<HTMLFormElement>) => {
+    e.key === 'Enter' && e.preventDefault();
+  };
+
+  return (
+    <form
+      className='flex-col pt-6 m-auto w-mobile md:w-tablet lg:w-desktop h-[78vh]'
+      action='submit'
+      onSubmit={handleSubmit}
+      onKeyDown={preventDefault}>
+      <div className='flex items-center justify-between'>
+        <h1>상품 등록하기</h1>
+        <SubmitButton checkValue={isFormComplete}>{'등록'}</SubmitButton>
+      </div>
+      <label htmlFor='title' className='font-bold text-[14px] leading-4'>
+        *제목
+      </label>
+      <input
+        id='title'
+        name='title'
+        value={values.title}
+        type='text'
+        placeholder='상품명을 입력해주세요'
+        onChange={e => handleChange('title', e.target.value)}
+        className='mt-3 mb-6 w-mobile md:w-tablet lg:w-desktop h-14'
+      />
+
+      <label htmlFor='content' className='font-bold text-[14px] leading-4'>
+        *내용
+      </label>
+      <textarea
+        id='content'
+        name='content'
+        value={values.content}
+        placeholder='내용을 입력해주세요'
+        onChange={e => handleChange('content', e.target.value)}
+        className='mt-3 mb-6 w-mobile md:w-tablet lg:w-desktop h-[200px]'
+      />
+
+      <FileInput
+        name='imgFile' //
+        value={values.imgFile}
+        onChange={handleFileChange}
+      />
+    </form>
+  );
+}