프로젝트 설명

기술 스택

• 프레임워크: Next.js + React
• 언어: TypeScript
• 스타일링: Tailwind CSS
• UI: shadcn/ui

구조

• app/: 메인 앱 및 사이트, query, reports, settings로 이루어짐. login과 register는 스켈레톤만 구성.
  • layout.tsx: 메인 레이아웃 페이지
  • page.tsx: 메인 랜딩 페이지
  • globals.css: 앱 스타일링
• components/: 재사용 가능 리액트 컴포넌트
  • layout/: 헤더, 푸터및 사이드바 등등 플로터 요소들
  • ui/: shadcn ui 컴포넌트 모음
• hooks/: React 훅 로직
• lib/: 유틸 함수, API 핸들링 (api.ts), 목업 데이터 & api (mock-data.ts, mock-api.ts), TS 타이핑 (types.ts).
• public/: 이미지와 로고 등등 정적인것들
• styles/: 앱외 스타일링

로컬 머신에서 돌리는 법 가이드

pnpm 설치

npm이 설치되어있다면 npm install -g pnpm 없다면 pnpm 공식 사이트에서 운영체제에 맞게 설치한다.

예시로 윈도우는

Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression

하면 된다.

로컬 머신에 클론하기

git clone https://github.com/Finecone/frontend

때린다.

이니셜라이제이션

pnpm install

굳이 npm으로 설치하면 귀찮아지므로 pnpm을 쓴다.

pnpm dev

dev 환경을 돌린다.

https://localhost:3000

으로 접속하면 완성!

이런식으로 뜨면 잘된거다.