그랜파 개발자의 풀스택 공부

시지 라이프 - 홈페이지시지 라이프 홈페이지는 상호검색, 매장 카테고리, 먹자 골목 이 세가지 컴포넌트로 구성이 되어 있습니다.상호 검색은 검색어를 포함하고 있는 상호를 가진 매장을 찾는 기능이고매장 카테고리는 해당 카테고리의 매장 목록을 보여주는 기능이고먹자 골목은 해당 먹자 골목에 속해 있는 매장의 목록을 보여주는 기능입니다.상호검색 - NoSQL의 검색어로 검색NoSQL은 SQL의 문자열 패턴 매칭(예: LIKE '%키워드%') 과 같은 기능을 제공하지 않습니다.그렇다면 상호 검색을 어떻게 구현해야 할까요?이것에 대한 해결 과정입니다. 상호를 입력하고 검색 버튼을 누르면 상호에 검색어를 포함하고 있는 매장의 리스트를 보여줍니다.검색 결과 리스트에서 매장을 선택하면 각 매장의 랜딩 페이지로 이동하고메..

시지 라이프 - 등록 메뉴 순서 변경메뉴판의 메뉴 순서를 자주 변경하는 건 단순히 디자인을 바꾸는 걸 넘어,고객의 선택과 매장 운영에 영향을 줄 수 있는 전략이에요. 특히 다음과 같은 이점이 있습니다: 🛍️ 마케팅 관점의 장점시선 집중 효과: 인기 메뉴나 신메뉴를 가장 먼저 보이게 배치하면 자연스럽게 고객의 선택을 유도할 수 있어요.심리적 가격 전략: 고가 메뉴를 상단에 배치하면 중간 가격대 메뉴가 더 합리적으로 보이는 효과가 있어요 (가격 앵커링).시즌 메뉴 홍보: 계절 한정 메뉴나 프로모션 메뉴를 메뉴판 첫 줄에 넣으면 노출률과 주문률이 증가합니다.🧠 고객 경험 향상의 장점지루함 감소: 자주 바뀌는 구성은 고객에게 신선한 느낌을 주며 “이번엔 뭐가 눈에 띌까?” 하는 기대감을 높일 수 있어요.선택..

시지 라이프 - 온라인 주문 메뉴 관리 메뉴의 구조를 생각해 봅시다. 특정한 음식 또는 음료에 대한 메뉴가 아니라많은 종류의 배달 또는 포장 음식, 또는 음료에 대한 것입니다. 그랜파 개발자는 평생 SW 개발만 한 사람으로메뉴에 대한 생각은 다만 온라인 주문 기능 개발 관점에서 정리한 것이므로현실과는 차이가 있을 수 있습니다.현실에서 온라인 주문 메뉴에 대해서는실무 매장 매니저와의 충분한 협의가 필요합니다. 같은 메뉴 이름에 여러 규격이 있습니다.1인분, 2인분, 대, 중, 소, 레귤러, 라지 등등규격에 따라 가격도 다릅니다. 여러가지 옵션 그룹이 있습니다.맛 그룹으로 매운맛, 순한맛, 보통맛온도 그룹으로 핫, 아이스샷추가, 사리 추가, 토핑 추가 등 주 메뉴에 추가되는 옵션들필수적으로 선택해야 하는 옵..

시지 라이프 - 메뉴 카테고리 관리메뉴의 구조를 생각해 봅시다. 특정한 음식 또는 음료에 대한 메뉴가 아니라많은 종류의 배달 또는 포장 음식, 또는 음료에 대한 것입니다. 그랜파 개발자는 평생 SW 개발만 한 사람으로메뉴에 대한 생각은 다만 온라인 주문 기능 개발 관점에서 정리한 것이므로현실과는 차이가 있을 수 있습니다.현실에서 온라인 주문 메뉴에 대해서는실무 매장 매니저와의 충분한 협의가 필요합니다. 메뉴에는 다양한 카테고리가 있습니다.카테고리를 별도 등록하고카테고리에 정렬 순서가 있어메뉴를 나타낼 때 먼저 나타나는 카테고리 순서를 조정할 수 있습니다. 드래그 앤 드롭 기능 구현카테고리 정렬 순서는 드래그 앤 드롭으로 변경할 수 있습니다. 😊 @dnd-kit/core와 @dnd-kit/sortabl..

시지 라이프 매장 등록 - 매장 휴무일 설정 휴무일 등록은 참 어렵습니다.1주일에 한번, 2주일에 한번, 한달에 한번, 한달에 두번 등 다양한 휴무일이 있습니다.이들을 모두 처리하는 것이 쉽지가 않습니다. 영업시간과 휴무일은 별도로 설정이 되지만휴무일의 영업 시간은 표기하지 말아야 합니다.서로 연관이 있다는 뜻입니다. https://next-tailwind-firebase-order-app.vercel.app/ 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티 - 테스트 배포 중입니다. 로딩 중...next-tailwind-firebase-order-app.vercel.app StoreRegisterPage - 매장 등록 컴포넌트'use client';import { useState, u..

시지 라이프 매장 등록 - 매장 영업시간 설정영업시간은 요일에 따라 다를 수 있습니다. 그래서 각 요일별 영업시간을 설정하도록 하였습니다. 각 요일마다 영업 시간이 모두 다른 것이 아닙니다. 복사 기능은 해당 요일의 입력값을 모든 요일에 복사하는 편의 기능입니다. https://next-tailwind-firebase-order-app.vercel.app/ 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티 - 테스트 배포 중입니다. 로딩 중...next-tailwind-firebase-order-app.vercel.app StoreRegisterPage - 매장 등록 컴포넌트'use client';import { useState, useEffect } from 'react';import { ..

시지라이프 매장 등록 - 네이버 지도를 통해 위치 입력주소만 가지고 매장의 위치를 찾을 때위치가 정확하지 않는 경우가 많습니다.그래서 보다 정확한 매장의 위치 정보를 위하여 위도와 경도를 사용하여지도 위에서 위치를 보여줍니다. https://next-tailwind-firebase-order-app.vercel.app/ 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티 - 테스트 배포 중입니다. 로딩 중...next-tailwind-firebase-order-app.vercel.app 1. 매장 위치 입력위도(latitude), 경도(longitude) 입력은 사용자가 지도를 통해 선택하는 방식으로 처리됩니다. ✅ 위도 / 경도 입력 시퀀스🔁 요약 흐름:사용자가 "위도 또는 경도 필드 클릭"..

시지라이프 매장 등록 - 카카오 주소 API로 주소 입력카카오 주소 검색 API는? 웹사이트나 앱에서 도로명 주소, 지번 주소, 우편번호 등을쉽게 검색하고 입력할 수 있도록 도와주는 서비스예요.특히 회원가입, 배송지 입력, 쇼핑몰 등에서 많이 활용됩니다. 🏠 📦 주요 기능주소 검색 팝업 제공: 사용자가 주소를 검색하고 선택할 수 있는 UI 팝업도로명/지번 주소 지원: 다양한 주소 형식 지원우편번호 자동 입력: 선택한 주소에 맞는 우편번호 자동 제공좌표 변환 가능: 주소 → 위도/경도 변환 (Geocoder API 활용)https://next-tailwind-firebase-order-app.vercel.app/ 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티 - 테스트 배포 중입니다. 로..

4. 지역 커뮤니티 시지라이프 Nextjs + Firebase로 웹앱 개발 - 네이버 로그인1. 네이버 로그인네이버 로그인을 구현할 때의 전체 개발 시퀀스는 아래와 같은 단계로 진행됩니다.프론트엔드(웹 또는 앱)와 백엔드(Firebase Functions)를 연동하는 구조입니다. https://next-tailwind-firebase-order-app.vercel.app 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티 - 개발 중입니다. 테스트 배포 중으로 실제 매장과는 연동되지 않습니다.next-tailwind-firebase-order-app.vercel.app ✅ 네이버 로그인 개발 시퀀스 (Redirect 방식 기준)1. 네이버 개발자 센터 애플리케이션 등록https://develop..

3. 지역 커뮤니티 시지라이프 Nextjs + Firebase로 웹앱 개발 - 카카오 로그인SNS 로그인은 사용자가 네이버, 카카오, 구글, 페이스북 같은 소셜 계정을 이용해 웹사이트나 앱에 간편하게 로그인할 수 있도록 해주는 기능이에요. 복잡한 회원가입 없이 클릭 몇 번으로 로그인할 수 있어서 사용자 경험을 크게 향상시켜주죠. ‘order app’은 SNS 로그인으로 카카오 로그인과 네이버 로그인을 연동합니다. https://next-tailwind-firebase-order-app.vercel.app 지역 커뮤니티 - 시지 라이프시지 라이프 시지 지역 커뮤니티 - 개발 중입니다. 테스트 배포 중으로 실제 매장과는 연동되지 않습니다.next-tailwind-firebase-order-app.verce..