CEOS-Developers · kongnayeon · Sep 27, 2022 · Sep 27, 2022 · Sep 27, 2022 · Sep 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -17,7 +17,8 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,9 +10,21 @@
     "@types/node": "^16.11.60",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@types/react-redux": "^7.1.24",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.26",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-kakao-login": "^2.1.1",
+    "react-redux": "^8.0.4",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.5",
+    "redux": "^4.2.0",
+    "styled-components": "^5.3.5",
+    "styled-normalize": "^8.0.7",
+    "typesafe-actions": "^5.1.0",
     "typescript": "^4.8.3",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/0.jpg b/public/images/0.jpg
diff --git a/public/images/1.jpg b/public/images/1.jpg
diff --git a/public/images/2.jpg b/public/images/2.jpg
diff --git a/public/images/3.jpg b/public/images/3.jpg
diff --git a/public/images/4.jpg b/public/images/4.jpg
diff --git a/public/images/5.jpg b/public/images/5.jpg
diff --git a/public/images/6.jpg b/public/images/6.jpg
diff --git a/public/images/Messages-clicked.png b/public/images/Messages-clicked.png
diff --git a/public/images/calls-clicked.png b/public/images/calls-clicked.png
diff --git a/public/images/calls.png b/public/images/calls.png
diff --git a/public/images/mainPage.png b/public/images/mainPage.png
diff --git a/public/images/messages-clicked.png b/public/images/messages-clicked.png
diff --git a/public/images/messages.png b/public/images/messages.png
diff --git a/public/images/pc-phone.png b/public/images/pc-phone.png
diff --git a/public/images/settings-clicked.png b/public/images/settings-clicked.png
diff --git a/public/images/settings.png b/public/images/settings.png
diff --git a/public/index.html b/public/index.html
@@ -5,39 +5,14 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>NewJeans</title>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
+    <script>
+      Kakao.init("6055d144e11ddb690f9aae8aaff34bfc");
+    </script>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,49 @@
+import styled from "styled-components";
+import ChatRoom from "./pages/ChatRoom";
+import ChatListPage from "./pages/ChatListPage";
+import GlobalStyle from "./styles/GlobalStyle";
+import { RecoilRoot } from "recoil";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import FriendsPage from "./pages/FriendsPage";
+import SettingPage from "./pages/SettingPage";
+import MainPage from "./pages/MainPage";
+
 function App() {
-  return <div>화이팅!!</div>;
+  return (
+    <BrowserRouter>
+      <RecoilRoot>
+        <GlobalStyle />
+        <Container>
+          <Routes>
+            <Route path="/" element={<MainPage />} />
+            <Route path="/friends" element={<FriendsPage />} />
+            <Route path="/chats" element={<ChatListPage />} />
+            <Route path="/room/:roomid" element={<ChatRoom />} />
+            <Route path="/settings" element={<SettingPage />} />
+          </Routes>
+        </Container>
+      </RecoilRoot>
+    </BrowserRouter>
+  );
 }
 
+// ㄱ-
+// const PhoneImage = styled.img`
+//   width: 26rem;
+//   z-index: 1;
+//   position: absolute;
+//   top: 7%;
+//   left: 37%;
+// `;
+
+const Container = styled.div`
+  width: 23rem;
+  height: 45rem;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  box-shadow: 0px 0px 20px rgb(125, 123, 125);
+  display: flex;
+  flex-direction: column;
+`;
+
 export default App;
diff --git a/src/assets/chatMessage.json b/src/assets/chatMessage.json
@@ -0,0 +1,131 @@
+{
+  "chatrooms": [
+    {
+      "roomid": 0,
+      "user": 1,
+      "chats": [
+        {
+          "userid": 1,
+          "chatid": 1664469417344,
+          "myAccount": false,
+          "chat": "내가 만든 쿠키 🍪",
+          "time": "10월 3일"
+        },
+        {
+          "userid": 0,
+          "chatid": 1664469417345,
+          "myAccount": true,
+          "chat": "너를 위해 구웠지 😽",
+          "time": "10월 3일"
+        }
+      ]
+    },
+    {
+      "roomid": 1,
+      "user": 2,
+      "chats": [
+        {
+          "userid": 2,
+          "chatid": 1664469417346,
+          "myAccount": false,
+          "chat": "느린 한마디보다 조용함이 더 좋아",
+          "time": "10월 4일"
+        },
+        {
+          "userid": 0,
+          "chatid": 1664469417347,
+          "myAccount": true,
+          "chat": "기다리고 있지만 매일 이런 건 아냐",
+          "time": "10월 4일"
+        }
+      ]
+    },
+    {
+      "roomid": 2,
+      "user": 3,
+      "chats": [
+        {
+          "userid": 0,
+          "chatid": 1664469417349,
+          "myAccount": true,
+          "chat": "에이 티 티 이 엔 티 아이 온~",
+          "time": "10월 28일"
+        },
+        {
+          "userid": 3,
+          "chatid": 1664469417348,
+          "myAccount": false,
+          "chat": "Attention is what I want~",
+          "time": "10월 28일"
+        }
+      ]
+    },
+    {
+      "roomid": 3,
+      "user": 4,
+      "chats": [
+        {
+          "userid": 4,
+          "chatid": 1664469417350,
+          "myAccount": false,
+          "chat": "내 지난 날들은 눈 뜨면 잊는 꿈",
+          "time": "10월 29일"
+        },
+        {
+          "userid": 0,
+          "chatid": 1664469417351,
+          "myAccount": true,
+          "chat": "Hype boy 너만 원해~",
+          "time": "10월 29일"
+        },
+        {
+          "userid": 4,
+          "chatid": 1664469417352,
+          "myAccount": false,
+          "chat": "Hype boy 내가 전해~",
+          "time": "10월 29일"
+        }
+      ]
+    },
+    {
+      "roomid": 4,
+      "user": 5,
+      "chats": [
+        {
+          "userid": 0,
+          "chatid": 1664469417360,
+          "myAccount": true,
+          "chat": "아니 얘네 왜 노래가 4곡밖에 없냐 ㄱ-",
+          "time": "11월 1일"
+        },
+        {
+          "userid": 5,
+          "chatid": 1664469417354,
+          "myAccount": false,
+          "chat": "ㅜ.ㅜ",
+          "time": "11월 1일"
+        }
+      ]
+    },
+    {
+      "roomid": 5,
+      "user": 6,
+      "chats": [
+        {
+          "userid": 6,
+          "chatid": 1664469417370,
+          "myAccount": false,
+          "chat": "뉴진스 컴백",
+          "time": "11월 2일"
+        },
+        {
+          "userid": 0,
+          "chatid": 1664469417371,
+          "myAccount": true,
+          "chat": "언제야~~?",
+          "time": "11월 2일"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/assets/userInformation.json b/src/assets/userInformation.json
@@ -0,0 +1,39 @@
+{
+  "users": [
+    {
+      "userid": 0,
+      "name": "NaYeon 💭",
+      "statusMessage": "\"Hell\"O World!..."
+    },
+    {
+      "userid": 1,
+      "name": "NewJeans 👖",
+      "statusMessage": "🍉🥭🥥🥑🍓"
+    },
+    {
+      "userid": 2,
+      "name": "HaeRin 😽",
+      "statusMessage": "😎👖"
+    },
+    {
+      "userid": 3,
+      "name": "HANNI 🐰",
+      "statusMessage": "🦭 hi hi~~~~"
+    },
+    {
+      "userid": 4,
+      "name": "Danielle 🍀",
+      "statusMessage": "Hi 🌻 Hi!🌻"
+    },
+    {
+      "userid": 5,
+      "name": "MINJI 🍒",
+      "statusMessage": "🧡"
+    },
+    {
+      "userid": 6,
+      "name": "HYEIN 🍼",
+      "statusMessage": "let..s be friennnnnnnd👽👽👽👽"
+    }
+  ]
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,72 @@
+import { useRecoilState, useRecoilValue } from "recoil";
+import styled from "styled-components";
+import { HeaderProps } from "../interfaces/interface";
+import { accountState, SearchState, userSelector } from "../store/atom";
+import { useNavigate } from "react-router-dom";
+
+const Header = ({
+  leftChild,
+  rightChild,
+  textChild,
+  isFriendsPage,
+}: HeaderProps) => {
+  const navigate = useNavigate();
+  const [userAccount, setUserAccount] = useRecoilState(accountState);
+  const filteredUser = useRecoilValue(userSelector);
+  const [isSearching, setIsSearching] = useRecoilState(SearchState);
+
+  const headText = textChild
+    ? textChild
+    : userAccount
+    ? filteredUser!.name
+    : "NaYeon 💭";
+
+  const handleHeadTextClick = () => {
+    setUserAccount(!userAccount);
+  };
+
+  const handleRightChildClick = () => {
+    const toggledSearch = !isSearching;
+    isFriendsPage ? setIsSearching(toggledSearch) : setIsSearching(false);
+  };
+
+  return (
+    <HeaderWrapper>
+      <HeaderButton onClick={() => navigate(-1)}>{leftChild}</HeaderButton>
+      <HeadText onClick={handleHeadTextClick}>{headText}</HeadText>
+      <HeaderButton onClick={handleRightChildClick}>{rightChild}</HeaderButton>
+    </HeaderWrapper>
+  );
+};
+
+const HeaderWrapper = styled.header`
+  display: flex;
+  align-items: center;
+`;
+
+const HeaderButton = styled.button`
+  width: 40px;
+  height: 40px;
+  background: #fff;
+  border-radius: 100%;
+  border: 1px solid #000000;
+  text-decoration: none;
+  color: #000;
+  font-size: 1.5rem;
+  padding: 0.5rem;
+  line-height: 15px;
+  text-align: center;
+  cursor: pointer;
+  transition: 0.5s;
+`;
+
+const HeadText = styled.span`
+  width: 80%;
+  font-size: 1.3rem;
+  font-weight: bold;
+  padding-left: 1rem;
+  cursor: pointer;
+  transition: 0.5s;
+`;
+
+export default Header;