feat: add Search UI by HeesooJun · Pull Request #267 · Beyond-Imagination/fienmee

HeesooJun · 2025-08-15T11:56:31Z

검색 결과 화면 1차 UI 구현했습니다

아이콘(SVG→PNG)

인라인 SVG로 넣으려고 했으나, Flaticon에서 가져왔는데 기본 제공이 PNG이고 이를 SVG로 변환하는 과정에서 손실이 발생해 현재는 PNG로 적용했습니다.

카테고리

카테고리 탭/검색바/카드 리스트 레이아웃 정리했습니다.
카테고리 변경 시 라우트 전환 없이 결과 영역만 로딩 스피너 표시

현재 데이터는 임의로 넣어놨습니다.
실제 검색 API 연동은 추후에 하겠습니다.

gemini-code-assist

Summary of Changes

Hello @HeesooJun, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 새로운 검색 UI를 도입합니다. 검색 입력창, 카테고리 탭, 그리고 검색 결과 표시를 포함합니다. 또한 로딩 상태를 처리하고 검색 쿼리 및 카테고리에 대한 URL 매개변수를 업데이트합니다. PR 설명에 따르면, 초기 UI 구현, 아이콘 처리 (SVG 대신 PNG 사용), 카테고리, 검색창 및 카드 목록 레이아웃 정리가 이루어졌습니다. 실제 검색 API 연동은 추후에 진행될 예정이며, 현재는 임시 데이터를 사용합니다.

Highlights

새로운 검색 UI 구현: 검색 입력, 카테고리 탭, 결과 표시를 포함하는 완전한 검색 UI가 추가되었습니다.
카테고리 필터링 및 탐색: 사용자는 카테고리별로 검색 결과를 필터링할 수 있으며, 전체 페이지 새로고침 없이 URL이 동적으로 업데이트됩니다.
로딩 상태 관리: 검색 결과를 가져오는 동안 (현재는 임시 데이터 사용) 로딩 스피너가 표시됩니다.
아이콘 처리: SVG 변환 문제로 인해 카테고리 아이콘에 PNG 이미지가 사용되었습니다.
임시 데이터 사용: 검색 기능은 현재 임시 데이터를 사용하며, 향후 API 연동이 계획되어 있습니다.
URL 매개변수 업데이트: 검색 쿼리 및 선택된 카테고리가 URL 매개변수에 반영됩니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

안녕하세요! 검색 UI 추가를 위한 PR 잘 보았습니다. 전반적으로 검색 페이지의 기본 기능과 UI가 잘 구현되었습니다. 몇 가지 개선점을 제안드립니다.

loading.tsx에서 레이아웃 시프트를 방지하기 위해 SearchScreen과 레이아웃을 일치시키는 것이 좋습니다.
page.tsx에서 searchParams 처리 시 배열인 경우를 고려하여 더 안전하게 값을 가져오는 방법을 제안했습니다.
CategoryTabs.tsx에서 하드코딩된 값을 Tailwind CSS 설정과 일치시켜 반응형 문제를 예방하도록 수정했습니다.
SearchScreen.tsx에서 중복된 코드인 검색 결과 카드 렌더링 로직을 SearchResultCard 컴포넌트를 사용하도록 리팩토링할 것을 제안했습니다. 이는 코드의 재사용성과 유지보수성을 크게 향상시킬 것입니다.
그 외에 next/image 사용, 타입 단언 개선 등 몇 가지 코드 품질 향상을 위한 제안도 포함했습니다.

자세한 내용은 각 파일의 코드 리뷰 코멘트를 확인해주세요. 수고하셨습니다!

yuchem2 · 2025-08-18T11:00:34Z

@@ -0,0 +1,15 @@
+// apps/web/src/app/(navigation)/search/page.tsx


검색 결과 화면은 하단의 네비게이션 바가 나오는 것보다 상단의 뒤로가기 버튼이 보이도록 하는 것이 더 적절해 보입니다.

이 부분이 반영되지 않은 것 같아요. 반영하지 않은 이유가 있으실까요?

이런 느낌맞을까요

@HeesooJun 넵 맞습니다:) 다만 검색 창이 header 부분에 있는게 디자인적으로 더 자연스러울 것 같은데, 그렇게 할려면 코드 전반을 다 수정해야겠네요..ㅠ

yuchem2 · 2025-08-18T11:01:28Z

+import { CATEGORY_ICON } from '@/components/icon/Categoryicon'
+
+// 1) 허용 카테고리(아이콘이 있는 것만)
+const VALID = ['문화행사', '스포츠', '야외활동', '음악', '취업', '팝업행사', '패션'] as const


저희 기존 카테고리 이름들이 있는데, 이렇게 사용하는 이유가 있을까요?

yuchem2 · 2025-08-18T11:05:16Z

+
+type Props = { initialQuery?: string; initialCategory?: string }
+
+type EventItem = {


기존 행사 데이터와 동일한 형태로 예시를 수정하는 것이 좋아보여요.

수정해보겠습니다

이부분도 반영되지 않은 것 같습니다

yuchem2 · 2025-08-18T11:07:39Z

+export const CATEGORY_ICON: Record<string, StaticImageData> = {
+    문화행사,
+    스포츠,
+    야외활동,
+    음악,
+    취업,
+    팝업행사,
+    패션,
+}


저희 행사 카테고리 중 해당 카테고리들을 선택한 이유가 있을까요?

화면만 구성하려고 임시로 다 넣은거라 나중에 추가하려고 했습니다!!

yuchem2 · 2025-10-01T05:52:55Z

@HeesooJun 현재 이 부분 작업 중이신가요? 아니면 멈춰있는 중일까요?

HeesooJun

카테고리 탭이 서버 데이터 기반으로 동작
결과 없는 카테고리는 탭에서 자동 숨김
첫 진입 시 로딩만 노출 → 로딩 완료 후 첫 카테고리 자동 선택
카테고리별 결과는 서버에서 조회해 리스트에 표시
카테고리 아이콘은 서버 title과 PNG 이름 매칭 시 표시, 없으면 텍스트

todo
검색 알고리즘 +결과 누를시 행사로 이동기능 추가 해야됩니다

yuchem2 · 2025-11-11T12:29:55Z

@@ -0,0 +1,15 @@
+// apps/web/src/app/(navigation)/search/page.tsx


이 부분이 반영되지 않은 것 같아요. 반영하지 않은 이유가 있으실까요?

yuchem2 · 2025-11-11T12:31:06Z

+import iconHealth from './건강.png'
+import iconGame from './게임.png'
+import iconScience from './과학.png'
+import iconEducation from './교육.png'
+import iconTechnology from './기술.png'
+import iconOthers from './기타.png'
+import iconMyEvent from './내가 등록한 행사.png'
+import iconVehicles from './모빌리티.png'
+import iconArts from './문화예술.png'
+import iconBusiness from './비지니스, 창업.png'
+import iconSports from './스포츠.png'
+import iconAnime from './애니메이션.png'
+import iconMovieTv from './영화, 드라마.png'
+import iconFoodDrinks from './음식.png'
+import iconMusic from './음악.png'
+import iconHotEvent from './인기 행사.png'
+import iconHome from './인테리어.png'
+import iconNatureOutdoors from './자연, 야외활동.png'
+import iconGarden from './정원.png'
+import iconCareer from './취업.png'
+import iconPopup from './팝업 행사.png'
+import iconFashionBeauty from './패션, 뷰티.png'


저희 icon을 svg로 관리하고 있는걸로 알고 있는데 png로 가져신 이유가 궁금합니다!

그... 제가 가져온게 무료 flaticon 소스라 SVG를 못 받았고, 자동 변환은 테두리/색이 깨져서 PNG로 유지했습니다!!

yuchem2 · 2025-11-11T12:34:01Z

+
+type Props = { initialQuery?: string; initialCategory?: string }
+
+type EventItem = {


이부분도 반영되지 않은 것 같습니다

feat: add Search UI

7b096c0

auto-assign Bot requested review from joonamin, laggu, ninaxlee, rlooo, sezeme and yuchem2 August 15, 2025 11:56

auto-assign Bot assigned HeesooJun Aug 15, 2025

gemini-code-assist Bot reviewed Aug 15, 2025

View reviewed changes

HeesooJun closed this Aug 15, 2025

gemini-code-assist Bot reviewed Aug 15, 2025

View reviewed changes

change page.tsx

373cadd

HeesooJun reopened this Aug 15, 2025

HeesooJun added 3 commits August 15, 2025 21:24

Result and Screen change

d1bac81

loading change

ce245f5

Screen type change

5a2e48a

yuchem2 reviewed Aug 18, 2025

View reviewed changes

HeesooJun closed this Sep 7, 2025

Merge remote-tracking branch 'origin/develop' into search

aa26102

HeesooJun reopened this Oct 29, 2025

feat : 카테고리별 검색 연동 + 아이콘 매핑

4719ede

HeesooJun commented Oct 29, 2025

View reviewed changes

yuchem2 reviewed Nov 11, 2025

View reviewed changes

fix: 검색 화면 데이터 매핑 및 레이아웃 정리

3e73a5e

yuchem2 approved these changes Dec 1, 2025

View reviewed changes

HeesooJun merged commit 8d9a7c6 into develop Dec 2, 2025
2 checks passed

		@@ -0,0 +1,15 @@
		// apps/web/src/app/(navigation)/search/page.tsx


		type Props = { initialQuery?: string; initialCategory?: string }

		type EventItem = {

Uh oh!

Conversation

HeesooJun commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

아이콘(SVG→PNG)

카테고리

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HeesooJun Nov 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuchem2 Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuchem2 commented Oct 1, 2025

Uh oh!

HeesooJun left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HeesooJun commented Aug 15, 2025 •

edited

Loading

HeesooJun Nov 30, 2025 •

edited

Loading

yuchem2 Dec 1, 2025 •

edited

Loading

HeesooJun left a comment •

edited

Loading