diff --git a/README.md b/README.md
index 82b92ad..0843903 100644
--- a/README.md
+++ b/README.md
@@ -1,66 +1,98 @@
-# 서론
+# 🥳 배포 링크
 
-안녕하세요 🙌🏻 19기 프론트 운영진 배성준입니다. 이번 미션에서는 드디어 투두리스트에서 벗어나 새로운 프로젝트인 **messenger** 만들기를 진행합니다.
+https://react-messenger-19th-taupe.vercel.app/
 
-이번주는 특별히 **디자이너와의 협업**으로 진행되는 미션입니다. 디자이너분께서 열심히 리디자인 한 메신저 프로젝트를 여러분들께서 구현해주시면 됩니다.
+# ⚙️ 구현 기능
 
-동시에, 이번주부터는 새로 **TypeScript**를 적용해보려고 합니다.
+<img width="740" alt="image" src="https://github.com/CEOS-Developers/react-messenger-19th/assets/101055312/e51b414e-857d-4244-9360-61e587c41cf7">
 
-프로젝트의 규모가 커지게 될 수록, 컴포넌트가 가지는 props의 종류 또한 다양해지게 됩니다. 무지성 코딩을 하다보면 가끔 이 props의 구성과 이름, 어떤 타입이 들어가야 하는지 헷갈리기 마련이죠. 보통 그럴 때 다시 컴포넌트 정의 부분으로 돌아가 props의 구성을 보고 오곤 합니다.
+![화면 기록 2024-03-29 오후 9 20 44 (1)](https://github.com/CEOS-Developers/react-messenger-19th/assets/101055312/f5128e75-1798-4afd-b183-713668a26bb6)
 
-하지만 이럴 때, typescript를 적용한다면 컴포넌트의 구성과 그 이름, 심지어 타입까지 한번에 자동완성으로 편리하게 관리할 수 있고, 생산성이 증대되겠죠.
+## React Hooks 사용
 
-또한, **React Hooks**에 조금 더 익숙해지는 것을 목표로 합니다. 여러 Hook들이 있지만 그 중에서도 `useState`, `useEffect`, `useRef`를 중점적으로 사용해 보는 미션인데요, React를 사용하면서 굉장히 자주 쓰이는 Hook들이기 때문에 이 부분을 집중적으로 공부해 보아요!
+1. **useState**: ChatBottom 컴포넌트에서 사용자가 입력한 메시지 값을 관리 등 컴포넌트의 상태를 관리하기 위해 사용했습니다.
+2. **useEffect**: UI와 관련 없는 부수 효과를 수행하기 위해 사용했습니다. 예시로, ChattingRoom 컴포넌트가 마운트될 때 서버에서 메시지 목록을 불러오거나, 메시지 목록이 업데이트될 때마다 자동으로 스크롤 위치를 조정할 때 사용했습니다.
+3. **useRef**: DOM 요소에 직접 접근하기 위해 사용되는 훅입니다. 새 메시지가 추가될 때마다 채팅 목록의 스크롤을 가장 아래로 이동시키기 위해 messagesEndRef를 사용했습니다.
 
-그럼 이번 미션도 파이팅입니다!!🎉
+- 작동 방식 : messagesEndRef는 채팅 목록 끝 참조 → useEffect 훅을 통해, 메시지가 추가될 때마다, current가 가리키는 DOM 요소(채팅 목록 끝)로 스크롤을 이동시킴
 
-# 미션
+```typescript
+const messagesEndRef = useRef<HTMLDivElement | null>(null);
 
-## Key Questions
+//..
+useEffect(() => {
+	// 메시지가 추가될 때마다 스크롤을 하단으로 이동
+	messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+}, [messages]);
+```
 
-- JavaScript를 사용할때에 비해 TypeScript를 사용할 때의 장점은 무엇인가요?
-- 디자이너로부터 전달받은 피그마 링크 혹은, 피그마 캡처본
-- 컴포넌트를 분리한 기준은 무엇인가요?
-- 디자인 시스템을 적용하면서 느낀 점은 무엇인가요?
-- 디자이너와 소통하며 느낀점은 무엇인가요?
+# ✅ Key Questions
 
-## 미션 목표
+## JavaScript를 사용할때에 비해 TypeScript를 사용할 때의 장점은 무엇인가요?
 
-- TypeScript를 사용해봅시다.
-- useState로 컴포넌트의 상태를 관리합니다.
-- useEffect와 useRef의 사용법을 이해합니다.
-- styled-components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법에 익숙해집니다.
+1. 타입 체크를 통한 오류 예방
 
-## 기한
+```typescript
+interface Message {
+	id: number;
+	from: string;
+	content: string;
+	date: string;
+}
 
-2024년 3월 29일 금요일
+interface ChatBodyProps {
+	messages: Message[];
+	currentUser: string;
+	userImage: string;
+}
 
-## 필수 구현 기능
+const [messages, setMessages] = useState<Message[]>([]);
+```
 
-- 피그마를 보고 [결과화면](https://3th-fb-messenger.netlify.app)과 같이 구현합니다.
-- 디자인 시스템을 구축합니다.
-- 채팅방 상단의 프로필을 클릭하면 사용자를 변경할 수 있습니다.
-- 메세지를 보내면 채팅방 하단으로 스크롤을 이동시킵니다.
-- 메세지에 유저 정보(프로필 사진, 이름)를 표시합니다.
-- user와 message 데이터를 json 파일에 저장합니다.
-- UI는 **반응형을 제외**하고 피그마파일을 따라서 진행합니다.
+ChatBodyProps 인터페이스는 ChatBody 컴포넌트가 받아야 할 props의 구조와 타입을 명시적으로 정의해주기 때문에,
+컴포넌트에 잘못된 타입의 props를 전달하거나 전달하지 않았을 경우, 컴파일 단계에서 바로 오류를 발견할 수 있습니다.
 
-### 추가 구현 기능
+또한 메시지를 추가하는 함수 내에서 newMessage 객체를 생성할 때, Message 인터페이스에서 요구하는 속성을 빼먹거나 잘못된 타입을 사용하면 TypeScript 컴파일러가 즉시 오류를 표시하기 떄문에, 런타임 오류를 방지하고, 실수 가능성을 줄입니다.
 
-- 더블 클릭 하면 감정표현을 추가합니다.
-- 그 외 추가하고 싶은 기능이 있다면 마음껏 추가해 주세요!
+2. 코드 자동 완성 및 리팩토링 용이
+   컴포넌트에 어떤 props를 전달해야 하는지 쉽게 알 수 있고, 이는 개발 효율성을 높입니다.
+   또한 특정 인터페이스의 구조를 변경해야 한다면, TypeScript를 사용하면 해당 인터페이스를 사용하는 모든 곳을 찾아 수정해야 함을 알 수 있기 때문에, 더욱 안전하고 빠른 리팩토링이 가능합니다.
 
-참고로 이번 과제는 다음주까지 이어지는 과제이므로 **확장성**을 충분히 고려해 주세요. 참고로 **4주차 과제에서는 유저 및 기능 추가와 Routing을** 진행합니다. 이를 위해 [recoil](https://recoiljs.org/ko/)이나 [redux](https://ko.redux.js.org/introduction/getting-started/)를 이용한 상태관리를 미리 해보시는 것을 추천합니다!! 모두 공식문서 많이 읽어보시고 자신만의 상태관리 조합도 찾아보면 재밌을 거에요 XD
+3. 코드 의도와 구조 명확화
+   인터페이스를 통해 코드의 의도와 구조를 다른 개발자에게 명확히 전달할 수 있어 코드의 가독성이 향상됩니다.
 
-## 링크 및 참고자료
+## 디자이너로부터 전달받은 피그마 링크 혹은, 피그마 캡처본
 
-- [React docs - Hook](https://ko.reactjs.org/docs/hooks-intro.html)
-- [React의 Hooks 완벽 정복하기](https://velog.io/@velopert/react-hooks#1-usestate)
-- [useEffect 완벽 가이드](https://overreacted.io/ko/a-complete-guide-to-useeffect/)
-- [코딩 컨벤션](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION)
-- [타입스크립트 핸드북](https://joshua1988.github.io/ts/intro.html)
-- [리액트 프로젝트에서 타입스크립트 사용하기 (시리즈)](https://velog.io/@velopert/series/react-with-typescript)
-- [디자인 시스템 구축기](https://yozm.wishket.com/magazine/detail/1830/)
-- [[영상] : 컴포넌트에 대한 이해](https://www.youtube.com/watch?v=21eiJc90ggo)
-- [Styled Component로 디자인 시스템 구축하기](https://zaat.dev/blog/building-a-design-system-in-react-with-styled-components/)
-- [ts 절대경로 설정하기](https://tesseractjh.tistory.com/232)
+<img width="741" alt="스크린샷 2024-03-29 오후 7 16 01" src="https://github.com/CEOS-Developers/react-messenger-19th/assets/101055312/02e7d0b3-0898-457b-b5da-2720a632cf28">
+
+## 컴포넌트를 분리한 기준은 무엇인가요?
+
+1. 각 컴포넌트를 UI 영역별 & 기능별로 분리했습니다.
+   단일 책임 원칙에 따라 한 가지 기능만 수행하도록 설계했습니다.
+
+- **ChatHead**: 채팅방의 상단에 위치한 사용자 프로필을 표시합니다. 사용자 이름과 이미지를 포함합니다.
+- **ChatBody**: 채팅방에서의 대화 내용을 표시합니다. 메시지마다 시간과 날짜, 사용자 프로필 이미지를 표시할 수 있도록 구현했습니다.
+- **ChatBottom**: 메시지 입력창과 전송 버튼을 포함합니다. 사용자 입력을 받고, 'Enter' 키나 전송 버튼 클릭 시 메시지를 전송하는 기능을 구현했습니다.
+
+2. 또한, 버튼, 입력 필드같이, 사용자 이벤트에 따라, 특정 기능을 하고, 자주 사용되는 UI들도 재사용이 용이하게 별도의 컴포넌트로 분리했습니다.
+
+## 디자인 시스템을 적용하면서 느낀 점은 무엇인가요?
+
+디자인 시스템을 적용함으로써 UI의 일관성을 유지할 수 있었던 것 같습니다.
+또한, 개발 과정에서도 확실히 편리함을 느꼈습니다.
+우선, 디자인 시스템을 통해 개발자와 디자이너 간의 커뮤니케이션이 명확해졌고, 일관된 디자인 언어를 공유할 수 있었습니다.
+또한, UX/UI적인 고민을 덜어 개발에만 집중할 수 있어 좋았던 것 같습니다.
+디자인 시스템을 활용하면서 서비스를 만들 때는 정말 여러 UI 요소들이 있다는 것을 느꼈습니다. 이러한 UI 요소들은 모두 교체 가능성이 있으므로, 서비스의 규모가 커질수록, 나중에 UI 요소들을 교체하기 편하게 컴포넌트를 분리하고 가독성 있는 코드를 짜는 것이 중요하다는 깨달음을 얻었습니다.
+
+## 디자이너와 소통하며 느낀점은 무엇인가요?
+
+피그마에 만들어주신 UI를 가지고 개발하면서, 혼자 개발하고, UI까지 만들 때와는 퀄리티가 다른 결과물이 나온 것 같다는 생각이 듭니다.
+특히, 메시지를 입력할 때는 아이콘이 보내기 버튼이고, 입력하지 않을 때는 마이크 아이콘인 것은, 너무 당연한 UX이나, 일상 속에서는 신경쓰지 않고 지나쳤었는데, 피그마에서 UI 하나하나를 가져다 개발하면서, 정말 이는 사용자 친화적인 것 같다는 생각이 들었습니다.
+
+# 💡 느낀 점
+
+처음에는 json에 데이터를 저장한다는게, 새로 입력된 대화 내역도 업데이트해야 한다고 생각해, 어떻게 구현할지 감이 잡히지 않아,
+우선은 로컬 스토리지와 useEffect를 사용하여 대화 내역을 저장하고 관리하는 것을 구현했습니다.
+json에 더미 데이터를 저장해야하는 것을 이어서 계속 고민해보다가 백엔드도 구현해야 하는건가?...라는 생각을 하며 json-server를 통해 json 데이터를 업데이트하는 법을 계속해서 시도했었습니다.
+그런데, 초기 데이터만 json 파일에 저장하고, 이를 불러오는 것이란 걸 알고, 안심하며 초기 메시지 로드 하는 부분을 로컬 스토리지에서, -> json 파일에서 json 객체를 가져오는 것으로 수정했습니다.
+이를 통해, json에 새로 입력된 대화 내역도 업데이트해야 하는 것도 구현해보고 싶다는 생각이 너무 커져서, 중간고사 이후에 이 부분을 구현하는게 기대가 됩니다.
diff --git a/image.png b/image.png
new file mode 100644
index 0000000..b085d62
Binary files /dev/null and b/image.png differ
diff --git a/package-lock.json b/package-lock.json
index c27bbe4..4769908 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,9 +15,13 @@
         "@types/node": "^16.18.91",
         "@types/react": "^18.2.69",
         "@types/react-dom": "^18.2.22",
+        "nodejs": "^0.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.23.0",
         "react-scripts": "5.0.1",
+        "recoil": "^0.7.7",
+        "styled-components": "^6.1.8",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       }
@@ -2288,6 +2292,24 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3338,6 +3360,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4290,6 +4320,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -5750,6 +5785,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6182,6 +6225,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -6372,6 +6423,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -8861,6 +8922,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -12623,6 +12689,11 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
+    "node_modules/nodejs": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/nodejs/-/nodejs-0.0.0.tgz",
+      "integrity": "sha512-1V+0HwaB/dhxzidEFc4uJ3k52gLI4B6YBZgJIofjwYCSAkD6CI0me6TDBT2QM2nbGWNxCHcq9/wVynzQYZOhUg=="
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -14864,6 +14935,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+      "dependencies": {
+        "@remix-run/router": "1.16.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14968,6 +15069,25 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recoil": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
+      "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
+      "dependencies": {
+        "hamt_plus": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/recursive-readdir": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
@@ -15719,6 +15839,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -16260,6 +16385,70 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
+      "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/unitless": "0.8.0",
+        "@types/stylis": "4.2.0",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.2",
+        "postcss": "8.4.31",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.1",
+        "tslib": "2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16275,6 +16464,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
diff --git a/package.json b/package.json
index ea335d3..1ee9965 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,13 @@
     "@types/node": "^16.18.91",
     "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
+    "nodejs": "^0.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.1.8",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
diff --git a/public/github_logo.png b/public/github_logo.png
new file mode 100644
index 0000000..d97dc61
Binary files /dev/null and b/public/github_logo.png differ
diff --git a/public/instagram_logo.png b/public/instagram_logo.png
new file mode 100644
index 0000000..611e5af
Binary files /dev/null and b/public/instagram_logo.png differ
diff --git a/public/item/back.png b/public/item/back.png
new file mode 100644
index 0000000..b15dad2
Binary files /dev/null and b/public/item/back.png differ
diff --git a/public/item/chatBottom.png b/public/item/chatBottom.png
new file mode 100644
index 0000000..402dc13
Binary files /dev/null and b/public/item/chatBottom.png differ
diff --git a/public/item/chatFalse.png b/public/item/chatFalse.png
new file mode 100644
index 0000000..957f544
Binary files /dev/null and b/public/item/chatFalse.png differ
diff --git a/public/item/chatHead.png b/public/item/chatHead.png
new file mode 100644
index 0000000..a72c9eb
Binary files /dev/null and b/public/item/chatHead.png differ
diff --git a/public/item/chatTrue.png b/public/item/chatTrue.png
new file mode 100644
index 0000000..cedeae8
Binary files /dev/null and b/public/item/chatTrue.png differ
diff --git a/public/item/micIcon.png b/public/item/micIcon.png
new file mode 100644
index 0000000..d58f6ed
Binary files /dev/null and b/public/item/micIcon.png differ
diff --git a/public/item/profileFalse.png b/public/item/profileFalse.png
new file mode 100644
index 0000000..f3fa692
Binary files /dev/null and b/public/item/profileFalse.png differ
diff --git a/public/item/profileTrue.png b/public/item/profileTrue.png
new file mode 100644
index 0000000..21786f9
Binary files /dev/null and b/public/item/profileTrue.png differ
diff --git a/public/item/profile_mini.png b/public/item/profile_mini.png
new file mode 100644
index 0000000..0942828
Binary files /dev/null and b/public/item/profile_mini.png differ
diff --git a/public/item/profile_mini2.png b/public/item/profile_mini2.png
new file mode 100644
index 0000000..c284156
Binary files /dev/null and b/public/item/profile_mini2.png differ
diff --git a/public/item/searchbar.png b/public/item/searchbar.png
new file mode 100644
index 0000000..64f91ee
Binary files /dev/null and b/public/item/searchbar.png differ
diff --git a/public/item/sendIcon.png b/public/item/sendIcon.png
new file mode 100644
index 0000000..05bec3e
Binary files /dev/null and b/public/item/sendIcon.png differ
diff --git a/public/item/userFalse.png b/public/item/userFalse.png
new file mode 100644
index 0000000..699ce49
Binary files /dev/null and b/public/item/userFalse.png differ
diff --git a/public/item/userTrue.png b/public/item/userTrue.png
new file mode 100644
index 0000000..e58b9a6
Binary files /dev/null and b/public/item/userTrue.png differ
diff --git a/public/item/userbg.png b/public/item/userbg.png
new file mode 100644
index 0000000..8572ea4
Binary files /dev/null and b/public/item/userbg.png differ
diff --git a/src/App.css b/src/App.css
index 74b5e05..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index bd79c18..aa1ce6c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,46 @@
-function App() {
+import React from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import ChattingRoom from './pages/ChattingRoom';
+import UserList from './pages/userList';
+import ChattingList from './pages/ChattingList';
+import Profile from './pages/Profile';
+import Navbar from './components/Navbar';
+import NavbarHead from './components/NavbarHead';
+import ChatHead from './components/ChatHead';
+import ChatBody from './components/ChatBody';
+import ChatBottom from './components/ChatBottom';
+import GlobalStyle from './style/GlobalStyle';
+import styled from 'styled-components';
+
+
+
+const App = () => {
+	const { pathname } = useLocation();
+	const isChattingRoomPage = pathname.startsWith('/chattingroom');
+
 	return (
-		<div>
-			<h1>19기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~</h1>
-		</div>
+		<>
+			<GlobalStyle />
+			{isChattingRoomPage ? (
+				<span />
+			) : (
+				//<ChatHead user={{ name: '', image: '' }} />
+				<NavbarHead />
+			)}
+
+			<div style={{ paddingTop: isChattingRoomPage ? '0px' : '80px' }}>
+				<Routes>
+					<Route path='/chattingroom/:userId' element={<ChattingRoom />} />
+					<Route path='/userlist' element={<UserList />} />
+					<Route path='/chattinglist' element={<ChattingList />} />
+					<Route path='/profile' element={<Profile />} />
+				</Routes>
+			</div>
+			{!isChattingRoomPage && <Navbar />}
+
+	
+		</>
 	);
-}
+};
 
 export default App;
diff --git a/src/ChattingRoom.js b/src/ChattingRoom.js
new file mode 100644
index 0000000..b0af876
--- /dev/null
+++ b/src/ChattingRoom.js
@@ -0,0 +1,87 @@
+/*import React, { useState, useEffect, useRef } from 'react';
+import ChatHead from './components/ChatHead';
+import ChatBody from './components/ChatBody';
+import ChatBottom from './components/ChatBottom';
+import dummy from './dummy.json';
+
+interface Message {
+	id: number;
+	from: string;
+	content: string;
+	date: string;
+}
+
+interface User {
+	name: string;
+	image: string;
+}
+
+const initialUsers: User[] = [
+	{ name: '이지인', image: '/item/profile_mini.png' },
+	{ name: '이영인', image: '/item/profile_mini2.png' },
+];
+
+const initialMessages: Message[] = [];
+
+function ChattingRoom() {
+	// 현재 사용자 상태 관리
+	const [currentUserIndex, setCurrentUserIndex] = useState(0);
+	// 현재 메시지 기롥 상태 관리
+	const [messages, setMessages] = useState<Message[]>(() => {
+		// 로컬 스토리지에서 초기 메시지 로드
+		//	const savedMessages = localStorage.getItem('messages');
+		const savedMessages = dummy;
+		//return savedMessages ? JSON.parse(savedMessages) : [];
+		return savedMessages;
+	});
+	const currentUser = initialUsers[currentUserIndex];
+	const otherUserIndex = (currentUserIndex + 1) % initialUsers.length;
+	const otherUser = initialUsers[otherUserIndex];
+
+	// 메세지 목록 끝으로 스크롤
+	const messagesEndRef = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		// 메시지 데이터를 localStorage에 저장
+		localStorage.setItem('messages', JSON.stringify(messages));
+
+		//dummy.message = JSON.stringify(messages);
+		//console.log(dummy.message);
+	}, [messages]);
+
+	useEffect(() => {
+		// 메시지가 추가될 때마다 스크롤을 하단으로 이동
+		messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+	}, [messages]);
+
+	const sendMessage = (messageContent: string) => {
+		const newMessage: Message = {
+			id: Date.now(),
+			from: currentUser.name,
+			content: messageContent,
+			date: new Date().toISOString(), // ISO 형식의 날짜 문자열 사용
+		};
+
+		setMessages((prevMessages) => [...prevMessages, newMessage]);
+	};
+
+	const toggleUser = () => {
+		setCurrentUserIndex((currentIndex) => (currentIndex === 0 ? 1 : 0));
+	};
+
+	return (
+		<div>
+			<ChatHead user={currentUser} onUserClick={toggleUser} />
+			<ChatBody
+				messages={messages}
+				userImage={otherUser.image}
+				currentUser={currentUser.name}
+			/>
+			<ChatBottom onSendMessage={sendMessage} />
+			<div ref={messagesEndRef} />
+		</div>
+	);
+}
+
+export default ChattingRoom;
+*/
diff --git a/src/components/ChatBody.tsx b/src/components/ChatBody.tsx
new file mode 100644
index 0000000..758b262
--- /dev/null
+++ b/src/components/ChatBody.tsx
@@ -0,0 +1,81 @@
+
+import React from 'react';
+import {
+	ChatBodyContainer,
+	TimeDisplay,
+	DateSeparator,
+	ChatMessageBox,
+    UserProfileImage
+    
+} from '../style/ChatBodyStyle';
+
+interface Message {
+	id: number;
+	from: string;
+	content: string;
+	date: string;
+}
+
+interface ChatBodyProps {
+	messages: Message[];
+	currentUser: string;
+    userImage: string;
+}
+
+const formatDate = (isoDateString: string) => {
+	const date = new Date(isoDateString);
+	return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
+};
+
+const formatTime = (isoDateString: string) => {
+	const date = new Date(isoDateString);
+	return `${date.getHours().toString().padStart(2, '0')}:${date
+		.getMinutes()
+		.toString()
+		.padStart(2, '0')}`;
+};
+
+const ChatBody: React.FC<ChatBodyProps> = ({ messages,userImage, currentUser}) => {
+	let lastDate = '';
+    let lastMinute = '';
+
+
+	return (
+		<ChatBodyContainer>
+			{messages.map((message, index) => {
+				const messageDate = formatDate(message.date);
+                const messageMinute = formatTime(message.date);
+				let displayDateSeparator = false;
+                let displayMinuteSeparator = false;
+
+				if (messageDate !== lastDate) {
+					lastDate = messageDate;
+					displayDateSeparator = true;
+				}
+
+                if (messageMinute !== lastMinute) {
+					lastMinute = messageMinute;
+					displayMinuteSeparator = true;
+				}
+
+				return (
+					<React.Fragment key={message.id}>
+						{displayDateSeparator && (
+							<DateSeparator>{formatDate(message.date)}</DateSeparator>
+						)}
+                        {displayMinuteSeparator && (
+							 <TimeDisplay>{formatTime(message.date)}</TimeDisplay>
+						)}
+                   
+						<ChatMessageBox isCurrentUser={message.from === currentUser}>
+							<div>{message.content}</div>
+						</ChatMessageBox>
+                        <UserProfileImage src={userImage} isCurrentUser={message.from === currentUser}/>
+					</React.Fragment>
+				);
+			})}
+		</ChatBodyContainer>
+	);
+};
+
+export default ChatBody;
\ No newline at end of file
diff --git a/src/components/ChatBottom.tsx b/src/components/ChatBottom.tsx
new file mode 100644
index 0000000..1196a9f
--- /dev/null
+++ b/src/components/ChatBottom.tsx
@@ -0,0 +1,51 @@
+import React, { useState, KeyboardEvent, ChangeEvent } from 'react';
+
+import {
+	ChatBottomContainer,
+	ChatInput,
+	SendButton,
+} from '../style/ChatBottomStyle';
+
+const sendIcon = '/item/sendIcon.png';
+const micIcon = '/item/micIcon.png';
+
+interface ChatBottomProps {
+	onSendMessage: (messageContent: string) => void;
+}
+
+const ChatBottom: React.FC<ChatBottomProps> = ({ onSendMessage }) => {
+	const [inputValue, setInputValue] = useState('');
+
+	const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
+		if (event.key === 'Enter' && inputValue.trim()) {
+			sendMessage();
+		}
+	};
+
+	const sendMessage = () => {
+		if (inputValue.trim()) {
+			onSendMessage(inputValue.trim());
+			setInputValue('');
+		}
+	};
+
+	// 입력된 텍스트에 따라 이미지 결정
+	const buttonImage = inputValue.trim() ? sendIcon : micIcon;
+
+	return (
+		<ChatBottomContainer>
+			<ChatInput
+				type='text'
+                placeholder='메시지 보내기'
+				value={inputValue}
+				onChange={(e: ChangeEvent<HTMLInputElement>) =>
+					setInputValue(e.target.value)
+				}
+				onKeyPress={handleKeyPress}
+			/>
+			<SendButton src={buttonImage} onClick={sendMessage} alt='Send' />
+		</ChatBottomContainer>
+	);
+};
+
+export default ChatBottom;
diff --git a/src/components/ChatHead.tsx b/src/components/ChatHead.tsx
new file mode 100644
index 0000000..65a9ce1
--- /dev/null
+++ b/src/components/ChatHead.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+	ChatHeadContainer,
+	UserImage,
+	UserName,
+	SendButton,
+} from '../style/ChatHeadStyle';
+import { useNavigate } from 'react-router-dom';
+
+interface User {
+	name: string;
+	image: string;
+}
+
+interface ChatHeadProps {
+	user: User;
+	onUserClick: () => void;
+}
+
+const buttonImage = '/item/back.png';
+
+const ChatHead: React.FC<ChatHeadProps> = ({ user, onUserClick }) => {
+	const navigate = useNavigate();
+
+	const handleUserClick = () => {
+		navigate(`/chattinglist`);
+	};
+
+	return (
+		<ChatHeadContainer onClick={onUserClick}>
+			<SendButton src={buttonImage} onClick={handleUserClick} alt='Send' />
+			<UserImage
+				src={user.image}
+				alt='Profile'
+				style={{ width: '34px', height: '34px', borderRadius: '50%' }}
+			/>
+			<UserName>{user.name}</UserName>
+		</ChatHeadContainer>
+	);
+};
+
+export default ChatHead;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..2401871
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,81 @@
+// src/components/Navbar.tsx
+
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+const NavbarContainer = styled.div`
+	display: flex;
+	justify-content: space-around;
+	position: fixed;
+	font-size: 20px;
+	width: 375px;
+	bottom: 300px;
+	height: 50px;
+	background: #f0f0f0;
+	padding-top: 30px;
+`;
+
+const NavbarLink = styled(Link)`
+	text-decoration: none;
+	color: black;
+`;
+
+const NavButton = styled.img`
+	position: fixed;
+	bottom: 320px;
+	margin-left: -35px;
+	/* width: 30px;
+height: 30px;
+margin-right: 10px; */
+`;
+
+const Navbar = () => {
+	const { pathname } = useLocation();
+	let userPageButton;
+	let chatPageButton;
+	let profilePageButton;
+
+	switch (pathname) {
+		case '/chattingroom':
+			userPageButton = '/item/back.png';
+			chatPageButton = '/item/back.png';
+			profilePageButton = '/item/profileFalse.png';
+			break;
+		case '/userlist':
+			userPageButton = '/item/userTrue.png';
+			chatPageButton = '/item/chatFalse.png';
+			profilePageButton = '/item/profileFalse.png';
+			break;
+		case '/chattinglist':
+			userPageButton = '/item/userFalse.png';
+			chatPageButton = '/item/chatTrue.png';
+			profilePageButton = '/item/profileFalse.png';
+			break;
+		case '/profile':
+			userPageButton = '/item/userFalse.png';
+			chatPageButton = '/item/chatFalse.png';
+			profilePageButton = '/item/profileTrue.png';
+			break;
+		default:
+			userPageButton = '/item/userFalse.png';
+			chatPageButton = '/item/chatFalse.png';
+			profilePageButton = '/item/profileFalse.png';
+	}
+
+	return (
+		<NavbarContainer>
+			<NavbarLink to='/userlist'>
+				<NavButton src={userPageButton} alt='userlistpage' />
+			</NavbarLink>
+			<NavbarLink to='/chattinglist'>
+				<NavButton src={chatPageButton} alt='userlistpage' />
+			</NavbarLink>
+			<NavbarLink to='/profile'>
+				<NavButton src={profilePageButton} alt='userlistpage' />
+			</NavbarLink>
+		</NavbarContainer>
+	);
+};
+
+export default Navbar;
diff --git a/src/components/NavbarHead.tsx b/src/components/NavbarHead.tsx
new file mode 100644
index 0000000..653d5a8
--- /dev/null
+++ b/src/components/NavbarHead.tsx
@@ -0,0 +1,57 @@
+// src/components/NavbarHead.tsx
+
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+const NavbarHeadContainer = styled.div`
+	display: flex;
+	justify-content: flex-start;
+	position: fixed;
+	font-size: 20px;
+	padding-left: 15px;
+	width: 375px;
+	top: -33px;
+	height: 80px;
+	background: #fffff;
+	padding-top: 30px;
+    
+
+`;
+const NavbarHeadTexts=styled.div`
+background: #fffff;
+padding-top: 30px;
+font-family: 'Noto Sans KR';
+font-size: 20px;
+font-style: normal;
+font-weight: 500;
+`;
+
+const NavbarHead = () => {
+	const { pathname } = useLocation();
+	let navText;
+
+	switch (pathname) {
+		case '/chattingroom':
+			navText = '';
+			break;
+		case '/userlist':
+			navText = '친구 목록';
+			break;
+		case '/chattinglist':
+			navText = '대화';
+			break;
+		case '/profile':
+			navText = '내 프로필';
+			break;
+		default:
+			navText = '';
+	}
+
+	return( 
+    <NavbarHeadContainer>
+        <NavbarHeadTexts>{navText}</NavbarHeadTexts>
+        </NavbarHeadContainer>);
+};
+
+export default NavbarHead;
diff --git a/src/dummy.json b/src/dummy.json
new file mode 100644
index 0000000..782935e
--- /dev/null
+++ b/src/dummy.json
@@ -0,0 +1,35 @@
+
+
+[
+	{
+		"id": 1711705694689,
+		"from": "이지인",
+		"content": "국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여",
+		"date": "2024-03-29T09:48:14.689Z"
+	},
+	{
+		"id": 1711705702873,
+		"from": "이영인",
+		"content": "가격안정을 도모함으로써 농·어민의 이익을 보호한다.",
+		"date": "2024-03-29T09:48:22.873Z"
+	},
+	{
+		"id": 1711705711651,
+		"from": "이지인",
+		"content": "정당은 그 목적·조직과 활동이 민주적이어야 하며,",
+		"date": "2024-03-29T09:48:31.651Z"
+	},
+	{
+		"id": 1711705718508,
+		"from": "이지인",
+		"content": "국민의 정치적 의사형성에 참여",
+		"date": "2024-03-29T09:48:38.508Z"
+	},
+	{
+		"id": 1711705726747,
+		"from": "이영인",
+		"content": "하는데 필요한 조직을 가져야 한다.",
+		"date": "2024-03-29T09:48:46.747Z"
+	}
+
+]
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..e69de29 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.tsx b/src/index.tsx
index d10be77..6bda164 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,19 @@
+// src/index.tsx
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
+import ReactDOM from 'react-dom';
 import App from './App';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { RecoilRoot } from 'recoil';
+import './index.css';
 
-const root = ReactDOM.createRoot(
-	document.getElementById('root') as HTMLElement
-);
-root.render(
+ReactDOM.render(
 	<React.StrictMode>
-		<App />
-	</React.StrictMode>
+		<RecoilRoot>
+			<Router>
+				<App />
+			</Router>
+		</RecoilRoot>
+	</React.StrictMode>,
+
+	document.getElementById('root')
 );
diff --git a/src/pages/ChattingList.tsx b/src/pages/ChattingList.tsx
new file mode 100644
index 0000000..96c11ea
--- /dev/null
+++ b/src/pages/ChattingList.tsx
@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { userListState } from '../state/userState';
+import styled from 'styled-components';
+
+const ChatListContainer = styled.div`
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 300px;
+  
+`;
+
+const ChatItem = styled(Link)`
+  width: 100%;
+  padding: 10px;
+  margin: 5px 0;
+  background-color: #fffff;
+  color: black;
+  text-decoration: none;
+  border-radius: 5px;
+  white-space: pre-line;
+  /*background-image: url('/path/to/background-image.jpg');*/
+  display: flex;
+  align-items: center;
+  
+
+  &:hover {
+    background-color: #fffff;
+  }
+`;
+
+const ProfileImage = styled.img`
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 20px;
+`;
+
+const ChatDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  
+`;
+
+const LastMessage = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: 14px;
+  color: grey;
+`;
+
+const MessageTime = styled.span`
+  font-size: 12px;
+  color: darkgray;
+  margin-left: auto;
+  margin-right: 5px;
+`;
+
+const SearchInput = styled.input`
+  background-image: url('/item/searchbar.png');
+  background-repeat: no-repeat;
+  width: 260px;
+  height: 21px;
+  padding: 10px 43px;
+  margin-bottom: 0px;
+  margin-left: 5px;
+  border: none;
+`;
+
+const getLastMessageAndTime = (userId: string) => {
+  const messagesString = localStorage.getItem(`messages_${userId}`);
+  if (messagesString) {
+    const messages = JSON.parse(messagesString);
+    if (messages.length > 0) {
+      const lastMessage = messages[messages.length - 1];
+      const messageTime = new Date(lastMessage.date).toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+      });
+      return { content: lastMessage.content, time: messageTime };
+    }
+  }
+  return { content: '대화를 시작하지 않았습니다.', time: '' };
+};
+
+const ChattingList = () => {
+  const userList = useRecoilValue(userListState);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredUsers = userList
+    .filter((user) =>
+      user.name.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+    .slice(1); // 첫 번째 유저를 제외하고 필터링
+
+  return (
+    <>
+      <SearchInput
+        type='text'
+        placeholder=''
+        onChange={(e) => setSearchTerm(e.target.value)}
+      />
+      <ChatListContainer>
+        {filteredUsers.map((user) => (
+          <ChatItem key={user.id} to={`/chattingroom/${user.id}`}>
+            <ProfileImage
+              src={user.image || '/default-profile.jpg'}
+              alt={user.name}
+            />
+            <ChatDetails>
+              <div>{user.name}</div>
+              <LastMessage>
+                {getLastMessageAndTime(user.id).content}
+                <MessageTime>{getLastMessageAndTime(user.id).time}</MessageTime>
+              </LastMessage>
+            </ChatDetails>
+          </ChatItem>
+        ))}
+      </ChatListContainer>
+    </>
+  );
+};
+
+export default ChattingList;
diff --git a/src/pages/ChattingRoom.tsx b/src/pages/ChattingRoom.tsx
new file mode 100644
index 0000000..38b217c
--- /dev/null
+++ b/src/pages/ChattingRoom.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect, useId, useState, useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { userListState } from '../state/userState';
+import { userProfileState } from '../state/userProfileState';
+import { messagesState } from '../state/messageState';
+import ChatHead from '../components/ChatHead';
+import ChatBody from '../components/ChatBody';
+import ChatBottom from '../components/ChatBottom';
+import { ChatRoomContainer } from '../style/ChattingRoomStyle';
+import styled from 'styled-components';
+
+interface Message {
+	id: number;
+	from: string;
+	to: string;
+	content: string;
+	date: string;
+}
+
+const ChatBottomMask = styled.div`
+	position: fixed;
+	bottom: 0;
+	width: 100%; // 뷰포트 전체 너비 사용
+	height: 360px; // ChatBottom의 높이와 동일하게 설정
+	background-color: white; // 흰색 배경
+	z-index: 1; // ChatBottom보다 낮은 z-index 설정
+`;
+
+const ChattingRoom = () => {
+	const { userId } = useParams<{ userId: string }>();
+	console.log(useId);
+
+	const messagesStateValue = useRecoilValue(messagesState);
+	const [messages, setMessages] = useState<Message[]>([]);
+
+	const messagesEndRef = useRef<HTMLDivElement | null>(null);
+
+	useEffect(() => {
+		// 로컬 스토리지에서 이전 메시지 가져오기
+		const storedMessages = localStorage.getItem(`messages_${userId}`);
+		if (storedMessages) {
+			// 이전 메시지가 있으면 파싱하여 상태에 설정
+			setMessages(JSON.parse(storedMessages));
+		}
+	}, [userId]); // userId가 변경될 때마다 이펙트 재실행
+
+    const userList = useRecoilValue(userListState);
+	// 대화 상대방
+	const otherUser = userList.find((user) => user.id === userId);
+
+	const otherUserIndex = Number(otherUser?.id);
+
+	const [currentUserIndex, setCurrentUserIndex] = useState(0);
+	const [counterUserIndex, setCounterUserIndex] = useState(otherUserIndex);
+
+	let currentUser = userList[currentUserIndex];
+	let counterUser = userList[counterUserIndex];
+
+
+	useEffect(() => {
+		// 메시지가 추가될 때마다 스크롤을 하단으로 이동
+		messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+	}, [messages, currentUserIndex, counterUserIndex]);
+
+	// 메세지 목록 끝으로 스크롤
+
+	// 유저 관리
+	// 현재 사용자 상태 관리
+
+	
+	console.log(currentUser);
+
+	//console.log(otherUserIndex);
+
+	const toggleUser = () => {
+		setCurrentUserIndex(counterUserIndex);
+		setCounterUserIndex(currentUserIndex);
+	};
+
+	const sendMessage = (content: string, from: string, to: string) => {
+		const newMessage: Message = {
+			id: Date.now(),
+			from,
+			to,
+			content,
+			date: new Date().toISOString(),
+		};
+
+		// 이전 메시지 배열과 새로운 메시지를 합침
+		const updatedMessages = [...messages, newMessage];
+		setMessages(updatedMessages);
+
+		// localStorage에 업데이트된 메시지 저장
+		localStorage.setItem(`messages_${userId}`, JSON.stringify(updatedMessages));
+	};
+
+	return (
+		<>
+			<ChatHead
+				user={counterUser ?? { name: 'Unknown', image: 'default.png' }}
+				onUserClick={toggleUser}
+			/>
+			<ChatBody
+				messages={messages}
+				userImage={counterUser?.image ?? ''}
+				currentUser={currentUser?.id ?? currentUser?.id}
+			/>
+			<ChatBottomMask />
+			<div ref={messagesEndRef} />
+			<ChatBottom
+				onSendMessage={(content) =>
+					sendMessage(content, currentUser?.id ?? '', counterUser?.id ?? '')
+				}
+			/>
+		</>
+	);
+};
+
+export default ChattingRoom;
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
new file mode 100644
index 0000000..d501fcc
--- /dev/null
+++ b/src/pages/Profile.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import { userProfileState } from '../state/userProfileState';
+import styled from 'styled-components';
+
+interface Profile {
+	name: string;
+	phone: string;
+	image: string;
+	github: string;
+	instagram: string;
+}
+
+const ProfileContainer = styled.div`
+margin-left:10px;
+position:fixed;
+widfht:375px;
+display: flex;
+flex-direction: column;
+align-items: center;
+/*	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;*/
+
+`;
+
+const ProfileImage = styled.img`
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	margin-bottom: 20px;
+`;
+
+const ProfileFieldName = styled.div`
+	margin: 10px 0;
+	text-align: center;
+font-family: "Noto Sans KR";
+font-size: 24px;
+font-style: normal;
+font-weight: 500;
+line-height: normal;
+letter-spacing: 0.33px;
+`;
+
+const ProfileFieldPhone = styled.div`
+color: var(--gray, #8D8D8F);
+text-align: center;
+font-family: "Noto Sans KR";
+font-size: 15px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+letter-spacing: -0.2px;
+`;
+
+const Input = styled.input`
+	padding: 10px;
+	margin-top: 5px;
+	width: 200px;
+	border-radius: 5px;
+	border: 1px solid #ccc;
+`;
+
+const Button = styled.button`
+	padding: 10px 20px;
+	margin-top: 20px;
+	background-color: #4caf50;
+	color: white;
+	border: none;
+	border-radius: 5px;
+	cursor: pointer;
+`;
+
+// 바로가기 링크를 감싸는 스타일된 컴포넌트
+const ShortcutLink = styled.a`
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	color: #333;
+	margin-top: 10px;
+`;
+
+// 로고 이미지 스타일링
+const InstagramLogo = styled.img`
+	/* width: 30px;
+height: 30px;
+margin-right: 10px; */
+`;
+
+const GitHubLogo = styled.img`
+	/* width: 30px;
+height: 30px;
+margin-right: 10px; */
+`;
+
+const Profile = () => {
+	const [profile, setProfile] = useRecoilState<Profile>(userProfileState);
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const { name, value } = event.target;
+		setProfile((prev) => ({ ...prev, [name]: value }));
+	};
+
+	return (
+		<ProfileContainer>
+			<ProfileImage
+				src={profile.image || '/default-profile.png'}
+				alt='프로필 이미지'
+			/>
+			<ProfileFieldName>
+				<div id='profile-name'>{profile.name}</div>
+			</ProfileFieldName>
+			<ProfileFieldPhone>
+				<div id='profile-name'>{profile.phone}</div>
+			</ProfileFieldPhone>
+			<ShortcutLink href={profile.instagram} target='_blank'>
+				<InstagramLogo src='/instagram_logo.png' alt='Instagram 로고' />
+			</ShortcutLink>
+			<ShortcutLink href={profile.github} target='_blank'>
+				<GitHubLogo src='/github_logo.png' alt='GitHub 로고' />
+			</ShortcutLink>
+		</ProfileContainer>
+	);
+};
+
+export default Profile;
diff --git a/src/pages/userList.tsx b/src/pages/userList.tsx
new file mode 100644
index 0000000..7483d82
--- /dev/null
+++ b/src/pages/userList.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { userListState } from '../state/userState';
+import styled from 'styled-components';
+
+interface User {
+	id: string;
+	name: string;
+	profileImage: string; // 프로필 이미지 URL을 추가
+}
+
+// 스타일 컴포넌트
+const UserContainer = styled.li`
+	background-image: url('/item/userbg.png'); // 여기에 배경 이미지 URL을 설정
+	background-size: cover;
+	display: flex;
+	align-items: center;
+	padding: 5px 0px 5px 0px;
+	margin-bottom: 11px;
+    width:300px;
+   margin-left:-10px;
+
+`;
+
+const ProfileImage = styled.img`
+	width: 45px;
+	height: 45px;
+	border-radius: 50%;
+	margin-right: 20px;
+    margin-left:-20px;
+`;
+
+const SearchInput = styled.input`
+	background-image: url('/item/searchbar.png');
+	background-repeat: no-repeat;
+	width: 260px;
+	height: 21px;
+	padding: 10px 43px;
+	margin-bottom: 0px;
+	margin-left: 5px;
+	border: none;
+`;
+
+const UserList = () => {
+	const users = useRecoilValue(userListState);
+	const [searchTerm, setSearchTerm] = useState('');
+
+	const filteredUsers = users
+		.filter((user) =>
+			user.name.toLowerCase().includes(searchTerm.toLowerCase())
+		)
+		.slice(1); // 첫 번째 유저를 제외하고 필터링
+
+	return (
+		<>
+			<SearchInput
+				type='text'
+				placeholder=''
+				onChange={(e) => setSearchTerm(e.target.value)}
+			/>
+			<ul>
+				{filteredUsers.map((user) => (
+					<UserContainer key={user.id}>
+						<ProfileImage src={user.image} alt={user.name} />
+						{user.name}
+					</UserContainer>
+				))}
+			</ul>
+		</>
+	);
+};
+
+export default UserList;
diff --git a/src/state/chatListState.ts b/src/state/chatListState.ts
new file mode 100644
index 0000000..094f6ad
--- /dev/null
+++ b/src/state/chatListState.ts
@@ -0,0 +1,19 @@
+// src/state/chatListState.ts
+
+import { atom } from 'recoil';
+
+interface ChatRoom {
+	id: string;
+	partner: string; 
+	recentMsg: number;
+}
+
+export const chatListState = atom<ChatRoom[]>({
+	key: 'chatListState',
+	default: [
+		{ id: 'room1', partner: '김모씨', recentMsg: 3 },
+		{ id: 'room2', partner: '박모씨', recentMsg: 1 },
+		{ id: 'room3', partner: '최모씨', recentMsg: 1 },
+		// 추가 대화방 정보
+	],
+});
\ No newline at end of file
diff --git a/src/state/messageState.ts b/src/state/messageState.ts
new file mode 100644
index 0000000..1a79adc
--- /dev/null
+++ b/src/state/messageState.ts
@@ -0,0 +1,16 @@
+// src/state/messageState.ts
+
+import { atom } from 'recoil';
+
+interface Message {
+	id: number;
+	from: string;
+	to: string;
+	content: string;
+	date: string;
+}
+
+export const messagesState = atom<{ [key: string]: Message[] } | undefined>({
+	key: 'messagesState',
+	default: undefined,
+});
diff --git a/src/state/userProfileState.ts b/src/state/userProfileState.ts
new file mode 100644
index 0000000..d1c263e
--- /dev/null
+++ b/src/state/userProfileState.ts
@@ -0,0 +1,14 @@
+// src/state/userProfileState.ts
+
+import { atom } from 'recoil';
+
+export const userProfileState = atom({
+	key: 'userProfileState',
+	default: {
+		name: '이영인',
+		phone: '82) 10-1234-5678',
+		image: '/item/profile_mini2.png',
+		github: 'https://github.com/jinnyleeis',
+		instagram: 'https://www.instagram.com/',
+	},
+});
diff --git a/src/state/userState.ts b/src/state/userState.ts
new file mode 100644
index 0000000..a0fd3dc
--- /dev/null
+++ b/src/state/userState.ts
@@ -0,0 +1,60 @@
+// src/state/userState.ts
+
+import { atom } from 'recoil';
+
+export interface Message {
+	id: number;
+	from: string;
+	to: string;
+	content: string;
+	date: string;
+}
+
+interface User {
+	id: string;
+	name: string;
+	image: string;
+	chatHistory?: Message[]; // 대화 내역 수정
+}
+
+export const userListState = atom<User[]>({
+	key: 'userListState',
+	default: [
+		// 0번은 current user - 메신저 앱 주인으로 설정
+		{
+			id: '0',
+			name: '이영인',
+			image: '/item/profile_mini2.png',
+			chatHistory: [],
+		},
+		{
+			id: '1',
+			name: '김모씨',
+			image: '/item/profile_mini.png',
+			chatHistory: [],
+		},
+		{
+			id: '2',
+			name: '박모씨',
+			image: '/item/profile_mini.png',
+			chatHistory: [],
+		},
+		{
+			id: '3',
+			name: '최모씨',
+			image: '/item/profile_mini.png',
+			chatHistory: [],
+		},
+		{
+			id: '4',
+			name: '최모씨',
+			image: '/item/profile_mini.png',
+			chatHistory: [],
+		},
+	],
+});
+
+export const currentUserState = atom<User>({
+	key: 'currentUserState',
+	default: { id: '0', name: '김모씨', image: '', chatHistory: [] },
+});
diff --git a/src/style/ChatBodyStyle.tsx b/src/style/ChatBodyStyle.tsx
new file mode 100644
index 0000000..b583baa
--- /dev/null
+++ b/src/style/ChatBodyStyle.tsx
@@ -0,0 +1,85 @@
+import styled, { css } from 'styled-components';
+
+export const ChatMessageBox = styled.div<{ isCurrentUser: boolean }>`
+	display: inline-block;
+	padding: 8px 9px 8px 9px;
+
+	width: 196px;
+	margin-left: 30px;
+	margin-bottom: 5px;
+	margin-top: 5px;
+	border-radius: 8px;
+	background-color: #ededed;
+	align-self: flex-start;
+	border-radius: 20px 20px 20px 5px;
+
+	color: var(--dark-gray, #4e5058);
+	font-family: 'Noto Sans KR';
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 150%; /* 24px */
+	letter-spacing: -0.41px;
+
+	${(props) =>
+		props.isCurrentUser &&
+		css`
+			border-radius: 20px 20px 5px 20px;
+			background-color: #dcf7c5;
+			align-self: flex-end;
+			margin-right: 5px;
+		`}
+
+	${(props) => !props.isCurrentUser && css``}
+`;
+
+export const ChatBodyContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	margin-top: 96px;
+
+	margin-bottom: 400px;
+	width: 375px;
+`;
+
+export const UserProfileImage = styled.img<{ isCurrentUser: boolean }>`
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	margin-right: 0px; /* 메시지 박스와의 간격 */
+	margin-left: 5px; /* 메시지 박스와의 간격 */
+	display: inline-block;
+	margin-top: -10px;
+	position: relative;
+	z-index: -5;
+
+	${(props) =>
+		props.isCurrentUser &&
+		css`
+			display: none;
+		`}
+`;
+
+export const DateSeparator = styled.div`
+	width: 122px;
+	height: 21px;
+	flex-shrink: 0;
+	border-radius: 4px;
+	background: var(--medium-gray, #d9d9d9);
+	color: #000;
+	text-align: center;
+	margin: 10px auto; // 정중앙 정렬
+	font-family: 'Noto Sans KR';
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 180%; /* 18px */
+`;
+
+export const TimeDisplay = styled.span`
+	display: block; // 메시지 박스 위에 표시
+	text-align: center; // 정중앙 정렬
+	margin-bottom: 5px;
+	margin-top: 5px;
+	font-size: 12px;
+`;
diff --git a/src/style/ChatBottomStyle.tsx b/src/style/ChatBottomStyle.tsx
new file mode 100644
index 0000000..29e2787
--- /dev/null
+++ b/src/style/ChatBottomStyle.tsx
@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+// ChatBottomContainer를 div로 변경하여 컨테이너로 사용
+export const ChatBottomContainer = styled.div`
+	position: fixed;
+	bottom:  280px;
+	width: 375px;
+	height: 80px;
+	flex-shrink: 0;
+
+	background-image: url('/item/chatBottom.png');
+	background-size: cover;
+	z-index: 2;
+`;
+
+export const ChatInput = styled.input`
+	width: 275px;
+	height: 32px;
+	flex-shrink: 0;
+	font-size: 14px;
+	margin-left: 11%;
+	border-radius: 16px;
+	border: 0.5px solid #8e8e93;
+	padding: 0px 0px 0px 7px;
+	opacity: 0.4496;
+	margin-top: 8px;
+	background: #fff;
+`;
+
+export const SendButton = styled.img`
+	width: 30px;
+	height: 30px;
+	flex-shrink: 0;
+	cursor: pointer;
+	border: none;
+	position: absolute;
+	margin-top: 9px;
+	margin-left: 4px;
+`;
diff --git a/src/style/ChatHeadStyle.tsx b/src/style/ChatHeadStyle.tsx
new file mode 100644
index 0000000..a0c4346
--- /dev/null
+++ b/src/style/ChatHeadStyle.tsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export const ChatHeadContainer = styled.div`
+	width: 375px;
+	height: 96px;
+	position: fixed;
+	top: 0px;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+
+	flex-shrink: 0;
+	background-image: url('/item/chatHead.png');
+	background-size: cover;
+  
+`;
+
+export const UserImage = styled.img`
+	margin-left: 45px;
+	margin-right: 10px;
+	margin-top: 30px;
+	border-radius: 50%;
+
+	width: 10px;
+	height: 40px;
+`;
+
+export const UserName = styled.h2`
+	font-size: 16px;
+	margin-top: 47px;
+	font-style: normal;
+	font-weight: 500;
+`;
+
+export const SendButton = styled.img`
+	width: 25px;
+	height: 25px;
+	flex-shrink: 0;
+	cursor: pointer;
+	border: none;
+	position: absolute;
+	margin-top: 30px;
+	margin-left: 10px;
+`;
diff --git a/src/style/ChattingRoomStyle.tsx b/src/style/ChattingRoomStyle.tsx
new file mode 100644
index 0000000..5eb6497
--- /dev/null
+++ b/src/style/ChattingRoomStyle.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const ChatRoomContainer = styled.div`
+	width: 375px;
+	height: 212px;
+	background: var(--white, #fff);
+	display: flex;
+	
+	
+`;
diff --git a/src/style/GlobalStyle.tsx b/src/style/GlobalStyle.tsx
new file mode 100644
index 0000000..bc89290
--- /dev/null
+++ b/src/style/GlobalStyle.tsx
@@ -0,0 +1,10 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  
+*{font-family: "Noto Sans KR"};
+
+  
+`;
+
+export default GlobalStyle;
diff --git a/tsconfig.json b/tsconfig.json
index a273b0c..7c03434 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,20 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		//	"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx"
+	},
+	"include": ["src"]
 }