Merged
Conversation
Walkthrough홈페이지 스타일·검색 진입 UI 추가, 필터 리셋 및 searchText 전파 로직 추가, 테스트 흐름·페이지명·여러 컴포넌트의 props·스타일 수정 등 UI·필터 관련 변경 모음입니다. Changes
Sequence Diagram(s)sequenceDiagram
participant U as UI (SearchResultPageClient)
participant FT as FilterTypeBox
participant FB as FilterBottomSheetModal
participant FM as FilterModalContent
participant FL as FilterList
participant P as priceAtom / URL
U->>FT: 사용자 클릭 (필터 우측 X) -> onResetGroup(groupKey)
FT->>U: onResetGroup(groupKey) 호출
U->>FM: FilterModalContent에 reset 요청 (searchText 포함)
FM->>FL: FL.resetGroup(groupKey)
FL-->>FM: 그룹 리셋 완료
FM->>P: priceAtom 초기화 및 updateSearchParams(page=1,...)
P-->>U: URL/상태 변경 -> UI 재렌더
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
🪷 Storybook 확인 🪷 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/app/myPage/page.tsx (1)
12-18:⚠️ Potential issue | 🟡 Minor임포트 순서(import/order) 정리가 필요합니다.
ESLint 힌트에 따라
@utils/getTestType임포트를next/navigation이전으로 이동하세요.🧹 제안 수정안
import ResultCard from '@components/test/resultCard/ResultCard'; import UserInfo from '@components/userInfo/userInfo'; import { TestType } from '@constants/test'; +import getTestType from '@utils/getTestType'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; import useEventLogger from 'src/gtm/hooks/useEventLogger'; import * as styles from './myPage.css'; -import getTestType from '@utils/getTestType';src/app/page.tsx (1)
1-13:⚠️ Potential issue | 🟡 MinorESLint import/order 오류 정리 필요
lint 에러대로
next/link는 스타일 import보다 앞에,@assets/svgs는@components/*보다 앞에 배치해야 합니다.🧹 제안 수정 diff
-import HomeClient from '@app/HomeClient'; -import RecommendTempleClient from '@app/RecommendTempleClient'; -import MainBanner from '@components/banner/MainBanner'; -import DetailTitle from '@components/detailTitle/DetailTitle'; -import FilterTypeBoxClient from '@components/filter/filterTypeBox/FilterTypeBoxClient'; -import Footer from '@components/footer/Footer'; -import Header from '@components/header/Header'; -import TestBanner from '@components/test/testBanner/TestBanner'; -import { cookies } from 'next/headers'; - -import * as styles from './homePage.css'; -import Link from 'next/link'; -import Icon from '@assets/svgs'; +import Link from 'next/link'; +import { cookies } from 'next/headers'; + +import Icon from '@assets/svgs'; +import HomeClient from '@app/HomeClient'; +import RecommendTempleClient from '@app/RecommendTempleClient'; +import MainBanner from '@components/banner/MainBanner'; +import DetailTitle from '@components/detailTitle/DetailTitle'; +import FilterTypeBoxClient from '@components/filter/filterTypeBox/FilterTypeBoxClient'; +import Footer from '@components/footer/Footer'; +import Header from '@components/header/Header'; +import TestBanner from '@components/test/testBanner/TestBanner'; + +import * as styles from './homePage.css';src/app/searchResult/SearchResultPageClient.tsx (1)
3-29:⚠️ Potential issue | 🟡 MinorESLint import/order 정리 필요
lint 에러대로
@assets/svgs는@components/*보다 앞에,Header는SearchHeader보다 앞에,jotai는next/navigation보다 앞에,src/store/store는 스타일 import보다 앞에 배치해야 합니다.🧹 제안 수정 diff
-import SearchCardList from '@components/card/templeStayCard/searchCardList/SearchCardList'; +import Icon from '@assets/svgs'; +import SearchCardList from '@components/card/templeStayCard/searchCardList/SearchCardList'; ... -import SearchHeader from '@components/search/searchHeader/SearchHeader'; -import Header from '@components/header/Header'; +import Header from '@components/header/Header'; +import SearchHeader from '@components/search/searchHeader/SearchHeader'; ... -import { useSearchParams } from 'next/navigation'; -import { useState } from 'react'; +import { useSetAtom } from 'jotai'; +import { useSearchParams } from 'next/navigation'; +import { useState } from 'react'; ... -import * as styles from './searchResultPage.css'; -import Icon from '@assets/svgs'; -import { filterListInstance, priceAtom } from 'src/store/store'; -import { useSetAtom } from 'jotai'; +import { filterListInstance, priceAtom } from 'src/store/store'; + +import * as styles from './searchResultPage.css';
🤖 Fix all issues with AI agents
In `@src/app/page.tsx`:
- Around line 25-32: The Link component currently nests an interactive <input>
(styles.searchInput) which causes accessibility and focus conflicts; replace the
input with a non-interactive element (e.g., a <div> or <span> using
styles.searchInput for visuals) or change it to a button role, remove the
readOnly prop, and ensure the Link (styles.searchWrapper) has an explicit
aria-label describing the destination (e.g., aria-label="검색 페이지로 이동"); preserve
the Icon.IcnSearchMediumGray inside the Link and keep visual styling via
styles.searchInput so the control looks the same but is not an interactive form
element inside a link.
In `@src/components/curation/CurationHeader.tsx`:
- Around line 17-19: The header's logo button (in CurationHeader.tsx wrapping
Icon.SmallLogo and using router.push) lacks an accessible name and is missing an
explicit button type; update the <button> element to include type="button" and a
descriptive aria-label (e.g., aria-label="Go to homepage" or similar) so the
Icon.SmallLogo button is not treated as a submit and is accessible to assistive
tech.
In `@src/components/search/searchHeader/SearchHeader.tsx`:
- Around line 1-4: The imports in SearchHeader.tsx are not separated into groups
with a blank line, causing an ESLint import/order error; open the top of
SearchHeader.tsx and insert a single blank line between external-package imports
(e.g., Icon from '@assets/svgs') and your project-local imports (e.g., SearchBar
from '@components/search/searchBar/SearchBar', * as styles from
'./searchHeader.css', and useNavigateTo from '@hooks/useNavigateTo') so the
import groups are visually and lint-wise separated.
In `@src/components/test/testHeader/TestHeader.css.ts`:
- Line 40: 파일 끝에서 개행 문자(EOF newline)가 빠졌습니다;
src/components/test/testHeader/TestHeader.css.ts의 파일 끝에 있는 닫는 블록(예: "});") 다음에 새
줄을 추가하여 파일을 끝내고 ESLint/Prettier 규칙을 만족시키세요.
In `@src/components/userInfo/userInfo.tsx`:
- Around line 21-28: The handlers handleNoticeClick and handleQuestionClick
currently call window.open with only '_blank' which leaves the page vulnerable
to reverse tabnabbing; update both functions to call window.open with the third
parameter 'noopener,noreferrer' (e.g., window.open(url, '_blank',
'noopener,noreferrer')) and, to be extra safe, capture the returned window
object and set newWin.opener = null if non-null; keep logClickEvent calls as-is.
🧹 Nitpick comments (3)
src/components/filter/filterBox/FilterBox.tsx (2)
18-18: 하드코딩된 문자열 비교 대신 prop 사용을 고려해 보세요.현재
title === '유형'하드코딩 방식은 동작하지만, 다른 필터 그룹에도 helper text가 필요해지면 확장성이 떨어집니다.helperText를 optional prop으로 받아 처리하면 더 유연하게 대응할 수 있습니다.♻️ 제안된 리팩토링
interface FilterBoxProps { title: string; items: string[]; id: string; filtersState: Record<string, number>; onToggleFilter: (filterName: string) => void; + helperText?: string; } -const FilterBox = ({ title, items, id, filtersState, onToggleFilter }: FilterBoxProps) => { +const FilterBox = ({ title, items, id, filtersState, onToggleFilter, helperText }: FilterBoxProps) => { return ( <div className={styles.filterBoxContainer} id={id}> <h1 className={styles.titleStyle}>{title}</h1> - {title === '유형' && <p className={styles.helperText}>*휴식형과 체험형은 숙박입니다.</p>} + {helperText && <p className={styles.helperText}>{helperText}</p>}
23-34:key로index대신item사용을 권장합니다.
items배열의 필터명이 고유하다면item을 key로 사용하는 것이 더 안전합니다. 배열 순서가 변경되어도 React가 올바르게 요소를 추적할 수 있습니다.♻️ 제안된 변경
- <BasicBtn - key={index} + <BasicBtn + key={item}src/components/test/testHeader/TestHeader.tsx (1)
49-49: 하드코딩된 타이틀 문자열 확인 필요.타이틀 "나의 템플 캐릭터는?"이 컴포넌트 내에 하드코딩되어 있습니다. 현재 QA 대응 목적으로는 문제없지만, 추후 이 헤더를 다른 컨텍스트에서 재사용할 경우 유연성이 제한될 수 있습니다.
필요시
titleprop으로 외부에서 주입받는 방식을 고려해 보세요.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/test/page.tsx (1)
69-69:⚠️ Potential issue | 🟡 Minor
prevPath가 빈 문자열일 경우router.push('')동작이 예상과 다를 수 있습니다.
localStorage에prevPage값이 없으면prevPath는 빈 문자열이 됩니다.router.push('')는 일부 환경에서 현재 페이지를 새로고침하거나 예기치 않은 동작을 유발할 수 있습니다. 안전한 fallback 경로(예: 홈/)를 지정하는 것을 권장합니다.🛡️ 안전한 fallback 경로 적용 제안
- const prevPath = getStorageValue('prevPage') || ''; + const prevPath = getStorageValue('prevPage') || '/';Also applies to: 112-112
🧹 Nitpick comments (1)
src/app/test/page.tsx (1)
26-26:prevPath를 컴포넌트 본문에서 직접 호출하면 hydration mismatch가 발생할 수 있습니다.
getStorageValue는 서버에서null을 반환하고 클라이언트에서는 실제 localStorage 값을 반환합니다. 이로 인해 Next.js의 hydration 경고가 발생할 수 있습니다.♻️ useState 초기화 함수 사용 제안
- const prevPath = getStorageValue('prevPage') || ''; + const [prevPath] = useState(() => getStorageValue('prevPage') || '/');
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/app/test/page.tsx`:
- Line 25: The variable prevPath assigned from getStorageValue('prevPage') can
be an empty string causing router.push('') to navigate unexpectedly; update the
code that calls router.push(prevPath) (occurrences near the uses in this file)
to first check if prevPath is a non-empty string and either use a safe default
path (e.g. '/') or skip calling router.push when empty; ensure this check is
applied wherever prevPath is used for navigation so router.push is never invoked
with ''.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/page.tsx (1)
1-13:⚠️ Potential issue | 🟡 MinorESLint import/order 위반 정리 필요
정적 분석에서
next/link와@assets/svgs의 순서가 규칙에 맞지 않는다고 나옵니다. 아래처럼 재정렬해 주세요.🧹 제안 diff
import HomeClient from '@app/HomeClient'; import RecommendTempleClient from '@app/RecommendTempleClient'; +import Icon from '@assets/svgs'; import MainBanner from '@components/banner/MainBanner'; import DetailTitle from '@components/detailTitle/DetailTitle'; import FilterTypeBoxClient from '@components/filter/filterTypeBox/FilterTypeBoxClient'; import Footer from '@components/footer/Footer'; import Header from '@components/header/Header'; import TestBanner from '@components/test/testBanner/TestBanner'; import { cookies } from 'next/headers'; -import * as styles from './homePage.css'; import Link from 'next/link'; -import Icon from '@assets/svgs'; +import * as styles from './homePage.css';
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🛰️ 관련 이슈
🧑💻 작업 내용
작업완료로 상태 체크해둔 항목들이 이번 이슈에서 해결한 부분들입니다 ~!)🗯️ PR 포인트
🚀 알게된 점
📖 참고 자료 (선택)
📸 스크린샷 (선택)
Summary by CodeRabbit
새로운 기능
개선사항
기타