[4주차] 이승연 과제 제출합니다.

README.md

@@ -66,3 +66,170 @@
 - [[영상] : 컴포넌트에 대한 이해](https://www.youtube.com/watch?v=21eiJc90ggo)
 - [Tailwind CSS 사용법](https://www.heropy.dev/p/E67ZHS)
 - [ts 절대경로 설정하기](https://tesseractjh.tistory.com/232)
+
+## **Project Tree**
+
+```
+ceos.week3.react-messenger-23rd
+├─ react-messenger-23rd
+│  ├─ .prettierrc
+│  ├─ dist
+│  │  ├─ assets
+│  │  │  ├─ index-BZvjYWlK.css
+│  │  │  └─ index-DuB9fP3j.js
+│  │  ├─ favicon.svg
+│  │  ├─ icons.svg
+│  │  ├─ images
+│  │  │  ├─ Frame 73.svg
+│  │  │  └─ user-02.svg
+│  │  └─ index.html
+│  ├─ eslint.config.js
+│  ├─ index.html
+│  ├─ package-lock.json
+│  ├─ package.json
+│  ├─ public
+│  │  ├─ favicon.svg
+│  │  ├─ icons.svg
+│  │  └─ images
+│  │     ├─ Frame 73.svg
+│  │     └─ user-02.svg
+│  ├─ README.md
+│  ├─ src
+│  │  ├─ app
+│  │  │  └─ styles
+│  │  │     └─ index.css
+│  │  ├─ App.tsx
+│  │  ├─ entities
+│  │  │  ├─ chat-room
+│  │  │  │  └─ model
+│  │  │  │     ├─ chatRooms.json
+│  │  │  │     └─ types.ts
+│  │  │  ├─ message
+│  │  │  │  ├─ model
+│  │  │  │  │  ├─ messages.json
+│  │  │  │  │  └─ types.ts
+│  │  │  │  └─ ui
+│  │  │  │     └─ MessageBubble.tsx
+│  │  │  └─ user
+│  │  │     └─ model
+│  │  │        ├─ types.ts
+│  │  │        └─ users.json
+│  │  ├─ features
+│  │  │  ├─ create-chat-room
+│  │  │  │  ├─ model
+│  │  │  │  └─ ui
+│  │  │  ├─ send-message
+│  │  │  │  ├─ model
+│  │  │  │  └─ ui
+│  │  │  └─ upload-image
+│  │  │     ├─ model
+│  │  │     └─ ui
+│  │  ├─ main.tsx
+│  │  ├─ pages
+│  │  │  ├─ chat-list
+│  │  │  │  ├─ model
+│  │  │  │  └─ ui
+│  │  │  │     └─ ChatListPage.tsx
+│  │  │  ├─ chat-room
+│  │  │  │  ├─ model
+│  │  │  │  └─ ui
+│  │  │  │     └─ ChatRoomPage.tsx
+│  │  │  ├─ friends
+│  │  │  │  ├─ model
+│  │  │  │  └─ ui
+│  │  │  │     └─ FriendsPage.tsx
+│  │  │  └─ my-profile
+│  │  │     ├─ model
+│  │  │     └─ ui
+│  │  │        └─ MyProfilePage.tsx
+│  │  ├─ shared
+│  │  │  ├─ assets
+│  │  │  │  └─ icons
+│  │  │  │     ├─ chat-list
+│  │  │  │     │  ├─ compass-03.svg
+│  │  │  │     │  ├─ Icon.svg
+│  │  │  │     │  ├─ new chatting(24_24).svg
+│  │  │  │     │  ├─ search(20_20).svg
+│  │  │  │     │  ├─ settings-02.svg
+│  │  │  │     │  ├─ Toggle.svg
+│  │  │  │     │  ├─ user-02.svg
+│  │  │  │     │  ├─ user-circle.svg
+│  │  │  │     │  └─ users-01.svg
+│  │  │  │     ├─ chat-room
+│  │  │  │     │  ├─ face-smile.svg
+│  │  │  │     │  ├─ Frame 73.svg
+│  │  │  │     │  ├─ hamburger(24_24).svg
+│  │  │  │     │  ├─ microphone-01.svg
+│  │  │  │     │  ├─ My_Text Box
+│  │  │  │     │  │  └─ Back (32_32).svg
+│  │  │  │     │  ├─ plus.svg
+│  │  │  │     │  ├─ search(24_24).svg
+│  │  │  │     │  └─ Status Bar
+│  │  │  │     │     ├─ Elements
+│  │  │  │     │     │  ├─ Battery.svg
+│  │  │  │     │     │  ├─ Connection.svg
+│  │  │  │     │     │  └─ Signal.svg
+│  │  │  │     │     └─ Mic & Cam.svg
+│  │  │  │     ├─ chattingRoom
+│  │  │  │     │  ├─ arrow-narrow-up.svg
+│  │  │  │     │  ├─ face-smile.svg
+│  │  │  │     │  ├─ Frame 73.svg
+│  │  │  │     │  ├─ hamburger(24_24).svg
+│  │  │  │     │  ├─ microphone-01.svg
+│  │  │  │     │  ├─ My_Text Box
+│  │  │  │     │  │  └─ Back (32_32).svg
+│  │  │  │     │  ├─ plus.svg
+│  │  │  │     │  ├─ search(24_24).svg
+│  │  │  │     │  └─ Status Bar
+│  │  │  │     │     ├─ Elements
+│  │  │  │     │     │  ├─ Battery.svg
+│  │  │  │     │     │  ├─ Connection.svg
+│  │  │  │     │     │  └─ Signal.svg
+│  │  │  │     │     └─ Mic & Cam.svg
+│  │  │  │     └─ friends
+│  │  │  │        ├─ folder-download.svg
+│  │  │  │        ├─ message-question-circle(24_24).svg
+│  │  │  │        ├─ notification-message (1).svg
+│  │  │  │        ├─ notification-message.svg
+│  │  │  │        ├─ plus.svg
+│  │  │  │        ├─ rightside(24_24).svg
+│  │  │  │        ├─ search(24_24).svg
+│  │  │  │        ├─ upside(24_24).svg
+│  │  │  │        ├─ user-02.svg
+│  │  │  │        └─ user-plus(24_24).svg
+│  │  │  ├─ constants
+│  │  │  ├─ lib
+│  │  │  └─ ui
+│  │  │     ├─ MobileLayout.tsx
+│  │  │     └─ StatusBar.tsx
+│  │  └─ widgets
+│  │     ├─ chat-list
+│  │     │  ├─ model
+│  │     │  └─ ui
+│  │     │     ├─ BottomTabBar.tsx
+│  │     │     ├─ ChatListHeader.tsx
+│  │     │     ├─ ChatListSearch.tsx
+│  │     │     ├─ ChatRoomItem.tsx
+│  │     │     └─ ChatRoomList.tsx
+│  │     ├─ chat-room
+│  │     │  ├─ model
+│  │     │  └─ ui
+│  │     │     ├─ ChatRoomHeader.tsx
+│  │     │     ├─ DateDivider.tsx
+│  │     │     ├─ MessageInputBar.tsx
+│  │     │     └─ MessageList.tsx
+│  │     └─ friends
+│  │        ├─ model
+│  │        └─ ui
+│  │           ├─ FriendItem.tsx
+│  │           ├─ FriendsHeader.tsx
+│  │           ├─ FriendsList.tsx
+│  │           ├─ MyProfileSection.tsx
+│  │           └─ TagSection.tsx
+│  ├─ tsconfig.app.json
+│  ├─ tsconfig.json
+│  ├─ tsconfig.node.json
+│  └─ vite.config.ts
+└─ README.md
+
+```

react-messenger-23rd/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

react-messenger-23rd/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "htmlWhitespaceSensitivity": "ignore",
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true,
+  "endOfLine": "lf"
+}

react-messenger-23rd/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

react-messenger-23rd/eslint.config.js

@@ -0,0 +1,31 @@
+import js from '@eslint/js';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx,js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+    },
+  },
+]);

react-messenger-23rd/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-messenger-23rd</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>