Skip to content

Commit

Permalink
Merge pull request #17 from DDD-Community/feat#14
Browse files Browse the repository at this point in the history
[feat#16] 로그인 기능 테스트 및 레이아웃 추가
  • Loading branch information
G-hoon authored Aug 13, 2024
2 parents 2f2f810 + d96bec9 commit 5d4e0cb
Show file tree
Hide file tree
Showing 28 changed files with 1,164 additions and 1,353 deletions.
43 changes: 23 additions & 20 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,38 @@
"lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix"
},
"dependencies": {
"axios": "1.7.3",
"core-js": "^3.28.0",
"p5": "^1.9.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1"
},
"devDependencies": {
"@types/node": "^20.14.10",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.54.1",
"@typescript-eslint/parser": "^5.54.1",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-config-prettier": "^8.7.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"@types/node": "^20.7.1",
"@types/qs": "^6.9.7",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"@typescript-eslint/eslint-plugin": "^5.59.1",
"@typescript-eslint/parser": "^5.59.1",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.14",
"eslint": "^8.43.0",
"eslint-config-prettier": "^8.6.0",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.2",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.5",
"react-refresh": "^0.14.2",
"tailwindcss": "^3.4.4",
"eslint-plugin-react": "^7.32.1",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.2.5",
"qs": "^6.11.0",
"react-refresh": "^0.14.0",
"tailwindcss": "^3.3.1",
"ts-node": "^10.9.1",
"typescript": "^5.5.3",
"vite": "^5.3.3",
"typescript": "^5.1.6",
"vite": "^4.3.9",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^4.3.2"
"vite-tsconfig-paths": "^4.2.0"
}
}
14 changes: 2 additions & 12 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,8 @@
// dependencies
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"

// components
import { PoseDetector } from "./components"
import { Router } from "@/routes"

const App: React.FC = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<PoseDetector />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</BrowserRouter>
)
return <Router></Router>
}

export default App
12 changes: 8 additions & 4 deletions src/components/Camera.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ const Camera: React.FC<WebcamProps> = ({ onStreamReady }) => {
frameRate: {
ideal: 60,
},
width: 1280,
height: 720,
},
})
.then((stream) => {
Expand All @@ -36,18 +38,20 @@ const Camera: React.FC<WebcamProps> = ({ onStreamReady }) => {

useEffect(() => {
startVideo()
}, [])
})

return (
<div style={{ position: "relative", width: "640px", height: "480px" }}>
<div style={{ position: "relative", width: "100%", height: "100%" }}>
<video
className="rounded-lg"
ref={videoRef}
style={{
position: "absolute",
top: 0,
left: 0,
width: "640px",
height: "480px",
width: "100%",
height: "100%",
objectFit: "fill",
}}
/>
</div>
Expand Down
46 changes: 16 additions & 30 deletions src/components/CameraContianer.tsx
Original file line number Diff line number Diff line change
@@ -1,49 +1,35 @@
import React from "react"
import Camera from "./Camera"
import ControlPanel from "./ControlPanel"

interface CameraContianerProps {
detectStart: (video: HTMLVideoElement) => void
canvasRef: React.LegacyRef<HTMLCanvasElement> | undefined
isModelLoaded: boolean
onChangeTranslation: React.ChangeEventHandler<HTMLInputElement>
}

export default function CameraContianer(props: CameraContianerProps) {
const { detectStart, canvasRef, isModelLoaded, onChangeTranslation } = props
export default function CameraContianer(props: CameraContianerProps): React.ReactElement {
const { detectStart, canvasRef } = props
return (
<div
style={{
display: "flex",
padding: "20px",
width: "100%",
height: "100%",
position: "relative",
}}
>
<div
<Camera onStreamReady={detectStart} />
<canvas
ref={canvasRef}
width="1280"
height="720"
style={{
position: "relative",
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
}}
>
<Camera onStreamReady={detectStart} />
<canvas
ref={canvasRef}
width="640"
height="480"
style={{
position: "absolute",
top: 0,
left: 0,
border: "1px solid black",
}}
/>
</div>
<div
style={{
paddingLeft: "20px",
width: "150px",
}}
>
{isModelLoaded && <ControlPanel onChangeTranslation={onChangeTranslation} />}
</div>
/>
</div>
)
}
21 changes: 0 additions & 21 deletions src/components/ControlPanel.tsx

This file was deleted.

17 changes: 17 additions & 0 deletions src/components/Login.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
const Login: React.FC = () => {
const REST_API_KEY = "84b401e74d5a879d3fedfa7ba4366c68"
const REDIRECT_URI = "http://localhost:3000/auth"
const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`

const loginHandler = (): void => {
window.location.href = link
}

return (
<button type="button" onClick={loginHandler}>
로그인 하기
</button>
)
}

export default Login
Loading

0 comments on commit 5d4e0cb

Please sign in to comment.