-
+
+
);
}
From 1f8af7e75be812934ec3c5f700e9434bec89e83e Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Thu, 26 Sep 2024 21:43:30 +0900
Subject: [PATCH 14/74] =?UTF-8?q?style=20:=20=EC=A0=84=EC=97=AD=20?=
=?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/reset.css | 134 +++++++++++++++++++++++++++++++++++++++++++++
tailwind.config.js | 2 +
2 files changed, 136 insertions(+)
create mode 100644 public/reset.css
diff --git a/public/reset.css b/public/reset.css
new file mode 100644
index 00000000..a7f850b8
--- /dev/null
+++ b/public/reset.css
@@ -0,0 +1,134 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+body {
+ line-height: 1;
+ /* background-color: #252423; */
+ /* color: whitesmoke; */
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+button {
+ all: unset;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 34ef6a02..46833312 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,9 +12,11 @@ module.exports = {
dark: '#53151A',
},
gray: {
+ 50: '#F1F1F1',
100: '#DFDFDF',
500: '#919191',
700: '#676767',
+ 900: '#212121',
},
},
fontSize: {
From d76e700e569ef7084d509941bbdbb312a1e8446e Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Thu, 26 Sep 2024 21:44:05 +0900
Subject: [PATCH 15/74] =?UTF-8?q?docs=20:=20ChattingBox=EC=82=AD=EC=A0=9C?=
=?UTF-8?q?=20=ED=9B=84,=20MessageItem=20=EB=A7=8C=EB=93=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/ChattingBox.tsx | 17 -----------------
1 file changed, 17 deletions(-)
delete mode 100644 src/components/ChattingBox.tsx
diff --git a/src/components/ChattingBox.tsx b/src/components/ChattingBox.tsx
deleted file mode 100644
index 950203ed..00000000
--- a/src/components/ChattingBox.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-type GreetingsProps = {
- name: string;
- time: string;
- content: string;
-};
-
-const Greetings = ({ name, time, content }: GreetingsProps) => (
-
Hello, {name}
-);
-
-Greetings.defaultProps = {
- mark: '!',
-};
-
-export default Greetings;
From d988ce2d0e7a196e26a69b5719663c88e2becd57 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Thu, 26 Sep 2024 21:44:24 +0900
Subject: [PATCH 16/74] =?UTF-8?q?docs=20:=20=EB=8C=80=ED=99=94=20=EC=9E=84?=
=?UTF-8?q?=EC=8B=9C=20=ED=8C=8C=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/data/messages.json | 32 ++++++++++++++++++++++++++++++++
1 file changed, 32 insertions(+)
create mode 100644 src/data/messages.json
diff --git a/src/data/messages.json b/src/data/messages.json
new file mode 100644
index 00000000..81664e7b
--- /dev/null
+++ b/src/data/messages.json
@@ -0,0 +1,32 @@
+[
+ {
+ "id": "Thu Sep 26 2024 21:41:22 GMT+0900 (한국 표준시)",
+ "name": "박재원",
+ "sender": "sender",
+ "content": "안녕 재원아"
+ },
+ {
+ "id": "Thu Sep 26 2024 21:41:24 GMT+0900 (한국 표준시)",
+ "name": "박재원",
+ "sender": "sender",
+ "content": "반가워"
+ },
+ {
+ "id": "Thu Sep 26 2024 21:41:27 GMT+0900 (한국 표준시)",
+ "name": "박재원",
+ "sender": "sender",
+ "content": "나는 희원이야"
+ },
+ {
+ "id": "Thu Sep 26 2024 21:41:42 GMT+0900 (한국 표준시)",
+ "name": "박재원",
+ "sender": "sender",
+ "content": "00이지만"
+ },
+ {
+ "id": "Thu Sep 26 2024 21:41:50 GMT+0900 (한국 표준시)",
+ "name": "박재원",
+ "sender": "sender",
+ "content": "액면가는 05지"
+ }
+]
From dd8915de74611e7fe53cdf7f83a8838ae9d34e30 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Thu, 26 Sep 2024 21:45:42 +0900
Subject: [PATCH 17/74] =?UTF-8?q?feat=20:=20=EC=B1=84=ED=8C=85=20submit?=
=?UTF-8?q?=ED=9B=84=20ChatMain=EC=97=90=20=EC=9A=94=EC=86=8C=20=EB=B0=98?=
=?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/MessageItem.tsx | 27 +++++++++++++++++++++++++++
src/hooks/useLocalStorage.ts | 33 +++++++++++++++++++++++++++++++++
src/pages/Chat/Chat.tsx | 31 +++++++++++++++++++++++++++++--
src/pages/Chat/ChatForm.tsx | 21 +++++++--------------
src/pages/Chat/ChatHeader.tsx | 13 ++++---------
src/pages/Chat/ChatInterface.ts | 18 ++++++++++++++++++
src/pages/Chat/ChatMain.tsx | 28 ++++++++++++++++++++++++----
7 files changed, 142 insertions(+), 29 deletions(-)
create mode 100644 src/components/MessageItem.tsx
create mode 100644 src/hooks/useLocalStorage.ts
create mode 100644 src/pages/Chat/ChatInterface.ts
diff --git a/src/components/MessageItem.tsx b/src/components/MessageItem.tsx
new file mode 100644
index 00000000..7ebd0ca8
--- /dev/null
+++ b/src/components/MessageItem.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ChatInterface } from '../pages/Chat/ChatInterface';
+
+type ChattingProps = {
+ name: string; // 나
+ sender: string; // 상대방
+ time: string; // 메시지 친 시간
+ content: string; // 메시지 내용
+ timeStamp: string; // 언제썼는지
+ isOwnMessage: boolean; // 이 메시지가 내건지
+};
+
+const MessageItem = ({ isOwnMessage, content }: ChatInterface) => {
+ return (
+
+ {content}
+
+ );
+};
+
+export default MessageItem;
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..0fc25ff4
--- /dev/null
+++ b/src/hooks/useLocalStorage.ts
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+interface LocalStorageProps {
+ key: string;
+ initialValue: any; // 바꿔야 됨
+}
+// useLocalStorage : localStorage 관리하는 커스텀 훅
+export function useLocalStorage({ key, initialValue }: LocalStorageProps) {
+ // localStorage에서 값을 가져오거나 초기 값을 설정
+ const [storedValue, setStoredValue] = useState(() => {
+ try {
+ const item = window.localStorage.getItem(key); // key에 해당하는 놈들 가져옴
+ return item ? JSON.parse(item) : initialValue;
+ } catch (error) {
+ console.error('Error reading from localStorage', error);
+ return initialValue;
+ }
+ });
+
+ // setValue : localStorage에 값을 설정하는 함수
+ const setValue = (value: string | Function) => {
+ try {
+ const valueToStore =
+ value instanceof Function ? value(storedValue) : value; // value가 함수인 경우에 실행해주려구
+ setStoredValue(valueToStore);
+ window.localStorage.setItem(key, JSON.stringify(valueToStore)); // 다시 스토리지에 저장
+ } catch (error) {
+ console.error('Error setting localStorage', error);
+ }
+ };
+
+ return [storedValue, setValue];
+}
diff --git a/src/pages/Chat/Chat.tsx b/src/pages/Chat/Chat.tsx
index abba71a7..6ff9bac9 100644
--- a/src/pages/Chat/Chat.tsx
+++ b/src/pages/Chat/Chat.tsx
@@ -1,13 +1,40 @@
+import { useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import defaultMessages from '../../data/messages.json';
+
import ChatHeader from './ChatHeader';
import ChatMain from './ChatMain';
import ChatForm from './ChatForm';
+import { ChatInterface } from './ChatInterface';
+import { useEffect } from 'react';
+
export default function Chat() {
+ const userName = useSelector((state: RootState) => state.user.name);
+
+ const [messages, setMessages] = useLocalStorage({
+ key: 'messages',
+ initialValue: defaultMessages,
+ });
+
+ // addMessage : 메시지 저장 로직 추가 -> localStorage에 차곡히 쌓음
+ const addMessage = (text: string) => {
+ const newMessage = {
+ id: new Date().toString(),
+ name: userName,
+ sender: 'sender',
+ content: text,
+ timeStamp: new Date().toLocaleDateString,
+ };
+
+ setMessages([...messages, newMessage]);
+ };
return (
addMessage(text)} />
);
}
diff --git a/src/pages/Chat/ChatForm.tsx b/src/pages/Chat/ChatForm.tsx
index 0567a8e9..2785b1c7 100644
--- a/src/pages/Chat/ChatForm.tsx
+++ b/src/pages/Chat/ChatForm.tsx
@@ -1,32 +1,25 @@
import { RootState } from '../../redux/store';
import { useSelector, useDispatch } from 'react-redux';
-import { useState } from 'react';
import Form from '../../components/Form';
import Button from '../../components/Button';
-import { useLocalStorage } from '../../hooks/useLocalStorage';
import addCircle from '../../assets/addCircle.svg';
import emoji from '../../assets/emoji.svg';
-export default function ChatForm() {
+
+import { ChatFormInterface } from './ChatInterface';
+
+export default function ChatForm({ addMessage }: ChatFormInterface) {
const userName = useSelector((state: RootState) => state.user.name);
- const addMessage = (text: string) => {
- // TODO : 메시지 저장 로직 추가
- const newMessage = {
- id: new Date().toString(),
- text: text,
- sender: userName,
- timeStamp: new Date().toLocaleDateString,
- };
- };
+
return (
-
+
diff --git a/src/pages/Chat/ChatHeader.tsx b/src/pages/Chat/ChatHeader.tsx
index 0b288df6..5996d838 100644
--- a/src/pages/Chat/ChatHeader.tsx
+++ b/src/pages/Chat/ChatHeader.tsx
@@ -1,20 +1,15 @@
import type { RootState } from '../../redux/store';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
import { setUser } from '../../redux/userSlice';
+import { ChatInterface } from './ChatInterface';
import prevButton from '../../assets/prevButton.png';
import Profile from '../../components/Profile';
-interface ChatInfoInterface {
- user: string;
- recentTime: string;
-}
+// ChatHeader : 현재 누구와 대화하고 있는 지 확인할 수 있음
export default function ChatHeader() {
const userName = useSelector((state: RootState) => state.user.name);
const recentTime = '화요일 오후 2시';
- const dispatch = useDispatch();
-
- // TODO : 여기에다가 이미지 주소 추가하고 아닌 경우 '박'이라고 일단은 두기로
return (
@@ -25,7 +20,7 @@ export default function ChatHeader() {
/>
-
{userName}
+
{userName || '박'}
{recentTime}
diff --git a/src/pages/Chat/ChatInterface.ts b/src/pages/Chat/ChatInterface.ts
new file mode 100644
index 00000000..cc6e04da
--- /dev/null
+++ b/src/pages/Chat/ChatInterface.ts
@@ -0,0 +1,18 @@
+export interface ChatInterface {
+ name: string; // 나
+ sender: string; // 상대방
+ time: string; // 메시지 친 시간
+ content: string; // 메시지 내용
+ timeStamp: string; // 언제썼는지
+ isOwnMessage: boolean; // 이 메시지가 내건지
+}
+
+// ChatMainInterface : ChatInterface로 이뤄진 배열
+export interface ChatMainInterface {
+ messages: ChatInterface[];
+}
+
+// ChatFormProps : localStorage내부 배열에 채팅메시지 추가
+export interface ChatFormInterface {
+ addMessage: (text: string) => void;
+}
diff --git a/src/pages/Chat/ChatMain.tsx b/src/pages/Chat/ChatMain.tsx
index 3b97ebef..1d420c0e 100644
--- a/src/pages/Chat/ChatMain.tsx
+++ b/src/pages/Chat/ChatMain.tsx
@@ -1,6 +1,26 @@
-import Profile from '../../components/Profile';
-import ChatHeader from './ChatHeader';
+import { useEffect } from 'react';
+import type { RootState } from '../../redux/store';
+import { useSelector } from 'react-redux';
+import MessageItem from '../../components/MessageItem';
+import { ChatMainInterface } from './ChatInterface';
-export default function ChatMain() {
- return
chatmain
;
+export default function ChatMain({ messages }: ChatMainInterface) {
+ const userName = useSelector((state: RootState) => state.user.name);
+
+ return (
+
+ {messages.map((message) => (
+
+
+ ))}
+
+ );
}
From dab9d0771c3950fca15ac19cfd3b9e1075c776ab Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Thu, 26 Sep 2024 21:45:57 +0900
Subject: [PATCH 18/74] =?UTF-8?q?docs=20:=20=EC=A3=BC=EC=84=9D=20=EC=82=AD?=
=?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/redux/userSlice.ts | 26 --------------------------
1 file changed, 26 deletions(-)
diff --git a/src/redux/userSlice.ts b/src/redux/userSlice.ts
index 9055abcb..19a9abe3 100644
--- a/src/redux/userSlice.ts
+++ b/src/redux/userSlice.ts
@@ -1,29 +1,3 @@
-// import { createSlice } from '@reduxjs/toolkit';
-
-// const initialState = {
-// _id: '',
-// name: '',
-// profile_img: '',
-// };
-
-// export const userSlice = createSlice({
-// name: 'user',
-// initialState,
-// reducers: {
-// setUser: (state, action) => {
-// state._id = action.payload._id;
-// state.name = action.payload.name;
-// state.profile_img = action.payload.profile_img;
-// },
-// },
-// });
-
-// // Action creators are generated for each case reducer function
-// export const { setUser, setToken, logout, setOnlineUser, setSocketConnection } =
-// userSlice.actions;
-
-// export default userSlice.reducer;
-
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
From d70c136026f6ff85bc51fff0aa03a1d0a2b5dac9 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Thu, 26 Sep 2024 21:46:27 +0900
Subject: [PATCH 19/74] =?UTF-8?q?style(Form)=20:=20=EB=94=94=EC=9E=90?=
=?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/Form.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 795ad6b3..97179aea 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -24,13 +24,13 @@ const Form = ({ name, src, children, onSubmit }: FormProps) => {
}
};
return (
-