[김수연] Sprint8

package.json

@@ -14,12 +14,14 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.4.0",
-    "styled-components": "^6.1.16"
+    "styled-components": "^6.1.16",
+    "typescript": "^5.8.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",

src/App.jsx → src/App.tsx

@@ -1,13 +1,18 @@
-import { ThemeProvider } from 'styled-components'
-import { theme } from './styles/theme'
-import GlobalStyles from './styles/GlobalStyles'
 import { Routes, Route, BrowserRouter } from 'react-router-dom'
+
 import Home from './pages/Home/Home'
 import Login from './pages/LoginAndSignup/Login'
 import Signup from './pages/LoginAndSignup/Signup'
 import Items from './pages/Items/Items'
 import ItemsDetail from './pages/ItemsDetail/ItemsDetail'
 import AddItem from './pages/AddItem/AddItem'
+import Privacy from './pages/Privacy/privacy’'
+import Faq from './pages/Faq/Faq'
+import NavVArLayout from './Layout/NavVArLayout'
+
+import { ThemeProvider } from 'styled-components'
+import { theme } from './styles/theme'
+import GlobalStyles from './styles/GlobalStyles'
 
 function App() {
   return (
@@ -18,9 +23,14 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/login" element={<Login />} />
           <Route path="/signup" element={<Signup />} />
-          <Route path="/items" element={<Items />} />
-          <Route path="/items/:productId" element={<ItemsDetail />} />
-          <Route path="/additem" element={<AddItem />} />
+          <Route path="/privacy" element={<Privacy />} />
+          <Route path="/faq" element={<Faq />} />
+
+          <Route element={<NavVArLayout />}>
+            <Route path="/items" element={<Items />} />
+            <Route path="/items/:productId" element={<ItemsDetail />} />
+            <Route path="/additem" element={<AddItem />} />
+          </Route>
         </Routes>
       </BrowserRouter>
     </ThemeProvider>

src/Layout/NavVArLayout.tsx

@@ -0,0 +1,19 @@
+import { Outlet, useLocation } from 'react-router-dom'
+import ItemsNavVar from '../component/common/ItemsNavVar'
+
+const NavVArLayout = () => {
+  const { pathname } = useLocation() // 현재 페이지가 어떤 페이지인지 감지
+
+  const isItemsPage = pathname === '/additem' || pathname.startsWith('/items')
+  const isBoardsPage = pathname === '/boards'
+
+  return (
+    <>
+      <ItemsNavVar isItemsPage={isItemsPage} isBoardsPage={isBoardsPage} />
+      <Outlet />
+      {/*Outlet을 통해 하위 라우트  렌더링함. App 컴포넌트에서 확인 가능 */}
+    </>
+  )
+}
+
+export default NavVArLayout

src/api/client/interceptors.tsx

@@ -0,0 +1,25 @@
+import { AxiosRequestConfig } from 'axios'
+
+export const requestInterceptor = (
+  config: AxiosRequestConfig
+): AxiosRequestConfig => {
+  const token: string | null = localStorage.getItem('token')
+
+  if (token) {
+    config.headers = config.headers || {}
+    config.headers['Authorization'] = `Basic ${token}`
+  }
+  return config
+}
+
+// 전 코드
+// import { AxiosRequestConfig } from 'axios'
+
+// export const requestInterceptor = (config: AxiosRequestConfig) => {
+//   const { token } = localStorage.getItem('token') ?? ''
+
+//   if (token) {
+//     config.headers.set('Authorization', `Basic${token}`)
+//   }
+//   return config
+// }

src/api/services/commentService.jsx → src/api/services/commentService.tsx

@@ -1,5 +1,8 @@
 import requestor from '../client/requestor'
 
+import { Comment } from '../../types/comment'
+import { Axios, AxiosResponse } from 'axios'
+
 class CommentService {
   // 틀릴 수도
   postProductComment(productId, body) {
@@ -10,7 +13,11 @@ class CommentService {
     return requestor.post(`/products/${productId}/comments`, requestBody)
   }
 
-  getProductComment(productId, limit, cursor) {
+  getProductComment(
+    productId: number,
+    limit: number,
+    cursor?: number
+  ): Promise<AxiosResponse<Comment>> {
     let url = `/products/${productId}/comments?limit=${limit}`
 
     if (cursor) {

src/api/services/productService.jsx → src/api/services/productService.tsx

@@ -1,21 +1,23 @@
+import { Axios, AxiosResponse } from 'axios'
 import requestor from '../client/requestor'
+import { GetProductIdTypes } from '../../types/product'
 
 class ProductService {
   //틀릴 수도
-  postProduct(body) {
+  postProduct(body: GetProductIdTypes) {
     const requestBody = {
       ...body,
     }
     return requestor.post(`/products`, requestBody)
   }
 
-  getProduct(page, pageSize, orderBy, keyword) {
+  getProduct(page: number, pageSize: number, orderBy: string, keyword: string) {
     return requestor.get(
       `/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`
     )
   }
 
-  getProductId(productId) {
+  getProductId(productId: number): Promise<AxiosResponse<GetProductIdTypes>> {
     return requestor.get(`/products/${productId}`)
   }
 

src/assets/images.d.ts

@@ -0,0 +1,25 @@
+declare module '*.png' {
+  const value: string
+  export default value
+}
+
+declare module '*.jpg' {
+  const value: string
+  export default value
+}
+
+declare module '*.jpeg' {
+  const value: string
+  export default value
+}
+
+declare module '*.gif' {
+  const value: string
+  export default value
+}
+
+declare module '*.svg' {
+  const value: string
+  export default value
+}
+// 문자열로 타입선언하는 이유는 <img src="경로"> 이기 때문