[4주차 이한비 미션 제출합니다]

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

package.json

@@ -12,7 +12,10 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.5",
+    "styled-components": "^5.3.6",
     "typescript": "^4.8.3",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
   }
 }

src/App.tsx

@@ -1,5 +1,93 @@
+import React, { useState } from 'react';
+import InputForm from './components/InputMessage';
+import styled from 'styled-components';
+
+import MessageChatForm from './components/MessageChatForm';
+
+import { useRecoilState, useRecoilValue, RecoilRoot } from 'recoil';
+
+import useChatRoom from './hooks/useChatRoom';
+import { useEffect } from 'react';
+import { chatRoomState } from './atom';
+import { Link, useNavigate } from 'react-router-dom';
+
 function App() {
-  return <div>화이팅!!</div>;
+  const navigate = useNavigate();
+  const { addMsg, toggleAccount } = useChatRoom();
+  const chatRoom = useRecoilValue(chatRoomState);
+  /*
+  useEffect(() => {
+    console.log(chatRoom);
+  }, [chatRoom]);
+  */
+
+  const onCLickMe = (): void => {
+    toggleAccount(0);
+  };
+  const onCLickYou = (): void => {
+    toggleAccount(1);
+  };
+  const goToMain = () => {
+    navigate('/list');
+  };
+
+  return (
+    <AllTemplate>
+      <ImgProfAll>
+        <div>
+          <ImgProf
+            onClick={onCLickMe}
+            src="https://hjm79.top/wp-content/uploads/2022/06/zzal1.jpeg"
+          ></ImgProf>
+          <h4>이한비</h4>
+        </div>
+        <div>
+          <ImgProf
+            onClick={onCLickYou}
+            src="https://blog.kakaocdn.net/dn/dowIkh/btrdtJZG3Eh/74NuD1tiFw7QzhqxOZ2Po0/img.png"
+          ></ImgProf>
+          <h4>문상훈</h4>
+        </div>
+        <div>
+          <button className="quitBut" onClick={goToMain}>
+            x
+          </button>
+        </div>
+      </ImgProfAll>
+      <MessageChatForm />
+      <InputForm sendMsg={addMsg} />
+    </AllTemplate>
+  );
 }
 
+const AllTemplate = styled.div`
+  width: 350px;
+  height: 660px;
+  background-color: white;
+  border-radius: 20px;
+  box-shadow: 1px 1px 30px grey;
+  margin-top: 10%;
+  margin-bottom: 10%;
+  margin-left: 38%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ImgProfAll = styled.section`
+  display: flex;
+  flex-direction: row;
+`;
+const ImgProf = styled.img`
+  width: 100px;
+  height: 100px;
+  border-radius: 25px;
+  transition: 0.5s;
+  display: block;
+  :hover {
+    cursor: grab;
+    width: 105px;
+    height: 105px;
+  }
+`;
+
 export default App;

src/atom.tsx

@@ -0,0 +1,82 @@
+import { atom, selector } from 'recoil';
+import messages from '../src/db/messages.json';
+import users from '../src/db/user.json';
+import {
+  IChatRoomItem,
+  IChatRoomState,
+  IUserState,
+  IChatRoomId,
+} from './interface';
+
+export const messageState = atom<IChatRoomItem[]>({
+  key: 'messages',
+  default: messages,
+});
+
+export const idFilterState = selector({
+  key: 'rooms',
+  get: ({ get }) => {
+    const filter = get(chatRoomState);
+    const ids = get(messageState);
+    const valueOb = ids.filter((va) => filter.id === va.id)[0];
+    /*if (valueOb.message.length !== 0) {
+      return valueOb;
+    } else {
+      return console.log('error');
+    }
+    */
+    return valueOb;
+  },
+  set: ({ set, get }, newValue: any) => {
+    const realData = get(messageState);
+    const filter = get(chatRoomState);
+    const realMess = realData.filter((v) => v.id === newValue.id);
+    set(messageState, newValue);
+  },
+});
+
+export const userState = atom<IUserState>({
+  key: 'user',
+  default: {
+    users: users,
+    mainUser: users[0],
+  },
+});
+
+export const chatRoomState = atom<IChatRoomState>({
+  key: 'chatRoom',
+  default: {
+    id: 0,
+    messages: [],
+    message: [],
+    currentUser: {
+      id: 0,
+      name: '이한비',
+      currentText: '배고파...',
+    },
+  },
+});
+
+export const chatRoomId = atom<IChatRoomId>({
+  key: 'chatId',
+  default: {
+    id: 1,
+  },
+});
+
+/*
+export const chatState = atom<IMessageType[]>({
+  key:"chats",
+  default:[
+    {id: number,
+    text: string,
+    user: IUserInfo,
+    time: string}
+  ]
+})
+export const selectCurrentUser = selector<IChatRoomState[]>({
+  key:"selectUser",
+  get:({get})=>{
+    const original
+  }
+})*/

src/components/InputMessage.tsx

@@ -0,0 +1,55 @@
+import useInput from '../hooks/useInput';
+import React from 'react';
+import styled from 'styled-components';
+import { IInputForm } from '../interface';
+
+const InputForm = ({ sendMsg }: IInputForm) => {
+  const { chat, handleChange, resetChat } = useInput('');
+  const addInput = (e: React.FormEvent): void => {
+    e.preventDefault();
+    if (!chat.trim()) {
+      resetChat();
+    } else {
+      sendMsg(chat);
+      resetChat();
+    }
+  };
+
+  return (
+    <StyledAddList onSubmit={addInput}>
+      <StyledInput placeholder="입력" value={chat} onChange={handleChange} />
+      <StyledButton>전송</StyledButton>
+    </StyledAddList>
+  );
+};
+
+const StyledAddList = styled.form`
+  display: flex;
+  text-align: center;
+  font-weight: bolder;
+  font-family: 'Jua', sans-serif;
+  padding-bottom: 10px;
+`;
+
+const StyledInput = styled.input`
+  border: 1px solid lightgrey;
+  border-radius: 10px;
+  font-family: 'Jua', sans-serif;
+  padding: 15px;
+  width: 235px;
+  height: 65px;
+  margin-left: 9px;
+  margin-top: 3px;
+`;
+const StyledButton = styled.button`
+  border: 1px solid lightgrey;
+  border-radius: 10px;
+  font-family: 'Jua', sans-serif;
+  font-size: 25px;
+  color: white;
+  background-color: #337de4;
+  margin-left: 5px;
+  margin-top: 3px;
+`;
+
+export default InputForm;

src/components/MessageChat.tsx

@@ -0,0 +1,120 @@
+import { IMessageType } from '../interface';
+import { useRecoilValue } from 'recoil';
+import { chatRoomState } from '../atom';
+import styled, { css } from 'styled-components';
+import { useParams } from 'react-router-dom';
+
+const MessageChat = ({ messages }: { messages: IMessageType }) => {
+  const { currentUser } = useRecoilValue(chatRoomState);
+
+  const isUser = messages.user.id === currentUser.id;
+
+  let params = useParams();
+  let num = params.id;
+  console.log(num);
+
+  return (
+    <MessageBox isUser={isUser}>
+      <section>
+        <MessageUser isUser={isUser}></MessageUser>
+        <MessageProfAll>
+          <Messageimg
+            isUser={isUser}
+            _id={messages.user.id}
+            _currentUserId={currentUser.id}
+            src={`/img/${messages.user.id}.png`}
+          />
+          <MessageText isUser={isUser}>{messages.text}</MessageText>
+        </MessageProfAll>
+      </section>
+
+      <MessageTime isUser={isUser}>{messages.time}</MessageTime>
+    </MessageBox>
+  );
+};
+
+const MessageProfAll = styled.section`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Messageimg = styled.img<{
+  isUser: boolean;
+  _id: number;
+  _currentUserId: number;
+}>`
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background-size: cover;
+
+  ${({ _id, _currentUserId }) =>
+    _id === _currentUserId &&
+    css`
+      align-self: flex-end;
+    `}
+`;
+
+const MessageTime = styled.p<{ isUser: boolean }>`
+  font-size: 0.5rem;
+  color: lightgrey;
+  display: flex;
+  align-items: flex-end;
+  ${({ isUser }) =>
+    isUser
+      ? css`
+          margin-left: 0.5rem;
+        `
+      : css`
+          margin-right: 0.5rem;
+        `}
+`;
+
+const MessageBox = styled.section<{ isUser: boolean }>`
+  display: flex;
+  flex-direction: ${({ isUser }) => isUser && 'row-reverse'};
+  padding-bottom: 1rem;
+`;
+
+const MessageText = styled.p<{ isUser: boolean }>`
+  padding: 0.65rem;
+
+  font-size: 0.75rem;
+  margin: 0.4rem;
+  margin-top: 0.1px;
+  ${({ isUser }) =>
+    isUser
+      ? css`
+          border-radius: 0.5rem 0 0.5rem 0.5rem;
+          background-color: #337de4;
+          color: #ffffff;
+          font-weight: bold;
+          margin-right: 40px;
+        `
+      : css`
+          border-radius: 0 0.5rem 0.5rem 0.5rem;
+          background-color: #f1f1f3;
+          font-weight: bold;
+          margin-left: 40px;
+        `};
+`;
+
+const MessageUser = styled.p<{ isUser: boolean }>`
+  font-size: 0.5rem;
+  color: white;
+  margin: 0px;
+  display: flex;
+  ${({ isUser }) =>
+    isUser
+      ? css`
+          justify-content: flex-end;
+          margin-right: 0.2rem;
+          font-weight: bold;
+        `
+      : css`
+          margin-left: 0.2rem;
+          font-weight: bold;
+        `}
+`;
+
+export default MessageChat;