#4 얼루가게 PC Screen 구현

package.json

@@ -7,16 +7,22 @@
   "type": "module",
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@tanstack/react-query": "^5.51.11",
+    "@tanstack/react-query-devtools": "^5.51.11",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.103",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "dayjs": "^1.11.12",
     "electron-is-dev": "^3.0.1",
+    "jotai": "^2.9.0",
+    "jotai-devtools": "^0.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.12",
     "typescript": "^4.9.5",
@@ -50,6 +56,7 @@
     ]
   },
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.51.12",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "electron": "^31.2.1",

public/electron.js

@@ -10,8 +10,10 @@ let mainWindow
 
 function createWindow() {
   mainWindow = new BrowserWindow({
-    width: 900,
-    height: 680,
+    width: 1440,
+    height: 900,
+    resizable: false,
+    useContentSize: true,
     webPreferences: {
       nodeIntegration: true,
       enableRemoteModule: true,
@@ -24,7 +26,6 @@ function createWindow() {
 
   if (isDev) mainWindow.webContents.openDevTools({ mode: 'detach' })
 
-  mainWindow.setResizable(true)
   mainWindow.on('closed', () => {
     mainWindow = null
     app.quit()

src/App.tsx

@@ -1,26 +1,21 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import { Route, Routes } from 'react-router'
+import { ROUTE } from './constants/path'
+import ProcessMain from './pages/process'
+import Layout from './components/layout'
+import Login from './pages/login'
+import HistoryMain from './pages/history'
+import WaitMain from './pages/waiting'
 
-function App() {
+export default function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    <Routes>
+      <Route path={ROUTE.LOGIN} element={<Login />} />
+      <Route element={<Layout />}>
+        <Route path={ROUTE.WAITING_MAIN} element={<WaitMain />} />
+        <Route path={ROUTE.PROCESS_MAIN} element={<ProcessMain />} />
+        <Route path={ROUTE.HISTORY_MAIN} element={<HistoryMain />} />
+      </Route>
+    </Routes>
+  )
 }
-
-export default App;

src/components/historyDateFilter.tsx

@@ -0,0 +1,67 @@
+import dayjs from 'dayjs'
+import React, { SetStateAction, useState } from 'react'
+import styled from 'styled-components'
+
+const buttonText = ['오늘', '1주', '1개월']
+
+interface HistoryDateFilterProps {
+  date: string
+  setDate: React.Dispatch<SetStateAction<string>>
+}
+
+export default function HistoryDateFilter({ date, setDate }: HistoryDateFilterProps) {
+  const [selectedIdx, setSelectedIdx] = useState<number>(0)
+
+  const onClickDate = (index: number) => {
+    setSelectedIdx(index)
+    switch (index) {
+      case 0:
+        setDate(dayjs().format('YYYY.MM.DD'))
+        break
+      case 1:
+        setDate(dayjs().subtract(1, 'week').format('YYYY.MM.DD') + ' - ' + dayjs().format('YYYY.MM.DD'))
+        break
+      case 2:
+        setDate(dayjs().subtract(1, 'month').format('YYYY.MM.DD') + ' - ' + dayjs().format('YYYY.MM.DD'))
+        break
+      default:
+        setDate('error')
+    }
+  }
+
+  const onClickDateInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDate(dayjs(event.target.value).format('YYYY.MM.DD'))
+  }
+
+  return (
+    <Container>
+      {buttonText.map((text, i) => (
+        <DateButton selected={i === selectedIdx} onClick={() => onClickDate(i)}>
+          {text}
+        </DateButton>
+      ))}
+      <DateInput type="date" value={dayjs(date).format('YYYY.MM.DD')} onChange={onClickDateInput} />
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 45px;
+`
+const DateButton = styled.div<{ selected: boolean }>`
+  background-color: ${props => (props.selected ? '#000000' : 'transparent')};
+  color: ${props => (props.selected ? '#FFFFFF' : '#000000')};
+  border-radius: 1000px;
+  padding: 12px 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`
+const DateInput = styled.input`
+  border-radius: 8px;
+  padding: 12px 16px;
+  border: 2px solid #c6c6c6;
+`

src/components/layout.tsx

@@ -0,0 +1,56 @@
+import { Outlet, useNavigate } from 'react-router'
+import styled from 'styled-components'
+import NavBar from './navBar'
+import { useAtom } from 'jotai'
+import { currentTabAtom, historyCountAtom, processCountAtom, waitingCountAtom } from 'utils/atom'
+import { ROUTE } from 'constants/path'
+
+export default function Layout() {
+  const navigate = useNavigate()
+  const [, setCurrentTab] = useAtom(currentTabAtom)
+  const [waitingCount] = useAtom(waitingCountAtom)
+  const [processCount] = useAtom(processCountAtom)
+  const [historyCount] = useAtom(historyCountAtom)
+
+  const navBarItem = [
+    {
+      name: '승인 대기',
+      count: waitingCount,
+      onClick: () => onClickTab(ROUTE.WAITING_MAIN),
+    },
+    {
+      name: '진행 중',
+      count: processCount,
+      onClick: () => onClickTab(ROUTE.PROCESS_MAIN),
+    },
+    {
+      name: '히스토리',
+      count: historyCount,
+      onClick: () => onClickTab(ROUTE.HISTORY_MAIN),
+    },
+  ]
+
+  const onClickTab = (pathname: string) => {
+    setCurrentTab(pathname)
+    navigate(pathname)
+  }
+
+  return (
+    <Container>
+      <NavWrapper>
+        <NavBar items={navBarItem} />
+      </NavWrapper>
+      <Outlet />
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`
+const NavWrapper = styled.div`
+  width: 240px;
+  height: 100%;
+`

src/components/navBar.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import NavBarItem from './navBarItem'
+import styled from 'styled-components'
+import { useAtom } from 'jotai'
+import { currentTabAtom } from 'utils/atom'
+import { ROUTE } from 'constants/path'
+
+type VerticalNavProps = {
+  items: { name: string; count?: number; onClick: () => void }[]
+}
+
+export default function NavBar({ items }: VerticalNavProps) {
+  const [, setCurrentTab] = useAtom(currentTabAtom)
+  const [focusedIdx, setFocusedIdx] = useState<number>(0)
+
+  const onClickItem = (i: number, onClick: () => void) => {
+    switch (i) {
+      case 0:
+        setCurrentTab(ROUTE.WAITING_MAIN)
+        break
+      case 1:
+        setCurrentTab(ROUTE.PROCESS_MAIN)
+        break
+      case 2:
+        setCurrentTab(ROUTE.HISTORY_MAIN)
+        break
+      default:
+        setCurrentTab('error')
+    }
+    setFocusedIdx(i)
+    onClick()
+  }
+
+  return (
+    <Container>
+      {items.map((item, i) => (
+        <NavBarItem
+          name={item.name}
+          count={item.count}
+          isFocused={i === focusedIdx}
+          onClick={() => onClickItem(i, item.onClick)}
+        />
+      ))}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`

src/components/navBarItem.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components'
+
+type VerticalNavItemProps = {
+  name: string
+  count?: number
+  isFocused: boolean
+  onClick: () => void
+}
+
+export default function NavBarItem({ name, count, isFocused, onClick }: VerticalNavItemProps) {
+  return (
+    <Container isFocused={isFocused} onClick={onClick}>
+      <div>{name}</div>
+      {count !== undefined && <CountWrapper isFocused={isFocused}>{count}</CountWrapper>}
+    </Container>
+  )
+}
+
+const Container = styled.div<{ isFocused: boolean }>`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => (props.isFocused ? '#131313' : '#A8A8A8')};
+  color: ${props => (props.isFocused ? '#E9E9E9' : '#161616')};
+`
+const CountWrapper = styled.div<{ isFocused: boolean }>`
+  border-radius: 1000px;
+  padding: 8px 16px;
+  background-color: ${props => (props.isFocused ? '#0043CE' : 'rgba(22, 22, 22, 0.25)')};
+  color: ${props => (props.isFocused ? '#E9E9E9' : 'rgba(22, 22, 22, 0.25)')};
+`