+
+
+ {!isChatRoom && (
+
+
+
+ )}
+ 
+
+| 스플래시 | +채팅 리스트 | +연락처 | +
| 채팅방 | +프로필 | +설정 | +
| UI 컴포넌트 모듈화 및 상태 변화에 따른 효율적인 렌더링을 위해 도입 |
+| Language | 
| 복잡한 메신저 데이터 구조를 정적 타입으로 명확히 정의하여 런타임 에러를 방지하기 위해 도입 |
+| Build Tool | 
| HMR을 통한 빠른 개발 서버 구축과 효율적인 빌드 환경 구성을 위해 사용 |
+| Styling | 
| 유틸리티 클래스 기반으로 일관된 디자인 시스템을 직관적이고 빠르게 적용하기 위해 사용 |
+| Utility | 
| 조건부 클래스 조합(clsx) 및 충돌하는 Tailwind 클래스 자동 병합(tailwind-merge)을 위해 사용 |
+| UI | 
| 로딩 상태 표시를 위한 스피너 컴포넌트를 활용하기 위해 사용 |
+| State | 
| 복잡한 채팅 데이터를 가볍게 전역 관리하고, persist 미들웨어 + 커스텀 어댑터로 채팅방별 독립 스토리지 운용 |
+| Routing | 
| SPA 환경에서 뷰 전환을 매끄럽게 처리하기 위한 클라이언트 사이드 라우팅에 사용 |
+| Animation | 
| 스플래시 등 서비스의 완성도를 높이는 자연스러운 UI 애니메이션과 전환 효과를 구현하기 위해 사용 |
+| SVG | 
| SVG를 React 컴포넌트로 변환하고, `dimensions: false` 옵션으로 사용처에서 크기를 자유롭게 제어하기 위해 사용 |
+| Linting | 
| 코드 컨벤션을 일정하게 유지하고 잠재적인 안티 패턴을 사전에 식별하기 위해 사용 |
+| Formatting | 
| 코드 포맷을 자동으로 통일하여 협업 시 가독성과 유지보수성을 극대화하기 위해 사용 |
+| Git Hooks | 
| 커밋 전 린트 및 포맷 검사를 자동화하여 안정적인 코드 품질을 강제하기 위해 도입 |
+| Package | 
| 프로젝트 의존성 관리 및 빌드 스크립트 실행을 위해 사용 |
+| Deploy | 
| 깃허브 연동을 통한 지속적 배포(CD) 및 빠른 서비스 결과물 호스팅을 위해 사용 |
+
+## 👩🏻💻 실행 방법
+
+```bash
+git clone -b waldls https://github.com/waldls/react-messenger-23rd.git
+cd react-messenger-23rd
+npm install
+npm run dev
+```
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..afaeb411
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,70 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+import prettierPlugin from "eslint-plugin-prettier";
+import eslintConfigPrettier from "eslint-config-prettier";
+import importPlugin from "eslint-plugin-import";
+import reactPlugin from "eslint-plugin-react";
+
+export default defineConfig([
+ globalIgnores(["dist", "node_modules", "public"]),
+ {
+ files: ["**/*.{ts,tsx}"],
+ extends: [
+ js.configs.recommended,
+ ...tseslint.configs.recommended,
+ reactHooks.configs.flat.recommended,
+ reactPlugin.configs.flat.recommended,
+ ],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: {
+ ...globals.browser,
+ ...globals.node,
+ },
+ parser: tseslint.parser,
+ parserOptions: {
+ ecmaFeatures: { jsx: true },
+ },
+ },
+ plugins: {
+ "react-refresh": reactRefresh,
+ import: importPlugin,
+ prettier: prettierPlugin,
+ },
+ settings: {
+ "import/resolver": {
+ typescript: true,
+ node: true,
+ },
+ },
+ rules: {
+ "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+ "import/order": [
+ "error",
+ {
+ groups: [
+ "builtin",
+ "external",
+ "internal",
+ ["parent", "sibling", "index"],
+ "object",
+ "type",
+ ],
+ pathGroups: [{ pattern: "@/**", group: "internal" }],
+ pathGroupsExcludedImportTypes: ["builtin"],
+ "newlines-between": "always",
+ alphabetize: { order: "asc", caseInsensitive: true },
+ },
+ ],
+ "prettier/prettier": "error",
+ "react/react-in-jsx-scope": "off",
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": ["warn"],
+ },
+ },
+ eslintConfigPrettier,
+]);
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..cd3996af
--- /dev/null
+++ b/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ 404
+페이지를 찾을 수 없어요
+{me.name}
++82 10-1234-5678
+준비중이예요!
+Telegram
+