Error Overlay

구분	ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ설명 ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
현상	Overlay가 Contents 까지 가려버리는 현상
원인	현재 CCP 패턴의 Modal 컴포넌트에서 가장 첫 번째로 Overlay가 껴있는 상황. 이 말은 곧,Overlay 컴포넌트 바깥에서 정의한 스타일링은 덮어씌워짐을 의미한다. 왜냐하면 Overlay가 position: 'fixed'이기 때문. 초록색 박스의 배경은 Overlay 컴포넌트 바깥에서 스타일링하고있는데, 그래서 css의 적용 순서상 아래쪽에 위치한 Overlay의 스타일이 적용된 것. 해결방법으로 Overlay 와 초록색 박스를 동일한 depth에 두면 된다.
해결책	방법 1. `<Overlay />` 와 동일 depth에 컨텐츠들을 감싸는 `<Contents />`를 만든다. 이렇게하면, Overlay보다 더 아래쪽에 위치한 Contents의 스타일링이 적용될 것이다. 하지만 이 방법을 적용하기 위해서 Contents 컴포넌트를 추가로 만들어야하고, 사용하는 쪽에서도 타이핑을 더 해야하는 단점이 있다. 방법 2. useModal 내부에서 Modal의 children 컴포넌트들의 위치를 먼저 지정한다. 기존코드는 {children} 을 Modal 컴포넌트에서 바로 렌더링하고 있어서, children 개별 위치를 지정할 수 없었다. 그래서 Overlay 컴포넌트와 동일한 depth의 div태그를 생성하고 그 아래에 Contents를 넣어줬다. 이게 가능하게 한 함수가 바로 findChildren이다 children 중, targetChildren과 일치하는 컴포넌트를 찾아서 리턴한다. 따라서 불필요한 컴포넌트를 생성하지 않고, 원하는 위치에 children 컴포넌트를 배치할 수 있다. 결과적으로 이 방법을 채택했다.

// findChildren
type PropsType<T extends string> = { children: React.ReactNode } & {
        [K in T]: () => void;
    } & ExecuteButtonType;

const findChildren = (
children: React.ReactNode,
targetChildren: <T extends string>(
    props: PropsType<T>,
) => React.JSX.Element,
    ) => {
        const childrenArray = Children.toArray(children);
        return childrenArray
        .filter((child) => isValidElement(child) && child.type == targetChildren)
        .slice(0, 2);
        };

578f57f

myeonjeobeottae / client

useModal 구현 #18

Feature

Description

To do list

Troubleshooting

Error Overlay