Merge pull request #166 from Moaguide-develop/dev

Dev

.eslintrc.json

@@ -8,6 +8,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:cypress/recommended",
     "next", "next/core-web-vitals"
   ],
   "ignorePatterns": ["dist", ".eslintrc.json"],

README.md

@@ -2,10 +2,97 @@
 
 
 <br/>
+
+# 프로젝트 소개
+
+
+
+> **제작기간** : 2024.07.22 ~ 개발 진행 중
+
+> **제작인원** : 7명 (PM 2명, UI/UX 외주 제작, FE 3명, BE 2명)
+
+> **서비스 소개** : 해당 프로젝트는 분산된 STO(토큰증권) 시장 정보를 통합해 투자자들에게 신뢰도 높은 최신 데이터와 분석 리포트를 제공하는 서비스입니다. 자체 플랫폼 개발과 마케팅을 통해 개발 초기 67여 명의 유저를 모집했으며, 2024년까지 2,000명의 유저를 확보할 계획입니다. MVP 개발 이후 플랫폼 확장과 B2B 모델을 통해 시장 점유율을 확대할 예정입니다. 조각투자 상품 정보 제공, 최신 뉴스를 제공하며 자체 프리미엄 구독권 결제 시 투자 가이드 서비스를 함께 제공합니다.
+
+</aside>
+
 <br/>
 
+## 🧑‍🤝‍🧑 Contributors
+
+### FE Team
+
+<div>
+  <table>
+      <tr>
+          <th>방호진</th>
+          <th>정지오</th>
+          <th>조기범</th>
+      </tr>
+      <tr>
+          <td align="center">
+              <img src="https://avatars.githubusercontent.com/u/132210541?v=4" alt="avatar" width="150" style="max-width: 100%;" /><br />
+              <a href="https://github.com/banhogu">@Bang HoJin</a>
+          </td>
+          <td align="center">
+              <img src="https://avatars.githubusercontent.com/u/104253583?v=4" alt="avatar" width="150" style="max-width: 100%;" /><br />
+              <a href="https://github.com/jiohjung98">@jiohjung98</a>
+          </td>
+          <td align="center">
+              <img src="https://avatars.githubusercontent.com/u/95483959?v=4" alt="avatar" width="150" style="max-width: 100%;" /><br />
+              <a href="https://github.com/eun-hak">@JO KIBEOM</a>
+          </td>
+      </tr>
+  </table>
+</div>
+
+<br/>
+
+# 프로젝트 상세 소개
+
+### 💡 핵심 기능
+
+> **조각 투자 상품 실시간 정보 제공**
+> 
+> - 상품의 시가총액, 현재가, 등락 폭, 수익률 데이터를 실시간 그래프를 통해 시각적으로 제공
+> - 관심 상품 저장 기능을 통해 저장한 상품에 접근
+> - 검색 기능을 통해 투자 상품에 쉽고 빠르게 접근
+
+> **투자 상품 관련 기사 모아보기**
+> 
+> - 부동산, 음악 저작권, 미술품 등 카테고리별 최신 기사로 바로 이동할 수 있는 링크제공
+> - 가장 많이 본 기사, 최신순, 인기순 등 다양한 정렬 방식으로 뉴스 정보 제공
+
+> **조각 투자 가이드**
+> 
+> - 조각 투자에 익숙하지 않은 사용자를 위해, 투자 가이드 커리큘럼과 리포트를 PDF 형식으로 제공
+
+> **로그인/회원가입**
+> 
+> - 카카오, 네이버, 구글 계정을 통해 소셜 로그인 기능 제공
+> - 휴대폰 인증이 포함된 회원가입
+> - 회원탈퇴 기능
+
+> **ETC**
+> 
+> - 마이페이지, 회원정보 수정
+> - 카카오톡 1:1 문의
+> - 모바일 반응형 디자인
+
+<br/>
+
+# 프로젝트 기술 스택
+
+<img width="1028" alt="Untitled (8)" src="https://github.com/user-attachments/assets/d7890f04-7811-4843-a003-51b1fe5a62a9">
+
+- **개발** : `TypeScript`, `Next.js`
+- **스타일링** : `Tailwind CSS`, `Figma`
+- **상태 관리** : `Zustand`, `React Query`
+- **API 모킹** : `MSW`
+- **배포 및 호스팅** : `Vercel` , `EC2`
+- **ETC** : `react-virtuoso`, `react-markdown`, `chart.js`, `jspdf`, `swiper`
+
+<br/>
 
-<br/><br/>
 ## Team Convention
 
 | 태그                  | 설명                                                                      |
@@ -25,12 +112,3 @@
 
 <br/>
 
-
-## Script
-
-앱 실행
-
-```
-$ npm run build
-$ npm run dev
-```

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: 'http://localhost:3000'
+  }
+});

cypress/e2e/home.cy.ts

@@ -0,0 +1,7 @@
+export {};
+
+describe('홈페이지 테스트', () => {
+  it('홈페이지 접속', () => {
+    cy.visit('/');
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,38 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+export {};

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start -p 80",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "analyze": "cross-env ANALYZE=true next build"
+    "analyze": "cross-env ANALYZE=true next build",
+    "cypress:open": "cypress open"
   },
   "dependencies": {
     "@tailwindcss/line-clamp": "^0.4.4",
@@ -53,9 +54,11 @@
     "@types/scroll-lock": "^2.1.3",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "cross-env": "^7.0.3",
+    "cypress": "^13.16.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-refresh": "^0.4.9",