codeit-bootcamp-frontend · GANGYIKIM · May 15, 2025 · May 11, 2025 · May 11, 2025 · May 11, 2025
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
@@ -8,7 +8,7 @@
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>판다마켓</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -3,6 +3,7 @@ import { Global } from "@emotion/react";
 import Header from "./components/Header/Header";
 import MainPage from "./pages/MainPage";
 import ItemPage from "./pages/ItemPage";
+import AddPage from "./pages/AddPage";
 import GlobalStyles from "./styles/GlobalStyles";
 import BoardPage from "./pages/BoardPage";
 
@@ -14,6 +15,7 @@ function App() {
         <Route element={<Header />}>
           <Route index element={<MainPage />} />
           <Route path="/items" element={<ItemPage />} />
+          <Route path="/additem" element={<AddPage />} /> 
           <Route path="/board" element={<BoardPage />} />
         </Route>
       </Routes>

diff --git a/src/assets/icons/ic_X.png b/src/assets/icons/ic_X.png
diff --git a/src/assets/icons/ic_plus.png b/src/assets/icons/ic_plus.png
diff --git a/src/components/FormHeader/FormHeader.jsx b/src/components/FormHeader/FormHeader.jsx
@@ -0,0 +1,19 @@
+import * as S from './formHeader.styles';
+import { titleStyle } from '../../styles/common';
+
+const FormHeader = ({ isFormValid }) => {
+  return (
+    <div css={S.formHeaderStyle}>
+      <h1 css={titleStyle}>상품 등록하기</h1>
+      <button
+        css={S.submitButtonStyle}
+        type="submit"
+        disabled={!isFormValid}
+      >
+        등록
+      </button>
+    </div>
+  );
+};
+
+export default FormHeader;
diff --git a/src/components/FormHeader/formHeader.styles.js b/src/components/FormHeader/formHeader.styles.js
@@ -0,0 +1,22 @@
+import { css } from "@emotion/react";
+
+export const formHeaderStyle = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2.4rem;
+`;
+
+export const submitButtonStyle = css`
+  width: 7.4rem;
+  height: 4.2rem;
+  border-radius: 0.8rem;
+  background: #3692ff;
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #F3F4F6;
+
+  &:disabled {
+    background: #9CA3AF;
+  }
+`;
diff --git a/src/components/FormImageUpload/FormImageUpload.jsx b/src/components/FormImageUpload/FormImageUpload.jsx
@@ -0,0 +1,45 @@
+import * as S from './formImageUpload.styles';
+import plusImg from '../../assets/icons/ic_plus.png';
+
+const FormImageUpload = ({
+  imagePreview,
+  onClick,
+  onChange,
+  onRemove,
+  errorMessage,
+  fileInputRef
+}) => {
+  return (
+    <>
+      <label>상품 이미지</label>
+      <div css={S.imageContainerStyle}>
+        <div css={S.formImageBoxStyle} onClick={onClick}>
-        <div css={S.formImageBoxStyle} onClick={onClick}>
+        <label css={S.formImageBoxStyle}> // 클릭시 내부의 input이 선택된것과 동일함.
-        <div css={S.formImageBoxStyle} onClick={onClick}>
+        <label css={S.formImageBoxStyle}> // 클릭시 내부의 input이 선택된것과 동일함.
+          <img src={plusImg} alt="plus" />
+          <p>이미지 등록</p>
+          <input
+            type="file"
+            accept="image/*"
+            ref={fileInputRef}
+            onChange={onChange}
+            style={{ display: 'none' }}
+          />
+        </div>
+
+        {imagePreview && (
+          <div css={S.itemPreviewContainerStyle}>
+            <img src={imagePreview} alt="preview" css={S.previewImageStyle} />
+            <button
+              onClick={onRemove}
+              type="button"
+              css={S.imageCloseButtonStyle}
+            />
+          </div>
+        )}
+      </div>
+
+      {errorMessage && <p css={S.errorMessageStyle}>{errorMessage}</p>}
+    </>
+  );
+};
+
+export default FormImageUpload;
diff --git a/src/components/FormImageUpload/formImageUpload.styles.js b/src/components/FormImageUpload/formImageUpload.styles.js
@@ -0,0 +1,66 @@
+import { css } from "@emotion/react";
+import mq from "../../styles/media";
+import { closeButtonStyle } from '../../styles/common';
+
+export const imageContainerStyle = css`
+  display: flex;
+  gap: 2.4rem;
+`;
+
+export const formImageBoxStyle = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  width: 16.8rem;
+  height: 16.8rem;
+  background-color: #F3F4F6;
+
+  p {
+    font-size: 1.6rem;
+    font-weight: 400;
+    color: #9CA3AF;
+  }
+
+  img {
+    width: 4.8rem;
+    height: 4.8rem;
+  }
+
+  ${mq({
+    width: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+    height: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+  })}
+`;
+
+export const itemPreviewContainerStyle = css`
+  position: relative;
+`;
+
+export const previewImageStyle = css`
+  width: 16.8rem;
+  height: 16.8rem;
+  object-fit: cover;
+  object-position: center;
+
+  ${mq({
+    width: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+    height: ['16.8rem', '16.8rem', '28.2rem', '28.2rem'],
+  })}
+`;
+
+export const imageCloseButtonStyle = css`
+  ${closeButtonStyle};
+  position: absolute;
+  top: 3%;
+  right: 3%;
+  width: 2.4rem;
+  height: 2.4rem;
+`;
+
+export const errorMessageStyle = css`
+  color: red;
+  font-size: 1.6rem;
+  margin-top: 1.6rem;
+`;
diff --git a/src/components/FormInputs/FormInputs.jsx b/src/components/FormInputs/FormInputs.jsx
@@ -0,0 +1,34 @@
+import * as S from './formInputs.styles';
+
+const FormInputs = ({ name, onNameChange, description, onDescriptionChange, price, onPriceChange }) => {
+  return (
+    <>
+      <label>상품명</label>
+      <input
+        css={S.inputStyle}
+        placeholder="상품명을 입력해주세요"
+        value={name}
+        onChange={(e) => onNameChange(e.target.value)}
+      />
+
+      <label>상품 소개</label>
+      <textarea
-      <label>상품 소개</label>
-      <textarea
+      <label htmlFor="id">상품 소개</label>
+      <textarea
+        id="id"
-      <label>상품 소개</label>
-      <textarea
+      <label htmlFor="id">상품 소개</label>
+      <textarea
+        id="id"
+        css={S.areaStyle}
+        placeholder="상품 소개를 입력해주세요"
+        value={description}
+        onChange={(e) => onDescriptionChange(e.target.value)}
+      />
+
+      <label>판매 가격</label>
+      <input
+        type="number"
+        css={S.inputStyle}
+        placeholder="판매 가격을 입력해주세요"
+        value={price}
+        onChange={(e) => onPriceChange(e.target.value)}
+      />
+    </>
+  );
+};
+
+export default FormInputs;
diff --git a/src/components/FormInputs/formInputs.styles.js b/src/components/FormInputs/formInputs.styles.js
@@ -0,0 +1,9 @@
+import { css } from "@emotion/react";
+
+export const inputStyle = css`
+  height: 5.6rem;
+`;
+
+export const areaStyle = css`
+  height: 28.2rem;
+`;
diff --git a/src/components/FormTags/FormTags.jsx b/src/components/FormTags/FormTags.jsx
@@ -0,0 +1,31 @@
+import * as S from './formTags.styles';
+
+const FormTags = ({ tagInput, tags, onTagInputChange, onTagKeyDown, onTagRemove }) => {
+  return (
+    <>
+      <label>태그</label>
+      <input
+        css={S.inputStyle}
+        placeholder="태그를 입력해주세요"
+        value={tagInput}
+        onChange={onTagInputChange}
+        onKeyDown={onTagKeyDown}
+      />
+
+      <div css={S.tagListContainerStyle}>
+        {tags.map((tag, index) => (
+          <div key={index} css={S.tagItemStyle}>
+            {`#${tag}`}
+            <button
+              type="button"
+              onClick={() => onTagRemove(index)}
+              css={S.tagButtonStyle}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default FormTags;
diff --git a/src/components/FormTags/formTags.styles.js b/src/components/FormTags/formTags.styles.js
@@ -0,0 +1,27 @@
+import { css } from "@emotion/react";
+import { closeButtonStyle } from '../../styles/common';
+
+export const tagListContainerStyle = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+`;
+
+export const tagItemStyle = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  background-color: #f2f2f2;
+  padding: 0.6rem 1.2rem;
+  border-radius: 26px;
+  font-size: 1.6rem;
+  font-weight: 400;
+`;
+
+export const tagButtonStyle = css`
+  ${closeButtonStyle};
+  width: 2rem;
+  height: 2rem;
+`;
diff --git a/src/components/Nav/Nav.jsx b/src/components/Nav/Nav.jsx
@@ -1,7 +1,12 @@
-import { NavLink } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 import { ulContainerStyle, navTitleStyle } from "./Nav.styles";
+import { css } from "@emotion/react";
 
 const Nav = () => {
+
+  const location = useLocation();
+  const isMarketActive = location.pathname.startsWith("/items") || location.pathname === "/additem";
+
   return (
     <nav>
       <ul css={ulContainerStyle}>
@@ -11,7 +16,7 @@ const Nav = () => {
           </NavLink>
         </li>
         <li>
-          <NavLink to="items" css={navTitleStyle}>
+          <NavLink to="items" css={[navTitleStyle, isMarketActive && css`color: #3692ff;`]}>
             중고마켓
           </NavLink>
         </li>

diff --git a/src/components/ToolBar/TooBar.styles.js b/src/components/ToolBar/TooBar.styles.js
@@ -41,6 +41,8 @@ export const inputStyle = css`
   background-color: #F3F4F6;
   padding-left: 4.4rem;
   padding-block: 0.9rem;
+  font-size: 1.6rem;
+  font-weight: 400;
 
   ${mq({
     width: ['28.8rem', '24.2rem', '24.2rem', '32.5rem'],