🍽️ SWAL - 맛집 소모임 WIKI APP

맛집 & 밥약 관리 웹서비스, "SWAL"

맛집을 공유하고 같이 먹을 사람을 구하는 웹서비스, SWAL입니다.

SWAL은 맛집을 등록, 공유하고 정보를 나누며 위치기반으로 밥약속을 잡을 수 있는 기능을 제공합니다.

🔗 SWAL 배포 링크

회원가입을 먼저 진행해 주세요 !

🎬 SWAL 구현 영상

✨ SWAL의 주요 기능

✅ 회원 관리 : 로그인, 로그아웃, 회원가입을 할 수 있습니다.

✅ 맛집 공유 : 맛집을 공유할 수 있습니다. 맛집 이름, 주소, 카테고리를 분류해서 저장할 수 있습니다.

✅ 밥약 관리 : 밥약을 만들거나 참여할 수 있습니다. 최대 9명으로 구성된 밥약속을 만들거나 참여해보세요. 지도에서 맛집을 찾아 합류할 수 있습니다.

💡 SWAL의 비지니스 / 프로덕트 문제

✅ SWAL의 비전 : 맛집에서 밥은 다같이 맛있게 먹어야 한다.

✅ SWAL의 비지니스 요구사항

1. 맛집 공유의 편리함
2. 밥약을 빠르게 잡을 수 있는 신속함

✅ SWAL의 타겟

1. 맛집 정보를 나누고 싶은 공유 Lover
2. 밥약을 잡아서 같이 밥을 먹고 싶은 혼밥 Hater

✅ SWAL의 프로덕트 구현

1. 맛집 정보를 나누고 싶은 공유 Lover

• 카테고리에 맞는 맛집 공유
• 모든 정보를 기입하지 않고 지도 검색으로 간단하게 맛집을 추가할 수 있는 기능

2. 밥약을 잡아서 같이 밥을 먹고 싶은 혼밥 Hater

• 30분 이내에서 유효한 밥약을 참여할 수 있는 기능
• 모든 정보를 기입하지 않고 지도 검색으로 간단하게 밥약을 추가할 수 있는 기능

📌 SWAL의 사용 방법

SWAL를 사용하기 위해서는 먼저 회원 가입을 해야 합니다.
회원가입 후 맛집을 공유하거나 밥약속을 만들고 참여하세요!!

1. 좌측 상단의 로그인 버튼을 누르세요.

2. 기존 회원이시면 로그인을, 첫 방문이시라면 회원가입 버튼을 누르세요. (2-1)

• 회원가입은 이메일과 비밀번호가 필요합니다!

3. Wiki 페이지의 공지사항과 소개 글을 읽어 주세요.

• 공지사항 페이지

• 소개 페이지 각 페이지는 로그인 후 저희 카페의 회원이 되면 수정이 가능합니다 !

4. 같이 먹을 사람 구해요 페이지에서 같이 밥 먹을 사람을 찾아요👭

밥약을 생성하거나, 참여할 수 있습니다! 제목, 내용, 위치, 구할 시간, 인원을 설정해서 밥약을 만들어 보세요!

5. Gallery 페이지에서 맛집 정보를 공유하세요 !

다른 회원들이 공유한 맛집들을 카테고리별로 정리해서 볼 수 있습니다! 나만의 맛집을 지도에서 찾아 등록할 수 있어요 !

맛있게 나온 사진을 첨부해서 맛집을 공유해봐요 😉

👤 SWAL의 유저 플로우

🛠️ SWAL의 기술 스택

Enviroment & Config

Development & FrontEnd

DB

Deploy

Communication

📂 SWAL의 디렉토리 구조

📦IKUZO-WIKI/
┣ 📂src
┃ ┣ 📂assets
┃ ┣ 📂components
┃ ┃ ┣ 📂chooseid
┃ ┃ ┃ ┣ 📜ChooseEmailButton.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂common
┃ ┃ ┃ ┣ 📂Footer
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┃ ┗ 📜LoginBtn.tsx
┃ ┃ ┃ ┣ 📂Layout
┃ ┃ ┃ ┃ ┣ 📜GalleryLayout.tsx
┃ ┃ ┃ ┃ ┗ 📜WikiLayout.tsx
┃ ┃ ┃ ┣ 📂SidebarGallery
┃ ┃ ┃ ┃ ┣ 📜AddModal.tsx
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┗ 📂SidebarWiki
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂gallery
┃ ┃ ┃ ┣ 📂GalleryButton
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┣ 📂GalleryItem
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┣ 📂Modal
┃ ┃ ┃ ┃ ┣ 📜DeleteModal.tsx
┃ ┃ ┃ ┃ ┗ 📜UpdateModal.tsx
┃ ┃ ┃ ┣ 📂Pagination
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂home
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂login
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂map
┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┗ 📜Map.styled.tsx
┃ ┃ ┣ 📂register
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┣ 📂skeleton
┃ ┃ ┃ ┣ 📜Skeleton.tsx
┃ ┃ ┃ ┣ 📜SkeletonGallery.tsx
┃ ┃ ┃ ┗ 📜SkeletonMarkdown.tsx
┃ ┃ ┗ 📂wiki
┃ ┃ ┃ ┣ 📂Intro
┃ ┃ ┃ ┃ ┗ 📜Intro.tsx
┃ ┃ ┃ ┣ 📂Layout
┃ ┃ ┃ ┃ ┗ 📜WikiLayout.styled.tsx
┃ ┃ ┃ ┣ 📂Markdown
┃ ┃ ┃ ┃ ┣ 📜MarkdownEditor.tsx
┃ ┃ ┃ ┃ ┗ 📜MarkdownViewer.tsx
┃ ┃ ┃ ┣ 📂Notice
┃ ┃ ┃ ┃ ┗ 📜Notice.tsx
┃ ┃ ┃ ┣ 📂With
┃ ┃ ┃ ┃ ┣ 📂Modal
┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┃ ┣ 📂WithButton
┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┃ ┣ 📂WIthItem
┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┃ ┣ 📂WithTime
┃ ┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┃ ┗ 📜index.tsx
┃ ┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂hooks
┃ ┃ ┣ 📜getAuth.ts
┃ ┃ ┣ 📜getGalleryData.ts
┃ ┃ ┣ 📜getLoginAuth.ts
┃ ┃ ┗ 📜getStorageAuthData.ts
┃ ┣ 📂pages
┃ ┃ ┣ 📜Chinese.tsx
┃ ┃ ┣ 📜ChooseId.tsx
┃ ┃ ┣ 📜Home.tsx
┃ ┃ ┣ 📜Intro.tsx
┃ ┃ ┣ 📜Japanese.tsx
┃ ┃ ┣ 📜Korean.tsx
┃ ┃ ┣ 📜Login.tsx
┃ ┃ ┣ 📜Notice.tsx
┃ ┃ ┣ 📜Register.tsx
┃ ┃ ┣ 📜Western.tsx
┃ ┃ ┗ 📜With.tsx
┃ ┣ 📂recoil
┃ ┃ ┣ 📜authRecoil.ts
┃ ┃ ┗ 📜countRecoil.ts
┃ ┣ 📂utils
┃ ┃ ┣ 📜firebase.config.tsx
┃ ┃ ┣ 📜NonProtectedRoute.tsx
┃ ┃ ┣ 📜ProtectedRoute.tsx
┃ ┃ ┗ 📜util.tsx
┃ ┣ 📜App.tsx
┃ ┣ 📜index.css
┃ ┣ 📜index.tsx
┃ ┣ 📜logo.svg
┃ ┣ 📜react-app-env.d.ts
┃ ┣ 📜reportWebVitals.ts
┃ ┗ 📜setupTests.ts
┣ 📂public
┣ 📂node_modules
┣ 📜package.json
┣ 📜tsconfig.json
┣ 📜README.md
┗ ...

🪹 SWAL의 브랜치 전략

• main: 서비스 배포용도의 브랜치
• dev: 배포 전, 모든 feature 브랜치 병합 및 테스트용도의 브랜치
• feature/#issueNumber: github issue 넘버로 기능 구현

👩‍💻 Contributor 👨‍💻

김민섭 (FE)	이승현 (FE)	김다빈 (FE)	한은지 (FE)	소유나 (FE)