Insnugram Frontend

📌 프로젝트 소개

Insnugram은 WaffleStudio의 22-5기 9팀의 인스타그램 서버 클론 코딩 프로젝트입니다. 인스타그램이 소셜 네트워크 서비스로서 가지고 있는 역할을 고려하며 재현했습니다. 인스트그램과 같이 주요 기능으로 포스트와 팔로우가 있으며, 추가로 스토리, 탐색, 검색까지 구현했습니다!

인스누그램만의 유니크한 추가 기능으로 유저 위치 태그를 개발했습니다. 두 추가 기능은 인스타그램의 Socialize 목적에 맞춰 고안하였습니다.

• 위치 태그는 스누 캠퍼스에 있는 유저들이 위치를 지정하여 근처에 있는 친구들을 볼 수 있는 기능입니다.

🚀 기술 스택

프론트엔드 프레임워크

인증

커뮤니케이션

📂 프로젝트 구조

📦 22-5-team9-web
├── 📂 src                   # 주요 애플리케이션 코드
│   ├── 📂 api               # API 통신
│   │   ├── 📂 components    # 컴포넌트
│   │   │   ├── 📂 auth      # 구글 로그인
│   │   │   ├── 📂 dm        # DM 구조
│   │   │   ├── 📂 feed      # 피드
│   │   │   ├── 📂 layout    # 환경별 사이드바
│   │   │   ├── 📂 modals    # 모달
│   │   │   ├── 📂 post      # 포스트
│   │   │   ├── 📂 profile   # 프로필 페이지
│   │   │   ├── 📂 shared    # code snippet
│   │   │   ├── 📂 story     # 스토리
│   │   ├── 📂 comment       # 댓글
│   │   ├── 📂 hooks         # Hooks
│   │   ├── 📂 pages         # 페이지
│   │   ├── 📂 types         # 자주 쓰이는 인터페이스
│   │   ├── 📂 utils         # 토큰 갱신
│   │   ├── 📂 medium        # 미디어
│   │   ├── 📂 post          # 게시물
│   │   ├── 📂 story         # 스토리
│   │   └── 📂 user          # 유저
│   ├── App.tsx
├── 📜 yarn.lock             # 패키지 관리

🧑🏻‍💻🧑🏻‍💻 개발진

구현 기능

• post
• comment
• like
• search
• follow
• heart
• 추가(friend map)

구현 기능

• auth
• profile
• story
• 리포 구조

🔗 배포 링크