[ React ] 반응형웹에서 계속 변하는 버튼 위치 찾아내기, 버튼 밑에 edit 할 수 있는 그리드 붙이기

 

- 목표

반응형웹에서 특정 버튼을 누르면 바로 밑에 edit box를 띄워지는 것

회사 프로그램 화면을 보여줄 수는 없으니 피그마로 대충 그려보았다. 

 

※ Button과 Grid 모두 mui 사용

 

1. Button에 ref 변수를 설정하기 

const buttonRef = useRef<HTMLButtonElement>(null);
const [showTextBox, setshowTextBox] = useState(false); // true일때 edit box 보여짐

<Button onClick={textBoxPopUp} ref={multipleButtonRef}>
        Button
</Button>

{showTextBox ? (
                    <Grid
                        alignItems="top"
                        justifyContent="flex-end"
                        style={{
                            position: 'absolute',
                            top: buttonRef?.current?.getBoundingClientRect?.()?.bottom + 5 ?? undefined,
                            left: buttonRef?.current?.getBoundingClientRect?.()?.left ?? undefined
                        }}
                    >
                        <Grid item>
                            <textarea
                                className={theme.palette.mode === 'dark' ? 'ag-theme-balham-dark' : 'ag-theme-balham'}
                                style={{ minHeight: 270, minWidth: 200 }}
                                onKeyUp={handleKeyPress}
                                defaultValue={text.current}
                            />
                        </Grid>
                    </Grid>
                ) : null}

multipleButtonRef?.current?.getBoundingClientRect?.()?.bottom

이 부분이 핵심이라고 할 수 있다. 

multipleButtonRef?.current?.getBoundingClientRect()로 버튼의 현재 위치를 알아낼 수 있다. 

 

이렇게 하면 Object is possibly 'undefined'. 오류가 뜬다

buttonRef의 초기값이 null이다 보니까 옵셔널 체이닝 연산자를 사용하더라도 오류가 뜨는 것 같다. 

초기값을 null말고 다른 걸로 설정해야하나.. 하다가 뭘로 설정해줄지를 모르겠어서.. 일단 냅뒀다 🥹

이게 잘 먹혔다면 정말 간단하게 구현할 수 있었을텐데... 

 

+ top: buttonRef?.current?.getBoundingClientRect?.()?.bottom + 5 ?? undefined,

이 부분을

top: buttonRef?.current?.getBoundingClientRect?.()?.bottom ?? 0 + 5 ?? undefined,

으로 바꿨더니 잘 먹는다!!!

 

+ 근데 묘하게 위치가 이상함..

 

 

2. Button 클릭 이벤트, 창 크기 변경 이벤트 이용하기

 

- 버튼을 클릭했을 때 이벤트 

const [textPos, setTextPos] = useState<{ mouseX: number; mouseY: number } | null>(null);

const textBoxPopUp = async (event: any) => {
        const pos = event.target.getBoundingClientRect();

        setTextPos({
            mouseX: pos.left,
            mouseY: pos.bottom + 5
        });
    };
    
    
<Button onClick={textBoxPopUp} ref={multipleButtonRef}>
        Button
</Button>

{showTextBox ? (
                    <Grid
                        alignItems="top"
                        justifyContent="flex-end"
                        style={{
                            position: 'absolute',
                            top: textPos ? textPos.mouseY : undefined,
                            left: textPos ? textPos.mouseX : undefined
                        }}
                    >
                        <Grid item>
                            <textarea
                                className={theme.palette.mode === 'dark' ? 'ag-theme-balham-dark' : 'ag-theme-balham'}
                                style={{ minHeight: 270, minWidth: 200 }}
                                onKeyUp={handleKeyPress}
                                defaultValue={text.current}
                            />
                        </Grid>
                    </Grid>
                ) : null}

 

여기서 핵심은, textPos라는 변수를 통해서 text box의 위치를 관리한다는 것이다. 

 

 

- 창 크기 변경 

useEffect(() => {
        const handleWindowResize = () => {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };

        window.addEventListener('resize', handleWindowResize);

        return () => {
            window.removeEventListener('resize', handleWindowResize);
        };
    }, []);

    useEffect(() => {
        // 창 크기 변경
        const pos = buttonRef.current?.getBoundingClientRect?.();

        if (showTextBox && pos) {
            setTextPos({
                mouseX: pos.left,
                mouseY: pos.bottom + 5
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [windowSize]);

창크기가 변경될 때마다 textPos를 변경해준다. 

매우 부드럽게 변경되진 않지만.. 일단 목표 달성 !!!!