From 84a3047bde09d4f0c09bf26bd84b6682faf171d5 Mon Sep 17 00:00:00 2001 From: SEUNGJUN JEONG Date: Wed, 4 Oct 2023 17:27:07 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Design:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EA=B8=B0=EB=B0=98=20=ED=97=A4=EB=8D=94=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/assets/icons/logo.svg | 4 + front/src/assets/icons/menu.svg | 3 + front/src/components/Header/Header.tsx | 77 ++++++++++--------- front/src/pages/PlugIn/UsrOffline.tsx | 5 +- .../pages/TranslatePage/translate/Input.tsx | 20 ----- .../TranslatePage/translate/Translate.tsx | 13 +++- front/src/utils/helpers/custom.d.ts | 8 ++ front/tailwind.config.js | 7 ++ 8 files changed, 77 insertions(+), 60 deletions(-) create mode 100644 front/src/assets/icons/logo.svg create mode 100644 front/src/assets/icons/menu.svg diff --git a/front/src/assets/icons/logo.svg b/front/src/assets/icons/logo.svg new file mode 100644 index 0000000..ce093d4 --- /dev/null +++ b/front/src/assets/icons/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/front/src/assets/icons/menu.svg b/front/src/assets/icons/menu.svg new file mode 100644 index 0000000..4403f43 --- /dev/null +++ b/front/src/assets/icons/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/front/src/components/Header/Header.tsx b/front/src/components/Header/Header.tsx index 14dd565..a478c6e 100644 --- a/front/src/components/Header/Header.tsx +++ b/front/src/components/Header/Header.tsx @@ -1,4 +1,5 @@ -import logo from "../../assets/icons/logo.png"; +import logo from "../../assets/icons/logo.svg"; +import menu from "../../assets/icons/menu.svg"; import HeaderButton from "./HeaderButton"; import { useLocation } from "react-router-dom"; import { useRecoilState } from "recoil"; @@ -33,44 +34,50 @@ const Header = () => { }; return ( -
-
- - logo - +
+
+ logo + menu
+
+
+ + logo + +
-
- - - - {auth ? ( -
- 로그아웃 -
- ) : ( +
+ - )} + + {auth ? ( +
+ 로그아웃 +
+ ) : ( + + )} +
); diff --git a/front/src/pages/PlugIn/UsrOffline.tsx b/front/src/pages/PlugIn/UsrOffline.tsx index e45a0cc..6cd026c 100644 --- a/front/src/pages/PlugIn/UsrOffline.tsx +++ b/front/src/pages/PlugIn/UsrOffline.tsx @@ -3,11 +3,8 @@ import { Link } from "react-router-dom"; const UsrOffline = () => { return ( -
+
-

- 플러그인 -

{ ); }; -const styles = { - container: css` - position: relative; - width: 31.25rem; - height: auto; - overflow: hidden; - display: flex; - justify-content: center; - align-items: center; - border-radius: 15px; - `, - canvas: css` - position: absolute; - width: 31.25rem; - height: 37.5rem; - background-color: #fff; - `, -}; - export default Input; diff --git a/front/src/pages/TranslatePage/translate/Translate.tsx b/front/src/pages/TranslatePage/translate/Translate.tsx index 978c0b4..4f11f48 100644 --- a/front/src/pages/TranslatePage/translate/Translate.tsx +++ b/front/src/pages/TranslatePage/translate/Translate.tsx @@ -6,13 +6,14 @@ import { dchannel, } from "../../../utils/recoil/atom"; import { useRecoilState, useRecoilValue } from "recoil"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; import axios from "axios"; import discord from "../../../assets/icons/discord.png"; import { BiCopy, BiRevision } from "react-icons/bi"; import Swal from "sweetalert2"; import ConfigModal from "../config/ConfigModal"; import { NotTranslating } from "./NotTranslating"; +import Webcam from "react-webcam"; const Translate = () => { const [openModal, setOpenModal] = useState(false); @@ -25,6 +26,16 @@ const Translate = () => { setTranslate(true); }; + const webcamRef = useRef(null); + useEffect(() => { + if (webcamRef.current?.video) { + const stream = webcamRef.current?.video.srcObject as MediaStream; + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + webcamRef.current.video.srcObject = null; + } + }, [translate]); + const [text, setText] = useRecoilState(resultText); const channel = useRecoilValue(dchannel); diff --git a/front/src/utils/helpers/custom.d.ts b/front/src/utils/helpers/custom.d.ts index a9834b1..4b46aa2 100644 --- a/front/src/utils/helpers/custom.d.ts +++ b/front/src/utils/helpers/custom.d.ts @@ -3,3 +3,11 @@ declare module "*.png"; declare module "*.jpeg"; declare module "*.gif"; declare module "react-fullpage"; + +declare module "*.svg" { + import React = require("react"); + + export const ReactComponent: REact.FC>; + const src: string; + export default src; +} diff --git a/front/tailwind.config.js b/front/tailwind.config.js index 73b4b1c..6c39941 100644 --- a/front/tailwind.config.js +++ b/front/tailwind.config.js @@ -3,6 +3,13 @@ const colors = require("tailwindcss/colors"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,ts,jsx,tsx}"], + screens: { + sm: "375px", + md: "768px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", + }, theme: { colors: { ...colors, From 2e5a9605386cb0af21878d6a9e9cd54a929f8219 Mon Sep 17 00:00:00 2001 From: SEUNGJUN JEONG Date: Wed, 11 Oct 2023 00:38:54 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Design:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EA=B8=B0?= =?UTF-8?q?=EB=B0=98=20=EB=B7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/package.json | 2 +- front/public/index.html | 2 +- front/src/assets/images/404.png | Bin front/src/assets/images/bokyeong.jpeg | Bin .../src/assets/images/discord_screenshot.png | Bin front/src/assets/images/hyeonbin.png | Bin front/src/assets/images/main.png | Bin front/src/assets/images/main2.png | Bin front/src/assets/images/plugin1.png | Bin front/src/assets/images/seungjun.jpeg | Bin front/src/assets/images/sujin.jpeg | Bin front/src/pages/MainPage/MainPage.tsx | 2 +- front/src/pages/MainPage/Page1.tsx | 4 +- front/src/pages/MainPage/Page2.tsx | 17 ++-- front/src/pages/MainPage/Page3.tsx | 84 ++++++++++-------- front/src/pages/MainPage/Page4.tsx | 24 +++-- front/src/pages/MainPage/Page5.tsx | 78 +++++++++------- .../src/pages/TranslatePage/TranslatePage.tsx | 2 +- .../TranslatePage/translate/Translate.tsx | 4 +- 19 files changed, 124 insertions(+), 95 deletions(-) mode change 100644 => 100755 front/src/assets/images/404.png mode change 100644 => 100755 front/src/assets/images/bokyeong.jpeg mode change 100644 => 100755 front/src/assets/images/discord_screenshot.png mode change 100644 => 100755 front/src/assets/images/hyeonbin.png mode change 100644 => 100755 front/src/assets/images/main.png mode change 100644 => 100755 front/src/assets/images/main2.png mode change 100644 => 100755 front/src/assets/images/plugin1.png mode change 100644 => 100755 front/src/assets/images/seungjun.jpeg mode change 100644 => 100755 front/src/assets/images/sujin.jpeg diff --git a/front/package.json b/front/package.json index d4fc2ba..18d1933 100644 --- a/front/package.json +++ b/front/package.json @@ -35,7 +35,7 @@ "web-vitals": "^2.1.4" }, "scripts": { - "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start", + "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" diff --git a/front/public/index.html b/front/public/index.html index 28e3e5a..a37e469 100644 --- a/front/public/index.html +++ b/front/public/index.html @@ -4,7 +4,7 @@ - + { return (

@@ -26,7 +26,7 @@ const Page1 = () => { main

); diff --git a/front/src/pages/MainPage/Page2.tsx b/front/src/pages/MainPage/Page2.tsx index 86b0a58..bca47a7 100644 --- a/front/src/pages/MainPage/Page2.tsx +++ b/front/src/pages/MainPage/Page2.tsx @@ -5,18 +5,21 @@ const Page2 = () => { return (
main2 - -
+
- logo -

+ logo +

소개

@@ -24,7 +27,7 @@ const Page2 = () => { HandTalker는 인공지능 기반의 혁신적인 기술을 기반으로 수어를 신속하고 정확하게 인식하여 한국어로 번역해주는 탁월한 서비스입니다.

-

+

일상 생활, 회사 업무 뿐만 아니라 가족 구성원 내에 농인 자녀를 두고 계신 가정에서 소통의 어려움을 해결하기 위해 개발되었으며, 그 뿐만 아니라 후천적으로 농인이 된 분들을 위한 실습 교육 자료로도 활용되고 diff --git a/front/src/pages/MainPage/Page3.tsx b/front/src/pages/MainPage/Page3.tsx index 32a08d1..da70e16 100644 --- a/front/src/pages/MainPage/Page3.tsx +++ b/front/src/pages/MainPage/Page3.tsx @@ -11,53 +11,59 @@ const Page3 = () => {

서비스 이용 대상

-

+

HandTalker는 많은 곳에서 사용할 수 있는 확장성 높은 서비스입니다.

-
-
- school -

- 학교에서 -

-

+

+
+
+ school +

+ 학교에서 +

+
+

농인 학생들과 교사 및 학생들 간의 소통을 돕습니다. 이를 통해 농인 학생들의 학습 능력을 향상시키고 평등한 교육 기회를 제공할 수 있습니다.

-
- hospital -

- 병원에서 -

-

- 농인 환자들이 의사와의 상담이나 의료 절차에 참여할 때 HandTalker를 - 활용하여 의사 결정에 적극적으로 참여할 수 있도록 지원합니다. -

+
+
+ hospital +

+ 병원에서 +

+

+ 농인 환자들이 의사와의 상담이나 의료 절차에 참여할 때 HandTalker를 + 활용하여 의사 결정에 적극적으로 참여할 수 있도록 지원합니다. +

+
-
- work -

- 회사에서 -

-

- 다른 직원들과의 의사소통을 원할하게 하도록 돕습니다. 이를 통해 농인 - 직원들은 조직 내에서 더욱 적극적으로 참여하고 업무 기회를 놓치지 - 않을 수 있습니다. -

+
+
+ work +

+ 회사에서 +

+

+ 다른 직원들과의 의사소통을 원할하게 하도록 돕습니다. 이를 통해 + 농인 직원들은 조직 내에서 더욱 적극적으로 참여하고 업무 기회를 + 놓치지 않을 수 있습니다. +

+
diff --git a/front/src/pages/MainPage/Page4.tsx b/front/src/pages/MainPage/Page4.tsx index 1a83cb3..80fad81 100644 --- a/front/src/pages/MainPage/Page4.tsx +++ b/front/src/pages/MainPage/Page4.tsx @@ -9,20 +9,28 @@ const Page4 = () => { id="section4" className="h-[100vh] flex flex-col items-center justify-center" > -

+

다른 서비스에서도 쉽고 빠르게

- logo -

+ logo +

를 이용해보세요

-
- discord - slack -
- kakaotalk +
+ discord + slack +
+ kakaotalk
diff --git a/front/src/pages/MainPage/Page5.tsx b/front/src/pages/MainPage/Page5.tsx index fc9f2d2..86096f7 100644 --- a/front/src/pages/MainPage/Page5.tsx +++ b/front/src/pages/MainPage/Page5.tsx @@ -11,29 +11,35 @@ const Page5 = () => { id="section5" className="w-full h-[100vh] flex flex-col justify-center" > -