@@ -57,6 +63,10 @@ const Div = styled.div`
.listLabel {
line-height: ${pxToRem(42)};
gap: ${pxToRem(28)};
+ ${media.mobile} {
+ width: ${pxToRem(42)};
+ height: ${pxToRem(42)};
+ }
}
.arrow_icon {
@@ -73,6 +83,9 @@ const Div = styled.div`
display: block;
text-align: center;
background-color: #fff;
+ ${media.mobile} {
+ right: 0;
+ }
}
.listOption:hover {
diff --git a/src/pages/items/ItemsSearch.jsx b/src/pages/items/ItemsSearch.jsx
index 92555b12..1c04a724 100644
--- a/src/pages/items/ItemsSearch.jsx
+++ b/src/pages/items/ItemsSearch.jsx
@@ -1,9 +1,11 @@
-import { flexCenter, textStyles } from "@/styles/commomStyle";
+import { flexCenter, fullSize, textStyles } from "@/styles/commonStyle";
import { pxToRem } from "@/utils/pxToRem";
import { useState } from "react";
// import { toast } from "react-toastify";
import styled from "styled-components";
+import SearchIcon from "@/assets/ic_search_gray.svg";
+
export default function ItemsSearch({ setSearchInput }) {
const [inputValue, setInputValue] = useState("");
@@ -20,6 +22,7 @@ export default function ItemsSearch({ setSearchInput }) {
};
const handleClick = () => {
+ // 빈칸 입력시 경고 토스트
// if (inputValue.trim() === "") {
// toast.warning("검색어를 입력해주세요", {
// toastId: "empty-search",
@@ -43,13 +46,27 @@ export default function ItemsSearch({ setSearchInput }) {
return (
);
}
@@ -60,17 +77,37 @@ const Div = styled.div`
height: ${pxToRem(42)};
padding: 0 ${pxToRem(13)};
}
-
- .search_input{
+
+ .search_wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: 0;
+ }
+
+ .search_input {
+ ${fullSize}
+ padding-left: ${pxToRem(40)};
background-color: var(--gray-100);
border-radius: var(--border-10) 0 0 var(--border-10);
}
- .search_btn{
- ${textStyles["text-lg-medium"]}
+ .search_input:focus {
+ outline: none;
+ }
+
+ .search_icon {
+ position: absolute;
+ left: 1rem;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
+ }
+
+ .search_btn {
+ ${textStyles["text-lg-medium"]}
background-color: var(--primary-100);
color: #fff;
border-radius: 0 var(--border-10) var(--border-10) 0;
}
-
`;
diff --git a/src/pages/items/PageList.jsx b/src/pages/items/PageList.jsx
index 8b6ac793..66e3cc7d 100644
--- a/src/pages/items/PageList.jsx
+++ b/src/pages/items/PageList.jsx
@@ -1,6 +1,6 @@
-import LArrow from "@/assets/left_arrow.png";
-import RArrow from "@/assets/right_arrow.png";
-import { flexCenter } from "@/styles/commomStyle";
+import LArrow from "@/assets/ic_arrow_left_active.svg";
+import RArrow from "@/assets/ic_arrow_right_active.svg";
+import { flexCenter } from "@/styles/commonStyle";
import { pxToRem } from "@/utils/pxToRem";
import styled from "styled-components";
@@ -34,7 +34,7 @@ export default function PageList({ totalCount, page, setPage, getAllList }) {
onClick={goPrevGroup}
disabled={!prevGroup}
>
-
+
{Array.from({ length: groupEnd - groupStart + 1 }, (_, i) => {
@@ -56,7 +56,7 @@ export default function PageList({ totalCount, page, setPage, getAllList }) {
onClick={goNextGroup}
disabled={!nextGroup}
>
-
+
@@ -71,9 +71,14 @@ const PageListStyle = styled.div`
}
.page_btn {
+ ${flexCenter}
border: 1px solid var(--gray-200);
}
+ .page_arrow_img > path {
+ transform: translate(${pxToRem(0.6)}, ${pxToRem(0.6)});
+ }
+
.page_list,
.page_btn {
outline: none;
@@ -91,9 +96,4 @@ const PageListStyle = styled.div`
.page_list:hover .page_btn.arrow {
background-color: transparent;
}
-
- .page_arrow_img {
- width: ${pxToRem(7)};
- height: ${pxToRem(12)};
- }
`;
diff --git a/src/pages/items/index.jsx b/src/pages/items/index.jsx
index 272a1313..ea032ffc 100644
--- a/src/pages/items/index.jsx
+++ b/src/pages/items/index.jsx
@@ -7,14 +7,15 @@ import { handleFetch } from "@/utils/handleFetch";
import ItemList from "@/pages/items/ItemList";
import ItemsSearch from "@/pages/items/ItemsSearch";
import ItemsOrder from "@/pages/items/ItemsOrder";
-import { ItemsStyle } from "@/pages/items/Items.style";
+import { ItemsStyle } from "@/pages/items/index.style";
import PageList from "@/pages/items/PageList";
+import { breakpoints, media } from "@/styles/commonStyle";
//반응형
const getDeviceType = () => {
const width = window.innerWidth;
- if (width >= 1200) return "pc";
- if (width >= 768) return "tablet";
+ if (width >= breakpoints.pc) return "pc";
+ if (width >= breakpoints.tablet) return "tablet";
return "mobile";
};
@@ -82,12 +83,6 @@ function ItemsPage() {
"best"
);
- //맨 처음 렌더링했을 때
- useEffect(() => {
- fetchProducts();
- fetchBestProducts();
- }, []);
-
// 페이지이동, 검색, 정렬변경, 화면 크기 변경했을 때 렌더링
useEffect(() => {
fetchProducts();
@@ -105,7 +100,7 @@ function ItemsPage() {
) : (
<>
-
베스트 상품
+
베스트 상품
{bestProducts.map((item) => (
-
@@ -116,13 +111,17 @@ function ItemsPage() {
-
전체 상품
+
전체 상품
-
-
-
-
+
+
diff --git a/src/pages/items/Items.style.js b/src/pages/items/index.style.js
similarity index 73%
rename from src/pages/items/Items.style.js
rename to src/pages/items/index.style.js
index bebbeb5c..b1003f7b 100644
--- a/src/pages/items/Items.style.js
+++ b/src/pages/items/index.style.js
@@ -1,4 +1,4 @@
-import { flexCenter, fullSize, media, textStyles } from "@/styles/commomStyle";
+import { flexCenter, media, textStyles } from "@/styles/commonStyle";
import { pxToRem } from "@/utils/pxToRem";
import styled from "styled-components";
@@ -7,8 +7,10 @@ export const ItemsStyle = styled.div`
margin: 0 auto;
padding: ${pxToRem(24)} 0 ${pxToRem(58)};
- h3 {
+ .itmes_title {
${textStyles["text-xl-bold"]}
+ line-height: ${pxToRem(42)};
+ margin-bottom: 0.5rem;
}
/* 상품 nav */
@@ -18,11 +20,21 @@ export const ItemsStyle = styled.div`
align-items: center;
margin-bottom: ${pxToRem(24)};
line-height: ${pxToRem(42)};
+
+ ${media.mobile} {
+ position: relative;
+ flex-wrap: wrap;
+ }
}
.item_order {
${flexCenter};
gap: ${pxToRem(12)};
+
+ ${media.mobile} {
+ width: 100%;
+ justify-content: space-between;
+ }
}
.item_all_list {
@@ -36,6 +48,12 @@ export const ItemsStyle = styled.div`
border-radius: var(--border-10);
background-color: var(--primary-100);
padding: 0 ${pxToRem(23)};
+
+ ${media.mobile} {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
}
/* 상품 이미지 */
@@ -44,6 +62,16 @@ export const ItemsStyle = styled.div`
gap: ${pxToRem(24)};
}
+ .product_img {
+ aspect-ratio: 1 / 1;
+ object-fit: cover;
+ width: 100%;
+ }
+
+ .best_items > li {
+ flex: 1;
+ }
+
.all_items {
display: grid;
grid-template-columns: repeat(5, 1fr);
@@ -58,25 +86,6 @@ export const ItemsStyle = styled.div`
}
}
- .best_item .product_img {
- width: ${pxToRem(282)};
- height: ${pxToRem(282)};
-
- ${media.tablet} {
- width: ${pxToRem(343)};
- height: ${pxToRem(343)};
- }
- }
-
- .all_items .product_img {
- width: ${pxToRem(221)};
- height: ${pxToRem(221)};
- ${media.mobile} {
- width: ${pxToRem(168)};
- height: ${pxToRem(168)};
- }
- }
-
${media.tablet} {
max-width: ${pxToRem(696)};
}
diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js
index 2d70cf8c..5e956316 100644
--- a/src/styles/GlobalStyle.js
+++ b/src/styles/GlobalStyle.js
@@ -1,3 +1,4 @@
+import { media } from "@/styles/commonStyle";
import { pxToRem } from "@/utils/pxToRem";
import { createGlobalStyle } from "styled-components";
@@ -8,35 +9,6 @@ export const GlobalStyle = createGlobalStyle`
font-family: "Pretendard", sans-serif;
}
- :root {
- /* 색상 */
- --primary-100: #3692ff;
- --primary-200: #1967d6;
- --primary-300: #1251aa;
- --gray-50: #f9fafb;
- --gray-100: #f3f4f6;
- --gray-200: #e5e7eb;
- --gray-400: #9ca3af;
- --gray-500: #6b7280;
- --gray-600: #4b5563;
- --gray-700: #374151;
- --gray-800: #1f2937;
- --gray-900: #111827;
- --error-red: #f74747;
-
- /* border-radius */
- --border-8: ${pxToRem(8)};
- --border-10: ${pxToRem(10)};
- --border-16: ${pxToRem(16)};
-
- }
-
- /* pc기준 */
- .width_container {
- max-width: 70rem;
- margin: 0 auto;
- }
-
a,
.btn {
color: var(--gray-100);
diff --git a/src/styles/commomStyle.js b/src/styles/commonStyle.js
similarity index 89%
rename from src/styles/commomStyle.js
rename to src/styles/commonStyle.js
index a6ff56a6..5ab5c111 100644
--- a/src/styles/commomStyle.js
+++ b/src/styles/commonStyle.js
@@ -1,10 +1,16 @@
-import { css } from "styled-components";
+import { pxToRem } from "@/utils/pxToRem";
+import styled, { css } from "styled-components";
// pc, tablet, mobie
+export const breakpoints = {
+ pc: 1200,
+ tablet: 768,
+ mobile: 375,
+};
+
export const media = {
- pc: "@media (min-width: 1200px)",
- tablet: "@media (min-width: 768px) and (max-width: 1199px)",
- mobile: "@media (min-width: 375px) and (max-width: 767px)",
+ tablet: `@media (max-width: ${breakpoints.pc - 1}px)`,
+ mobile: `@media (max-width: ${breakpoints.tablet - 1}px)`,
};
//공통 스타일
@@ -18,6 +24,17 @@ export const fullSize = css`
height: 100%;
`;
+export const WidthContainer = styled.div`
+ max-width: 70rem;
+ margin: 0 auto;
+ ${media.tablet} {
+ max-width: ${pxToRem(696)};
+ }
+ ${media.mobile} {
+ max-width: ${pxToRem(344)};
+ }
+`;
+
//폰트 스타일
export const textStyles = {
"text-3xl-bold": css`
diff --git a/src/styles/variables.css b/src/styles/variables.css
new file mode 100644
index 00000000..478c6c93
--- /dev/null
+++ b/src/styles/variables.css
@@ -0,0 +1,21 @@
+:root {
+ /* 색상 */
+ --primary-100: #3692ff;
+ --primary-200: #1967d6;
+ --primary-300: #1251aa;
+ --gray-50: #f9fafb;
+ --gray-100: #f3f4f6;
+ --gray-200: #e5e7eb;
+ --gray-400: #9ca3af;
+ --gray-500: #6b7280;
+ --gray-600: #4b5563;
+ --gray-700: #374151;
+ --gray-800: #1f2937;
+ --gray-900: #111827;
+ --error-red: #f74747;
+
+ /* border-radius */
+ --border-8: 0.5rem;
+ --border-10: 0.625rem;
+ --border-16: 1rem;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..e7baf44c
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+///
+
+declare module "*.svg" {
+ import * as React from "react";
+ const Component: React.FunctionComponent<
+ React.SVGProps & { title?: string }
+ >;
+ export default Component;
+}
diff --git a/vite.config.js b/vite.config.js
index 77c4c1c2..c64e5843 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,16 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
+import svgr from "vite-plugin-svgr";
export default defineConfig({
- plugins: [react()],
+ plugins: [
+ react(),
+ svgr({
+ exportAsDefault: true, // 기본 export를 React 컴포넌트로
+ include: "**/*.svg", // 모든 .svg 파일 적용
+ }),
+ ],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
- 
- 
- - Hot item --
- - Search --
- - Register --
- 
- 
