Skip to content

Commit

Permalink
Merge pull request #85 from SOPT-all/Minn-Choi-patch-1
Browse files Browse the repository at this point in the history 
[docs] README.md 수정
  • Loading branch information
@maylh
maylh authored Nov 29, 2024
2 parents c6e44a9 + d7f96ba commit cad316c
Showing 1 changed file with 104 additions and 50 deletions.
154 changes: 104 additions & 50 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,104 @@
# 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/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

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

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
});
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react';

export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
});
```
<img alt="image" src="https://github.com/user-attachments/assets/212e3257-dfd3-447d-a707-2f9c73eebb27">

# 🧞알라딘 _ Web
**35기 AND SOPT 합동세미나 데스크탑 웹 3조 - 알라딘 레포지토리 🧞‍♂️**


## 💻 FE Developer

| <img src="https://github.com/user-attachments/assets/397a7554-0c79-410b-bb6c-4f092ea6ab42" width="140" height="140" /> | <img src="https://github.com/user-attachments/assets/0aaa7084-329f-4a43-a282-fbc35b2defa5" width="140" height="140" /> | <img src="https://github.com/user-attachments/assets/ad97d2b2-9abd-4f7b-8b7f-b9334bcbc792" width="140" height="140" /> | <img src="https://github.com/user-attachments/assets/ca997ccb-bb52-4f65-8077-8d12d2377342" width="140" height="140" /> |
| :-----------------: | :-----------------: | :-----------------: | :----------------: |
| **공준혁** | **김가현** | **손지유** | **최 민** |
| 리드, 프론트엔드 | 팀원, 프론트엔드 | 팀원, 프론트엔드 | 팀원, 프론트엔드 |
| `헤더`,`푸터`,`배포` | `장바구니` | `메인뷰 하단` | `메인뷰 상단` |
| [@ocahs9](https://github.com/ocahs9) | [@maylh](https://github.com/maylh) | [@zzz-myam](https://github.com/zzz-myam) | [@Minn-Choi](https://github.com/Minn-Choi) |

---
<br>

## 🚩 구현 결과
> **헤더, 푸터**
<div style="display: flex; justify-content: space-around;">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/c0c9aa2d-4c72-4b83-ac12-71d478af79f8">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/9bf1df9e-8930-42e0-9467-7056656e1e8d">
</div>
<br>

> **장바구니**
<div style="display: flex; justify-content: space-around;">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/fb7dd401-760b-4ead-8fd5-dd3d4e91bf90">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/be0ff225-d221-4b9c-915d-e92693396af4">
</div>
<div style="display: flex; justify-content: space-around;">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/54276cbf-c4a3-4313-9118-c6fc0b35abc1">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/6f95598e-56bf-4177-9e6b-a938fb86adc7">
</div>
<br>
> **메인뷰 상단**
<div style="display: flex; justify-content: space-around;">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/e2b637cf-459d-4d6d-ab07-c6df0a019d62">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/e78c1c6d-f703-46a5-a65a-c2df579c3e8f">
</div>
<div style="display: flex; justify-content: space-around;">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/f99c606e-dd93-4726-b1cc-299aec0d263f">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/69de6d58-540c-4cbf-941b-287aed920954">
</div>
<br>
> **메인뷰 하단**
<div style="display: flex; justify-content: space-around;">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/33f1c562-734a-40c2-8593-de09e517a935">
<img width="500" alt="image" src="https://github.com/user-attachments/assets/5fd41170-9e0b-44cc-95e6-10863e5db8d9">
</div>
<img width="550" alt="image" src="https://github.com/user-attachments/assets/1dee5e93-4cf1-4c1c-82e7-85d34933dae5">
<img width="550" alt="image" src="https://github.com/user-attachments/assets/25124637-3b8f-43af-8f48-ea1b29495443">
<br>


## 🛠 기술 스택

<div align="center">

| 역할 | 종류 |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Library | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black) |
| Programming Language | ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white) |
| Styling | ![Emotion](https://img.shields.io/badge/Emotion-DB7093?style=for-the-badge&logo=emotion&logoColor=white) |
| Data Fetching | ![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white) | |
| Formatting | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) ![Stylelint](https://img.shields.io/badge/stylelint-333333?style=for-the-badge&logo=stylelint&logoColor=white") |
| Package Manager | ![Yarn](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white) |
| Deployment | ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white) |

</div>


<br>

## 🔥 커밋 컨벤션

| **커밋 유형** | **설명** |
|-------------------|---------------------------------------------------------|
| `init` | 브랜치 첫 커밋 |
| `feat` | 새로운 기능 추가 |
| `fix` | 버그 수정 |
| `docs` | 문서 수정 |
| `style` | 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우 |
| `refactor` | 코드 리팩토링 |
| `test` | 테스트 코드, 리팩토링 테스트 코드 추가 |
| `chore` | 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore |
| `build` | 빌드 관련 파일 수정에 대한 커밋
| `design` | CSS 등 사용자 UI 디자인 변경 |
| `comment` | 필요한 주석 추가 및 변경 |
| `rename` | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 |
| `remove` | 파일을 삭제하는 작업만 수행한 경우 |
| `!HOTFIX` | 급하게 치명적인 버그를 고쳐야 하는 경우 |
<br>

## 🔗 배포 링크

> [🧞알라딘 서비스 바로가기](https://35-collaboration-web-aladin.vercel.app/)
<br>
<img width="900" alt="image" src="https://github.com/user-attachments/assets/b0e4db53-fdf2-49f2-96c1-2ff170f7ee86">

0 comments on commit cad316c

Please sign in to comment.