|
1 | | - |
2 | | - |
3 | | - |
4 | | - |
5 | | - |
6 | | - |
7 | | - |
8 | | - |
9 | | - |
10 | | - |
11 | | - |
12 | | - |
13 | | - |
14 | | - |
15 | | - |
16 | | - |
17 | | - |
18 | | - |
19 | | - |
20 | | - |
21 | | - |
22 | | - |
23 | | - |
24 | | - |
25 | | - |
26 | | - |
27 | | - |
28 | | - |
| 1 | +# Kiring: 회사 생활의 연결고리 |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +오늘 점심에는 무엇을 먹을지, 일정을 한 눈에 확인할 수 없을지, 퇴근은 또 어떻게 할지.. 회사원이라면 한번 쯤 해본 고민들입니다. |
| 6 | + |
| 7 | +키링은 **회사 근처 식당 리스트, 교통 정보, 캘린터, 커뮤니티 기능 등 회사 생활에 필요한 정보를 통합하여 한 곳에서 제공**하는 것을 목표로 했습니다. |
| 8 | + |
| 9 | +회사 생활을 더욱 편리하게 만들어주는 올인원 플랫폼 키링에서, 유용한 정보를 쉽고 빠르게 확인해보세요! |
| 10 | + |
| 11 | +<br /> |
| 12 | + |
| 13 | +## 1️⃣ 프론트엔드 기술 스택 |
| 14 | + |
| 15 | + |
| 16 | + |
| 17 | +| **스택** | **버전** | **선정 이유 및 효과** | |
| 18 | +| ------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 19 | +| **Next.js** | 15.3.1 | · 서버 사이드 렌더링과 정적 사이트 생성을 모두 지원해 성능이 뛰어나며, App Routes를 통해 보안이 필요한 API Key도 안전하게 서버 측에서 처리할 수 있었습니다. <br /> · 자동 최적화와 빠른 개발 사이클, Vercel과의 원활한 통합으로 대규모 서비스에 적합한 확장성과 유지보수성을 제공합니다. | |
| 20 | +| **Tailwind CSS** | 4.0.0 | · 낮은 러닝커브로 빠른 UI 개발이 가능하고, 디자인 토큰과 연동해 스타일을 중앙에서 관리리하고 디자인 시스템의 일관성을 쉽게 유지할 수 있었습니다. | |
| 21 | +| **TypeScript** | 5.0.0 | · 명확한 타입 정의로 런타임 오류를 줄이고, 복잡한 상태 관리와 API 연동 시 안정성을 높여 유지보수가 용이합니다. | |
| 22 | +| **Zustand** | 5.0.5 | · npm 트렌드가 높고 꾸준히 업데이트가 되고 있으며, 러닝커브가 낮은 장점이 있습니다. <br /> · 최소한의 코드로 빠르게 상태 관리를 구현할 수 있으며, 경량 구조와 높은 성능, 모듈화된 스토어로 확장성까지 고려할 수 있었습니다. | |
| 23 | +| **Tanstack-Query** | 5.74.4 | · 서버 상태를 자동으로 동기화하고, 캐싱·백그라운드 갱신·에러 처리 등 복잡한 데이터 패칭 로직을 간결하게 관리할 수 있어 API 호출을 효율적으로 최적화할 수 있었습니다. | |
| 24 | + |
| 25 | +<br /> |
| 26 | + |
| 27 | +## 2️⃣ 주요 구현 전략 |
| 28 | + |
| 29 | +### 📱 배포 자동화 및 PWA 적용 |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | +#### **☑️ 자동 동기화 및 배포 흐름** |
| 34 | + |
| 35 | +- 별도의 수동 동기화 없이 GitHub Actions를 활용해 fork된 배포용 레포지토리를 원본과 자동으로 동기화하며, Vercel과 연동된 CI/CD 파이프라인을 통해 Preview 및 Production 배포가 원활하게 이루어집니다. |
| 36 | + |
| 37 | +#### **☑️ 배포용 레포지토리와 Vercel 연동** |
| 38 | + |
| 39 | +- develop 브랜치에 변경사항이 병합되면 Preview 환경(kiring-develop.vercel.app)에 배포되어 개발 시 실시간 검증이 가능합니다. |
| 40 | + |
| 41 | +- 이후 PR을 통해 main 브랜치에 병합되면 Production 환경(kiring.vercel.app)에 최종 배포를 자동으로 수행합니다. |
| 42 | + |
| 43 | +#### **☑️ PWA(Progressive Web App) 적용** |
| 44 | + |
| 45 | +- 모바일 환경에서도 네이티브 앱과 같은 직관적이고 빠른 사용자 경험을 제공하기 위해 PWA를 도입했습니다. |
| 46 | + |
| 47 | +- 이를 통해 사용자는 별도 앱 설치 없이도 홈 화면에 앱 아이콘 추가, 오프라인 접근 등 앱 수준의 편리한 기능을 활용할 수 있습니다. |
| 48 | + |
| 49 | +<br /> |
| 50 | + |
| 51 | +### 🎨 디자인 시스템 구현 및 자동화 |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | +- 디자인 시스템을 구축하고 Figma의 Style Dictionary로 관리한 디자인 토큰(JSON)을 Tailwind에 연동했습니다. |
| 56 | + |
| 57 | +- 디자인 시스템에서 정의한 스타일 값이 코드에 자동으로 반영되어, UI의 일관성을 쉽게 유지할 수 있고 디자인 변경 시에도 모든 화면에 신속하게 적용되어 개발과 유지보수의 효율성이 높아졌습니다. |
| 58 | + |
| 59 | +<br /> |
| 60 | + |
| 61 | +### 🧩 컴포넌트 기반 UI 구조화 |
| 62 | + |
| 63 | + |
| 64 | + |
| 65 | +- 반복적으로 사용되는 UI 요소를 컴포넌트로 분리하여, 코드의 중복을 줄이고 UI 구조를 명확하게 확립했습니다. |
| 66 | + |
| 67 | +- 또한 다양한 상황에서도 재사용할 수 있도록 props 기반으로 설계하여, 유연성과 확장성을 높였습니다. |
| 68 | + |
| 69 | +<br /> |
| 70 | + |
| 71 | +### ⚡ 인터랙티브 UI 구현 |
| 72 | + |
| 73 | + |
| 74 | + |
| 75 | +- 사용자가 서비스 이용 과정에서 더 많은 재미와 몰입감을 느낄 수 있도록, 다양한 인터랙티브 UI 요소를 도입했습니다. |
| 76 | + |
| 77 | +- 사용자와의 적극적인 상호작용을 유도하여 서비스 경험이 더욱 생동감 있고 즐거웠다는 긍정적인 피드백을 받을 수 있었습니다. |
| 78 | + |
| 79 | +<br /> |
| 80 | + |
| 81 | +## 3️⃣ 협업 과정 |
| 82 | + |
| 83 | +### 🗃️ Github을 이용한 개발 과정 문서화 |
| 84 | + |
| 85 | + |
| 86 | + |
| 87 | +<br /> |
| 88 | + |
| 89 | +### 🐰 코드 리뷰 AI 도입 |
| 90 | + |
| 91 | + |
| 92 | + |
| 93 | +<br /> |
| 94 | + |
| 95 | +### 📔 Notion을 이용한 로드맵 관리 |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | +<br /> |
| 100 | + |
| 101 | +## 4️⃣ 주요 기능 |
| 102 | + |
| 103 | +### 🔐 소셜 로그인 |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | +<br /> |
| 108 | + |
| 109 | +### 🏠 홈 |
| 110 | + |
| 111 | + |
| 112 | + |
| 113 | +<br /> |
| 114 | + |
| 115 | +### 🍴 플레이스 |
| 116 | + |
| 117 | + |
| 118 | + |
| 119 | +<br /> |
| 120 | + |
| 121 | +### 🚍 교통 |
| 122 | + |
| 123 | + |
| 124 | + |
| 125 | +<br /> |
| 126 | + |
| 127 | +### 📅 캘린더 |
| 128 | + |
| 129 | + |
| 130 | + |
| 131 | +<br /> |
| 132 | + |
| 133 | +### 💬 커뮤니티 |
| 134 | + |
| 135 | + |
| 136 | + |
| 137 | +<br /> |
| 138 | + |
| 139 | +### 💌 종이비행기 |
| 140 | + |
| 141 | + |
| 142 | + |
| 143 | +<br /> |
| 144 | + |
| 145 | +### 📄 마이페이지 |
| 146 | + |
| 147 | + |
| 148 | + |
| 149 | +<br /> |
| 150 | + |
| 151 | +## 5️⃣ 키링 개발팀 |
| 152 | + |
| 153 | +| 프론트엔드 | 프론트엔드 | 프론트엔드 | 백엔드 | |
| 154 | +| :--------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | |
| 155 | +| <img src="https://pub-cf3b9667253a490495a16433a99bd7ca.r2.dev/main-profile-img/%ED%94%84%EB%A1%A0%ED%8A%B8/%EC%96%91%EB%8B%A4%EC%9C%97.png" width="150" /> | <img src="https://pub-cf3b9667253a490495a16433a99bd7ca.r2.dev/main-profile-img/%ED%94%84%EB%A1%A0%ED%8A%B8/%EA%B9%80%ED%95%9C%EC%86%94.png" width="150" /> | <img src="https://pub-cf3b9667253a490495a16433a99bd7ca.r2.dev/main-profile-img/%ED%94%84%EB%A1%A0%ED%8A%B8/%EB%B0%B1%ED%98%9C%EC%9D%B8.png" width="150" /> | <img src="https://pub-cf3b9667253a490495a16433a99bd7ca.r2.dev/main-profile-img/%EB%B0%B1%EC%97%94%EB%93%9C/%EA%B9%80%ED%83%9C%EB%AF%BC.png" width="150" /> | |
| 156 | +| [양다윗](https://github.com/kitworks-kiring/kiring-frontend/pulls?q=is%3Apr+assignee%3Aydw1996+is%3Aclosed) | [김한솔](https://github.com/kitworks-kiring/kiring-frontend/pulls?q=is%3Apr+is%3Aclosed+assignee%3Ahansololiviakim) | [백혜인](https://github.com/kitworks-kiring/kiring-frontend/pulls?q=is%3Apr+is%3Aclosed+assignee%3Ahyein0112) | [김태민](https://github.com/kitworks-kiring/kiring-backend) | |
0 commit comments