Merge pull request #94 from DevKor-github/feat/#93/post-limit

[#93] post 여러 가지 제한 걸기

Author: jw0202058

src/features/post/components/InputField/index.tsx

@@ -1,13 +1,15 @@
+import { MAX_PRICE } from '@/libs/constants';
 import * as s from './style.css';
 import { useState } from 'react';
 
 interface InputProps<T extends number | string> {
   className?: string;
   value: T;
   setValue: (value: T) => void;
+  maxLength?: number;
 }
 
-const InputField = <T extends number | string>({ className, value, setValue }: InputProps<T>) => {
+const InputField = <T extends number | string>({ className, value, setValue, maxLength }: InputProps<T>) => {
   const [isFocused, setIsFocused] = useState(false);
 
   const isNumber = typeof value === 'number';
@@ -19,6 +21,7 @@ const InputField = <T extends number | string>({ className, value, setValue }: I
     if (isNumber) {
       const number = Number(raw.replace(/,/g, ''));
       if (isNaN(number)) return;
+      if (number > MAX_PRICE) return;
       setValue(number as T);
     } else {
       setValue(raw as T);
@@ -45,6 +48,7 @@ const InputField = <T extends number | string>({ className, value, setValue }: I
       onBlur={handleBlur}
       inputMode={isNumber ? 'numeric' : 'text'}
       pattern={isNumber ? '[0-9]*' : undefined}
+      maxLength={maxLength}
     />
   );
 };

src/features/post/components/StepFunnel/Step3/index.tsx

@@ -5,6 +5,7 @@ import Token from '@/common/components/Token';
 import InputField from '../../InputField';
 import { useStep3Store } from '@/features/post/stores/Step3Store';
 import { useStep1Store } from '@/features/post/stores/Step1Store';
+import { MAX_LOCATION } from '@/libs/constants';
 
 const Location = () => {
   const locationStore = useStep3Store(state => state.location);
@@ -14,7 +15,7 @@ const Location = () => {
     <div className={c.DetailContent}>
       <div className={c.DetailContent}>
         <span>직거래 장소를 입력해 주세요</span>
-        <InputField value={locationStore} setValue={locationSetter} />
+        <InputField value={locationStore} setValue={locationSetter} maxLength={MAX_LOCATION} />
       </div>
     </div>
   );

src/features/post/components/StepFunnel/Step5/index.tsx

@@ -6,6 +6,7 @@ import * as c from '../style.css';
 import SelectedPhoto from '../../uploadedPhoto';
 import UploadFile from '../../UploadFile';
 import { useStep5Store } from '@/features/post/stores/Step5Store';
+import { ALLOWED_EXTENSIONS, MAX_DESC, MAX_SIZE_BYTES, MAX_SIZE_MB, MAX_TITLE } from '@/libs/constants';
 
 const Step5 = () => {
   const fileStore = useStep5Store(state => state.files);
@@ -23,7 +24,22 @@ const Step5 = () => {
 
     const fileArray = Array.from(files);
 
-    const updatedFiles = [...fileStore, ...fileArray];
+    const validFiles = fileArray.filter(file => {
+      // TODO: alert 어떻게 띄워줄지 디자인 요청
+      const ext = file.name.split('.').pop()?.toLowerCase();
+      console.log(ext);
+      if (!ext || !ALLOWED_EXTENSIONS.includes(ext)) {
+        alert(`"${file.name}"은(는) 지원하지 않는 확장자입니다.`);
+        return false;
+      }
+      if (file.size > MAX_SIZE_BYTES) {
+        alert(`"${file.name}"은(는) ${MAX_SIZE_MB}MB를 초과합니다.`);
+        return false;
+      }
+      return true;
+    });
+
+    const updatedFiles = [...fileStore, ...validFiles];
     fileSetter(updatedFiles);
   };
 
@@ -44,18 +60,24 @@ const Step5 = () => {
       <header className={c.Head}>상품 소개를 작성해 주세요</header>
       <div className={c.Content}>
         <div className={c.DetailContent}>
-          상품명을 입력해 주세요
-          <InputField value={titleStore} setValue={titleSetter}></InputField>
+          상품명을 입력해 주세요 ({titleStore.length}/{MAX_TITLE})
+          <InputField value={titleStore} setValue={titleSetter} maxLength={MAX_TITLE}></InputField>
         </div>
         <div className={c.DetailContent}>
-          상품 설명을 입력해 주세요
+          상품 설명을 입력해 주세요 ({descStore.length}/{MAX_DESC})
           <div className={s.ProductDesc}>
-            <MultilineInputfield onChange={handleDesc} value={descStore} />
-            <div className={s.SelectPhotoContainer}>
-              <UploadFile onChange={handleImageUploaded} />
-              {images.map((file, index) => (
-                <SelectedPhoto key={index} file={file} onClick={() => removeUploadedImage(index)} />
-              ))}
+            <MultilineInputfield onChange={handleDesc} value={descStore} maxLength={MAX_DESC} />
+            <div className={s.PhotoLimit}>
+              <div className={s.SelectPhotoContainer}>
+                <UploadFile onChange={handleImageUploaded} />
+                {images.map((file, index) => (
+                  <SelectedPhoto key={index} file={file} onClick={() => removeUploadedImage(index)} />
+                ))}
+              </div>
+              <div className={s.AlertText}>
+                <span className="mgc_alert_octagon_fill"></span>
+                사진은 최대 6장까지 등록이 가능해요.
+              </div>
             </div>
           </div>
         </div>

src/features/post/components/StepFunnel/Step5/style.css.ts

@@ -13,3 +13,22 @@ export const SelectPhotoContainer = css({
   alignItems: 'center',
   flexWrap: 'wrap',
 });
+
+export const PhotoLimit = css({
+  display: 'flex',
+  flexDir: 'column',
+  gap: '1rem',
+});
+
+export const AlertText = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.25rem',
+  color: '80',
+  fontFamily: 'Pretendard',
+  fontSize: '0.75rem',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  lineHeight: 'normal',
+  letterSpacing: '-0.03rem',
+});

src/features/post/components/UploadFile/index.tsx

@@ -1,3 +1,4 @@
+import { ALLOWED_EXTENSIONS } from '@/libs/constants';
 import * as s from './style.css';
 
 interface UploadPhotoProps {
@@ -7,7 +8,13 @@ interface UploadPhotoProps {
 const UploadFile = ({ onChange }: UploadPhotoProps) => {
   return (
     <label className={s.SelectedPhotoBtn}>
-      <input type="file" accept="image/*" multiple onChange={onChange} className={s.Input} />
+      <input
+        type="file"
+        accept={ALLOWED_EXTENSIONS.map(val => '.' + val).join()}
+        multiple
+        onChange={onChange}
+        className={s.Input}
+      />
       <div className="mgc_camera_2_fill" />
     </label>
   );

src/features/post/stores/Step5Store.ts

@@ -1,3 +1,4 @@
+import { MAX_FILE_LENGTH } from '@/libs/constants';
 import { create } from 'zustand';
 
 // 상품명, 상품설명, 사진
@@ -25,7 +26,7 @@ export const useStep5Store = create<Step5Store>((set, get) => ({
 
   isBtnValid: () => {
     const { title, desc, files } = get();
-    return title.trim() !== '' && desc.trim() !== '' && files.length !== 0;
+    return title.trim() !== '' && desc.trim() !== '' && files.length !== 0 && files.length <= MAX_FILE_LENGTH;
   },
 
   reset: () => {

src/libs/constants/index.ts

@@ -1 +1,8 @@
 export const MAX_PRICE = 999999;
+export const MAX_LOCATION = 100;
+export const MAX_TITLE = 64;
+export const MAX_DESC = 1000;
+export const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png', 'webp'];
+export const MAX_SIZE_MB = 5;
+export const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
+export const MAX_FILE_LENGTH = 6;