@@ -39,3 +47,5 @@ export default function Nav() {
);
}
+
+export default Nav;
diff --git a/vite-project/src/components/PageControl.jsx b/vite-project/src/components/PageControl.jsx
index 51198d71..520af5d1 100644
--- a/vite-project/src/components/PageControl.jsx
+++ b/vite-project/src/components/PageControl.jsx
@@ -1,6 +1,6 @@
import chevronLeftImg from "../assets/ic-chevron-left.svg";
import chevronRightImg from "../assets/ic-chevron-right.svg";
-import PageController from "../utils/pageController";
+import PageController from "../utils/PageController";
import "./PageControl.css";
const PAGE_MOVE_IMAGE = {
diff --git a/vite-project/src/components/SearchInput.css b/vite-project/src/components/SearchInput.css
index fc9b9ae8..bf0b8a14 100644
--- a/vite-project/src/components/SearchInput.css
+++ b/vite-project/src/components/SearchInput.css
@@ -37,3 +37,11 @@
width: 242px;
}
}
+
+/* Mobile */
+@media (max-width: 767px) {
+ .SearchInput {
+ width: 100%;
+ flex-grow: 1;
+ }
+}
diff --git a/vite-project/src/components/add-item/adding-item-image-container.jsx b/vite-project/src/components/add-item/adding-item-image-container.jsx
new file mode 100644
index 00000000..f656349c
--- /dev/null
+++ b/vite-project/src/components/add-item/adding-item-image-container.jsx
@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import AddingItemImage from "./adding-item-image";
+import AddingItemImageInput from "./adding-item-image-input";
+
+const StyledAddingItemImageContainer = styled.div`
+ display: flex;
+ gap: 24px;
+
+ @media (max-width: 1199px) {
+ gap: 10px;
+ }
+`;
+
+const StyledErrorMessage = styled.p`
+ color: var(--color-error-red);
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ margin: 16px 0 0;
+`;
+
+function AddingItemImageContainer() {
+ const inputRef = useRef();
+ const [preview, setPreview] = useState();
+ const [error, setError] = useState(false);
+
+ const handleInputClick = (event) => {
+ if (!preview) return;
+ setError(true);
+ event.preventDefault();
+ };
+
+ const handleInputChange = (file) => {
+ if (!file) return;
+ const nextPreview = URL.createObjectURL(file);
+ setPreview(nextPreview);
+ };
+
+ const handleRemovePreview = () => {
+ URL.revokeObjectURL(preview);
+ setPreview(null);
+ setError(false);
+ inputRef.current.value = "";
+ };
+
+ useEffect(() => {
+ return () => {
+ if (!preview) return;
+ setPreview(null);
+ URL.revokeObjectURL(preview);
+ };
+ }, [preview]);
+
+ return (
+
+
+
+ {preview && (
+
+ )}
+
+ {error && (
+
+ *이미지 등록은 최대 1개까지 가능합니다.
+
+ )}
+
+ );
+}
+
+export default AddingItemImageContainer;
diff --git a/vite-project/src/components/add-item/adding-item-image-input.jsx b/vite-project/src/components/add-item/adding-item-image-input.jsx
new file mode 100644
index 00000000..ce03c4a5
--- /dev/null
+++ b/vite-project/src/components/add-item/adding-item-image-input.jsx
@@ -0,0 +1,51 @@
+import styled from "styled-components";
+import addImg from "../../assets/ic-plus-gray.svg";
+
+const StyledAddingItemImageLabel = styled.label`
+ background-color: var(--color-secondary-100);
+ color: var(--color-cool-gray-400);
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ border: none;
+ cursor: pointer;
+
+ width: 282px;
+ aspect-ratio: 1;
+ border-radius: 12px;
+
+ @media (max-width: 1199px) {
+ width: 168px;
+ }
+
+ @media (max-width: 767px) {
+ width: 50%;
+ }
+`;
+
+function AddingItemImageInput({ onClick, onChange, ref }) {
+ return (
+
+ 
+ 이미지 등록
+ {
+ onChange(target.files[0]);
+ }}
+ ref={ref}
+ />
+
+ );
+}
+
+export default AddingItemImageInput;
diff --git a/vite-project/src/components/add-item/adding-item-image.jsx b/vite-project/src/components/add-item/adding-item-image.jsx
new file mode 100644
index 00000000..8c4f3b8c
--- /dev/null
+++ b/vite-project/src/components/add-item/adding-item-image.jsx
@@ -0,0 +1,46 @@
+import styled from "styled-components";
+import removeImg from "../../assets/ic-xmark-fill.svg";
+
+const StyledAddingItemImage = styled.div`
+ width: 282px;
+ position: relative;
+
+ & > img {
+ width: 100%;
+ aspect-ratio: 1;
+ object-fit: cover;
+ border-radius: 12px;
+ }
+
+ & > button {
+ margin: 0;
+ padding: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ }
+
+ @media (max-width: 1199px) {
+ width: 168px;
+ }
+
+ @media (max-width: 767px) {
+ width: 50%;
+ }
+`;
+
+function AddingItemImage({ imageUrl, onRemove }) {
+ return (
+
+ {imageUrl && 
}
+
+
+ );
+}
+
+export default AddingItemImage;
diff --git a/vite-project/src/components/item/item.jsx b/vite-project/src/components/item/item.jsx
new file mode 100644
index 00000000..cb0fed39
--- /dev/null
+++ b/vite-project/src/components/item/item.jsx
@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import likeImg from "../../assets/ic-heart.svg";
+import { formatPrice } from "../../utils/formatter";
+
+const StyledItem = styled.div`
+ color: var(--color-secondary-800);
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+`;
+
+const StyledItemImage = styled.div`
+ border-radius: 16px;
+ aspect-ratio: 1 / 1;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ aspect-ratio: 1 / 1;
+ }
+`;
+
+const StyledItemFavorites = styled.div`
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 18px;
+ display: flex;
+ gap: 4px;
+ align-items: center;
+`;
+
+const StyledItemInfo = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+
+ h3 {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 24px;
+ margin: 0;
+ }
+
+ p {
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 26px;
+ margin: 0;
+ }
+`;
+
+function Item({ imageUrl, title, price, likeCount }) {
+ return (
+
+
+
+
+
+ {title}
+ {formatPrice(price, "원")}
+
+ 
+ {likeCount}
+
+
+
+ );
+}
+
+export default Item;
diff --git a/vite-project/src/components/item/items-grid.jsx b/vite-project/src/components/item/items-grid.jsx
new file mode 100644
index 00000000..ceab0b45
--- /dev/null
+++ b/vite-project/src/components/item/items-grid.jsx
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import Item from "./item";
+
+const StyledItemsGrid = styled.div`
+ display: grid;
+ grid-template-columns: repeat(
+ ${({ $numberOfColumns }) => $numberOfColumns},
+ 1fr
+ );
+ column-gap: 24px;
+ row-gap: 40px;
+`;
+
+function ItemsGrid({ items, numberOfColumns }) {
+ return (
+
+ {items.map((product) => (
+
+ );
+}
+
+export default ItemsGrid;
diff --git a/vite-project/src/components/section/section-header-action.jsx b/vite-project/src/components/section/section-header-action.jsx
new file mode 100644
index 00000000..26422767
--- /dev/null
+++ b/vite-project/src/components/section/section-header-action.jsx
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import Button from "../Button";
+
+const StyledSectionHeaderAction = styled(Button)`
+ @media (max-width: 767px) {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
+`;
+
+function SectionHeaderAction({ children, ...props }) {
+ return (
+
{children}
+ );
+}
+
+export default SectionHeaderAction;
diff --git a/vite-project/src/components/section/section-header-size.js b/vite-project/src/components/section/section-header-size.js
new file mode 100644
index 00000000..01e35b9e
--- /dev/null
+++ b/vite-project/src/components/section/section-header-size.js
@@ -0,0 +1,8 @@
+const SectionHeaderSize = {
+ LARGE: "large",
+ SMALL: "small",
+};
+
+Object.freeze(SectionHeaderSize);
+
+export default SectionHeaderSize;
diff --git a/vite-project/src/components/section/section-header-title.jsx b/vite-project/src/components/section/section-header-title.jsx
new file mode 100644
index 00000000..27eac49e
--- /dev/null
+++ b/vite-project/src/components/section/section-header-title.jsx
@@ -0,0 +1,45 @@
+import styled, { css } from "styled-components";
+import SectionHeaderSize from "./section-header-size";
+
+const headerTitleStyle = css`
+ font-weight: 700;
+ color: var(--color-secondary-900);
+ margin: 0;
+
+ @media (max-width: 767px) {
+ line-height: 42px;
+ }
+`;
+
+const StyledSectionHeaderTitleLarge = styled.h2`
+ ${headerTitleStyle}
+ font-size: 20px;
+ line-height: 32px;
+`;
+
+const StyledSectionHeaderTitleSmall = styled.h3`
+ ${headerTitleStyle}
+ font-size: 18px;
+ line-height: 26px;
+`;
+
+function SectionHeaderTitle({ size, children }) {
+ switch (size) {
+ case SectionHeaderSize.LARGE:
+ return (
+
+ {children}
+
+ );
+ case SectionHeaderSize.SMALL:
+ return (
+
+ {children}
+
+ );
+ default:
+ return;
+ }
+}
+
+export default SectionHeaderTitle;
diff --git a/vite-project/src/components/section/section-header.jsx b/vite-project/src/components/section/section-header.jsx
new file mode 100644
index 00000000..0a419dde
--- /dev/null
+++ b/vite-project/src/components/section/section-header.jsx
@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import SectionHeaderSize from "./section-header-size";
+import SectionHeaderTitle from "./section-header-title";
+
+const StyledSectionHeader = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ @media (max-width: 767px) {
+ flex-direction: column;
+ align-items: flex-start;
+ ${({ $hasGap }) => ($hasGap ? "gap: 8px;" : "")}
+ position: relative;
+ }
+`;
+
+const StyledSectionHeaderActions = styled.div`
+ display: flex;
+ gap: 12px;
+
+ @media (max-width: 767px) {
+ width: 100%;
+ gap: 14px;
+ }
+`;
+
+function SectionHeader({ children, title, size = SectionHeaderSize.LARGE }) {
+ const hasSingleAction = children?.type?.name === "SectionHeaderAction";
+
+ return (
+
+ {title && {title}}
+ {children && (
+ {children}
+ )}
+
+ );
+}
+
+export default SectionHeader;
diff --git a/vite-project/src/components/section/section.jsx b/vite-project/src/components/section/section.jsx
new file mode 100644
index 00000000..0d479ad4
--- /dev/null
+++ b/vite-project/src/components/section/section.jsx
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const StyledSection = styled.section`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: ${({ $spacing }) => $spacing}px;
+
+ @media (max-width: 767px) {
+ gap: 16px;
+ }
+`;
+
+function Section({ children, spacing = 16 }) {
+ return
{children};
+}
+
+export default Section;
diff --git a/vite-project/src/components/tag/tag-list.jsx b/vite-project/src/components/tag/tag-list.jsx
new file mode 100644
index 00000000..a6e64e3e
--- /dev/null
+++ b/vite-project/src/components/tag/tag-list.jsx
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import Tag from "./tag";
+
+const StyledTagList = styled.div`
+ display: flex;
+ gap: 12px;
+ margin-top: 14px;
+ flex-wrap: wrap;
+`;
+
+function TagList({ tags, onRemove }) {
+ return (
+
+ {tags.map((tag) => (
+ onRemove(tag)}>
+ {"#" + tag}
+
+ ))}
+
+ );
+}
+
+export default TagList;
diff --git a/vite-project/src/components/tag/tag.jsx b/vite-project/src/components/tag/tag.jsx
new file mode 100644
index 00000000..bcf7813e
--- /dev/null
+++ b/vite-project/src/components/tag/tag.jsx
@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import removeImg from "../../assets/ic-xmark-fill.svg";
+
+const StyledTag = styled.div`
+ background-color: var(--color-cool-gray-100);
+ color: var(--color-secondary-800);
+ font-size: 16px;
+ fontweight: 400;
+ line-height: 26px;
+ padding: 5px 0;
+ padding-left: 16px;
+ padding-right: 12px;
+ border-radius: 26px;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+
+ button {
+ border: none;
+ background: none;
+ cursor: pointer;
+ padding: 0;
+ width: 22px;
+ height: 24px;
+ }
+`;
+
+function Tag({ children, onRemove }) {
+ return (
+
+ {children}
+
+
+ );
+}
+
+export default Tag;
diff --git a/vite-project/src/components/text-input.jsx b/vite-project/src/components/text-input.jsx
new file mode 100644
index 00000000..986e0316
--- /dev/null
+++ b/vite-project/src/components/text-input.jsx
@@ -0,0 +1,60 @@
+import styled, { css } from "styled-components";
+
+const textStyle = css`
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+`;
+
+const inputStyle = css`
+ ${textStyle}
+ width: 100%;
+ border: none;
+ background: none;
+ padding: 0;
+ color: var(--color-secondary-800);
+`;
+
+const inputPlaceholderStyle = css`
+ color: var(--color-secondary-400);
+ ${textStyle}
+`;
+
+const StyledTextInput = styled.div`
+ background-color: var(--color-secondary-100);
+ padding: 16px 24px;
+ border-radius: 12px;
+ ${({ $multiline }) => ($multiline ? "height: 282px;" : "")}
+
+ input {
+ ${inputStyle}
+ }
+ input:focus {
+ outline: none;
+ }
+ input::placeholder {
+ ${inputPlaceholderStyle}
+ }
+
+ textarea {
+ ${inputStyle}
+ height: 100%;
+ resize: none;
+ }
+ textarea:focus {
+ outline: none;
+ }
+ textarea::placeholder {
+ ${inputPlaceholderStyle}
+ }
+`;
+
+function TextInput({ multiline = false, ...props }) {
+ return (
+
+ {multiline ? : }
+
+ );
+}
+
+export default TextInput;
diff --git a/vite-project/src/hooks/useDevice.jsx b/vite-project/src/hooks/useDevice.jsx
index ca267c1e..4de29bee 100644
--- a/vite-project/src/hooks/useDevice.jsx
+++ b/vite-project/src/hooks/useDevice.jsx
@@ -18,7 +18,6 @@ function useDevice() {
useEffect(() => {
const handleDesktopMatchesChange = (e) => {
- console.log("Desktop matches change:", e.matches);
if (!e.matches) return;
setDeviceInfo({
isDesktop: true,
@@ -27,11 +26,9 @@ function useDevice() {
});
};
- console.log("Adding media query listeners");
matchesDesktop.addEventListener("change", handleDesktopMatchesChange);
return () => {
- console.log("Cleaning up media query listeners");
matchesDesktop.removeEventListener("change", handleDesktopMatchesChange);
_matchesDesktop = null;
};
@@ -39,7 +36,6 @@ function useDevice() {
useEffect(() => {
const handleTabletMatchesChange = (e) => {
- console.log("Tablet matches change:", e.matches);
if (!e.matches) return;
setDeviceInfo({
isDesktop: false,
@@ -49,7 +45,6 @@ function useDevice() {
};
matchesTablet.addEventListener("change", handleTabletMatchesChange);
return () => {
- console.log("Cleaning up media query listeners");
matchesTablet.removeEventListener("change", handleTabletMatchesChange);
_matchesTablet = null;
};
@@ -57,7 +52,6 @@ function useDevice() {
useEffect(() => {
const handleMobileMatchesChange = (e) => {
- console.log("Mobile matches change:", e.matches);
if (!e.matches) return;
setDeviceInfo({
isDesktop: false,
@@ -67,7 +61,6 @@ function useDevice() {
};
matchesMobile.addEventListener("change", handleMobileMatchesChange);
return () => {
- console.log("Cleaning up media query listeners");
matchesMobile.removeEventListener("change", handleMobileMatchesChange);
_matchesMobile = null;
};
diff --git a/vite-project/src/main.jsx b/vite-project/src/main.jsx
index 286fee87..e88db0e8 100644
--- a/vite-project/src/main.jsx
+++ b/vite-project/src/main.jsx
@@ -1,7 +1,7 @@
import { BrowserRouter, Route, Routes } from "react-router-dom";
import App from "./components/App";
-import AddItemPage from "./pages/AddItemPage";
-import ItemsPage from "./pages/ItemsPage";
+import AddItemPage from "./pages/add-item/add-item-page";
+import ItemsPage from "./pages/items/items-page";
function Main() {
return (
diff --git a/vite-project/src/pages/AddItemPage.jsx b/vite-project/src/pages/AddItemPage.jsx
deleted file mode 100644
index 5867cdc9..00000000
--- a/vite-project/src/pages/AddItemPage.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function AddItemPage() {
- return
Add Item Page
;
-}
-
-export default AddItemPage;
diff --git a/vite-project/src/pages/ItemsPage.css b/vite-project/src/pages/ItemsPage.css
deleted file mode 100644
index 59c7333e..00000000
--- a/vite-project/src/pages/ItemsPage.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.ItemsPage {
- display: flex;
- flex-direction: column;
- gap: 40px;
-}
diff --git a/vite-project/src/pages/add-item/add-item-page.jsx b/vite-project/src/pages/add-item/add-item-page.jsx
new file mode 100644
index 00000000..10493852
--- /dev/null
+++ b/vite-project/src/pages/add-item/add-item-page.jsx
@@ -0,0 +1,136 @@
+import { useState } from "react";
+import styled from "styled-components";
+import AddingItemImageContainer from "../../components/add-item/adding-item-image-container";
+import Section from "../../components/section/section";
+import SectionHeader from "../../components/section/section-header";
+import SectionHeaderAction from "../../components/section/section-header-action";
+import SectionHeaderSize from "../../components/section/section-header-size";
+import TagList from "../../components/tag/tag-list";
+import TextInput from "../../components/text-input";
+import { formatPrice } from "../../utils/formatter";
+
+const INITIAL_INPUT_VALUES = {
+ title: "",
+ description: "",
+ price: "0",
+ tag: "",
+};
+
+const StyledAddItemForm = styled.form`
+ padding-bottom: 69px;
+`;
+
+function AddItemPage() {
+ const [inputValues, setInputValues] = useState(INITIAL_INPUT_VALUES);
+ const [tags, setTags] = useState([]);
+ const [canSubmit, setCanSubmit] = useState(false);
+
+ const handleInputChange = (event) => {
+ let nextValue = event.target.value;
+ if (event.target.name === "price") {
+ nextValue = nextValue.replace(/[^0-9]/g, "");
+ nextValue = formatPrice(nextValue);
+ }
+
+ const nextProductInfo = {
+ ...inputValues,
+ [event.target.name]: nextValue,
+ };
+ setInputValues(nextProductInfo);
+
+ const nextCanSubmit =
+ nextProductInfo.title &&
+ nextProductInfo.description &&
+ nextProductInfo.price;
+ setCanSubmit(nextCanSubmit);
+ };
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ };
+
+ const handleTagKeyUp = (event) => {
+ if (event.key !== "Enter") return;
+
+ const tagName = event.target.value.trim();
+ if (tagName.length === 0) return;
+
+ if (tags.includes(tagName)) return;
+ setTags([...tags, tagName]);
+
+ setInputValues({
+ ...inputValues,
+ tag: "",
+ });
+ };
+
+ const handleTagRemove = (index) => {
+ const nextTags = [...tags];
+ nextTags.splice(index, 1);
+ setTags(nextTags);
+ };
+
+ return (
+
+
+
+ 등록
+
+
+
+
+
+
+
+
+
+
+ {tags.length > 0 && (
+
+ )}
+
+
+
+
+
+ );
+}
+
+export default AddItemPage;
diff --git a/vite-project/src/pages/ItemsPage.jsx b/vite-project/src/pages/items/items-page.jsx
similarity index 58%
rename from vite-project/src/pages/ItemsPage.jsx
rename to vite-project/src/pages/items/items-page.jsx
index caf9ed9b..2a606b3f 100644
--- a/vite-project/src/pages/ItemsPage.jsx
+++ b/vite-project/src/pages/items/items-page.jsx
@@ -1,17 +1,17 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
-import { fetchProducts } from "../api/products";
-import Button from "../components/Button";
-import {
- ItemsSection,
- ItemsSectionContent,
- ItemsSectionHeader,
-} from "../components/ItemsSection";
-import OrderBySelect, { ORDER_BY_DEFAULT } from "../components/OrderBySelect";
-import PageControl from "../components/PageControl";
-import SearchInput from "../components/SearchInput";
-import { useDevice } from "../hooks/useDevice";
-import "./ItemsPage.css";
+import styled from "styled-components";
+import { fetchProducts } from "../../api/products";
+import ItemsGrid from "../../components/item/items-grid";
+import OrderBySelect, {
+ ORDER_BY_DEFAULT,
+} from "../../components/OrderBySelect";
+import PageControl from "../../components/PageControl";
+import SearchInput from "../../components/SearchInput";
+import Section from "../../components/section/section";
+import SectionHeader from "../../components/section/section-header";
+import SectionHeaderAction from "../../components/section/section-header-action";
+import { useDevice } from "../../hooks/useDevice";
function getNumberOfColumns(deviceInfo) {
let bestProductsColumns = 4;
@@ -30,8 +30,13 @@ function getNumberOfColumns(deviceInfo) {
return { bestProductsColumns, productsColumns };
}
+const StyledItemsPage = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+`;
+
function ItemsPage() {
- console.log("ItemsPage rendered");
const [products, setProducts] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [numberOfPages, setNumberOfPages] = useState(1);
@@ -43,9 +48,13 @@ function ItemsPage() {
const { bestProductsColumns, productsColumns } =
getNumberOfColumns(deviceInfo);
- const bestProducts = [...products]
- .sort((a, b) => b.favoriteCount - a.favoriteCount)
- .slice(0, bestProductsColumns);
+ const bestProducts = useMemo(
+ () =>
+ [...products]
+ .sort((a, b) => b.favoriteCount - a.favoriteCount)
+ .slice(0, bestProductsColumns),
+ [bestProductsColumns, products]
+ );
const allProducts = products.slice(0, productsColumns * 2);
@@ -79,18 +88,17 @@ function ItemsPage() {
}, [fetch]);
return (
-
-
-
-
-
-
-
+
+
+
-
+
+
-
-
+
+
);
}
diff --git a/vite-project/src/palette.css b/vite-project/src/palette.css
index 1eb817db..bbbc00c5 100644
--- a/vite-project/src/palette.css
+++ b/vite-project/src/palette.css
@@ -6,11 +6,15 @@
--color-secondary-100: #f3f4f6;
--color-secondary-400: #9ca3af;
--color-secondary-600: #4b5563;
- --color-secondary-800: ##1f2937;
+ --color-secondary-800: #1f2937;
--color-secondary-900: #111827;
/* Cool Gray */
--color-cool-gray-100: #f3f4f6;
--color-cool-gray-200: #e5e7eb;
+ --color-cool-gray-400: #9ca3af;
--color-cool-gray-500: #6b7280;
+
+ /* System */
+ --color-error-red: #f74747;
}
diff --git a/vite-project/src/utils/formatter.js b/vite-project/src/utils/formatter.js
new file mode 100644
index 00000000..a1ba1305
--- /dev/null
+++ b/vite-project/src/utils/formatter.js
@@ -0,0 +1,3 @@
+export function formatPrice(price, suffix = "") {
+ return Intl.NumberFormat().format(price) + suffix;
+}