[김참솔] Sprint 6

vite-project/.env.development

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://panda-market-api.vercel.app

vite-project/.env.production

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://panda-market-api.vercel.app

vite-project/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.7.0"
+    "react-router-dom": "^7.7.0",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

vite-project/src/api/products.js

@@ -1,12 +1,10 @@
-const BASE_URL = "https://panda-market-api.vercel.app";
-
 export async function fetchProducts({
   keyword = "",
   page = 1,
   pageSize = 10,
   orderBy = "recent",
 } = {}) {
-  const url = new URL(`${BASE_URL}/products`);
+  const url = new URL(`${import.meta.env.VITE_API_BASE_URL}/products`);
   url.searchParams.append("page", page);
   url.searchParams.append("pageSize", pageSize);
   url.searchParams.append("orderBy", orderBy);

vite-project/src/components/Button.jsx

@@ -1,11 +1,20 @@
-import "./Button.css";
+import styled from "styled-components";
 
-function Button({ title, onClick }) {
-  return (
-    <button className="Button" onClick={onClick}>
-      {title}
-    </button>
-  );
+const StyledButton = styled.button`
+  background-color: ${({ disabled }) =>
+    disabled ? "var(--color-cool-gray-400)" : "var(--color-primary-100)"};
+  padding: 8px 23px;
+  color: var(--color-cool-gray-100);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 26px;
+  border-radius: 8px;
+  border: none;
+  cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
+`;
+
+function Button({ children, ...props }) {
+  return <StyledButton {...props}>{children}</StyledButton>;
 }
 
 export default Button;