From 8b8779341d7c8d34cb761fd51a6431dad70fcad1 Mon Sep 17 00:00:00 2001
From: soramea <soraquyia@gmail.com>
Date: Mon, 23 Dec 2024 18:56:18 +0900
Subject: [PATCH 1/2] =?UTF-8?q?textinput=20=E3=81=AE=E4=B8=8B=E5=9C=B0?=
 =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/components/TextInput.vue | 30 +++++++++++++++++++++++++++++
 src/styles/common.scss              |  2 ++
 2 files changed, 32 insertions(+)
 create mode 100644 src/shared/components/TextInput.vue

diff --git a/src/shared/components/TextInput.vue b/src/shared/components/TextInput.vue
new file mode 100644
index 0000000..008711f
--- /dev/null
+++ b/src/shared/components/TextInput.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  placeholder: string;
+  size: number;
+}>();
+</script>
+
+<template>
+  <input
+    type="text"
+    class="text-input"
+    :size="props.size"
+    :placeholder="props.placeholder"
+  />
+</template>
+<style lang="scss" scoped>
+.text-input {
+  height: 24px;
+  border-radius: 4px;
+  border-color: $color-border;
+  border: 1px solid;
+}
+.text-input::placeholder {
+  font-size: 16px;
+  font-weight: 500;
+  color: $color-text-placeholder;
+}
+</style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 73b676e..ab68044 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -8,6 +8,7 @@ $color-secondary: #e2e2e2;
 $color-secondary-hover: #f0f0f0;
 $color-secondary-disabled: #c9cac9;
 
+$color-border: #414143;
 $color-border-hover: #2b2b2b;
 $color-error: #ff4500;
 
@@ -18,6 +19,7 @@ $color-text-secondary-pale: #5151515d;
 $color-text-secondary-disabled: #939393;
 $color-text-white: #ffffff;
 $color-text-dimmed: #626264;
+$color-text-placeholder: #757578;
 
 $color-container-primary: #dcefdd;
 $color-container-secondary: #f1f1f4;

From 60aecdc0a493ea01d450bf5e79fba9136e963d4a Mon Sep 17 00:00:00 2001
From: soramea <soraquyia@gmail.com>
Date: Wed, 25 Dec 2024 08:56:13 +0900
Subject: [PATCH 2/2] add slot

---
 src/shared/components/TextInput.vue | 36 +++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/shared/components/TextInput.vue b/src/shared/components/TextInput.vue
index 008711f..cc2d4b3 100644
--- a/src/shared/components/TextInput.vue
+++ b/src/shared/components/TextInput.vue
@@ -8,23 +8,39 @@ const props = defineProps<{
 </script>
 
 <template>
-  <input
-    type="text"
-    class="text-input"
-    :size="props.size"
-    :placeholder="props.placeholder"
-  />
+  <div class="background">
+    <slot name="left" />
+    <input
+      type="text"
+      class="text-input"
+      :size="props.size"
+      :placeholder="props.placeholder"
+    />
+    <slot name="right" />
+  </div>
 </template>
+
 <style lang="scss" scoped>
-.text-input {
-  height: 24px;
-  border-radius: 4px;
+.background {
+  display: inline flex;
+  gap: 8px;
+  height: 32px;
+  align-items: center;
+  padding: 8px 16px;
   border-color: $color-border;
   border: 1px solid;
+  border-radius: 4px;
 }
-.text-input::placeholder {
+.text-input {
+  height: 32px;
+  border: none;
+  outline: 0;
   font-size: 16px;
   font-weight: 500;
+  background-color: transparent;
+}
+.text-input::placeholder {
   color: $color-text-placeholder;
+  opacity: 1;
 }
 </style>