-
+
diff --git a/src/Hooks/useWindowSize.js b/src/Hooks/useWindowSize.js
index 23c8426f..07fd7fc8 100644
--- a/src/Hooks/useWindowSize.js
+++ b/src/Hooks/useWindowSize.js
@@ -1,18 +1,20 @@
import { useState, useEffect } from "react";
-
-const useWindowSize = () => {
+import throttle from "lodash.throttle";
+export default function useWindowSize() {
const [deviceType, setDeviceType] = useState("desktop");
- const handleResize = () => {
- if (window.matchMedia("(max-width: 767px)").matches) {
- setDeviceType("mobile");
- } else if (window.matchMedia("(max-width: 1199px)").matches) {
- setDeviceType("tablet");
- } else {
- setDeviceType("desktop");
- }
- };
-
+ //
useEffect(() => {
+ const handleResize = throttle(() => {
+ if (window.matchMedia("(max-width: 375px)").matches) {
+ setDeviceType("mobile");
+ return;
+ }
+ if (window.matchMedia("(max-width: 768px)").matches) {
+ setDeviceType("tablet");
+ return;
+ }
+ setDeviceType("desktop");
+ }, 2000);
handleResize();
window.addEventListener("resize", handleResize);
return () => {
@@ -20,6 +22,4 @@ const useWindowSize = () => {
};
}, []);
return deviceType;
-};
-
-export default useWindowSize;
+}
diff --git a/img/root_img/Img_home_01.svg b/src/assets/LandingImg/landing01.svg
similarity index 100%
rename from img/root_img/Img_home_01.svg
rename to src/assets/LandingImg/landing01.svg
diff --git a/img/root_img/Img_home_02.svg b/src/assets/LandingImg/landing02.svg
similarity index 100%
rename from img/root_img/Img_home_02.svg
rename to src/assets/LandingImg/landing02.svg
diff --git a/img/root_img/Img_home_03.svg b/src/assets/LandingImg/landing03.svg
similarity index 100%
rename from img/root_img/Img_home_03.svg
rename to src/assets/LandingImg/landing03.svg
diff --git a/img/root_img/home_bottom_img.svg b/src/assets/Logo/Panda_Bottom_Img.svg
similarity index 100%
rename from img/root_img/home_bottom_img.svg
rename to src/assets/Logo/Panda_Bottom_Img.svg
diff --git a/img/root_img/home_top_img.svg b/src/assets/Logo/Panda_Top_Img.svg
similarity index 100%
rename from img/root_img/home_top_img.svg
rename to src/assets/Logo/Panda_Top_Img.svg
diff --git a/src/assets/Logo/pandaLogo.svg b/src/assets/Logo/pandaLogo.svg
new file mode 100644
index 00000000..16704c01
--- /dev/null
+++ b/src/assets/Logo/pandaLogo.svg
@@ -0,0 +1,14 @@
+
diff --git a/src/assets/textLogo.svg b/src/assets/Logo/textLogo.svg
similarity index 100%
rename from src/assets/textLogo.svg
rename to src/assets/Logo/textLogo.svg
diff --git a/src/assets/ic_google.svg b/src/assets/ic_google.svg
deleted file mode 100644
index 39de6337..00000000
--- a/src/assets/ic_google.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/src/assets/ic_kakao.svg b/src/assets/ic_kakao.svg
deleted file mode 100644
index 15dc4d0f..00000000
--- a/src/assets/ic_kakao.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-
diff --git a/src/assets/icons/DeleteIcon.svg b/src/assets/icons/DeleteIcon.svg
new file mode 100644
index 00000000..05149008
--- /dev/null
+++ b/src/assets/icons/DeleteIcon.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/myLogo.svg b/src/assets/icons/myLogo.svg
similarity index 100%
rename from src/assets/myLogo.svg
rename to src/assets/icons/myLogo.svg
diff --git a/src/assets/icons/plusIcon.svg b/src/assets/icons/plusIcon.svg
new file mode 100644
index 00000000..5bb9abf5
--- /dev/null
+++ b/src/assets/icons/plusIcon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/root_img/Img_home_01.svg b/src/assets/root_img/Img_home_01.svg
deleted file mode 100644
index 56aa0038..00000000
--- a/src/assets/root_img/Img_home_01.svg
+++ /dev/null
@@ -1,67 +0,0 @@
-
diff --git a/src/assets/root_img/Img_home_02.svg b/src/assets/root_img/Img_home_02.svg
deleted file mode 100644
index 4137dc0b..00000000
--- a/src/assets/root_img/Img_home_02.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-
diff --git a/src/assets/root_img/Img_home_03.svg b/src/assets/root_img/Img_home_03.svg
deleted file mode 100644
index 93e003c3..00000000
--- a/src/assets/root_img/Img_home_03.svg
+++ /dev/null
@@ -1,53 +0,0 @@
-
diff --git a/src/assets/root_img/home_bottom_img.svg b/src/assets/root_img/home_bottom_img.svg
deleted file mode 100644
index 8aac2a05..00000000
--- a/src/assets/root_img/home_bottom_img.svg
+++ /dev/null
@@ -1,111 +0,0 @@
-
diff --git a/src/assets/root_img/home_top_img.svg b/src/assets/root_img/home_top_img.svg
deleted file mode 100644
index 1b6c8523..00000000
--- a/src/assets/root_img/home_top_img.svg
+++ /dev/null
@@ -1,78 +0,0 @@
-
diff --git a/src/assets/root_img/ic_facebook.svg b/src/assets/root_img/ic_facebook.svg
deleted file mode 100644
index 8491c2f8..00000000
--- a/src/assets/root_img/ic_facebook.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/root_img/ic_instagram.svg b/src/assets/root_img/ic_instagram.svg
deleted file mode 100644
index c83306f8..00000000
--- a/src/assets/root_img/ic_instagram.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/root_img/ic_twitter.svg b/src/assets/root_img/ic_twitter.svg
deleted file mode 100644
index 14a6069a..00000000
--- a/src/assets/root_img/ic_twitter.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/root_img/ic_youtube.svg b/src/assets/root_img/ic_youtube.svg
deleted file mode 100644
index 8270b35a..00000000
--- a/src/assets/root_img/ic_youtube.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/src/assets/root_img/textLogo.svg b/src/assets/root_img/textLogo.svg
deleted file mode 100644
index 010acd45..00000000
--- a/src/assets/root_img/textLogo.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/img/root_img/ic_facebook.svg b/src/assets/snsLogo/Facebook_ic.svg
similarity index 100%
rename from img/root_img/ic_facebook.svg
rename to src/assets/snsLogo/Facebook_ic.svg
diff --git a/img/root_img/ic_instagram.svg b/src/assets/snsLogo/Instagram_ic.svg
similarity index 100%
rename from img/root_img/ic_instagram.svg
rename to src/assets/snsLogo/Instagram_ic.svg
diff --git a/img/root_img/ic_twitter.svg b/src/assets/snsLogo/Twitter_ic.svg
similarity index 100%
rename from img/root_img/ic_twitter.svg
rename to src/assets/snsLogo/Twitter_ic.svg
diff --git a/img/root_img/ic_youtube.svg b/src/assets/snsLogo/Youtube_ic.svg
similarity index 100%
rename from img/root_img/ic_youtube.svg
rename to src/assets/snsLogo/Youtube_ic.svg
diff --git a/img/ic_google.svg b/src/assets/snsLogo/ic_google.svg
similarity index 100%
rename from img/ic_google.svg
rename to src/assets/snsLogo/ic_google.svg
diff --git a/img/ic_kakao.svg b/src/assets/snsLogo/ic_kakao.svg
similarity index 100%
rename from img/ic_kakao.svg
rename to src/assets/snsLogo/ic_kakao.svg
diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
new file mode 100644
index 00000000..8113bd34
--- /dev/null
+++ b/src/components/Card/Card.js
@@ -0,0 +1,49 @@
+import landing01 from "../../assets/LandingImg/landing01.svg";
+import landing02 from "../../assets/LandingImg/landing02.svg";
+import landing03 from "../../assets/LandingImg/landing03.svg";
+//
+import useWindowSize from "../../hooks/useWindowSize";
+import "./Card.css";
+//
+const contentValue = {
+ hotitem: {
+ title: "Hot Item",
+ src: landing01,
+ subtitle: "인기상품을 확인해 보세요",
+ detail: " 가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요",
+ },
+ search: {
+ title: "Search",
+ src: landing02,
+ subtitle: "구매를 원하는 상품을 검색하세요",
+ detail: " 구매하고 싶은 물품은 검색해서 쉽게 찾아보세요",
+ },
+ register: {
+ title: "Register",
+ src: landing03,
+ subtitle: "판매를 원하는 상품을 등록하세요",
+ detail: " 구매하고 싶은 물품은 검색해서 쉽게 찾아보세요",
+ },
+};
+function Card({ value }) {
+ const device = useWindowSize();
+ const cardData = contentValue[value];
+ if (!cardData) {
+ return
다시 시도해 주세요.
;
+ }
+
+ return (
+ <>
+
+
+
+
{cardData.title}
+
{cardData.subtitle}
+
{cardData.detail}
+
+
+
+ );
+}
+
+export default Card;
diff --git a/src/components/ItemsList.js b/src/components/ItemsList.js
index 56e59ef1..317361b3 100644
--- a/src/components/ItemsList.js
+++ b/src/components/ItemsList.js
@@ -1,6 +1,6 @@
import favoriteImg from "../assets/favoriteLogo.svg";
import styled from "styled-components";
-import useWindowSize from "../Hooks/useWindowSize";
+import useWindowSize from "../hooks/useWindowSize";
//
const ByDevice = {
@@ -68,12 +68,11 @@ const Price = styled.div`
`;
const FavoriteCount = styled.span`
- color: #4b5563;'
+ color: #4b5563;
font-size: 12px;
font-weight: 500;
line-height: 18px;
text-align: left;
-
`;
const ProductImg = styled.img`
diff --git a/src/components/Main.js b/src/components/Main.js
index 20b27a9c..c04bf732 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,29 +1,32 @@
-import useWindowSize from "../Hooks/useWindowSize";
+import { Route, BrowserRouter, Routes } from "react-router-dom";
+import { createGlobalStyle } from "styled-components";
+//
+import LandingPage from "../pages/LandingPage/LandingPage.jsx";
import App from "../App";
import HomePage from "../pages/HomePage";
-import AddItem from "../pages/AddItem";
+import AddItem from "../pages/AddItem/AddItem.jsx";
+//
+import useWindowSize from "../hooks/useWindowSize";
//
-import { Route, BrowserRouter, Routes } from "react-router-dom";
-import { createGlobalStyle } from "styled-components"; //import
-
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
}
-
body {
font-family: 'Pretendard', sans-serif;
font-display: swap;
+ margin: 0;
+ padding: 0;
}
- img {
- border-radius: 16px;
+ html {
+ margin: 0;
+ padding: 0;
}
- a {
+ a {
text-decoration: none;
color: #ffffff;
}
`;
-
//
function Main() {
const deviceType = useWindowSize();
@@ -32,7 +35,8 @@ function Main() {
- }>
+ } />
+ }>
} />
} />
diff --git a/src/components/Nav.js b/src/components/Nav.js
deleted file mode 100644
index 06bd2bf5..00000000
--- a/src/components/Nav.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Link, NavLink } from "react-router-dom";
-import Logo from "../assets/root_img/textLogo.svg";
-import myLogo from "../assets/myLogo.svg";
-import styled from "styled-components";
-import useWindowSize from "../Hooks/useWindowSize";
-import textLogo from "../assets/textLogo.svg";
-
-const PandaMarketLogo = styled.img`
- width: 153px;
- height: 51px;
- margin-left: 200px;
- cursor: pointer;
- margin-left: 200px;
- margin-left: ${({ $device }) => ($device === "desktop" ? "200px" : "15px")};
-`;
-
-const MobilePandaMarketLogo = styled.img`
- width: 81px;
- height: 27px;
- margin-left: 15px;
-`;
-
-const activeLink = ({ isActive, $device }) => {
- return {
- color: isActive ? "#3692FF" : "#4b5563",
- width: "108px",
- padding: "21px 15px 21px 15px",
- fontSize: "18px",
- fontWeight: "700px",
- gap: $device === "mobile" ? "8px" : "21px",
- lineHeight: "26px",
- textAlign: "center",
- border: "none",
- backgroundColor: "#ffffff",
- };
-};
-const MyLogoButton = styled.img`
- width: 40px;
- height: 40px;
- margin-right: ${({ $device }) => ($device === "desktop" ? "200px" : "15px")};
-`;
-
-const NavArea = styled.div`
- position: fixed;
- top: 0px;
- left: 0px;
- width: 100%;
- height: 70px;
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- align-items: center;
- background-color: #ffffff;
-`;
-
-const NavButtonLeft = styled.div`
- display: flex;
- align-items: center;
- gap: ${({ $device }) => ($device === "mobile" ? "8px" : "21px")};
-`;
-function Nav() {
- const device = useWindowSize();
- return (
-
-
-
- {device === "mobile" && (
-
- )}
- {device !== "mobile" && (
-
- )}
-
-
- 자유게시판
-
-
- 중고마켓
-
-
-
-
-
-
-
-
{placeholder}
+
+
+
+ {imgPreview && (
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/components/common/Input/Input.style.jsx b/src/components/common/Input/Input.style.jsx
new file mode 100644
index 00000000..062b9c9b
--- /dev/null
+++ b/src/components/common/Input/Input.style.jsx
@@ -0,0 +1,132 @@
+import styled, { css } from "styled-components";
+import theme from "../../../style/theme";
+//
+
+export const InputWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: left;
+ gap: 16px;
+`;
+
+export const Label = styled.label`
+ width: 100%;
+ height: 26px;
+ font-size: 18px;
+ color: ${theme.color.gray800};
+ font-weight: 700;
+ line-height: 26px;
+`;
+
+export const Input = styled.input`
+ width: 100%;
+ background-color: ${theme.color.gray100};
+ font-size: 16px;
+ font-weight: 400px;
+ line-height: 26px;
+ border-radius: 12px;
+ border: none;
+ color: ${theme.color.gray800};
+ position: relative;
+ height: 56px;
+ padding: 16px 24px;
+ &::placeholder {
+ color: ${theme.color.gray400};
+ line-height: normal;
+ font-size: 16px;
+ text-align: left;
+ position: absolute;
+ top: 16px;
+ left: 24px;
+ }
+ &:focus {
+ outline: none;
+ }
+ ${(props) =>
+ props.$textArea &&
+ css`
+ height: 282px;
+ `}
+`;
+
+//imgInput 부분
+export const ImgInputWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ @media (max-width: 375px) {
+ gap: 10px;
+ }
+ @media (min-width: 376px) and (max-width: 768px) {
+ gap: 10px;
+ }
+`;
+export const ImgInputContainer = styled.div`
+ width: 282px;
+ aspect-ratio: 1/ 1;
+ color: ${theme.color.gray800};
+ background-color: ${theme.color.gray100};
+ border-radius: 12px;
+ position: relative;
+ border: none;
+ @media (max-width: 375px) {
+ width: 168px;
+ }
+ @media (min-width: 376px) and (max-width: 768px) {
+ width: 168px;
+ }
+`;
+export const ImgInput = styled.input`
+ display: none;
+ width: 100%;
+ background-color: ${theme.color.gray100};
+ font-size: 16px;
+ font-weight: 400px;
+ line-height: 26px;
+ border-radius: 12px;
+ border: none;
+ color: ${theme.color.gray800};
+ position: relative;
+ ::placeholder {
+ color: ${theme.color.gray400};
+ line-height: normal;
+ font-size: 16px;
+ text-align: left;
+ position: absolute;
+ top: 10px;
+ }
+`;
+
+export const PlusLabelContainer = styled.label`
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: ${theme.color.gray400};
+ line-height: normal;
+ font-size: 16px;
+ text-align: center;
+`;
+export const PlusIcon = styled.img`
+ width: 48px;
+`;
+export const ImgPreviewWrapper = styled.div`
+ position: relative;
+`;
+export const PreviewImg = styled.img`
+ width: 282px;
+ aspect-ratio: 1/1;
+ @media (max-width: 375px) {
+ width: 168px;
+ }
+ @media (min-width: 376px) and (max-width: 768px) {
+ width: 168px;
+ }
+`;
+
+export const DeleteImg = styled.img`
+ position: absolute;
+ top: 15px;
+ right: 15px;
+`;
diff --git a/src/components/common/Layout/Footer.style.jsx b/src/components/common/Layout/Footer.style.jsx
new file mode 100644
index 00000000..0f6a10ac
--- /dev/null
+++ b/src/components/common/Layout/Footer.style.jsx
@@ -0,0 +1 @@
+import styled from "styled-components";
diff --git a/src/components/common/Layout/LandingFooter.jsx b/src/components/common/Layout/LandingFooter.jsx
new file mode 100644
index 00000000..8e546317
--- /dev/null
+++ b/src/components/common/Layout/LandingFooter.jsx
@@ -0,0 +1,56 @@
+import facebook_ic from "../../../assets/snsLogo/Facebook_ic.svg";
+import insta_ic from "../../../assets/snsLogo/Instagram_ic.svg";
+import twitter_ic from "../../../assets/snsLogo/Twitter_ic.svg";
+import youtube_ic from "../../../assets/snsLogo/Youtube_ic.svg";
+//
+import useWindowSize from "../../../hooks/useWindowSize";
+import { Link } from "react-router-dom";
+//
+function LandingFooter() {
+ const device = useWindowSize();
+ return (
+ <>
+
+
+
@codeit - 2024
+
+ Privacy Policy
+ faq
+
+
+
+
+
+
+
+
+
+ {device !== "mobile" && (
+
+ )}
+
+
+
+
+
+ 자유게시판
+
+
+ 중고마켓
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+// import Logo_pandaMarketText from "../../../assets/root_img/Logo_PandaMarketText.svg";
+// import Button from "../Button/Button.jsx";
+// import { Link } from "react-router-dom";
+// import * as S from "./Nav.style.jsx";
+
+// //
+// function LandingNav() {
+// return (
+//
+//
+//
+//
+//
+
+//
+//
+//
+//
+//
+// );
+// }
+
+// export default LandingNav;
diff --git a/src/components/common/Layout/Nav.style.jsx b/src/components/common/Layout/Nav.style.jsx
new file mode 100644
index 00000000..0add2b21
--- /dev/null
+++ b/src/components/common/Layout/Nav.style.jsx
@@ -0,0 +1,83 @@
+import styled from "styled-components";
+import theme from "../../../style/theme";
+//
+
+export const HeaderArea = styled.div`
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 70px;
+ background-color: ${theme.color.white};
+ padding: 10px 200px;
+ z-index: 50;
+ @media (max-width: 375px) {
+ padding: 15px 15px;
+ }
+ @media (min-width: 376px) and (max-width: 768px) {
+ padding: 10px 24px;
+ }
+`;
+
+export const ContentsWrapper = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+export const Contents = styled.div`
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`;
+export const NavContents = styled.div`
+ display: flex;
+ gap: 32px;
+ align-items: center;
+
+ @media (max-width: 375px) {
+ gap: 8px;
+ }
+`;
+
+export const LogoContainer = styled.div`
+ display: flex;
+ gap: 9px;
+`;
+export const PandaImg = styled.img`
+ width: 40px;
+ height: 40px;
+`;
+
+export const Logo = styled.img`
+ width: 103px;
+ height: 51px;
+ cursor: pointer;
+ @media (max-width: 375px) {
+ width: 81px;
+ }
+`;
+
+export const NavLinkWrapper = styled.div`
+ display: flex;
+ gap: 30px;
+
+ @media (max-width: 375px) {
+ gap: 8px;
+ }
+`;
+export const activeLink = ({ isActive }) => ({
+ color: isActive ? "#3692FF" : "#4b5563",
+ width: `${({ $device }) => ($device === "mobile" ? "70px" : "108px")}`,
+ padding: `${({ $device }) =>
+ $device === "mobile" ? "7px 0px" : "11px 0px"}`,
+ fontSize: `${({ $device }) => ($device === "mobile" ? "16px" : "18")}`,
+ fontWeight: "700",
+ lineHeight: "26px",
+ textAlign: "center",
+ justifyContent: "center",
+});
+export const MyLogoButton = styled.img`
+ width: 40px;
+ height: 40px;
+`;
diff --git a/src/constants/globalConstant.jsx b/src/constants/globalConstant.jsx
new file mode 100644
index 00000000..16434e99
--- /dev/null
+++ b/src/constants/globalConstant.jsx
@@ -0,0 +1,11 @@
+export const placeholder = {
+ img: "이미지 등록",
+ productName: "상품명을 입력해주세요",
+ content: "상품 소개를 입력해주세요",
+ price: "판매 가격을 입력해주세요",
+ tag: "태그를 입력해주세요",
+};
+
+export const button = {
+ send: "등록",
+};
diff --git a/src/pages/AddItem.js b/src/pages/AddItem.js
deleted file mode 100644
index 973d569b..00000000
--- a/src/pages/AddItem.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function AddItem() {
- return (
-
- );
-}
-export default AddItem;
diff --git a/src/pages/AddItem/AddItem.jsx b/src/pages/AddItem/AddItem.jsx
new file mode 100644
index 00000000..5dc50812
--- /dev/null
+++ b/src/pages/AddItem/AddItem.jsx
@@ -0,0 +1,124 @@
+import Button from "../../components/common/Button/Button";
+import { placeholder, button } from "../../constants/globalConstant";
+import * as I from "../../components/common/Input/Input";
+import * as S from "./AddItem.style";
+import Tag from "../../components/Tag/Tag";
+import { useState } from "react";
+//
+const INITIAL_DATA = {
+ img: "",
+ name: "",
+ content: "",
+ price: 0,
+ tags: [],
+};
+function AddItem() {
+ const [tag, setTag] = useState("");
+ const [formData, setFormData] = useState(INITIAL_DATA);
+ //
+ const handleChange = (target) => {
+ setFormData({ ...formData, [target.name]: target.value });
+ //ToDo: img 프로퍼티에는 imgInput에서 넘겨준 file 객체가 담기고 있음 추후 백엔드 확인해야함
+ };
+
+ const CreateTag = (e) => {
+ if (e.key === "Enter" && tag.trim() !== "") {
+ const notDuplicate = formData.tags.includes(tag.trim());
+ if (!notDuplicate) {
+ setFormData((prev) => ({
+ ...prev,
+ tags: [...prev.tags, tag.trim()],
+ }));
+ }
+ setTag("");
+ e.target.value = "";
+ }
+ };
+
+ const handleClickTagDelete = (tag) => {
+ const filterTags = formData.tags.filter((prev) => prev !== tag);
+ setFormData((prev) => ({ ...prev, tags: filterTags }));
+ };
+
+ const requiredInput = ["name", "content", "tags", "price"];
+ const isInputValid = requiredInput.every((field) => {
+ const value = formData[field];
+ switch (typeof value) {
+ case "object":
+ if (Array.isArray(value) && value.length === 0) {
+ return false;
+ }
+ return true;
+ case "string":
+ return value.trim() !== "";
+
+ case "number":
+ return value > 0;
+ default:
+ return false;
+ }
+ });
+ return (
+
+
+
+ 상품 등록하기
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formData.tags &&
+ formData.tags.map((tag) => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+
+ );
+}
+export default AddItem;
diff --git a/src/pages/AddItem/AddItem.style.jsx b/src/pages/AddItem/AddItem.style.jsx
new file mode 100644
index 00000000..85cefafb
--- /dev/null
+++ b/src/pages/AddItem/AddItem.style.jsx
@@ -0,0 +1,62 @@
+import styled from "styled-components";
+
+export const Background = styled.div`
+ width: 100%;
+ margin: 0;
+ overflow-x: none;
+ padding: 24px 24px;
+ @media (max-width: 375px) {
+ padding: 24px 15px;
+ }
+ @media (min-width: 376px) and (max-width: 768px) {
+ padding: 16px 24px;
+ }
+`;
+export const Container = styled.div`
+ width: 100%;
+ display: flex;
+ gap: 29px;
+ flex-direction: column;
+
+ @media (max-width: 375px) {
+ width: 100%;
+ }
+ @media (min-width: 376px) and (max-width: 768px) {
+ width: 100%;
+ }
+`;
+
+export const FlexDiv = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ height: 42px;
+ width: 100%;
+`;
+export const Title = styled.p`
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 32px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+`;
+export const ButtonContainer = styled.div`
+ width: 74px;
+`;
+export const InputsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+`;
+
+export const TagInputContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+`;
+
+export const TagsContainer = styled.div`
+ width: 100%;
+ display: flex;
+ gap: 12px;
+`;
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 430da9e9..574e911a 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -4,7 +4,7 @@ import { getProducts, bestProducts } from "../api";
import { Link } from "react-router-dom";
import PageCount from "../components/pageCount";
import styled from "styled-components";
-import useWindowSize from "../Hooks/useWindowSize";
+import useWindowSize from "../hooks/useWindowSize";
import SelectBox from "../components/SelectBox";
//
diff --git a/src/pages/LandingPage/LandingPage.jsx b/src/pages/LandingPage/LandingPage.jsx
new file mode 100644
index 00000000..bed1e676
--- /dev/null
+++ b/src/pages/LandingPage/LandingPage.jsx
@@ -0,0 +1,47 @@
+import pandaImg1 from "../../assets/Logo/Panda_Top_Img.svg";
+import pandaImg2 from "../../assets/Logo/Panda_Bottom_Img.svg";
+//
+import Nav from "../../components/common/Layout/Nav";
+import Card from "../../components/Card/Card";
+import LandingFooter from "../../components/common/Layout/LandingFooter";
+import useWindowSize from "../../hooks/useWindowSize";
+import Button from "../../components/common/Button/Button";
+import { Link } from "react-router-dom";
+
+function LandingPage() {
+ const device = useWindowSize();
+ return (
+ <>
+
+
+
+
+
일상의 모든 물건을 거래해 보세요
+
+
+
+
+
+
+
+
+
+
+ 믿을 수 있는
+
+ 판다마켓 중고 거래
+
+
+
+
+