아이콘 텍스트 입력

<div class="fieldset">
	
	<div class="form-group">
		<div class="form-tit">
			<label for="login_pw">레이블</label>
		</div>
		<div class="form-conts btn-ico-wrap">
			<input type="password" id="login_pw" class="krds-input" placeholder="8-12자의 영문자, 숫자, 특수문자 조합" value="1234567890">
			<button type="button" class="krds-btn medium icon">
				<span class="sr-only">입력한 비밀번호 보기</span>
				<i class="svg-icon ico-pw-visible"></i>
			</button>
		</div>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="login_pw2">레이블</label>
		</div>
		<div class="form-conts btn-ico-wrap">
			<input type="text" id="login_pw2" class="krds-input" placeholder="8-12자의 영문자, 숫자, 특수문자 조합" value="1234567890">
			<button type="button" class="krds-btn medium icon">
				<span class="sr-only">입력한 비밀번호 가리기</span>
				<i class="svg-icon ico-pw-visible-on"></i>
			</button>
		</div>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="form_delete">레이블</label>
		</div>
		<div class="form-conts btn-ico-wrap" data-delete="true">
			<input type="text" id="form_delete" class="krds-input" placeholder="내용을 입력하세요">
			<button type="button" class="krds-btn medium icon pure btn-delete-input">
				<span class="sr-only">내용 삭제</span>
				<i class="svg-icon ico-delete-fill"></i>
			</button>
		</div>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="form_btn_multiple">레이블</label>
		</div>
		<div class="form-conts btn-ico-wrap" data-delete="true">
			<input type="password" id="form_btn_multiple" class="krds-input" placeholder="8-12자의 영문자, 숫자, 특수문자 조합" value="1234567890">
			<div class="btn-group">
				<button type="button" class="krds-btn medium icon pure btn-delete-input">
					<span class="sr-only">내용 삭제</span>
					<i class="svg-icon ico-delete-fill"></i>
				</button>
				<button type="button" class="krds-btn medium icon">
					<span class="sr-only">입력한 비밀번호 보기</span>
					<i class="svg-icon ico-pw-visible"></i>
				</button>
			</div>
		</div>
	</div>
	
</div>

<template>
  <div class="fieldset">
	
	<div class="form-group">
		<div class="form-tit">
			<label for="login_pw">레이블</label>
		</div>
		<div class="form-conts btn-ico-wrap">
			<input type="password" id="login_pw" class="krds-input" placeholder="8-12자의 영문자, 숫자, 특수문자 조합" value="1234567890">
			<button type="button" class="krds-btn medium icon">
				<span class="sr-only">입력한 비밀번호 보기</span>
				<i class="svg-icon ico-pw-visible"></i>
			</button>
		</div>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="login_pw2">레이블</label>
		</div>
		<div class="form-conts btn-ico-wrap">
			<input type="text" id="login_pw2" class="krds-input" placeholder="8-12자의 영문자, 숫자, 특수문자 조합" value="1234567890">
			<button type="button" class="krds-btn medium icon">
				<span class="sr-only">입력한 비밀번호 가리기</span>
				<i class="svg-icon ico-pw-visible-on"></i>
			</button>
		</div>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="form_delete">레이블</label>
		</div>
		<div class="form-conts btn-ico-wrap" data-delete="true">
			<input type="text" id="form_delete" class="krds-input" placeholder="내용을 입력하세요">
			<button type="button" class="krds-btn medium icon pure btn-delete-input">
				<span class="sr-only">내용 삭제</span>
				<i class="svg-icon ico-delete-fill"></i>
			</button>
		</div>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="form_btn_multiple">레이블</label>
		</div>
		<div class="form-conts btn-ico-wrap" data-delete="true">
			<input type="password" id="form_btn_multiple" class="krds-input" placeholder="8-12자의 영문자, 숫자, 특수문자 조합" value="1234567890">
			<div class="btn-group">
				<button type="button" class="krds-btn medium icon pure btn-delete-input">
					<span class="sr-only">내용 삭제</span>
					<i class="svg-icon ico-delete-fill"></i>
				</button>
				<button type="button" class="krds-btn medium icon">
					<span class="sr-only">입력한 비밀번호 보기</span>
					<i class="svg-icon ico-pw-visible"></i>
				</button>
			</div>
		</div>
	</div>
	
</div>
</template>

<script setup lang="ts">
// 아이콘 텍스트 입력 컴포넌트
// 아이콘이 포함된 텍스트 입력 필드입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>