[vue3] 셀렉트 박스 직접 만들기 scss

<div class="related" @click="st.relatedDropdown = !st.relatedDropdown">
	<div>관련기관<img src="/img/icon_under.svg" :class="{show: st.relatedDropdown}"/></div>
	<ul class="dropdown" :class="{show: st.relatedDropdown}">
		<li @click="goBrowser(`https://www.koicd.kr/kcd/kcds.do`)">								<img class="icon"src="/img/logo_disease_information_center.svg"/>
		</li> 
		<li @click="goBrowser(`https://www.klia.or.kr/`)">
			<img class="icon" src="/img/logo_life_insurance_association.svg"/>
		</li>
		<li @click="goBrowser(`https://kpub.knia.or.kr/main.do`)">
			<img class="icon" src="/img/logo_general_insurance_association.svg"/>
		</li>
		<li @click="goBrowser(`https://www.in.or.kr/`)">
			<img class="icon" src="/img/logo_insurance_training.svg"/>
		</li>
	</ul>
</div>

//vue3
<script setup lang="ts">
import {onUpdated, reactive} from "vue";

const st = reactive({
	relatedDropdown: false,
})
</script>

			.related {
				margin: 2rem;
				border-radius: 8px;
				border: 1px solid $light-grey-2;
				height: auto;
				text-align: left;

				font-size: 1.2rem;
				line-height: 1.6rem;
				color: $dark-grey;

				& > div {
					padding: 1.2rem;
					display: flex;
					justify-content: space-between;

					img {
						display: block;

						&.show {
							transform: scaleY(-1);
						}
					}
				}

				& ul {
					padding: 0;
				}

				& li {
					border-top: 1px solid $light-grey-2;
					padding: 1.2rem;
					margin-right: auto;

					img {
						height: 1.6rem;
					}

					&:first-of-type {
						img {
							height: 1rem;
						}
					}
				}
			}