Fix: 리스트 생성,수정 오류 수정

src/app/(home)/_components/TopicsRecommendation.tsx

@@ -49,7 +49,8 @@ function TopicItem({ title }: TopicItemProps) {
   const router = useRouter();
 
   const handleTopicClick = (title: string) => {
-    router.push(`/list/create?title=${title}`);
+    const encodedTitle = encodeURIComponent(title);
+    router.push(`/list/create?title=${encodedTitle}`);
   };
 
   return (

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

@@ -34,8 +34,21 @@ export default function EditPage() {
   const handleNext = () => setStep((prev) => prev + 1);
   const handleBack = () => setStep((prev) => prev - 1);
 
-  /** React Hook Form */
-  //-- 초기세팅
+  //--- 기존 데이터 불러오기
+  // 카테고리 목록
+  const { data: categories } = useQuery<CategoryType[]>({
+    queryKey: [QUERY_KEYS.getCategories],
+    queryFn: () => getCategories(),
+  });
+
+  //기존 리스트 데이터
+  const { data: listDetailData } = useQuery<ListDetailType>({
+    queryKey: [QUERY_KEYS.getListDetail, param?.listId],
+    queryFn: () => getListDetail(Number(param?.listId)),
+  });
+
+  /** 초기 세팅 */
+  //-- React-Hook-Form
   const methods = useForm<ListCreateType>({
     mode: 'onChange',
     defaultValues: {
@@ -51,21 +64,8 @@ export default function EditPage() {
     },
   });
 
-  //--- 기존 데이터 불러오기
-  //기존 리스트 데이터
-  const { data: listDetailData } = useQuery<ListDetailType>({
-    queryKey: [QUERY_KEYS.getListDetail, param?.listId],
-    queryFn: () => getListDetail(Number(param?.listId)),
-  });
-
-  // 카테고리 목록
-  const { data: categories } = useQuery<CategoryType[]>({
-    queryKey: [QUERY_KEYS.getCategories],
-    queryFn: () => getCategories(),
-  });
-
-  //데이터 채워넣기
-  useEffect(() => {
+  //기존 데이터로 채우기
+  const initializeFormValues = () => {
     if (listDetailData) {
       methods.reset({
         category: categories?.find((category) => category.korName === listDetailData.categoryKorName)?.engName,
@@ -76,21 +76,22 @@ export default function EditPage() {
         isPublic: listDetailData.isPublic,
         backgroundPalette: listDetailData.backgroundPalette,
         backgroundColor: listDetailData.backgroundColor,
-        items: listDetailData.items.map(({ id, rank, title, comment, link, imageUrl }) => {
-          return {
-            rank: rank,
-            id: id,
-            title: title,
-            comment: comment ? comment : '',
-            link: link ? link : '',
-            imageUrl: typeof imageUrl === 'string' ? imageUrl : '',
-          };
-        }),
+        items: listDetailData.items.map(({ id, rank, title, comment, link, imageUrl }) => ({
+          rank,
+          id,
+          title,
+          comment: comment || '',
+          link: link || '',
+          imageUrl: typeof imageUrl === 'string' ? imageUrl : '',
+        })),
       });
     }
+  };
 
-    methods.trigger(['title']);
-  }, [listDetailData, categories, methods, user.id]);
+  //데이터 채워넣기
+  useEffect(() => {
+    initializeFormValues();
+  }, [listDetailData, categories, user.id]);
 
   /** Request 보내기 */
   //--- 포맷 맞추기

src/app/list/create/_components/ItemAccordion.css.ts

@@ -20,30 +20,34 @@ export const header = style({
   color: vars.color.red,
 });
 
-export const rank = style([
+const rankBadge = style([
   fonts.Label,
   {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    width: '4.2rem',
+    minWidth: '4.2rem',
     height: '2.6rem',
 
     color: vars.color.blue,
     backgroundColor: vars.color.lightblue,
     borderRadius: '1.5rem',
+
+    whiteSpace: 'nowrap',
   },
 ]);
 
-export const variantRank = styleVariants({
-  default: [rank],
-  first: [rank, { color: vars.color.white, backgroundColor: vars.color.blue }],
+export const variantRankBadge = styleVariants({
+  default: [rankBadge],
+  first: [rankBadge, { color: vars.color.white, backgroundColor: vars.color.blue }],
 });
 
 export const titleInput = style([
   fonts.BodyBold,
   {
     flexGrow: 1,
+    minWidth: '0',
+
     color: vars.color.bluegray10,
     '::placeholder': { color: vars.color.bluegray6 },
   },
@@ -57,13 +61,15 @@ export const accordionIconWrapper = style({
 
   width: '2rem',
   height: '2.6rem',
+  flexShrink: 0,
 });
 
 //콘텐트
 export const hr = style({
   width: '100%',
-  strokeWidth: '0.4rem ',
-  stroke: vars.color.bluegray8,
+  height: '0.4px',
+  backgroundColor: vars.color.bluegray6,
+  border: 0,
 });
 
 export const content = style({

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

@@ -94,7 +94,7 @@ export default function ItemAccordion({
     <div className={styles.accordion}>
       <div className={styles.header}>
         <Image src={'/icons/dnd.svg'} width={16} height={13} alt="drag and drop" />
-        <div className={rank === 1 ? styles.variantRank.first : styles.variantRank.default}>{rank}위</div>
+        <div className={rank === 1 ? styles.variantRankBadge.first : styles.variantRankBadge.default}>{rank}위</div>
         <input
           {...titleRegister}
           className={styles.titleInput}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useQuery } from '@tanstack/react-query';
 
@@ -31,6 +31,7 @@ interface StepOneProps {
 export default function StepOne({ onNextClick, type }: StepOneProps) {
   const { language } = useLanguage();
   const router = useRouter();
+  const searchParams = useSearchParams();
 
   /** 데이터 가져오기 */
   //--- 카테고리 가져오기
@@ -65,10 +66,22 @@ export default function StepOne({ onNextClick, type }: StepOneProps) {
   useEffect(() => {
     //카테고리 규칙 추가
     register('category', listCategoryRules);
-    //페이지 로드 시  'title', 'category'필 드 유효성 검사 강제 실행
+    //페이지 로드 시  'title', 'category'필드 유효성 검사 강제 실행
     trigger(['title', 'category']);
   }, [trigger, register, watchTitle]);
 
+  useEffect(() => {
+    //---주소에서 title, category 가져오기
+    const title = searchParams?.get('title');
+    const category = searchParams?.get('category');
+    /**TODO: 리스트 상세 '이 타이틀로 리스트 생성에도 encode단계 넣어주기 */
+
+    if (title) setValue('title', title);
+    if (category) {
+      setValue('category', categories?.find((c) => c.korName === category)?.engName);
+    }
+  }, [searchParams, categories]);
+
   return (
     <div className={styles.page}>
       <Header

src/app/topics/page.tsx

@@ -41,7 +41,9 @@ export default function TopicPage() {
   });
 
   const handleTopicClick = (topic: TopicType) => {
-    router.push(`/list/create?title=${topic.title}&category=${topic.categoryKorName}`);
+    const encodedTitle = encodeURIComponent(topic.title);
+    const encodedCategory = encodeURIComponent(topic.categoryKorName);
+    router.push(`/list/create?title=${encodedTitle}&category=${encodedCategory}`);
   };
 
   const handleBottomSheetClose = () => {