인프런 커뮤니티 질문&답변

import React, { useState } from 'react';
import { Button } from "../../ui/button";
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DialogClose
} from "../../ui/dialog";
import { Input } from "../../ui/input";
import SelectBox from "./SelectBox";

function UserRegistrationButton() {
    const [id, setId] = useState('');
    const [name, setName] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [ip, setIp] = useState('');
    const [selectedAuthority, setSelectedAuthority] = useState("");

    const items = [
        { value: '1', label: '일반' },
        { value: '2', label: '마스터' },
    ];

    const handleDataChange = (newData) => {
        setSelectedAuthority(newData);
    };

    const handleSubmit = () => {
        console.log({ id, name, password, confirmPassword, ip, selectedAuthority });
    };

    return (
        <Dialog>
            <DialogTrigger asChild>
                <Button className="w-full">사용자 등록</Button>
            </DialogTrigger>
            <DialogContent className="w-full max-w-2xl">
                <DialogHeader>
                    <DialogTitle className="text-variant-h4-bold">사용자 등록</DialogTitle>
                </DialogHeader>
                <div className="grid gap-5 py-3">
                    <div className="flex gap-3">
                        <div className="grid grid-cols-10 w-full">
                            <div className="grid col-span-2 content-center">
                                아이디
                            </div>
                            <Input
                                id="userId"
                                className="col-span-8"
                                value={id}
                                onChange={e => setId(e.target.value)}
                            />
                        </div>
                        <div className="grid grid-cols-10 w-full">
                            <div className="grid col-span-2 content-center">
                                이름
                            </div>
                            <Input
                                id="name"
                                className="col-span-8"
                                value={name}
                                onChange={e => setName(e.target.value)}
                            />
                        </div>
                    </div>
                    <div className="flex gap-3">
                        <div className="grid grid-cols-10 w-full">
                            <div className="text-sm grid col-span-2 content-center">
                                비밀번호
                            </div>
                            <Input
                                id="password"
                                className="col-span-8"
                                type="password"
                                value={password}
                                onChange={e => setPassword(e.target.value)}
                            />
                        </div>
                        <div className="grid grid-cols-10 w-full">
                            <div className="text-sm grid col-span-2 content-center">
                                비밀번호 확인
                            </div>
                            <Input
                                id="confirmPassword"
                                className="col-span-8"
                                type="password"
                                value={confirmPassword}
                                onChange={e => setConfirmPassword(e.target.value)}
                            />
                        </div>
                    </div>
                    <div className="flex gap-3">
                        <div className="grid grid-cols-10 w-full">
                            <div className="grid col-span-2 content-center">
                                권한
                            </div>
                            <SelectBox
                                className="col-span-8"
                                items={items}
                                onDataChange={handleDataChange}
                            />
                        </div>
                        <div className="grid grid-cols-10 w-full">
                            <div className="grid col-span-2 content-center">
                                접속 IP
                            </div>
                            <Input
                                id="IP"
                                className="col-span-8"
                                value={ip}
                                onChange={e => setIp(e.target.value)}
                            />
                        </div>
                    </div>
                </div>
                <DialogFooter>
                    <div className='flex justify-center gap-5'>
                        <DialogClose asChild>
                            <Button onClick={handleSubmit} size="xxl">등록</Button>
                        </DialogClose>
                        <DialogClose asChild>
                            <Button variant="secondary" size="xxl">취소</Button>
                        </DialogClose>
                    </div>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

export default UserRegistrationButton;

import React, { useState, useEffect } from 'react';
import {
    Select,
    SelectValue,
    SelectTrigger,
    SelectContent,
    SelectItem,
} from '../../ui/select';

interface SelectBoxProps {
    className?: string;
    items: { value: string; label: string }[];
    onDataChange: any;
}

const SelectBox: React.FC<SelectBoxProps> = ({ className, items, onDataChange }) => {
    const [selectedValue, setSelectedValue] = useState("");

    const sendDataToParent = (payload) => {
        onDataChange(payload);
        console.log(payload, selectedValue)
    };

    return (
        <Select>
            <SelectTrigger className={className}>
                <SelectValue placeholder="권한을 선택하세요." />
            </SelectTrigger>
            <SelectContent>
                {items.map(item => (
                    <SelectItem key={item.value} value={item.value} onClick={() => sendDataToParent(item.label)}>
                        {item.label}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    );
};

export default SelectBox;

제 코드인데요 현재 shadcn/ui를 쓰면서 진행중인데요
셀렉트 박스가 하위컴포넌트이고 상위 컴포넌트로 셀렉트 박스가 선택한 값을 보내고 싶은데 할 수 있는 방법 다 해도 안되더라고요 현재 코드는 콜백함수를 이용하여 데이터를 호출하려고 했는데 실패했습니다. 이럴 때는 무조건 리덕스나 리코일 같은 전역으로 상태관리를 해서 값을 주는 방법 밖에는 없나요 ? 아니면 다른 방법이 있으면 알려주세요