[5주차] 고윤정 미션 제출합니다. #17

hyorish03 · 2024-10-10T07:37:46Z

위 코드를 App에서 작성하신 이유가 있을까요 ? InputBox 안에서만 사용하는 코드인 것 같은데, InputBox 컴포넌트 내에서 선언 및 사용하시는게 좋을 것 같습니다. 불필요하게 props를 내려주고 있는 것 같아요 ~

ongheong · 2024-10-11T07:13:32Z

*로 path를 한번 더 설정한 이유가 있을까요?

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    declare module '*.svg';
+    declare module '*.png';
+    declare module '*.jpg';

-Original file line number
+Diff line change
@@ Expand Up / @@ -35,4 +35,9 @@ export default [ @@
           ],
         },
       },
+      {
+        rules: {
+          'react/no-unknown-property': ['error', { ignore: ['css'] }],
+        },
+      },
     ];

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,12 +2,16 @@ @@
     <html lang="en">
       <head>
         <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <link rel="icon" type="image/svg+xml" href="/assets/phoning.png" />
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>React SNS</title>
+        <title>Phoning 📱🐰💗</title>
       </head>
       <body>
         <div id="root"></div>
-        <script type="module" src="/src/main.jsx"></script>
+        <script type="module" src="/src/main.tsx"></script>
       </body>
     </html>

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,19 +10,25 @@ @@
         "preview": "vite preview"
       },
       "dependencies": {
+        "@emotion/react": "^11.13.3",
+        "@types/jest": "^29.5.13",
+        "@types/node": "^22.5.5",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.2",
+        "recoil": "^0.7.7"
       },
       "devDependencies": {
         "@eslint/js": "^9.9.0",
-        "@types/react": "^18.3.3",
+        "@types/react": "^18.3.7",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
         "eslint": "^9.9.0",
         "eslint-plugin-react": "^7.35.0",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.9",
         "globals": "^15.9.0",
+        "typescript": "^5.6.2",
         "vite": "^5.4.1"
       }
     }

-Original file line number
+Diff line change
@@ -0,0 +1,65 @@
+    /** @jsxImportSource @emotion/react */
+    import { css } from '@emotion/react';
+    import Header from './components/Header';
+    import Content from './components/Content';
+    import InputBox from './components/InputBox';
+    import GlobalStyle from './components/GlobalStyle';
+    import { useSetRecoilState } from 'recoil';
+    import { messageState } from './recoil/atoms';
+    import { useParams } from 'react-router-dom';
+    // 메시지 타입
+    interface messageType {
+      id: number;
+      userId: number;
+      text: string;
+      time: string;
+    }
+    function App() {
+      const { chatId } = useParams<{ chatId: string }>(); // URL에서 chatId를 가져옴
+      const setMessages = useSetRecoilState(messageState);
+      function addMessage(text: string): void {
+        const newMessage: messageType = {
+          id: Date.now(),
+          userId: 0, // 항상 0으로 설정(메시지를 추가하면 '내'가 추가하도록 설정)
+          text: text,
+          time: new Date().toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+          }),
+        }; // '오전 12:00' 포맷으로 출력
+        setMessages((prevMessages) => {
+          const chatRoomId = parseInt(chatId || '1', 10);
+          return {
+            ...prevMessages,
+            [chatRoomId]: [...(prevMessages[chatRoomId] || []), newMessage],
+          };
+        }); // 기존 메시지에 새로운 메시지 추가
+      }
+      return (
+        <>
+          <GlobalStyle />
+          <div css={wrapperStyle}>
+            <Header />
+            <Content chatId={parseInt(chatId || '0', 10)} />
+            <InputBox addMessage={addMessage} />
+          </div>
+        </>
+      );
+    }
+    export default App;
+    // emotion/css
+    const wrapperStyle = css`
+      width: 100%;
+      max-width: 430px;
+      background: linear-gradient(#f8ff2e, #ffffff 40%);
+      border: 1px solid #1d1d1d;
+      overflow: hidden;
+    `;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[5주차] 고윤정 미션 제출합니다. #17

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

hyorish03 Oct 10, 2024

Uh oh!

ongheong Oct 11, 2024

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ -0,0 +1,18 @@
+    import React from 'react';
+    import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+    import List from './List';
+    import App from './App';
+    export default function RouterList() {
+      return (
+        <div>
+          <Routes>
+            <Route path="/" element={<Navigate to="/list" />} />
+            <Route path="/list" element={<List />} />
+            <Route path="/chatroom/:chatId" element={<App />} />
+            <Route path="*" element={<Navigate to="/list" />} />
+          </Routes>
+        </div>
+      );
+    }

[5주차] 고윤정 미션 제출합니다. #17

Are you sure you want to change the base?

Uh oh!

[5주차] 고윤정 미션 제출합니다. #17

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

hyorish03 Oct 10, 2024

Choose a reason for hiding this comment

Uh oh!

ongheong Oct 11, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!