{"id":25509255,"url":"https://github.com/bekcodingaddict/bookstore-admin","last_synced_at":"2026-04-28T21:34:50.288Z","repository":{"id":277334748,"uuid":"932092014","full_name":"BekCodingAddict/Bookstore-Admin","owner":"BekCodingAddict","description":"이 프로젝트는 온라인 서점 관리자 대시보드 웹 애플리케이션은 서점의 책 목록을 관리하고, 책의 상세 정보를 확인하거나 수정하며, 각 책의 판매 수량을 모니터링하는 데 사용됩니다. 이 애플리케이션은 서점 운영자가 책을 쉽게 관리하고, 추가, 수정, 삭제할 수 있는 기능을 제공합니다. 프론트엔드는 Next.js, Tailwind CSS, TypeScript를 사용하여 개발되며, 백엔드는 RESTful API로 구현되어 데이터베이스와 통신하여 책 데이터를 저장하고 조회합니다.","archived":false,"fork":false,"pushed_at":"2025-02-16T21:52:42.000Z","size":305,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-03T23:32:44.904Z","etag":null,"topics":["mysql","nextjs","restful-api","ssr","tailwindcss"],"latest_commit_sha":null,"homepage":"https://bookstore-admin-sigma.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BekCodingAddict.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-13T10:56:14.000Z","updated_at":"2025-02-16T21:06:18.000Z","dependencies_parsed_at":"2025-07-01T11:04:54.537Z","dependency_job_id":"3a9465b2-0afc-4d43-8fac-583126fa8a4e","html_url":"https://github.com/BekCodingAddict/Bookstore-Admin","commit_stats":null,"previous_names":["bekcodingaddict/bookstore-admin"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BekCodingAddict/Bookstore-Admin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FBookstore-Admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FBookstore-Admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FBookstore-Admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FBookstore-Admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BekCodingAddict","download_url":"https://codeload.github.com/BekCodingAddict/Bookstore-Admin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FBookstore-Admin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32400867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mysql","nextjs","restful-api","ssr","tailwindcss"],"created_at":"2025-02-19T08:54:43.211Z","updated_at":"2026-04-28T21:34:50.272Z","avatar_url":"https://github.com/BekCodingAddict.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📚 Bookstore Admin\n\n\u003e ## 📖 프로젝트 개요\n\u003e 이 프로젝트는 온라인 서점 관리자 대시보드 웹 애플리케이션은 서점의 책 목록을 관리하고, 책의 상세 정보를 확인하거나 수정하며, 각 책의 판매 수량을 모니터링하는 데 사용됩니다. 이 애플리케이션은 서점 운영자가 책을 쉽게 관리하고, 추가, 수정, 삭제할 수 있는 기능을 제공합니다. 프론트엔드는 Next.js, Tailwind CSS, TypeScript를 사용하여 개발되며, 백엔드는 RESTful API로 구현되어 데이터베이스와 통신하여 책 데이터를 저장하고 조회합니다.\n\n- 👉 [LIVE PREVIEW](https://bookstore-admin-sigma.vercel.app)\n\n## 📑 프로젝트 요구사항\n\n### 1.💻 프론트엔드 요구사항\n\n- [x] Next.js와 TypeScript를 사용하여 웹 애플리케이션 개발\n- [x] 책 목록 페이지\n  - [x] 페이지당 10개 항목을 표시하는 페이지네이션 적용\n  - [x] 책 제목과 저자를 기준으로 검색 기능 구현\n- [x] 책 상세 정보 페이지 구현\n- [x] 책 추가/제거 및 수량 조절 기능 구현\n\n### 2. 🌐 백엔드 요구사항\n\n- [x] 데이터베이스와 통신하는 기본적인 RESTful API 설계 및 구현\n  - [x] 1. 책 목롣 조회 (GET /api/books)\n  - [x] 2. 책 상세 정보 조회 (GET /api/books/:id)\n  - [x] 3. 책 추가 (POST /api/books)\n  - [x] 4. 책 정보 수정 (PUT/api/books/:id)\n  - [x] 5. 책 삭제 (DELETE /api/books/:id)\n\n### 3. 추가 요구사항\n\n- [x] TypeScript를 사용하여 프론트엔드와 백엔드 간의 타입 안전성 보장\n\n### 4. 보너스 과제 (선택사항)\n\n- [ ] 핵심 기능에 대한 기본적인 테스트 작성\n  - [ ] 예: 책 추가/삭제, 책 목록 조회의 정상 동작 테스트\n\n\n## 🚀 주요 기능\n✅ **책 목록 조회** (검색 및 필터링 포함)  \n✅ **책 상세 정보 페이지**  \n✅ **책 추가 / 삭제 / 수량 조절 기능**  \n✅ **백엔드 API 설계 및 데이터베이스 연동**  \n✅ **TypeScript 적용 (프론트엔드 \u0026 백엔드 타입 안전성 보장)**  \n✅ **기본적인 테스트 작성 (책 추가/삭제, 목록 조회 테스트 포함)**  \n\n## Tech Stacks:\n\n\u003cimg src=\"https://github.com/BekCodingAddict/3D-Web-Developer-Portfolio/blob/master/src/assets/nextjs.webp\" title=\"Next.js\" alt=\"Next.js\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://cdn.worldvectorlogo.com/logos/tailwindcss.svg\" title=\"Tailwind CSS\" alt=\"Tailwind CSS\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg\" title=\"TypeScript\" alt=\"TypeScript\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://archive.org/download/github.com-tabler-tabler-icons_-_2020-03-19_21-18-41/cover.jpg\" title=\"Tabler Icons\" alt=\"Tabler Icons\" width=\"40\" height=\"40\"/\u003e \n\u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg\" title=\"Node.js\" alt=\"Node.js\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original-wordmark.svg\" title=\"MySQL\" alt=\"MySQL\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/sequelize/sequelize-original.svg\" title=\"Sequelize\" alt=\"Sequelize\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://intrastage.com/wp-content/uploads/2019/09/rest-api-icon.png\" title=\"REST API\" alt=\"REST API\" width=\"40\" height=\"40\"/\u003e \n\u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/eslint/eslint-original.svg\" title=\"ESLint\" alt=\"ESLint\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/git/git-original.svg\" title=\"Git\" alt=\"Git\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://github.com/motdotla/dotenv/raw/master/dotenv.png\" title=\"Dotenv\" alt=\"Dotenv\" width=\"40\" height=\"40\"/\u003e  \u003cimg src=\"https://raw.githubusercontent.com/github/explore/main/topics/github/github.png\" title=\"GitHub\" alt=\"GitHub\" width=\"40\" height=\"40\"/\u003e\n\n- **Frontend:** Next.js (App Router), Tailwind CSS, TypeScript  \n- **Backend:** Next.js API Routes, MySQL (Sequelize)  \n- **Deployment:** Vercel\n\n## ⚙️ 설치 및 실행 방법\n\n### 📌 1. **필수 설치 항목**\n- Node.js (v16.0.0 or higher)\n- MySQL (v5.7 or higher)  \n- npm (v8.0.0 or higher)\n\n### 📌 2. **프로젝트 클론**\n```bash\ngit clone https://github.com/yourusername/bookstore-admin.git\ncd bookstore-admin\n```\n### 아니면 그냥 도운러드 받아서 실행 : \u003ccode\u003ecode-\u003eDownload ZIP\u003c/code\u003e \n\n### 📌 3. 환경 변수 설정 / (.env Envoirment Variables)\n\n| Variables                                                                                           |\n| --------------------------------------------------------------------------------------------------- |\n| TABLE_NAME=\"Your MySQL Schema Name\"                                                                 |\n| ROOT_USERNAME=\"Your MySQL Root UserName\"                                                            |\n| MYSQL_PASSWORD=\"Your MySQL Password\"                                                                |\n| DB_HOST=\"Your DB Local host\"                                                                        |\n| DB_PORT=\"Your Local host port number\"                                                               |\n| NODE_ENV=\"development\"                                                                              |\n| NEXT_PUBLIC_BASE_URL=\"Your currently running on pablic base url for example: http://localhost:3000\" |\n\n### 📌 4. 의존성 설치\n```bash\nnpm install\n```\n### 📌 6. 개발 서버 실행\n```bash\nnpm run dev\n```\n\n## 📡 API 정보 (Backend)\n\n| 메서드 | URL  |      설명     |\n| ---------------- | ---------------- | ------------------- |\n|📍 GET |  /api/books     |  전체 책 목록 조회           |   \n| 📍 GET  | /api/books/:id     | 특정 책 정보 조회      |\n| 📍 POST |  /api/books   | 새 책 추가       | \n| 📍 PUT |  /api/books/:id    |     책 정보 수정          |\n|📍 DELETE  |  /api/books/:id   | 책 삭제    | \n\n## 📂 프로젝트 폴더 구조\n\n```plaintext\n📦 bookstore-admin\n ┣ 📂 config\n ┃ ┣ 📜 mySQL.ts\n ┣ 📂 errors\n ┃ ┣ 📜 ErrorArchives.ts\n ┣ 📂 models\n ┃ ┣ 📜 Boook.ts\n ┣ 📂 public\n ┣ 📂 src\n ┃  ┣ 📂 app\n ┣  ┃ ┣ 📂 api\n ┃  ┃ ┃ ┣ 📂 books  # API 엔드포인트\n ┃  ┃ ┃ ┃ ┣ 📂 [bookId]  # API bookid\n ┃  ┃ ┃ ┃ ┣ 📜 route.ts (GET, POST, PUT, DELETE)\n ┃  ┃ ┃ ┣ 📂 books  # API 엔드포인트\n ┃  ┃ ┃ ┃ ┣ 📂 [bookId]  # API BookId page\n ┃  ┃ ┃ ┣ 📂 components  # UI 컴포넌트\n ┃  ┃ ┃ ┣ 📂 utils\n ┃  ┃ ┃ ┣ 📂 types\n ┣ 📂 utils  # 유틸리티 함수 (DB 연결 등)\n ┣ 📜 .env.local (환경 변수)\n ┣ 📜 next.config.js\n ┣ 📜 package.json\n ┣ 📜 README.md\n ┗ 📜 tsconfig.json\n```\n\n## 참고 사항\n1. 제가 일부로 Next.js Image 성능 최적화 component를 일부로 안 썼습니다.원인 제가 책 상세 정보를 입력할 때 ImageUrl를 같이 입력하게 했습니다.그래서 Next.js Image를 사용하면 제가 원하는 ImageUrl를 입역할 수 없습니다. 매번 다향한 ImageUrㅣ 입력할 때 nextconfig 파일에 domain 추가해야 되기 떄문입니다. 그낭 img 탁를 쓰면 이런 문제 없기 때문입니다. \n```tsx\n      \u003cdiv className=\"md:w-1/3\"\u003e\n        {book \u0026\u0026 (\n          \u003cimg\n            src={book.imageUrl}\n            alt={book.title}\n            width={250}\n            height={350}\n            className=\"rounded-lg shadow-md\"\n            loading=\"lazy\"\n          /\u003e\n          //   \u003cImage\n          //     src={book.imageUrl}\n          //     alt={book.title}\n          //     width={250}\n          //     height={350}\n          //     className=\"rounded-lg shadow-md\"\n          //   /\u003e\n        )}\n      \u003c/div\u003e\n```\n2. Dashboard 에는 Order,Users,Settings page들을 UI 디자인만 구현해 났습니다. Interactivity가 없습니다!\n3. Dashboard에 로그인 할 떄 까자(FAke)user 정보로 고그인 할 수 있게 구현했습니다. Authentication and Authorization 기능 없습니다.\n4. 배포된 URL에 방문하시면 Database에서 데이터를 가져 오는데 문제가 있는 것 같습니다.MySQL 사용했기 떄문에 DATABASE 다로 HOSTING 했습니다. 그런데 Vercel로 배포하면 Database에서 데이터를 안 가져옵니다.여러번 노력했지만 아직 해결 못 했습니다.쇱게 MySQL 대신 Mongoose 썼으면는 이런 문제 었었을까 싶습니다.  그런데 Local Envoirment VsCode에 다 잘 실행되고 있습니다.MySQL WorkBranch에서도 HOSTING 했던 데이터 연력이 잘 되었습니다.  문제는 Vercel과 제가 MySQL Hosting 했던 Railway configration에 문제가 있듯 합니다. 아무튼 배포된 URL로 Online hosted MySQL DATABASE 연결을 아직도 못 했습니다.\n   \n\n## 에러 정리 \n| Error \u0026 Problem Title                                                                                                               | Status                                              | Difficult | Date         |\n| ----------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | --------- | ------------ |\n| [Uncaught (in promise) SyntaxError: Unexpected token '\u003c', \"\u003c!DOCTYPE \"... is not valid JSON](https://github.com/BekCodingAddict/Bookstore-Admin/blob/master/errors/Unexpected-token.md)                 | ![solved](https://img.shields.io/badge/pending-yellow) | middle    | Feb 15, 2025 |\n| [ useSearchParams() should be wrapped in a suspense boundary](https://github.com/BekCodingAddict/Bookstore-Admin/blob/master/errors/Wrap-with-Suspense-Boundary.md)  | ![solved](https://img.shields.io/badge/solved-blue) | low       | Feb 15, 2025 |\n| [ Hydration failed](https://github.com/BekCodingAddict/Bookstore-Admin/blob/enhancement/errors/Hydration-failed.md)                 | ![solved](https://img.shields.io/badge/solved-blue) | middle    | Feb 14, 2025 |\n| [ Params should be awaited](https://github.com/BekCodingAddict/Bookstore-Admin/blob/enhancement/errors/Params.should-be-awaited.md) | ![solved](https://img.shields.io/badge/solved-blue) | low       | Feb 14, 2025 |\n| [ div cannot be child of tr](https://github.com/BekCodingAddict/Bookstore-Admin/blob/enhancement/errors/Div-cannot-be-child-tr.md)  | ![solved](https://img.shields.io/badge/solved-blue) | low       | Feb 14, 2025 |\n\n\n## UI Screenshots\n\n![image](https://github.com/user-attachments/assets/58f8ff28-54f4-4253-8555-7ced6e4d4d53)\n![image](https://github.com/user-attachments/assets/23b5d943-6fa0-43a6-a599-99efe5c012e7)\n![image](https://github.com/user-attachments/assets/16b619f4-47f2-482b-aef8-4a1888e85984)\n![image](https://github.com/user-attachments/assets/96cb224b-eddd-4f78-83de-17d62837aff1)\n![image](https://github.com/user-attachments/assets/1ede4be2-9fb4-4826-a8d3-8fb36b23da38)\n![image](https://github.com/user-attachments/assets/be53766d-310f-498f-a30f-87d2b4be462d)\n![image](https://github.com/user-attachments/assets/9272df55-aa20-47fd-bedf-f080000fcc8b)\n![image](https://github.com/user-attachments/assets/4cf24aa6-a90f-4c09-83a6-128bb1641955)\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Fbookstore-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbekcodingaddict%2Fbookstore-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Fbookstore-admin/lists"}