|
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/) 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 | | -## Expanding the ESLint configuration |
11 | | - |
12 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
13 | | - |
14 | | -```js |
15 | | -export default tseslint.config([ |
16 | | - globalIgnores(['dist']), |
17 | | - { |
18 | | - files: ['**/*.{ts,tsx}'], |
19 | | - extends: [ |
20 | | - // Other configs... |
21 | | - |
22 | | - // Remove tseslint.configs.recommended and replace with this |
23 | | - ...tseslint.configs.recommendedTypeChecked, |
24 | | - // Alternatively, use this for stricter rules |
25 | | - ...tseslint.configs.strictTypeChecked, |
26 | | - // Optionally, add this for stylistic rules |
27 | | - ...tseslint.configs.stylisticTypeChecked, |
28 | | - |
29 | | - // Other configs... |
30 | | - ], |
31 | | - languageOptions: { |
32 | | - parserOptions: { |
33 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
34 | | - tsconfigRootDir: import.meta.dirname, |
35 | | - }, |
36 | | - // other options... |
37 | | - }, |
38 | | - }, |
39 | | -]) |
| 1 | +<div align="center"> |
| 2 | + <img src="https://capsule-render.vercel.app/api?type=waving&color=E3F2FD&height=200§ion=header&text=Monew&fontSize=80&fontColor=1976D2&animation=fadeIn"/> |
| 3 | +</div> |
| 4 | + |
| 5 | +### 🖐️ 프로젝트 소개 |
| 6 | + |
| 7 | +<div align="center"> |
| 8 | + <img src="./src/assets/readme/landing.png"/> |
| 9 | + </br> |
| 10 | + </br> |
| 11 | + <blockquote>여러 뉴스 API를 통합하여 사용자에게 맞춤형 뉴스를 제공하고, 의견을 나눌 수 있는 소셜 기능을 갖춘 서비스 |
| 12 | + </blockquote> |
| 13 | + </br> |
| 14 | + </br> |
| 15 | + </br> |
| 16 | +</div> |
| 17 | +<div align="center"> |
| 18 | + <p> |
| 19 | + <strong>Monew</strong>는 사용자가 등록한 관심사를 기반으로 개인화된 뉴스를 제공하고, 댓글과 좋아요를 통해 다른 사용자들과 의견을 나눌 수 있는 소셜 뉴스 플랫폼입니다. |
| 20 | + </p> |
| 21 | + <nav> |
| 22 | + <a href="#서비스소개">📅 서비스 소개</a></br> |
| 23 | + <a href="#시작하기">🚀 시작하기</a></br> |
| 24 | + <a href="#주요기술스택">💎 주요 기술 스택</a></br> |
| 25 | + <a href="#폴더 구조">🗂️ 폴더 구조</a></br> |
| 26 | + <a href="#팀원소개">🧑 팀원 소개</a></br> |
| 27 | + </nav> |
| 28 | + |
| 29 | +<br/> |
| 30 | + |
| 31 | +</div> |
| 32 | +<h2 id="서비스소개">📅 서비스 소개</h2> |
| 33 | +<div align="center"> |
| 34 | + <section> |
| 35 | + <h3>📰 맞춤형 뉴스 큐레이션</h3> |
| 36 | + <p> |
| 37 | + 📢 관심사를 등록하면 관련된 뉴스 기사를 자동으로 추천받을 수 있습니다.</br> |
| 38 | + 📢 여러 뉴스 API를 통합하여 다양한 출처의 뉴스를 한 곳에서 확인할 수 있습니다. |
| 39 | + </p> |
| 40 | + <img src="./src/assets/readme/news.png" width="800px"/> |
| 41 | + </section> |
| 42 | + </br> |
| 43 | + <section> |
| 44 | + <h3>💬 소셜 기능으로 의견 공유</h3> |
| 45 | + <p>📢 뉴스 기사에 댓글을 달아 다른 사용자들과 의견을 나눌 수 있습니다.</br> |
| 46 | + 📢 수정 및 삭제 기능을 통해 자유롭게 소통할 수 있습니다.</br> |
| 47 | + 📢 좋아요 기능으로 관심 있는 뉴스와 댓글에 공감을 표현할 수 있습니다. |
| 48 | + </p> |
| 49 | + <img src="./src/assets/readme/reply.png" width="500px"/> |
| 50 | + </section> |
| 51 | + </br> |
| 52 | + </br> |
| 53 | + <section> |
| 54 | + <h3>⏬아래 링크를 클릭하시면 더 다양한 기능들을 만날 수 있습니다!⏬</h3> |
| 55 | + <a href="https://monew.vercel.app">⏩지금 Monew 사용하러 가보기!⏪</a> |
| 56 | + </section> |
| 57 | +</div> |
| 58 | + |
| 59 | +<br /> |
| 60 | + |
| 61 | +<h2 id="시작하기">🚀 시작하기</h2> |
| 62 | + |
| 63 | +### 사전 요구사항 |
| 64 | + |
| 65 | +- Node.js 20.19+ 또는 22.12+ 이상 (Vite 요구사항) |
| 66 | +- npm 또는 yarn |
| 67 | + |
| 68 | +> ⚠️ Node.js 버전 확인 |
| 69 | +> |
| 70 | +> ```bash |
| 71 | +> node -v |
| 72 | +> ``` |
| 73 | +> |
| 74 | +> 버전이 낮다면 [Node.js 공식 사이트](https://nodejs.org/)에서 최신 LTS 버전을 설치하세요. |
| 75 | +
|
| 76 | +### 설치방법 |
| 77 | +
|
| 78 | +1. **저장소 클론** |
| 79 | +
|
| 80 | +```bash |
| 81 | +git clone https://github.com/team-monew/Monew.git . |
| 82 | +``` |
| 83 | +
|
| 84 | +2. **의존성 설치** |
| 85 | + |
| 86 | +```bash |
| 87 | +npm install |
| 88 | +# 또는 |
| 89 | +yarn install |
| 90 | +``` |
| 91 | + |
| 92 | +### 실행방법 |
| 93 | + |
| 94 | +#### **개발 서버 실행** |
| 95 | + |
| 96 | +```bash |
| 97 | +npm run dev |
| 98 | +# 또는 |
| 99 | +yarn dev |
| 100 | +``` |
| 101 | + |
| 102 | +브라우저에서 `http://localhost:5173` 접속 |
| 103 | + |
| 104 | +#### **프로덕션 빌드** |
| 105 | + |
| 106 | +```bash |
| 107 | +npm run build |
40 | 108 | ``` |
41 | 109 |
|
42 | | -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: |
43 | | - |
44 | | -```js |
45 | | -// eslint.config.js |
46 | | -import reactX from 'eslint-plugin-react-x' |
47 | | -import reactDom from 'eslint-plugin-react-dom' |
48 | | - |
49 | | -export default tseslint.config([ |
50 | | - globalIgnores(['dist']), |
51 | | - { |
52 | | - files: ['**/*.{ts,tsx}'], |
53 | | - extends: [ |
54 | | - // Other configs... |
55 | | - // Enable lint rules for React |
56 | | - reactX.configs['recommended-typescript'], |
57 | | - // Enable lint rules for React DOM |
58 | | - reactDom.configs.recommended, |
59 | | - ], |
60 | | - languageOptions: { |
61 | | - parserOptions: { |
62 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
63 | | - tsconfigRootDir: import.meta.dirname, |
64 | | - }, |
65 | | - // other options... |
66 | | - }, |
67 | | - }, |
68 | | -]) |
| 110 | +<br /> |
| 111 | + |
| 112 | +<h2 id="주요기술스택">💎 주요 기술 스택</h2> |
| 113 | + |
| 114 | +| 기술 이름 | 선정 이유 | |
| 115 | +| ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | |
| 116 | +|  | 컴포넌트 기반 설계 방식으로 재사용 가능한 UI를 구축하고, Virtual DOM을 통한 효율적인 렌더링을 위해 선정했습니다. | |
| 117 | +|  | Props 타입 지정으로 인한 런타임 오류 감소, IDE 자동 완성 기능 등 타입 안정성을 통한 코드 품질 개선을 위해 선정했습니다. | |
| 118 | +|  | 빠른 개발 서버 시작 속도와 HMR(Hot Module Replacement)을 통한 개발 생산성 향상을 위해 선정했습니다. | |
| 119 | +|  | SPA에서 클라이언트 사이드 라우팅을 구현하고, 페이지 전환 시 부드러운 사용자 경험을 제공하기 위해 선정했습니다. | |
| 120 | +|  | axios instance의 interceptor 기능을 통한 중복 코드 최소화 및 여러 뉴스 API 통합 관리를 위해 선정했습니다. | |
| 121 | +|  | 유틸리티 클래스 사용으로 클래스 네이밍 고민 감소, 디자인 시스템이 미흡할 시 유연한 대응이 가능하기에 선정했습니다. | |
| 122 | +|  | 경량화된 날짜 처리 라이브러리로 뉴스 게시 시간, 댓글 작성 시간 등을 직관적으로 포맷팅하기 위해 선정했습니다. | |
| 123 | +|  | 사용자 액션(좋아요, 댓글 작성, 관심사 등록 등)에 대한 즉각적인 피드백을 제공하여 UX를 향상시키기 위해 선정했습니다. | |
| 124 | +|  | 코드 품질 향상과 일관된 코딩 스타일 유지, 잠재적 버그를 사전에 방지하기 위해 선정했습니다. | |
| 125 | +|  | 자동 코드 포맷팅을 통한 일관된 코드 스타일 유지 및 팀원 간 코드 리뷰 시 스타일 논쟁을 줄이기 위해 선정했습니다. | |
| 126 | +|  | Git hooks를 통한 커밋 전 자동 린트 및 포맷팅 검사로 코드 품질을 보장하고, 불필요한 커밋을 방지하기 위해 선정했습니다. | |
| 127 | + |
| 128 | +<br /> |
| 129 | + |
| 130 | +<h2 id="폴더 구조">🗂️ 폴더 구조</h2> |
| 131 | + |
| 132 | +```text |
| 133 | +MONEW/ |
| 134 | +├─ public/ |
| 135 | +│ ├─ fonts/ |
| 136 | +│ └─ favicon.ico |
| 137 | +├─ src/ |
| 138 | +│ ├─ api/ # 리소스별 API 래퍼 : index.ts + types.ts 페어 |
| 139 | +│ │ ├─ articles/ |
| 140 | +│ │ ├─ comments/ |
| 141 | +│ │ ├─ interests/ |
| 142 | +│ │ ├─ notifications/ |
| 143 | +│ │ ├─ user-activities/ |
| 144 | +│ │ └─ users/ |
| 145 | +│ ├─ app/ # 레이아웃/라우트 프레임 |
| 146 | +│ │ ├─ layouts/ |
| 147 | +│ │ └─ routes/ |
| 148 | +│ │ ├─ public/ |
| 149 | +│ │ └─ private/ |
| 150 | +│ │ └─ App.tsx |
| 151 | +│ ├─ assets/ # 앱에서 쓰는 정적 에셋 |
| 152 | +│ │ ├─ icons/ |
| 153 | +│ │ ├─ images/ |
| 154 | +│ │ └─ logos/ |
| 155 | +│ ├─ features/ # 도메인 단위 UI/로직 |
| 156 | +│ │ ├─ activities/ |
| 157 | +│ │ ├─ articles/ |
| 158 | +│ │ ├─ auth/ |
| 159 | +│ │ ├─ comments/ |
| 160 | +│ │ ├─ interests/ |
| 161 | +│ │ ├─ notifications/ |
| 162 | +│ │ └─ user/ |
| 163 | +│ ├─ shared/ # 전역 공용 레이어 |
| 164 | +│ │ ├─ components/ |
| 165 | +│ │ ├─ constants/ |
| 166 | +│ │ ├─ hooks/ |
| 167 | +│ │ ├─ lib/ |
| 168 | +│ │ ├─ utils/ |
| 169 | +│ │ ├─ styles/ |
| 170 | +│ │ └─ types/ |
| 171 | +│ └─ main.tsx |
69 | 172 | ``` |
| 173 | + |
| 174 | +<br/> |
| 175 | + |
| 176 | +<h2 id="팀원소개">🧑 팀원 소개</h2> |
| 177 | + |
| 178 | +<a href="https://www.notion.so/26f2c744f86a8000bdb0d71497422216?source=copy_link">📑 프로젝트 협업 문서(노션) 바로가기</a> |
| 179 | + |
| 180 | +<div align="center"> |
| 181 | + <table> |
| 182 | + <tr> |
| 183 | + <td align="center" width="150px"> |
| 184 | + <a href="https://github.com/member1"> |
| 185 | + <img src="https://avatars.githubusercontent.com/u/189521259?v=4" width="120px" alt="조민지"/> |
| 186 | + </a> |
| 187 | + <br /> |
| 188 | + <a href="https://github.com/member1"><b>조민지</b></a> |
| 189 | + </td> |
| 190 | + <td align="center" width="150px"> |
| 191 | + <a href="https://github.com/sori4606"> |
| 192 | + <img src="https://avatars.githubusercontent.com/u/110970570?v=4" width="120px" alt="송형진"/> |
| 193 | + </a> |
| 194 | + <br /> |
| 195 | + <a href="https://github.com/sori4606"><b>송형진</b></a> |
| 196 | + </td> |
| 197 | + </tr> |
| 198 | + </table> |
| 199 | +</div> |
| 200 | +<div align="center"> |
| 201 | + <img src="https://capsule-render.vercel.app/api?type=waving&color=E3F2FD&height=200§ion=footer&fontSize=80" /> |
| 202 | +</div> |
0 commit comments