코드잇에서 주관하는 프로젝트입니다.
🧑💻 프로젝트 소개
🗓️ 개발 기간
10 / 7 (목) ~ 11 / 14 (목)
👨👨👦👦 개발자 소개
📁 프로젝트 구조
📁wine/
│
├── 📁public/
│ ├── 📁images/ # 이미지 파일 폴더
│ └── 📁ic_wine.svg ...
│
├── 📁constants/
│ └── 📁auth/
│ └── mediaQueryBreakPoint.ts
│
├── 📁src/
│ └── 📁components/ # 재사용 가능한 컴포넌트
│ └── 📁common/ # 공통 컴포넌트
│ ├── 📁Button/
│ │ └── Button.tsx
│ └── 📁Toast/
│ └── Toast.tsx
│
├── 📁pages/ # Next.js page 라우팅
│ │ └── 📁signin/
│ │ └── index.tsx
│ │ └── 📁signup/
│ │ └── index.tsx
│ │ └── 📁[id]/ # 팀 페이지에 들어갈 컴포넌트 모음
│ │ │ ├── 📁editteam/
│ │ │ │ └── index.tsx
│ │ └── index.tsx
│ │ └── index.tsx
│ │ └── _app.tsx
│ │ └── _404.tsx
│ │
│ ├── 📁libs/ # 라이브러리 관련된 세팅 및 함수들 정리하는 폴더
│ │ └── 📁axios/ # axios 관련 세팅 및 api 요청 함수
│ │ └── axiosInstance.ts
│ │ └── 📁auth/
│ │ └── 📁image/
│ │ └── 📁review/
│ │ └── 📁user/
│ │ └── 📁wine/
│ │
│ ├── 📁contexts/ # 전역 상태 관리
│ │
│ ├── 📁hooks/ # 커스텀 React 훅
│ │
│ ├── 📁types/ # 타입 폴더 (DTO 혹은 전역적으로 사용되는 type을 미리 정의)
│ │ # 컴포넌트 props의 경우에는 해당 컴포넌트 위치에 정의
│ │
│ ├── 📁styles/ # 스타일 관련 파일 모음
│ │ └── global.css
│ │
│ │
│ └── 📁utils/ # 유틸리티 폴더
│
├─ .gitignore
├─ .env.local # 각자 환경에서 별도 생성 필요
├─ .eslintrc.json
├─ .prettierrc.json
├─ next.confing.mjs
├─ tailwind.config.ts
├─ tsconfig.json
│
...생략
💻 개발 환경
OS | IDE | Version Control | Package Manager | deploy | Community |
---|---|---|---|---|---|
⚒ 기술 스택
👨🏫 주요 기능
랜딩 페이지 | 팀 페이지 | 할 일 페이지 |
자유 게시판 | 계정 설정 페이지 | 마이 히스토리 페이지 |
git clone https://github.com/Codeit-FE08-Part3-Team6/wine.git cd wine](https://github.com/team-collabor/coworkers.git
프로젝트에서 사용하는 패키지들을 설치합니다.
npm install
다음 명령어를 실행하여 로컬 개발 환경에서 프로젝트를 실행할 수 있습니다.
npm run dev
이후 브라우저에서 http://localhost:3000 으로 접속하여 개발 중인 웹 애플리케이션을 확인할 수 있습니다.
프로덕션 환경에서 사용하기 위해 빌드할 때는 아래 명령어를 사용합니다.
npm run build
그 후, 아래 명령어로 빌드된 파일을 실제로 실행합니다.
npm start
이 프로젝트는 netlify을 사용하여 배포할 수 있습니다.
GitHub와 연동된 netlify 계정을 통해 자동으로 배포되며, 코드를 push하면 자동으로 배포 프로세스가 진행됩니다.