1. 🗼 프로젝트 기획서

---

🍦 프로젝트 개요

• 프로젝트명 : 배스킨라빈스
• 진행 기간: 2025.05.15 ~ 2025.05.19

---

📌 팀원 구성

박준범	이주희	이지용	박창준	조석근
GitHub	GitHub	GitHub	GitHub	GitHub

---

🍦 클론할 사이트 선정 이유

• 직관적인 UI 구성과 명확한 레이아웃 구조로 컴포넌트 설계 연습에 최적화
• 탭, 카드, 드롭다운, 애니메이션 등 다양한 UI 요소가 포함되어 있어 프론트엔드 기능 구현 학습에 적합
• 반응형 설계와 컴포넌트 재사용 패턴 등 실무 중심의 프론트엔드 아키텍처를 분석하고 적용하기에 용이

---

🍦 원본 사이트

• 사이트 : 배스킨라빈스

• 주소 : https://www.baskinrobbins.co.kr/

• 스크린샷 :

  공통 부분 : Header Footer

  

  ****

  1. 메인화면 Main

  

  2. 메뉴 Menu

  

  3. 메뉴 BR Play

  

  4. BR Story

  

  5. Delivery/Store

  

---

🍦 클론할 페이지

• Header - 박준범 / Footer - 조석근
• Main - 이주희
• Menu - 박준범
• BRPlay - 박창준
• BRStory - 조석근
• Delivery/Store - 이지용

---

🍦 프로젝트 목표

• 서비스 개발에 적합한 컴포넌트 기반 구조를 이해하고 실제 개발에 적용
• 상용 사이트의 UI/UX를 분석하고 이를 바탕으로 CSS 설계 및 화면 구성 역량 향상
• 유지보수가 용이한 컴포넌트 분리와 상태 흐름 제어 방식 체득
• Git을 활용한 협업 흐름과 VSCode, React 등 주요 프론트엔드 개발 툴에 대한 실전 경험 축적

---

🍦 일정 계획

날짜	내용
05.14	프로젝트 주제 확정 및 팀원 간 역할 분담 완료
05.15	GitHub 레포지토리 생성 및 초기 세팅 / 공통UI 영역Header, Footer 기능 구현
05.17~19	각 팀원이 담당한 페이지별 컴포넌트 및 기능 구현 진행
05.19	전체 결과물 병합(Merge) 및 최종 발표 자료 정리

---

2. 🎢요구사항 정의서

🍨 2.1 필수 구현 기능

• 메인 페이지
  • 배너 슬라이드 구현
  • Main(Header& Footer) 에서의 페이지 전환 구현→ Menu, BR Play, BR Story, Delievery/Store, Login
• 공통
  • 공통 Header, Footer 제작

🍨 2-2. 비기능 요구사항

• 사용자 편의성: 직관적인 화면 구성
• 성능: 빠른 화면 전환 및 응답 속도

🍨 2-3. 공통 레이아웃 및 내비게이션

요구사항 ID	요구사항명	상세 설명
LAY-01	Header 및 Footer 구현	로고, 주요 메뉴, 검색창, 로그인/회원가입 버튼 포함
LAY-02	반응형 디자인 적용	PC 환경에 최적화된 레이아웃 제공
LAY-03	내비게이션 메뉴 구현	메인 메뉴 및 드롭다운 서브메뉴 기능 포함

🍨 2-4. Main 페이지

요구사항 ID	요구사항명	상세 설명
MAIN-01	메인 배너 슬라이드	자동 및 수동 전환 가능한 이미지 팝업 구현, 메인 페이지 상단에 위치하는 주요 배너 영역으로 브랜드 메시지나 주요 프로모션 내용 표시. 반응형 디자인 적용으로 다양한 화면 크기 지원하며 이미지 표시 . 버튼 클릭 시 서로 다른 애니메이션 효과 적용
MAIN-02	프로모션 영역 구성	이벤트 및 프로모션 정보를 카드 형태로 표시. 드래그로도 슬라이드 이동 가능. 현재 진행 중인 프로모션 정보, 할인 혜택, 이벤트 등 마케팅 콘텐츠 노출. 클릭 시 상세 페이지로 이동 기능 및 여러 프로모션 슬라이드 형태로 표시
MAIN-03	신제품 소개 섹션	최근 출시된 제품들을 이미지와 함께 소개. 최신 출시 상품 목록을 그리드 레이아웃으로 배치하며 상품 이미지, 제품명, 가격 정보 포함. 슬라이더로 구현해서 슬라이드 이동 가능.
MAIN-04	BR Play 섹션	BR 브랜드의 플레이 콘텐츠 소개 영역을 정적 이미지로 표시. "MY FLAVOR LIST"와 "배라광장" 두 개의 원형 카드 형태로 배치하여 베스킨라빈스의 다양한 이벤트를 시각적으로 소개. 별도의 링크 연결이나 애니메이션 없이 순수 정보 전달 목적의 정적 UI 구현
MAIN-05	Be Better 섹션	베스킨라빈스의 사회적 가치 캠페인을 소개하는 영역 구현. "핑크팝", "핑크드림", "핑크링크" 3가지 캠페인을 카드 형태로 배치하여 지역 농가 상생, 청소년 자립 지원, 중소 기업 콜라보 프로젝트 등을 소개. 마우스 호버 시 카드가 위로 상승하는 애니메이션 효과 적용
MAIN-06	BR Benefit 섹션	베스킨라빈스의 다양한 혜택을 소개하는 영역을 정적 카드 형태로 구현. T membership, Samsung Card, 통신사별 할인 혜택(SK, KT, LG U+) 총 5개의 혜택 카드를 가로로 나열하여 표시. 원래 슬라이더 기능으로 구현 예정이었으나 페이지 내 슬라이더 중복으로 인해 정적 표시로 변경. 마우스 호버 시 카드가 위로 상승하는 애니메이션 효과 적용
MAIN-07	Store&BR Way 섹션	좌우 분할 레이아웃으로 Store와 BR Way 두 영역 구현. 좌측 Store 영역은 매장 찾기 기능을 시각적으로 표현하는 3D 건물과 위치 핀 이미지, 우측 BR Way 영역은 베스킨라빈스의 브랜드 히스토리를 나타내는 로고 및 사진 콜라주 배치. 정적 UI로 구현하여 별도의 링크 연결 없이 브랜드 정보 전달에 집중

🍨 2-5. Menu 페이지

요구사항 ID	요구사항명	상세 설명
MENU-01	제품 리스트 표시	아이스크림 제품을 썸네일 이미지, 이름, 해시태그와 함께 그리드로 보여줌
MENU-02	제품 상세 페이지 연결	각 제품 클릭 시 상세 페이지로 이동, 설명·영양정보·추천 제품 제공
MENU-03	검색 및 필터 기능	제품명, 해시태그 검색 및 맛/재료 등 카테고리별 필터 제공
MENU-04	반응형 디자인 지원	다양한 해상도에 맞춰 자동 레이아웃 조정 (PC/모바일 최적화)

🍨 2-6. BR Play 페이지

요구사항 ID	요구사항명	상세 설명
PLAY-01	이벤트 목록 표시	진행 중인 이벤트들을 리스트 형태로 시각화하며, 각 항목은 썸네일 이미지, 이벤트 제목, 진행 기간, D-Day 등의 정보를 포함
PLAY-02	이벤트 상세 페이지 연결	사용자가 특정 이벤트 항목을 클릭할 경우, 해당 이벤트의 상세 내용을 제공하는 개별 페이지로 이동하도록 구성
PLAY-03	카테고리 필터링 기능	'전체, 프로모션, 제휴혜택 등의 카테고리를 기준으로 이벤트 목록을 분류하여 표시할 수 있도록 탭 형태의 필터 구현
PLAY-04	반응형 디자인 지원	다양한 디바이스 환경에서도 콘텐츠가 자연스럽게 배치될 수 있도록 반응형 레이아웃 적용

🍨 2-7. BR Story 페이지

요구사항 ID	요구사항명	상세 설명
STORY-01	연대기별 브랜드 히스토리 표시	브랜드의 주요 연혁을 연도별로 정리하여, 각 연도에 해당하는 이벤트와 이미지를 함께 제공
STORY-02	로고 스토리 섹션 구현	브랜드 로고에 숨겨진 의미와 변천사를 설명하는 섹션을 구성하여, 시각적 요소와 함께 브랜드 아이덴티티를 강조
STORY-03	주요 제품 출시 이력 소개	대표적인 제품들의 출시 연도와 배경을 소개하여, 브랜드의 제품 개발 역사를 사용자에게 전달
STORY-04	반응형 디자인 지원	다양한 디바이스 환경에서도 콘텐츠가 자연스럽게 배치될 수 있도록 반응형 레이아웃 적용

🍨 2-8. Delivery/Store 페이지

요구사항 ID	요구사항명	상세 설명
STORE-01	매장 검색 기능	사용자가 도/시 및 구/군을 선택하여 해당 지역의 매장을 검색할 수 있도록 구성
STORE-02	매장 정보 표시	검색된 매장의 주소, 전화번호, 운영시간, 제공 서비스 등을 리스트 형태로 제공
STORE-03	매장 상세 인포윈도우 표시	특정 매장을 선택하면 해당 매장의 상세 정보를 확인할 수 있는 인포윈도우 표시
MAP-01	지도 연동 기능	검색된 매장 위치를 지도에 마커로 표시하여 시각적으로 확인할 수 있도록 구현
STORE-04	100 Flaver 화면 구현	100 Flavor 매장 소개 화면 구현
STORE-05	Workshop 화면 구현	Workshop 소개 화면 구현
STORE-06	배달 주문 화면 구현	배달 주문 소개 화면 구현
STORE-07	단체 주문 화면 구현	단체 주문 소개 화면 구현

---

3. 🎗️테스터 케이스

테스트 케이스 ID	테스트 목적	입력/행동	기대 결과
TC-01	Main 이벤트 리스트 출력 확인	페이지 진입	최신 이벤트 목록이 이미지와 함께 출력됨
TC-02	Menu 리스트 출력 확인	Menu 페이지 진입	아이스크림 리스트가 썸네일/이름과 함께 출력됨
TC-03	Menu 제품 상세 페이지 이동 확인	제품 항목 클릭	해당 제품의 상세 페이지로 정상 이동됨
TC-04	BR Play 이벤트 상세 진입 확인	이벤트 항목 클릭	상세 페이지로 이동하여 이벤트 정보 노출
TC-05	BR Play이벤트별 콘텐츠 확인	관련 탭 클릭	선택된 탭에 맞는 콘텐츠로 화면 전환
TC-06	BR Story 연도별 히스토리 콘텐츠 확인	연도 또는 관련 탭 클릭	해당 연도에 해당하는 브랜드 히스토리 표시
TC-07	BR Story 탭 전환 기능 검증	상단 메뉴 내 연혁/로고/제품 탭 클릭	선택된 탭에 맞는 콘텐츠로 화면 전환
TC-08	Delivery 지역 기반 매장 검색 기능 확인	시/도 및 구/군 선택 후 검색 버튼 클릭	해당 지역의 매장 리스트 및 지도 마커 출력
TC-09	Store 매장 상세 정보 확인	매장 리스트 내 항목 클릭	매장 주소, 전화번호, 운영시간 등의 상세 정보 표시

---

4. 🎲 결과

배포 링크 : https://be-09-2st-4team.vercel.app/

🎲 4-1 기능 테스트 결과서

테스트 항목	결과 ✅ 성공 ❌ 실패	비고
Menu 리스트 출력 확인	✅ 성공
Menu 제품 상세 페이지 이동 확인	✅ 성공
BR Play 이벤트 상세 진입 확인	✅ 성공
BR Play 이벤트별 콘텐츠 확인	✅ 성공
BR Play 배라광장 modal 기능 확인	✅ 성공
BR Play 레시피 상세 진입 확인	✅ 성공
BR Play 레시피별 콘텐츠 확인	✅ 성공
BR Play 레시피 페이지 전환 기능	✅ 성공
BR Play 마이플레이버 만들기 기능 및 초기화	✅ 성공
BR Story 연도별 브랜드 히스토리 콘텐츠 확인	❌ 실패	스크롤에 따른 이미지, 텍스트 팝업 미구현
BR Story 이달의 맛 히스토리 콘텐츠 확인	✅ 성공
BR Story 탭 전환 기능 검증	✅ 성공
BR Story Be better 콘텐츠 확인	✅ 성공	더보기 클릭시 모달 기능 미구현
Delivery 지역 기반 매장 검색 기능 확인	✅ 성공
Store 매장 상세 정보 확인	✅ 성공
Main 전체 페이지의 구현 확인	✅ 성공	섹션별 블록 구조로 구현, 전체 레이아웃 정상 표시
Main 초기 애니메이션 기능 확인	✅ 성공	페이지 로드 시 팝업 순차 출현, 버튼 굴러오기, 클릭 시 순차 사라짐, 버튼 고정 상태 유지
Main Promotion 슬라이더 기능 확인	✅ 성공	터치/드래그 이동, 페이지네이션 클릭, 5개 이미지 온전 표시, 외부 링크 연결
Main Be Better 그리드 기능 확인	✅ 성공	2x2 그리드 레이아웃, 호버 애니메이션, 이미지-텍스트 정렬
Main 반응형 레이아웃 확인	✅ 성공	데스크탑/모바일 레이아웃 적응, 각 섹션 정상 표시

🎲 4-2 개선 사항

• 각 페이지 별 애니메이션 및 상호 작용 기능 보충

---

🍦 기술 스택 및 사용 툴

🧑‍💻 사용 언어 및 프레임워크

📦 라이브러리 & API

🔧 개발 도구

🔄 버전 관리

---

5. 🥇 회고

박준범

• menu 페이지를 설계하면서 사용자 중심의 카테고리별 분류와 탭 전환 구조를 통해 접근성과 가독성을 높였습니다.
• badge, label 등을 활용해 실시간 이벤트 정보를 직관적으로 표현한 점이 효과적이었습니다.
• 마지막으로 반응형 레이아웃과 시각적 통일성을 유지하며 유지보수에도 용이한 구조로 완성할 수 있었습니다.

이주희

• React 첫 프로젝트로서 기존 HTML/CSS/JS 구현 방식을 React 컴포넌트로 변환하는 클론 코딩 과정에서 많은 어려움을 겪었으나, 직접 부딪혀보며 개발하면서 React 활용법에 대한 감을 잡을 수 있었음.
• Swiper 라이브러리 적용을 통해 슬라이더 기능 구현 및 외부 라이브러리 활용 경험 습득할 수 있었음.
• CSS 다양한 속성과 애니메이션을 직접 조절하며 세부적인 스타일링을 구현하는 과정이 어려웠지만, 완성했을 때의 성취감과 보람을 느꼈음.
• Git을 활용한 협업 관리 및 버전 제어에 대한 이해도가 아직 부족하여 지속적인 학습 필요성을 인식하게되었음.

이지용

• 실제 프로젝트를 진행하면서 상태 관리를 하는 것이 생각보다 복잡하고 신경을 많이 써야된다는 것을 느낌이 들었다.
• CSS, JS, React도 공부할 것이 더 있다고 생각이 들었다.
• 라이브러리나 api를 더욱 잘 활용할 수 있어야 된다는 것을 깨달았다.

박창준

• 프론트엔드도 사실 처음 접한 부분이라 많은 어려움이 있을거 같았지만 좋은 팀원분들과 함께 협업해서 하다보니 무사히 잘 마칠 수 있었고 다들 잘 알려주셔서 덕분에 많이 배울 수 있었던 거 같다.
• 다음 프로젝트에서는 더 열심히해서 내가 다른 분들에게 더 많은 도움이 될 수 있도록 하고 싶다.
• Html, JavaScript, Css, React, Next.js에 대해 완벽하게 하지는 못해도 어느정도는 완벽하게 해서 다음에도 잘 활용 할 수 있게 공부해야 될 거 같다는 생각이 들었다.
• 프로젝트를 하다보니 git과 github를 이용한 협업에서도 전보단 많이 좋아졌지만 아직 어려움이 있어 열심히 다시 공부를 해야겠다는 생각이 들었다.
• 이번에 git을 GUI로 관리할 수 있는 Fork 프로그램을 써봤는데 아직 처음이라 많은 어려움이 있었는데 앞으로는 계속해서 CLI로 관리하는 방법을 하기보다 직관적으로 확인할 수 있는 Fork 프로그램을 써봐야 될 거 같다.

조석근

• React 및 CSS에 대한 이해도가 낮아 개발 과정에서 다소 어려움을 겪었으며, 프론트엔드 전반에 대한 기술 역량 향상의 필요성을 절감하였다.
• React를 처음 접한 만큼, 컴포넌트 구조와 상태 관리 등 기초 개념부터 체계적으로 학습할 계획이다.
• 프로젝트를 통해 JavaScript 기반 프레임워크를 다루기 위해서는 JS 자체에 대한 탄탄한 이해가 선행되어야 함을 실감하였다.
• SCSS를 활용한 디자인 작업이 예상보다 복잡하고 세밀한 조정이 요구되어, 향후 다양한 실습을 통해 UI/UX 구현 능력을 강화할 필요가 있다.