release 3.0.2 (#70)

* [BYOB-165] 주류 검색 API 변경 관련 수정 + 주류 검색 시 debounce 적용 (#54)

* feat: 주류 검색 시 debounce 적용

* feat: query status가 idle일 때 보여질 UI 추가

* feat: 주류 검색 로딩 UI 수정

* feat: 주류 검색 api 변경에 따른 필드 관련 수정

* docs: coderabbit ai 설정 추가

* [BYOB-210] 주류 생활 메뉴 수정 및 주류별 노트 그룹 컴포넌트 구현 (#55)

* feat: 네비게이션 바 변경

* feat: 주류별 테이스팅노트 그룹화 로직을 위한 리팩토링

* feat: 사용자 테이스팅 노트 그룹화 로직 작성

* feat: 주류 생활 페이지에 작성한 노트 목록 방식 탭 분리

* feat: 주류 생활 페이지에 주류별 노트 보기 옵션 구현

* docs: PR 템플릿 추가

* feat: type 관련 수정

* [BYOB-213] 회원 정보 수정 버튼 활성화 및 기능 구현 (#56)

* feat: 신규 로그인 시 보여줄 회원가입 화면 구현

* feat: 회원 정보 수정 버튼 활성화 및 기능 구현

* refactor: 사용하지 않는 함수 제거

* docs: github PR 템플릿 수정 및 coderabbit ai 프롬프트 수정

* [BYOB-222] API 명세 변경에 따른 API 호출 전환 (#57)

* refactor: user api 및 auth api 갱신

* refactor: 나머지 api 전환 완료

* Update frontend_dev.yml

* [BYOB-223] 주류 가격 통합 비교 기능 구축 (#58)

* feat: 주류 가격 정보 조회 API 구현

* feat: 검색 결과가 없으면 쿼리 중 첫번째로 두글자 이상인 단어를 찾아서 다시 검색

* feat: 주류 상세 페이지 가격 정보 추가

* feat: 무카와 추가

* feat: 캐시 추가

* refactor: PriceInfo 개선

* feat: cu 가격 정보 추가

* refactor: 주류 검색 페이지 cors관련 설정 제거

* fix: 타입 오류 해결

* refactor: 주류 가격 정보 타입 오류 해결

* 환경변수 오류 해결

* feat: 일본어 검색 기능 개선 (#59)

* release 2.4.0 디벨롭에 반영 (#63)

* deepl api 키 반영

* release 2.2.0 (#60)

* [BYOB-223] 주류 가격 통합 비교 기능 구축 (#58)

* feat: 주류 가격 정보 조회 API 구현

* feat: 검색 결과가 없으면 쿼리 중 첫번째로 두글자 이상인 단어를 찾아서 다시 검색

* feat: 주류 상세 페이지 가격 정보 추가

* feat: 무카와 추가

* feat: 캐시 추가

* refactor: PriceInfo 개선

* feat: cu 가격 정보 추가

* refactor: 주류 검색 페이지 cors관련 설정 제거

* fix: 타입 오류 해결

* refactor: 주류 가격 정보 타입 오류 해결

* feat: 일본어 검색 기능 개선 (#59)

* release 2.2.1 (#61)

* [BYOB-223] 주류 가격 통합 비교 기능 구축 (#58)

* feat: 주류 가격 정보 조회 API 구현

* feat: 검색 결과가 없으면 쿼리 중 첫번째로 두글자 이상인 단어를 찾아서 다시 검색

* feat: 주류 상세 페이지 가격 정보 추가

* feat: 무카와 추가

* feat: 캐시 추가

* refactor: PriceInfo 개선

* feat: cu 가격 정보 추가

* refactor: 주류 검색 페이지 cors관련 설정 제거

* fix: 타입 오류 해결

* refactor: 주류 가격 정보 타입 오류 해결

* feat: 일본어 검색 기능 개선 (#59)

* release 2.4.0 가격 비교 기능 추가 (#62)

* feat: 레이아웃 수정 및 검색 UI 수정

* feat: 홈페이지 변경

* feat: 홈페이지 디자인 변경

* fix: null 에러 수정

* feat: 무카와 상세 설명 추가

* az1 제거

* 명령어 에러 수정

* Revert "release 2.4.0 디벨롭에 반영 (#63)" (#64)

This reverts commit 1c55076.

* release 2.4.0 디벨롭에 반영 (#63)

* deepl api 키 반영

* release 2.2.0 (#60)

* [BYOB-223] 주류 가격 통합 비교 기능 구축 (#58)

* feat: 주류 가격 정보 조회 API 구현

* feat: 검색 결과가 없으면 쿼리 중 첫번째로 두글자 이상인 단어를 찾아서 다시 검색

* feat: 주류 상세 페이지 가격 정보 추가

* feat: 무카와 추가

* feat: 캐시 추가

* refactor: PriceInfo 개선

* feat: cu 가격 정보 추가

* refactor: 주류 검색 페이지 cors관련 설정 제거

* fix: 타입 오류 해결

* refactor: 주류 가격 정보 타입 오류 해결

* feat: 일본어 검색 기능 개선 (#59)

* release 2.2.1 (#61)

* [BYOB-223] 주류 가격 통합 비교 기능 구축 (#58)

* feat: 주류 가격 정보 조회 API 구현

* feat: 검색 결과가 없으면 쿼리 중 첫번째로 두글자 이상인 단어를 찾아서 다시 검색

* feat: 주류 상세 페이지 가격 정보 추가

* feat: 무카와 추가

* feat: 캐시 추가

* refactor: PriceInfo 개선

* feat: cu 가격 정보 추가

* refactor: 주류 검색 페이지 cors관련 설정 제거

* fix: 타입 오류 해결

* refactor: 주류 가격 정보 타입 오류 해결

* feat: 일본어 검색 기능 개선 (#59)

* release 2.4.0 가격 비교 기능 추가 (#62)

* feat: 레이아웃 수정 및 검색 UI 수정

* feat: 홈페이지 변경

* feat: 홈페이지 디자인 변경

* fix: null 에러 수정

* feat: 무카와 상세 설명 추가

* az1 제거

* 명령어 에러 수정

* feat: 충돌 해결

* feat: 충돌 해결

* [BYOB-229] 가격 비교 다양한 사이트 추가 (#66)

* feat: 겟주 가격 비교 추가

* feat: 메인 페이지 소개 문구 수정

* feat: 롯데마트 주류 가격 정보 추가

* feat: 롯데마트 비동기 처리

* feat: 이마트 추가

* fix: 타입 에러 수정

* feat: 겟주, 롯데마트, 이마트 관련 홍보글

* feat: 빅카메라 가격 정보 추가

* feat: 홈페이지 홍보글 업데이트

* [BYOB-225] 화면 변경 (#67)

* feat: 피드 페이지 -  노트 목록 화면 구현

* feat: 구매 노트 작성 페이지 구현

* feat: 감상 노트 작성 페이지 구현

* feat: 구매 노트 상세 페이지 구현

* feat: 감상 노트 상세 페이지 구현

* feat: 잡다한 페이지 구현

* feat: 공유 버튼 추가

* fix: 충돌 문제 해결

* feat: 주류 상세 페이지 컴포넌트 수정

* fix: useSearchParams 관련 문제 해결

* fix: 주류 상세페이지 간격 수정

* fix: 공유 링크 버그 수정 및 검증 로직 수정

* fix: 업로드 용량 초과 시 처리 로직 구현

* feat: 디자인 일부 수정

* fix: 구매 노트 작성 시 숫자 검증 로직 추가

* docs: 홈페이지 내용 수정

---------

Co-authored-by: yangdongsuk <[email protected]>
Co-authored-by: dongsuk <[email protected]>

src/components/ServiceIntroductionComponent/ServiceIntroductionComponentV2.tsx

@@ -15,6 +15,7 @@ import StorefrontIcon from "@mui/icons-material/Storefront";
 import SearchIcon from "@mui/icons-material/Search";
 import TouchAppIcon from "@mui/icons-material/TouchApp";
 import PriceCheckIcon from "@mui/icons-material/PriceCheck";
+import { EditNote } from "@mui/icons-material";
 
 const GOOGLE_FORM_URL = "https://forms.gle/cuoJy7uJF4r2ewMg9";
 const KAKAO_OPENCHAT_URL = "https://open.kakao.com/o/sSDeVvGg";
@@ -39,7 +40,7 @@ export default function ServiceIntroductionComponent() {
               variant="h4"
               sx={{
                 fontWeight: 800,
-                fontSize: { xs: "24px", md: "32px" },
+                fontSize: { xs: "20px", md: "32px" },
                 letterSpacing: "-0.02em",
               }}
             >
@@ -48,72 +49,85 @@ export default function ServiceIntroductionComponent() {
             <Typography
               color="text.secondary"
               sx={{
-                fontSize: "16px",
+                fontSize: { xs: "14px", md: "16px" },
                 letterSpacing: "-0.01em",
               }}
             >
               국내외 주요 매장의 가격을 한 눈에 비교하세요
             </Typography>
           </Stack>
           {/* 업데이트 소식 */}
-          <Box
-            sx={{
-              display: "flex",
-              gap: 2,
-              p: 2.5,
-              bgcolor: "#FFF4E5",
-              borderRadius: "16px",
-              border: "1px solid",
-              borderColor: "#FFE0B2",
-              alignItems: "center",
-            }}
-          >
+          <Stack>
+            <Typography
+              variant="h6"
+              sx={{
+                fontWeight: 700,
+                mb: 1,
+                fontSize: { xs: "15px", md: "18px" },
+                letterSpacing: "-0.01em",
+              }}
+            >
+              업데이트 소식
+            </Typography>
             <Box
               sx={{
-                width: 40,
-                height: 40,
-                borderRadius: "12px",
-                bgcolor: "#FFE0B2",
                 display: "flex",
+                gap: 2,
+                p: { xs: 2, md: 2.5 },
+                bgcolor: "#FFF4E5",
+                borderRadius: "16px",
+                border: "1px solid",
+                borderColor: "#FFE0B2",
                 alignItems: "center",
-                justifyContent: "center",
-                flexShrink: 0,
               }}
             >
               <Box
-                component="span"
-                role="img"
-                aria-label="new"
                 sx={{
-                  fontSize: "24px",
-                  lineHeight: 1,
+                  width: 40,
+                  height: 40,
+                  borderRadius: "12px",
+                  bgcolor: "#FFE0B2",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
                 }}
               >
-                🎉
+                <Box
+                  component="span"
+                  role="img"
+                  aria-label="new"
+                  sx={{
+                    fontSize: { xs: "20px", md: "24px" },
+                    lineHeight: 1,
+                  }}
+                >
+                  🎉
+                </Box>
+              </Box>
+              <Box sx={{ flex: 1 }}>
+                <Typography
+                  sx={{
+                    fontWeight: 700,
+                    fontSize: { xs: "14px", md: "15px" },
+                    color: "#E65100",
+                    lineHeight: 1.4,
+                  }}
+                >
+                  New! 주류 구매 노트 작성 기능 추가
+                </Typography>
               </Box>
             </Box>
-            <Box sx={{ flex: 1 }}>
-              <Typography
-                sx={{
-                  fontWeight: 700,
-                  fontSize: "15px",
-                  color: "#E65100",
-                  lineHeight: 1.4,
-                }}
-              >
-                New! 빅카메라, 겟주, 롯데마트, 이마트 가격 비교 추가
-              </Typography>
-            </Box>
-          </Box>
+          </Stack>
 
           {/* 사용 방법 */}
           <Box>
             <Typography
               variant="h6"
               sx={{
                 fontWeight: 700,
-                mb: 3,
-                fontSize: "18px",
+                mb: 1,
+                fontSize: { xs: "15px", md: "18px" },
                 letterSpacing: "-0.01em",
               }}
             >
@@ -122,30 +136,36 @@ export default function ServiceIntroductionComponent() {
             <Stack spacing={2}>
               {[
                 {
-                  icon: <SearchIcon />,
+                  icon: <SearchIcon fontSize="small" />,
                   step: "1",
                   title: "원하는 주류 검색",
                   desc: "찾고 싶은 주류의 이름을 검색해보세요. 영문, 한글 모두 가능합니다.",
                 },
                 {
-                  icon: <TouchAppIcon />,
+                  icon: <TouchAppIcon fontSize="small" />,
                   step: "2",
                   title: "주류 선택",
                   desc: "검색 결과에서 원하는 주류를 선택하세요.",
                 },
                 {
-                  icon: <PriceCheckIcon />,
+                  icon: <PriceCheckIcon fontSize="small" />,
                   step: "3",
                   title: "가격 비교",
                   desc: "각 매장별 실시간 가격을 한 눈에 비교하고 최저가를 확인하세요.",
                 },
+                {
+                  icon: <EditNote fontSize="small" />,
+                  step: "4",
+                  title: "노트 기록",
+                  desc: "주류에 대한 구매 노트와 테이스팅 노트를 작성해 기록을 남겨보세요.",
+                },
               ].map((item, index) => (
                 <Box
                   key={index}
                   sx={{
                     display: "flex",
                     gap: 2.5,
-                    p: 2.5,
+                    p: { xs: 2, md: 2.5 },
                     bgcolor: "grey.50",
                     borderRadius: "16px",
                     border: "1px solid",
@@ -159,8 +179,8 @@ export default function ServiceIntroductionComponent() {
                 >
                   <Box
                     sx={{
-                      width: 40,
-                      height: 40,
+                      width: { xs: 20, md: 40 },
+                      height: { xs: 30, md: 40 },
                       borderRadius: "12px",
                       bgcolor: "grey.100",
                       display: "flex",