|
1 | | -# React + TypeScript + Vite |
2 | | - |
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
4 | | - |
5 | | -Currently, two official plugins are available: |
6 | | - |
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
9 | | - |
10 | | -## React Compiler |
11 | | - |
12 | | -The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information. |
13 | | - |
14 | | -Note: This will impact Vite dev & build performances. |
15 | | - |
16 | | -## Expanding the ESLint configuration |
17 | | - |
18 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
19 | | - |
20 | | -```js |
21 | | -export default defineConfig([ |
22 | | - globalIgnores(['dist']), |
23 | | - { |
24 | | - files: ['**/*.{ts,tsx}'], |
25 | | - extends: [ |
26 | | - // Other configs... |
27 | | - |
28 | | - // Remove tseslint.configs.recommended and replace with this |
29 | | - tseslint.configs.recommendedTypeChecked, |
30 | | - // Alternatively, use this for stricter rules |
31 | | - tseslint.configs.strictTypeChecked, |
32 | | - // Optionally, add this for stylistic rules |
33 | | - tseslint.configs.stylisticTypeChecked, |
34 | | - |
35 | | - // Other configs... |
36 | | - ], |
37 | | - languageOptions: { |
38 | | - parserOptions: { |
39 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
40 | | - tsconfigRootDir: import.meta.dirname, |
41 | | - }, |
42 | | - // other options... |
43 | | - }, |
44 | | - }, |
45 | | -]); |
46 | | -``` |
47 | | - |
48 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
49 | | - |
50 | | -```js |
51 | | -// eslint.config.js |
52 | | -import reactX from 'eslint-plugin-react-x'; |
53 | | -import reactDom from 'eslint-plugin-react-dom'; |
54 | | - |
55 | | -export default defineConfig([ |
56 | | - globalIgnores(['dist']), |
57 | | - { |
58 | | - files: ['**/*.{ts,tsx}'], |
59 | | - extends: [ |
60 | | - // Other configs... |
61 | | - // Enable lint rules for React |
62 | | - reactX.configs['recommended-typescript'], |
63 | | - // Enable lint rules for React DOM |
64 | | - reactDom.configs.recommended, |
65 | | - ], |
66 | | - languageOptions: { |
67 | | - parserOptions: { |
68 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
69 | | - tsconfigRootDir: import.meta.dirname, |
70 | | - }, |
71 | | - // other options... |
72 | | - }, |
73 | | - }, |
74 | | -]); |
75 | | -``` |
| 1 | +<img height="140" alt="logo3" src="https://github.com/user-attachments/assets/684ad3aa-96de-4360-bffe-9102d09c6e57" /> |
| 2 | + |
| 3 | +# |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +## 📱 서비스 소개 |
| 8 | + |
| 9 | +<img width="1920" height="1080" alt="표지" src="https://github.com/user-attachments/assets/0d4b5f74-5216-4017-8a65-c85bf85c3ac2" /> |
| 10 | + |
| 11 | +## 📱 다시 쓰는 가치, 믿고 거래하자! — LOOPIT |
| 12 | + |
| 13 | +안 쓰는 폰, 태블릿, 워치 그냥 두지 마세요. |
| 14 | +쓰지 않는 기기는 누군가에게 꼭 필요한 물건이 됩니다. |
| 15 | + |
| 16 | +LOOPIT은 중고 스마트 기기에 새로운 쓸모를 찾아줍니다. |
| 17 | +실시간 채팅으로 판매자와 직접 소통하고, AI 챗봇이 거래를 도와주며, 기기에 문제가 생기면 수리 서비스까지 연결됩니다. |
| 18 | + |
| 19 | +좋은 기기가 제값을 받고, 필요한 사람에게 닿을 수 있도록. LOOPIT📱이 함께합니다. |
| 20 | + |
| 21 | +## 📱 팀원 소개 |
| 22 | + |
| 23 | +<div align="center"> |
| 24 | + <table> |
| 25 | + <thead> |
| 26 | + <tr> |
| 27 | + <th>🔥Lead</th> |
| 28 | + <th>Member</th> |
| 29 | + <th>Member</th> |
| 30 | + </tr> |
| 31 | + </thead> |
| 32 | + <tbody> |
| 33 | + <tr> |
| 34 | + <td> |
| 35 | + <img style="width: 220px;" alt="Frontend Lead" src="https://github.com/KyeongJooni.png" /> |
| 36 | + </td> |
| 37 | + <td> |
| 38 | + <img style="width: 220px;" alt="팀원" src="https://github.com/jwj0620gcu.png" /> |
| 39 | + </td> |
| 40 | + <td> |
| 41 | + <img style="width: 220px;" alt="팀원" src="https://github.com/YeBeenChoi.png" /> |
| 42 | + </td> |
| 43 | + </tr> |
| 44 | + <tr align="center"> |
| 45 | + <td> |
| 46 | + <a href="https://github.com/KyeongJooni" target="_blank">이경준</a> |
| 47 | + </td> |
| 48 | + <td> |
| 49 | + <a href="https://github.com/jwj0620gcu" target="_blank">정원준</a> |
| 50 | + </td> |
| 51 | + <td> |
| 52 | + <a href="https://github.com/YeBeenChoi" target="_blank">최예빈</a> |
| 53 | + </td> |
| 54 | + </tr> |
| 55 | + </tbody> |
| 56 | + </table> |
| 57 | +</div> |
| 58 | + |
| 59 | +## 📱 LOOPIT 핵심 서비스 |
| 60 | + |
| 61 | +### 🏠 서비스 한눈에 보기 (홈) |
| 62 | +주요기능을 어디로든 바로 들어갈 수 있게<br/> |
| 63 | +캐러셀로 핵심 기능과 슬로건을 하나의 흐름으로 소개하고,<br/> |
| 64 | +카드 버튼으로 원하는 서비스에 바로 진입 가능 |
| 65 | +<img width="1920" height="1080" alt="UI" src="https://github.com/user-attachments/assets/bc115189-99dd-4851-9043-42c9ef835ad0" /> |
| 66 | + |
| 67 | +### 🛍️ 중고 기기 탐색 · 구매 |
| 68 | +원하는 제품을 다양한 방법으로 탐색<br/> |
| 69 | +제조사·모델·가격 기준 필터와 직접 검색으로 원하는 기기를 빠르게 찾고,<br/> |
| 70 | +관심 상품은 찜해서 비교·재방문 가능 |
| 71 | +<img width="1920" height="1080" alt="UI2" src="https://github.com/user-attachments/assets/61108620-76cb-416c-bf7d-3815d3734123" /> |
| 72 | + |
| 73 | +### 📦 내 기기 판매 등록 |
| 74 | +판매 등록부터 확인과 수정까지 ONE-STEP<br/> |
| 75 | +필요한 정보를 입력하고 등록·수정·삭제까지 한 번에<br/> |
| 76 | +각 상태마다 명확한 알림 메시지 제공 |
| 77 | +<img width="1920" height="1080" alt="UI3" src="https://github.com/user-attachments/assets/37ab5739-1874-4325-aff0-538b256ebc9e" /> |
| 78 | + |
| 79 | +### 💬 실시간 채팅 (루핏톡) |
| 80 | +중고거래 연락도 루핏톡 안에서<br/> |
| 81 | +STOMP WebSocket 기반 실시간 채팅으로 구매자와 판매자가 직접 소통<br/> |
| 82 | +거래 상태 변경도 채팅 내에서 바로 처리 |
| 83 | +<img width="1920" height="1080" alt="UI5" src="https://github.com/user-attachments/assets/6373fd98-1a4f-4573-9cfa-5da06a0951b9" /> |
| 84 | + |
| 85 | +### 🤖 AI 수리비 진단 (루핏봇) |
| 86 | +궁금한 수리비 진단은 루핏봇과 함께<br/> |
| 87 | +기기 정보와 고장 부위를 입력하면 AI가 예상 수리비를 빠르게 안내 |
| 88 | +<img width="1920" height="1080" alt="UI4" src="https://github.com/user-attachments/assets/6fbde7da-60ee-4323-af59-a02be4922603" /> |
| 89 | + |
| 90 | +### 🔧 근처 수리점 찾기 |
| 91 | +내 근처 수리점 탐색 및 리스트<br/> |
| 92 | +카카오맵 기반으로 위치·검색 조건에 맞는 수리점을 지도와 리스트로 제공<br/> |
| 93 | +가까운 순으로 정렬해 빠른 선택 가능 |
| 94 | +<img width="1920" height="1080" alt="UI6" src="https://github.com/user-attachments/assets/633e3390-93eb-4812-a69f-9a9ddc714fa7" /> |
| 95 | + |
| 96 | +### 👤 거래 내역 관리 |
| 97 | +거래 내역과 찜한 목록을 한곳에서 관리<br/> |
| 98 | +구매·판매 내역, 찜한 상품을 탭으로 구분해 한눈에 확인 |
| 99 | +<img width="1920" height="1080" alt="UI7" src="https://github.com/user-attachments/assets/03e4f595-9138-4ad3-873d-b25609d6d393" /> |
| 100 | + |
| 101 | +## 📱 LOOPIT Tech Stack |
| 102 | + |
| 103 | +| 역할 | 종류 | |
| 104 | +| --- | --- | |
| 105 | +| Core |     | |
| 106 | +| Styling |   | |
| 107 | +| State & Data |     | |
| 108 | +| Communication |   | |
| 109 | +| External API |   | |
| 110 | +| Testing |    | |
| 111 | +| Infra |   | |
| 112 | +| Tooling |      | |
| 113 | + |
| 114 | +## 📱 시작하기 |
| 115 | +[](https://www.loopit.kro.kr/) |
0 commit comments