Feature: 리스트 생성 Ver3.0 #273

seoyoung-min · 2024-11-03T23:03:21Z

개요

ver3.0 리스트 생성 구현했습니다.

작업 사항

참고 사항 (optional)

무거운 mui 삭제를 위해, 기존에 mui 이용하던 아코디언UI를 직접 구현했습니다!
스켈레톤 교체만 다 끝나면 mui 라이브러리 지울 수 있을 것 같아요 >0<// (각 페이지에서 스켈레톤 mui 대신 Skeleton 컴포넌트로)
배경색 선택시 흰색 체크로 디자인되어 있었는데, 파스텔노랑이나 흰색 배경의 경우 아예 보이지 않아 deepblue10 이용했습니다.
@ParkSohyunee @kanglocal @Eugene-A-01 @Nahyun-Kang dnd 라이브러리를 교체했습니다. 기존에 이용하던 react-beautiful-dnd는 더 이상 관리가 되지 않고, 이로 인한 콘솔에러가 발생했습니다. 동일하게 사용할 수 있는 패키지인 '@hello-pangea/dnd'를 사용했습니다.
- 선택 이유: dnd 라이브러리 중 가장 잘 관리되는 편
- 링크: https://www.npmjs.com/package/@hello-pangea/dnd
  - 주의: 이로 인해 패키지 삭제, 설치, yarn lock 수정이 있었습니다.
  PULL 받으시고 yarn install 실행 부탁드립니다!

스크린샷

리뷰어에게

@Eugene-A-01 기존에 주석으로 처리해주신 회색들이 있는데, 아직 배경색이 어떻게 쓰일지 모르고, 어두운 배경색에 대한 대응이 마련되지 않아서 파란빛 도는 밝은 회색으로 3개 더 추가했습니다!
늦어져서 죄송합니다,, 계속 하는데 속도가 더디네요ㅠㅠ

vercel · 2024-11-03T23:03:25Z

@seoyoung-min is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel.

A member of the Team first needs to authorize it.

ParkSohyunee

서영님, ver3.0의 리스트 생성페이지 디자인과 코드 모두 잘 확인하였습니다. 서영님의 꼼꼼한 주석처리 덕분에 이해가 쏙쏙 빠르게 되었습니다.✨🥹 많은 작업 해주셔서 감사합니다. LGTM💕
이후 수정기능 등 추가 작업도 확인해보도록 하겠습니다.🤍

ParkSohyunee · 2024-11-05T00:42:24Z

src/styles/Color.ts

+  GRAY_SOFT_BLUE: '#E2E7EB', //추가
+  GRAY_LIGHT_BLUE: '#C8CFD5', //추가
+  GRAY_MEDIUM_BLUE: '#ACBAC3', //추가
+  NEON_WHITE: '#FFFFFF', //LISTY_WHITE
+  NEON_YELLOW: '#FFF6A5', //LISTY_YELLOW


리스티색상 이름 변경 및 새로 추가한 컬러들도 잘 어울리는 것 같아요🤍

ParkSohyunee · 2024-11-05T00:46:36Z

src/components/Header/Header.tsx


-      <div className={`${styles.flexChild} ${styles.rightChild}`}>{right}</div>
+      {right === null ? <></> : <div className={`${styles.flexChild} ${styles.rightChild}`}>{right}</div>}
    </div>


서영님 이 부분 right === null ? <></> 이전 PR에서 지워진 코드로 알고있는데 잘못 들어간 것 같아요. 👀

헉 그러게요 그대로 남아있네요ㅠㅠ 발견해주셔서 감사합니다!!

ParkSohyunee · 2024-11-05T01:00:55Z

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

+  //--- 카테고리 가져오기
+  const { data: categories } = useQuery<CategoryType[]>({
+    queryKey: [QUERY_KEYS.getCategories],
+    queryFn: getCategories,
+  });


카테고리는 자주 변하는 데이터가 아니어서 staleTime 옵션을 넣어주면 더 좋을 것 같아요!

//--- 카테고리 가져오기 const { data: categories } = useQuery<CategoryType[]>({ queryKey: [QUERY_KEYS.getCategories], queryFn: getCategories, staleTime: Infinity, // 추가 });

헉 안그래도 카테고리 데이터 로딩에 시간이 걸려서, 그냥 프론트에서 박아서 처리할까 고민했었는데 staleTime 옵션이 있었군요! 리액트쿼리의 최고봉 소현님 너무 감사합니다 🙇‍♀️🙇‍♀️

ParkSohyunee · 2024-11-05T01:09:55Z

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

+                <button
+                  className={selectedCategory === category.engName ? styles.selectedChip : styles.chip}
+                  key={category.code}
+                  onClick={() => {
+                    handleSelectCategory(category.engName);


(의견) chip의 느낌이 컬러칩, 팔레트칩으로 생각되기 때문에 좀 더 이름을 분명하게 수정해도 좋을 것 같아요.
ex) filterChip 또는 categoryChip styles.selectedFilterChip : styles.filterChip

좋은 의견 너무 감사드립니다! 반영하여 커밋 남기겠습니다~!!

ParkSohyunee · 2024-11-05T01:36:56Z

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

+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    //자음모음 결합 중일 경우 return
+    if (e.nativeEvent.isComposing) {
+      return;
+    }


서영님 한글에서 IME composition 문제를 해결하기 위해 nativeEvent 프로퍼티 사용방법뿐만 아니라 리액트에서 활용하는 방법도 좋을 것 같아서 참고하면 좋을 것 같습니다.

리액트에서 제공하는 composition 이벤트 핸들러와 useState를 사용하는 방법 (+. keydown 키보드 이벤트)
CompositionEvent handler function

const [isComposing, setIsComposing] = useState(false) ... if (isComposing) { return } ... onKeyDown={onSubmit} onCompositionStart={() => setIsComposing(true)} onCompositionEnd={() => setIsComposing(false)}

어떻게 이런걸 다 아시나요...? 직접 코드까지 덧붙여 주셔서 이해가 훨씬 빨랐습니다! 감사합니다🥹

ParkSohyunee · 2024-11-05T01:38:30Z

src/app/list/_create/page.tsx

서영님 이 파일은 ver2.0 파일이 맞는 것이죠?!

네 맞습니다!! 정상 동작 체크한 후 추후에 삭제하겠습니다~!! :)

ParkSohyunee

서영님, 클론 받아서 테스트하며 보다보니 리뷰를 많이 남기게 되어 죄송합니다ㅠㅠ💕 최대한 제가 테스트한 코드와 같이 남겼는데 혹시 확인하시다가 궁금한점 있으시면 말씀 부탁드립니당, 리스트 수정 코드를 아직 확인못하였는데 빠르게 확인하도록 하겠습니다~!! LGTM✨🥹🤍

ParkSohyunee · 2024-11-14T00:53:01Z

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

+
+  console.log(errors.title);
+


서영님~ 요고 console.log 지우면 좋을 것 같아요. 👀

ParkSohyunee · 2024-11-14T01:11:26Z

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

+                <button
+                  className={selectedCategory === category.engName ? styles.selectedCategoryChip : styles.categoryChip}
+                  key={category.code}
+                  onClick={() => {
+                    handleSelectCategory(category.engName);
+                  }}
+                >
+                  {category.korName}
+                </button>


step1. 단계에서 -> step2. 단계로 이동 -> 다시 뒤로가기로 step1. 단계로 이동 하는 경우 선택된 카테고리가 스타일이 반영이 안되는것 같아서, className에서 selectedCategory가 아닌 getValues('category') 값이랑 비교해야 할 것 같습니당..!!

/** state */ // const [selectedCategory, setSelectedCategory] = useState(''); // 제거 className={ getValues('category') === category.engName ? styles.selectedCategoryChip : styles.categoryChip }

이럴수가 바로 반영했고, 말씀해 주신 코드대로 해보니 제대로 되는 것도 확인 했습니다! 너무 감사합니다🥹

ParkSohyunee · 2024-11-14T02:46:06Z

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

+        ) : (
+          <ExpandIcon
+            width="14"
+            height="9"
+            onClick={() => {
+              handleToggleItem(index);
+            }}
+          />
+        )}


서영님, 여기 아코디언 펼치는 아이콘의 크기가 작아서 잘 안눌리는 느낌이 드는것 같아요ㅠㅠ div로 한번 더 감싸서 크기를 조금 넓혀주면 좋을 것 같다는 생각이듭니다!

섬세한 부분까지 확인해 주셔서 정말 감사합니다!
div wrapper로 감싸서 추가해두었습니다! 우선 디자인 살피면서
width: '2rem',
height: '2.6rem',
정도로 사이즈 설정했는데, 모바일 이용해보면서 불편하다면 더 확대하여 수정해두겠습니다!!

ParkSohyunee · 2024-11-14T02:49:37Z

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

+  handleToggleItem: (index: any) => void;
+  isExpand: boolean;
+  handleDeleteItem: (id: any) => void;


any보다 타입을 명확하게 지어주며 좋을 것 같아요. 👀✨

handleToggleItem: (index: number) => void; handleDeleteItem: (index: number) => void;

ParkSohyunee · 2024-11-14T03:06:32Z

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

+
+  //--- item 제거
+  const handleDeleteItem = (itemId: number) => {
+    remove(itemId);
+  };
+


서영님~ item이 최소 3개는 등록되어야 다음으로 넘어갈 수 있는데, 지금은 아이템 아코디언을 모두 삭제할 수 있고(첫번째~세번째 포함), 모두 삭제되어도 '다음'으로 넘어갈 수 있는 것 같아요. (혹시 서영님이 의도하신 부분인가용? 👀)

(의견) 아이템을 제거할 때 최소 3개까지는 삭제 버튼이 노출되지 않고, 또 삭제할때도 itemId를 검증해주면 좋을 것 같아요.

export const MIN_ITEM_COUNT = 3; export const MAX_ITEM_COUNT = 10; //--- item 제거 const handleDeleteItem = (itemId: number) => { if (itemId >= MIN_ITEM_COUNT) { remove(itemId); } };

모두 삭제되어도 다음으로 넘어갈 수 있다니,,
너무 꼼꼼하지 않게 개발하고, 테스트가 불충분했다는 게 드러나네요🥲
중요한 부분 발견해주시고 의견과 코드까지 말씀주셔서 정말 고맙습니다🙇‍♀️

사실 삭제 버튼이 계속 노출되는 것은 기획의도가 맞습니다! 다만, 3개 미만일 경우 추가적인 안내가 필요하고, 다음으로 넘어가지 못하는 제한은 걸어둬야 맞는데, 이 부분은 제가 놓친게 맞습니다🥲

[개선방향]
AS-IS
기존에는 아이템 4개 이상일 경우에만 삭제 버튼을 노출했었는데,
이 경우 사용자 입장에서 불편하고 혼란스러운 경우가 있더라고요.
ex. 딱 3개의 아이템만 있었던 경우 삭제 버튼을 찾지 못함.
ex. 우선 삭제부터 하고 싶을 때

TO-BE
그래서 삭제버튼 노출&미노출로 관리하기보다는 아래 방향이 어떨까 싶습니다!

아이템이 하나도 없을 때 안내 문구 노출

아이템이 3개 미만일 경우 '아이템 추가' 버튼 강조 또는 버튼 위에 안내 메시지 노출

한 번 해보고 또 더 좋은 방법이 있다면 수정해보면 좋을 것 같아요!
추후 사용자 테스트 때 이 부분 주의깊게 확인하겠습니다!

ParkSohyunee · 2024-11-14T03:09:12Z

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

+              <button
+                className={styles.deleteButton}
+                onClick={() => {
+                  handleDeleteItem(index);
+                }}
+              >
+                삭제
+              </button>


(의견) 위의 코멘트와 동일한 흐름대로 삭제도 최소 아이템에 대해서는 노출되지 않도록 하면 좋을 것 같아요.

{index >= MIN_ITEM_COUNT && ( <button className={styles.deleteButton} onClick={() => { handleDeleteItem(index); }} > 삭제 </button> )} </div>

ParkSohyunee · 2024-11-14T05:51:43Z

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

+  const isValidLabel = (label: string): boolean => {
+    const reg = /^[a-zA-Z0-9가-힣]{1,10}$/;
+    return reg.test(label);
+  };


✔️ 서영님, 라벨 입력할 때 스페이스바를 누르면 유효성검사(유효한 한글, 영어, 숫자만 입력해 주세요.)에 걸려서 아예 스페이스바로 등록이 안되는 문제가 있는 것 같아요,,

테스트 해보았는데 label test할때는 공백제거를 넣어서 해당 글자만 검사를 하도록 수정이 필요할 것 같아요~!
return reg.test(label.trim());

(+. 의견) 서영님~! 라벨 등록 관련해서 등록 버튼을 추가해도 좋을 것 같아 의견 전달드려봅니당 🏷️

만약, 수정한 코드를 적용한다면 스페이스바로 등록하는 경우 스페이스바를 2번 눌러야 라벨이 등록되는 문제가 있습니다. (이전 버전부터 계속 그래왔음)

기존에 엔터 말고도 스페이스바가 추가된 이유가 안드로이드에서 엔터키가 없기 때문이었는데요, 사실 안드로이드에서는 스페이스바도 적용이 안되고 있습니다.

그래서 라벨 등록 버튼을 추가로 만들어서 라벨을 등록하는 방법이 (1) Enter 등록 (2) 버튼을 눌러서 등록 이렇게 차차 수정하는 방향으로 가도 좋을 것 같다는 생각이 듭니다~!

소현님, 꼼꼼하게 테스트 해주시고 여러 케이스에 대해 나누어 설명해주셔서 감사합니다!

trim() 활용하여 스페이스바가 유효성 검사에서 걸리지 않도록 했습니다.

스페이스바 2번 눌러야 등록되는 문제는,

스페이스바는 isComposing 아니도록 처리

onKeyDown 대신 onKeyUp으로 교체하여 해결해 보았습니다!
그런데 여러 키패드 종류에서 다 잘 되는지 확인은 필요할 것 같습니다ㅠ

안드로이드에서 스페이스로도 여전히 되지 않는다는 걸 몰랐네요ㅠ! 우선 버튼 추가대신에 콤마도 해시태그 등록방법 중 하나로 추가해두었습니다! 모바일에서 테스트 해보고 콤마랑 버튼 중 무엇이 날 지 확인하겠습니다!

ParkSohyunee · 2024-11-14T05:55:40Z

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

+
+      //중복라벨 에러처리
+      if (isDuplicatedLabel(label)) {
+        setError('newLabel', { type: 'unique', message: '이미 등록한 태그예요.' });
+        return;
+      }
+
+      //최종 라벨 등록
+      append(label); //배열에 라벨추가
+      e.currentTarget.value = ''; //입력필드 비우기
+    }
+  };


✔️ 위에서 정규식으로 라벨 검사후에 스페이스바로 등록하면 라벨이 뒤에 공백과 함께 들어가는 문제가 있는 것 같아요ㅠㅠ
그래서 마찬가지로 공백제거가 필요할 것 같습니당

//중복라벨 에러처리 if (isDuplicatedLabel(label.trim())) { // trim 추가 setError('newLabel', { type: 'unique', message: '이미 등록한 태그예요.' }); return; } //최종 라벨 등록 append(label.trim()); //배열에 라벨추가 // trim 추가 e.currentTarget.value = ''; //입력필드 비우기 } };

이 부분 수정하였습니다~!
태그 입력에 이렇게 꼼꼼한 확인 절차가 필요하네요ㅠ
검수 하시면서 고칠 게 많아 당황하셨을텐데... 정말 감사합니다 🙇‍♀️

ParkSohyunee · 2024-11-14T06:45:01Z

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

+  const handleClickPalette = (palette: string) => {
+    setSelectedPalette(palette as BACKGROUND_COLOR_PALETTE_TYPE);
+  };
+


(의견) 서영님, 팔레트를 변경할때마다 팔레트의 첫번째값이 선택되어있으면 UI/UX에 더 좋을 것 같아서(selectedIcon 표시), 팔레트 변경할때 default값을 setSelectedColorID state에 넣어주는 코드를 추가해도 좋을 것 같아요.

const handleClickPalette = (palette: BACKGROUND_COLOR_PALETTE_TYPE) => { // +. 팔레트 타입도 string에서 구체적인 타입으로 수정했습니다. const defaultSelectedID = BACKGROUND_COLOR_CREATE[palette].colors[0].colorID; setSelectedColorID(defaultSelectedID); setSelectedPalette(palette); }; // 아래 onClick 핸들러 onClick={() => { handleClickPalette(palette as BACKGROUND_COLOR_PALETTE_TYPE); }}

소현님 UI/UX 측면에서 의견 제시해 주셔서 감사드립니다!!
만약 팔레트 클릭 시, 해당 팔레트의 첫 번째 색으로 자동 선택이 된다면 원치 않은 경우에도 색상이 바뀌는 경우가 발생할 수 있을 것 같아요ㅠ
ex. 색상은 선택해 두고 어떤 색상이 있는지 둘러보기만 하고 싶은 경우에, 이미 선택해 둔 색상이 사라지고 팔레트 클릭에 따라 바뀌게 되는 경우가 발생할 수 있을 것 같아요.

하지만 소현님 의견을 보고 생각해보니,
색깔을 선택하고 다른 팔레트를 클릭해 본 경우에, 아무 색깔도 선택하지 않은 것 같고 그래서 선택표시가 있는 체크를 찾아 또 팔레트들을 두리번 거려야하는 불편함이 있음을 깨달았어요.

그래서 생각해 본 방법은, color도 preview를 두는 것이었습니다!
아래와 같이 preview를 추가한 UI로 변경해보았어요.
색깔 구경을 다니고, 팔레트가 변경 되더라도 내가 선택한 색상이 무엇인지는 항상 볼 수 있게 하였습니다.
이 방법은 어떨까요?!(디자인이 마음에 들지는 않지만 더 나은 디자인이 잘 안 떠오르네요ㅠㅠ)

아래 디자인이 더 나을까요..??

서영님~ 의견 들어봐주시고, 좋은 방법 고민해 주셔서 감사합니다. 우선 적용하신 디자인 중에는 2번이 더 좋은 것 같습니다~! 🎨

또한, 제가 의견을 제시했던 이유는 처음에 사용할때 직관적으로 배경 색상 팔레트(상위 항목)를 선택하면, 그 팔레트 안에서만 색상(하위 항목)이 선택되어져야 한다는 생각이 들었던 것 같습니다. 그래서 내가 선택하지 않은 팔레트의 컬러가 선택되어진 부분에서, 또 팔레트와 컬러가 매칭이 안된다는 생각에서 의문점이 생긴 것 같습니다ㅠㅠ

(1) 서영님이 제안해 주신 디자인을 적용하고 만약 디자인에서 이질감이 든다면 (2) 그때는 서영님께서 더 맞다고 판단하신 방향으로 적용하는게 나을 것 같아요~! 👍🥹

소현님, 완전 이해했습니다!
이전에 제가 이해를 잘못했던 것 같아요~!
다시 한 번 설명해주셔서 감사드려요 🥹🙇‍♀️

우선 기획 의도(?)를 설명드리자면
팔레트는 선택사항이 아니라 탐색을 용이하게 하기 위한 상위 항목이며,
색상만 선택한다고 봐주시면 좋을 것 같아요!
팔레트는 선택한 색상이 포함된 팔레트로 자동 저장됩니다!

팔레트 VIVID 선택 > VIVID_GREEN 색상 선택 > 팔레트 NEON 선택
위와 같은 상황이라면 아래와 같이 데이터가 저장됩니다.
"backgroundPalette": "VIVID",
"backgroundColor": "VIVID_GREEN",

요약하자면, 배경 색상 팔레트는 선택하는 대상이 아닌 탐색 도구입니다!
그렇지만 이게 인지가 잘 안되는 부분이라면 분명 수정이 필요할 것 같아요ㅠ

우선 2번 디자인으로 적용 후, 사용자에게 '팔레트는 탐색 도구다'라는 인지가 부족하다면
고민해 보겠습니다~!!

seoyoung-min

@ParkSohyunee @kanglocal @Eugene-A-01 @Nahyun-Kang dnd 라이브러리를 교체했습니다. 기존에 이용하던 react-beautiful-dnd는 더 이상 관리가 되지 않고, 이로 인한 콘솔에러가 발생했습니다. 동일하게 사용할 수 있는 패키지인 '@hello-pangea/dnd'를 사용했습니다.
선택 이유: dnd 라이브러리 중 가장 잘 관리되는 편
링크: https://www.npmjs.com/package/@hello-pangea/dnd

주의: 이로 인해 패키지 삭제, 설치, yarn lock 수정이 있었습니다.
PULL 받으시고 yarn install 실행 부탁드립니다!

ParkSohyunee

서영님~ PR을 너무 늦게 확인하여 죄송합니다. 🥹 작업량이 매우 많았을텐데 빠르고 꼼꼼하게 해주셔서 감사합니다. 처음에 기능 만들었을때는 자세히 들여다볼 시간이 없었는데 지금이라도 하나씩 보게 될 수 있어서 정말 많은 도움이 되었습니다! ✨ 항상 감사해요 서영님~ LGTM💕

ParkSohyunee · 2024-11-18T12:48:44Z

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

+  const isValid = !errors.title && !errors.category && !errors.description;
+
+  useEffect(() => {
+    //카테고리 규칙 추가
+    register('category', listCategoryRules);
+    //페이지 로드 시  'title', 'category'필 드 유효성 검사 강제 실행
+    trigger(['title', 'category']);
+  }, [trigger, register, watchTitle]);
+
+  return (
+    <>
+      <Header
+        title={type === 'create' ? listLocale[language].createList : listLocale[language].editList}
+        left="cancel"
+        leftClick={() => {
+          //TODO: 취소 바텀시트 필요
+          router.back();
+        }}
+        right={
+          <button className={styles.nextButton} onClick={onNextClick} disabled={!isValid}>
+            {listLocale[language].next}
+          </button>


서영님, 마지막으로 수정 기능 테스트를 해보았는데 스탭1에서 헤더의 [다음] 버튼이 비활성화되어 있어서 원인을 찾아보니, 타이틀에서 에러가 나는 것 같습니다ㅠㅠ 그런데 새로고침을 했을때는 정상적으로 동작을 하는데요, 혹시 서영님께서 테스트 하셨을때는 문제가 없었는지 궁금합니다!

const isValid = !errors.title && !errors.category && !errors.description;

제 로컬에서는 커밋 남기기 전에 테스트랑 방금 진행한 테스트에서 모두 문제 없이 버튼이 활성화 되는데, 무엇이 문제일까요ㅠ
혹시나 해서 소현님의 리스트 제목 따라서 생성한 후 수정 진행해 보았는데 괜찮았습니다!
흑 무엇이 문제일까요?ㅠㅠ

우선 리스트 수정에서 기존 데이터값 삽이 후에 한 번 더 title 유효성 검사 진행하는 코드를 넣어 커밋 남겼습니다!!
저한테는 계속 정상 동작했던 부분이라 테스트가 어려워 해결이 됐는지 모르겠습니다 ㅠㅠㅠ
번거로우시겠지만 시간이 나실 때 한 번 봐주시면 감사하겠습니다!🙇‍♀️🙇‍♀️🙇‍♀️🙇‍♀️🥹🥹🥹

서영님! 지금 바로 확인해 보았는데 여러가지 플로우로 리스트 수정페이지 진입했을때 모두 [다음]버튼이 활성화되어 정상동작하는 점 확인하였습니다!!👍 제가 테스트를 반복하다가 특정 경우에서 유효성 검사가 꼬였나봅니다ㅠㅠ! 빠르게 확인해 주시고, 또 여러번 테스트 해주셔서 정말 감사합니다!! 👍🙇‍♀️🥹

흐어 이렇게 빠르게 확인해 주셔서 너무 감사드립니다!!🥹🙇‍♀️🩷
잘 된다니 다행입니다! 혹시 또 오류가 생기진 않는지 추후 더 테스트 해볼게요~! 감사합니다 :)

ParkSohyunee · 2024-11-18T12:52:33Z

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

 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
-import { DragDropContext, Draggable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, DropResult } from '@hello-pangea/dnd';



react-beautiful-dnd 패키지가 deprecated되었군요!! 👀

빠르다빠른 프론트엔드 세상!!
아래와 같은 에러가 계속 뜨더라고요! 알아보니 라이브러리 문제였어요ㅠㅠ
1년 전 업데이트가 마지막이네요!!

seoyoung-min added 16 commits November 4, 2024 07:45

Refactor: ver3.0 리스트생성 폴더 생성 및 공용헤더 ver3.0 디자인 적용

4bcef1e

Feat: 리스트생성 1단계 페이지 생성

0c91ca5

design: 리스트 생성 step1 디자인 입히기

d8866ea

Feat: step1 글자수세기 및 조건 검사 기능 추가

0762da4

refactor: 카테고리 유효성 검사 추가 및 오류 시 비활성 버튼 css 수정

07e8f00

design: 리스트 소개 textarea 스크롤바 없애기

ce04ed2

refactor: 불필요 코드 삭제 및 todo 추가

62ec505

refactor: step 단계별 이동 리팩토링

5cf192e

Chore: 아이콘 파일 추가

2065d1f

Feat: 리스트생성 step2 아코디언, dnd 구현

f592860

Design: 아이템 리스트 rank 사이즈 스타일 변경

4c2d450

Feature: step3 헤더 삽입

51de8b4

Fix: 중복 theme color 제거

1205907

Feat: step3 태그 기능 전체 구현

756eafd

Feat: step3 배경색상 및 공개여부 기능 구현

482abf5

Feat: step2 이미지 업로드 기능 추가

3a9978b

seoyoung-min added Feat 구현 Design UI 수정 labels Nov 3, 2024

seoyoung-min requested review from Eugene-A-01, kanglocal, ParkSohyunee and Nahyun-Kang November 3, 2024 23:03

seoyoung-min self-assigned this Nov 3, 2024

ParkSohyunee reviewed Nov 5, 2024

View reviewed changes

seoyoung-min added 5 commits November 10, 2024 17:11

Feat: step2 링크 첨부 기능 추가

a985d2b

refactor: 라벨(태그) 에러처리에 개별 리액트훅폼 적용

2f8fc72

Fix: Step3 라벨 에러 재입력시 사라지도록 수정

5413264

Fix: 헤더 컴포넌트 이전 코드로 돌아간 것 다시 복구

4162326

Refactor: 코드리뷰 반영(isComposing, chip이름 구체화, 카테고리 staleTime추가)

13c7bbc

seoyoung-min added 5 commits November 11, 2024 01:11

Fix: 타입오류 해결

4ca2c9d

Refactor: 리스트 수정 페이지 ver3.0 적용

76f25c2

Refactor: 이전 리스트 수정 페이지 삭제

c51998d

Refactor: 이전 리스트 생성 페이지 삭제

1143f19

Fix: 색상명칭 변경 미적용건 수정

277ffd0

ParkSohyunee reviewed Nov 14, 2024

View reviewed changes

seoyoung-min closed this Nov 17, 2024

seoyoung-min deleted the feature/new-create-list branch November 17, 2024 12:23

seoyoung-min restored the feature/new-create-list branch November 17, 2024 12:23

seoyoung-min reopened this Nov 17, 2024

seoyoung-min added 9 commits November 17, 2024 21:57

Refactor: StepOne 불필요 코드 삭제, 타이틀 길이 및 카테고리 선택 스타일링 오류 개선(코드리뷰반영)

8ce5d2a

Refactor: 아코디언 확장/축소 아이콘 범위 확대(코드리뷰반영)

7cd2729

Feature: 아이템 최소 갯수 3개가 안될 경우 다음으로 이동 불가 및 안내 메시지 노출

dd75857

Refactor: 드래그앤드롭 라이브러리 교체

cf581f2

Refactor: 태그 스페이스 등록 오류 해결

83a276e

Refactor: 태그 입력 방법에 콤마 추가

f018cbb

Feature: 선택배경색상 프리뷰 기능 추가

18037b7

Fix: 리액트 타입 패키지 재설치로 타입에러 해결

0c103ec

Refactor: react-beautiful-dnd 라이브러리 제거

6a1b58b

seoyoung-min commented Nov 18, 2024

View reviewed changes

ParkSohyunee approved these changes Nov 18, 2024

View reviewed changes

Fix: 리스트 수정 타이틀 검사 타이밍 조정

b24870f

seoyoung-min merged commit 54e0fc5 into 8-Sprinters:dev Nov 18, 2024
1 of 2 checks passed

seoyoung-min deleted the feature/new-create-list branch November 18, 2024 15:19

Feature: 리스트 생성 Ver3.0 #273

Feature: 리스트 생성 Ver3.0 #273

Conversation

seoyoung-min commented Nov 3, 2024 • edited Loading

개요

작업 사항

참고 사항 (optional)

관련 이슈 (optional)

스크린샷

리뷰어에게

vercel bot commented Nov 3, 2024

ParkSohyunee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ParkSohyunee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seoyoung-min Nov 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seoyoung-min left a comment

Choose a reason for hiding this comment

ParkSohyunee left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seoyoung-min commented Nov 3, 2024 •

edited

Loading

seoyoung-min Nov 18, 2024 •

edited

Loading

ParkSohyunee left a comment •

edited

Loading