Feat: 라벨, 카테고리 클릭시 검색페이지로 이동

src/app/collection/page.tsx

@@ -69,23 +69,23 @@ export default function CollectionPage() {
       <div className={styles.categoryFolders}>
         {data &&
           data.map((category) => (
-            <div key={category.codeValue} className={styles.categoryContainer}>
+            <div key={category.code} className={styles.categoryContainer}>
               <div
                 className={styles.categoryFolder}
                 onClick={() => {
-                  handleCategoryClick(category.nameValue);
+                  handleCategoryClick(category.engName);
                 }}
               >
                 <Image
                   className={styles.categoryIcon}
                   src={category?.categoryImageUrl ?? ''}
                   width={50}
                   height={50}
-                  alt={`${category.korNameValue} ${categoriesLocale[language].folder}`}
+                  alt={`${category.korName} ${categoriesLocale[language].folder}`}
                 />
-                <div className={styles.folderIcon}>{codeToFolderIcon(category.codeValue, language)}</div>
+                <div className={styles.folderIcon}>{codeToFolderIcon(category.code, language)}</div>
               </div>
-              <p className={styles.categoryLabel}>{language === 'ko' ? category.korNameValue : category.nameValue}</p>
+              <p className={styles.categoryLabel}>{language === 'ko' ? category.korName : category.engName}</p>
             </div>
           ))}
       </div>

src/app/list/[listId]/_components/ListDetailInner/index.tsx

@@ -33,7 +33,7 @@ function ListDetailInner({ data, listId }: ListDetailInnerProps) {
     listId: listId,
     ownerId: data?.ownerId,
     items: listData,
-    category: data?.category,
+    category: data?.categoryKorName,
     title: data?.title,
     description: data?.description,
     collaborators: data?.collaborators,

src/app/list/[listId]/_components/ListDetailOuter/ListInformation.css.ts

@@ -34,6 +34,7 @@ export const categoryWrapper = style({
 
 export const labelWrapper = style({
   marginRight: '8px',
+  cursor: 'pointer',
 });
 
 export const listTitle = style([

src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { MouseEvent } from 'react';
 import Image from 'next/image';
 import { useQuery } from '@tanstack/react-query';
 import { useParams, useRouter } from 'next/navigation';
@@ -77,6 +78,18 @@ function ListInformation() {
     return null;
   }
 
+  const handleCategorySearch = (categoryEngName: string) => {
+    router.push(`/search?category=${categoryEngName}`);
+  };
+
+  const handleLabelSearch = (e: MouseEvent<HTMLDivElement>) => {
+    const labelElement = e.currentTarget.querySelector('div');
+    const labelText = labelElement?.textContent;
+    if (labelText) {
+      router.push(`/search?keyword=${labelText}`);
+    }
+  };
+
   return (
     <>
       {isOn && (
@@ -105,12 +118,12 @@ function ListInformation() {
         <>
           <div className={styles.wrapper}>
             <div className={styles.categoryWrapper}>
-              <div className={styles.labelWrapper}>
-                <Label colorType="blue">{list?.category}</Label>
+              <div className={styles.labelWrapper} onClick={() => handleCategorySearch(list?.categoryEngName)}>
+                <Label colorType="blue">{list?.categoryKorName}</Label>
               </div>
               {list?.labels.map((item: LabelType) => {
                 return (
-                  <div className={styles.labelWrapper} key={item.name}>
+                  <div className={styles.labelWrapper} key={item.name} onClick={handleLabelSearch}>
                     <Label colorType="skyblue">{`${item.name}`}</Label>
                   </div>
                 );

src/app/list/[listId]/edit/page.tsx

@@ -118,7 +118,7 @@ export default function EditPage() {
   useEffect(() => {
     if (listDetailData) {
       methods.reset({
-        category: categories?.find((c) => c.korNameValue === listDetailData.category)?.nameValue || 'culture',
+        category: categories?.find((c) => c.korName === listDetailData.categoryKorName)?.engName || 'culture',
         labels: listDetailData.labels.map((obj) => obj.name),
         collaboratorIds: listDetailData.collaborators.filter((c) => c.id !== user.id).map((c) => c.id),
         title: listDetailData.title,

src/app/list/create/_components/CreateList.tsx

@@ -81,7 +81,7 @@ function CreateList({ onNextClick, type }: CreateListProps) {
     const handleQueryParams = () => {
       if (isTemplateCreation) {
         setValue('title', searchParams?.get('title'));
-        const c = categories?.find((c) => c.korNameValue === searchParams?.get('category'))?.nameValue;
+        const c = categories?.find((c) => c.korName === searchParams?.get('category'))?.engName;
         setValue('category', c);
       }
     };
@@ -143,9 +143,9 @@ function CreateList({ onNextClick, type }: CreateListProps) {
         {/* 카테고리 */}
         <Section title={listLocale[language].category} isRequired={true}>
           <ButtonSelector
-            list={categories?.filter((category: CategoryType) => category.codeValue !== '0') || []}
+            list={categories?.filter((category: CategoryType) => category.code !== '0') || []}
             onClick={(item: CategoryType) => {
-              setValue('category', item.nameValue);
+              setValue('category', item.engName);
             }}
             defaultValue={category}
           />

src/app/list/create/_components/list/ButtonSelector.tsx

@@ -28,14 +28,14 @@ function ButtonSelector({ list, onClick, defaultValue }: ButtonSelectorProps) {
     <div className={styles.container}>
       {list.map((item) => (
         <button
-          key={item.codeValue}
-          className={`${styles.button} ${item.nameValue.toLocaleLowerCase() === selectedButton?.toLocaleLowerCase() ? styles.buttonActive : ''}`}
+          key={item.code}
+          className={`${styles.button} ${item.engName.toLocaleLowerCase() === selectedButton?.toLocaleLowerCase() ? styles.buttonActive : ''}`}
           onClick={() => {
             onClick(item);
-            setSelectedButton(item.nameValue);
+            setSelectedButton(item.engName);
           }}
         >
-          {item.korNameValue}
+          {item.korName}
         </button>
       ))}
     </div>

src/app/search/_components/CategoryArea.tsx

@@ -32,18 +32,16 @@ function CategoryArea({ onClick }: { onClick: MouseEventHandler }) {
         ? Array.from({ length: 6 }).map((_, index) => <CategoryAreaSkeleton key={index} />)
         : data &&
           data.map((category) => (
-            <div className={styles.category} key={category.codeValue} onClick={onClick} data-value={category.nameValue}>
+            <div className={styles.category} key={category.code} onClick={onClick} data-value={category.engName}>
               <Image
-                className={categoryValue === category.nameValue ? styles.selectedCategoryImage : styles.categoryImage}
+                className={categoryValue === category.engName ? styles.selectedCategoryImage : styles.categoryImage}
                 src={category.categoryImageUrl ?? ''}
-                alt={category.korNameValue}
+                alt={category.korName}
                 width="60"
                 height="60"
               />
-              <div className={styles.categoryText}>
-                {language === 'ko' ? category.korNameValue : category.nameValue}
-              </div>
-              {categoryValue === category.nameValue && (
+              <div className={styles.categoryText}>{language === 'ko' ? category.korName : category.engName}</div>
+              {categoryValue === category.engName && (
                 <div className={styles.selectedIconWrapper}>
                   <CheckIcon className={styles.selectedIcon} />
                 </div>

src/app/start-listy/_components/ChoiceCategory.tsx

@@ -11,7 +11,7 @@ import { startListyLocale } from '@/app/start-listy/locale';
 import { useLanguage } from '@/store/useLanguage';
 
 interface CategoryProps {
-  handleChangeCategory: (category: Omit<CategoryType, 'codeValue'>) => void;
+  handleChangeCategory: (category: Omit<CategoryType, 'code'>) => void;
 }
 
 export default function ChoiceCategory({ handleChangeCategory }: CategoryProps) {
@@ -23,27 +23,27 @@ export default function ChoiceCategory({ handleChangeCategory }: CategoryProps)
     queryFn: getCategories,
   });
 
-  const categories = data ? data?.filter((category) => category.korNameValue !== '전체') : [];
+  const categories = data ? data?.filter((category) => category.korName !== '전체') : [];
 
   const onClickChangeCategory = (e: MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       return;
     }
 
     const targetId = (e.target as HTMLButtonElement).id;
-    const category = data?.find((category) => category.nameValue === targetId);
+    const category = data?.find((category) => category.engName === targetId);
 
     if (category) {
       handleChangeCategory({
-        nameValue: category.nameValue,
-        korNameValue: category.korNameValue,
+        engName: category.engName,
+        korName: category.korName,
       });
-      setValue('category', category.nameValue);
+      setValue('category', category.engName);
     } else {
       console.log(startListyLocale[language].notFountCategory);
       handleChangeCategory({
-        nameValue: '',
-        korNameValue: '',
+        engName: '',
+        korName: '',
       });
     }
   };
@@ -54,16 +54,16 @@ export default function ChoiceCategory({ handleChangeCategory }: CategoryProps)
       <div onClick={onClickChangeCategory} className={styles.container}>
         {categories.map((category) => (
           <button
-            key={category.codeValue}
-            id={category.nameValue}
+            key={category.code}
+            id={category.engName}
             type="button"
             className={
-              category.nameValue === getValues('category')
-                ? `${styles.variants[`${category.nameValue}Button`]} ${styles.selected}`
-                : styles.variants[`${category.nameValue}Button`]
+              category.engName === getValues('category')
+                ? `${styles.variants[`${category.engName}Button`]} ${styles.selected}`
+                : styles.variants[`${category.engName}Button`]
             }
           >
-            {category.korNameValue}
+            {category.korName}
           </button>
         ))}
       </div>

src/app/start-listy/_components/CreateListStep.tsx

@@ -30,8 +30,8 @@ export default function CreateListStep({ nickname }: CreateListStepProps) {
   const router = useRouter();
   const [stepIndex, setStepIndex] = useState(0);
   const [selectedCategory, setSelectedCategory] = useState({
-    nameValue: '',
-    korNameValue: '',
+    engName: '',
+    korName: '',
   });
   const [isLoading, setIsLoading] = useState(false);
 
@@ -69,10 +69,10 @@ export default function CreateListStep({ nickname }: CreateListStepProps) {
     }
   };
 
-  const handleChangeCategory = (category: Omit<CategoryType, 'codeValue'>) => {
+  const handleChangeCategory = (category: Omit<CategoryType, 'code'>) => {
     setSelectedCategory({
-      nameValue: category.nameValue,
-      korNameValue: category.korNameValue,
+      engName: category.engName,
+      korName: category.korName,
     });
   };
 
@@ -112,7 +112,7 @@ export default function CreateListStep({ nickname }: CreateListStepProps) {
             <div className={styles.step}>
               <div className={styles.barContainer}>
                 <span className={styles.bar.default}></span>
-                <span className={selectedCategory.nameValue ? styles.statusBar.divide : styles.statusBar.zero}></span>
+                <span className={selectedCategory.engName ? styles.statusBar.divide : styles.statusBar.zero}></span>
               </div>
               <p className={styles.stepText}>step2</p>
             </div>
@@ -134,8 +134,8 @@ export default function CreateListStep({ nickname }: CreateListStepProps) {
               <button
                 type="button"
                 onClick={handleMoveToStep('next')}
-                className={selectedCategory.nameValue ? styles.variant.active : styles.variant.default}
-                disabled={!selectedCategory.nameValue}
+                className={selectedCategory.engName ? styles.variant.active : styles.variant.default}
+                disabled={!selectedCategory.engName}
               >
                 {startListyLocale[language].next}
               </button>

src/app/start-listy/_components/RegisterItems.tsx

@@ -10,7 +10,7 @@ import { ListCreateType } from '@/lib/types/listType';
 import { useLanguage } from '@/store/useLanguage';
 
 interface ItemsStepProps {
-  selectedCategory: Omit<CategoryType, 'codeValue'>;
+  selectedCategory: Omit<CategoryType, 'code'>;
 }
 
 export default function RegisterItems({ selectedCategory }: ItemsStepProps) {
@@ -29,8 +29,8 @@ export default function RegisterItems({ selectedCategory }: ItemsStepProps) {
         {language === 'ko' ? '아이템을 적어주세요.' : 'items to be included in the list'}
       </label>
       <div className={stylesList.container}>
-        <button className={stylesCategory.variants[`${selectedCategory.nameValue}Button`]}>
-          {selectedCategory.korNameValue}
+        <button className={stylesCategory.variants[`${selectedCategory.engName}Button`]}>
+          {selectedCategory.korName}
         </button>
         <p className={stylesList.title}>{getValues('title')}</p>
         <div className={stylesList.items}>

src/app/start-listy/_components/RegisterListTitle.tsx

@@ -11,7 +11,7 @@ import { startListyLocale } from '@/app/start-listy/locale';
 import { useLanguage } from '@/store/useLanguage';
 
 interface ListTitleStepProps {
-  selectedCategory: Omit<CategoryType, 'codeValue'>;
+  selectedCategory: Omit<CategoryType, 'code'>;
 }
 
 export default function RegisterListTitle({ selectedCategory }: ListTitleStepProps) {
@@ -48,8 +48,8 @@ export default function RegisterListTitle({ selectedCategory }: ListTitleStepPro
         <p className={styles.errorMessage}>{errors.title?.message}</p>
       </div>
       <div className={stylesList.container}>
-        <button className={stylesCategory.variants[`${selectedCategory.nameValue}Button`]}>
-          {selectedCategory.korNameValue}
+        <button className={stylesCategory.variants[`${selectedCategory.engName}Button`]}>
+          {selectedCategory.korName}
         </button>
         <p className={stylesList.title}>{watchForm}</p>
       </div>

src/app/user/[userId]/_components/Categories.tsx

@@ -34,11 +34,11 @@ export default function Categories({ handleFetchListsOnCategory, selectedCategor
       ) : (
         data?.map((category) => (
           <button
-            key={category.codeValue}
-            onClick={handleChangeCategory(category.nameValue)}
-            className={`${styles.button} ${category.nameValue === selectedCategory ? styles.variant : ''}`}
+            key={category.code}
+            onClick={handleChangeCategory(category.engName)}
+            className={`${styles.button} ${category.engName === selectedCategory ? styles.variant : ''}`}
           >
-            {category.korNameValue}
+            {category.korName}
           </button>
         ))
       )}

src/lib/types/categoriesType.ts

@@ -1,6 +1,6 @@
 export interface CategoryType {
-  codeValue: string;
-  nameValue: string;
-  korNameValue: string;
+  code: string; // 기존 : codeValue
+  engName: string; // 기존 : nameValue
+  korName: string; // 기존 : korNameValue
   categoryImageUrl?: string;
 }

src/lib/types/listType.ts

@@ -95,7 +95,8 @@ export interface LabelType {
 
 export interface ListDetailType {
   id?: number;
-  category: string;
+  categoryKorName: string; // 기존 : category
+  categoryEngName: string; // 추가됨
   labels: LabelType[];
   title: string;
   description: string;