Skip to content

Commit

Permalink
Merge pull request #6 from iOdiO89/#4-Feature/Screen
Browse files Browse the repository at this point in the history
#4 얼루가게 PC Screen 구현
  • Loading branch information
iOdiO89 authored Jul 25, 2024
2 parents 757624c + 4b47732 commit c480af1
Show file tree
Hide file tree
Showing 32 changed files with 1,298 additions and 140 deletions.
7 changes: 7 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
7 changes: 4 additions & 3 deletions public/electron.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -24,7 +26,6 @@ function createWindow() {

if (isDev) mainWindow.webContents.openDevTools({ mode: 'detach' })

mainWindow.setResizable(true)
mainWindow.on('closed', () => {
mainWindow = null
app.quit()
Expand Down
38 changes: 0 additions & 38 deletions src/App.css

This file was deleted.

41 changes: 18 additions & 23 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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;
5 changes: 5 additions & 0 deletions src/assets/image/down-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/assets/image/eollugage-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/image/kakao.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/image/login.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/assets/image/up-arrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 67 additions & 0 deletions src/components/historyDateFilter.tsx
Original file line number Diff line number Diff line change
@@ -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;
`
56 changes: 56 additions & 0 deletions src/components/layout.tsx
Original file line number Diff line number Diff line change
@@ -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%;
`
53 changes: 53 additions & 0 deletions src/components/navBar.tsx
Original file line number Diff line number Diff line change
@@ -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;
`
35 changes: 35 additions & 0 deletions src/components/navBarItem.tsx
Original file line number Diff line number Diff line change
@@ -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)')};
`
Loading

0 comments on commit c480af1

Please sign in to comment.