kisubootcamp · YongJaeHyun · Jan 9, 2025
diff --git a/learn-vue/20250108/saramin-composition/.gitignore b/learn-vue/20250108/saramin-composition/.gitignore
@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+.env
+.env.*
+package-lock.json
+.vscode
diff --git a/learn-vue/20250108/saramin-composition/README.md b/learn-vue/20250108/saramin-composition/README.md
@@ -0,0 +1,29 @@
+# vue_todo
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
diff --git a/learn-vue/20250108/saramin-composition/index.html b/learn-vue/20250108/saramin-composition/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/learn-vue/20250108/saramin-composition/jsconfig.json b/learn-vue/20250108/saramin-composition/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/learn-vue/20250108/saramin-composition/package.json b/learn-vue/20250108/saramin-composition/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vue_todo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.5",
+    "vite-plugin-vue-devtools": "^7.6.8"
+  }
+}
diff --git a/learn-vue/20250108/saramin-composition/postcss.config.js b/learn-vue/20250108/saramin-composition/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/learn-vue/20250108/saramin-composition/public/favicon.ico b/learn-vue/20250108/saramin-composition/public/favicon.ico
diff --git a/learn-vue/20250108/saramin-composition/src/App.vue b/learn-vue/20250108/saramin-composition/src/App.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { computed, ref } from "vue";
+
+const inputText = ref("");
+const inputLength = computed(() => inputText.value.length);
+const inputBytes = computed(() =>
+  inputText.value.split("").reduce((acc, cur) => acc + (cur.charCodeAt(0) > 127 ? 2 : 1), 0)
+);
+const inputWithoutEmptyLength = computed(() => inputText.value.replaceAll(" ", "").length);
+const inputWithoutEmptyBytes = computed(() =>
+  inputText.value
+    .replaceAll(" ", "")
+    .split("")
+    .reduce((acc, cur) => acc + (cur.charCodeAt(0) > 127 ? 2 : 1), 0)
+);
+
+const handleChange = (event) => {
+  inputText.value = event.target.value;
+};
+const copyText = () => {
+  if (navigator.clipboard) {
+    navigator.clipboard
+      .writeText(this.inputText)
+      .then(() => {
+        alert("복사되었습니다.");
+      })
+      .catch((err) => {
+        alert("복사에 실패했습니다.", err.message);
+      });
+  } else {
+    // 구형 브라우저
+    const textArea = document.createElement("textarea");
+    textArea.value = this.inputText;
+    document.body.appendChild(textArea);
+    textArea.select();
+    const successful = document.execCommand("copy");
+    document.body.removeChild(textArea);
+
+    if (successful) {
+      alert("복사에 성공했습니다.");
+    } else {
+      alert("복사 실패");
+    }
+  }
+};
+const clear = () => {
+  inputText.value = "";
+};
+</script>
+<template>
+  <div class="saramin">
+    <h1>글자수세기</h1>
+    <div class="box">
+      <div class="string-length">
+        <textarea
+          placeholder="내용을 입력해주세요"
+          :value="inputText"
+          @input="handleChange"
+        ></textarea>
+      </div>
+      <div class="str-info">
+        <p>
+          공백 포함 <span>{{ inputLength }}</span> 자 | <span>{{ inputBytes }}</span> byte
+        </p>
+        <p>
+          공백 제외 <span>{{ inputWithoutEmptyLength }}</span> 자 |
+          <span>{{ inputWithoutEmptyBytes }}</span> byte
+        </p>
+      </div>
+      <div class="btn-area">
+        <button @click="copyText">전체복사</button>
+        <button @click="clear">초기화</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.saramin {
+  width: 564px;
+  margin: 100px auto;
+}
+
+.saramin .box {
+  border-top: 1px solid #676767;
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-block: 1px solid #ddd;
+}
+
+.saramin h1 {
+  font-size: 32px;
+  margin-bottom: 50px;
+  line-height: 1;
+  font-weight: normal;
+}
+
+.saramin .string-length {
+  padding: 30px;
+}
+
+.saramin .string-length textarea {
+  width: 100%;
+  height: 400px;
+  border: none;
+}
+
+.saramin .str-info {
+  border-top: 1px solid #ebebeb;
+  padding: 0 22px;
+  font-size: 14px;
+  margin: 0px 8px;
+}
+
+.saramin .str-info span {
+  font-size: 15px;
+  color: #ff662f;
+  font-weight: bold;
+}
+
+.saramin .btn-area {
+  background-color: #fbfbfb;
+  padding: 35px 0;
+  text-align: center;
+}
+
+.saramin .btn-area button {
+  background: transparent;
+  border: 1px solid #d9d9d9;
+  width: 160px;
+  height: 40px;
+  margin: 0 2px;
+}
+
+.saramin .btn-area button:nth-child(1) {
+  background-color: #9c9c9c;
+  color: white;
+}
+</style>
diff --git a/learn-vue/20250108/saramin-composition/src/main.js b/learn-vue/20250108/saramin-composition/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/learn-vue/20250108/saramin-composition/tailwind.config.js b/learn-vue/20250108/saramin-composition/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/learn-vue/20250108/saramin-composition/vite.config.js b/learn-vue/20250108/saramin-composition/vite.config.js
@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})