add/tree-detail-tooltip-63

src/components/commons/CpButton.stories copy.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import CpButton from "./CpButton.vue";
+
+const meta: Meta<typeof CpButton> = {
+  title: "CpButton",
+  component: CpButton,
+};
+
+//👇 This default export determines where your story goes in the story list
+export default meta;
+// type Story = StoryObj<typeof CpButton>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Solid: StoryObj<{ type: string }> = {
+  render: (args) => ({
+    components: { CpButton },
+    setup() {
+      return { args };
+    },
+    template: '<cp-button v-bind="args">Solid</cp-button>',
+  }),
+  args: {
+    type: "solid",
+  },
+};
+
+export const Outlined: StoryObj<{ type: string }> = {
+  render: (args) => ({
+    components: { CpButton },
+    setup() {
+      return { args };
+    },
+    template: '<cp-button v-bind="args">Outlined</cp-button>',
+  }),
+  args: {
+    type: "outlined",
+  },
+};

src/components/commons/CpIconCircleButton.vue

@@ -3,6 +3,7 @@
     정은우 
  -->
 <template>
+  <el-tooltip :content="tooltipContent" placement="top" :disabled="tooltipDisabled" effect="light">
   <el-button
     circle
     :class="classArr"
@@ -12,11 +13,12 @@
   >
     <slot />
   </el-button>
+  </el-tooltip>
 </template>
 
 <script setup lang="ts">
 import { defineProps, defineEmits, computed } from "vue";
-import { ElButton } from "element-plus";
+import { ElButton, ElTooltip} from "element-plus";
 
 const props = withDefaults(
   defineProps<{
@@ -27,6 +29,8 @@ const props = withDefaults(
     width?: string;
     height?: string;
     disabled?: boolean;
+    tooltipDisabled?: boolean|undefined;
+    tooltipContent?: string;
   }>(),
   {
     classArr: () => ["cp-text-title-2"],
@@ -37,6 +41,8 @@ const props = withDefaults(
     height: "56px",
     disabled: false,
     display: "flex",
+    tooltipDisabled: true,
+    tooltipContent: "내용을 입력해주세요."
   },
 );
 defineEmits<{

src/components/tree/detail/TreeDetailFooter.vue

@@ -5,6 +5,8 @@
         class="create-tree-item"
         bg-color="var(--cp-color-white)"
         hover-bg-color="var(--cp-color-white)"
+        :tooltipDisabled=false
+        tooltipContent="편지 쓰기"
         @click="$emit('create:treeItem')"
       >
         <icon-add-post />
@@ -13,6 +15,8 @@
         class="tree-link"
         bg-color="var(--cp-color-white)"
         hover-bg-color="var(--cp-color-white)"
+        :tooltipDisabled=false
+        tooltipContent="친구 초대"
         @click="$emit('link')"
       >
         <icon-invite />
@@ -22,12 +26,14 @@
         class="tree-share"
         bg-color="var(--cp-color-white)"
         hover-bg-color="var(--cp-color-white)"
+        :tooltipDisabled=false
+        tooltipContent="트리 공유하기"
         @click="$emit('share')"
       >
         <icon-share />
       </cp-icon-circle-button>
     </div>
-    <cp-icon-circle-button class="entire-button" @click="isOpen = !isOpen">
+    <cp-icon-circle-button class="entire-button"  @click="isOpen = !isOpen">
       <icon-plus v-if="!isOpen" fillColor="var(--cp-color-white)" />
       <icon-close v-else fillColor="var(--cp-color-white)" />
     </cp-icon-circle-button>