[손서하] 중급 과제 구현 완료

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
+    "prettier",
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parserOptions: { ecmaVersion: "latest", sourceType: "module" },

.prettierrc

@@ -0,0 +1,17 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "overrides": [
+	  {
+		  "files": "*.css",
+		  "options": {
+				"printWidth": 0
+		  }
+	  }
+  ]
+}

jsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+      "jsx": "react-jsx",
+      "lib": ["esnext", "dom"],
+      "checkJs": true,
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["src/*"]
+      },
+      "types": ["vite/client"]
+    },
+    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "src/App.jsx"],
+    "exclude": ["node_modules", "**/node_modules", "dist"]
+  }
+

package.json

@@ -11,20 +11,25 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write ./src"
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "vite": "^5.4.1"
+    "prettier": "3.4.2",
+    "vite": "^5.4.1",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

src/App.jsx

@@ -1,9 +1,16 @@
-import './App.css'
-
-function App() {
+// @ts-nocheck
+import CurrentBookContextProvider from "@/contexts/CurrentBookContextProvider";
+import MainPage from "@/Pages/MainPage";
+import "@/index.css"
+const App = () => {
   return (
-    <></>
-  )
-}
+    <>
+      <CurrentBookContextProvider>
+      <MainPage />
+    </CurrentBookContextProvider>
+
+    </>
+  );
+};
 
-export default App
+export default App;

src/Layouts/Layout.jsx

@@ -0,0 +1,14 @@
+/* eslint-disable react/prop-types */
+import { Link } from "react-router-dom";
+const Layout = ({title, children}) => {
+    return (
+      <section style={{ width: 440 }}>
+        <div style={{ backgroundColor: "#888" }}>Header</div>
+        <h3>{title}</h3>
+        {children}
+        <div style={{ backgroundColor: "#888" }}>Footer <Link to= "/support">고객센터</Link></div>
+      </section>
+    );
+  }
+
+  export default Layout;

src/Pages/BookPage.jsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+/* eslint-disable react/prop-types */
+import Layout from "@/Layouts/Layout"
+import { useEffect,useState } from "react"
+import { useParams } from "react-router-dom"
+import books from "@/mock/book"
+const BookPage = () => {
+    const [data,setData] = useState({});
+    const params = useParams();
+    const id = Number(params.id)
+
+    useEffect(()=>{
+        // @ts-ignore
+
+        const searchedBook = books.find((book=>book.id === id))
+        console.log(books)
+
+        searchedBook && setData(searchedBook)
+
+
+    },[id])
+
+    return <Layout title={data.title}>
+        <ul className="book-details">
+            <li>저자: {data.author}</li>
+            <li>출판: {data.publisher} | {data.year}</li>
+            <li>가격: {data.price}</li>
+        </ul>
+    </Layout>
+
+}
+export default BookPage

src/Pages/MainPage.jsx

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import Layout from "@/Layouts/Layout";
+import Bookshelves from "@/components/Bookshelves";
+import Author from "@/components/Author";
+const MainPage = () => {
+    return <Layout>
+        <Bookshelves />
+        <Author />
+    </Layout>
+
+}
+export default MainPage;

src/Pages/NotFoundPage.jsx

@@ -0,0 +1,8 @@
+import Layout from "@/Layouts/Layout"
+const NotFoundPage=()=>{
+
+    return <Layout title="페이지를 찾을 수 없습니다.">
+        <div>입력하신 주소를 찾을 수 없습니다.</div>
+    </Layout>
+}
+export default NotFoundPage

src/Pages/SupportPage.jsx

@@ -0,0 +1,9 @@
+import Layout from "@/Layouts/Layout";
+const SupportPage=()=>{
+    return<Layout title="고객센터">
+        <div>010-0000-0000</div>
+        <div>cs@example.com</div>
+    </Layout>
+
+}
+export default SupportPage;

src/components/Author.jsx

@@ -0,0 +1,11 @@
+import Container from "@/components/Container";
+const Footer=()=>{
+    return(
+    <Container title="만든이">
+        <div>손서하</div>
+        <div >seohas0428@naver.com</div>
+    </Container>
+    )
+
+}
+export default Footer;