digest group list 가져오기 기능 추가

[dladncks1217]

Why need this PR❓

digest group list 가져오기 기능 추가

Changes ✌️

digest group list 가져오기 기능 추가

Screenshoot 🌅 (optional)

[moong23]

lgtm 👍

[moong23]

반복되는 로직과 inline 스타일을 조금 지양하기 위해 아래와 같이 바꿔보았는데, 요건 어떠한지 의견 부탁드려요!

Suggested change

	if (!data.length) {
	return (
	<div
	style={{
	width: '258px',
	borderRadius: 'var(--Number-Spacing-spacing-3, 8px)',
	background: 'var(--Color-Neutral-white, #FFF)',
	boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.25)',
	}}
	className='absolute p-4 text-body2 m-2'
	>
	<div>뉴스레터 그룹을 만들어</div>
	<div className='pb-2'>주제별로 편하게 모아보세요!</div>
	<div className='w-full flex justify-end text-body2 text-blue cursor-pointer' onClick={handleGroupMake}>
	+ 뉴스레터 그룹 만들기
	</div>
	</div>
	);
	}
	return (
	<div
	style={{
	width: '258px',
	borderRadius: 'var(--Number-Spacing-spacing-3, 8px)',
	background: 'var(--Color-Neutral-white, #FFF)',
	boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.25)',
	}}
	className='absolute p-4 text-body2 m-2'
	>
	{data.map(group => (
	<div className='pb-2'>{group.name}</div>
	))}
	<div className='w-full flex justify-end text-body2 text-blue cursor-pointer' onClick={handleGroupMake}>
	+ 뉴스레터 그룹 만들기
	</div>
	</div>
	);
	return (
	<div
	className='absolute w-[258px] p-4 text-body2 m-2 rounded-xl bg-white shadow-[0_0_12px_0_rgba(0,0,0,0.25)]'
	>
	{
	!data.length ? (
	<>
	<div>뉴스레터 그룹을 만들어</div>
	<div className='pb-2'>주제별로 편하게 모아보세요!</div>
	</>
	) :
	{data.map(group => (
	<div className='pb-2'>{group.name}</div>
	))}
	<div className='w-full flex justify-end text-body2 text-blue cursor-pointer' onClick={handleGroupMake}>
	+ 뉴스레터 그룹 만들기
	</div>
	</div>
	);

[dladncks1217]

@moong23
DRY도 고려할 수 있긴 한데, 컴포넌트가 사실상 UI로직밖에 없는 코드잖아요?
그럼 이 코드를 읽을때 코드를 쭉 내려가다!data.length 부분을 읽어야만 UI가 두 케이스로 나눠진다는걸 알 수 있을 것 같아요.
컴포넌트 네이밍에서도 UI가 두 케이스로 나눠진다는 힌트는 없다보니 의도적으로 WET하게 작성했는데 어떻게 생각하시나요!?

[moong23]

옹 좋네요 요 부분에 대해서는 한번도 생각을 해본적이 없어서 사고가 여기까지 확장이 안되어있었어요 좋은 방법인것같아요