가챠 카드게임 Spirit Summon(소환진) UI 리디자인

.gitignore

@@ -70,3 +70,7 @@ apps/web/public/sw.js
 
 *storybook.log
 .playwright-mcp
+
+# Local Claude Code instructions
+apps/*/CLAUDE.local.md
+CLAUDE.local.md

.serena/project.yml

@@ -1,10 +1,3 @@
-# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
-#  * For C, use cpp
-#  * For JavaScript, use typescript
-# Special requirements:
-#  * csharp: Requires the presence of a .sln file in the project folder.
-language: typescript
-
 # whether to use the project's gitignore file to ignore files
 # Added on 2025-04-07
 ignore_all_files_in_gitignore: true
@@ -64,5 +57,95 @@ excluded_tools: []
 # initial prompt for the project. It will always be given to the LLM upon activating the project
 # (contrary to the memories, which are loaded on demand).
 initial_prompt: ""
-
+# the name by which the project can be referenced within Serena
 project_name: "git-animal-client"
+
+# list of tools to include that would otherwise be disabled (particularly optional tools that are disabled by default).
+# This extends the existing inclusions (e.g. from the global configuration).
+included_optional_tools: []
+
+# fixed set of tools to use as the base tool set (if non-empty), replacing Serena's default set of tools.
+# This cannot be combined with non-empty excluded_tools or included_optional_tools.
+fixed_tools: []
+
+# list of mode names to that are always to be included in the set of active modes
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the base_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this setting overrides the global configuration.
+# Set this to [] to disable base modes for this project.
+# Set this to a list of mode names to always include the respective modes for this project.
+base_modes:
+
+# list of mode names that are to be activated by default.
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the default_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this overrides the setting from the global configuration (serena_config.yml).
+# This setting can, in turn, be overridden by CLI parameters (--mode).
+default_modes:
+
+# time budget (seconds) per tool call for the retrieval of additional symbol information
+# such as docstrings or parameter information.
+# This overrides the corresponding setting in the global configuration; see the documentation there.
+# If null or missing, use the setting from the global configuration.
+symbol_info_budget:
+
+# The language backend to use for this project.
+# If not set, the global setting from serena_config.yml is used.
+# Valid values: LSP, JetBrains
+# Note: the backend is fixed at startup. If a project with a different backend
+# is activated post-init, an error will be returned.
+language_backend:
+
+# line ending convention to use when writing source files.
+# Possible values: unset (use global setting), "lf", "crlf", or "native" (platform default)
+# This does not affect Serena's own files (e.g. memories and configuration files), which always use native line endings.
+line_ending:
+
+# list of regex patterns which, when matched, mark a memory entry as read‑only.
+# Extends the list from the global configuration, merging the two lists.
+read_only_memory_patterns: []
+
+# the encoding used by text files in the project
+# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
+encoding: utf-8
+
+
+# list of languages for which language servers are started; choose from:
+#   al                  bash                clojure             cpp                 csharp
+#   csharp_omnisharp    dart                elixir              elm                 erlang
+#   fortran             fsharp              go                  groovy              haskell
+#   java                julia               kotlin              lua                 markdown
+#   matlab              nix                 pascal              perl                php
+#   php_phpactor        powershell          python              python_jedi         r
+#   rego                ruby                ruby_solargraph     rust                scala
+#   swift               terraform           toml                typescript          typescript_vts
+#   vue                 yaml                zig
+#   (This list may be outdated. For the current list, see values of Language enum here:
+#   https://github.com/oraios/serena/blob/main/src/solidlsp/ls_config.py
+#   For some languages, there are alternative language servers, e.g. csharp_omnisharp, ruby_solargraph.)
+# Note:
+#   - For C, use cpp
+#   - For JavaScript, use typescript
+#   - For Free Pascal/Lazarus, use pascal
+# Special requirements:
+#   Some languages require additional setup/installations.
+#   See here for details: https://oraios.github.io/serena/01-about/020_programming-languages.html#language-servers
+# When using multiple languages, the first language server that supports a given file will be used for that file.
+# The first language is the default language and the respective language server will be used as a fallback.
+# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
+languages:
+- typescript
+
+# list of regex patterns for memories to completely ignore.
+# Matching memories will not appear in list_memories or activate_project output
+# and cannot be accessed via read_memory or write_memory.
+# To access ignored memory files, use the read_file tool on the raw file path.
+# Extends the list from the global configuration, merging the two lists.
+# Example: ["_archive/.*", "_episodes/.*"]
+ignored_memory_patterns: []
+
+# advanced configuration option allowing to configure language server-specific options.
+# Maps the language key to the options.
+# Have a look at the docstring of the constructors of the LS implementations within solidlsp (e.g., for C# or PHP) to see which options are available.
+# No documentation on options means no options are available.
+ls_specific_settings: {}

apps/web/messages/en_US.json

@@ -141,7 +141,28 @@
       "please-choose-pet": "Select a pet to merge. The selected pet will be consumed and disappear."
     },
     "laboratory": "Laboratory",
-    "maximum-pet-count-error": "You can have a maximum of 30 pets."
+    "maximum-pet-count-error": "You can have a maximum of 30 pets.",
+    "Filter": {
+      "search-placeholder": "Search pet name",
+      "grade": "Grade",
+      "tier": "Tier",
+      "visibility": "Status",
+      "sort": "Sort",
+      "filter-all": "All",
+      "filter-grade-collaborator": "Collab",
+      "filter-grade-default": "Default",
+      "filter-grade-evolution": "Evolution",
+      "filter-visible": "Visible",
+      "filter-hidden": "Hidden",
+      "evolvable-only": "Evolvable",
+      "sort-grade": "By Grade",
+      "sort-level-desc": "Level (High)",
+      "sort-level-asc": "Level (Low)",
+      "sort-tier": "By Rarity",
+      "sort-name": "By Name",
+      "reset": "Reset filters",
+      "no-results": "No pets match the criteria."
+    }
   },
   "Event": {
     "event-end": "Event has ended.",
@@ -245,6 +266,8 @@
   "Error": {
     "global-error-message": "Something went wrong 😭",
     "want-to-report-error": "The gitanimals development team is currently tracking this error.\nIf you have a moment, we would greatly appreciate it if you could report the circumstances that led to this error.",
-    "report-error-button": "Report Error"
+    "report-error-button": "Report Error",
+    "ranking-error-title": "Unable to load ranking information",
+    "ranking-error-description": "Please try again later"
   }
 }

apps/web/messages/ko_KR.json

@@ -142,7 +142,28 @@
       "please-choose-pet": "합치기에 사용할 펫을 선택해주세요. 합친 펫은 사라집니다."
     },
     "laboratory": "실험실",
-    "maximum-pet-count-error": "펫은 최대 30마리까지 가능합니다."
+    "maximum-pet-count-error": "펫은 최대 30마리까지 가능합니다.",
+    "Filter": {
+      "search-placeholder": "펫 이름 검색",
+      "grade": "등급",
+      "tier": "티어",
+      "visibility": "상태",
+      "sort": "정렬",
+      "filter-all": "전체",
+      "filter-grade-collaborator": "콜라보",
+      "filter-grade-default": "기본",
+      "filter-grade-evolution": "진화",
+      "filter-visible": "표시중",
+      "filter-hidden": "숨김",
+      "evolvable-only": "진화 가능",
+      "sort-grade": "등급순",
+      "sort-level-desc": "레벨 높은순",
+      "sort-level-asc": "레벨 낮은순",
+      "sort-tier": "희귀도순",
+      "sort-name": "이름순",
+      "reset": "필터 초기화",
+      "no-results": "조건에 맞는 펫이 없습니다."
+    }
   },
   "Event": {
     "event-end": "이벤트가 종료되었습니다.",
@@ -246,6 +267,8 @@
   "Error": {
     "global-error-message": "문제가 발생했어요 😭",
     "want-to-report-error": "gitanimals 개발팀은 현재 이 오류를 추적하고 있습니다.\n시간이 되신다면 이 오류가 발생한 상황을 보고해주시면 감사하겠습니다.",
-    "report-error-button": "오류 보고하기"
+    "report-error-button": "오류 보고하기",
+    "ranking-error-title": "랭킹 정보를 불러올 수 없습니다",
+    "ranking-error-description": "잠시 후 다시 시도해주세요"
   }
 }

apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx

@@ -1,17 +1,18 @@
 'use client';
 
-import { memo } from 'react';
+import { useTranslations } from 'next-intl';
 import { css, cx } from '_panda/css';
 import type { Persona } from '@gitanimals/api';
 import { userQueries } from '@gitanimals/react-query';
-import { LevelBanner } from '@gitanimals/ui-panda';
 import { BannerSkeletonList } from '@gitanimals/ui-panda/src/components/Banner/Banner';
 import { wrap } from '@suspensive/react';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
+import { MemoizedLevelPersonaItem } from '@/components/PersonaItem';
+import { PersonaListToolbar } from '@/components/PersonaListToolbar';
+import { usePersonaListFilter } from '@/hooks/persona/usePersonaListFilter';
 import { customScrollStyle } from '@/styles/scrollStyle';
 import { useClientUser } from '@/utils/clientAuth';
-import { getPersonaImage } from '@/utils/image';
 
 const flexOverflowStyle = cx(
   css({
@@ -47,20 +48,37 @@ export const SelectPersonaList = wrap
   .on(function SelectPersonaList({ selectPersona, onSelectPersona }: SelectPersonaListProps) {
     const { name } = useClientUser();
     const { data } = useSuspenseQuery(userQueries.allPersonasOptions(name));
+    const t = useTranslations('Mypage.Filter');
+
+    const { filteredList, filterState, updateFilter, resetFilter, isFiltering, counts } = usePersonaListFilter(
+      data.personas,
+    );
 
-    // TODO: 정렬
     return (
       <section className={sectionStyle}>
-        <div className={flexOverflowStyle}>
-          {data.personas.map((persona) => (
-            <MemoizedPersonaItem
-              key={persona.id}
-              persona={persona}
-              isSelected={selectPersona.includes(persona.id)}
-              onClick={() => onSelectPersona(persona)}
-            />
-          ))}
-        </div>
+        <PersonaListToolbar
+          filterState={filterState}
+          onFilterChange={updateFilter}
+          onReset={resetFilter}
+          counts={counts}
+          isFiltering={isFiltering}
+          showSearch
+        />
+        {filteredList.length === 0 ? (
+          <p className={emptyStyle}>{t('no-results')}</p>
+        ) : (
+          <div className={flexOverflowStyle}>
+            {filteredList.map((persona) => (
+              <MemoizedLevelPersonaItem
+                key={persona.id}
+                persona={persona}
+                isSelected={selectPersona.includes(persona.id)}
+                onClick={() => onSelectPersona(persona)}
+                size="small"
+              />
+            ))}
+          </div>
+        )}
       </section>
     );
   });
@@ -74,25 +92,9 @@ const sectionStyle = css({
   gap: '16px',
 });
 
-interface PersonaItemProps {
-  persona: Persona;
-  isSelected: boolean;
-  onClick: () => void;
-}
-
-function PersonaItem({ persona, isSelected, onClick }: PersonaItemProps) {
-  return (
-    <button onClick={onClick} className={css({ outline: 'none', bg: 'transparent' })}>
-      <LevelBanner
-        image={getPersonaImage(persona.type)}
-        status={isSelected ? 'selected' : 'default'}
-        level={Number(persona.level)}
-        size="small"
-      />
-    </button>
-  );
-}
-
-const MemoizedPersonaItem = memo(PersonaItem, (prev, next) => {
-  return prev.isSelected === next.isSelected && prev.persona.level === next.persona.level;
+const emptyStyle = css({
+  textStyle: 'glyph14.regular',
+  color: 'white.white_50',
+  textAlign: 'center',
+  padding: '24px 0',
 });

apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx

@@ -1,75 +1,4 @@
-import type { ComponentProps } from 'react';
-import { memo } from 'react';
-import { css, cx } from '_panda/css';
-import type { Persona } from '@gitanimals/api';
-import { Banner, LevelBanner } from '@gitanimals/ui-panda';
-
-import { getPersonaImage } from '@/utils/image';
-
-interface PersonaItemProps {
-  persona: Persona;
-  isSelected: boolean;
-  onClick: () => void;
-  size?: ComponentProps<typeof LevelBanner>['size'];
-  className?: string;
-}
-
-function PersonaItem({ persona, isSelected, onClick, size = 'full', className }: PersonaItemProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={css({ outline: 'none', bg: 'transparent', width: '100%', height: '100%' })}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onClick();
-        }
-      }}
-      tabIndex={0}
-    >
-      <LevelBanner
-        image={getPersonaImage(persona.type)}
-        status={isSelected ? 'selected' : 'default'}
-        level={Number(persona.level)}
-        className={cx(css({ width: '100%', height: '100%' }), className)}
-        size={size}
-      />
-    </button>
-  );
-}
-
-function PersonaBannerItem({ persona, isSelected, onClick, size = 'full', className }: PersonaItemProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={css({ outline: 'none', bg: 'transparent', width: '100%', height: '100%' })}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onClick();
-        }
-      }}
-      tabIndex={0}
-    >
-      <Banner
-        image={getPersonaImage(persona.type)}
-        status={isSelected ? 'selected' : 'default'}
-        className={cx(css({ width: '100%', height: '100%' }), className)}
-        size={size}
-      />
-    </button>
-  );
-}
-
-export const MemoizedPersonaItem = memo(PersonaItem, (prev, next) => {
-  return (
-    prev.isSelected === next.isSelected &&
-    prev.persona.id === next.persona.id &&
-    prev.persona.level === next.persona.level &&
-    prev.onClick === next.onClick
-  );
-});
-
-export const MemoizedPersonaBannerItem = memo(PersonaBannerItem, (prev, next) => {
-  return prev.isSelected === next.isSelected && prev.persona.level === next.persona.level;
-});
+export {
+  MemoizedLevelPersonaItem as MemoizedPersonaItem,
+  MemoizedBannerPersonaItem as MemoizedPersonaBannerItem,
+} from '@/components/PersonaItem';