Conversation
Walkthrough이번 변경에서는 그룹 검색 및 필터링 기능이 대폭 확장되었습니다. 새로운 검색 바, 최근 검색 탭, 검색 결과, 필터 컴포넌트가 추가되고, 기존 그룹 카드와 모달 스타일 구조가 개선되었습니다. 라우터에 그룹 검색 페이지가 등록되었으며, 관련 스타일 및 props 구조도 리팩토링되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant GroupPage
participant Router
participant GroupSearchPage
participant SearchBar
participant RecentSearchTabs
participant SearchResult
User->>GroupPage: 검색바 클릭
GroupPage->>Router: /groupSearch로 이동
Router->>GroupSearchPage: GroupSearch 렌더링
GroupSearchPage->>SearchBar: 검색 바 렌더
User->>SearchBar: 검색어 입력/검색 버튼 클릭
SearchBar->>GroupSearchPage: onSearch 콜백
GroupSearchPage->>RecentSearchTabs: 최근 검색어 표시/업데이트
GroupSearchPage->>SearchResult: 검색 결과 표시
User->>RecentSearchTabs: 최근 검색어 클릭/삭제
RecentSearchTabs->>GroupSearchPage: 검색어 반영/삭제 처리
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (6)
src/components/group/MyGroupModal.tsx (1)
120-121: 불필요한 삼항 연산자를 제거하세요
group.isOnGoing이 이미 boolean 값이므로 삼항 연산자가 불필요합니다.- isOngoing={group.isOnGoing ? true : false} + isOngoing={group.isOnGoing}src/components/search/SearchBar.tsx (1)
42-46: CSS에서 width 속성이 중복 정의되었습니다
width: 100%와width: calc(100% - 40px)가 중복으로 정의되어 있습니다.- width: 100%; height: 40px; background-color: var(--color-darkgrey-main); border-radius: 12px; width: calc(100% - 40px);src/components/search/SearchResult.tsx (2)
98-102: 불필요한 조건문을 간소화하세요현재 구현을 더 간단하게 표현할 수 있습니다.
- const isEmptyShowGroup = () => { - if (showGroup.length === 0) { - return true; - } else return false; - }; + const isEmptyShowGroup = () => showGroup.length === 0;
132-132: 불필요한 삼항 연산자를 제거하세요
group.isOnGoing이 이미 boolean 값이므로 삼항 연산자가 불필요합니다.- isOngoing={group.isOnGoing ? true : false} + isOngoing={group.isOnGoing}src/components/common/Filter.tsx (1)
42-44: 빈 fragment 대신 null 사용을 권장합니다.조건부 렌더링에서 아무것도 렌더링하지 않을 때는
null을 사용하는 것이 더 명확합니다.-) : ( - <></> -)} +) : null}src/components/group/GroupCard.tsx (1)
69-70: 스타일 일관성을 개선해주세요.글로벌 스타일 시스템을 일부 도입했지만, 여전히 CSS 변수와 혼재되어 사용되고 있습니다. 일관성을 위해 전체적으로 하나의 방식으로 통일하는 것을 권장합니다.
const Title = styled.h3` font-size: ${typography.fontSize.lg}; font-weight: ${typography.fontWeight.semibold}; - color: #ffffff; + color: ${colors.white}; margin-bottom: 10px; line-height: 1.4; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; `;또는 다른 스타일드 컴포넌트들도 typography와 colors 시스템을 사용하도록 일괄 업데이트하는 것을 고려해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
src/assets/filter/filterDown.svgis excluded by!**/*.svgsrc/assets/filter/filterUp.svgis excluded by!**/*.svgsrc/assets/searchBar/delete.svgis excluded by!**/*.svgsrc/assets/searchBar/tabDelete.svgis excluded by!**/*.svg
📒 Files selected for processing (14)
src/components/common/Filter.tsx(1 hunks)src/components/common/SearchBar.tsx(0 hunks)src/components/common/TitleHeader.tsx(1 hunks)src/components/group/CompletedGroupModal.tsx(2 hunks)src/components/group/GroupCard.tsx(2 hunks)src/components/group/Modal.styles.ts(1 hunks)src/components/group/MyGroupModal.tsx(2 hunks)src/components/group/RecruitingGroupBox.tsx(1 hunks)src/components/search/RecentSearchTabs.tsx(1 hunks)src/components/search/SearchBar.tsx(1 hunks)src/components/search/SearchResult.tsx(1 hunks)src/pages/group/Group.tsx(4 hunks)src/pages/groupSearch/GroupSearch.tsx(1 hunks)src/pages/index.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- src/components/common/SearchBar.tsx
🧰 Additional context used
🧬 Code Graph Analysis (9)
src/components/group/RecruitingGroupBox.tsx (1)
src/components/group/GroupCard.tsx (1)
GroupCard(13-36)
src/components/group/CompletedGroupModal.tsx (1)
src/components/group/GroupCard.tsx (1)
GroupCard(13-36)
src/pages/group/Group.tsx (2)
src/components/common/Wrapper.tsx (1)
Wrapper(3-14)src/components/group/MyGroupModal.tsx (1)
MyGroupModal(88-128)
src/components/group/Modal.styles.ts (1)
src/styles/global/global.ts (1)
colors(4-53)
src/pages/groupSearch/GroupSearch.tsx (1)
src/components/group/Modal.styles.ts (2)
Overlay(4-15)Modal(17-24)
src/components/search/SearchBar.tsx (1)
src/components/common/IconButton.tsx (1)
IconButton(3-7)
src/components/common/Filter.tsx (2)
src/components/common/IconButton.tsx (1)
IconButton(3-7)src/styles/global/global.ts (2)
colors(4-53)typography(56-76)
src/components/search/RecentSearchTabs.tsx (2)
src/components/common/IconButton.tsx (1)
IconButton(3-7)src/styles/global/global.ts (2)
colors(4-53)typography(56-76)
src/components/group/GroupCard.tsx (2)
src/components/group/MyGroupBox.tsx (1)
Group(6-17)src/styles/global/global.ts (2)
colors(4-53)typography(56-76)
🪛 Biome (1.9.4)
src/components/search/SearchResult.tsx
[error] 147-149: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
src/components/common/Filter.tsx
[error] 36-36: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 38-38: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
🪛 ESLint
src/components/search/SearchResult.tsx
[error] 89-89: 'setShowGroup' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
🔇 Additional comments (19)
src/components/common/TitleHeader.tsx (1)
33-33: 헤더 높이 변경이 적절합니다.모달 및 검색 UI에서 더 컴팩트한 헤더를 위한 높이 조정이 적절해 보입니다.
src/components/group/RecruitingGroupBox.tsx (1)
30-30: GroupCard type prop 업데이트가 올바릅니다.새로운 GroupCard API에 맞춰
type='main'으로 정확히 업데이트되었습니다.src/components/group/CompletedGroupModal.tsx (2)
6-6: 모달 스타일 분리가 적절합니다.
Modal.styles모듈로 스타일을 분리하여 재사용성이 향상되었습니다.
95-95: isOngoing prop은 선택적(optional)입니다.
src/components/group/GroupCard.tsx의 Props를 확인한 결과isOngoing?로 정의되어 있어 필수 전달값이 아닙니다.
CompletedGroupModal에서 누락되어도 문제가 없습니다.src/pages/index.tsx (1)
27-27: 새로운 라우트 추가가 적절합니다.그룹 검색 페이지를 위한 라우트가 올바르게 추가되었습니다.
src/pages/group/Group.tsx (3)
3-3: SearchBar import 경로 변경이 적절합니다.검색 관련 컴포넌트를 별도 디렉토리로 분리한 것이 좋은 구조입니다.
12-12: useNavigate 훅 추가가 적절합니다.검색 페이지 네비게이션을 위한 훅 추가가 올바릅니다.
Also applies to: 120-120
138-138: SearchBar onClick 핸들러 연결이 적절합니다.검색바 클릭 시 검색 페이지로 이동하는 UX가 직관적입니다.
src/components/group/MyGroupModal.tsx (1)
7-7: 모달 스타일 모듈화가 잘 되었습니다
Modal.styles.ts로 스타일을 분리하여 재사용성을 높인 것은 좋은 리팩토링입니다.src/components/group/Modal.styles.ts (1)
1-24: 모달 스타일 모듈화가 잘 구현되었습니다모달 스타일을 별도 파일로 분리하여 재사용성을 높이고, 글로벌 색상 팔레트를 적절히 활용한 좋은 구현입니다.
src/pages/groupSearch/GroupSearch.tsx (1)
10-71: 검색 페이지가 잘 구현되었습니다다음과 같은 좋은 구현 패턴을 보여줍니다:
- 적절한 상태 관리 (검색어, 검색 상태, 최근 검색어)
- 최근 검색어 중복 제거 및 최대 5개 제한
- 조건부 렌더링으로 검색 결과와 최근 검색 탭 전환
컴포넌트 간의 연동도 깔끔하게 처리되었습니다.
src/components/search/SearchBar.tsx (1)
15-34: 검색바 컴포넌트가 잘 구현되었습니다다음과 같은 좋은 기능들이 포함되어 있습니다:
- 제어된 입력(controlled input) 패턴
- Enter 키 검색 지원
- 조건부 삭제 버튼 표시
사용자 경험을 고려한 좋은 구현입니다.
src/components/search/SearchResult.tsx (1)
87-140: 검색 결과 컴포넌트가 잘 구현되었습니다다음과 같은 좋은 기능들이 포함되어 있습니다:
- 장르별 탭 필터링
- 정렬 옵션
- 빈 상태 처리
- 반응형 그리드 레이아웃
전체적으로 사용자 경험을 고려한 좋은 구현입니다.
src/components/common/Filter.tsx (1)
8-15: 컴포넌트 인터페이스가 잘 설계되었습니다.Props 구조가 명확하고 재사용 가능한 컴포넌트로 잘 설계되었습니다.
src/components/search/RecentSearchTabs.tsx (3)
6-16: 인터페이스와 컴포넌트 구조가 우수합니다.Props 타입 정의가 명확하고 컴포넌트 시그니처가 깔끔합니다.
21-30: 조건부 렌더링과 리스트 렌더링이 올바르게 구현되었습니다.빈 상태 처리와 key prop 사용이 적절하며, 이벤트 핸들러 연결도 올바릅니다.
38-71: 스타일링이 일관되고 잘 구성되었습니다.글로벌 스타일 시스템을 활용한 일관된 디자인과 적절한 레이아웃 구조입니다.
src/components/group/GroupCard.tsx (2)
9-10: Props 리팩토링이 잘 설계되었습니다.상태와 스타일링 타입을 분리한 것은 좋은 설계 결정입니다. 컴포넌트의 재사용성과 명확성이 향상되었습니다.
41-50: 조건부 스타일링이 잘 구현되었습니다.다양한 컨텍스트에 맞는 스타일 변형이 체계적으로 구현되었습니다.
| import SignupDone from './signup/SignupDone'; | ||
| import Group from './group/Group'; | ||
| import Feed from './feed/Feed'; | ||
| import GroupSearch from './groupSearch/groupSearch'; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
파일명 일관성을 확인해주세요.
import 경로가 ./groupSearch/groupSearch로 되어 있는데, 컴포넌트명은 GroupSearch입니다. 파일명이 일관되게 명명되었는지 확인해주세요.
파일명 일관성을 확인하겠습니다:
🏁 Script executed:
#!/bin/bash
# groupSearch 디렉토리의 파일 구조 확인
fd -e tsx -e ts groupSearch
ls -la src/pages/groupSearch/Length of output: 237
import 경로의 대소문자 일치 필요
src/pages/index.tsx에서 실제 파일명은 GroupSearch.tsx이므로, import 경로도 대소문자를 맞춰야 합니다.
수정 제안:
- import GroupSearch from './groupSearch/groupSearch';
+ import GroupSearch from './groupSearch/GroupSearch';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import GroupSearch from './groupSearch/groupSearch'; | |
| -import GroupSearch from './groupSearch/groupSearch'; | |
| +import GroupSearch from './groupSearch/GroupSearch'; |
🤖 Prompt for AI Agents
In src/pages/index.tsx at line 14, the import path for GroupSearch does not
match the actual filename's case. Change the import statement to use the correct
capitalization, importing from './GroupSearch/GroupSearch' to match the actual
file and folder names exactly.
| const handleSearchBarClick = () => { | ||
| navigate('/groupSearch'); | ||
| }; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
라우트 경로 일관성을 확인해주세요.
네비게이션은 /groupSearch로 하지만, 라우터에서는 groupsearch로 정의되어 있습니다. 경로가 일치하는지 확인이 필요합니다.
라우트 경로 일관성을 확인하겠습니다:
🏁 Script executed:
#!/bin/bash
# 라우터 정의와 네비게이션 경로 확인
rg -A 2 -B 2 "groupsearch|groupSearch" src/pages/Length of output: 852
라우트 경로 대소문자 일치 필요
Group.tsx의 navigate 호출 경로(/groupSearch)와 index.tsx에 정의된 라우트 경로(/groupsearch)가 대소문자만 다릅니다. React Router는 기본적으로 경로의 대소문자를 구분하므로, 아래와 같이 수정해 주세요.
- src/pages/group/Group.tsx (Lines 130-132)
- navigate('/groupSearch');
+ navigate('/groupsearch');📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleSearchBarClick = () => { | |
| navigate('/groupSearch'); | |
| }; | |
| const handleSearchBarClick = () => { | |
| navigate('/groupsearch'); | |
| }; |
🤖 Prompt for AI Agents
In src/pages/group/Group.tsx around lines 130 to 132, the navigate call uses the
path '/groupSearch' which differs in case from the route defined as
'/groupsearch' in index.tsx. To fix this, update the navigate argument to
exactly match the route path's casing, changing '/groupSearch' to
'/groupsearch'.
|
|
||
| const SearchResult = () => { | ||
| const [selected, setSelected] = useState<string>(''); | ||
| const [showGroup, setShowGroup] = useState<Group[]>(dummyMyGroups); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
사용하지 않는 상태 변수를 제거하세요
setShowGroup이 정의되었지만 사용되지 않고 있습니다.
- const [showGroup, setShowGroup] = useState<Group[]>(dummyMyGroups);
+ const [showGroup] = useState<Group[]>(dummyMyGroups);또는 나중에 필터링 기능에서 사용할 예정이라면 주석으로 표시해주세요.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const [showGroup, setShowGroup] = useState<Group[]>(dummyMyGroups); | |
| // Remove the unused setter since it's never called | |
| - const [showGroup, setShowGroup] = useState<Group[]>(dummyMyGroups); | |
| + const [showGroup] = useState<Group[]>(dummyMyGroups); |
🧰 Tools
🪛 ESLint
[error] 89-89: 'setShowGroup' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
🤖 Prompt for AI Agents
In src/components/search/SearchResult.tsx at line 89, the state setter function
setShowGroup is defined but never used. Remove the unused setShowGroup
declaration if it is not needed, or if it is intended for future use such as
filtering, add a comment explaining its planned purpose to avoid confusion.
| const handleModalClick = () => { | ||
| if (!isOpenModal) { | ||
| setIsOpenModal(true); | ||
| } | ||
| }; |
There was a problem hiding this comment.
모달 닫기 기능이 누락되었습니다.
현재 handleModalClick은 모달을 열기만 하고 닫는 기능이 없습니다. 사용자가 컨테이너를 다시 클릭했을 때 모달이 닫혀야 합니다.
다음과 같이 수정하세요:
-const handleModalClick = () => {
- if (!isOpenModal) {
- setIsOpenModal(true);
- }
-};
+const handleModalClick = () => {
+ setIsOpenModal(!isOpenModal);
+};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleModalClick = () => { | |
| if (!isOpenModal) { | |
| setIsOpenModal(true); | |
| } | |
| }; | |
| const handleModalClick = () => { | |
| setIsOpenModal(!isOpenModal); | |
| }; |
🤖 Prompt for AI Agents
In src/components/common/Filter.tsx between lines 22 and 26, the
handleModalClick function only opens the modal but does not close it when the
container is clicked again. Modify handleModalClick to toggle the modal state by
setting isOpenModal to its opposite value, so clicking the container will open
the modal if closed and close it if open.
| {filters.map(filter => | ||
| filter === selectedFilter ? ( | ||
| <SelectedText onClick={() => handleFilterClick(filter)}>{filter}</SelectedText> | ||
| ) : ( | ||
| <Text onClick={() => handleFilterClick(filter)}>{filter}</Text> | ||
| ), | ||
| )} |
There was a problem hiding this comment.
React key prop이 누락되었습니다.
map 함수에서 렌더링되는 각 요소에 고유한 key prop이 필요합니다.
다음과 같이 수정하세요:
{filters.map(filter =>
filter === selectedFilter ? (
- <SelectedText onClick={() => handleFilterClick(filter)}>{filter}</SelectedText>
+ <SelectedText key={filter} onClick={() => handleFilterClick(filter)}>{filter}</SelectedText>
) : (
- <Text onClick={() => handleFilterClick(filter)}>{filter}</Text>
+ <Text key={filter} onClick={() => handleFilterClick(filter)}>{filter}</Text>
),
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {filters.map(filter => | |
| filter === selectedFilter ? ( | |
| <SelectedText onClick={() => handleFilterClick(filter)}>{filter}</SelectedText> | |
| ) : ( | |
| <Text onClick={() => handleFilterClick(filter)}>{filter}</Text> | |
| ), | |
| )} | |
| {filters.map(filter => | |
| filter === selectedFilter ? ( | |
| <SelectedText key={filter} onClick={() => handleFilterClick(filter)}> | |
| {filter} | |
| </SelectedText> | |
| ) : ( | |
| <Text key={filter} onClick={() => handleFilterClick(filter)}> | |
| {filter} | |
| </Text> | |
| ), | |
| )} |
🧰 Tools
🪛 Biome (1.9.4)
[error] 36-36: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
[error] 38-38: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.
(lint/correctness/useJsxKeyInIterable)
🤖 Prompt for AI Agents
In src/components/common/Filter.tsx around lines 34 to 40, the elements rendered
inside the map function lack a unique key prop, which is required by React for
efficient rendering. Add a key prop to both the SelectedText and Text
components, using a unique identifier such as the filter value itself, to ensure
each element has a stable and unique key.
| {isOngoing === true ? ( | ||
| <RecruitingDeadline>{group.deadLine}일 뒤 모집 마감</RecruitingDeadline> | ||
| ) : ( | ||
| <OngoingDeadline>{group.deadLine}일 뒤 종료</OngoingDeadline> | ||
| )} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
isOngoing 로직을 검증해주세요.
현재 isOngoing === true일 때 "모집 마감"을 표시하고, false일 때 "종료"를 표시합니다. 이 로직이 의도한 동작인지 확인이 필요합니다.
일반적으로 isOngoing이 true면 진행 중인 상태를 의미하므로 "종료"를 표시하는 것이 맞을 것 같습니다.
다음 스크립트로 이 컴포넌트를 사용하는 다른 파일들을 확인하여 의도된 동작인지 검증해보겠습니다:
🏁 Script executed:
#!/bin/bash
# GroupCard 컴포넌트 사용처에서 isOngoing prop 사용 패턴 확인
rg -A 3 -B 3 "isOngoing.*=" --type tsxLength of output: 68
🏁 Script executed:
#!/bin/bash
# GroupCard 컴포넌트 파일 경로 찾기
fd -e tsx GroupCard.tsx
# 해당 파일에서 isOngoing 사용 위치 출력
rg -n "isOngoing" $(fd -e tsx GroupCard.tsx)
# 전체 tsx 파일에서 GroupCard 사용 시 isOngoing prop 전달 패턴 확인
rg -g "*.tsx" -n "GroupCard" -A 3 -B 3Length of output: 8322
🏁 Script executed:
#!/bin/bash
# Group 타입 정의에서 isOnGoing 필드 의미 확인
rg -n "export (interface|type) Group" -A10 src/components/group/MyGroupBox.tsxLength of output: 345
GroupCard.tsx의 isOngoing 분기 로직 반전 필요
group.isOnGoing이 true일 때는 모임이 진행 중이므로 “종료”를,
false일 때는 모집 중이므로 “모집 마감”을 표시해야 합니다.
현재 코드는 그 반대로 동작하고 있어 수정이 필요합니다.
수정 위치
- 파일:
src/components/group/GroupCard.tsx - 라인: 26–30
제안 변경사항
-{isOngoing === true ? (
- <RecruitingDeadline>{group.deadLine}일 뒤 모집 마감</RecruitingDeadline>
-) : (
- <OngoingDeadline>{group.deadLine}일 뒤 종료</OngoingDeadline>
-)}
+{isOngoing === true ? (
+ <OngoingDeadline>{group.deadLine}일 뒤 종료</OngoingDeadline>
+) : (
+ <RecruitingDeadline>{group.deadLine}일 뒤 모집 마감</RecruitingDeadline>
+)}🤖 Prompt for AI Agents
In src/components/group/GroupCard.tsx around lines 26 to 30, the conditional
rendering for isOngoing is reversed; when group.isOnGoing is true, it should
display the "종료" message, and when false, the "모집 마감" message. Swap the JSX
elements inside the ternary operator so that the true condition renders the
OngoingDeadline with "종료" text and the false condition renders
RecruitingDeadline with "모집 마감" text.
|
더미 데이터 분류하는것도 좋은 방법일거 같다고 생각합니다. 저도 고려해봐야겠습니다! |
2 participants
#️⃣연관된 이슈
[UI] 모임방 검색 페이지 #34
📝작업 내용
스크린샷 (선택)
필터는 다른곳에서도 사용되기 때문에 이해를 돕기위한 컴포넌트 설명을 첨부합니다.
기본적으로 필터 정보에 따라서 부모 컴포넌트에서 데이터 처리를 해야할 것이라고 생각했습니다. 그렇기 때문에 부모 컴포넌트에서 [selectedFilter, setSelectedFilter] 로 상태를 선언하는 것을 권고합니다. 이후 두 값을 props로 전달해 사용합니다. 추가적으로 filters는 string 배열입니다. filter 요소들을 배열로 함께 넘겨줘 사용합니다.
💬리뷰 요구사항(선택)
딱히 없습니다.
공통된 더미 분리를 고려하겠습니다. API 연동하면서 제거하려고 했는데 너무 지저분한 것 같네요.
Summary by CodeRabbit
신규 기능
기능 개선
버그 수정
스타일