[R09M App] CreateRoom 페이지 - 토글 버튼 제작 이슈

내용

아래와 같은 형태의 토글 버튼을 구현 중입니다.

둘중 하나의 버튼을 눌렀을때 선택된 결과값을 뽑아내서 form data 에 전송해야합니다.

현재 아래 코드와 같이 삼항연산자를 사용하여 토글이 눌렸을때와 안눌렸을때를 제작 중인데, ui 구현을 좀더 간결하게 작성할수 있는 방법이 있는지 문의드립니다.
두 선택지중 클릭된 버튼의 결과값인 text value 를 출력하여 form data 에 맞는 양식인 string문자열으로 송출하기 위해 코드를 어떻게 수정해야할지 문의드립니다.
(현재는 “계좌 이체 만나서 결제” 이렇게 두개 모두 출력되는 상황입니다. “계좌 이체” 혹은 “만나서 결제” 둘중 하나가 출력되도록 하고 싶습니다.)
```
{isToggled ? 
        (<div className="flex w-full items-center "><div className="w-1/2 shadow-lg bg-white rounded-lg "> 계좌 이체 </div><div className="w-1/2 "> 만나서 결제 </div></div>) :
        (<div className="flex w-full">< div className="w-1/2" > 계좌 이체 </div><div className="w-1/2 shadow-lg bg-white rounded-lg">만나서 결제</div> </div>)}
```
PaymentToggleButton.jsx
```
import React, { useState, forwardRef } from "react";
```

function PaymentToggleButton({ labelClassName, title, }, ref) { const [isToggled, setToggled] = useState(false); return ( <>

{title}

  <div className="bg-greenishgray-200 w-full p-2 rounded-lg">

    <button
      ref={ref}
      className="w-full"
      type="button"
      onClick={() => setToggled(!isToggled)}
    >
      {/* 토글이 되면 ? 왼쪽이 활성화된 ui : 오른쪽이 활성화된 ui */}
      {/* 스타일에만 isToggled 를 준다면 ? 콘솔에는 여전히 둘다 찍힐까? */}
      {isToggled ?
        (<div className="flex w-full items-center "><div className="w-1/2 shadow-lg bg-white rounded-lg "> 계좌 이체 </div><div className="w-1/2 "> 만나서 결제 </div></div>) :
        (<div className="flex w-full">< div className="w-1/2" > 계좌 이체 </div><div className="w-1/2 shadow-lg bg-white rounded-lg">만나서 결제</div> </div>)}
      {/* {isToggled ? "계좌 이체" : "만나서 결제"} */}
    </button>

  </div >
</>

); };

export default forwardRef(PaymentToggleButton);


## 참고 이미지 (선택)
구현하고자 하는 토글 버튼의 이미지입니다.
![image](https://github.com/FRONTENDSCHOOL6/ready-act/assets/74365275/96081666-0f24-406c-bc6d-c3754689b945)

`※ 댓글에 이슈 해결 완료 후 결과 또는 해결 과정 이미지 첨부`

웹 표준/접근성 이슈

작성된 코드에는 다음의 표준/접근성 문제를 가집니다. 현 단계에서 개발에도 힘든 사정을 알고 있으므로 수정을 요구하지는 않겠습니다. 하지만 이러한 문제가 있음을 기억하세요. 현업에서 요구시에는 반드시 수정해야 합니다.

[ ] button 요소 내부에 블록 요소 추가됨
[ ] label 요소와 연결된 컨트롤 부재

문제 해결

중복되는 마크업을 하나로 구성하고, 조건에 따라 변경되는 스타일을 분기합니다.
폼 전송 시 결제 수단(payment) 값에 접근할 수 있도록 data-payment 속성을 설정합니다.

PaymentToggleButton.jsx

import { forwardRef, useState, useId } from 'react';

function PaymentToggleButton({ labelClassName, title }, ref) {
  const [isToggled, setToggled] = useState(false);
  const id = useId();

  return (
    <>
      <label htmlFor='id' className={labelClassName}>{title}</label>
      <div id='id' className="bg-greenishgray-200 w-full p-2 rounded-lg">
        <button
          ref={ref}
          type="button"
          className="w-full rounded-lg "
          onClick={() => setToggled(!isToggled)}
          data-payment={isToggled ? '계좌 이체' : '만나서 결제'}
        >
          <div
            className={`flex w-full ${isToggled ? 'items-center' : ''}`.trim()}
          >
            <div
              className={`w-1/2 ${isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              계좌 이체
            </div>
            <div
              className={`w-1/2 ${!isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              만나서 결제
            </div>
          </div>
        </button>
      </div>
    </>
  );
}

export default forwardRef(PaymentToggleButton);

폼에서 결제 수단 정보를 가져오려면 코드를 아래와 같이 수정합니다. ([데이터 속성 사용하기](https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes) 참고)

CreateRoom.jsx

const paymentValue = paymentRef.current**.dataset.payment**;
console.log(paymentValue); // '계좌 이체' or '만나서 결제'

FRONTENDSCHOOL6 / ready-act

[R09M App] CreateRoom 페이지 - 토글 버튼 제작 이슈 #20

내용

웹 표준/접근성 이슈

문제 해결