codeit-bootcamp-frontend · LMS10 · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -18,5 +18,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,16 +10,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.28.0",
-    "react-scripts": "5.0.1",
     "styled-components": "^6.1.13",
     "styled-reset": "^4.5.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
   },
   "eslintConfig": {
     "extends": [
@@ -38,5 +37,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.7",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }
diff --git a/src/App.js → src/App.tsx b/src/App.js → src/App.tsx
@@ -1,10 +1,10 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Reset } from "styled-reset";
-import Header from "./components/Layout/Header";
-import HomePage from "./pages/HomePage/HomePage";
-import MarketPage from "./pages/MarketPage/MarketPage";
-import AddItemPage from "./pages/AddItemPage/AddItemPage";
-import ItemPage from "./pages/ItemPage/ItemPage";
+import Header from "@/components/Layout/Header";
+import HomePage from "@/pages/HomePage/HomePage";
+import MarketPage from "@/pages/MarketPage/MarketPage";
+import AddItemPage from "@/pages/AddItemPage/AddItemPage";
+import ItemPage from "@/pages/ItemPage/ItemPage";
 
 function App() {
   return (

diff --git a/src/api/itemApi.js → src/api/itemApi.ts b/src/api/itemApi.js → src/api/itemApi.ts
@@ -1,4 +1,4 @@
-const BASE_URL = "https://panda-market-api.vercel.app";
+const BASE_URL = import.meta.env.VITE_BASE_URL;
 
 export async function getProducts(params = {}) {
   const query = new URLSearchParams(params).toString();
@@ -16,7 +16,7 @@ export async function getProducts(params = {}) {
   }
 }
 
-export async function getProductById(productId) {
+export async function getProductById(productId: number) {
   if (!productId) {
     throw new Error("Invalid product ID");
   }
@@ -31,7 +31,13 @@ export async function getProductById(productId) {
   }
 }
 
-export async function getProductComments({ productId, params }) {
+export async function getProductComments({
+  productId,
+  params,
+}: {
+  productId: string;
+  params?: Record<string, string>;
+}) {
   if (!productId) {
     throw new Error("Invalid product ID");
   }

diff --git a/src/components/Layout/Header.css b/src/components/Layout/Header.css
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -0,0 +1,123 @@
+import { Link, NavLink, useLocation } from "react-router-dom";
+import styled from "styled-components";
+import Logo from "@/assets/images/logo/logo.svg";
+import Profile from "@/assets/images/icons/ic_profile.svg";
+
+const GlobalHeader = styled.header`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  width: 100%;
+  height: var(--header-height);
+  background-color: var(--color-white);
+  border-bottom: 0.1rem solid var(--color-grey);
+`;
+
+const HeaderWrapper = styled.div`
+  width: 100%;
+  height: 7rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 112rem;
+  margin: 0 auto;
+  background-color: var(--color-white);
+  border-bottom: 0.1rem solid var(--color-grey);
+
+  @media (max-width: 1199px) {
+    padding: 0 5rem;
+  }
+
+  @media (max-width: 767px) {
+    padding: 0 2rem;
+  }
+`;
+
+const HeaderLeft = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const HeaderLogo = styled(Link)`
+  margin-right: 4.7rem;
+
+  @media (max-width: 1199px) {
+    margin-right: 3.5rem;
+  }
+
+  @media (max-width: 767px) {
+    margin-right: 0.8rem;
+  }
+`;
+
+const NavList = styled.ul`
+  display: flex;
+  gap: 3rem;
+  font-weight: 700;
+  font-size: 1.8rem;
+  line-height: 2.6rem;
+  color: var(--secondary-600);
+
+  @media (max-width: 767px) {
+    gap: 0.8rem;
+  }
+`;
+
+const NavItem = styled.li``;
+
+const NavLinkStyled = styled(NavLink)`
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    color: var(--primary-100);
+  }
+`;
+
+function getLinkStyle({ isActive }: { isActive: boolean }) {
+  return { color: isActive ? "var(--primary-100)" : undefined };
+}
+
+function Header() {
+  const location = useLocation();
+
+  return (
+    <GlobalHeader>
+      <HeaderWrapper>
+        <HeaderLeft>
+          <HeaderLogo to="/" aria-label="홈으로 이동">
+            <img src={Logo} alt="판다마켓 로고" width="153" />
+          </HeaderLogo>
+
+          <nav>
+            <NavList>
+              <NavItem>
+                <NavLinkStyled to="/community" style={getLinkStyle}>
+                  자유게시판
+                </NavLinkStyled>
+              </NavItem>
+              <NavItem>
+                <NavLinkStyled
+                  to="/items"
+                  style={({ isActive }) =>
+                    location.pathname === "/additem" || isActive
+                      ? { color: "var(--primary-100)" }
+                      : {}
+                  }
+                >
+                  중고마켓
+                </NavLinkStyled>
+              </NavItem>
+            </NavList>
+          </nav>
+        </HeaderLeft>
+
+        <img src={Profile} alt="프로필" width="40" />
+      </HeaderWrapper>
+    </GlobalHeader>
+  );
+}
+
+export default Header;
diff --git a/src/components/UI/DeleteButton.css b/src/components/UI/DeleteButton.css
diff --git a/src/components/UI/DeleteButton.jsx b/src/components/UI/DeleteButton.jsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,5 +18,6 @@ @@
       </head>
       <body>
         <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
       </body>
     </html>