-
-
{wrongMessage}
-
+function Input ({ label, name, className, inputClassName, type, children, ...props }) {
+ return (
+
+ {type === "textarea"
+ ?
+ : }
+ {children}
);
-}
-
-export default function Input ({ label, name, type="text", placeholder='', emptyWrongMessage='', invalidWrongMessage='' }) {
- const [valid, setValid] = useState('');
- const [wrongMessage, setWrongMessage] = useState(null);
-
- const onFocusout = (e) => {
- if (!e.target.value) {
- setValid("wrong");
- setWrongMessage(emptyWrongMessage);
- } else if (!e.target.validity.valid) {
- setValid("wrong");
- setWrongMessage(invalidWrongMessage);
- } else {
- setValid("correct");
- setWrongMessage(null);
- }
- }
+}
- if (type === "password") {
- return (<>
-
-
- );
- }
- return (<>
-
-
- );
-}
\ No newline at end of file
+export default Input;
\ No newline at end of file
diff --git a/src/components/Input.module.css b/src/components/Input.module.css
new file mode 100644
index 00000000..f6c3a2ff
--- /dev/null
+++ b/src/components/Input.module.css
@@ -0,0 +1,31 @@
+.box > * {
+ display: block;
+}
+
+.box label {
+ margin-bottom: 16px;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 26px;
+}
+
+.box input,
+.box textarea {
+ width: 100%;
+ padding: 15px 24px ;
+ border: none;
+ border-radius: 12px;
+ background-color: var(--gray100);
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+}
+
+.box textarea {
+ resize: none;
+}
+
+.box input::placeholder,
+.box textarea::placeholder {
+ color: var(--gray400);
+}
\ No newline at end of file
diff --git a/src/components/ItemList.jsx b/src/components/ItemList.jsx
index 4ffcf5da..4904eb85 100644
--- a/src/components/ItemList.jsx
+++ b/src/components/ItemList.jsx
@@ -1,23 +1,9 @@
-import { useEffect, useState } from "react";
-import { getProducts } from "../api/api";
import icHeart from "../assets/ic_heart.svg";
import styles from "./ItemList.module.css";
-export default function ItemList ( { rows, columns, itemCount, page, orderBy, setTotalCount } ) {
- const [items, setItems] = useState([]);
- const getItems = async () => {
- const { totalCount, list } = await getProducts({ page, pageSize: (itemCount || rows*columns), orderBy });
- setTotalCount(totalCount);
- setItems(list);
- }
-
- useEffect( () => {
- getItems();
- return () => { if (itemCount) return; }
- }, [rows, columns, page, orderBy]);
-
+export default function ItemList ( { rows, columns, items } ) {
return (
- {items.slice(0,rows*columns).map((e) => (
+ {items.slice(0, rows*columns).map((e) => (
);
diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx
new file mode 100644
index 00000000..336becc2
--- /dev/null
+++ b/src/components/Nav.jsx
@@ -0,0 +1,28 @@
+import { Link, NavLink } from 'react-router-dom';
+import Button from './Button';
+import logoBig from '../assets/logo.png';
+import logoSmall from '../assets/logo_text.png';
+import icProfile from '../assets/ic_profile.svg';
+import styles from "./Nav.module.css";
+
+//type: default, tab, profile
+export default function Nav({ type = "default" }) {
+ return (
);
+}
\ No newline at end of file
diff --git a/src/components/Nav.module.css b/src/components/Nav.module.css
new file mode 100644
index 00000000..70b0631f
--- /dev/null
+++ b/src/components/Nav.module.css
@@ -0,0 +1,96 @@
+.nav {
+ z-index: 1;
+ height: 70px;
+ background-color: white;
+ border-bottom: 1px solid #dfdfdf;
+ padding: 0 200px;
+ justify-content: center;
+ align-content: center;
+ position: sticky;
+ top: 0;
+}
+
+.nav .container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.nav #logo {
+ height: 51px;
+ margin-right: 32px;
+ font-size: 0;
+}
+
+.nav #logo img {
+ height: 100%;
+}
+
+.nav #logo .small {
+ display: none;
+}
+
+.nav .menu > a {
+ margin: 0 15px;
+ color: var(--gray600);
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 26px;
+}
+
+.nav .menu > a.selected {
+ color: var(--blue100);
+}
+
+.nav img.profile {
+ height: 40px;
+}
+
+.nav button.default {
+ width: 128px;
+ height: 48px;
+}
+
+.nav button.tab {
+ width: 88px;
+ height: 42px;
+}
+
+/* Tablet */
+@media (max-width: 1199px) {
+ .nav {
+ padding: 0 24px;
+ }
+
+ .nav #logo {
+ margin-right: 20px;
+ }
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+ .nav {
+ padding: 0 16px;
+ }
+
+ .nav #logo {
+ margin-right: 8px;
+ }
+
+ .nav #logo .small {
+ display: unset;
+ }
+
+ .nav #logo .big {
+ display: none;
+ }
+
+ .nav .menu {
+ gap: 8px;
+ }
+
+ .nav .menu > a {
+ margin: 0;
+ font-size: 16px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Pagenation.jsx b/src/components/Pagenation.jsx
index 492746f2..d44cee7d 100644
--- a/src/components/Pagenation.jsx
+++ b/src/components/Pagenation.jsx
@@ -21,6 +21,7 @@ export default function Pagenation({ page, setPage, pageSize, totalCount }) {
return (
+ : }
+ 
+ 
+
+ {type === "default" ||
+