Skip to content

Injaeeee/coworkers

 
 

Repository files navigation

header

코드잇에서 주관하는 프로젝트입니다.

📑 목차

프로젝트 소개

개발 기간

개발자 소개

상세 계획

User Flow

프로젝트 구조

개발 환경

기술 스택

주요 기능

배포 및 실행 방법

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
macOS Windows Visual Studio Code IntelliJ IDEA Git GitHub npm Vercel DiscordNotion

React Next.js TypeScript Tailwind CSS Axios

👨‍🏫 주요 기능

image image image
랜딩 페이지 팀 페이지 할 일 페이지
image image image
자유 게시판 계정 설정 페이지 마이 히스토리 페이지

1. 프로젝트 클론

git clone https://github.com/Codeit-FE08-Part3-Team6/wine.git cd wine](https://github.com/team-collabor/coworkers.git

2. 의존성 설치

프로젝트에서 사용하는 패키지들을 설치합니다.

npm install

3. 개발 서버 실행

다음 명령어를 실행하여 로컬 개발 환경에서 프로젝트를 실행할 수 있습니다.

npm run dev

이후 브라우저에서 http://localhost:3000 으로 접속하여 개발 중인 웹 애플리케이션을 확인할 수 있습니다.

4. 빌드 및 배포

프로덕션 환경에서 사용하기 위해 빌드할 때는 아래 명령어를 사용합니다.

npm run build

그 후, 아래 명령어로 빌드된 파일을 실제로 실행합니다.

npm start

5. 배포

이 프로젝트는 netlify을 사용하여 배포할 수 있습니다.

GitHub와 연동된 netlify 계정을 통해 자동으로 배포되며, 코드를 push하면 자동으로 배포 프로세스가 진행됩니다.

배포 사이트

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.1%
  • Other 0.9%