diff --git a/src/Components/ProductList/GeneralItem.js b/src/Components/ProductList/GeneralItem.js
index 86004a346..0d9cd0e2d 100644
--- a/src/Components/ProductList/GeneralItem.js
+++ b/src/Components/ProductList/GeneralItem.js
@@ -1,19 +1,19 @@
-import defaultImg from "../../Assets/images/common/no_img.jpg";
+import { useState } from "react";
+import defaultImg from "../../Assets/images/app/common/no_img.jpg";
import btnWish from "../../Assets/images/productList/btn_wish.png";
-import styles from "../../Styles/ProductList/common.module.css";
+import styles from "../../Styles/ProductList/ProductList.module.css";
+import notFoundImg from "../../Assets/images/productList/not_found.png";
import ProductSearchForm from "./SearchForm";
-import { useState } from "react";
function GeneralItem({ item }) {
const [loaded, setLoaded] = useState(false);
const handleImgError = (e) => {
e.target.src = defaultImg;
};
- const price = item.price;
- const priceNum = price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+ const priceNum = item.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return (
<>
-
+
- {productList &&
- productList.map((item) => {
+ {productContainer.length !== 0 ? (
+ productContainer.map((item) => {
return (
-
);
- })}
+ })
+ ) : (
+
+
+
검색하신 상품을 찾을 수 없습니다
+
);
diff --git a/src/Components/ProductList/RecentFilter.js b/src/Components/ProductList/RecentFilter.js
index 0bd8ca565..493c8d45e 100644
--- a/src/Components/ProductList/RecentFilter.js
+++ b/src/Components/ProductList/RecentFilter.js
@@ -1,8 +1,8 @@
-import { useEffect, useState, useLayoutEffect } from "react";
-import productData from "../../api";
+import { useState, useEffect } from "react";
+import getProductData from "../../Api/api";
import { useMediaQuery } from "react-responsive";
-function RecentFilter({ productList, setProductList }) {
+function RecentFilter({ setProductList }) {
const isTablet = useMediaQuery({
query: "(max-width: 1200px)",
});
@@ -17,14 +17,14 @@ function RecentFilter({ productList, setProductList }) {
const handleLoad = async (options) => {
try {
- const { list } = await productData(options);
+ const { list } = await getProductData(options);
setProductList(list);
} catch (error) {
console.log(error);
}
};
- useLayoutEffect(() => {
+ useEffect(() => {
const handleResize = () => {
setIsResponsive(window.innerWidth);
isMobile ? setIsWidth(1) : isTablet ? setIsWidth(2) : setIsWidth(4);
@@ -36,7 +36,7 @@ function RecentFilter({ productList, setProductList }) {
};
}, [isResponsive]);
- useLayoutEffect(() => {
+ useEffect(() => {
handleLoad({
orderBy,
pageSize: isWidth,
diff --git a/src/Components/ProductList/SearchForm.js b/src/Components/ProductList/SearchForm.js
index 139320944..b6b4b69ba 100644
--- a/src/Components/ProductList/SearchForm.js
+++ b/src/Components/ProductList/SearchForm.js
@@ -1,19 +1,17 @@
import arrowDown from "../../Assets/images/productList/select_down.svg";
import productSearch from "../../Assets/images/productList/pd_search.png";
-import styles from "../../Styles/ProductList/common.module.css";
-import productData from "../../api";
+import styles from "../../Styles/ProductList/ProductList.module.css";
+import getProductData from "../../Api/api";
import { Link } from "react-router-dom";
-import { useState, useLayoutEffect, useEffect } from "react";
+import { useState, useEffect } from "react";
import { useMediaQuery } from "react-responsive";
-import Pagination from "react-js-pagination";
function ProductSearchForm({
- productList,
- setProductList,
+ setProductContainer,
page,
setPage,
- pageCount,
setPageCount,
+ setIsDataCount,
}) {
const isTablet = useMediaQuery({
query: "(max-width: 1200px)",
@@ -27,6 +25,7 @@ function ProductSearchForm({
const [search, setSearch] = useState("");
const [isWidth, setIsWidth] = useState(isMobile ? 4 : isTablet ? 6 : 10);
const [isResponsive, setIsResponsive] = useState(window.innerWidth);
+ setIsDataCount(isWidth);
const handleFilterToggle = () => {
toggle ? setToggle(false) : setToggle(true);
@@ -50,18 +49,21 @@ function ProductSearchForm({
const handleLoad = async (options) => {
try {
- const { list, totalCount } = await productData(options);
- setProductList(list);
+ const { list, totalCount } = await getProductData(options);
+ setProductContainer(list);
setPageCount(totalCount);
} catch (error) {
console.log(error);
}
};
- useLayoutEffect(() => {
+ useEffect(() => {
const handleResize = () => {
setIsResponsive(window.innerWidth);
isMobile ? setIsWidth(4) : isTablet ? setIsWidth(6) : setIsWidth(10);
+ // 페이지 창 크기 조절 시 pagination 1로 초기화(추후 불필요하단 판단 시 아래 코드만 삭제)
+ setPage(1);
+ setIsDataCount(isWidth);
};
window.addEventListener("resize", handleResize);
return () => {
@@ -70,7 +72,7 @@ function ProductSearchForm({
};
}, [isResponsive]);
- useLayoutEffect(() => {
+ useEffect(() => {
handleLoad({
orderBy,
pageSize: isWidth,
diff --git a/src/Components/ProductRgs/ImgPreview.js b/src/Components/ProductRgs/ImgPreview.js
new file mode 100644
index 000000000..c225ffd66
--- /dev/null
+++ b/src/Components/ProductRgs/ImgPreview.js
@@ -0,0 +1,15 @@
+import styles from "../../Styles/ProductRgs/ProductRgs.module.css";
+import deleteBtnImg from "../../Assets/images/productRgs/cancel.svg";
+
+function ImgPreview({ preview, handleDeleteClick }) {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+export default ImgPreview;
diff --git a/src/Components/ProductRgs/RegisterForm.js b/src/Components/ProductRgs/RegisterForm.js
new file mode 100644
index 000000000..028b1f99c
--- /dev/null
+++ b/src/Components/ProductRgs/RegisterForm.js
@@ -0,0 +1,67 @@
+import styles from "../../Styles/ProductRgs/ProductRgs.module.css";
+import { useState, useEffect } from "react";
+import RegisterInput from "./RegisterInput";
+import RegisterImgFile from "./RegisterImgFile";
+
+function RegisterForm() {
+ const INITIAL_VALUES = {
+ // 이미지 필수 추가 조건을 대비한 코드
+ // imgFile: null,
+ title: "",
+ description: "",
+ price: 0,
+ tag: [],
+ };
+
+ // file input 제외한 모든 input
+ const [values, setValues] = useState(INITIAL_VALUES);
+ // file input
+ const [imgFile, setImgFile] = useState("");
+ const [isDisableChk, setIsDisableChk] = useState(true);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ const formData = new FormData();
+ formData.append("title", values.title);
+ formData.append("description", values.description);
+ formData.append("price", values.price);
+ };
+
+ useEffect(() => {
+ if (
+ values.title !== "" &&
+ values.description !== "" &&
+ values.price > 0 &&
+ values.tag.length > 0
+ ) {
+ setIsDisableChk(false);
+ } else {
+ setIsDisableChk(true);
+ }
+ }, [values]);
+
+ return (
+
+ );
+}
+
+export default RegisterForm;
diff --git a/src/Components/ProductRgs/RegisterImgFile.js b/src/Components/ProductRgs/RegisterImgFile.js
new file mode 100644
index 000000000..856510272
--- /dev/null
+++ b/src/Components/ProductRgs/RegisterImgFile.js
@@ -0,0 +1,87 @@
+import styles from "../../Styles/ProductRgs/ProductRgs.module.css";
+import uploadImg from "../../Assets/images/productRgs/upload.svg";
+import ImgPreview from "./ImgPreview";
+import { useEffect, useRef, useState } from "react";
+
+// 상품 이미지 등록
+function RegisterImgFile({ imgFile, setImgFile }) {
+ const [preview, setPreview] = useState("");
+ const [isImgChk, setIsImgChk] = useState(false);
+ const inputRef = useRef();
+
+ const handleChange = (e) => {
+ const nextValue = e.target.files[0];
+ // 이미지 필수 추가 조건을 대비한 코드
+ // setValues((prevValue) => ({
+ // ...prevValue,
+ // ["imgFile"]: nextValue,
+ // }));
+ setImgFile(nextValue);
+ // 같은 파일을 재업로드 할 경우 event가 trigger되지 않는 버그 방지
+ e.target.value = "";
+ };
+
+ const handlePreventionClick = (e) => {
+ if (imgFile) {
+ e.preventDefault();
+ setIsImgChk(true);
+ } else {
+ setIsImgChk(false);
+ }
+ };
+
+ const handleDeleteClick = () => {
+ setIsImgChk(false);
+ setImgFile("");
+ setPreview("");
+ };
+
+ useEffect(() => {
+ if (!imgFile) return;
+ const nextPreview = URL.createObjectURL(imgFile);
+ setPreview(nextPreview);
+ }, [imgFile]);
+
+ return (
+
+
상품 이미지
+
+
+
+
+
+ {preview && (
+
+ )}
+
+ {isImgChk ? (
+
+ *이미지 등록은 최대 1개까지 가능합니다.
+
+ ) : (
+ ""
+ )}
+
+ );
+}
+
+export default RegisterImgFile;
diff --git a/src/Components/ProductRgs/RegisterInput.js b/src/Components/ProductRgs/RegisterInput.js
new file mode 100644
index 000000000..11781c10a
--- /dev/null
+++ b/src/Components/ProductRgs/RegisterInput.js
@@ -0,0 +1,132 @@
+import { useEffect, useRef, useState } from "react";
+import { NumericFormat } from "react-number-format";
+import styles from "../../Styles/ProductRgs/ProductRgs.module.css";
+import deleteBtnImg from "../../Assets/images/productRgs/cancel.svg";
+
+// 상품 정보 등록
+function RegisterInput({ setValues }) {
+ const [tag, setTag] = useState("");
+ const [tagList, setTagList] = useState([]);
+ const [price, setPrice] = useState();
+ const priceInput = useRef();
+
+ useEffect(() => {
+ if (priceInput.current.value === "") {
+ setPrice(0);
+ }
+ setValues((prevValue) => ({
+ ...prevValue,
+ ["price"]: price,
+ }));
+ }, [price]);
+
+ const handleChange = (name, value) => {
+ setValues((prevValue) => ({
+ ...prevValue,
+ [name]: value,
+ }));
+ };
+
+ const handleInputChange = (e) => {
+ let { name, value } = e.target;
+ handleChange(name, value);
+ };
+
+ // onKeyDown 이벤트 키가 Enter와 일치하면 실행
+ const activeEnter = (e) => {
+ const regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\+┼<>@\#$%&\'\"\\\(\=]/gi;
+ // onKeyDown 이벤트의 한글 입력 시 이벤트가 두 번 호출 되는 버그 방지
+ if (e.nativeEvent.isComposing) {
+ return;
+ }
+ // 특수문자 및 스페이스바 입력 방지
+ if (regExp.test(e.key)) {
+ e.preventDefault();
+ }
+ if (e.key === "Enter") {
+ if (e.target.value === "") {
+ // 빈 칸 엔터 방지
+ e.preventDefault();
+ } else {
+ handleChange("tag", tagList);
+ tagList.push(tag);
+ e.target.value = "";
+ }
+ }
+ };
+
+ const handleAddValue = (e) => {
+ setTag(e.target.value);
+ };
+
+ // 클릭한 태그 삭제
+ const handleDeleteClick = (i) => {
+ tagList.splice(i, 1);
+ handleChange("tag", tagList);
+ };
+
+ return (
+ <>
+
+
+
+
판매가격
+ {/* NumericFormat 라이브러리 사용으로 Number input 콤마 처리 */}
+
{
+ setPrice(values.value);
+ }}
+ thousandSeparator={true}
+ prefix={""}
+ getInputRef={priceInput}
+ />
+
+
+
태그
+
+
+ {tagList &&
+ // key 값으로 사용할 고유한 값이 없으므로 index 값 임시 부여
+ tagList.map((item, i) => {
+ return (
+ -
+
#{item}
+ handleDeleteClick(i)}
+ >
+
+
+ );
+ })}
+
+
+
+ );
+}
+
+export default RegisterInput;
diff --git a/src/Components/Registration/RegistrationForm.js b/src/Components/Registration/RegistrationForm.js
new file mode 100644
index 000000000..12cb9ca07
--- /dev/null
+++ b/src/Components/Registration/RegistrationForm.js
@@ -0,0 +1,308 @@
+import { Link } from "react-router-dom";
+import { useEffect, useRef, useState } from "react";
+import EmailValidation from "../App/EmailValidation";
+import styles from "../../Styles/loginRegistration/loginRegistration.module.css";
+import LogoImg from "../../Assets/images/loginRegistration/login_logo.png";
+import GoogleImg from "../../Assets/images/loginRegistration/google.svg";
+import KaKaoImg from "../../Assets/images/loginRegistration/kakao.svg";
+import InVisibleImg from "../../Assets/images/loginRegistration/btn_invisible.svg";
+import VisibleImg from "../../Assets/images/loginRegistration/btn_visible.svg";
+
+function RegistrationForm() {
+ const [getId, setGetId] = useState("");
+ const [isEmail, setIsEmail] = useState("");
+ const [isName, setIsName] = useState("");
+ const [isPassword, setIsPassword] = useState("");
+ const [isRePassword, setIsRePassword] = useState("");
+ const [emailWarnMsg, setEmailWarnMsg] = useState("");
+ const [nameWarnMsg, setNameWarnMsg] = useState("");
+ const [passwordWarnMsg, setPasswordWarnMsg] = useState("");
+ const [rePasswordWarnMsg, setRePasswordWarnMsg] = useState("");
+ const [emailRequiredChk, setEmailRequiredChk] = useState(true);
+ const [nameRequiredChk, setNameRequiredChk] = useState(true);
+ const [passwordRequiredChk, setPasswordRequiredChk] = useState(true);
+ const [rePasswordRequiredChk, setRePasswordRequiredChk] = useState(true);
+ const [emailErrorChk, setEmailErrorChk] = useState(false);
+ const [nameErrorChk, setNameErrorChk] = useState(false);
+ const [passwordErrorChk, setPasswordErrorChk] = useState(false);
+ const [rePasswordErrorChk, setRePasswordErrorChk] = useState(false);
+ const [passwordVisible, setPasswordVisible] = useState(false);
+ const [rePasswordVisible, setRePasswordVisible] = useState(false);
+ const [isSubmit, setIsSubmit] = useState("");
+ const isPasswordInput = useRef();
+ const isRePasswordInput = useRef();
+
+ const getEmailInfo = (e) => {
+ setGetId(e.target.id);
+ setIsEmail(e.target.value);
+ };
+
+ const getPasswordInfo = (e) => {
+ setGetId(e.target.id);
+ setIsPassword(e.target.value);
+ };
+
+ const getNameEmailInfo = (e) => {
+ setGetId(e.target.id);
+ setIsName(e.target.value);
+ };
+
+ const getRePasswordInfo = (e) => {
+ setGetId(e.target.id);
+ setIsRePassword(e.target.value);
+ };
+
+ const emailErrorContext = (txt, flag) => {
+ setEmailWarnMsg(txt);
+ setEmailRequiredChk(flag);
+ };
+
+ const passwordErrorContext = (txt, flag) => {
+ setPasswordWarnMsg(txt);
+ setPasswordRequiredChk(flag);
+ };
+
+ const nameErrorContext = (txt, flag) => {
+ setNameWarnMsg(txt);
+ setNameRequiredChk(flag);
+ };
+
+ const rePasswordErrorContext = (txt, flag) => {
+ setRePasswordWarnMsg(txt);
+ setRePasswordRequiredChk(flag);
+ };
+
+ const handlePasswordVisible = (e) => {
+ if (passwordVisible) {
+ setPasswordVisible(false);
+ } else {
+ setPasswordVisible(true);
+ }
+ };
+
+ const handleRePasswordVisible = (e) => {
+ if (rePasswordVisible) {
+ setRePasswordVisible(false);
+ } else {
+ setRePasswordVisible(true);
+ }
+ };
+
+ useEffect(() => {
+ switch (getId) {
+ case "useremail":
+ if (isEmail === "") {
+ emailErrorContext("이메일을 입력해주세요", true);
+ setEmailErrorChk(true);
+ } else if (isEmail !== "" && !EmailValidation(isEmail)) {
+ emailErrorContext("잘못된 이메일 형식입니다", true);
+ setEmailErrorChk(true);
+ } else if (EmailValidation(isEmail)) {
+ emailErrorContext("", false);
+ setEmailErrorChk(false);
+ }
+ break;
+ case "username":
+ if (isName === "") {
+ nameErrorContext("닉네임을 입력해주세요", true);
+ setNameErrorChk(true);
+ } else if (isName !== "") {
+ nameErrorContext("", false);
+ setNameErrorChk(false);
+ }
+ break;
+ case "userpw":
+ if (isPassword === "") {
+ passwordErrorContext("비밀번호를 입력해주세요", true);
+ setPasswordErrorChk(true);
+ } else if (isPassword.length < 8) {
+ passwordErrorContext("비밀번호를 8자 이상 입력해주세요", true);
+ setPasswordErrorChk(true);
+ } else if (isPassword.length >= 8) {
+ passwordErrorContext("", false);
+ setPasswordErrorChk(false);
+ }
+ break;
+ case "pwcheck":
+ if (isRePassword === "" || isRePassword !== isPassword) {
+ rePasswordErrorContext("비밀번호가 일치하지 않습니다", true);
+ setRePasswordErrorChk(true);
+ } else if (isRePassword === isPassword) {
+ rePasswordErrorContext("", false);
+ setRePasswordErrorChk(false);
+ }
+
+ if (passwordRequiredChk) {
+ rePasswordErrorContext("비밀번호를 먼저 입력해주세요", true);
+ setRePasswordErrorChk(true);
+ isRePasswordInput.current.value = "";
+ isPasswordInput.current.focus();
+ }
+ break;
+ default:
+ }
+ }, [isEmail, isPassword, isName, isRePassword]);
+
+ // 비밀번호 변경시 비밀번호 확인 인풋 초기화
+ useEffect(() => {
+ isRePasswordInput.current.value = "";
+ setRePasswordRequiredChk(true);
+ }, [isPassword]);
+
+ useEffect(() => {
+ if (
+ emailRequiredChk !== true &&
+ passwordRequiredChk !== true &&
+ nameRequiredChk !== true &&
+ rePasswordRequiredChk !== true
+ ) {
+ setIsSubmit(true);
+ } else {
+ setIsSubmit(false);
+ }
+ }, [
+ emailRequiredChk,
+ nameRequiredChk,
+ passwordRequiredChk,
+ rePasswordRequiredChk,
+ ]);
+ return (
+ <>
+
+
+
+
+
+
판다마켓
+
+
+
+
+
+
간편 로그인하기
+
+
+
window.open("https://www.google.com")}>
+
+
+
+
+
+ window.open("https://www.kakaocorp.com/page/")
+ }
+ >
+
+
+
+
+
+
+
+ 이미 회원이신가요? 로그인
+
+
+
+
+ );
+}
+
+export default RegistrationForm;
diff --git a/src/Main.js b/src/Main.js
new file mode 100644
index 000000000..3d4b5a6b3
--- /dev/null
+++ b/src/Main.js
@@ -0,0 +1,43 @@
+import "./Styles/App/Reset.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import ScrollToTop from "./Components/App/ScrollToTop";
+import { lazy, Suspense } from "react";
+import Loading from "./Components/App/Loading";
+import LoginPage from "./Pages/LoginPage/LoginPage";
+import RegistrationPage from "./Pages/RegistrationPage/RegistrationPage";
+
+const App = lazy(() => import("./Components/App/App"));
+const HomePage = lazy(() => import("./Pages/HomePage/HomePage"));
+const ItemsListPage = lazy(() =>
+ import("./Pages/ProductListPage/ItemsListPage")
+);
+const ProductRgsPage = lazy(() =>
+ import("./Pages/ProductRgsPage/ProductRgsPage")
+);
+
+function Main() {
+ return (
+
+
+ }>
+
+ }>
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+
+
+ );
+}
+
+export default Main;
diff --git a/src/Components/Main/Home.js b/src/Pages/HomePage/HomePage.js
similarity index 70%
rename from src/Components/Main/Home.js
rename to src/Pages/HomePage/HomePage.js
index 98d217596..834a00d31 100644
--- a/src/Components/Main/Home.js
+++ b/src/Pages/HomePage/HomePage.js
@@ -1,17 +1,14 @@
-import logo from "../../Assets/images/navi/logo.svg";
-import homeContent1 from "../../Assets/images/home/Img_home_01.png";
-import homeContent2 from "../../Assets/images/home/Img_home_02.png";
-import homeContent3 from "../../Assets/images/home/Img_home_03.png";
-import bannerImg1 from "../../Assets/images/home/Img_home_top.png";
-import bannerImg2 from "../../Assets/images/home/Img_home_bottom.png";
-import iconInsta from "../../Assets/images/home/ic_instagram.svg";
-import iconFacebook from "../../Assets/images/home/ic_facebook.svg";
-import iconYoutube from "../../Assets/images/home/ic_youtube.svg";
-import iconTwitter from "../../Assets/images/home/ic_twitter.svg";
-import styles from "../../Styles/Main/common.module.css";
+import logo from "../../Assets/images/app/navi/logo.svg";
+import homeContent1 from "../../Assets/images/app/home/Img_home_01.png";
+import homeContent2 from "../../Assets/images/app/home/Img_home_02.png";
+import homeContent3 from "../../Assets/images/app/home/Img_home_03.png";
+import bannerImg1 from "../../Assets/images/app/home/Img_home_top.png";
+import bannerImg2 from "../../Assets/images/app/home/Img_home_bottom.png";
+import styles from "../../Styles/Main/Main.module.css";
import { Link } from "react-router-dom";
+import Footer from "../../Components/App/Footer";
-function Home() {
+function HomePage() {
return (
<>
@@ -122,31 +119,9 @@ function Home() {
-
+
);
}
-export default Home;
+export default HomePage;
diff --git a/src/Pages/LoginPage/LoginPage.js b/src/Pages/LoginPage/LoginPage.js
new file mode 100644
index 000000000..9550be419
--- /dev/null
+++ b/src/Pages/LoginPage/LoginPage.js
@@ -0,0 +1,11 @@
+import LoginForm from "../../Components/Login/LoginForm";
+
+function LoginPage() {
+ return (
+ <>
+
+
+ );
+}
+
+export default LoginPage;
diff --git a/src/Components/ProductList/ItemsList.js b/src/Pages/ProductListPage/ItemsListPage.js
similarity index 53%
rename from src/Components/ProductList/ItemsList.js
rename to src/Pages/ProductListPage/ItemsListPage.js
index 023614e9c..bb28aa7ee 100644
--- a/src/Components/ProductList/ItemsList.js
+++ b/src/Pages/ProductListPage/ItemsListPage.js
@@ -1,29 +1,32 @@
import { useState } from "react";
-import styles from "../../Styles/ProductList/common.module.css";
-import ItemListNav from "../App/Navi";
-import HandlePagiNation from "../App/Pagination";
-import { BestItemsList } from "./BestItem";
-import GeneralItemsList from "./GeneralItem";
+import styles from "../../Styles/ProductList/ProductList.module.css";
+import ItemListNav from "../../Components/App/ItemListNav";
+import HandlePagiNation from "../../Components/App/Pagination";
+import { BestItemsList } from "../../Components/ProductList/BestItem";
+import GeneralItemsList from "../../Components/ProductList/GeneralItem";
function ItemsListPage() {
const [page, setPage] = useState(1);
const [pageCount, setPageCount] = useState(1);
+ const [isDataCount, setIsDataCount] = useState();
return (
<>
-
+
diff --git a/src/Pages/ProductRgsPage/ProductRgsPage.js b/src/Pages/ProductRgsPage/ProductRgsPage.js
new file mode 100644
index 000000000..e254560ef
--- /dev/null
+++ b/src/Pages/ProductRgsPage/ProductRgsPage.js
@@ -0,0 +1,13 @@
+import ItemListNav from "../../Components/App/ItemListNav";
+import RegisterForm from "../../Components/ProductRgs/RegisterForm";
+
+function ProductRgsPage() {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default ProductRgsPage;
diff --git a/src/Pages/RegistrationPage/RegistrationPage.js b/src/Pages/RegistrationPage/RegistrationPage.js
new file mode 100644
index 000000000..3e5175687
--- /dev/null
+++ b/src/Pages/RegistrationPage/RegistrationPage.js
@@ -0,0 +1,7 @@
+import RegistrationForm from "../../Components/Registration/RegistrationForm";
+
+function RegistrationPage() {
+ return
;
+}
+
+export default RegistrationPage;
diff --git a/src/Styles/App/Footer.module.css b/src/Styles/App/Footer.module.css
new file mode 100644
index 000000000..fc06d26d0
--- /dev/null
+++ b/src/Styles/App/Footer.module.css
@@ -0,0 +1,91 @@
+.footerWrap {
+ /* Default */
+ padding: 0 200px;
+
+ /* 1920 이상 */
+ @media (min-width: 1920px) {
+ padding: 0;
+ }
+ /* Mobile */
+ @media (min-width: 375px) and (max-width: 767px) {
+ padding: 0 16px;
+ }
+ @media (max-width: 374px) {
+ padding: 0 16px;
+ }
+}
+.footerWrap {
+ @media (min-width: 375px) and (max-width: 767px) {
+ padding: 0 30px;
+ }
+ /* Tablet */
+ @media (min-width: 768px) and (max-width: 1199px) {
+ padding: 0 24px;
+ }
+}
+footer {
+ position: relative;
+ padding: 32px 0 108px;
+ background: var(--gray-900);
+ color: var(--gray-200);
+ font-size: 1.4em;
+}
+.footerWrap {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+
+ /* Default */
+ @media (min-width: 1920px) {
+ max-width: 1110px;
+ margin: 0 auto;
+ }
+}
+.footerWrap .copyright {
+ font-weight: 500;
+ color: var(--gray-400);
+
+ /* Mobile */
+ @media (min-width: 375px) and (max-width: 767px) {
+ position: absolute;
+ bottom: 30px;
+ }
+}
+.footerWrap .btnLink {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ align-items: center;
+ font-weight: 500;
+}
+.footerWrap .btnLink > a {
+ margin-right: 30px;
+}
+.footerWrap .btnLink > a:last-child {
+ margin-right: 0;
+}
+.footerWrap .socialBox {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ align-items: center;
+}
+.footerWrap .socialBox li {
+ margin-right: 10px;
+ cursor: pointer;
+ transition: 0.3s;
+}
+.footerWrap .socialBox li:hover {
+ /* PC */
+ @media (min-width: 1200px) {
+ opacity: 0.7;
+ }
+}
+.footerWrap .socialBox li:last-child {
+ margin-right: 0;
+}
diff --git a/src/Styles/App/Loading.module.css b/src/Styles/App/Loading.module.css
new file mode 100644
index 000000000..3bd7e415a
--- /dev/null
+++ b/src/Styles/App/Loading.module.css
@@ -0,0 +1,63 @@
+.loaderContainer {
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(255, 255, 255, 0.3);
+ overflow-y: hidden;
+ overflow-x: hidden;
+}
+
+.loader {
+ width: calc(100px - 24px);
+ height: 50px;
+ position: relative;
+ animation: flippx 2s infinite linear;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0.9;
+ z-index: 1;
+}
+.loader:before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ margin: auto;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: var(--primary);
+ transform-origin: -24px 50%;
+ animation: spin 1s infinite linear;
+}
+.loader:after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ background: var(--primary);
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+}
+
+@keyframes flippx {
+ 0%,
+ 49% {
+ transform: scaleX(1);
+ }
+ 50%,
+ 100% {
+ transform: scaleX(-1);
+ }
+}
+@keyframes spin {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/Styles/App/Navi.module.css b/src/Styles/App/Navi.module.css
index e23c8f8de..71b078746 100644
--- a/src/Styles/App/Navi.module.css
+++ b/src/Styles/App/Navi.module.css
@@ -36,8 +36,15 @@
padding: 0 16px;
}
}
+.pageControl .btnWrap {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ align-items: center;
+}
-.navCover button {
+.navCover .btnNavMenu {
color: var(--gray-600);
cursor: pointer;
font-size: 1.8em;
@@ -53,7 +60,7 @@
}
}
-.navCover button:first-child {
+.navCover .btnNavMenu:first-child {
margin-right: 30px;
/* Mobile */
@@ -62,10 +69,6 @@
}
}
-.navCover button.active {
- color: var(--primary);
-}
-
.navCover .pageControl,
.navCover .btnLogo {
-webkit-display: flex;
diff --git a/src/Styles/App/Pagination.css b/src/Styles/App/Pagination.module.css
similarity index 64%
rename from src/Styles/App/Pagination.css
rename to src/Styles/App/Pagination.module.css
index 6236857fc..33efcbd79 100644
--- a/src/Styles/App/Pagination.css
+++ b/src/Styles/App/Pagination.module.css
@@ -27,24 +27,6 @@
background: var(--primary-active);
color: var(--white);
}
-.pagination li:first-child {
- display: none;
-}
-
-.pagination li:last-child {
- margin-right: 0;
- display: none;
-}
-
-.pagination li:nth-of-type(2) {
- background: url("../../Assets/images/pagination/arrow_left.svg") no-repeat
- center;
-}
-
-.pagination li:nth-last-child(2) {
- background: url("../../Assets/images/pagination/arrow_right.svg") no-repeat
- center;
-}
.pagination li img {
position: absolute;
diff --git a/src/Styles/App/Reset.css b/src/Styles/App/Reset.css
index 7889eeacd..c8410d26e 100644
--- a/src/Styles/App/Reset.css
+++ b/src/Styles/App/Reset.css
@@ -52,6 +52,7 @@
--primary: #3692ff; /*브랜드 주요 색상*/
--primary-foreground: #1967d6;
--primary-active: #2f80ed;
+ --gray-01: #ededed;
--gray-10: #dfdfdf;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
@@ -210,6 +211,22 @@ img {
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+input:focus,
+textarea:focus {
+ outline: none;
+}
+textarea {
+ resize: none;
+}
+input[type="number"] {
+ -moz-appearance: textfield;
+}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px var(--gray-100) inset;
-webkit-text-fill-color: var(--gray-400);
diff --git a/src/Styles/Main/common.module.css b/src/Styles/Main/Main.module.css
similarity index 84%
rename from src/Styles/Main/common.module.css
rename to src/Styles/Main/Main.module.css
index 0d3ff89b6..75616e211 100644
--- a/src/Styles/Main/common.module.css
+++ b/src/Styles/Main/Main.module.css
@@ -1,8 +1,7 @@
@charset "utf-8";
/* 메인 index 페이지 */
.headerWrap,
-section,
-.footerWrap {
+section {
/* Default */
padding: 0 200px;
@@ -18,11 +17,6 @@ section,
padding: 0 16px;
}
}
-.footerWrap {
- @media (min-width: 375px) and (max-width: 767px) {
- padding: 0 30px;
- }
-}
section {
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
@@ -43,8 +37,7 @@ section.type1 {
padding: 0;
}
}
-.headerWrap,
-.footerWrap {
+.headerWrap {
/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
padding: 0 24px;
@@ -402,69 +395,3 @@ section .title {
line-height: 25px;
}
}
-footer {
- position: relative;
- padding: 32px 0 108px;
- background: var(--gray-900);
- color: var(--gray-200);
- font-size: 1.4em;
-}
-.footerWrap {
- -webkit-display: flex;
- display: flex;
- -webkit-flex-direction: row;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
-
- /* Default */
- @media (min-width: 1920px) {
- max-width: 1110px;
- margin: 0 auto;
- }
-}
-.footerWrap .copyright {
- font-weight: 500;
- color: var(--gray-400);
-
- /* Mobile */
- @media (min-width: 375px) and (max-width: 767px) {
- position: absolute;
- bottom: 30px;
- }
-}
-.footerWrap .btnLink {
- -webkit-display: flex;
- display: flex;
- -webkit-flex-direction: row;
- flex-direction: row;
- align-items: center;
- font-weight: 500;
-}
-.footerWrap .btnLink > a {
- margin-right: 30px;
-}
-.footerWrap .btnLink > a:last-child {
- margin-right: 0;
-}
-.footerWrap .socialBox {
- -webkit-display: flex;
- display: flex;
- -webkit-flex-direction: row;
- flex-direction: row;
- align-items: center;
-}
-.footerWrap .socialBox li {
- margin-right: 10px;
- cursor: pointer;
- transition: 0.3s;
-}
-.footerWrap .socialBox li:hover {
- /* PC */
- @media (min-width: 1200px) {
- opacity: 0.7;
- }
-}
-.footerWrap .socialBox li:last-child {
- margin-right: 0;
-}
diff --git a/src/Styles/ProductList/common.module.css b/src/Styles/ProductList/ProductList.module.css
similarity index 88%
rename from src/Styles/ProductList/common.module.css
rename to src/Styles/ProductList/ProductList.module.css
index d6b54331d..912c46150 100644
--- a/src/Styles/ProductList/common.module.css
+++ b/src/Styles/ProductList/ProductList.module.css
@@ -1,4 +1,4 @@
-.pageContainer {
+.pagiContainer {
margin-top: 69px;
/* Default */
padding: 0 200px;
@@ -55,16 +55,6 @@
gap: 40px 4%;
}
}
-.generalProduct {
- /* Tablet */
- @media (max-width: 1199px) {
- min-height: 600px;
- }
- /* Mobile */
- @media (max-width: 767px) {
- min-height: 400px;
- }
-}
.bestProduct .item {
flex: 1;
@@ -102,7 +92,7 @@
position: relative;
border-radius: 16px;
overflow: hidden;
- background: #ededed;
+ border: 1px solid var(--gray-50);
}
.productCover .thumbnail:after {
@@ -116,38 +106,14 @@
height: 100%;
position: absolute;
object-fit: cover;
+ transition: 0.3s;
}
+.productCover .item:hover .thumbnail > img {
+ transform: scale(1.1);
-.productCover .skeleton {
- -webkit-animation: skeleton-gradient 1.8s infinite ease-in-out;
- animation: skeleton-gradient 1.8s infinite ease-in-out;
-}
-
-@-webkit-keyframes skeleton-gradient {
- 0% {
- background-color: rgba(165, 165, 165, 0.1);
- }
-
- 50% {
- background-color: rgba(165, 165, 165, 0.3);
- }
-
- 100% {
- background-color: rgba(165, 165, 165, 0.1);
- }
-}
-
-@keyframes skeleton-gradient {
- 0% {
- background-color: rgba(165, 165, 165, 0.1);
- }
-
- 50% {
- background-color: rgba(165, 165, 165, 0.3);
- }
-
- 100% {
- background-color: rgba(165, 165, 165, 0.1);
+ /* Mobile */
+ @media (max-width: 768px) {
+ transform: scale(1);
}
}
@@ -246,13 +212,17 @@
}
}
+.generalProduct input::placeholder {
+ color: var(--gray-400);
+}
+
.generalProduct input[name="search"] {
min-width: inherit;
width: 100%;
border: none;
font-size: 1.6em;
font-weight: 400;
- color: var(--gray-400);
+ color: var(--gray-800);
background: var(--gray-100);
}
@@ -347,3 +317,31 @@
.generalProduct .btnChoose li:first-child {
border-bottom: 1px solid var(--gray-200);
}
+
+.emptyList {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: calc(100vw * (100 / 640));
+ text-align: center;
+ font-size: 1.6em;
+ color: var(--gray-500);
+
+ /* Tablet */
+ @media (max-width: 1199px) {
+ height: calc(100vw * (300 / 640));
+ }
+ /* Mobile */
+ @media (max-width: 767px) {
+ height: calc(100vw * (400 / 640));
+ }
+}
+
+.emptyList > img {
+ width: 40px;
+ margin-bottom: 20px;
+}
diff --git a/src/Styles/ProductRgs/ProductRgs.module.css b/src/Styles/ProductRgs/ProductRgs.module.css
new file mode 100644
index 000000000..1a234e3df
--- /dev/null
+++ b/src/Styles/ProductRgs/ProductRgs.module.css
@@ -0,0 +1,239 @@
+.pagiContainer {
+ margin-top: 69px;
+ /* Default */
+ padding: 0 200px;
+
+ /* 1920 이상 */
+ @media (min-width: 1920px) {
+ padding: 0;
+ max-width: 1110px;
+ margin: 69px auto 0;
+ }
+ /* Tablet, Mobile */
+ @media (max-width: 1199px) {
+ padding: 0 24px;
+ }
+}
+
+.submitContainer {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 24px 0;
+}
+
+.submitTitle {
+ font-size: 2em;
+ font-weight: 600;
+}
+
+.btnSubmit {
+ height: 42px;
+ padding: 0 23px;
+ border-radius: 8px;
+ background: var(--primary);
+ color: var(--gray-100);
+ font-size: 1.6em;
+ font-weight: 500;
+ cursor: pointer;
+}
+
+.btnSubmit:disabled {
+ background: var(--gray-400);
+ cursor: default;
+}
+
+.inputContainer {
+ margin-bottom: 32px;
+}
+
+.inputContainer input::placeholder,
+.inputContainer textarea::placeholder {
+ color: var(--gray-400);
+}
+
+.inputContainer input[type="text"],
+.inputContainer input[type="number"],
+.inputContainer textarea {
+ width: 100%;
+ padding: 16px 24px;
+ border: none;
+ border-radius: 12px;
+ background: var(--gray-100);
+ color: var(--gray-800);
+ font-size: 1.6em;
+}
+
+.inputContainer textarea {
+ height: calc(100vw * (282 / 1100));
+ max-height: 282px;
+}
+
+.inputTitle {
+ margin-bottom: 15px;
+ font-size: 1.8em;
+ font-weight: 600;
+}
+
+.previewContainer {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ gap: 2%;
+
+ /* Mobile */
+ @media (max-width: 768px) {
+ gap: 2%;
+ justify-content: space-between;
+ }
+}
+
+.previewContainer .coverTile {
+ max-width: 23%;
+ flex: 1;
+
+ /* Mobile */
+ @media (max-width: 768px) {
+ max-width: 48%;
+ }
+}
+
+.inputContainer input[type="file"] {
+ position: absolute;
+ width: 0;
+ height: 0;
+ padding: 0;
+ overflow: hidden;
+ border: 0;
+}
+
+.fileBox label {
+ display: inline-block;
+ border-radius: 12px;
+ color: #fff;
+ cursor: pointer;
+ background: var(--gray-100);
+ position: relative;
+ width: 100%;
+ height: 100%;
+ max-height: min-content;
+}
+
+.fileBox label::after {
+ content: "";
+ display: block;
+ padding-bottom: 100%;
+}
+
+.fileBox label .cover {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
+
+.fileBox label .cover > img {
+ display: inline-block;
+}
+
+.fileBox label .imgUpload {
+ margin-top: 10px;
+ font-size: 1.6em;
+ font-weight: 300;
+ color: var(--gray-400);
+}
+
+.btnImgUpload {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.tagContainer {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ margin-top: 15px;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-bottom: calc(env(safe-area-inset-bottom) + 100px);
+}
+
+.tagContainer li {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ align-items: center;
+ height: 36px;
+ line-height: 36px;
+ padding: 0 15px;
+ border-radius: 26px;
+ background: var(--gray-100);
+ color: var(--gray-800);
+ font-size: 1.6em;
+ font-weight: 400;
+ letter-spacing: 0.2px;
+}
+
+.circle {
+ margin-left: 8px;
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ border-radius: 50%;
+ background: var(--gray-400);
+ text-align: center;
+ cursor: pointer;
+}
+
+.circle > img {
+ display: inline-block;
+}
+
+.previewContainer .thumbnail {
+ position: relative;
+ border: 1px solid var(--gray-50);
+ overflow: hidden;
+ border-radius: 12px;
+ display: inline-block;
+ border-radius: 12px;
+ color: #fff;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ max-height: min-content;
+}
+.previewContainer .thumbnail::after {
+ content: "";
+ display: block;
+ padding-bottom: 100%;
+}
+
+.previewContainer .thumbnail > img {
+ display: block;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ object-fit: contain;
+ position-area: center;
+}
+
+.thumbnail .circle {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ line-height: 23px;
+}
+
+.warnMessage {
+ margin-top: 15px;
+ color: var(--red);
+ font-size: 1.6em;
+ font-weight: 400;
+}
diff --git a/src/Styles/Registration/Registration.module.css b/src/Styles/Registration/Registration.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/Styles/loginRegistration/loginRegistration.module.css b/src/Styles/loginRegistration/loginRegistration.module.css
new file mode 100644
index 000000000..55a38f677
--- /dev/null
+++ b/src/Styles/loginRegistration/loginRegistration.module.css
@@ -0,0 +1,183 @@
+@charset "utf-8";
+/* 로그인, 회원가입 페이지 */
+
+.containWrap {
+ height: 100vh;
+}
+.signInLayout {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+ align-items: center;
+ max-width: 640px;
+ height: (env(safe-area-inset-bottom) + inherit);
+ padding-top: 15vh;
+ padding-bottom: 15vh;
+ margin: 0 auto;
+
+ /* Mobile */
+ @media (min-width: 375px) and (max-width: 767px) {
+ padding-left: 16px;
+ padding-right: 16px;
+ padding-top: 10vh;
+ padding-bottom: 10vh;
+ }
+}
+.signInLayout .logo > a {
+ -webkit-display: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+.signInLayout .logo .logoImg {
+ /* Mobile */
+ @media (min-width: 375px) and (max-width: 767px) {
+ width: 20%;
+ }
+}
+.signInLayout .logo .companyName {
+ margin-left: 20px;
+ font-size: 6.6em;
+ font-weight: 700;
+ font-family: "Rokaf";
+ color: var(--primary);
+
+ /* Mobile */
+ @media (min-width: 375px) and (max-width: 767px) {
+ margin-left: 10px;
+ font-size: 3.5em;
+ }
+}
+.formWrap {
+ width: 100%;
+
+ /* Mobile */
+ @media (min-width: 375px) and (max-width: 767px) {
+ max-width: 400px;
+ }
+}
+.formWrap .inputBox:nth-of-type(1) {
+ margin-top: 40px;
+}
+.formWrap .inputBox {
+ margin-bottom: 25px;
+}
+.formWrap .inputBox.pointer input {
+ padding-right: 40px;
+}
+.formWrap .inputBox .btnVisible {
+ cursor: pointer;
+ position: absolute;
+ right: 10px;
+ top: 17px;
+}
+.formWrap label {
+ display: inline-block;
+ margin-bottom: 16px;
+ font-size: 1.8em;
+ font-weight: 700;
+ color: var(--gray-800);
+}
+.formWrap input {
+ width: 100%;
+ height: 56px;
+ padding: 0 24px;
+ border-radius: 12px;
+ border: 2px solid var(--gray-100);
+ font-family: "pretendard";
+ font-weight: 500;
+ font-size: 1.6em;
+ background: var(--gray-100);
+ color: var(--gray-800);
+ transition: 0.2s;
+}
+.formWrap .txtWarning {
+ margin-top: 10px;
+ margin-left: 15px;
+ font-size: 1.4em;
+ font-weight: 600;
+ color: var(--red);
+}
+.formWrap input::placeholder {
+ color: var(--gray-400);
+}
+.formWrap input:focus {
+ outline: 0;
+ border: 2px solid var(--primary);
+}
+/* 삭제 처리 */
+/* .formWrap input:required:focus{
+ border:2px solid var(--red);
+} */
+.formWrap input.inputError {
+ border: 2px solid var(--red);
+}
+.inputBox .cover {
+ position: relative;
+}
+.formWrap .btnBox {
+ margin: 24px 0;
+}
+.formWrap .btnBox button {
+ width: 100%;
+ height: 56px;
+ border-radius: 40px;
+ font-size: 2em;
+ font-weight: 600;
+ background: var(--primary);
+ cursor: pointer;
+ color: var(--gray-100);
+}
+.formWrap .btnBox .btnSubmit:disabled {
+ background: var(--gray-400);
+ cursor: auto;
+}
+.signSocial {
+ width: 100%;
+
+ /* Mobile */
+ @media (min-width: 375px) and (max-width: 767px) {
+ max-width: 400px;
+ }
+}
+.signSocial .layoutBox {
+ width: 100%;
+ -webkit-dispaly: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 23px;
+ border-radius: 8px;
+ border: 1px solid var(--gray-100);
+ background: var(--sky);
+ font-size: 1.6em;
+ font-weight: 400;
+}
+.signSocial .cover {
+ -webkit-dispaly: flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+}
+.signSocial .cover .btnGoogle {
+ margin-right: 15px;
+}
+.signSocial .cover div {
+ cursor: pointer;
+}
+.returnLink {
+ margin-top: 24px;
+ font-size: 1.4em;
+ font-weight: 400;
+ color: var(--gray-800);
+}
+.returnLink > a {
+ display: inline-block;
+ margin-left: 3px;
+ color: var(--primary);
+}
diff --git a/src/index.js b/src/index.js
index 71a354b9f..a8d9b1122 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
-import App from "./App";
+import Main from "./Main";
const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
);
+root.render(
);