CodeItTwo · Bangdayeon · Sep 23, 2025
diff --git a/project-01/방다연/.gitignore b/project-01/방다연/.gitignore
@@ -0,0 +1,60 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+/.idea/
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.eslintcache
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.fleet/settings.json
+
+# sitemap
+/public/robots.txt
+/public/sitemap*.xml
+*storybook.log
+.cache/
+.vscode/
+
+
+tests/videos/*
+screenshots/*
+
+# Sentry Config File
+.env.sentry-build-plugin
+
+.claude/
diff --git a/project-01/방다연/README.md b/project-01/방다연/README.md
@@ -0,0 +1,74 @@
+# 문자열 비교하기 📝
+
+## 실행 
+```angular2html
+ project-01/"홍길동" 이동 
+
+ npm install
+ npm run dev    
+```
+
+입력값(Input)과 제시 문자열(WORD)을 비교하여
+1) 같은 글자 수를 세고
+2) 완전히 일치하면 `Collect` UI를 노출하는 기능을 단계별로 구현합니다.
+
+---
+
+## Step 1 — 같은 글자 수 표시하기
+
+### 설명
+- 사용자가 `<input>`에 문자를 입력하면, 고정된 `WORDS`와의 **같은 글자 수(빈도 기반 겹침)** 를 계산해 화면에 표시합니다.
+- **빈도 기반 겹침**: 각 문자에 대해 `min(WORDS에서의 개수, 입력값에서의 개수)` 를 모두 더한 값입니다.
+
+### 조건
+- 입력창은 Input 으로 동작한다.
+- `WORDS`는 코드 상수로 고정한다.
+- 같은 글자 수가 실시간으로 표시된다.
+
+### 예시
+- `WORDS = "apple"`, 입력: `"peal"` → **4**
+- `WORDS = "apple"`, 입력: `"pepper"` → **3**
+- `WORDS = "apple"`, 입력: `""` → **0**
+
+---
+
+## Step 2 — 완전 일치 시 Collect 노출
+
+### 설명
+- Step 1의 UI에 **완전 일치 여부**를 추가합니다.
+- 입력값이 `WORDS`와 완전히 동일하면 `🎉 Collect!` 텍스트를 uidp 표시합니다.
+
+### 조건
+- 입력값이 `WORDS`와 완전히 일치할 때만 `🎉 Collect!`가 표시된다.
+- 일치하지 않을 경우 안내 문구가 보인다.
+
+### 예시
+- `WORDS = "apple"`, 입력: `"apple"` → `🎉 Collect!` 표시
+- `WORDS = "apple"`, 입력: `"Apple"` → `불일치`
+
+---
+
+## Step 3 — WORD 동적 입력 + 동일 로직 유지
+
+### 설명
+- `WORDS`를 상수가 아닌 **사용자가 입력하는 타깃 문자열**로 변경합니다.
+- 입력창을 두 개로 분리합니다.
+    1. Target WORD 입력
+    2. Your Input (사용자 입력)
+- Step 1·2의 로직이 어떤 문자열에도 적용됩니다.
+
+### 조건
+- 타깃과 사용자 입력 두 개의 상태를 가진다.
+- 같은 글자 수(빈도 기반 겹침)가 실시간으로 갱신된다.
+- 두 문자열이 완전히 동일할 때만 `🎉 Collect!`가 표시된다.
+
+### 예시
+- 타깃: `"banana"`, 입력: `"aaab"` → **3**
+- 타깃: `"hello"`, 입력: `"hello"` → `🎉 Collect!` 표시
+
+---
+
+## 체크리스트
+- [ ] Step 1: 같은 글자 수 계산 및 표시
+- [ ] Step 2: 완전 일치 시 Collect 표시
+- [ ] Step 3: WORD 동적 입력 + 동일 로직 유지  
diff --git a/project-01/방다연/index.html b/project-01/방다연/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Character Matching Game</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>