codeit-bootcamp-frontend · GANGYIKIM · May 12, 2025 · May 3, 2025 · May 3, 2025 · May 3, 2025
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    	<!-- HTML Meta Tags -->
     <title>판다마켓</title>
     <meta name="description" content="일상의 모든 물건을 거래해보세요">

diff --git a/public/images/common/ic_plus.svg b/public/images/common/ic_plus.svg
diff --git a/public/images/common/ic_tag_x.svg b/public/images/common/ic_tag_x.svg
diff --git a/src/components/Common/CommonButton.jsx b/src/components/Common/CommonButton.jsx
@@ -1,17 +1,17 @@
 import styles from './styles/CommonButton.module.css';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-const CommonButton = ({buttonType, path=""}) => {
+const CommonButton = ({buttonType, path="", disabled=false}) => {
   const navigate = useNavigate();
   const location = useLocation();
   const currentPath = location.pathname;
-  console.log(currentPath);
   const isItems = currentPath === "/items" ? styles.isItems : "";
   return (
     <button
       type={buttonType.buttonType}
       className={`${styles.commonButton} ${styles[buttonType.buttonStyle]} ${isItems}`}
       onClick={() => path && navigate(path)}
+      disabled={disabled}
     >
       {buttonType.buttonText}
     </button>

diff --git a/src/components/Common/styles/CommonButton.module.css b/src/components/Common/styles/CommonButton.module.css
@@ -11,6 +11,10 @@
     background-color: var(--blue);
     color: #fff;
   }
+  &:disabled {
+    background-color: var(--gray400);
+    cursor: not-allowed;
+  }
 }
 
 @media (max-width: 768px) {

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -6,7 +6,8 @@ const Header = () => {
   const navigate = useNavigate();
   const location = useLocation();
   return (
-    <header className={`header ${location.pathname === '/items' || location.pathname === '/board' ? 'header02' : ''}`}>
+    <header
+      className={`header ${location.pathname === '/items' || location.pathname === '/additem' ? 'header02' : ''}`}>
       <div className='inner02'>
         <h1 className='header-logo'>
           <button onClick={() => navigate('/')}>
@@ -15,7 +16,13 @@ const Header = () => {
         </h1>
         <nav className='header-nav'>
           <NavLink to='/board'>자유게시판</NavLink>
-          <NavLink to='/items'>중고마켓</NavLink>
+          <NavLink
+            to='/items'
+            className={({ isActive }) =>
+              location.pathname === '/items' || location.pathname === '/additem' ? 'active' : ''
+            }>
+            중고마켓
+          </NavLink>
         </nav>
         <button onClick={() => navigate('/login')} className='header-login'>
           로그인

diff --git a/src/components/Header/styles/Header.css b/src/components/Header/styles/Header.css
@@ -86,11 +86,7 @@
   }
 }
 @media all and (max-width: 1024px) {
-  .header .inner02 {
-    max-width: none;
-    margin-inline: 3.23vw;
-    height: 9.41vw;
-  }
+
   .header-login {
     max-width: 17.2vw;
     height: 6.45vw;
@@ -104,6 +100,11 @@
   }
 }
 @media all and (max-width: 768px) {
+  .header .inner02 {
+    max-width: none;
+    margin-inline: 3.23vw;
+    height: 9.41vw;
+  }
   .header-logo button {
     max-height: 5.21vw;
     max-width: 19.92vw;

diff --git a/src/contexts/AddItemFormContext.jsx b/src/contexts/AddItemFormContext.jsx
@@ -0,0 +1,31 @@
+import { createContext, useContext, useState } from 'react';
+
+export const AddItemFormContext = createContext();
+
+export function AddItemFormProvider({ children }) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [price, setPrice] = useState('');
+  const [tags, setTags] = useState([]);
+
+  const isFormValid = name && description && price && tags.length > 0;
+
+  return (
+    <AddItemFormContext.Provider
+      value={{
+        name,
+        setName,
+        description,
+        setDescription,
+        price,
+        setPrice,
+        tags,
+        setTags,
+        isFormValid,
+      }}>
+      {children}
+    </AddItemFormContext.Provider>
+  );
+}
+
+export const useAddItemForm = () => useContext(AddItemFormContext);
-export const useAddItemForm = () => useContext(AddItemFormContext);
+export const useAddItemForm = () => {
+  const _context = useContext(AddItemFormContext);
+
+  if (!_context) throw new Error(/** error msg */);
+  return _context;
+}
-export const useAddItemForm = () => useContext(AddItemFormContext);
+export const useAddItemForm = () => {
+  const _context = useContext(AddItemFormContext);
+
+  if (!_context) throw new Error(/** error msg */);
+  return _context;
+}
diff --git a/src/pages/AddItem/components/AddItemImage.jsx b/src/pages/AddItem/components/AddItemImage.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import styles from '../styles/AddItemImage.module.css';
+
+export default function AddItemImage() {
+  const [fileImg, setFileImg] = useState(null);
+  const [showFileLimitAlert , setShowFileLimitAlert ] = useState(false);
+  const handleFileChange = (e) => {
+    if (fileImg) {
+      setShowFileLimitAlert (true);
+      e.target.value = '';
+      return;
+    }
+    setFileImg(e.target.files[0]);
+    setShowFileLimitAlert (false);
+  }
+  const handleRemoveFile = () => {
+    setFileImg(null);
+    setShowFileLimitAlert(false);
+  };
+  return (
+    <>
+      <div className={styles.addItemImage}>
+        <input type='file' name='file' id='file' onChange={handleFileChange} />
+        <label htmlFor='file'>
+          <img src='/images/common/ic_plus.svg' alt='이미지 등록' />
+          이미지 등록
+        </label>
+        {fileImg && (
+          <div className={styles.addItemImagePreview}>
+            <img src={fileImg ? URL.createObjectURL(fileImg) : ''} alt='이미지 미리보기' />
+            <button type='button' onClick={handleRemoveFile}>
+              <img src='/images/common/ic_tag_x.svg' alt='이미지 삭제' />
+            </button>
+          </div>
+        )}
+      </div>
+      {showFileLimitAlert && <span className={styles.addItemImageAlert}>*이미지 등록은 최대 1개까지 가능합니다.</span>}
+    </>
+  );
+}
diff --git a/src/pages/AddItem/components/AddItemLists.jsx b/src/pages/AddItem/components/AddItemLists.jsx
@@ -0,0 +1,86 @@
+import styles from '../styles/AddItemLists.module.css';
+import AddItemImage from './AddItemImage';
+import AddItemTag from './AddItemTag';
+import { useState, useRef } from 'react';
-import { useState, useRef } from 'react';
+import { useRef } from 'react';
-import { useState, useRef } from 'react';
+import { useRef } from 'react';
+import { useAddItemForm } from '@/contexts/AddItemFormContext';
+
+export default function AddItemsLists() {
+  const inputRef = useRef(null);
+  const { name, setName, description, setDescription, price, setPrice } = useAddItemForm();
+
+  const handlePriceChange = (e) => {
+    const el = inputRef.current;
+    const rawValue = e.target.value;
+    const cursorPos = el.selectionStart;
+
+    // 쉼표 제거
+    const cleanValue = rawValue.replace(/[^0-9]/g, '');
+    const numericValue = cleanValue === '' ? 0 : Number(cleanValue);
+
+    // 상태 업데이트
+    changePrice(numericValue, rawValue, cursorPos);
+  };
+  const changePrice = (value, rawValue, prevCursorPos) => {
+      setPrice(value === 0 ? '' : value.toLocaleString());
-  const handlePriceChange = (e) => {
-    const el = inputRef.current;
-    const rawValue = e.target.value;
-    const cursorPos = el.selectionStart;
-
-    // 쉼표 제거
-    const cleanValue = rawValue.replace(/[^0-9]/g, '');
-    const numericValue = cleanValue === '' ? 0 : Number(cleanValue);
-
-    // 상태 업데이트
-    changePrice(numericValue, rawValue, cursorPos);
-  };
-  const changePrice = (value, rawValue, prevCursorPos) => {
-      setPrice(value === 0 ? '' : value.toLocaleString());
+  const handlePriceChange = (e) => {
+    const rawValue = e.target.value;
+    const cleanValue = rawValue.replace(/[^0-9]/g, '');
+    const numericValue = cleanValue === '' ? 0 : Number(cleanValue);
+
+    changePrice(numericValue, rawValue);
+  };
+  
+  const changePrice = (value, rawValue) => {
+      const prevCursorPos = inputRef.current.selectionStart;
+      
+      setPrice(value === 0 ? '' : value.toLocaleString());
-  const handlePriceChange = (e) => {
-    const el = inputRef.current;
-    const rawValue = e.target.value;
-    const cursorPos = el.selectionStart;
-
-    // 쉼표 제거
-    const cleanValue = rawValue.replace(/[^0-9]/g, '');
-    const numericValue = cleanValue === '' ? 0 : Number(cleanValue);
-
-    // 상태 업데이트
-    changePrice(numericValue, rawValue, cursorPos);
-  };
-  const changePrice = (value, rawValue, prevCursorPos) => {
-      setPrice(value === 0 ? '' : value.toLocaleString());
+  const handlePriceChange = (e) => {
+    const rawValue = e.target.value;
+    const cleanValue = rawValue.replace(/[^0-9]/g, '');
+    const numericValue = cleanValue === '' ? 0 : Number(cleanValue);
+
+    changePrice(numericValue, rawValue);
+  };
+  
+  const changePrice = (value, rawValue) => {
+      const prevCursorPos = inputRef.current.selectionStart;
+      
+      setPrice(value === 0 ? '' : value.toLocaleString());
+    // 커서 복원
+    setTimeout(() => {
+      if (!inputRef.current) return;
+
+      // 새 포맷된 문자열
+      const formatted = value === 0 ? '' : value.toLocaleString();
+
+      // 이전 값에서 커서까지 몇 개의 숫자가 있었는지 계산
+      const numbersBeforeCursor = rawValue.slice(0, prevCursorPos).replace(/[^0-9]/g, '').length;
+
+      // 새 포맷 문자열에서 그 숫자 위치를 다시 찾음
+      let newCursorPos = 0;
+      let digitsSeen = 0;
+
+      for (let i = 0; i < formatted.length; i++) {
+        if (/\d/.test(formatted[i])) digitsSeen++;
+        if (digitsSeen === numbersBeforeCursor) {
+          newCursorPos = i + 1;
+          break;
+        }
+      }
+
+      inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+    }, 0);
+  };
+
+
+
+
+  return (
+    <>
+      <li className={styles.addItemListItem}>
+        <p>상품 이미지</p>
+        <AddItemImage />
+      </li>
+      <li className={styles.addItemListItem}>
+        <label htmlFor='name'>상품명</label>
+        <input type='text' name='name' id='name' placeholder='상품명을 입력해주세요' value={name} onChange={(e) => setName(e.target.value)} />
+      </li>
+      <li className={styles.addItemListItem}>
+        <label htmlFor='description'>상품 소개</label>
+        <textarea name='description' id='description' placeholder='상품 소개를 입력해주세요' value={description} onChange={(e) => setDescription(e.target.value)} />
+      </li>
+      <li className={styles.addItemListItem}>
+        <label htmlFor='price'>판매가격</label>
+        <input
+          ref={inputRef}
+          type='text'
+          name='price'
+          id='price'
+          placeholder='판매 가격을 입력해주세요'
+          value={price}
+          onChange={handlePriceChange}
+        />
+      </li>
+      <li className={styles.addItemListItem}>
+        <AddItemTag />
+      </li>
+    </>
+  );
+}
+
diff --git a/src/pages/AddItem/components/AddItemTag.jsx b/src/pages/AddItem/components/AddItemTag.jsx
@@ -0,0 +1,54 @@
+import styles from '../styles/AddItemTag.module.css';
+import { useState } from 'react';
+import { useAddItemForm } from '@/contexts/AddItemFormContext';
+
+export default function AddItemTag() {
+  const { tags, setTags } = useAddItemForm();
+  const [tag, setTag] = useState('');
+  const handleTagChange = (e) => {
+    setTag(e.target.value);
+  }
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault(); // 폼 submit 방지
+      const newTag = tag.trim(); // 공백 제거
+      if (newTag.includes(' ')) {
+        alert('태그에는 띄어쓰기가 포함될 수 없습니다.');
+        return;
+      }
+      if (newTag && !tags.includes(newTag)) {
+        // 태그 중복, 띄어쓰기 방지
+        setTags([...tags, newTag]);
+        setTag('');
+      }
+    }
+  };
+  const handleTagDelete = (tag) => {
+    setTags([...tags].filter((ele) => ele !== tag));
+  };
+
+  return (
+    <>
+      <label htmlFor=''>태그</label>
+      <input
+        type='text'
+        name=''
+        id=''
+        placeholder='태그를 입력해주세요'
+        value={tag}
+        onChange={handleTagChange}
+        onKeyDown={handleKeyDown}
+      />
+      <ul className={styles.addItemTagList}>
+        {tags.map((tag, index) => (
+          <li key={`${tag}-${index}`}>
+            <span>&#35;{tag}</span>
+            <button type='button' onClick={() => handleTagDelete(tag)}>
+              <img src='/images/common/ic_tag_x.svg' alt='삭제' />
+            </button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
diff --git a/src/pages/AddItem/index.jsx b/src/pages/AddItem/index.jsx
@@ -1,3 +1,39 @@
+import Footer from '@/components/Footer/Footer';
+import Header from '@/components/Header/Header';
+import styles from './styles/index.module.css';
+import CommonButton from '@/components/Common/CommonButton';
+import '@/styles/items.css';
+import AddItemLists from './components/AddItemLists';
+import { AddItemFormProvider, useAddItemForm } from '@/contexts/AddItemFormContext';
+
 export default function AddItem() {
-  return <div>AddItem</div>;
+  return (
+    <>
+      <Header />
+      <div id='container' className={`${styles.addItemPage} itemsPage`}>
+        <AddItemFormProvider>
+          <AddItemContents />
+        </AddItemFormProvider>
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+function AddItemContents() {
+  const { isFormValid } = useAddItemForm();
+  return (
+    <form action='' className='inner04'>
+      <div className='contentHeader'>
+        <h3>상품 등록하기</h3>
+        <CommonButton
+          buttonType={{ buttonType: 'submit', buttonStyle: 'primary', buttonText: '등록' }}
+          disabled={!isFormValid}
+        />
+      </div>
+      <ul className={styles.addItemList}>
+        <AddItemLists />
+      </ul>
+    </form>
+  );
 }