[ 최종 QA ]: 허용서비스 페이지 최종 QA를 진행합니다.

[seueooo]

✅ 작업 리스트

• 허용사이트 default 파비콘 변경
• '앱' 탭 삭제
• 추천 서비스 파비콘 서버에서 받아온 url로 변경
• 상위 도메인 허용, 허용 사이트 삭제 드롭다운 및 기능 추가
• 허용서비스 제목 입력 안하고 사이트 추가할 때 alert, 상위도메인 허용 alert, 삭제 확인 alert 모달 추가
• 허용서비스 리스트 삭제시 다른 아이템으로 선택되지 않는 이슈 해결

🔧 작업 내용

허용서비스 리스트 삭제시 다른 아이템으로 선택되지않는 이슈 해결

• 허용서비스 리스트가 변동됐을때 새로 active 하는 로직을 delete mutation 내의 onSuccess 콜백에서 해결하려고 했으나, 넘 복잡해져서.. 첫 렌더링 시 activeGroupId를 설정하기 위해 만들었던 기존의 useEffect 내에 위치시켰습니다.

// NOTE: 첫 렌더링 시 api를 통해 받은 첫번째 allowed service group id를 activeGroupId로 설정
	// 리스트 삭제 후, 현재 active 그룹이 리스트에 없는 경우 첫 번째 그룹으로 설정
	useEffect(() => {
		if (allowedServiceList && allowedServiceList.data.length > 0) {
			const activeGroupExists = activeGroupId && allowedServiceList.data.some((group) => group.id === activeGroupId);

			if (!activeGroupId || !activeGroupExists) {
				setActiveGroupId(allowedServiceList.data[0].id);
			}
		} else if (allowedServiceList && allowedServiceList.data.length === 0 && activeGroupId !== null) {
			// 리스트가 비어있고 선택된 그룹이 있으면 입력 모드로  전환
			handleEnableAddingAllowedServiceGroup();
		}
	}, [allowedServiceList]);

상위 도메인 허용, 허용 사이트 삭제 드롭다운 및 기능 추가

드롭다운 컴포넌트의 루트에 zIndex가 40으로 설정되어 있어 위 사진과 같은 문제가 생겼습니다. 루트컴포넌트에 zIndex를 부여하면 내부의 서브 컴포넌트들에 아무리 높은 zIndex를 부여해도 루트의 zIndex보다 높아질 수 없어서, 루트의 zIndex를 없애고 드롭다운의 content 컴포넌트에 zIndex를 새로 부여했습니다.

🤔 궁금한 점

• 상위도메인 허용 api가 요청 성공 시에도 데이터에 아무런 변동이 없는 이슈가 있어서, 슬랙에 문의남겨놨습니다!
• 모달이 좀 많아져서, page에다 다 관리하려다가 너무 복잡해보여서 DetailContent에서 필요한 모달은 해당 컴포넌트 내에서 관리하돌록 했습니다..

📸 스크린샷 / GIF / Link

허용서비스 리스트 삭제시 다른 아이템으로 선택되지 않는 이슈 해결

2025-05-08.8.37.34.mov

허용서비스 제목 입력 안하고 사이트 추가할 때 alert, 상위도메인 허용 alert, 삭제 확인 alert 모달 추가

2025-05-08.8.38.22.mov

[10tacion]

굿 고생하셨어요

[10tacion]

서버 문의 사항만 확인하고 머지해주세요 👍

[Ivoryeee]

굿굿 수고 많으셨습니당

[Ivoryeee]

P5. MinusBtn이 해당 컴포넌트만 사용되었던 것 같네욤 해당 svg 파일 삭제해도 좋을 것 같습니다!

[seueooo]

온보딩에서 사용중입니다..!!

[Ivoryeee]

온보딩에서는 ic_minus 로 사용 중이라 삭제해도 괜찮을 것 같아요!

[Ivoryeee]

P5. 요 부분이 의미하는 바가 무엇인가요? 불필요한 부분이라면 삭제해도 좋을 것 같아요!

[seueooo]

post메서드에서는 요청 설정을 3번째 파라미터로 받는데, 중간에 빈객체 삭제하면 파라미터를 요청 body로 인식하여 요청 오류가 납니다!

[Ivoryeee]

P5. 엔드포인트를 상수로 분리해 관리한 점 넘 좋네요! 다만 해당 메서드 내에 siteUrl이라는 파라미터도 함께 사용되고 있어서 url이 의미하는 바를 직관적으로 알기 어려운 것 같아요!
mergeAllowedSiteEndpoint나 postMergeAllowedSiteUrl처럼 역할이 드러나는 네이밍으로 작성해도 좋을 것 같습니다 👍🏻

[Ivoryeee]

P4. 접근성을 고려하여 아래와 같이 수정해도 좋을 것 같아요!

Suggested change

	<img src={recommendSite.favicon} alt="favicon" className="h-[4.2rem] w-[4.2rem] rounded-full" />
	<img src={recommendSite.favicon} alt={`${recommendSite.siteName} 아이콘`} className="h-[4.2rem] w-[4.2rem] rounded-full" />

[10tacion]

++++++
localhost 상아 pr에서 반영 확인