diff --git a/index.html b/index.html index 4a5058af..2b7ea3a2 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,7 +8,7 @@ href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" /> - Vite + React + 판다마켓
diff --git a/src/App.jsx b/src/App.jsx index d00e7f8a..9f31321b 100644 --- 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() { }> } /> } /> + } /> } /> diff --git a/src/assets/icons/ic_X.png b/src/assets/icons/ic_X.png new file mode 100644 index 00000000..aa81e538 Binary files /dev/null and b/src/assets/icons/ic_X.png differ diff --git a/src/assets/icons/ic_plus.png b/src/assets/icons/ic_plus.png new file mode 100644 index 00000000..668c1444 Binary files /dev/null and b/src/assets/icons/ic_plus.png differ diff --git a/src/components/FormHeader/FormHeader.jsx b/src/components/FormHeader/FormHeader.jsx new file mode 100644 index 00000000..805e2108 --- /dev/null +++ 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 ( +
+

상품 등록하기

+ +
+ ); +}; + +export default FormHeader; diff --git a/src/components/FormHeader/formHeader.styles.js b/src/components/FormHeader/formHeader.styles.js new file mode 100644 index 00000000..d19a1680 --- /dev/null +++ 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; + } +`; \ No newline at end of file diff --git a/src/components/FormImageUpload/FormImageUpload.jsx b/src/components/FormImageUpload/FormImageUpload.jsx new file mode 100644 index 00000000..ce075a68 --- /dev/null +++ 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 ( + <> + +
+
+ plus +

이미지 등록

+ +
+ + {imagePreview && ( +
+ preview +
+ )} +
+ + {errorMessage &&

{errorMessage}

} + + ); +}; + +export default FormImageUpload; diff --git a/src/components/FormImageUpload/formImageUpload.styles.js b/src/components/FormImageUpload/formImageUpload.styles.js new file mode 100644 index 00000000..5a8aaf4e --- /dev/null +++ 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; +`; \ No newline at end of file diff --git a/src/components/FormInputs/FormInputs.jsx b/src/components/FormInputs/FormInputs.jsx new file mode 100644 index 00000000..d3244e22 --- /dev/null +++ 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 ( + <> + + onNameChange(e.target.value)} + /> + + +