🧑💻 프로젝트 소개
LOOKY는 옷에 관심 있는 사람들이 모여 자신의 룩과 관련된 옷 정보들을 태그로 자세히 공유할 수 있는 웹 애플리케이션입니다.
👨🏫 주요 기능
 |
 |
 |
|---|---|---|
| 랜딩 페이지 | 게시물 목록 페이지 | 게시물 생성 모달 |
 |
 |
 |
|---|---|---|
| 랭킹 페이지 | 마이 페이지 | 회원가입 페이지 |
🗓️ 개발 기간
12 / 23 (목) ~ 1 / 26 (일)
📁 프로젝트 구조
📁wine/
│
├── 📁public/
│ ├── 📁images/ # 이미지 파일 폴더
│ └── 📁ic_wine.svg ...
│
├── 📁constants/
│ └── 📁auth/
│ └── mediaQueryBreakPoint.ts
│
├── 📁src/
│ └── 📁components/ # 재사용 가능한 컴포넌트
│ └── 📁common/ # 공통 컴포넌트
│ └── Button.tsx
│ └── Toast.tsx
│
├── 📁pages/
│ │ └── login.tsx
│ │ └── signup.tsx
│ │ └── listPage.tsx
│ │
│ │
│ │
│ ├── 📁hooks/ # 커스텀 React 훅
│ │
│ ├── 📁types/ # 타입 폴더 (DTO 혹은 전역적으로 사용되는 type 미리 정의)
│ │ # 컴포넌트 props의 경우에는 해당 컴포넌트 위치에 정의
│ │
│ ├── 📁style/ # 스타일 관련 파일 모음
│ │ └── global.css
│ │
│ │
│ └── 📁util/ # 유틸리티 폴더
│
├─ .gitignore
├─ .env.local
├─ .eslintrc.json
├─ .prettierrc.json
├─ tsconfig.json
│
...생략
💻 개발 환경
| OS | IDE | Version Control | Package Manager | deploy |
|---|---|---|---|---|
  |
 |
  |
 |
 |
⚒ 기술 스택
1. 프로젝트 클론
git clone https://github.com/Injaeeee/looky.git
2. 의존성 설치
프로젝트에서 사용하는 패키지들을 설치합니다.
npm install
3. 개발 서버 실행
다음 명령어를 실행하여 로컬 개발 환경에서 프로젝트를 실행할 수 있습니다.
npm run start
이후 브라우저에서 http://localhost:3000 으로 접속하여 개발 중인 웹 애플리케이션을 확인할 수 있습니다.
4. 배포
이 프로젝트는 Vercel을 사용하여 배포할 수 있습니다.
GitHub와 연동된 Vercel 계정을 통해 자동으로 배포되며, 코드를 push하면 자동으로 배포 프로세스가 진행됩니다.