📑 목차

프로젝트 소개

개발 기간

상세 계획

User Flow

프로젝트 구조

개발 환경

기술 스택

주요 기능

배포 및 실행 방법

🧑‍💻 프로젝트 소개

LOOKY는 옷에 관심 있는 사람들이 모여 자신의 룩과 관련된 옷 정보들을 태그로 자세히 공유할 수 있는 웹 애플리케이션입니다.

🔗 링크

GitHub

🌐 배포 사이트

👨‍🏫 주요 기능

랜딩 페이지	게시물 목록 페이지	게시물 생성 모달

랭킹 페이지	마이 페이지	회원가입 페이지

🗓️ 개발 기간

12 / 23 (목) ~ 1 / 26 (일)

📃 상세 계획과 일정

📌 상세 계획

💡 User Flow

📁 프로젝트 구조

📁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하면 자동으로 배포 프로세스가 진행됩니다.

배포 사이트