Skip to content

Update README.md #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KyeongJooni merged 1 commit into from
Feb 19, 2026
Merged

Update README.md #115

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 115 additions & 75 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,115 @@
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@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
- [@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

## React Compiler

The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.

Note: This will impact Vite dev & build performances.

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...

// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,

// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
]);
```

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:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x';
import reactDom from 'eslint-plugin-react-dom';

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
]);
```
<img height="140" alt="logo3" src="https://github.com/user-attachments/assets/684ad3aa-96de-4360-bffe-9102d09c6e57" />

#

![LOOPIT Logo](https://img.shields.io/badge/LOOPIT-중고%20스마트기기%20거래%20플랫폼-13FFD0?style=for-the-badge&logoColor=black)

## 📱 서비스 소개

<img width="1920" height="1080" alt="표지" src="https://github.com/user-attachments/assets/0d4b5f74-5216-4017-8a65-c85bf85c3ac2" />

## 📱 다시 쓰는 가치, 믿고 거래하자! — LOOPIT

안 쓰는 폰, 태블릿, 워치 그냥 두지 마세요.
쓰지 않는 기기는 누군가에게 꼭 필요한 물건이 됩니다.

LOOPIT은 중고 스마트 기기에 새로운 쓸모를 찾아줍니다.
실시간 채팅으로 판매자와 직접 소통하고, AI 챗봇이 거래를 도와주며, 기기에 문제가 생기면 수리 서비스까지 연결됩니다.

좋은 기기가 제값을 받고, 필요한 사람에게 닿을 수 있도록. LOOPIT📱이 함께합니다.

## 📱 팀원 소개

<div align="center">
<table>
<thead>
<tr>
<th>🔥Lead</th>
<th>Member</th>
<th>Member</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img style="width: 220px;" alt="Frontend Lead" src="https://github.com/KyeongJooni.png" />
</td>
<td>
<img style="width: 220px;" alt="팀원" src="https://github.com/jwj0620gcu.png" />
</td>
<td>
<img style="width: 220px;" alt="팀원" src="https://github.com/YeBeenChoi.png" />
</td>
</tr>
<tr align="center">
<td>
<a href="https://github.com/KyeongJooni" target="_blank">이경준</a>
</td>
<td>
<a href="https://github.com/jwj0620gcu" target="_blank">정원준</a>
</td>
<td>
<a href="https://github.com/YeBeenChoi" target="_blank">최예빈</a>
</td>
</tr>
</tbody>
</table>
</div>

## 📱 LOOPIT 핵심 서비스

### 🏠 서비스 한눈에 보기 (홈)
주요기능을 어디로든 바로 들어갈 수 있게<br/>
캐러셀로 핵심 기능과 슬로건을 하나의 흐름으로 소개하고,<br/>
카드 버튼으로 원하는 서비스에 바로 진입 가능
<img width="1920" height="1080" alt="UI" src="https://github.com/user-attachments/assets/bc115189-99dd-4851-9043-42c9ef835ad0" />

### 🛍️ 중고 기기 탐색 · 구매
원하는 제품을 다양한 방법으로 탐색<br/>
제조사·모델·가격 기준 필터와 직접 검색으로 원하는 기기를 빠르게 찾고,<br/>
관심 상품은 찜해서 비교·재방문 가능
<img width="1920" height="1080" alt="UI2" src="https://github.com/user-attachments/assets/61108620-76cb-416c-bf7d-3815d3734123" />

### 📦 내 기기 판매 등록
판매 등록부터 확인과 수정까지 ONE-STEP<br/>
필요한 정보를 입력하고 등록·수정·삭제까지 한 번에<br/>
각 상태마다 명확한 알림 메시지 제공
<img width="1920" height="1080" alt="UI3" src="https://github.com/user-attachments/assets/37ab5739-1874-4325-aff0-538b256ebc9e" />

### 💬 실시간 채팅 (루핏톡)
중고거래 연락도 루핏톡 안에서<br/>
STOMP WebSocket 기반 실시간 채팅으로 구매자와 판매자가 직접 소통<br/>
거래 상태 변경도 채팅 내에서 바로 처리
<img width="1920" height="1080" alt="UI5" src="https://github.com/user-attachments/assets/6373fd98-1a4f-4573-9cfa-5da06a0951b9" />

### 🤖 AI 수리비 진단 (루핏봇)
궁금한 수리비 진단은 루핏봇과 함께<br/>
기기 정보와 고장 부위를 입력하면 AI가 예상 수리비를 빠르게 안내
<img width="1920" height="1080" alt="UI4" src="https://github.com/user-attachments/assets/6fbde7da-60ee-4323-af59-a02be4922603" />

### 🔧 근처 수리점 찾기
내 근처 수리점 탐색 및 리스트<br/>
카카오맵 기반으로 위치·검색 조건에 맞는 수리점을 지도와 리스트로 제공<br/>
가까운 순으로 정렬해 빠른 선택 가능
<img width="1920" height="1080" alt="UI6" src="https://github.com/user-attachments/assets/633e3390-93eb-4812-a69f-9a9ddc714fa7" />

### 👤 거래 내역 관리
거래 내역과 찜한 목록을 한곳에서 관리<br/>
구매·판매 내역, 찜한 상품을 탭으로 구분해 한눈에 확인
<img width="1920" height="1080" alt="UI7" src="https://github.com/user-attachments/assets/03e4f595-9138-4ad3-873d-b25609d6d393" />

## 📱 LOOPIT Tech Stack

| 역할 | 종류 |
| --- | --- |
| Core | ![React](https://img.shields.io/badge/React_19-61DAFB?style=for-the-badge&logo=React&logoColor=white) ![React Router](https://img.shields.io/badge/React_Router_7-CA4245?style=for-the-badge&logo=ReactRouter&logoColor=white) ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white) ![React Compiler](https://img.shields.io/badge/React_Compiler-61DAFB?style=for-the-badge&logo=React&logoColor=white) |
| Styling | ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS_v4-06B6D4?style=for-the-badge&logo=TailwindCSS&logoColor=white) ![Swiper](https://img.shields.io/badge/Swiper-6332F6?style=for-the-badge&logo=Swiper&logoColor=white) |
| State & Data | ![TanStack Query](https://img.shields.io/badge/TanStack_Query_v5-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white) ![Zustand](https://img.shields.io/badge/Zustand-443E38?style=for-the-badge&logo=Zustand&logoColor=white) ![React Hook Form](https://img.shields.io/badge/React_Hook_Form-EC5990?style=for-the-badge&logo=ReactHookForm&logoColor=white) ![Zod](https://img.shields.io/badge/Zod-3E67B1?style=for-the-badge&logo=Zod&logoColor=white) |
| Communication | ![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white) ![STOMP](https://img.shields.io/badge/STOMP-000000?style=for-the-badge) |
| External API | ![Kakao Map](https://img.shields.io/badge/Kakao_Map-FFCD00?style=for-the-badge&logo=Kakao&logoColor=black) ![Kakao Login](https://img.shields.io/badge/Kakao_Login-FFCD00?style=for-the-badge&logo=Kakao&logoColor=black) |
| Testing | ![Vitest](https://img.shields.io/badge/Vitest-6E9F18?style=for-the-badge&logo=Vitest&logoColor=white) ![Cypress](https://img.shields.io/badge/Cypress-69D3A7?style=for-the-badge&logo=Cypress&logoColor=white) ![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=Storybook&logoColor=white) |
| Infra | ![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=GitHubActions&logoColor=white) ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=Vercel&logoColor=white) |
| Tooling | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=ESLint&logoColor=white) ![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=Prettier&logoColor=white) ![Yarn](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=Yarn&logoColor=white) ![Git](https://img.shields.io/badge/Git-F05033?style=for-the-badge&logo=Git&logoColor=white) ![GitHub](https://img.shields.io/badge/GitHub-121011?style=for-the-badge&logo=GitHub&logoColor=white) |

## 📱 시작하기
[![LOOPIT 바로가기](https://github.com/user-attachments/assets/71985744-64bc-4b60-b4f6-058e9d36a562)](https://www.loopit.kro.kr/)
Loading