investmetic은 투자 매매 전략 공유 및 중개소셜 플랫폼 서비스 입니다.
| 역할 | 이메일 | 비밀번호 |
|---|---|---|
| 투자자 | investor@example.com | investor123 |
| 트레이더 | trader@example.com | trader123 |
| 👑 @Deun | @Nana | @SuMin | @Kimpra | @James |
| 프로젝트 초기 세팅 (NextJS, 린트 및 Prettier, 기본 스타일 및 SCSS, lefthook) 공통 컴포넌트 (사이드바, 탭메뉴, 아바타, 푸터, 로딩스피너, 랜딩 메인 차트) 랜딩 페이지, 회원가입 페이지, 구독한 전략 페이지, 문의내역 페이지, 약관 페이지 |
공통 컴포넌트 (인풋, 모달) 프로필 페이지 공지사항 페이지 트레이더 페이지 404 페이지 |
공통 컴포넌트 (전략 리스트 아이템, 종목&매매 아이콘, 테이블, 스켈레톤, 회원가입 스텝, 전략 정보, 별점, 검색바, 사이드 정보, 랭킹 차트, 분석 차트, 목록 헤더) 전략 랭킹 모음 페이지 전략 상세 페이지 |
프로젝트 초기 세팅(NextJS, 배포, MSW) 공통 컴포넌트 (셀렉트, 헤더) 관리자 공지 페이지 관리자 질문 페이지 관리자 사용자 페이지 |
프로젝트 초기 세팅 (Tanstack Query, MSW) 공통 컴포넌트 (페이지네이션, 버튼, 체크 박스, 랜딩 선 차트) 로그인 페이지 나의 전략 페이지 전략 관리 페이지 전략 등록 페이지 |
회원가입 버튼을 상단에 배치하여 즉각적인 가입을 유도하며, 사이트 이용자 수, 인기 전략, 통합 지표(SM Score) 등 주요 정보를 한눈에 확인할 수 있습니다.
전략을 랭킹 순으로 확인할 수 있으며 로그인하지 않은 사용자도 전략 목록을 자유롭게 둘러볼 수 있습니다. 검색바를 통해 매매 유형, SM Score 등 다양한 조건으로 전략을 쉽게 찾아볼 수 있습니다.
트레이더 상세보기 페이지에서 트레이더의 전략을 확인할 수 있습니다.
나의 전략을 확인할 수 있으며, 무한 스크롤로 데이터를 끊김 없이 탐색할 수 있습니다.
내가 구독한 전략들을 한눈에 확인할 수 있습니다.
문의 내역을 확인할 수 있으며, 모든 답변, 답변 대기, 답변 완료 상태로 구분됩니다. 정렬과 검색 기능을 통해 원하는 데이터를 쉽게 찾을 수 있습니다.
관리자 계정으로 로그인하면 회원 관리, 공지사항 등록, 종목 및 매매 유형 관리, 전략 승인 관리, 문의 내역 확인 등의 기능을 제공하며, 효율적인 사이트 운영을 지원합니다.
| 기술 스택 | 도입 이유 |
|---|---|
 |
(14.2.16) SSR로 SEO와 초기 로딩 속도 개선, 폴더 기반 라우팅으로 경로 자동 생성 |
 |
(8.4.0) 문서화로 사용 방법 및 디자인 시스템 확인, UI 변경사항을 즉각 확인하며 테스트 코드 생략 가능 |
 |
(1.80.5) Mixin으로 반복 스타일 재사용 효율성 증대, 변수 지원으로 색상·폰트 등 공통 값 관리 용이 |
 |
(5.0) 정적 타입 검사로 안정성 확보 및 런타임 에러 감소, 코드 자동완성과 명확한 타입 정의로 가독성과 유지보수성 향상 관리 |
 |
(18) 컴포넌트 기반 아키텍처로 재사용성 극대화, 선언형 UI로 직관적이고 효율적인 개발 경험 제공 |
 |
(5.59.19) 비동기 상태 관리와 캐싱으로 데이터 요청 최적화 및 서버 상태 관리 간소화 |
 |
(5.0.1) 가벼운 상태 관리 라이브러리로 직관적인 API와 불변성 없이도 효율적인 상태 관리 제공 |
1. 모듈화와 독립성: 기능별로 파일을 관리해 수정, 삭제, 추가가 용이
2. 명확한 구조: 기능 단위로 폴더가 구성되어 파일을 쉽게 찾을 수 있음
3. 협업 효율성: 작업 영역이 분리되어 충돌 없이 동시 작업 가능
4. 유지보수 용이성: 관련 코드가 한 폴더에 모여 있어 수정 및 확장이 쉬움