From 2294451cedef0d7989132f0558f65de96193ebd4 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Feb 2025 14:46:56 +0900 Subject: [PATCH 01/75] layout --- blip-project/src/components/TeamJoinNo/MainTeamJoinNo.css | 1 + blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.css b/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.css index ca87f97..3cbe22b 100644 --- a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.css +++ b/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.css @@ -4,6 +4,7 @@ } .MTJoinNoSrc{ + width: 100vw; height: 90vh; display: flex; gap: 20px; diff --git a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx b/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx index 186f98c..7d82e2e 100644 --- a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx +++ b/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx @@ -1,5 +1,5 @@ import "./MainTeamJoinNo.css"; -import DateTeamJoinNo from "../DateTeamJoin"; +import DateTeamJoinNo from "../DateTeam"; import HeaderTeamJoinNo from "./HeaderTeamJoinNo"; import SidebarTeamJoinNo from "./sidebarTeamJoinNo"; import StartTeamJoinNo from "./StartTeamJoinNo"; From a914617f7631ea572bbe13c2d1acf13c84540dd3 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Feb 2025 14:47:05 +0900 Subject: [PATCH 02/75] Date --- blip-project/src/components/DateTeam.css | 97 +++++++++++++++++ blip-project/src/components/DateTeam.jsx | 133 +++++++++++++++++++++++ 2 files changed, 230 insertions(+) create mode 100644 blip-project/src/components/DateTeam.css create mode 100644 blip-project/src/components/DateTeam.jsx diff --git a/blip-project/src/components/DateTeam.css b/blip-project/src/components/DateTeam.css new file mode 100644 index 0000000..235d2f1 --- /dev/null +++ b/blip-project/src/components/DateTeam.css @@ -0,0 +1,97 @@ +.DateTeamJoinNos { + height: 40%; + width: 100%; + border-radius: 12px; + border: 1px solid black; + padding: 10px; + box-sizing: border-box; /* 패딩을 포함한 크기 계산 */ +} + +.calendar-header { + display: flex; + justify-content: space-between; /* 년도/월과 달 넘기기 버튼을 양쪽으로 배치 */ + align-items: center; + margin-bottom: 10px; +} + +.year-month { + display: flex; + align-items: center; + gap: 5px; /* 년도와 월 사이의 간격 */ +} + +.year { + color: var(--gray-800); + margin: 0; /* 년도의 마진 제거 */ +} + +.month { + margin: 0; /* 월의 마진 제거 */ + color: var(--gray-800); +} + +.month-navigation { + display: flex; + align-items: center; + gap: 20px; /* 버튼 사이의 간격 */ +} + +.nav-button { + background: none; + border: none; + cursor: pointer; + font-size: 20px; + font-weight: 700; + color: var(--gray-800); +} + +.header-divider { + border-bottom: 1px solid #ccc; /* 헤더와 날짜를 구분하는 선 */ + margin-bottom: 10px; +} + +.calendar-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); /* 7개의 열로 구성 */ + gap: 2px; /* 간격 줄임 */ + height: calc(100% - 60px); /* 헤더와 구분선을 제외한 높이 */ +} + +.calendar-day-header { + text-align: center; + padding: 5px; + border-radius: 4px; +} + +.calendar-week { + display: contents; /* 주 단위로 줄바꿈 */ +} + +.calendar-day { + text-align: center; + padding: 5px; + border-radius: 4px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +/* 같은 달이 아닌 날짜 스타일 */ +.calendar-day.other-month { + color: var(--gray-300); /* 회색으로 표시 */ +} + +/* 일요일 스타일 */ +.calendar-day.sunday { + color: var(--error-400); /* 빨간색으로 표시 */ +} + +.calendar-day:hover { + background-color: #e0e0e0; +} + +.calendar-day.selected { + border-radius: 80%; + background-color: var(--gray-100); /* 회색 배경 */ +} \ No newline at end of file diff --git a/blip-project/src/components/DateTeam.jsx b/blip-project/src/components/DateTeam.jsx new file mode 100644 index 0000000..9fc6bd1 --- /dev/null +++ b/blip-project/src/components/DateTeam.jsx @@ -0,0 +1,133 @@ +import "./DateTeam.css"; +import { color } from "../style/color"; +import { typography } from "../fonts/fonts"; +import { useState } from "react"; + +const DateTeamJoinNo = () => { + const [currentDate, setCurrentDate] = useState(new Date()); + const [selectedDate, setSelectedDate] = useState(null); + + const year = currentDate.getFullYear(); + const month = currentDate.getMonth(); + + //달의 첫 날 + const firstDayOfMonth = new Date(year, month, 1); + + //달력 시작을 일욜로 지정 + const startDay = new Date(firstDayOfMonth); + startDay.setDate(1 - firstDayOfMonth.getDay()); + + //달의 막 날 + const lastDayOfMonth = new Date(year, month + 1, 0); + + //달력 마지막을 토욜로 지정 + const endDay = new Date(lastDayOfMonth); + endDay.setDate(lastDayOfMonth.getDate() + (6 - lastDayOfMonth.getDay())); + + const groupDatesByWeek = (startDay, endDay) => { + const weeks = []; //주 단위: 최종 + let currentWeek = []; //주 단위 : 현재 주 + let currentDay = new Date(startDay); // 시작 날짜로 초가화 + + while (currentDay <= endDay) { + currentWeek.push(new Date(currentDay)); // 현재 날짜를 현재 주의 추가 + if (currentWeek.length === 7 || currentDate.getDay() === 6) { + weeks.push(currentWeek); + currentWeek = []; + } + currentDay.setDate(currentDay.getDate() + 1); //현재 날짜를 담날로 변경 + } + // 마지막 주 처리 (만약 남아있다면) + if (currentWeek.length > 0) { + weeks.push(currentWeek); // 남아 있는 날짜가 있다면 마지막 주로 weeks에 추가 + } + + return weeks; // 주 단위로 그룹화된 날짜 배열들을 반환 + }; + + const handlePrevMonth = () => { + //이전 달 이동 + setCurrentDate( + new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1) + ); + }; + + const handleNextMonth = () => { + //담 달 이동 + setCurrentDate( + new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1) + ); + }; + + const handleDateClick = (date) => { + setSelectedDate(date); + }; + + return ( + <> +
+
+
+

{year}년

{/* 년도 */} +

+ {currentDate.toLocaleString("default", { month: "long" })} +

{" "} + {/* 월 */} +
+
+ + +
+
+
+
+ {["일", "월", "화", "수", "목", "금", "토"].map((day) => ( +
+ {day} +
+ ))} + {groupDatesByWeek(startDay, endDay).map((week, weekIndex) => ( +
+ {week.map((date, dayIndex) => { + const isSelected = + selectedDate && + date.toDateString() === selectedDate.toDateString(); // 선택된 날짜인지 확인 + return ( +
handleDateClick(date)} // 날짜 클릭 이벤트 + > + {date.getDate()} +
+ ); + })} +
+ ))} +
+
+ + ); +}; + +export default DateTeamJoinNo; From b7ce8c66710e22d4811cd5b6c43a52ea1f83d3f7 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Feb 2025 17:34:36 +0900 Subject: [PATCH 03/75] layout --- .../TeamJoinNo/{ => CSS}/HeaderTeamJoinNo.css | 0 .../TeamJoinNo/{ => CSS}/MainTeamJoinNo.css | 5 +++-- .../{ => CSS}/MeetingTeamJoinNo.css | 2 ++ .../TeamJoinNo/{ => CSS}/StartTeamJoinNo.css | 3 ++- .../{ => CSS}/sidebarTeamJoinNo.css | 0 .../TeamJoinNo/HeaderTeamJoinNo.jsx | 2 +- .../components/TeamJoinNo/MainTeamJoinNo.jsx | 2 +- .../TeamJoinNo/MeetingTeamJoinNo.jsx | 6 +++--- .../src/components/TeamJoinNo/Popup.jsx | 5 ----- .../components/TeamJoinNo/StartTeamJoinNo.jsx | 21 ++++++++++--------- .../TeamJoinNo/sidebarTeamJoinNo.jsx | 2 +- 11 files changed, 24 insertions(+), 24 deletions(-) rename blip-project/src/components/TeamJoinNo/{ => CSS}/HeaderTeamJoinNo.css (100%) rename blip-project/src/components/TeamJoinNo/{ => CSS}/MainTeamJoinNo.css (92%) rename blip-project/src/components/TeamJoinNo/{ => CSS}/MeetingTeamJoinNo.css (92%) rename blip-project/src/components/TeamJoinNo/{ => CSS}/StartTeamJoinNo.css (95%) rename blip-project/src/components/TeamJoinNo/{ => CSS}/sidebarTeamJoinNo.css (100%) delete mode 100644 blip-project/src/components/TeamJoinNo/Popup.jsx diff --git a/blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.css b/blip-project/src/components/TeamJoinNo/CSS/HeaderTeamJoinNo.css similarity index 100% rename from blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.css rename to blip-project/src/components/TeamJoinNo/CSS/HeaderTeamJoinNo.css diff --git a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.css b/blip-project/src/components/TeamJoinNo/CSS/MainTeamJoinNo.css similarity index 92% rename from blip-project/src/components/TeamJoinNo/MainTeamJoinNo.css rename to blip-project/src/components/TeamJoinNo/CSS/MainTeamJoinNo.css index 3cbe22b..793e489 100644 --- a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.css +++ b/blip-project/src/components/TeamJoinNo/CSS/MainTeamJoinNo.css @@ -1,4 +1,4 @@ -* { +body{ margin: 0; padding: 0; } @@ -8,10 +8,11 @@ height: 90vh; display: flex; gap: 20px; + } .MTJoinNoDate{ - width: 25%; + width: 35%; display: flex; flex-direction: column; justify-content: space-between; diff --git a/blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.css b/blip-project/src/components/TeamJoinNo/CSS/MeetingTeamJoinNo.css similarity index 92% rename from blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.css rename to blip-project/src/components/TeamJoinNo/CSS/MeetingTeamJoinNo.css index 07fa06f..8aa261e 100644 --- a/blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.css +++ b/blip-project/src/components/TeamJoinNo/CSS/MeetingTeamJoinNo.css @@ -15,6 +15,7 @@ height: 80%; display: flex; justify-content: center; + } .MeetingTJoinNo { @@ -29,5 +30,6 @@ height: 20%; border-radius: 12px; color: var(--gray-400); + background-color: var(--gray-50); border: none; } diff --git a/blip-project/src/components/TeamJoinNo/StartTeamJoinNo.css b/blip-project/src/components/TeamJoinNo/CSS/StartTeamJoinNo.css similarity index 95% rename from blip-project/src/components/TeamJoinNo/StartTeamJoinNo.css rename to blip-project/src/components/TeamJoinNo/CSS/StartTeamJoinNo.css index 17048a5..66e0b42 100644 --- a/blip-project/src/components/TeamJoinNo/StartTeamJoinNo.css +++ b/blip-project/src/components/TeamJoinNo/CSS/StartTeamJoinNo.css @@ -35,13 +35,14 @@ .STJoinNoInput { width: 45%; height: 20%; + padding-left: 10px; border-radius: 12px; border: 1px solid var(--gray-200); outline: none; } input::placeholder{ - padding-left: 20px; + opacity: 1; } diff --git a/blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.css b/blip-project/src/components/TeamJoinNo/CSS/sidebarTeamJoinNo.css similarity index 100% rename from blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.css rename to blip-project/src/components/TeamJoinNo/CSS/sidebarTeamJoinNo.css diff --git a/blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.jsx b/blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.jsx index f3c1c9e..4cf4d15 100644 --- a/blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.jsx +++ b/blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.jsx @@ -1,4 +1,4 @@ -import "./HeaderTeamJoinNo.css"; +import "./CSS/HeaderTeamJoinNo.css"; import Alarm from "/src/svg/Alarm.svg"; import blackLogo from "/src/svg/blackLogo.svg"; import Letter from "/src/svg/letter.svg"; diff --git a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx b/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx index 7d82e2e..6b2181f 100644 --- a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx +++ b/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx @@ -1,4 +1,4 @@ -import "./MainTeamJoinNo.css"; +import "./CSS/MainTeamJoinNo.css"; import DateTeamJoinNo from "../DateTeam"; import HeaderTeamJoinNo from "./HeaderTeamJoinNo"; import SidebarTeamJoinNo from "./sidebarTeamJoinNo"; diff --git a/blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.jsx b/blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.jsx index e7707e7..4602069 100644 --- a/blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.jsx +++ b/blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.jsx @@ -1,4 +1,4 @@ -import "./MeetingTeamJoinNo.css"; +import "./CSS/MeetingTeamJoinNo.css"; import { color } from "../../style/color"; import { typography } from "../../fonts/fonts"; @@ -17,14 +17,14 @@ const MeetingTeamJoinNo = () => { 지난 회의 내용 요약
-
+
아직 기록된 회의 내용이 없어요
diff --git a/blip-project/src/components/TeamJoinNo/Popup.jsx b/blip-project/src/components/TeamJoinNo/Popup.jsx deleted file mode 100644 index 0e89446..0000000 --- a/blip-project/src/components/TeamJoinNo/Popup.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const Popup = () =>{ - return
Popup
-} - -export default Popup; \ No newline at end of file diff --git a/blip-project/src/components/TeamJoinNo/StartTeamJoinNo.jsx b/blip-project/src/components/TeamJoinNo/StartTeamJoinNo.jsx index b18baf4..501a343 100644 --- a/blip-project/src/components/TeamJoinNo/StartTeamJoinNo.jsx +++ b/blip-project/src/components/TeamJoinNo/StartTeamJoinNo.jsx @@ -1,16 +1,16 @@ -import "./StartTeamJoinNo.css"; -import Popup from "./Popup"; +import "./CSS/StartTeamJoinNo.CSS"; import { typography } from "../../fonts/fonts"; import { color } from "../../style/color"; +import Modal from "./Modal"; +import { useState } from "react"; const StartTeamJoinNo = () => { - const onClickPopup = () =>{ - window.open( - "Popup.jsx", - "new", - "width = 70%, height=300, top = 100, left = 100" - ); - } + const [isModalOpen, setIsModalOpen] = useState(false); + + const openModal = () => setIsModalOpen(true); + + const closeModal = () => setIsModalOpen(false); + return ( <>
@@ -31,7 +31,7 @@ const StartTeamJoinNo = () => {
+ {isModalOpen && } ); }; diff --git a/blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.jsx b/blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.jsx index 1a424db..809a606 100644 --- a/blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.jsx +++ b/blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.jsx @@ -1,4 +1,4 @@ -import "./SidebarTeamJoinNo.css"; +import "./CSS/SidebarTeamJoinNo.css"; import Add from "/src/svg/add.svg"; const SidebarTeamJoinNo = () => { From 39a506536a1532495ca87a744a6329b772afe427 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Feb 2025 17:34:45 +0900 Subject: [PATCH 04/75] Date --- blip-project/src/components/DateTeam.css | 2 +- blip-project/src/components/DateTeam.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blip-project/src/components/DateTeam.css b/blip-project/src/components/DateTeam.css index 235d2f1..a261281 100644 --- a/blip-project/src/components/DateTeam.css +++ b/blip-project/src/components/DateTeam.css @@ -3,7 +3,7 @@ width: 100%; border-radius: 12px; border: 1px solid black; - padding: 10px; + padding: 10px 15px 20px; box-sizing: border-box; /* 패딩을 포함한 크기 계산 */ } diff --git a/blip-project/src/components/DateTeam.jsx b/blip-project/src/components/DateTeam.jsx index 9fc6bd1..fa61ac3 100644 --- a/blip-project/src/components/DateTeam.jsx +++ b/blip-project/src/components/DateTeam.jsx @@ -105,7 +105,7 @@ const DateTeamJoinNo = () => { selectedDate && date.toDateString() === selectedDate.toDateString(); // 선택된 날짜인지 확인 return ( -
Date: Tue, 4 Feb 2025 17:34:52 +0900 Subject: [PATCH 05/75] modal --- .../src/components/TeamJoinNo/CSS/Modal.css | 66 +++++++++++++++++++ .../src/components/TeamJoinNo/Modal.jsx | 63 ++++++++++++++++++ 2 files changed, 129 insertions(+) create mode 100644 blip-project/src/components/TeamJoinNo/CSS/Modal.css create mode 100644 blip-project/src/components/TeamJoinNo/Modal.jsx diff --git a/blip-project/src/components/TeamJoinNo/CSS/Modal.css b/blip-project/src/components/TeamJoinNo/CSS/Modal.css new file mode 100644 index 0000000..521ec02 --- /dev/null +++ b/blip-project/src/components/TeamJoinNo/CSS/Modal.css @@ -0,0 +1,66 @@ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.25); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + width: 65%; + height: 65%; + background-color: white; + border-radius: 24px; +} + +.modal-title { + padding: 40px; + display: flex; + justify-content: space-between; +} + +.modal-title-font-p { + color: var(--gray-600); +} + +.modal-team { + padding: 0px 45px; + width: 100%; + height: 35%; + color: var(--gray-700); + display: flex; + flex-direction: column; +} + +.modal-team-buttons { + width: 90%; + height: 100%; + background-color: transparent; + display: flex; + align-items: start; + flex-direction: column; + justify-content: center; + border: none; +} + +.modal-button-main{ + width: 100%; + height: 35%; + display: flex; + justify-content: center; + align-items: end; +} + +.modal-button { + width: 40%; + height: 25%; + background-color: var(--main-200); + color: white; + border: none; + border-radius: 12px; +} diff --git a/blip-project/src/components/TeamJoinNo/Modal.jsx b/blip-project/src/components/TeamJoinNo/Modal.jsx new file mode 100644 index 0000000..da63bd4 --- /dev/null +++ b/blip-project/src/components/TeamJoinNo/Modal.jsx @@ -0,0 +1,63 @@ +import { typography } from "../../fonts/fonts"; +import { color } from "../../style/color"; +import ESC from "../../svg/ESC.svg"; +import "./CSS/Modal.css"; +import { useState } from "react"; + +const Modal = ({ onClose }) => { + const [isColor, setIsColor] = useState(false); + + const onClickTeam = () => { + setIsColor(true); + }; + + return ( +
+
+
+
+

무엇을 하실건가요?

+

+ BLIP은 실시간 요약, 키워드 기록, 참여율 분석으로 더 스마트하고 + 효율적인 회의를 제공합니다. +

+
+
+ +
+
+
+ + +
+
+ +
+
+
+ ); +}; + +export default Modal; From 810724dcb86177104a6d106c6e601826696dbeb1 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Feb 2025 17:35:00 +0900 Subject: [PATCH 06/75] svg --- blip-project/src/svg/ESC.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 blip-project/src/svg/ESC.svg diff --git a/blip-project/src/svg/ESC.svg b/blip-project/src/svg/ESC.svg new file mode 100644 index 0000000..20806c4 --- /dev/null +++ b/blip-project/src/svg/ESC.svg @@ -0,0 +1,4 @@ + + + + From ce8a81063a2afbbeba031443913ef200e6655362 Mon Sep 17 00:00:00 2001 From: tccmw Date: Wed, 5 Feb 2025 17:50:21 +0900 Subject: [PATCH 07/75] Modal --- .../src/components/TeamJoinNo/CSS/Modal.css | 23 +++- .../src/components/TeamJoinNo/Modal.jsx | 110 ++++++++++++++---- 2 files changed, 107 insertions(+), 26 deletions(-) diff --git a/blip-project/src/components/TeamJoinNo/CSS/Modal.css b/blip-project/src/components/TeamJoinNo/CSS/Modal.css index 521ec02..e88bb39 100644 --- a/blip-project/src/components/TeamJoinNo/CSS/Modal.css +++ b/blip-project/src/components/TeamJoinNo/CSS/Modal.css @@ -31,36 +31,47 @@ .modal-team { padding: 0px 45px; width: 100%; - height: 35%; + height:40%; color: var(--gray-700); display: flex; flex-direction: column; + justify-content: space-around; } .modal-team-buttons { width: 90%; - height: 100%; + height: 40%; background-color: transparent; display: flex; align-items: start; flex-direction: column; justify-content: center; border: none; + border-radius: 12px; } .modal-button-main{ width: 100%; - height: 35%; + height: 30%; display: flex; justify-content: center; align-items: end; } -.modal-button { +.modal-button-400 { width: 40%; height: 25%; - background-color: var(--main-200); + background-color: var(--main-400 ); color: white; - border: none; border-radius: 12px; + border: none; } + +.modal-button-200 { + width: 40%; + height: 25%; + background-color: var(--main-200 ); + color: white; + border-radius: 12px; + border: none; +} diff --git a/blip-project/src/components/TeamJoinNo/Modal.jsx b/blip-project/src/components/TeamJoinNo/Modal.jsx index da63bd4..035da65 100644 --- a/blip-project/src/components/TeamJoinNo/Modal.jsx +++ b/blip-project/src/components/TeamJoinNo/Modal.jsx @@ -3,12 +3,35 @@ import { color } from "../../style/color"; import ESC from "../../svg/ESC.svg"; import "./CSS/Modal.css"; import { useState } from "react"; +import ModalCreate from "./ModalCreate"; +import ModalJoin from "./ModalJoin"; const Modal = ({ onClose }) => { const [isColor, setIsColor] = useState(false); + const [isColorButton, setIsColorButton] = useState(false); + const [isModalJoin, setIsModalJoin] = useState(false); + const [isModalCreate, setIsModalCreate] = useState(false); - const onClickTeam = () => { + const OpenModalJoin = () => setIsModalJoin(true); + const CloseModalJoin = () => setIsModalJoin(false); + + const OpenModalCreate = () => setIsModalCreate(true); + const CloseModalCreate = () => setIsModalCreate(false); + + const clickisColor = () => { setIsColor(true); + setIsColorButton(false); + if (isColor === true) { + setIsColor(false); + } + }; + + const clickisColorButton = () => { + setIsColor(false); + setIsColorButton(true); + if (isColorButton === true) { + setIsColorButton(false); + } }; return ( @@ -33,29 +56,76 @@ const Modal = ({ onClose }) => { className="modal-team" style={{ "--gray-700": color.GrayScale[7] }} > - - + {isColor ? ( + + ) : ( + + )} + {isColorButton ? ( + + ) : ( + + )}
- + {isColor ? ( + + ) : isColorButton ? ( + + ) : ( + + )}
+ {isModalJoin && } + {isModalCreate && } ); }; From 2ff4b5214fd1d231f1934ad1234917386fde72f5 Mon Sep 17 00:00:00 2001 From: tccmw Date: Sat, 8 Feb 2025 19:40:16 +0900 Subject: [PATCH 08/75] layout --- blip-project/src/components/AlarmTeam.css | 29 +++++++++++++ blip-project/src/components/AlarmTeam.jsx | 29 +++++++++++++ blip-project/src/components/LetterTeam.css | 29 +++++++++++++ blip-project/src/components/LetterTeam.jsx | 29 +++++++++++++ .../MeetingTeamJoinNo.css => MeetingTeam.css} | 10 ++--- .../MeetingTeamJoinNo.jsx => MeetingTeam.jsx} | 20 ++++----- .../src/components/TeamJoin/MainTeamJoin.jsx | 5 +++ .../TeamJoinNo/CSS/HeaderTeamJoinNo.css | 8 +--- .../TeamJoinNo/CSS/MainTeamJoinNo.css | 16 +++----- .../TeamJoinNo/CSS/StartTeamJoinNo.css | 1 - .../TeamJoinNo/CSS/sidebarTeamJoinNo.css | 2 +- .../TeamJoinNo/HeaderTeamJoinNo.jsx | 8 ++-- .../components/TeamJoinNo/MainTeamJoinNo.jsx | 2 +- .../components/TeamJoinNo/StartTeamJoinNo.jsx | 41 +++++++++++++++++-- 14 files changed, 186 insertions(+), 43 deletions(-) create mode 100644 blip-project/src/components/AlarmTeam.css create mode 100644 blip-project/src/components/AlarmTeam.jsx create mode 100644 blip-project/src/components/LetterTeam.css create mode 100644 blip-project/src/components/LetterTeam.jsx rename blip-project/src/components/{TeamJoinNo/CSS/MeetingTeamJoinNo.css => MeetingTeam.css} (80%) rename blip-project/src/components/{TeamJoinNo/MeetingTeamJoinNo.jsx => MeetingTeam.jsx} (51%) create mode 100644 blip-project/src/components/TeamJoin/MainTeamJoin.jsx diff --git a/blip-project/src/components/AlarmTeam.css b/blip-project/src/components/AlarmTeam.css new file mode 100644 index 0000000..fa0e005 --- /dev/null +++ b/blip-project/src/components/AlarmTeam.css @@ -0,0 +1,29 @@ +* { + margin: 0; + padding: 0; + overflow: hidden; +} + +.Alarm-main { + max-width: 100%; + height: 90vh; + display: flex; + gap: 20px; +} + +.Alarm-p { + width: 67%; + border-radius: 15px; + border: 1px solid #cacaca; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.Alarm-src { + width: 35%; + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git a/blip-project/src/components/AlarmTeam.jsx b/blip-project/src/components/AlarmTeam.jsx new file mode 100644 index 0000000..165bd92 --- /dev/null +++ b/blip-project/src/components/AlarmTeam.jsx @@ -0,0 +1,29 @@ +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import "./AlarmTeam.css"; +import DateTeamJoinNo from "./DateTeam"; +import HeaderTeamJoinNo from "./TeamJoinNo/HeaderTeamJoinNo"; +import SidebarTeamJoinNo from "./TeamJoinNo/sidebarTeamJoinNo"; +import MeetingTeamJoinNo from "./MeetingTeam"; + +const MTeamJoinNo = () => { + return ( + <> + +
+ +
+

+ 아직 받은 알람이 없어요 +

+
+
+ + +
+
+ + ); +}; + +export default MTeamJoinNo; diff --git a/blip-project/src/components/LetterTeam.css b/blip-project/src/components/LetterTeam.css new file mode 100644 index 0000000..fe41445 --- /dev/null +++ b/blip-project/src/components/LetterTeam.css @@ -0,0 +1,29 @@ +* { + margin: 0; + padding: 0; + overflow: hidden; +} + +.Letter-main { + max-width: 100%; + height: 90vh; + display: flex; + gap: 20px; +} + +.Letter-p { + width: 67%; + border-radius: 15px; + border: 1px solid #cacaca; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.Letter-src { + width: 35%; + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git a/blip-project/src/components/LetterTeam.jsx b/blip-project/src/components/LetterTeam.jsx new file mode 100644 index 0000000..dba1077 --- /dev/null +++ b/blip-project/src/components/LetterTeam.jsx @@ -0,0 +1,29 @@ +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import "./LetterTeam.css"; +import DateTeamJoinNo from "./DateTeam"; +import HeaderTeamJoinNo from "./TeamJoinNo/HeaderTeamJoinNo"; +import SidebarTeamJoinNo from "./TeamJoinNo/sidebarTeamJoinNo"; +import MeetingTeamJoinNo from "./MeetingTeam"; + +const MTeamJoinNo = () => { + return ( + <> + +
+ +
+

+ 초대장이 없어요 +

+
+
+ + +
+
+ + ); +}; + +export default MTeamJoinNo; diff --git a/blip-project/src/components/TeamJoinNo/CSS/MeetingTeamJoinNo.css b/blip-project/src/components/MeetingTeam.css similarity index 80% rename from blip-project/src/components/TeamJoinNo/CSS/MeetingTeamJoinNo.css rename to blip-project/src/components/MeetingTeam.css index 8aa261e..f407f5d 100644 --- a/blip-project/src/components/TeamJoinNo/CSS/MeetingTeamJoinNo.css +++ b/blip-project/src/components/MeetingTeam.css @@ -1,4 +1,4 @@ -.MeetingTeamJoinNos { +.MeetingTeams { width: 100%; height: 38%; border-radius: 12px; @@ -6,11 +6,11 @@ background-color: var(--gray-50); } -.MeetingTJoinNoFont { +.MeetingTFont { padding: 10px; } -.MMeetingTJoinNo { +.MMeetingT { width: 100%; height: 80%; display: flex; @@ -18,14 +18,14 @@ } -.MeetingTJoinNo { +.MeetingT { display: flex; align-items: center; justify-content: center; color: var(--gray-400); } -.MeetingTJoinNoButton { +.MeetingTButton { width: 100%; height: 20%; border-radius: 12px; diff --git a/blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.jsx b/blip-project/src/components/MeetingTeam.jsx similarity index 51% rename from blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.jsx rename to blip-project/src/components/MeetingTeam.jsx index 4602069..1ba18c6 100644 --- a/blip-project/src/components/TeamJoinNo/MeetingTeamJoinNo.jsx +++ b/blip-project/src/components/MeetingTeam.jsx @@ -1,29 +1,29 @@ -import "./CSS/MeetingTeamJoinNo.css"; -import { color } from "../../style/color"; -import { typography } from "../../fonts/fonts"; +import "./MeetingTeam.css" +import { color } from "../style/color"; +import { typography } from "../fonts/fonts"; -const MeetingTeamJoinNo = () => { +const MeetingTeam = () => { return ( <>
-
+
지난 회의 내용 요약
-
-
+
+
아직 기록된 회의 내용이 없어요
) : ( + ) : ( + + )} +
+ + + ); +}; + +export default ModalCreate; diff --git a/blip-project/src/components/TeamJoinNo/ModalJoin.jsx b/blip-project/src/components/TeamJoinNo/ModalJoin.jsx new file mode 100644 index 0000000..b633458 --- /dev/null +++ b/blip-project/src/components/TeamJoinNo/ModalJoin.jsx @@ -0,0 +1,97 @@ +import { useState } from "react"; +import { typography } from "../../fonts/fonts"; +import { color } from "../../style/color"; +import ESC from "../../svg/ESC.svg"; +import "./CSS/ModalJoin.css"; +import { useNavigate } from "react-router-dom"; + +const ModalJoin = ({ onClose }) => { + const [isInput, setIsInput] = useState(""); + const [isValidURL, setIsValidURL] = useState(true); // URL 유효성 상태 + const nav = useNavigate(); + + const onChangeInput = (e) => { + const value = e.target.value; + setIsInput(value); + + // URL 유효성 검사 + try { + new URL(value); // URL 객체로 변환 + setIsValidURL(true); // 유효한 URL + } catch (error) { + setIsValidURL(false); // 유효하지 않은 URL + } + }; + + const onClickUrl = () => { + if (isValidURL) { + nav("/TeamJoin", { state: { isInput } }); + } + }; + + const onKeyDownUrl = (e) => { + if (e.key === "Enter") { + onClickUrl(); + } + }; + + return ( +
+
+
+
+
팀스페이스 입장하기
+
+ 팀을 찾고 목표를 이루세요! +
+
+ 닫기 +
+
+
+ 초대링크 +
+

+ 초대 받은 링크를 입력해주세요! +

+ +
+
+ +
+
+
+ ); +}; + +export default ModalJoin; From 49872ce913ece1335aea6f3e61a2f3353c712787 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 11 Feb 2025 17:42:33 +0900 Subject: [PATCH 10/75] svg --- blip-project/src/svg/Graph.svg | 28 ++++++++++++++++++++++++++++ blip-project/src/svg/council.svg | 10 ++++++++++ blip-project/src/svg/feedback.svg | 22 ++++++++++++++++++++++ blip-project/src/svg/member.svg | 4 ++++ 4 files changed, 64 insertions(+) create mode 100644 blip-project/src/svg/Graph.svg create mode 100644 blip-project/src/svg/council.svg create mode 100644 blip-project/src/svg/feedback.svg create mode 100644 blip-project/src/svg/member.svg diff --git a/blip-project/src/svg/Graph.svg b/blip-project/src/svg/Graph.svg new file mode 100644 index 0000000..3b9d5e0 --- /dev/null +++ b/blip-project/src/svg/Graph.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/blip-project/src/svg/council.svg b/blip-project/src/svg/council.svg new file mode 100644 index 0000000..8185c8b --- /dev/null +++ b/blip-project/src/svg/council.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/blip-project/src/svg/feedback.svg b/blip-project/src/svg/feedback.svg new file mode 100644 index 0000000..a0d6b1f --- /dev/null +++ b/blip-project/src/svg/feedback.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/blip-project/src/svg/member.svg b/blip-project/src/svg/member.svg new file mode 100644 index 0000000..80d1a82 --- /dev/null +++ b/blip-project/src/svg/member.svg @@ -0,0 +1,4 @@ + + + + From c0924fb3b8ba2234637cb470b6ee429de8bed5f5 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 11 Feb 2025 17:43:13 +0900 Subject: [PATCH 11/75] side --- .../src/components/CSS/sidebarTeam.css | 21 ++++++++++++ .../TeamJoinNo/CSS/sidebarTeamJoinNo.css | 8 ----- .../TeamJoinNo/sidebarTeamJoinNo.jsx | 12 ------- blip-project/src/components/sidebarTeam.jsx | 33 +++++++++++++++++++ 4 files changed, 54 insertions(+), 20 deletions(-) create mode 100644 blip-project/src/components/CSS/sidebarTeam.css delete mode 100644 blip-project/src/components/TeamJoinNo/CSS/sidebarTeamJoinNo.css delete mode 100644 blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.jsx create mode 100644 blip-project/src/components/sidebarTeam.jsx diff --git a/blip-project/src/components/CSS/sidebarTeam.css b/blip-project/src/components/CSS/sidebarTeam.css new file mode 100644 index 0000000..b89af8c --- /dev/null +++ b/blip-project/src/components/CSS/sidebarTeam.css @@ -0,0 +1,21 @@ +.MainSTJoinNo { + height: 90%; + width: 5%; + padding-top: 20px; + display: flex; + flex-direction: column; + align-items: center; + padding-left: 20px; +} + +.content-item { + width: 100%; + aspect-ratio: 1 / 1; + border-radius: 12px; + border: 1px solid black; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20%; + box-shadow: 0 0 5px 5px #31AD5F; +} diff --git a/blip-project/src/components/TeamJoinNo/CSS/sidebarTeamJoinNo.css b/blip-project/src/components/TeamJoinNo/CSS/sidebarTeamJoinNo.css deleted file mode 100644 index e0344cb..0000000 --- a/blip-project/src/components/TeamJoinNo/CSS/sidebarTeamJoinNo.css +++ /dev/null @@ -1,8 +0,0 @@ -.MainSTJoinNo { - height: 100%; - width: 5%; - display: flex; - flex-direction: column; - align-items: center; - padding-left: 20px; -} \ No newline at end of file diff --git a/blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.jsx b/blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.jsx deleted file mode 100644 index 809a606..0000000 --- a/blip-project/src/components/TeamJoinNo/sidebarTeamJoinNo.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import "./CSS/SidebarTeamJoinNo.css"; -import Add from "/src/svg/add.svg"; - -const SidebarTeamJoinNo = () => { - return ( -
- -
- ); -}; - -export default SidebarTeamJoinNo; \ No newline at end of file diff --git a/blip-project/src/components/sidebarTeam.jsx b/blip-project/src/components/sidebarTeam.jsx new file mode 100644 index 0000000..9aa1f1f --- /dev/null +++ b/blip-project/src/components/sidebarTeam.jsx @@ -0,0 +1,33 @@ +import "./CSS/sidebarTeam.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import { useContext } from "react"; +import { SidebarContext } from "../Router"; + +const SidebarTeam = () => { + const { todos } = useContext(SidebarContext); + return ( + <> +
+ {todos.length > 0 ? ( + todos.map((item) => ( +
+ {item.content} +
+ )) + ) : ( +

기본값이 없다

+ )} +
+ + ); +}; + +export default SidebarTeam; From ff795b32b1f13a3cd16b9f1ddeaaa4abcd10c348 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 11 Feb 2025 17:43:29 +0900 Subject: [PATCH 12/75] =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EA=B5=AC=ED=98=84?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blip-project/package-lock.json | 107 +++++++++++++++-- blip-project/package.json | 2 + blip-project/src/Router.jsx | 54 ++++++++- blip-project/src/components/AlarmTeam.jsx | 8 +- .../src/components/{ => CSS}/AlarmTeam.css | 0 .../src/components/{ => CSS}/DateTeam.css | 0 .../HeaderTeam.css} | 0 .../src/components/{ => CSS}/LetterTeam.css | 0 blip-project/src/components/CSS/MainTeam.css | 20 ++++ .../{TeamJoinNo => }/CSS/MainTeamJoinNo.css | 0 .../src/components/{ => CSS}/MeetingTeam.css | 0 blip-project/src/components/CSS/Member.css | 34 ++++++ .../components/{TeamJoinNo => }/CSS/Modal.css | 0 .../{TeamJoinNo => }/CSS/ModalCreate.css | 0 .../{TeamJoinNo => }/CSS/Modaljoin.css | 0 blip-project/src/components/CSS/StartTeam.css | 108 +++++++++++++++++ .../{TeamJoinNo => }/CSS/StartTeamJoinNo.css | 0 blip-project/src/components/DateTeam.jsx | 2 +- .../HeaderTeamJoinNo.jsx => HeaderTeam.jsx} | 12 +- blip-project/src/components/LetterTeam.jsx | 10 +- blip-project/src/components/MainTeam.jsx | 24 ++++ .../{TeamJoinNo => }/MainTeamJoinNo.jsx | 12 +- blip-project/src/components/MeetingTeam.jsx | 2 +- blip-project/src/components/Member.jsx | 25 ++++ .../src/components/{TeamJoinNo => }/Modal.jsx | 6 +- .../{TeamJoinNo => }/ModalCreate.jsx | 36 +++--- .../components/{TeamJoinNo => }/ModalJoin.jsx | 8 +- blip-project/src/components/StartTeam.jsx | 112 ++++++++++++++++++ .../{TeamJoinNo => }/StartTeamJoinNo.jsx | 4 +- .../src/components/TeamJoin/MainTeamJoin.jsx | 5 - blip-project/src/index.css | 68 ----------- blip-project/src/style/color.jsx | 2 +- 32 files changed, 531 insertions(+), 130 deletions(-) rename blip-project/src/components/{ => CSS}/AlarmTeam.css (100%) rename blip-project/src/components/{ => CSS}/DateTeam.css (100%) rename blip-project/src/components/{TeamJoinNo/CSS/HeaderTeamJoinNo.css => CSS/HeaderTeam.css} (100%) rename blip-project/src/components/{ => CSS}/LetterTeam.css (100%) create mode 100644 blip-project/src/components/CSS/MainTeam.css rename blip-project/src/components/{TeamJoinNo => }/CSS/MainTeamJoinNo.css (100%) rename blip-project/src/components/{ => CSS}/MeetingTeam.css (100%) create mode 100644 blip-project/src/components/CSS/Member.css rename blip-project/src/components/{TeamJoinNo => }/CSS/Modal.css (100%) rename blip-project/src/components/{TeamJoinNo => }/CSS/ModalCreate.css (100%) rename blip-project/src/components/{TeamJoinNo => }/CSS/Modaljoin.css (100%) create mode 100644 blip-project/src/components/CSS/StartTeam.css rename blip-project/src/components/{TeamJoinNo => }/CSS/StartTeamJoinNo.css (100%) rename blip-project/src/components/{TeamJoinNo/HeaderTeamJoinNo.jsx => HeaderTeam.jsx} (67%) create mode 100644 blip-project/src/components/MainTeam.jsx rename blip-project/src/components/{TeamJoinNo => }/MainTeamJoinNo.jsx (59%) create mode 100644 blip-project/src/components/Member.jsx rename blip-project/src/components/{TeamJoinNo => }/Modal.jsx (96%) rename blip-project/src/components/{TeamJoinNo => }/ModalCreate.jsx (72%) rename blip-project/src/components/{TeamJoinNo => }/ModalJoin.jsx (95%) create mode 100644 blip-project/src/components/StartTeam.jsx rename blip-project/src/components/{TeamJoinNo => }/StartTeamJoinNo.jsx (96%) delete mode 100644 blip-project/src/components/TeamJoin/MainTeamJoin.jsx diff --git a/blip-project/package-lock.json b/blip-project/package-lock.json index 91180b5..94c9fd1 100644 --- a/blip-project/package-lock.json +++ b/blip-project/package-lock.json @@ -8,7 +8,9 @@ "name": "blip-project", "version": "0.0.0", "dependencies": { + "apexcharts": "^4.4.0", "react": "^18.3.1", + "react-apexcharts": "^1.7.0", "react-dom": "^18.3.1", "react-router-dom": "^7.1.3", "styled-components": "^6.1.14" @@ -1207,6 +1209,62 @@ "win32" ] }, + "node_modules/@svgdotjs/svg.draggable.js": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.6.tgz", + "integrity": "sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==", + "license": "MIT", + "peerDependencies": { + "@svgdotjs/svg.js": "^3.2.4" + } + }, + "node_modules/@svgdotjs/svg.filter.js": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.8.tgz", + "integrity": "sha512-YshF2YDaeRA2StyzAs5nUPrev7npQ38oWD0eTRwnsciSL2KrRPMoUw8BzjIXItb3+dccKGTX3IQOd2NFzmHkog==", + "license": "MIT", + "dependencies": { + "@svgdotjs/svg.js": "^3.1.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/@svgdotjs/svg.js": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.4.tgz", + "integrity": "sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Fuzzyma" + } + }, + "node_modules/@svgdotjs/svg.resize.js": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz", + "integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==", + "license": "MIT", + "engines": { + "node": ">= 14.18" + }, + "peerDependencies": { + "@svgdotjs/svg.js": "^3.2.4", + "@svgdotjs/svg.select.js": "^4.0.1" + } + }, + "node_modules/@svgdotjs/svg.select.js": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.2.tgz", + "integrity": "sha512-5gWdrvoQX3keo03SCmgaBbD+kFftq0F/f2bzCbNnpkkvW6tk4rl4MakORzFuNjvXPWwB4az9GwuvVxQVnjaK2g==", + "license": "MIT", + "engines": { + "node": ">= 14.18" + }, + "peerDependencies": { + "@svgdotjs/svg.js": "^3.2.4" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1314,6 +1372,12 @@ "vite": "^4.2.0 || ^5.0.0 || ^6.0.0" } }, + "node_modules/@yr/monotone-cubic-spline": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz", + "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==", + "license": "MIT" + }, "node_modules/acorn": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", @@ -1366,6 +1430,20 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/apexcharts": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-4.4.0.tgz", + "integrity": "sha512-JGsHeQEKDlQh1rob8aBai9/HKvXIpbZ83TnobKZAcdOELf+oQZaxZyAnbbldr6PPBdCgG2zzzLaP1dtEsJxzWw==", + "license": "MIT", + "dependencies": { + "@svgdotjs/svg.draggable.js": "^3.0.4", + "@svgdotjs/svg.filter.js": "^3.0.8", + "@svgdotjs/svg.js": "^3.2.4", + "@svgdotjs/svg.resize.js": "^2.0.2", + "@svgdotjs/svg.select.js": "^4.0.1", + "@yr/monotone-cubic-spline": "^1.0.3" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -3248,7 +3326,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3503,7 +3580,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3530,6 +3606,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-apexcharts": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz", + "integrity": "sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "apexcharts": ">=4.0.0", + "react": ">=0.13" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -3545,8 +3634,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-refresh": { "version": "0.14.2", @@ -4242,14 +4330,15 @@ } }, "node_modules/vite": { - "version": "6.0.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.7.tgz", - "integrity": "sha512-RDt8r/7qx9940f8FcOIAH9PTViRrghKaK2K1jY3RaAURrEUbm9Du1mJ72G+jlhtG3WwodnfzY8ORQZbBavZEAQ==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.1.0.tgz", + "integrity": "sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==", "dev": true, + "license": "MIT", "dependencies": { "esbuild": "^0.24.2", - "postcss": "^8.4.49", - "rollup": "^4.23.0" + "postcss": "^8.5.1", + "rollup": "^4.30.1" }, "bin": { "vite": "bin/vite.js" diff --git a/blip-project/package.json b/blip-project/package.json index f1e0a54..e855bce 100644 --- a/blip-project/package.json +++ b/blip-project/package.json @@ -10,7 +10,9 @@ "preview": "vite preview" }, "dependencies": { + "apexcharts": "^4.4.0", "react": "^18.3.1", + "react-apexcharts": "^1.7.0", "react-dom": "^18.3.1", "react-router-dom": "^7.1.3", "styled-components": "^6.1.14" diff --git a/blip-project/src/Router.jsx b/blip-project/src/Router.jsx index 787abd6..ddcf6b9 100644 --- a/blip-project/src/Router.jsx +++ b/blip-project/src/Router.jsx @@ -1,5 +1,57 @@ import { Route, Routes } from "react-router-dom"; +import MainTeamJoinNo from "./components/MainTeamJoinNo"; +import MainTeamJoin from "./components/MainTeam"; +import Alarm from "./components/AlarmTeam"; +import Letter from "./components/LetterTeam"; +import SidebarImg from "./svg/add.svg"; +import { useRef, useReducer, createContext, useCallback, useMemo } from "react"; + +const mocDateSide = [ + { + id: 0, + content: sidebar-img, + }, +]; + +function reducer(state, action) { + switch (action.type) { + case "CREATE": + return [action.data, ...state]; + default: + return state; + } +} + +export const SidebarContext = createContext(); export const AppRouter = () => { - return ; + const [todos, dispatch] = useReducer(reducer, mocDateSide); + const idRef = useRef(1); + + const onCreateSidevar = useCallback((content) => { + dispatch({ + type: "CREATE", + data: { + id: idRef.current++, + content: content, + }, + }); + }, []); + + const memoizedDispatch = useMemo(() => { + return { + onCreateSidevar, + }; + }, []); + + return ( + + + } /> + } /> + } /> + } /> + + + ); }; diff --git a/blip-project/src/components/AlarmTeam.jsx b/blip-project/src/components/AlarmTeam.jsx index 165bd92..94ffedf 100644 --- a/blip-project/src/components/AlarmTeam.jsx +++ b/blip-project/src/components/AlarmTeam.jsx @@ -1,15 +1,15 @@ +import "./CSS/AlarmTeam.css" import { typography } from "../fonts/fonts"; import { color } from "../style/color"; -import "./AlarmTeam.css"; import DateTeamJoinNo from "./DateTeam"; -import HeaderTeamJoinNo from "./TeamJoinNo/HeaderTeamJoinNo"; -import SidebarTeamJoinNo from "./TeamJoinNo/sidebarTeamJoinNo"; +import HeaderTeam from "./HeaderTeam"; +import SidebarTeamJoinNo from "./sidebarTeam"; import MeetingTeamJoinNo from "./MeetingTeam"; const MTeamJoinNo = () => { return ( <> - +
diff --git a/blip-project/src/components/AlarmTeam.css b/blip-project/src/components/CSS/AlarmTeam.css similarity index 100% rename from blip-project/src/components/AlarmTeam.css rename to blip-project/src/components/CSS/AlarmTeam.css diff --git a/blip-project/src/components/DateTeam.css b/blip-project/src/components/CSS/DateTeam.css similarity index 100% rename from blip-project/src/components/DateTeam.css rename to blip-project/src/components/CSS/DateTeam.css diff --git a/blip-project/src/components/TeamJoinNo/CSS/HeaderTeamJoinNo.css b/blip-project/src/components/CSS/HeaderTeam.css similarity index 100% rename from blip-project/src/components/TeamJoinNo/CSS/HeaderTeamJoinNo.css rename to blip-project/src/components/CSS/HeaderTeam.css diff --git a/blip-project/src/components/LetterTeam.css b/blip-project/src/components/CSS/LetterTeam.css similarity index 100% rename from blip-project/src/components/LetterTeam.css rename to blip-project/src/components/CSS/LetterTeam.css diff --git a/blip-project/src/components/CSS/MainTeam.css b/blip-project/src/components/CSS/MainTeam.css new file mode 100644 index 0000000..85a6190 --- /dev/null +++ b/blip-project/src/components/CSS/MainTeam.css @@ -0,0 +1,20 @@ +*{ + margin: 0; + padding: 0; + overflow: hidden; + +} + +.Main-Team { + max-width: 100%; + height: 90vh; + display: flex; + gap: 20px; +} + +.Main-Team-Date { + width: 35%; + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git a/blip-project/src/components/TeamJoinNo/CSS/MainTeamJoinNo.css b/blip-project/src/components/CSS/MainTeamJoinNo.css similarity index 100% rename from blip-project/src/components/TeamJoinNo/CSS/MainTeamJoinNo.css rename to blip-project/src/components/CSS/MainTeamJoinNo.css diff --git a/blip-project/src/components/MeetingTeam.css b/blip-project/src/components/CSS/MeetingTeam.css similarity index 100% rename from blip-project/src/components/MeetingTeam.css rename to blip-project/src/components/CSS/MeetingTeam.css diff --git a/blip-project/src/components/CSS/Member.css b/blip-project/src/components/CSS/Member.css new file mode 100644 index 0000000..1e415ce --- /dev/null +++ b/blip-project/src/components/CSS/Member.css @@ -0,0 +1,34 @@ +.member { + width: 15%; + height: 100%; + box-shadow: 0px 0px 1px 1px #dedede; + border: 1px solid #cacaca; +} + +.member-header { + width: 100%; + height: 12%; + border-bottom: 1px solid #cacaca; +} + +.member-header-TeamName { + width: 100%; + height: 65%; + color: #ffff; + background-color: var(--main-400); + display: flex; + align-items: center; + padding-left: 10px; + +} + +.member-header-member { + width: 100%; + height: 35%; + padding-left: 10px; +} + +.member-name { + width: 100%; + height: 87%; +} diff --git a/blip-project/src/components/TeamJoinNo/CSS/Modal.css b/blip-project/src/components/CSS/Modal.css similarity index 100% rename from blip-project/src/components/TeamJoinNo/CSS/Modal.css rename to blip-project/src/components/CSS/Modal.css diff --git a/blip-project/src/components/TeamJoinNo/CSS/ModalCreate.css b/blip-project/src/components/CSS/ModalCreate.css similarity index 100% rename from blip-project/src/components/TeamJoinNo/CSS/ModalCreate.css rename to blip-project/src/components/CSS/ModalCreate.css diff --git a/blip-project/src/components/TeamJoinNo/CSS/Modaljoin.css b/blip-project/src/components/CSS/Modaljoin.css similarity index 100% rename from blip-project/src/components/TeamJoinNo/CSS/Modaljoin.css rename to blip-project/src/components/CSS/Modaljoin.css diff --git a/blip-project/src/components/CSS/StartTeam.css b/blip-project/src/components/CSS/StartTeam.css new file mode 100644 index 0000000..506a623 --- /dev/null +++ b/blip-project/src/components/CSS/StartTeam.css @@ -0,0 +1,108 @@ +.start-main { + width: 67%; + border-radius: 15px; + border: 1px solid #cacaca; + display: flex; + justify-content: end; +} + +.council { + width: 85%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} + +.council-keyword { + width: 90%; + height: 32%; + border-radius: 12px; + background-image: url("/src/svg/council.svg"); + display: flex; + flex-direction: column; + justify-content: end; +} + +.council-keyword-main { + width: 50%; + height: 35%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 20px; +} + +.council-keyword-main button { + width: 22%; + height: 35%; + color: #ffff; + background-color: var(--main-400); + border: none; + border-radius: 60px; +} + +.council-feedback { + width: 90%; + height: 20%; + border-radius: 12px; + border: 1px solid var(--gray-200); + display: flex; + justify-content: space-between; + align-items: center; +} + +.council-feedback-main { + width: auto; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + padding-left: 20px; +} + +.council-feedback-main button { + width: 45%; + height: 20%; + color: #ffff; + background-color: var(--main-400); + border: none; + border-radius: 60px; +} + +.council-feedback img { + height: 100%; +} + +.council-graph { + width: 90%; + height: 38%; + border-radius: 12px; + border: 1px solid var(--gray-200); + display: flex; + justify-content: space-between; +} + +.council-graph-main { + width: 70%; + height: 100%; +} + +.council-graph-font { + padding: 15px; +} + +.council-graph-graph { + width: 50%; + height: 70%; + display: flex; + align-items: center; + justify-self: center; +} + +.council-graph img { + width: 29%; + height: 100%; + object-fit: cover; +} diff --git a/blip-project/src/components/TeamJoinNo/CSS/StartTeamJoinNo.css b/blip-project/src/components/CSS/StartTeamJoinNo.css similarity index 100% rename from blip-project/src/components/TeamJoinNo/CSS/StartTeamJoinNo.css rename to blip-project/src/components/CSS/StartTeamJoinNo.css diff --git a/blip-project/src/components/DateTeam.jsx b/blip-project/src/components/DateTeam.jsx index fa61ac3..2e394fb 100644 --- a/blip-project/src/components/DateTeam.jsx +++ b/blip-project/src/components/DateTeam.jsx @@ -1,4 +1,4 @@ -import "./DateTeam.css"; +import "./CSS/DateTeam.css"; import { color } from "../style/color"; import { typography } from "../fonts/fonts"; import { useState } from "react"; diff --git a/blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.jsx b/blip-project/src/components/HeaderTeam.jsx similarity index 67% rename from blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.jsx rename to blip-project/src/components/HeaderTeam.jsx index 82f536d..5a75c7f 100644 --- a/blip-project/src/components/TeamJoinNo/HeaderTeamJoinNo.jsx +++ b/blip-project/src/components/HeaderTeam.jsx @@ -1,10 +1,10 @@ -import "./CSS/HeaderTeamJoinNo.css"; -import Alarm from "/src/svg/Alarm.svg"; -import blackLogo from "/src/svg/blackLogo.svg"; -import Letter from "/src/svg/letter.svg"; +import "./CSS/HeaderTeam.css" +import Alarm from "../svg/Alarm.svg"; +import blackLogo from "../svg/blackLogo.svg"; +import Letter from "../svg/letter.svg" import { useNavigate } from "react-router-dom"; -const HeaderTeamJoinNo = () => { +const HeaderTeam = () => { const nav = useNavigate() return (
@@ -17,4 +17,4 @@ const HeaderTeamJoinNo = () => { ); }; -export default HeaderTeamJoinNo; +export default HeaderTeam; diff --git a/blip-project/src/components/LetterTeam.jsx b/blip-project/src/components/LetterTeam.jsx index dba1077..79c486b 100644 --- a/blip-project/src/components/LetterTeam.jsx +++ b/blip-project/src/components/LetterTeam.jsx @@ -1,17 +1,17 @@ +import "./CSS/LetterTeam.css"; import { typography } from "../fonts/fonts"; import { color } from "../style/color"; -import "./LetterTeam.css"; import DateTeamJoinNo from "./DateTeam"; -import HeaderTeamJoinNo from "./TeamJoinNo/HeaderTeamJoinNo"; -import SidebarTeamJoinNo from "./TeamJoinNo/sidebarTeamJoinNo"; +import HeaderTeam from "./HeaderTeam"; +import SidebarTeam from "./sidebarTeam"; import MeetingTeamJoinNo from "./MeetingTeam"; const MTeamJoinNo = () => { return ( <> - +
- +

초대장이 없어요 diff --git a/blip-project/src/components/MainTeam.jsx b/blip-project/src/components/MainTeam.jsx new file mode 100644 index 0000000..4ad44c2 --- /dev/null +++ b/blip-project/src/components/MainTeam.jsx @@ -0,0 +1,24 @@ +import "./CSS/MainTeam.css"; +import DateTeamJoinNo from "./DateTeam"; +import HeaderTeam from "./HeaderTeam"; +import SidebarTeam from "./sidebarTeam"; +import StartTeam from "./StartTeam"; +import MeetingTeamJoinNo from "./MeetingTeam"; + +const MainTeam = () => { + return ( + <> + +

+ + +
+ + +
+
+ + ); +}; + +export default MainTeam; diff --git a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx b/blip-project/src/components/MainTeamJoinNo.jsx similarity index 59% rename from blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx rename to blip-project/src/components/MainTeamJoinNo.jsx index 97c77ff..49ee43b 100644 --- a/blip-project/src/components/TeamJoinNo/MainTeamJoinNo.jsx +++ b/blip-project/src/components/MainTeamJoinNo.jsx @@ -1,16 +1,16 @@ import "./CSS/MainTeamJoinNo.css"; -import DateTeamJoinNo from "../DateTeam"; -import HeaderTeamJoinNo from "./HeaderTeamJoinNo"; -import SidebarTeamJoinNo from "./sidebarTeamJoinNo"; +import DateTeamJoinNo from "./DateTeam"; +import HeaderTeam from "./HeaderTeam" +import SidebarTeam from "./sidebarTeam"; import StartTeamJoinNo from "./StartTeamJoinNo"; -import MeetingTeamJoinNo from "../MeetingTeam" +import MeetingTeamJoinNo from "./MeetingTeam" const MTeamJoinNo = () => { return ( <> - +
- +
diff --git a/blip-project/src/components/MeetingTeam.jsx b/blip-project/src/components/MeetingTeam.jsx index 1ba18c6..64d8e6f 100644 --- a/blip-project/src/components/MeetingTeam.jsx +++ b/blip-project/src/components/MeetingTeam.jsx @@ -1,4 +1,4 @@ -import "./MeetingTeam.css" +import "./CSS/MeetingTeam.css" import { color } from "../style/color"; import { typography } from "../fonts/fonts"; diff --git a/blip-project/src/components/Member.jsx b/blip-project/src/components/Member.jsx new file mode 100644 index 0000000..6921866 --- /dev/null +++ b/blip-project/src/components/Member.jsx @@ -0,0 +1,25 @@ +import "./CSS/Member.css"; +import { color } from "../style/color"; +import { typography } from "../fonts/fonts"; +import MemberSVG from "../svg/member.svg"; + +const Member = () => { + return ( +
+
+
+ Team Blip +
+
+ +
+
+
+
+ ); +}; + +export default Member; diff --git a/blip-project/src/components/TeamJoinNo/Modal.jsx b/blip-project/src/components/Modal.jsx similarity index 96% rename from blip-project/src/components/TeamJoinNo/Modal.jsx rename to blip-project/src/components/Modal.jsx index 34349ac..5e49e3a 100644 --- a/blip-project/src/components/TeamJoinNo/Modal.jsx +++ b/blip-project/src/components/Modal.jsx @@ -1,7 +1,7 @@ -import { typography } from "../../fonts/fonts"; -import { color } from "../../style/color"; -import ESC from "../../svg/ESC.svg"; import "./CSS/Modal.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import ESC from "../svg/ESC.svg" import { useState } from "react"; import ModalCreate from "./ModalCreate"; import ModalJoin from "./ModalJoin"; diff --git a/blip-project/src/components/TeamJoinNo/ModalCreate.jsx b/blip-project/src/components/ModalCreate.jsx similarity index 72% rename from blip-project/src/components/TeamJoinNo/ModalCreate.jsx rename to blip-project/src/components/ModalCreate.jsx index 42df559..a1c9ba2 100644 --- a/blip-project/src/components/TeamJoinNo/ModalCreate.jsx +++ b/blip-project/src/components/ModalCreate.jsx @@ -1,26 +1,33 @@ -import { typography } from "../../fonts/fonts"; -import { color } from "../../style/color"; -import ESC from "../../svg/ESC.svg"; import "./CSS/ModalCreate.css"; -import { useState } from "react"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import ESC from "../svg/ESC.svg"; +import { useState, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; +import { SidebarContext } from "../Router"; const ModalCreate = ({ onClose }) => { - const [isInput, setIsInput] = useState(""); - const [form, setform] = useState("") + const { onCreateSidevar, dispatch } = useContext(SidebarContext); + const [content, setContent] = useState(""); + const submitRef = useRef(); const onChangeInput = (e) => { - setIsInput(e.target.value); + setContent(e.target.value); console.log(e.target.value); }; - const nav = useNavigate() + const nav = useNavigate(); - const onClickCreate = () =>{ - if(isInput !== ""){ - nav("/TeamJoin",{state:{form} }); + const onClickCreate = () => { + if (content !== "") { + nav("/TeamJoin", { state: { content } }); + dispatch.onCreateSidevar(content); + setContent("") + } else if (content === "") { + submitRef.current.focus(); + return; } - } + }; return (
@@ -50,13 +57,14 @@ const ModalCreate = ({ onClose }) => {

- {isInput ? ( + {content ? ( +
+
+
+
+
+
회의 피드백 확인하기
+

+ 진행한 회의를 피드백 해드릴게요! +

+
+ +
+ +
+
+
+
+
회의 참여율 확인하기
+

+ 가장 최근 회의율은 95%입니다 +

+
+
+ +
+
+
+ +
+
+
+ ); + +}; + +export default StartTeam; + diff --git a/blip-project/src/components/TeamJoinNo/StartTeamJoinNo.jsx b/blip-project/src/components/StartTeamJoinNo.jsx similarity index 96% rename from blip-project/src/components/TeamJoinNo/StartTeamJoinNo.jsx rename to blip-project/src/components/StartTeamJoinNo.jsx index 2c3709a..0df08bd 100644 --- a/blip-project/src/components/TeamJoinNo/StartTeamJoinNo.jsx +++ b/blip-project/src/components/StartTeamJoinNo.jsx @@ -1,6 +1,6 @@ import "./CSS/StartTeamJoinNo.CSS"; -import { typography } from "../../fonts/fonts"; -import { color } from "../../style/color"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; import Modal from "./Modal"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; diff --git a/blip-project/src/components/TeamJoin/MainTeamJoin.jsx b/blip-project/src/components/TeamJoin/MainTeamJoin.jsx deleted file mode 100644 index 45f4823..0000000 --- a/blip-project/src/components/TeamJoin/MainTeamJoin.jsx +++ /dev/null @@ -1,5 +0,0 @@ -const MainTeamJoin = () => { - return <>MainTeamJoin; -}; - -export default MainTeamJoin; diff --git a/blip-project/src/index.css b/blip-project/src/index.css index 6119ad9..e69de29 100644 --- a/blip-project/src/index.css +++ b/blip-project/src/index.css @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/blip-project/src/style/color.jsx b/blip-project/src/style/color.jsx index 42991cf..e610dc7 100644 --- a/blip-project/src/style/color.jsx +++ b/blip-project/src/style/color.jsx @@ -26,7 +26,7 @@ export const color = { "#B5B5B5", // Gray 300 "#A1A1A1", // Gray 400 "#8C8C8C", // Gray 500 - "#610064", // Gray 600 + "#616064", // Gray 600 "#4C4B4F", // Gray 700 "#38373B", // Gray 800 ], From e0c526f44ccf4987f8bbdf204fc198d6a4cf5400 Mon Sep 17 00:00:00 2001 From: tccmw Date: Wed, 12 Feb 2025 16:37:42 +0900 Subject: [PATCH 13/75] =?UTF-8?q?sidevar=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blip-project/src/Router.css | 5 ++++ blip-project/src/Router.jsx | 7 +++-- .../src/components/CSS/sidebarTeam.css | 30 +++++++++++++------ blip-project/src/components/sidebarTeam.jsx | 18 +++++++++-- 4 files changed, 47 insertions(+), 13 deletions(-) create mode 100644 blip-project/src/Router.css diff --git a/blip-project/src/Router.css b/blip-project/src/Router.css new file mode 100644 index 0000000..a160580 --- /dev/null +++ b/blip-project/src/Router.css @@ -0,0 +1,5 @@ +.mocDataImg { + width: 100%; + max-width: 80px; + aspect-ratio: 1 / 1; +} diff --git a/blip-project/src/Router.jsx b/blip-project/src/Router.jsx index ddcf6b9..62b4e79 100644 --- a/blip-project/src/Router.jsx +++ b/blip-project/src/Router.jsx @@ -1,3 +1,4 @@ +import "./Router.css" import { Route, Routes } from "react-router-dom"; import MainTeamJoinNo from "./components/MainTeamJoinNo"; import MainTeamJoin from "./components/MainTeam"; @@ -9,7 +10,8 @@ import { useRef, useReducer, createContext, useCallback, useMemo } from "react"; const mocDateSide = [ { id: 0, - content: sidebar-img, + content: sidebar-img, + isPlus: true, }, ]; @@ -34,6 +36,7 @@ export const AppRouter = () => { data: { id: idRef.current++, content: content, + isPlus: false, }, }); }, []); @@ -45,7 +48,7 @@ export const AppRouter = () => { }, []); return ( - + } /> } /> diff --git a/blip-project/src/components/CSS/sidebarTeam.css b/blip-project/src/components/CSS/sidebarTeam.css index b89af8c..b58ebef 100644 --- a/blip-project/src/components/CSS/sidebarTeam.css +++ b/blip-project/src/components/CSS/sidebarTeam.css @@ -1,21 +1,33 @@ .MainSTJoinNo { - height: 90%; + height: 100%; width: 5%; - padding-top: 20px; - display: flex; - flex-direction: column; - align-items: center; + margin-top: 0.5%; + padding-top: 0.5%; + padding-right: 10px; padding-left: 20px; + gap: 2%; + overflow-y: auto; } .content-item { - width: 100%; + margin-bottom: 15%; + min-width: 90%; + min-height: 2%; aspect-ratio: 1 / 1; border-radius: 12px; - border: 1px solid black; display: flex; align-items: center; justify-content: center; - margin-bottom: 20%; - box-shadow: 0 0 5px 5px #31AD5F; + box-shadow: 0 0 3px 3px #31ad5f; +} + +.content-item-plus { + width: 100%; + display: flex; + justify-content: center; + aspect-ratio: 1/1; + box-shadow: none; + border: none; + border-radius: 12px; + padding-bottom: 10%; } diff --git a/blip-project/src/components/sidebarTeam.jsx b/blip-project/src/components/sidebarTeam.jsx index 9aa1f1f..b2590d7 100644 --- a/blip-project/src/components/sidebarTeam.jsx +++ b/blip-project/src/components/sidebarTeam.jsx @@ -3,9 +3,14 @@ import { typography } from "../fonts/fonts"; import { color } from "../style/color"; import { useContext } from "react"; import { SidebarContext } from "../Router"; +import { useNavigate } from "react-router-dom"; +import { useRef, useEffect } from "react"; const SidebarTeam = () => { + const nav = useNavigate(); const { todos } = useContext(SidebarContext); + const scrollRef = useRef(null); + return ( <>
@@ -13,10 +18,19 @@ const SidebarTeam = () => { todos.map((item) => (
{ + if (item.isPlus) { + nav("/", { state: {} }); + } else { + nav("/TeamJoin", { state: {} }); + } + }} style={{ ...typography.Header2, - backgroundColor: color.GrayScale[1], + backgroundColor: item.isPlus + ? "transparent" + : color.GrayScale[1], }} > {item.content} From f48c4fb1817d42b9266552ba3de6a8a6a6058377 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Mar 2025 22:51:26 +0900 Subject: [PATCH 14/75] svg --- blip-project/src/svg/DisAlarm.svg | 3 +++ blip-project/src/svg/DisCamera.svg | 4 ++++ blip-project/src/svg/Exit.svg | 3 +++ blip-project/src/svg/FullScreen.svg | 3 +++ blip-project/src/svg/Mike.svg | 4 ++++ blip-project/src/svg/NoCamera.svg | 10 ++++++++++ blip-project/src/svg/NoMike.svg | 11 +++++++++++ blip-project/src/svg/X.svg | 3 +++ blip-project/src/svg/XFullScreen.svg | 10 ++++++++++ blip-project/src/svg/camera.svg | 4 ++++ blip-project/src/svg/plus.svg | 3 +++ blip-project/src/svg/setting.svg | 3 +++ 12 files changed, 61 insertions(+) create mode 100644 blip-project/src/svg/DisAlarm.svg create mode 100644 blip-project/src/svg/DisCamera.svg create mode 100644 blip-project/src/svg/Exit.svg create mode 100644 blip-project/src/svg/FullScreen.svg create mode 100644 blip-project/src/svg/Mike.svg create mode 100644 blip-project/src/svg/NoCamera.svg create mode 100644 blip-project/src/svg/NoMike.svg create mode 100644 blip-project/src/svg/X.svg create mode 100644 blip-project/src/svg/XFullScreen.svg create mode 100644 blip-project/src/svg/camera.svg create mode 100644 blip-project/src/svg/plus.svg create mode 100644 blip-project/src/svg/setting.svg diff --git a/blip-project/src/svg/DisAlarm.svg b/blip-project/src/svg/DisAlarm.svg new file mode 100644 index 0000000..42fcfba --- /dev/null +++ b/blip-project/src/svg/DisAlarm.svg @@ -0,0 +1,3 @@ + + + diff --git a/blip-project/src/svg/DisCamera.svg b/blip-project/src/svg/DisCamera.svg new file mode 100644 index 0000000..3da1df9 --- /dev/null +++ b/blip-project/src/svg/DisCamera.svg @@ -0,0 +1,4 @@ + + + + diff --git a/blip-project/src/svg/Exit.svg b/blip-project/src/svg/Exit.svg new file mode 100644 index 0000000..f217d0d --- /dev/null +++ b/blip-project/src/svg/Exit.svg @@ -0,0 +1,3 @@ + + + diff --git a/blip-project/src/svg/FullScreen.svg b/blip-project/src/svg/FullScreen.svg new file mode 100644 index 0000000..12f4d9a --- /dev/null +++ b/blip-project/src/svg/FullScreen.svg @@ -0,0 +1,3 @@ + + + diff --git a/blip-project/src/svg/Mike.svg b/blip-project/src/svg/Mike.svg new file mode 100644 index 0000000..744455c --- /dev/null +++ b/blip-project/src/svg/Mike.svg @@ -0,0 +1,4 @@ + + + + diff --git a/blip-project/src/svg/NoCamera.svg b/blip-project/src/svg/NoCamera.svg new file mode 100644 index 0000000..2637b67 --- /dev/null +++ b/blip-project/src/svg/NoCamera.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/blip-project/src/svg/NoMike.svg b/blip-project/src/svg/NoMike.svg new file mode 100644 index 0000000..db8d076 --- /dev/null +++ b/blip-project/src/svg/NoMike.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/blip-project/src/svg/X.svg b/blip-project/src/svg/X.svg new file mode 100644 index 0000000..c088b37 --- /dev/null +++ b/blip-project/src/svg/X.svg @@ -0,0 +1,3 @@ + + + diff --git a/blip-project/src/svg/XFullScreen.svg b/blip-project/src/svg/XFullScreen.svg new file mode 100644 index 0000000..5abfbdc --- /dev/null +++ b/blip-project/src/svg/XFullScreen.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/blip-project/src/svg/camera.svg b/blip-project/src/svg/camera.svg new file mode 100644 index 0000000..1345ba5 --- /dev/null +++ b/blip-project/src/svg/camera.svg @@ -0,0 +1,4 @@ + + + + diff --git a/blip-project/src/svg/plus.svg b/blip-project/src/svg/plus.svg new file mode 100644 index 0000000..73996dd --- /dev/null +++ b/blip-project/src/svg/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/blip-project/src/svg/setting.svg b/blip-project/src/svg/setting.svg new file mode 100644 index 0000000..ecf6fdc --- /dev/null +++ b/blip-project/src/svg/setting.svg @@ -0,0 +1,3 @@ + + + From 88f568c08acba1424ee9095a4107cfb892f4fba4 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Mar 2025 22:52:21 +0900 Subject: [PATCH 15/75] =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=20X?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blip-project/src/components/AlarmTeam.jsx | 34 ++++++++----------- blip-project/src/components/CSS/AlarmTeam.css | 18 ++++------ blip-project/src/components/CSS/Keyword.css | 23 +++++++++++++ .../src/components/CSS/LetterTeam.css | 16 +++------ blip-project/src/components/Keyword.jsx | 17 ++++++++++ blip-project/src/components/LetterTeam.jsx | 32 ++++++++--------- 6 files changed, 80 insertions(+), 60 deletions(-) create mode 100644 blip-project/src/components/CSS/Keyword.css create mode 100644 blip-project/src/components/Keyword.jsx diff --git a/blip-project/src/components/AlarmTeam.jsx b/blip-project/src/components/AlarmTeam.jsx index 94ffedf..4bb23c9 100644 --- a/blip-project/src/components/AlarmTeam.jsx +++ b/blip-project/src/components/AlarmTeam.jsx @@ -1,29 +1,25 @@ -import "./CSS/AlarmTeam.css" +import "./CSS/AlarmTeam.css"; import { typography } from "../fonts/fonts"; import { color } from "../style/color"; -import DateTeamJoinNo from "./DateTeam"; -import HeaderTeam from "./HeaderTeam"; -import SidebarTeamJoinNo from "./sidebarTeam"; -import MeetingTeamJoinNo from "./MeetingTeam"; +import { useLocation } from "react-router-dom"; -const MTeamJoinNo = () => { +const Alarm = () => { + const location = useLocation(); return ( <> - -
- -
-

- 아직 받은 알람이 없어요 -

-
-
- - -
+
+

+ 아직 받은 알람이 없어요 +

); }; -export default MTeamJoinNo; +export default Alarm; diff --git a/blip-project/src/components/CSS/AlarmTeam.css b/blip-project/src/components/CSS/AlarmTeam.css index fa0e005..39b4ad6 100644 --- a/blip-project/src/components/CSS/AlarmTeam.css +++ b/blip-project/src/components/CSS/AlarmTeam.css @@ -4,26 +4,20 @@ overflow: hidden; } -.Alarm-main { - max-width: 100%; - height: 90vh; - display: flex; - gap: 20px; -} - .Alarm-p { width: 67%; border-radius: 15px; border: 1px solid #cacaca; display: flex; - flex-direction: column; align-items: center; justify-content: center; } -.Alarm-src { - width: 35%; +.Alarm-p-font { + width: 85%; + height: 100%; display: flex; - flex-direction: column; - justify-content: space-between; + align-items: center; + justify-content: center; } + diff --git a/blip-project/src/components/CSS/Keyword.css b/blip-project/src/components/CSS/Keyword.css new file mode 100644 index 0000000..36dafce --- /dev/null +++ b/blip-project/src/components/CSS/Keyword.css @@ -0,0 +1,23 @@ +* { + margin: 0; + padding: 0; + overflow: hidden; +} + +.keyword-p { + width: 67%; + border-radius: 15px; + border: 1px solid #cacaca; + display: flex; + align-items: center; + justify-content: center; +} + +.keyword-p-font { + width: 85%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + diff --git a/blip-project/src/components/CSS/LetterTeam.css b/blip-project/src/components/CSS/LetterTeam.css index fe41445..1f09539 100644 --- a/blip-project/src/components/CSS/LetterTeam.css +++ b/blip-project/src/components/CSS/LetterTeam.css @@ -4,13 +4,6 @@ overflow: hidden; } -.Letter-main { - max-width: 100%; - height: 90vh; - display: flex; - gap: 20px; -} - .Letter-p { width: 67%; border-radius: 15px; @@ -21,9 +14,10 @@ justify-content: center; } -.Letter-src { - width: 35%; +.Letter-p-font { + width: 85%; + height: 100%; display: flex; - flex-direction: column; - justify-content: space-between; + align-items: center; + justify-content: center; } diff --git a/blip-project/src/components/Keyword.jsx b/blip-project/src/components/Keyword.jsx new file mode 100644 index 0000000..0f34a0e --- /dev/null +++ b/blip-project/src/components/Keyword.jsx @@ -0,0 +1,17 @@ +import "./CSS/Keyword.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; + +const Keyword = () => { + return ( + <> +
+

+ 아직 받은 회의 일정 및 키워드 요약이 없어요 +

+
+ + ); +}; + +export default Keyword; diff --git a/blip-project/src/components/LetterTeam.jsx b/blip-project/src/components/LetterTeam.jsx index 79c486b..fa9f040 100644 --- a/blip-project/src/components/LetterTeam.jsx +++ b/blip-project/src/components/LetterTeam.jsx @@ -1,29 +1,25 @@ import "./CSS/LetterTeam.css"; import { typography } from "../fonts/fonts"; import { color } from "../style/color"; -import DateTeamJoinNo from "./DateTeam"; -import HeaderTeam from "./HeaderTeam"; -import SidebarTeam from "./sidebarTeam"; -import MeetingTeamJoinNo from "./MeetingTeam"; +import { useLocation } from "react-router-dom"; -const MTeamJoinNo = () => { +const Letter = () => { + const location = useLocation() return ( <> - -
- -
-

- 초대장이 없어요 -

-
-
- - -
+
+

+ 초대장이 없어요 +

); }; -export default MTeamJoinNo; +export default Letter; From 6e2e89247c18e875f5953732a36929b5554aa654 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Mar 2025 22:53:25 +0900 Subject: [PATCH 16/75] =?UTF-8?q?=ED=86=B5=ED=99=94=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blip-project/src/components/CSS/Discord.css | 139 ++++++++++++ .../src/components/CSS/FullScreen.css | 78 +++++++ .../src/components/CSS/ModalMeeting.css | 125 +++++++++++ blip-project/src/components/CSS/OwnerTeam.css | 69 ++++++ blip-project/src/components/Discord.jsx | 208 ++++++++++++++++++ blip-project/src/components/FullScreen.jsx | 205 +++++++++++++++++ .../src/components/Modal/ModalMeeting.jsx | 178 +++++++++++++++ blip-project/src/components/OwnerTeam.jsx | 119 ++++++++++ 8 files changed, 1121 insertions(+) create mode 100644 blip-project/src/components/CSS/Discord.css create mode 100644 blip-project/src/components/CSS/FullScreen.css create mode 100644 blip-project/src/components/CSS/ModalMeeting.css create mode 100644 blip-project/src/components/CSS/OwnerTeam.css create mode 100644 blip-project/src/components/Discord.jsx create mode 100644 blip-project/src/components/FullScreen.jsx create mode 100644 blip-project/src/components/Modal/ModalMeeting.jsx create mode 100644 blip-project/src/components/OwnerTeam.jsx diff --git a/blip-project/src/components/CSS/Discord.css b/blip-project/src/components/CSS/Discord.css new file mode 100644 index 0000000..22c98ef --- /dev/null +++ b/blip-project/src/components/CSS/Discord.css @@ -0,0 +1,139 @@ +* { + margin: 0; + padding: 0; + overflow: hidden; +} + +.discord { + width: 85%; + height: 100%; + display: flex; + flex-direction: column; +} + +.discord-end { + width: 100%; + height: 100%; +} + +.discord-end-x { + width: 95%; + height: 10%; + display: flex; + align-items: center; + justify-content: end; +} + +.discord-end-fnot { + width: 100%; + height: 80%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2%; +} + +.discord-body { + width: 100%; + height: 90%; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.discord-main { + background-color: blueviolet; + width: 95%; + height: 95%; + border-radius: 24px; + border: none; + display: flex; + flex-direction: column; + justify-content: space-between; + position: relative; +} + +.discord-main video { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; +} + +.discord-main-circle { + width: 100%; + height: 60%; + display: flex; + align-items: end; + justify-content: center; +} + +.discord-main-circle-src { + width: 20%; + height: 37%; + border-radius: 50%; + background-color: black; +} + +.discord-main-foot { + width: 100%; + height: 30%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.discord-main-foot p { + display: flex; + flex-direction: column; + align-items: center; + color: #ffff; +} + +.discord-main-nofoot { + width: 100%; + height: 5%; + display: flex; + align-items: center; + justify-content: center; + gap: 1%; + padding-left: 30%; +} + +.discord-main-nofoot-video { + width: 100%; + height: 99%; + display: flex; + align-items: end; + justify-content: center; + gap: 1%; + padding-left: 30%; + z-index: 1000; +} + +.discord-foot { + width: 100%; + height: 10%; + display: flex; + align-items: center; + justify-content: space-around; + gap: 50%; +} + +.discord-foot-Src { + width: 20%; + height: 80%; + display: flex; + align-items: center; + justify-content: space-around; +} + +.discord-foot-NoSrc { + width: 60%; + height: 100%; + display: flex; + align-items: center; + gap: 10%; +} diff --git a/blip-project/src/components/CSS/FullScreen.css b/blip-project/src/components/CSS/FullScreen.css new file mode 100644 index 0000000..f955075 --- /dev/null +++ b/blip-project/src/components/CSS/FullScreen.css @@ -0,0 +1,78 @@ +.FullScreen { + width: 100vw; + height: 100vh; +} + +.FullScreen-main { + width: 100%; + height: 90%; + grid-template-columns: 1fr; /* 한 열에 하나씩 */ +} + +.screen { + width: 90%; + height: 90%; + background-color: rgb(134, 2, 148); + border-radius: 24px; + grid-template-columns: 1fr; /* 한 열에 하나씩 */ +} + +.screen video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.screen-circle { + width: 100%; + height: 60%; + display: flex; + align-items: end; + justify-content: center; +} + +.screen-circle div { + width: 15%; + aspect-ratio: 1; + border-radius: 50%; + background-color: bisque; +} + +.screen-name { + width: 100%; + height: 30%; + display: flex; + justify-content: center; + margin-top: 2%; +} + +.screen-src { + width: 50%; + height: 5%; + display: flex; + justify-content: end; + padding-left: 30%; + gap: 3%; +} + +.FullScreen-foot { + width: 100%; + height: 10%; + display: flex; + align-items: center; + justify-content: space-between; +} + +.FullScreen-foot-src { + width: 80%; + height: 30%; + display: flex; + justify-content: end; + gap: 1%; +} + +.FullScreen-foot-exit { + height: 30%; + padding-right: 5%; + display: flex; +} diff --git a/blip-project/src/components/CSS/ModalMeeting.css b/blip-project/src/components/CSS/ModalMeeting.css new file mode 100644 index 0000000..40a2962 --- /dev/null +++ b/blip-project/src/components/CSS/ModalMeeting.css @@ -0,0 +1,125 @@ +.modalMeeting-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.25); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modalMeeting-content { + width: 60%; + height: 70%; + background-color: white; + border-radius: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.modalMeeting-title { + display: flex; + justify-content: space-between; + padding: 3% 3% 0 3%; +} + +.modalMeeting-body { + width: 100%; + height: 50%; + padding-left: 3%; + display: flex; + flex-direction: column; + gap: 10%; +} + +.modalMeeting-body-Topic { + width: 100%; + height: 35%; + display: flex; + flex-direction: column; + gap: 5%; +} + +.modalMeeting-body-Topic input { + width: 50%; + height: 40%; + border-radius: 12px; + border: 1px solid var(--gray-50); + padding-left: 1%; +} + +.modalMeeting-body-Topic input::placeholder { + color: var(--gray-200); +} + +.modalMeeting-body-setting { + width: 100%; + height: 25%; + display: flex; + flex-direction: column; + gap: 15%; +} + +.modalMeeting-body-setting-call { + display: flex; + color: var(--gray-600); +} + +.setting-call-mike { + width: 10%; + display: flex; + align-items: center; + gap: 15%; +} + +.setting-call-camera { + width: 10%; + display: flex; + align-items: center; + gap: 15%; +} + +.checkbox-label { + width: 10%; + height: 60%; + aspect-ratio: 1/1; + border: 2px solid var(--gray-600); +} + +.checkbox-label-checked { + width: 12%; + height: 75; + aspect-ratio: 1/1; +} + +.checkbox-label-checked::after { + width: 100%; + height: 100%; + content: "✔"; + font-size: 70%; + color: #ffff; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--Main-400); +} + +.modalMeeting-button-main { + width: 100%; + height: 20%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.modalMeeting-button { + width: 50%; + height: 50%; + border-radius: 12px; + border: none; +} diff --git a/blip-project/src/components/CSS/OwnerTeam.css b/blip-project/src/components/CSS/OwnerTeam.css new file mode 100644 index 0000000..dec24c8 --- /dev/null +++ b/blip-project/src/components/CSS/OwnerTeam.css @@ -0,0 +1,69 @@ +.owner-main { + width: 85%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.owner-body { + width: 100%; + height: 60%; + display: flex; + flex-direction: column; + gap: 30px; + padding: 2%; +} + +.circle-main { + width: 20%; + height: 32%; + border-radius: 50%; + border:1px solid var(--gray-200) ; + display: flex; + align-items: center; + justify-content: center; +} + +.circle-main-img { + width: 80%; + height: 80%; + cursor: pointer; +} + +.circle-main input[type="file"] { + display: none; +} + +.TeamName-input{ + width: 100%; + height: 10%; +} + +.TeamName-input input{ + width: 50%; + height: 100%; + border: 1px solid var(--gray-50); + border-radius: 12px; + padding-left: 2%; +} + +.TeamName-input input::placeholder{ + font-size: 100%; +} + +.owner-button { + height: 20%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2%; +} + +.owner-button button { + width: 25%; + height: 35%; + color: #ffff; + border-radius: 12px; + border: none; +} diff --git a/blip-project/src/components/Discord.jsx b/blip-project/src/components/Discord.jsx new file mode 100644 index 0000000..30336b3 --- /dev/null +++ b/blip-project/src/components/Discord.jsx @@ -0,0 +1,208 @@ +import "./CSS/Discord.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import DisAlarm from "../svg/DisAlarm.svg"; +import NoMike from "../svg/NoMike.svg"; +import NoCamera from "../svg/noCamera.svg"; +import Mike from "../svg/Mike.svg"; +import Camera from "../svg/DisCamera.svg"; +import Fullscreen from "../svg/FullScreen.svg"; +import X from "../svg/X.svg"; +import { useContext, useEffect } from "react"; +import { UseStateContext } from "../Router"; +import { DiscordContext } from "../Router"; + +const SpeechRecognition = + window.SpeechRecognition || window.webkitSpeechRecognition; + +const Discord = () => { + const { + isMike, + setIsMike, + isCamera, + setIsCamera, + FullScreen, + setFullScreen, + setDiscord, + meetingEnd, + setMeetingEnd, + } = useContext(UseStateContext); + + const { + isListening, + setIsListening, + setTranscript, + videoRef, + stream, + setStream, + } = useContext(DiscordContext); + + const recognition = new SpeechRecognition(); + recognition.lang = "ko-KR"; // 한국어 + recognition.continuous = true; // 음성 인식 + recognition.interimResults = true; // 실시간 결과 + + useEffect(() => { + const getMediaStream = async () => { + // 카메라와 마이크 설정을 통해 비디오 스트림을 가져옴 + if (!videoRef.current) return; + + try { + const useStream = await navigator.mediaDevices.getUserMedia({ + video: { + width: { ideal: 1280 }, //해상도 + height: { ideal: 720 }, + frameRate: { ideal: 30 }, //프레임 속도도 + }, + audio: true, + }); + if (stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + } + if (videoRef.current) { + videoRef.current.srcObject = useStream; + } + setStream(useStream); + } catch (error) { + console.error("MediaStream 에러:", error); + } + }; + if (isCamera && !stream) { + getMediaStream(); + } else if (!isCamera && stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + setStream(null); + if (videoRef.current) { + videoRef.current.srcObject = null; + } + } + + return () => { + if (stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + } + }; + }, [isCamera, stream]); + + useEffect(() => { + if (isListening) { + recognition.start(); + } else { + recognition.stop(); + } + recognition.onresult = (e) => { + const newTracript = e.results[0][0].transcript; + setTranscript(newTracript); + }; + recognition.onerror = (error) => { + console.log("음성인식 오류", error.error); + }; + return () => { + recognition.stop(); + }; + }, [isListening]); + + const onClickMike = () => { + setIsMike((preState) => !preState); + setIsListening((preState) => !preState); + }; + + const onClickCamera = () => { + setIsCamera((preState) => !preState); + }; + + const onClickFull = () => { + if (!FullScreen) { + setFullScreen((preState) => !preState); + } + }; + + const onClickEnd = () => { + setMeetingEnd((preState) => !preState); + setDiscord((preState) => !preState); + }; + + return ( + <> + {meetingEnd ? ( +
+
+
+ +
+
+
회의가 종료되었어요.
+

+ BLIP이 회의를 요약해서 알려드릴게요! +

+
+
+
+ ) : ( +
+
+
+ {isCamera ? ( + <> +
+
+
+ +
+
+ + +
+ +
+
+
+ )} + + ); +}; + +export default Discord; diff --git a/blip-project/src/components/FullScreen.jsx b/blip-project/src/components/FullScreen.jsx new file mode 100644 index 0000000..c90ae13 --- /dev/null +++ b/blip-project/src/components/FullScreen.jsx @@ -0,0 +1,205 @@ +import "./CSS/FullScreen.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import { useContext, useState, useEffect } from "react"; +import { UseStateContext } from "../Router"; +import { DiscordContext } from "../Router"; +import Exit from "../svg/Exit.svg"; +import XFullScreen from "../svg/XFullScreen.svg"; +import DisAlarm from "../svg/DisAlarm.svg"; +import NoMike from "../svg/NoMike.svg"; +import NoCamera from "../svg/noCamera.svg"; +import Mike from "../svg/Mike.svg"; +import Camera from "../svg/DisCamera.svg"; + +const SpeechRecognition = + window.SpeechRecognition || window.webkitSpeechRecognition; + +const FullScreenPage = () => { + const { + isMike, + setIsMike, + isCamera, + setIsCamera, + FullScreen, + setFullScreen, + meetingEnd, + setMeetingEnd, + } = useContext(UseStateContext); + + const { + isListening, + setIsListening, + setTranscript, + videoRef, + stream, + setStream, + } = useContext(DiscordContext); + + const recognition = new SpeechRecognition(); + recognition.lang = "ko-KR"; // 한국어 + recognition.continuous = true; // 음성 인식 + recognition.interimResults = true; // 실시간 결과 + + useEffect(() => { + const getMediaStream = async () => { + // 카메라와 마이크 설정을 통해 비디오 스트림을 가져옴 + if (!videoRef.current) return; + + try { + const useStream = await navigator.mediaDevices.getUserMedia({ + video: { + width: { ideal: 1280 }, //해상도 + height: { ideal: 720 }, + frameRate: { ideal: 30 }, //프레임 속도도 + }, + audio: true, + }); + if (stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + } + if (videoRef.current) { + videoRef.current.srcObject = useStream; + } + setStream(useStream); + } catch (error) { + console.error("MediaStream 에러:", error); + } + }; + if (isCamera && !stream) { + getMediaStream(); + } else if (!isCamera && stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + setStream(null); + if (videoRef.current) { + videoRef.current.srcObject = null; + } + } + + return () => { + if (stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + } + }; + }, [isCamera, stream]); + + useEffect(() => { + if (isListening) { + recognition.start(); + } else { + recognition.stop(); + } + recognition.onresult = (e) => { + const newTracript = e.results[0][0].transcript; + setTranscript(newTracript); + }; + recognition.onerror = (error) => { + console.log("음성인식 오류", error.error); + }; + return () => { + recognition.stop(); + }; + }, [isListening]); + + const [peopleCount, setPeopleCount] = useState(0); + + const gridStyle = { + display: "grid", + placeItems: "center", + gridTemplateColumns: `repeat(${peopleCount}, 1fr)`, + gap: "10px", + width: "100%", + height: "90%", + }; + + const addPerson = () => { + setPeopleCount((prev) => prev + 1); + console.log(peopleCount); + }; + const removePerson = () => setPeopleCount((prev) => Math.max(prev - 1, 1)); + + const onClickFull = () => { + if (FullScreen) setFullScreen((preState) => !preState); + }; + + const onClickMike = () => { + setIsMike((preState) => !preState); + setIsListening((preState) => !preState); + }; + + const onClickCamera = () => { + setIsCamera((preState) => !preState); + }; + + const onClickMeetingEnd = () => { + if (!meetingEnd) { + setMeetingEnd((preState) => !preState); + setFullScreen((preState) => !preState); + } + }; + + return ( +
+
+ {Array.from({ length: peopleCount }).map((_, index) => ( + <> +
+ {isCamera ? ( + <> +
+ + ))} +
+
+
+ + + + + +
+
+ +
+
+
+ ); +}; + +export default FullScreenPage; diff --git a/blip-project/src/components/Modal/ModalMeeting.jsx b/blip-project/src/components/Modal/ModalMeeting.jsx new file mode 100644 index 0000000..e44d9ec --- /dev/null +++ b/blip-project/src/components/Modal/ModalMeeting.jsx @@ -0,0 +1,178 @@ +import "../CSS/ModalMeeting.css"; +import { typography } from "../../fonts/fonts"; +import { color } from "../../style/color"; +import { useState, useContext } from "react"; +import ESC from "../../svg/ESC.svg"; +import { UseStateContext } from "../../Router"; +import { DiscordContext } from "../../Router"; + +const ModalMeeting = ({ onClose }) => { + const [isTopic, setIsTopic] = useState(""); + const [isCheckMike, setIsCheckMike] = useState(false); + const [isCheckCamera, setIsCheckCamera] = useState(false); + const { + isMike, + setIsMike, + isCamera, + setIsCamera, + setting, + setSetting, + isAlarm, + setIsAlarm, + isLetter, + setIsLetter, + isFeedback, + setIsFeedback, + isKeyword, + setIsKeyword, + discord, + setDiscord, + } = useContext(UseStateContext); + const { setIsListening } = useContext(DiscordContext); + + const onClickDiscord = () => { + if (!discord) { + setDiscord((preState) => !preState); + onClose(); + if (isLetter === true) { + setIsLetter((preState) => !preState); + } else if (isAlarm) { + setIsAlarm((preState) => !preState); + } else if (setting === true) { + setSetting((preState) => !preState); + } else if (isFeedback === true) { + setIsFeedback((preState) => !preState); + } else if (isKeyword === true) { + setIsKeyword((preState) => !preState); + } + } + }; + + const onChageTopic = (e) => { + setIsTopic(e.target.value); + console.log(e.target.value); + }; + + const onChnageCheckMike = () => { + setIsCheckMike(!isCheckMike); + setIsMike((prev) => !prev); + }; + const onChnageCheckCamera = () => { + setIsCheckCamera(!isCheckCamera); + setIsCamera((prev) => !prev); + }; + + return ( +
+
+
+
+

회의 시작하기

+

+ BLIP은 실시간 요약, 키워드 기록, 참여율 분석으로 더 스마트하고 + 효율적인 회의를 제공합니다. +

+
+ +
+
+
+
+ 회의 주제 +
+

+ 회의 주제를 정해주세요! +

+ +
+
+
+
+ 설정 +
+

+ 무엇을 허용하고 입장하실건가요? +

+
+
+
+

마이크

+ +
+
+

카메라

+ +
+
+
+
+
+ {isTopic || isCheckMike || isCheckCamera ? ( + + ) : ( + + )} +
+
+
+ ); +}; + +export default ModalMeeting; diff --git a/blip-project/src/components/OwnerTeam.jsx b/blip-project/src/components/OwnerTeam.jsx new file mode 100644 index 0000000..f2c276a --- /dev/null +++ b/blip-project/src/components/OwnerTeam.jsx @@ -0,0 +1,119 @@ +import "./CSS/OwnerTeam.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import { useRef, useState, useContext } from "react"; +import { useNavigate } from "react-router-dom"; +import { TeamDel } from "./MainTeamOwner"; +import { UseStateContext } from "../Router"; +import ModalDel from "./Modal/ModalDel"; +import Camera from "../svg/camera.svg"; + +const OwnerTeam = () => { + const fileInputImg = useRef(null); + const [image, setImage] = useState(null); + const [inputFont, setInputFont] = useState(""); + const [isOpenModal, setIsOpenModal] = useState(false); + const { itemContent, itemId, itemImage } = useContext(TeamDel); + const { setSetting } = useContext(UseStateContext); + const nav = useNavigate(); + + const openModal = () => setIsOpenModal(true); + const closeModal = () => setIsOpenModal(false); + + const handleImg = (e) => { + const file = e.target.files[0]; + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => { + setImage(reader.result); + }; + }; + + const handleImage = () => { + fileInputImg.current.click(); + }; + + const onChnageInput = (e) => { + setInputFont(e.target.value); + }; + + const CreateImg = () => { + nav("/TeamOwner", { state: { image: image, itemId } }); + setSetting((preState) => !preState); + }; + + return ( +
+
+
+ 설정 +
+
+
+ 팀 스페이스 이미지 수정 +
+

+ 팀원들에게 보여질 이미지를 설정하세요. +

+
+
+ {image ? ( + + ) : itemImage ? ( + Click to upload + ) : ( + Click to upload + )} + +
+
+
+ 팀 스페이스 이름 수정 +
+

+ 팀원들에게 보여질 팀스페이스 이름을 설정하세요. +

+
+
+ +
+
+
+ {image || inputFont ? ( + + ) : ( + + )} + +
+ {isOpenModal && } +
+ ); +}; + +export default OwnerTeam; From e47bd15598f0a09c46d7cf984541d5bbbf130fff Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Mar 2025 22:53:49 +0900 Subject: [PATCH 17/75] sidevar --- .../src/components/CSS/sidebarTeam.css | 28 +++- blip-project/src/components/sidebarTeam.jsx | 121 +++++++++++++++--- 2 files changed, 128 insertions(+), 21 deletions(-) diff --git a/blip-project/src/components/CSS/sidebarTeam.css b/blip-project/src/components/CSS/sidebarTeam.css index b58ebef..c7fdfc5 100644 --- a/blip-project/src/components/CSS/sidebarTeam.css +++ b/blip-project/src/components/CSS/sidebarTeam.css @@ -1,17 +1,22 @@ .MainSTJoinNo { height: 100%; - width: 5%; + width: 6%; margin-top: 0.5%; padding-top: 0.5%; padding-right: 10px; padding-left: 20px; gap: 2%; - overflow-y: auto; + overflow-y: scroll; +} + +.MainSTJoinNo::-webkit-scrollbar { + width: 1px; + overflow: hidden; } .content-item { - margin-bottom: 15%; - min-width: 90%; + margin-bottom: 20%; + max-width: 90%; min-height: 2%; aspect-ratio: 1 / 1; border-radius: 12px; @@ -22,12 +27,23 @@ } .content-item-plus { - width: 100%; + width: 90%; display: flex; justify-content: center; aspect-ratio: 1/1; box-shadow: none; border: none; border-radius: 12px; - padding-bottom: 10%; + margin-bottom: 20%; +} + +.content-item-image { + margin-bottom: 15%; + min-width: 90%; + min-height: 2%; + aspect-ratio: 1 / 1; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; } diff --git a/blip-project/src/components/sidebarTeam.jsx b/blip-project/src/components/sidebarTeam.jsx index b2590d7..89575b6 100644 --- a/blip-project/src/components/sidebarTeam.jsx +++ b/blip-project/src/components/sidebarTeam.jsx @@ -1,15 +1,90 @@ import "./CSS/sidebarTeam.css"; import { typography } from "../fonts/fonts"; import { color } from "../style/color"; -import { useContext } from "react"; +import { useContext, useEffect, useState } from "react"; import { SidebarContext } from "../Router"; +import { UseStateContext } from "../Router"; +import { TeamDel } from "./MainTeamOwner"; import { useNavigate } from "react-router-dom"; -import { useRef, useEffect } from "react"; const SidebarTeam = () => { const nav = useNavigate(); const { todos } = useContext(SidebarContext); - const scrollRef = useRef(null); + const { image = "", itemId = null } = useContext(TeamDel) || {}; + // const [isFirstLoad, setIsFirstLoad] = useState(false); + + // const [targetId, setTargetId] = useState(null); // targetId 상태 추가 + + // const todoIds = todos.map((todo) => todo.id).join(","); + + // useEffect(() => { + // if (!isFirstLoad && targetId !== null) { + // const targetItem = todos.find((item) => item.id === targetId); + // console.log("targetId",targetItem.id) + // if (targetItem) { + // if (targetItem.id % 2 === 0) { + // nav("/TeamOwner", { + // state: { + // itemContent: + // typeof targetItem.content === "string" + // ? targetItem.content + // : String(targetItem.content), + // itemId: targetItem.id, + // itemImage: typeof image === "string" ? image : "", // image가 문자열일 경우만 전달 + // }, + // }); + // console.log(targetItem.id); + // } else { + // nav("/TeamJoin", { state: {} }); + // } + // } + // setIsFirstLoad(true); // 네비게이션이 끝난 후 isFirstLoad를 true로 설정 + // } + // }, [targetId, todos, isFirstLoad, nav, image]); // targetId가 변경될 때만 실행 + + const { + setting, + setSetting, + isAlarm, + setIsAlarm, + isLetter, + setIsLetter, + isFeedback, + setIsFeedback, + isKeyword, + setIsKeyword, + } = useContext(UseStateContext); + + const onClickEffect = (item) => { + // setTargetId(item.id) + if (item.isPlus) { + nav("/", { state: {} }); + } else { + if (item.id % 2 == 0) { + nav("/TeamOwner", { + state: { + itemContent: item.content, + itemId: item.id, + itemImage: image, + }, + }); + console.log(item.id); + } else if (item.id % 2 == 1) { + nav("/TeamJoin", { state: {} }); + } + } + if (isLetter === true) { + setIsLetter((preState) => !preState); + } else if (setting === true) { + setSetting((preState) => !preState); + } else if (isAlarm === true) { + setIsAlarm((preState) => !preState); + } else if (isKeyword === true) { + setIsKeyword((preState) => !preState); + } else if (isFeedback === true) { + setIsFeedback((preState) => !preState); + } + }; return ( <> @@ -18,22 +93,38 @@ const SidebarTeam = () => { todos.map((item) => (
{ - if (item.isPlus) { - nav("/", { state: {} }); - } else { - nav("/TeamJoin", { state: {} }); - } - }} + className={`content-item${ + item.isPlus + ? "-plus" + : image && item.id === itemId + ? "-image" + : "" + }`} + onClick={() => onClickEffect(item)} style={{ ...typography.Header2, - backgroundColor: item.isPlus - ? "transparent" - : color.GrayScale[1], + backgroundColor: + item.isPlus || (image && item.id === itemId) + ? "transparent" + : color.GrayScale[1], }} > - {item.content} + + {item.isPlus ? ( + item.content + ) : image && item.id === itemId ? ( + + ) : ( + item.content + )} +
)) ) : ( From d5b5281f67ee9daf58484f82e4c73ff62f7698d3 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Mar 2025 22:54:12 +0900 Subject: [PATCH 18/75] Modal --- blip-project/src/components/CSS/ModalDel.css | 46 +++++++++++++++++++ .../src/components/{ => Modal}/Modal.jsx | 8 ++-- .../components/{ => Modal}/ModalCreate.jsx | 30 +++++++----- .../src/components/Modal/ModalDel.jsx | 45 ++++++++++++++++++ .../src/components/{ => Modal}/ModalJoin.jsx | 27 +++++++---- 5 files changed, 132 insertions(+), 24 deletions(-) create mode 100644 blip-project/src/components/CSS/ModalDel.css rename blip-project/src/components/{ => Modal}/Modal.jsx (96%) rename blip-project/src/components/{ => Modal}/ModalCreate.jsx (80%) create mode 100644 blip-project/src/components/Modal/ModalDel.jsx rename blip-project/src/components/{ => Modal}/ModalJoin.jsx (82%) diff --git a/blip-project/src/components/CSS/ModalDel.css b/blip-project/src/components/CSS/ModalDel.css new file mode 100644 index 0000000..685ddfe --- /dev/null +++ b/blip-project/src/components/CSS/ModalDel.css @@ -0,0 +1,46 @@ +.modalDel-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.25); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modalDel-content { + width: 30%; + height: 30%; + background-color: white; + border-radius: 24px; + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 20%; +} + +.modalDel-title { + display: flex; + justify-content: space-between; + padding: 3%; +} + +.modalDel-button-main { + width: 100%; + height: 20%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.modalDel-button { + width: 90%; + height: 100%; + color: white; + border-radius: 12px; + border: none; +} diff --git a/blip-project/src/components/Modal.jsx b/blip-project/src/components/Modal/Modal.jsx similarity index 96% rename from blip-project/src/components/Modal.jsx rename to blip-project/src/components/Modal/Modal.jsx index 5e49e3a..186cfc3 100644 --- a/blip-project/src/components/Modal.jsx +++ b/blip-project/src/components/Modal/Modal.jsx @@ -1,7 +1,7 @@ -import "./CSS/Modal.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; -import ESC from "../svg/ESC.svg" +import "../CSS/Modal.css" +import { typography } from "../../fonts/fonts"; +import { color } from "../../style/color"; +import ESC from "../../svg/ESC.svg" import { useState } from "react"; import ModalCreate from "./ModalCreate"; import ModalJoin from "./ModalJoin"; diff --git a/blip-project/src/components/ModalCreate.jsx b/blip-project/src/components/Modal/ModalCreate.jsx similarity index 80% rename from blip-project/src/components/ModalCreate.jsx rename to blip-project/src/components/Modal/ModalCreate.jsx index a1c9ba2..664bb7a 100644 --- a/blip-project/src/components/ModalCreate.jsx +++ b/blip-project/src/components/Modal/ModalCreate.jsx @@ -1,34 +1,39 @@ -import "./CSS/ModalCreate.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; -import ESC from "../svg/ESC.svg"; -import { useState, useContext, useRef } from "react"; +import "../CSS/ModalCreate.css"; +import { typography } from "../../fonts/fonts"; +import { color } from "../../style/color"; +import ESC from "../../svg/ESC.svg"; +import { useState, useContext, useRef, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import { SidebarContext } from "../Router"; +import { SidebarContext } from "../../Router"; const ModalCreate = ({ onClose }) => { - const { onCreateSidevar, dispatch } = useContext(SidebarContext); + const { dispatch } = useContext(SidebarContext); const [content, setContent] = useState(""); const submitRef = useRef(); + const nav = useNavigate(); const onChangeInput = (e) => { setContent(e.target.value); console.log(e.target.value); }; - const nav = useNavigate(); - const onClickCreate = () => { if (content !== "") { - nav("/TeamJoin", { state: { content } }); - dispatch.onCreateSidevar(content); - setContent("") + nav("/TeamOwner", { state: { content } }); + dispatch.onCreateone(content); + setContent(""); } else if (content === "") { submitRef.current.focus(); return; } }; + const onKeyDownCreate = (e) => { + if (e.key === "Enter") { + onClickCreate(); + } + }; + return (
@@ -59,6 +64,7 @@ const ModalCreate = ({ onClose }) => { placeholder="팀스페이스의 이름을 작성해주세요." value={content} type="text" + onKeyDown={onKeyDownCreate} onChange={onChangeInput} ref={submitRef} > diff --git a/blip-project/src/components/Modal/ModalDel.jsx b/blip-project/src/components/Modal/ModalDel.jsx new file mode 100644 index 0000000..3113583 --- /dev/null +++ b/blip-project/src/components/Modal/ModalDel.jsx @@ -0,0 +1,45 @@ +import "../CSS/ModalDel.css"; +import { typography } from "../../fonts/fonts"; +import { color } from "../../style/color"; +import ESC from "../../svg/ESC.svg"; +import { useState, useContext } from "react"; +import { SidebarContext } from "../../Router"; +import { TeamDel } from "../MainTeamOwner"; +import { useNavigate } from "react-router-dom"; + +const ModalDel = ({ onClose }) => { + const { dispatch } = useContext(SidebarContext); + const { itemId } = useContext(TeamDel); + const nav = useNavigate(); + + const ClickDel = () => { + if (itemId) { + dispatch.onDel(itemId); + nav("/", { state: {} }); + } + }; + + return ( +
+
+
+

+ 정말 스페이스를 삭제 하실건가요? +

+ +
+
+ +
+
+
+ ); +}; + +export default ModalDel; diff --git a/blip-project/src/components/ModalJoin.jsx b/blip-project/src/components/Modal/ModalJoin.jsx similarity index 82% rename from blip-project/src/components/ModalJoin.jsx rename to blip-project/src/components/Modal/ModalJoin.jsx index b577557..20be333 100644 --- a/blip-project/src/components/ModalJoin.jsx +++ b/blip-project/src/components/Modal/ModalJoin.jsx @@ -1,19 +1,22 @@ -import "./CSS/ModalJoin.css"; -import { useState } from "react"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; -import ESC from "../svg/ESC.svg"; +import "../CSS/ModalJoin.css"; +import { typography } from "../../fonts/fonts"; +import { color } from "../../style/color"; +import ESC from "../../svg/ESC.svg"; +import { useState, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; +import { SidebarContext } from "../../Router"; const ModalJoin = ({ onClose }) => { const [isInput, setIsInput] = useState(""); const [isValidURL, setIsValidURL] = useState(true); // URL 유효성 상태 - const nav = useNavigate(); - + const { onCreatedouble, dispatch } = useContext(SidebarContext); + const [content, setContent] = useState(""); + const submitRef = useRef(); + const onChangeInput = (e) => { const value = e.target.value; setIsInput(value); - + // URL 유효성 검사 try { new URL(value); // URL 객체로 변환 @@ -23,9 +26,16 @@ const ModalJoin = ({ onClose }) => { } }; + const nav = useNavigate(); + const onClickUrl = () => { if (isValidURL) { nav("/TeamJoin", { state: { isInput } }); + dispatch.onCreatedouble(content); + setContent("") + }else if(content === ""){ + submitRef.current.focus(); + return; } }; @@ -66,6 +76,7 @@ const ModalJoin = ({ onClose }) => { value={isInput} type="text" onChange={onChangeInput} + ref={submitRef} style={{ borderColor: isValidURL ? "#F2F2F2" : "red", // 유효성에 따라 색상 변경 }} From f729122b3df35a0da7b9ea2348b4c78e45dc4cb3 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Mar 2025 22:54:28 +0900 Subject: [PATCH 19/75] main --- .../src/components/CSS/MainTeamOwner.css | 20 ++ .../src/components/CSS/MeetingContent.css | 14 ++ .../src/components/CSS/MeetingTeam.css | 17 -- blip-project/src/components/CSS/Member.css | 22 ++- blip-project/src/components/CSS/UserStart.css | 100 ++++++++++ blip-project/src/components/MainTeam.jsx | 2 +- .../src/components/MainTeamJoinNo.jsx | 11 +- blip-project/src/components/MainTeamOwner.jsx | 53 +++++ .../src/components/MeetingContent.jsx | 15 ++ blip-project/src/components/MeetingTeam.jsx | 72 +++++-- blip-project/src/components/Member.jsx | 79 ++++++-- blip-project/src/components/StartTeam.jsx | 118 ++--------- .../src/components/StartTeamJoinNo.jsx | 12 +- blip-project/src/components/UserStart.jsx | 183 ++++++++++++++++++ 14 files changed, 569 insertions(+), 149 deletions(-) create mode 100644 blip-project/src/components/CSS/MainTeamOwner.css create mode 100644 blip-project/src/components/CSS/MeetingContent.css create mode 100644 blip-project/src/components/CSS/UserStart.css create mode 100644 blip-project/src/components/MainTeamOwner.jsx create mode 100644 blip-project/src/components/MeetingContent.jsx create mode 100644 blip-project/src/components/UserStart.jsx diff --git a/blip-project/src/components/CSS/MainTeamOwner.css b/blip-project/src/components/CSS/MainTeamOwner.css new file mode 100644 index 0000000..ad61dd0 --- /dev/null +++ b/blip-project/src/components/CSS/MainTeamOwner.css @@ -0,0 +1,20 @@ +*{ + margin: 0; + padding: 0; + overflow: hidden; + +} + +.Main-Team-owner { + max-width: 100%; + height: 90vh; + display: flex; + gap: 20px; +} + +.Main-Team-Date-owner { + width: 35%; + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git a/blip-project/src/components/CSS/MeetingContent.css b/blip-project/src/components/CSS/MeetingContent.css new file mode 100644 index 0000000..aaf0a83 --- /dev/null +++ b/blip-project/src/components/CSS/MeetingContent.css @@ -0,0 +1,14 @@ +.meeting-content { + width: 100%; + height: 80%; + display: flex; + justify-content: center; + +} + +.meeting-content-main { + display: flex; + align-items: center; + justify-content: center; + color: var(--gray-400); +} \ No newline at end of file diff --git a/blip-project/src/components/CSS/MeetingTeam.css b/blip-project/src/components/CSS/MeetingTeam.css index f407f5d..fabc136 100644 --- a/blip-project/src/components/CSS/MeetingTeam.css +++ b/blip-project/src/components/CSS/MeetingTeam.css @@ -10,26 +10,9 @@ padding: 10px; } -.MMeetingT { - width: 100%; - height: 80%; - display: flex; - justify-content: center; - -} - -.MeetingT { - display: flex; - align-items: center; - justify-content: center; - color: var(--gray-400); -} - .MeetingTButton { width: 100%; height: 20%; border-radius: 12px; - color: var(--gray-400); - background-color: var(--gray-50); border: none; } diff --git a/blip-project/src/components/CSS/Member.css b/blip-project/src/components/CSS/Member.css index 1e415ce..62fdd77 100644 --- a/blip-project/src/components/CSS/Member.css +++ b/blip-project/src/components/CSS/Member.css @@ -11,6 +11,25 @@ border-bottom: 1px solid #cacaca; } +.member-header-TeamName-owner { + width: 100%; + height: 65%; + color: #ffff; + background-color: var(--main-400); + display: flex; + align-items: center; + justify-content: space-around; +} + +.member-header-member-owner{ + width: 100%; + height: 35%; + display: flex; + align-items: center; + justify-content: space-around; + gap: 20%; +} + .member-header-TeamName { width: 100%; height: 65%; @@ -18,8 +37,7 @@ background-color: var(--main-400); display: flex; align-items: center; - padding-left: 10px; - + padding-left: 10px; } .member-header-member { diff --git a/blip-project/src/components/CSS/UserStart.css b/blip-project/src/components/CSS/UserStart.css new file mode 100644 index 0000000..302e011 --- /dev/null +++ b/blip-project/src/components/CSS/UserStart.css @@ -0,0 +1,100 @@ +.council { + width: 85%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} + +.council-keyword { + width: 90%; + height: 32%; + border-radius: 12px; + background-image: url("/src/svg/council.svg"); + display: flex; + flex-direction: column; + justify-content: end; +} + +.council-keyword-main { + width: 50%; + height: 35%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 20px; +} + +.council-keyword-main button { + width: 22%; + height: 35%; + color: #ffff; + background-color: var(--main-400); + border: none; + border-radius: 60px; +} + +.council-feedback { + width: 90%; + height: 20%; + border-radius: 12px; + border: 1px solid var(--gray-200); + display: flex; + justify-content: space-between; + align-items: center; +} + +.council-feedback-main { + width: auto; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + padding-left: 20px; +} + +.council-feedback-main button { + width: 45%; + height: 20%; + color: #ffff; + background-color: var(--main-400); + border: none; + border-radius: 60px; +} + +.council-feedback img { + height: 100%; +} + +.council-graph { + width: 90%; + height: 38%; + border-radius: 12px; + border: 1px solid var(--gray-200); + display: flex; + justify-content: space-between; +} + +.council-graph-main { + width: 70%; + height: 100%; +} + +.council-graph-font { + padding: 15px; +} + +.council-graph-graph { + width: 50%; + height: 70%; + display: flex; + align-items: center; + justify-self: center; +} + +.council-graph img { + width: 29%; + height: 100%; + object-fit: cover; +} diff --git a/blip-project/src/components/MainTeam.jsx b/blip-project/src/components/MainTeam.jsx index 4ad44c2..5b89f39 100644 --- a/blip-project/src/components/MainTeam.jsx +++ b/blip-project/src/components/MainTeam.jsx @@ -8,7 +8,7 @@ import MeetingTeamJoinNo from "./MeetingTeam"; const MainTeam = () => { return ( <> - +
diff --git a/blip-project/src/components/MainTeamJoinNo.jsx b/blip-project/src/components/MainTeamJoinNo.jsx index 49ee43b..47bff92 100644 --- a/blip-project/src/components/MainTeamJoinNo.jsx +++ b/blip-project/src/components/MainTeamJoinNo.jsx @@ -1,17 +1,22 @@ import "./CSS/MainTeamJoinNo.css"; import DateTeamJoinNo from "./DateTeam"; -import HeaderTeam from "./HeaderTeam" +import HeaderTeam from "./HeaderTeam"; import SidebarTeam from "./sidebarTeam"; import StartTeamJoinNo from "./StartTeamJoinNo"; -import MeetingTeamJoinNo from "./MeetingTeam" +import MeetingTeamJoinNo from "./MeetingTeam"; +import Alarm from "./AlarmTeam"; +import Letter from "./LetterTeam"; +import { useContext } from "react"; +import { UseStateContext } from "../Router"; const MTeamJoinNo = () => { + const { isAlarm, isLetter } = useContext(UseStateContext); return ( <>
- + {isAlarm ? : isLetter ? : }
diff --git a/blip-project/src/components/MainTeamOwner.jsx b/blip-project/src/components/MainTeamOwner.jsx new file mode 100644 index 0000000..052c5da --- /dev/null +++ b/blip-project/src/components/MainTeamOwner.jsx @@ -0,0 +1,53 @@ +import "./CSS/MainTeamOwner.css"; +import DateTeamJoinNo from "./DateTeam"; +import HeaderTeam from "./HeaderTeam"; +import SidebarTeam from "./sidebarTeam"; +import StartTeam from "./StartTeam"; +import MeetingTeamJoinNo from "./MeetingTeam"; +import FullScreenPage from "./FullScreen"; +import { useLocation } from "react-router-dom"; +import { SidebarContext } from "../Router"; +import { UseStateContext } from "../Router"; +import { createContext, useState, useContext, useEffect } from "react"; + +export const TeamDel = createContext(); +export const FindId = createContext(); + +const MainTeamOwner = () => { + const location = useLocation(); + const { itemContent, itemId, image, itemImage } = location.state || {}; + const { todos } = useContext(SidebarContext); + const [filteredItem, setFilteredItem] = useState(null); + const { FullScreen } = useContext(UseStateContext); + + useEffect(() => { + const matchingId = todos.find((item) => item.id === itemId); + setFilteredItem(matchingId); + }, [todos, itemId]); + + return ( + <> + + + {FullScreen ? ( + + ) : ( + <> + +
+ + +
+ + +
+
+ + )} + + + + ); +}; + +export default MainTeamOwner; diff --git a/blip-project/src/components/MeetingContent.jsx b/blip-project/src/components/MeetingContent.jsx new file mode 100644 index 0000000..5c66d0f --- /dev/null +++ b/blip-project/src/components/MeetingContent.jsx @@ -0,0 +1,15 @@ +import "./CSS/MeetingContent.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; + +const MeetingContent = () => { + return ( +
+
+ 아직 기록된 회의 내용이 없어요 +
+
+ ); +}; + +export default MeetingContent; diff --git a/blip-project/src/components/MeetingTeam.jsx b/blip-project/src/components/MeetingTeam.jsx index 64d8e6f..79f1442 100644 --- a/blip-project/src/components/MeetingTeam.jsx +++ b/blip-project/src/components/MeetingTeam.jsx @@ -1,8 +1,25 @@ -import "./CSS/MeetingTeam.css" +import "./CSS/MeetingTeam.css"; import { color } from "../style/color"; import { typography } from "../fonts/fonts"; +import { useState, useContext } from "react"; +import { useLocation } from "react-router-dom"; +import { UseStateContext } from "../Router"; +import ModalMeeting from "./Modal/ModalMeeting"; +import MettingContent from "./MeetingContent"; const MeetingTeam = () => { + const location = useLocation(); + const [isModalOpen, setIsModalOpen] = useState(false); + const { discord, meetingEnd, setMeetingEnd } = useContext(UseStateContext); + const modalOpen = () => setIsModalOpen(true); + const modalClose = () => setIsModalOpen(false); + + const onClickMeetingEnd = () => { + if (!meetingEnd) { + setMeetingEnd((preState) => !preState); + } + }; + return ( <>
{
지난 회의 내용 요약
-
-
- 아직 기록된 회의 내용이 없어요 -
-
+
- + {discord ? ( + + ) : location.pathname === "/TeamOwner" ? ( + + ) : ( + + )} + {isModalOpen && } ); }; diff --git a/blip-project/src/components/Member.jsx b/blip-project/src/components/Member.jsx index 6921866..6601686 100644 --- a/blip-project/src/components/Member.jsx +++ b/blip-project/src/components/Member.jsx @@ -2,23 +2,76 @@ import "./CSS/Member.css"; import { color } from "../style/color"; import { typography } from "../fonts/fonts"; import MemberSVG from "../svg/member.svg"; +import { useEffect, useContext, useState } from "react"; +import { useLocation } from "react-router-dom"; +import { TeamDel } from "./MainTeamOwner"; +import { UseStateContext } from "../Router"; +import Setting from "../svg/setting.svg"; +import Plus from "../svg/plus.svg"; + +const Member = ({ filterId }) => { + const location = useLocation(); + const { itemId } = useContext(TeamDel) || {}; + const { + setSetting, + isAlarm, + setIsAlarm, + isLetter, + setIsLetter, + isFeedback, + setIsFeedback, + isKeyword, + setIsKeyword, + } = useContext(UseStateContext); + + const onClickSetting = () => { + setSetting((preState) => !preState); + if (isAlarm === true) { + setIsAlarm((preState) => !preState); + } else if (isLetter === true) { + setIsLetter((preState) => !preState); + } else if (isFeedback === true) { + setIsFeedback((preState) => !preState); + } else if (isKeyword === true) { + setIsKeyword((preState) => !preState); + } + }; -const Member = () => { return ( -
-
-
- Team Blip -
-
- + <> +
+
+ {itemId % 2 === 0 || filterId % 2 === 0 ? ( + <> +
+ Team Blip + +
+
+ + +
+ + ) : ( + <> +
+ Team Blip +
+
+ +
+ + )}
+
-
-
+ ); }; diff --git a/blip-project/src/components/StartTeam.jsx b/blip-project/src/components/StartTeam.jsx index 1d3e52d..abd90e0 100644 --- a/blip-project/src/components/StartTeam.jsx +++ b/blip-project/src/components/StartTeam.jsx @@ -1,112 +1,32 @@ import "./CSS/StartTeam.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; import Member from "./Member"; -import Feedback from "../svg/feedback.svg"; -import Graph from "../svg/Graph.svg" -import React from "react"; -import ReactApexChart from "react-apexcharts"; +import UserStart from "./UserStart"; +import OwnerTeam from "./OwnerTeam"; +import { useContext } from "react"; +import { UseStateContext } from "../Router"; +import Alarm from "./AlarmTeam"; +import Letter from "./LetterTeam"; +import Discord from "./Discord"; const StartTeam = () => { - const [state, setState] = React.useState({ - series: [44], - options: { - chart: { - type: "donut", - }, - responsive: [ - { - breakpoint: 480, - options: { - chart: { - width: 200, - }, - legend: { - position: "bottom", - }, - }, - }, - ], - }, - }); + const { setting, isAlarm, isLetter, discord } = useContext(UseStateContext); return (
-
-
-
-
- 회의 일정 및 키워드 요약 확인하기 -
-

- 진행한 회의를 바탕으로 캘린더에 키워드를 추가했어요! -

- -
-
-
-
-
-
회의 피드백 확인하기
-

- 진행한 회의를 피드백 해드릴게요! -

-
- -
- -
-
-
-
-
회의 참여율 확인하기
-

- 가장 최근 회의율은 95%입니다 -

-
-
- -
-
-
- -
-
+ {setting ? ( + + ) : isAlarm ? ( + + ) : isLetter ? ( + + ) : discord ? ( + + ) : ( + + )}
); - }; export default StartTeam; - diff --git a/blip-project/src/components/StartTeamJoinNo.jsx b/blip-project/src/components/StartTeamJoinNo.jsx index 0df08bd..e4df31a 100644 --- a/blip-project/src/components/StartTeamJoinNo.jsx +++ b/blip-project/src/components/StartTeamJoinNo.jsx @@ -1,14 +1,18 @@ import "./CSS/StartTeamJoinNo.CSS"; import { typography } from "../fonts/fonts"; import { color } from "../style/color"; -import Modal from "./Modal"; -import { useState } from "react"; +import Modal from "./Modal/Modal"; +import { useState, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; +import { SidebarContext } from "../Router"; const StartTeamJoinNo = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [urlInput, setUrlInput] = useState(""); const [isUrl, setIsUrl] = useState(false); + const { dispatch } = useContext(SidebarContext); + const [content, setContent] = useState(""); + const submitRef = useRef(); const onChangeUrlInput = (e) => { const urlValue = e.target.value; @@ -26,6 +30,8 @@ const StartTeamJoinNo = () => { const handleClick = () => { if (isUrl) { nav("/TeamJoin", { state: { urlInput } }); + dispatch.onCreatedouble(content); + setContent(""); } else { openModal(); } @@ -54,7 +60,9 @@ const StartTeamJoinNo = () => { placeholder="링크 주소를 입력하세요." value={urlInput} type="text" + onKeyDown={handleKeyDown} onChange={onChangeUrlInput} + ref={submitRef} style={{ ...typography.Header3, borderColor: isUrl ? "#616064" : "red", diff --git a/blip-project/src/components/UserStart.jsx b/blip-project/src/components/UserStart.jsx new file mode 100644 index 0000000..d70d841 --- /dev/null +++ b/blip-project/src/components/UserStart.jsx @@ -0,0 +1,183 @@ +import "./CSS/UserStart.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; +import FeedbackSvg from "../svg/feedback.svg"; +import Graph from "../svg/Graph.svg"; +import React from "react"; +import ReactApexChart from "react-apexcharts"; +import { useContext } from "react"; +import { UseStateContext } from "../Router"; +import Feedback from "./Feedback"; +import Keyword from "./keyword"; + +const UserStart = () => { + const [state, setState] = React.useState({ + series: [5, 95], // 두 개의 값을 사용 + options: { + chart: { + type: "donut", + }, + labels: [], // 레이블을 빈 배열로 설정하여 외부 레이블 제거 + plotOptions: { + pie: { + donut: { + size: "60%", // 도넛 크기 설정 + labels: { + show: true, // 가운데 값 표시 + name: { + show: false, // 이름은 숨김 + }, + value: { + show: true, // 값 표시 + fontSize: "22px", // 값의 폰트 크기 + fontWeight: "bold", // 값의 폰트 굵기 + color: color.Main[4], // 값의 색상 + }, + total: { + show: true, // 총합 표시하지 않음 + label: "Total", // 이 부분은 총합 레이블 설정 + formatter: function (w) { + return `${w.globals.series[1]}%`; // 첫 번째 값만 표시 + }, + }, + }, + }, + }, + }, + dataLabels: { + enabled: false, // 데이터 라벨을 비활성화하여 값만 나타나게 함 + }, + legend: { + show: false, + }, + colors: [color.Main[1], color.Main[4]], + }, + }); + + const { + setting, + setSetting, + isAlarm, + setIsAlarm, + isLetter, + setIsLetter, + isFeedback, + setIsFeedback, + isKeyword, + setIsKeyword, + } = useContext(UseStateContext); + + const onClickFeedback = () => { + setIsFeedback((preState) => !preState); + if (isLetter === true) { + setIsLetter((preState) => !preState); + } else if (setting === true) { + setSetting((preState) => !preState); + } else if (isAlarm === true) { + setIsAlarm((preState) => !preState); + } else if (isKeyword === true) { + setIsKeyword((preState) => !preState); + } + }; + + const onClickKeyword = () => { + setIsKeyword((preState) => !preState); + if (isLetter === true) { + setIsLetter((preState) => !preState); + } else if (setting === true) { + setSetting((preState) => !preState); + } else if (isAlarm === true) { + setIsAlarm((preState) => !preState); + } else if (isFeedback === true) { + setIsFeedback((preState) => !preState); + } + }; + + return ( + <> + {isFeedback ? ( + + ) : isKeyword ? ( + + ) : ( +
+
+
+
+ 회의 일정 및 키워드 요약 확인하기 +
+

+ 진행한 회의를 바탕으로 캘린더에 키워드를 추가했어요! +

+ +
+
+
+
+
+
회의 피드백 확인하기
+

+ 진행한 회의를 피드백 해드릴게요! +

+
+ +
+ +
+
+
+
+
회의 참여율 확인하기
+

+ 가장 최근 회의율은 95%입니다 +

+
+
+ +
+
+
+ +
+
+ )} + + ); +}; + +export default UserStart; From 61b231445473db284e3b0fc69302c099bd92dae2 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Mar 2025 22:54:42 +0900 Subject: [PATCH 20/75] =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=20X?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blip-project/src/components/CSS/Feedback.css | 23 ++++++++ blip-project/src/components/Feedback.jsx | 16 ++++++ blip-project/src/components/HeaderTeam.jsx | 59 ++++++++++++++++++-- 3 files changed, 92 insertions(+), 6 deletions(-) create mode 100644 blip-project/src/components/CSS/Feedback.css create mode 100644 blip-project/src/components/Feedback.jsx diff --git a/blip-project/src/components/CSS/Feedback.css b/blip-project/src/components/CSS/Feedback.css new file mode 100644 index 0000000..3ea35dd --- /dev/null +++ b/blip-project/src/components/CSS/Feedback.css @@ -0,0 +1,23 @@ +* { + margin: 0; + padding: 0; + overflow: hidden; +} + +.Feedback-p { + width: 67%; + border-radius: 15px; + border: 1px solid #cacaca; + display: flex; + align-items: center; + justify-content: center; +} + +.Feedback-p-font { + width: 85%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + diff --git a/blip-project/src/components/Feedback.jsx b/blip-project/src/components/Feedback.jsx new file mode 100644 index 0000000..cf0230a --- /dev/null +++ b/blip-project/src/components/Feedback.jsx @@ -0,0 +1,16 @@ +import "./CSS/Feedback.css"; +import { typography } from "../fonts/fonts"; +import { color } from "../style/color"; + +const Feedback = () => { + return ( + <> +
+

+ 아직 받은 피드백이 없어요 +

+
+ + ); +}; +export default Feedback; diff --git a/blip-project/src/components/HeaderTeam.jsx b/blip-project/src/components/HeaderTeam.jsx index 5a75c7f..9962134 100644 --- a/blip-project/src/components/HeaderTeam.jsx +++ b/blip-project/src/components/HeaderTeam.jsx @@ -1,17 +1,64 @@ -import "./CSS/HeaderTeam.css" +import "./CSS/HeaderTeam.css"; import Alarm from "../svg/Alarm.svg"; import blackLogo from "../svg/blackLogo.svg"; -import Letter from "../svg/letter.svg" +import Letter from "../svg/letter.svg"; import { useNavigate } from "react-router-dom"; +import { useContext } from "react"; +import { UseStateContext } from "../Router"; const HeaderTeam = () => { - const nav = useNavigate() + const nav = useNavigate(); + const { + setting, + setSetting, + isAlarm, + setIsAlarm, + isLetter, + setIsLetter, + isFeedback, + setIsFeedback, + isKeyword, + setIsKeyword, + } = useContext(UseStateContext); + + const onClickAlarm = () => { + setIsAlarm((preState) => !preState); + if (isLetter === true) { + setIsLetter((preState) => !preState); + } else if (setting === true) { + setSetting((preState) => !preState); + } else if (isFeedback === true) { + setIsFeedback((preState) => !preState); + } else if (isKeyword === true) { + setIsKeyword((preState) => !preState); + } + }; + + const onClickLetter = () => { + setIsLetter((preState) => !preState); + if (isAlarm === true) { + setIsAlarm((preState) => !preState); + } else if (setting === true) { + setSetting((preState) => !preState); + } else if (isFeedback === true) { + setIsFeedback((preState) => !preState); + } else if (isKeyword === true) { + setIsKeyword((preState) => !preState); + } + }; + return (
- {nav("/Alarm",{state:{}})}} src={Alarm} style={{ width: "32px" }} /> - {nav("/Letter",{state:{}})}} src={Letter} style={{ width: "32px" }} /> - {nav("/",{state:{}})}} src={blackLogo} style={{ width: "52px" }} /> + + + { + nav("/", { state: {} }); + }} + src={blackLogo} + style={{ width: "52px" }} + />
); From 469fde67df343f4c9dc07a3472ffd26aeb255d84 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 4 Mar 2025 22:54:49 +0900 Subject: [PATCH 21/75] main --- blip-project/src/Router.jsx | 131 +++++++++++++++++++++++++++++++----- 1 file changed, 116 insertions(+), 15 deletions(-) diff --git a/blip-project/src/Router.jsx b/blip-project/src/Router.jsx index 62b4e79..20094ed 100644 --- a/blip-project/src/Router.jsx +++ b/blip-project/src/Router.jsx @@ -1,11 +1,17 @@ -import "./Router.css" +import "./Router.css"; import { Route, Routes } from "react-router-dom"; import MainTeamJoinNo from "./components/MainTeamJoinNo"; import MainTeamJoin from "./components/MainTeam"; -import Alarm from "./components/AlarmTeam"; -import Letter from "./components/LetterTeam"; +import MainTeamOwner from "./components/MainTeamOwner"; import SidebarImg from "./svg/add.svg"; -import { useRef, useReducer, createContext, useCallback, useMemo } from "react"; +import { + useRef, + useReducer, + createContext, + useCallback, + useMemo, + useState, +} from "react"; const mocDateSide = [ { @@ -19,42 +25,137 @@ function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; + case "Del": + return state.filter((item) => item.id != action.targetId); + case "Find": + return state.filter((item) => item.id === action.targetId); default: return state; } } export const SidebarContext = createContext(); +export const UseStateContext = createContext(); +export const DiscordContext = createContext(); export const AppRouter = () => { const [todos, dispatch] = useReducer(reducer, mocDateSide); - const idRef = useRef(1); + const idRefEven = useRef(2); + const idRefOdd = useRef(1); - const onCreateSidevar = useCallback((content) => { + const onCreateone = useCallback((content) => { + const newId = idRefEven.current; + idRefEven.current += 2; dispatch({ type: "CREATE", data: { - id: idRef.current++, + id: newId, content: content, isPlus: false, }, }); }, []); + const onCreatedouble = useCallback((content) => { + const newId = idRefOdd.current; + idRefOdd.current += 2; + dispatch({ + type: "CREATE", + data: { + id: newId, + content: content, + isPlus: false, + }, + }); + }, []); + + const onDel = useCallback((targetId) => { + dispatch({ + type: "Del", + targetId: targetId, + }); + }, []); + + const onFind = useCallback((targetId) => { + dispatch({ + type: "Find", + targetId: targetId, + }); + }, []); + const memoizedDispatch = useMemo(() => { return { - onCreateSidevar, + onCreateone, + onCreatedouble, + onDel, + onFind, }; }, []); + const [setting, setSetting] = useState(false); + const [isAlarm, setIsAlarm] = useState(false); + const [isLetter, setIsLetter] = useState(false); + const [isFeedback, setIsFeedback] = useState(false); + const [isKeyword, setIsKeyword] = useState(false); + const [discord, setDiscord] = useState(false); + const [isMike, setIsMike] = useState(false); + const [isCamera, setIsCamera] = useState(false); + const [FullScreen, setFullScreen] = useState(false); + const [meetingEnd, setMeetingEnd] = useState(false); + const [isListening, setIsListening] = useState(false); + const [transcript, setTranscript] = useState(""); + const videoRef = useRef(null); + const [stream, setStream] = useState(null); + return ( - - - } /> - } /> - } /> - } /> - + + + + + } /> + } /> + } /> + + + ); }; From 660f3394818e7a2fe8e242c1d9f5d0b6e0847fef Mon Sep 17 00:00:00 2001 From: tccmw Date: Sun, 9 Mar 2025 22:53:47 +0900 Subject: [PATCH 22/75] svg --- blip-project/src/svg/MettingStart.svg | 3 +++ blip-project/src/svg/MettingStop.svg | 10 ++++++++++ 2 files changed, 13 insertions(+) create mode 100644 blip-project/src/svg/MettingStart.svg create mode 100644 blip-project/src/svg/MettingStop.svg diff --git a/blip-project/src/svg/MettingStart.svg b/blip-project/src/svg/MettingStart.svg new file mode 100644 index 0000000..a496b21 --- /dev/null +++ b/blip-project/src/svg/MettingStart.svg @@ -0,0 +1,3 @@ + + + diff --git a/blip-project/src/svg/MettingStop.svg b/blip-project/src/svg/MettingStop.svg new file mode 100644 index 0000000..a95ad0c --- /dev/null +++ b/blip-project/src/svg/MettingStop.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 813c0fc081c60d6fc61fec1ba01780a4d31c4d0d Mon Sep 17 00:00:00 2001 From: tccmw Date: Sun, 9 Mar 2025 22:53:59 +0900 Subject: [PATCH 23/75] Router --- blip-project/src/Router.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/blip-project/src/Router.jsx b/blip-project/src/Router.jsx index 20094ed..5c57e9c 100644 --- a/blip-project/src/Router.jsx +++ b/blip-project/src/Router.jsx @@ -1,8 +1,8 @@ import "./Router.css"; import { Route, Routes } from "react-router-dom"; -import MainTeamJoinNo from "./components/MainTeamJoinNo"; -import MainTeamJoin from "./components/MainTeam"; -import MainTeamOwner from "./components/MainTeamOwner"; +import MainTeamJoinNo from "./components/Page/Main/MainTeamJoinNo"; +import MainTeamJoin from "./components/Page/Main/MainTeam"; +import MainTeamOwner from "./components/Page/Main/MainTeamOwner"; import SidebarImg from "./svg/add.svg"; import { useRef, @@ -29,6 +29,10 @@ function reducer(state, action) { return state.filter((item) => item.id != action.targetId); case "Find": return state.filter((item) => item.id === action.targetId); + case "Update": + return state.map((item) => + item.id === action.targetId ? { ...item, ...action.payload } : item + ); default: return state; } From 31fd8306b0eac03b520bd4f96564d0dcf262d997 Mon Sep 17 00:00:00 2001 From: tccmw Date: Sun, 9 Mar 2025 22:54:32 +0900 Subject: [PATCH 24/75] test --- blip-project/package-lock.json | 216 ++++++++++++++- blip-project/package.json | 3 +- blip-project/src/components/CSS/Discord.css | 79 +----- .../src/components/CSS/FullScreen.css | 77 ++---- blip-project/src/components/CSS/Grid.css | 129 +++++++++ blip-project/src/components/Discord.jsx | 208 -------------- blip-project/src/components/FullScreen.jsx | 205 -------------- blip-project/src/components/MainTeam.jsx | 24 -- .../src/components/MainTeamJoinNo.jsx | 29 -- .../src/components/Modal/ModalDel.jsx | 13 +- .../src/components/Modal/ModalMeeting.jsx | 21 +- .../src/components/Page/Main/FullScreen.jsx | 133 +++++++++ .../src/components/Page/Main/MainTeam.jsx | 63 +++++ .../components/Page/Main/MainTeamJoinNo.jsx | 62 +++++ .../{ => Page/Main}/MainTeamOwner.jsx | 28 +- .../components/{ => Page/Main}/StartTeam.jsx | 16 +- .../src/components/{ => Page}/Modal/Modal.jsx | 8 +- .../{ => Page}/Modal/ModalCreate.jsx | 10 +- .../src/components/Page/Modal/ModalDel.jsx | 46 +++ .../components/{ => Page}/Modal/ModalJoin.jsx | 10 +- .../components/Page/Modal/ModalMeeting.jsx | 181 ++++++++++++ .../src/components/Page/Modal/ModalStart.jsx | 83 ++++++ .../src/components/Page/Modal/ModalStop.jsx | 83 ++++++ .../components/{ => Page/Src}/DateTeam.jsx | 30 +- .../src/components/Page/Src/MeetingTeam.jsx | 88 ++++++ .../src/components/{ => Page/Src}/Member.jsx | 20 +- .../src/components/Page/Src/function/Grid.jsx | 261 ++++++++++++++++++ .../components/Page/Src/function/graph.jsx | 78 ++++++ .../{ => Page/Src/metting}/MeetingTeam.jsx | 10 +- .../{ => Page/Src/page}/AlarmTeam.jsx | 6 +- .../src/components/Page/Src/page/Discord.jsx | 167 +++++++++++ .../{ => Page/Src/page}/Feedback.jsx | 6 +- .../{ => Page/Src/page}/HeaderTeam.jsx | 10 +- .../{ => Page/Src/page}/Keyword.jsx | 6 +- .../{ => Page/Src/page}/LetterTeam.jsx | 6 +- .../{ => Page/Src/page}/MeetingContent.jsx | 6 +- .../{ => Page/Src/page}/OwnerTeam.jsx | 15 +- .../{ => Page/Src/page}/StartTeamJoinNo.jsx | 10 +- .../{ => Page/Src/page}/UserStart.jsx | 86 +----- .../components/{ => Page/Src}/sidebarTeam.jsx | 65 +++-- 40 files changed, 1775 insertions(+), 822 deletions(-) create mode 100644 blip-project/src/components/CSS/Grid.css delete mode 100644 blip-project/src/components/Discord.jsx delete mode 100644 blip-project/src/components/FullScreen.jsx delete mode 100644 blip-project/src/components/MainTeam.jsx delete mode 100644 blip-project/src/components/MainTeamJoinNo.jsx create mode 100644 blip-project/src/components/Page/Main/FullScreen.jsx create mode 100644 blip-project/src/components/Page/Main/MainTeam.jsx create mode 100644 blip-project/src/components/Page/Main/MainTeamJoinNo.jsx rename blip-project/src/components/{ => Page/Main}/MainTeamOwner.jsx (64%) rename blip-project/src/components/{ => Page/Main}/StartTeam.jsx (56%) rename blip-project/src/components/{ => Page}/Modal/Modal.jsx (95%) rename blip-project/src/components/{ => Page}/Modal/ModalCreate.jsx (92%) create mode 100644 blip-project/src/components/Page/Modal/ModalDel.jsx rename blip-project/src/components/{ => Page}/Modal/ModalJoin.jsx (93%) create mode 100644 blip-project/src/components/Page/Modal/ModalMeeting.jsx create mode 100644 blip-project/src/components/Page/Modal/ModalStart.jsx create mode 100644 blip-project/src/components/Page/Modal/ModalStop.jsx rename blip-project/src/components/{ => Page/Src}/DateTeam.jsx (80%) create mode 100644 blip-project/src/components/Page/Src/MeetingTeam.jsx rename blip-project/src/components/{ => Page/Src}/Member.jsx (79%) create mode 100644 blip-project/src/components/Page/Src/function/Grid.jsx create mode 100644 blip-project/src/components/Page/Src/function/graph.jsx rename blip-project/src/components/{ => Page/Src/metting}/MeetingTeam.jsx (89%) rename blip-project/src/components/{ => Page/Src/page}/AlarmTeam.jsx (77%) create mode 100644 blip-project/src/components/Page/Src/page/Discord.jsx rename blip-project/src/components/{ => Page/Src/page}/Feedback.jsx (66%) rename blip-project/src/components/{ => Page/Src/page}/HeaderTeam.jsx (86%) rename blip-project/src/components/{ => Page/Src/page}/Keyword.jsx (68%) rename blip-project/src/components/{ => Page/Src/page}/LetterTeam.jsx (77%) rename blip-project/src/components/{ => Page/Src/page}/MeetingContent.jsx (65%) rename blip-project/src/components/{ => Page/Src/page}/OwnerTeam.jsx (89%) rename blip-project/src/components/{ => Page/Src/page}/StartTeamJoinNo.jsx (91%) rename blip-project/src/components/{ => Page/Src/page}/UserStart.jsx (52%) rename blip-project/src/components/{ => Page/Src}/sidebarTeam.jsx (72%) diff --git a/blip-project/package-lock.json b/blip-project/package-lock.json index 94c9fd1..0876da5 100644 --- a/blip-project/package-lock.json +++ b/blip-project/package-lock.json @@ -13,7 +13,8 @@ "react-apexcharts": "^1.7.0", "react-dom": "^18.3.1", "react-router-dom": "^7.1.3", - "styled-components": "^6.1.14" + "simple-peer": "^9.11.1", + "styled-components": "^6.1.15" }, "devDependencies": { "@eslint/js": "^9.17.0", @@ -1600,6 +1601,26 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1642,6 +1663,30 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "node_modules/call-bind": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz", @@ -1872,7 +1917,6 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==", - "dev": true, "dependencies": { "ms": "^2.1.3" }, @@ -1957,6 +2001,12 @@ "integrity": "sha512-LcUDPqSt+V0QmI47XLzZrz5OqILSMGsPFkDYus22rIbgorSvBYEFqq854ltTmUdHkY92FSdAAvsh4jWEULMdfQ==", "dev": true }, + "node_modules/err-code": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz", + "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==", + "license": "MIT" + }, "node_modules/es-abstract": { "version": "1.23.9", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz", @@ -2515,6 +2565,12 @@ "node": ">=6.9.0" } }, + "node_modules/get-browser-rtc": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz", + "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ==", + "license": "MIT" + }, "node_modules/get-intrinsic": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz", @@ -2708,6 +2764,26 @@ "node": ">= 0.4" } }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "BSD-3-Clause" + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -2742,6 +2818,12 @@ "node": ">=0.8.19" } }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "license": "ISC" + }, "node_modules/internal-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz", @@ -3290,8 +3372,7 @@ "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" }, "node_modules/nanoid": { "version": "3.3.8", @@ -3536,9 +3617,9 @@ } }, "node_modules/postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.49", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", + "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", "funding": [ { "type": "opencollective", @@ -3553,10 +3634,11 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", - "source-map-js": "^1.2.0" + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" @@ -3595,6 +3677,35 @@ "node": ">=6" } }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "license": "MIT", + "dependencies": { + "safe-buffer": "^5.1.0" + } + }, "node_modules/react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", @@ -3683,6 +3794,20 @@ "react-dom": ">=18" } }, + "node_modules/readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "license": "MIT", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -3808,6 +3933,26 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, "node_modules/safe-push-apply": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz", @@ -4007,6 +4152,35 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/simple-peer": { + "version": "9.11.1", + "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz", + "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "buffer": "^6.0.3", + "debug": "^4.3.2", + "err-code": "^3.0.1", + "get-browser-rtc": "^1.1.0", + "queue-microtask": "^1.2.3", + "randombytes": "^2.1.0", + "readable-stream": "^3.6.0" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", @@ -4015,6 +4189,15 @@ "node": ">=0.10.0" } }, + "node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, "node_modules/string.prototype.matchall": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz", @@ -4121,16 +4304,17 @@ } }, "node_modules/styled-components": { - "version": "6.1.14", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.14.tgz", - "integrity": "sha512-KtfwhU5jw7UoxdM0g6XU9VZQFV4do+KrM8idiVCH5h4v49W+3p3yMe0icYwJgZQZepa5DbH04Qv8P0/RdcLcgg==", + "version": "6.1.15", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.15.tgz", + "integrity": "sha512-PpOTEztW87Ua2xbmLa7yssjNyUF9vE7wdldRfn1I2E6RTkqknkBYpj771OxM/xrvRGinLy2oysa7GOd7NcZZIA==", + "license": "MIT", "dependencies": { "@emotion/is-prop-valid": "1.2.2", "@emotion/unitless": "0.8.1", "@types/stylis": "4.2.5", "css-to-react-native": "3.2.0", "csstype": "3.1.3", - "postcss": "8.4.38", + "postcss": "8.4.49", "shallowequal": "1.1.0", "stylis": "4.3.2", "tslib": "2.6.2" @@ -4329,6 +4513,12 @@ "punycode": "^2.1.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "license": "MIT" + }, "node_modules/vite": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/vite/-/vite-6.1.0.tgz", diff --git a/blip-project/package.json b/blip-project/package.json index e855bce..4f198ab 100644 --- a/blip-project/package.json +++ b/blip-project/package.json @@ -15,7 +15,8 @@ "react-apexcharts": "^1.7.0", "react-dom": "^18.3.1", "react-router-dom": "^7.1.3", - "styled-components": "^6.1.14" + "simple-peer": "^9.11.1", + "styled-components": "^6.1.15" }, "devDependencies": { "@eslint/js": "^9.17.0", diff --git a/blip-project/src/components/CSS/Discord.css b/blip-project/src/components/CSS/Discord.css index 22c98ef..07ad8df 100644 --- a/blip-project/src/components/CSS/Discord.css +++ b/blip-project/src/components/CSS/Discord.css @@ -37,80 +37,10 @@ .discord-body { width: 100%; height: 90%; - display: flex; - align-items: center; - justify-content: center; position: relative; -} - -.discord-main { - background-color: blueviolet; - width: 95%; - height: 95%; - border-radius: 24px; - border: none; - display: flex; - flex-direction: column; - justify-content: space-between; - position: relative; -} - -.discord-main video { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; -} - -.discord-main-circle { - width: 100%; - height: 60%; display: flex; - align-items: end; - justify-content: center; -} - -.discord-main-circle-src { - width: 20%; - height: 37%; - border-radius: 50%; - background-color: black; -} - -.discord-main-foot { - width: 100%; - height: 30%; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.discord-main-foot p { - display: flex; - flex-direction: column; align-items: center; - color: #ffff; -} - -.discord-main-nofoot { - width: 100%; - height: 5%; - display: flex; - align-items: center; - justify-content: center; - gap: 1%; - padding-left: 30%; -} - -.discord-main-nofoot-video { - width: 100%; - height: 99%; - display: flex; - align-items: end; justify-content: center; - gap: 1%; - padding-left: 30%; - z-index: 1000; } .discord-foot { @@ -122,6 +52,13 @@ gap: 50%; } +.discord-foot-Metting{ + width: 10%; + height: 100%; + display: flex; + gap: 30%; +} + .discord-foot-Src { width: 20%; height: 80%; @@ -135,5 +72,5 @@ height: 100%; display: flex; align-items: center; - gap: 10%; + gap: 5%; } diff --git a/blip-project/src/components/CSS/FullScreen.css b/blip-project/src/components/CSS/FullScreen.css index f955075..cb360a8 100644 --- a/blip-project/src/components/CSS/FullScreen.css +++ b/blip-project/src/components/CSS/FullScreen.css @@ -1,78 +1,53 @@ +* { + margin: 0; + padding: 0; + overflow: hidden; +} + .FullScreen { - width: 100vw; + width: 100%; height: 100vh; + display: flex; + flex-direction: column; + background-color: beige; } .FullScreen-main { width: 100%; height: 90%; - grid-template-columns: 1fr; /* 한 열에 하나씩 */ -} - -.screen { - width: 90%; - height: 90%; - background-color: rgb(134, 2, 148); - border-radius: 24px; - grid-template-columns: 1fr; /* 한 열에 하나씩 */ -} - -.screen video { - width: 100%; - height: 100%; - object-fit: cover; -} - -.screen-circle { - width: 100%; - height: 60%; - display: flex; - align-items: end; - justify-content: center; } -.screen-circle div { - width: 15%; - aspect-ratio: 1; - border-radius: 50%; - background-color: bisque; -} - -.screen-name { +.FullScreen-foot { width: 100%; - height: 30%; + height: 10%; display: flex; - justify-content: center; - margin-top: 2%; + align-items: center; + justify-content: space-around; + gap: 40%; } -.screen-src { - width: 50%; - height: 5%; +.FullScreen-foot-Metting { + width: 10%; + height: 40%; display: flex; - justify-content: end; - padding-left: 30%; - gap: 3%; + gap: 30%; } -.FullScreen-foot { - width: 100%; - height: 10%; +.FullScreen-foot-src-main { + width: 30%; + height: 50%; display: flex; - align-items: center; justify-content: space-between; } .FullScreen-foot-src { - width: 80%; - height: 30%; + width: 50%; display: flex; - justify-content: end; - gap: 1%; + align-items: center; + gap: 10%; } .FullScreen-foot-exit { - height: 30%; - padding-right: 5%; display: flex; + align-items: center; } diff --git a/blip-project/src/components/CSS/Grid.css b/blip-project/src/components/CSS/Grid.css new file mode 100644 index 0000000..26d8b4b --- /dev/null +++ b/blip-project/src/components/CSS/Grid.css @@ -0,0 +1,129 @@ + +.FullGrid-grid { + width: 95%; + height: 95%; + display: grid; + gap: 3%; + grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); + grid-auto-rows: 1fr; +} + +.screen { + background-color: blueviolet; + width: 100%; + height: 100%; + border-radius: 24px; + border: none; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} + +.screen video { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + transform: scaleX(-1); +} + +.FullGrid-main-circle { + width: 100%; + height: 60%; + display: flex; + align-items: end; + justify-content: center; +} + +.FullGrid-main-circle-src { + width: 20%; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: black; +} + +.FullGrid-main-nofoot { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 1%; + padding-left: 40%; +} + +.FullGrid-main-nofoot-video { + width: 100%; + height: 95%; + display: flex; + align-items: end; + justify-content: center; + gap: 1%; + z-index: 1000; + padding-left: 40%; +} + +.FullGrid-main-foot { + width: 100%; + height: 30%; +} + +.FullGrid-main-foot img { + display: block; + width: 10%; + height: 10%; +} + +.FullGrid-main-foot p { + display: flex; + flex-direction: column; + align-items: center; + color: #ffff; +} + +.FullGrid-main-last { + grid-column: span 2; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.FullGrid-main-last-Div { + background-color: blueviolet; + width: 50%; + height: 100%; + border-radius: 24px; + border: none; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; +} + +.FullGrid-main-last video { + position: absolute; + width: 100%; + height: 100%; + display: flex; + object-fit: cover; + transform: scaleX(-1); +} + +.FullGrid-main-foot-last { + width: 100%; + height: 30%; + display: flex; + flex-direction: column; + align-items: center; +} + +.FullGrid-main-circle-src-last { + width: 20%; + aspect-ratio: 1/1; + border-radius: 50%; + background-color: black; +} \ No newline at end of file diff --git a/blip-project/src/components/Discord.jsx b/blip-project/src/components/Discord.jsx deleted file mode 100644 index 30336b3..0000000 --- a/blip-project/src/components/Discord.jsx +++ /dev/null @@ -1,208 +0,0 @@ -import "./CSS/Discord.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; -import DisAlarm from "../svg/DisAlarm.svg"; -import NoMike from "../svg/NoMike.svg"; -import NoCamera from "../svg/noCamera.svg"; -import Mike from "../svg/Mike.svg"; -import Camera from "../svg/DisCamera.svg"; -import Fullscreen from "../svg/FullScreen.svg"; -import X from "../svg/X.svg"; -import { useContext, useEffect } from "react"; -import { UseStateContext } from "../Router"; -import { DiscordContext } from "../Router"; - -const SpeechRecognition = - window.SpeechRecognition || window.webkitSpeechRecognition; - -const Discord = () => { - const { - isMike, - setIsMike, - isCamera, - setIsCamera, - FullScreen, - setFullScreen, - setDiscord, - meetingEnd, - setMeetingEnd, - } = useContext(UseStateContext); - - const { - isListening, - setIsListening, - setTranscript, - videoRef, - stream, - setStream, - } = useContext(DiscordContext); - - const recognition = new SpeechRecognition(); - recognition.lang = "ko-KR"; // 한국어 - recognition.continuous = true; // 음성 인식 - recognition.interimResults = true; // 실시간 결과 - - useEffect(() => { - const getMediaStream = async () => { - // 카메라와 마이크 설정을 통해 비디오 스트림을 가져옴 - if (!videoRef.current) return; - - try { - const useStream = await navigator.mediaDevices.getUserMedia({ - video: { - width: { ideal: 1280 }, //해상도 - height: { ideal: 720 }, - frameRate: { ideal: 30 }, //프레임 속도도 - }, - audio: true, - }); - if (stream) { - const tracks = stream.getTracks(); - tracks.forEach((track) => track.stop()); - } - if (videoRef.current) { - videoRef.current.srcObject = useStream; - } - setStream(useStream); - } catch (error) { - console.error("MediaStream 에러:", error); - } - }; - if (isCamera && !stream) { - getMediaStream(); - } else if (!isCamera && stream) { - const tracks = stream.getTracks(); - tracks.forEach((track) => track.stop()); - setStream(null); - if (videoRef.current) { - videoRef.current.srcObject = null; - } - } - - return () => { - if (stream) { - const tracks = stream.getTracks(); - tracks.forEach((track) => track.stop()); - } - }; - }, [isCamera, stream]); - - useEffect(() => { - if (isListening) { - recognition.start(); - } else { - recognition.stop(); - } - recognition.onresult = (e) => { - const newTracript = e.results[0][0].transcript; - setTranscript(newTracript); - }; - recognition.onerror = (error) => { - console.log("음성인식 오류", error.error); - }; - return () => { - recognition.stop(); - }; - }, [isListening]); - - const onClickMike = () => { - setIsMike((preState) => !preState); - setIsListening((preState) => !preState); - }; - - const onClickCamera = () => { - setIsCamera((preState) => !preState); - }; - - const onClickFull = () => { - if (!FullScreen) { - setFullScreen((preState) => !preState); - } - }; - - const onClickEnd = () => { - setMeetingEnd((preState) => !preState); - setDiscord((preState) => !preState); - }; - - return ( - <> - {meetingEnd ? ( -
-
-
- -
-
-
회의가 종료되었어요.
-

- BLIP이 회의를 요약해서 알려드릴게요! -

-
-
-
- ) : ( -
-
-
- {isCamera ? ( - <> -
-
-
- -
-
- - -
- -
-
-
- )} - - ); -}; - -export default Discord; diff --git a/blip-project/src/components/FullScreen.jsx b/blip-project/src/components/FullScreen.jsx deleted file mode 100644 index c90ae13..0000000 --- a/blip-project/src/components/FullScreen.jsx +++ /dev/null @@ -1,205 +0,0 @@ -import "./CSS/FullScreen.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; -import { useContext, useState, useEffect } from "react"; -import { UseStateContext } from "../Router"; -import { DiscordContext } from "../Router"; -import Exit from "../svg/Exit.svg"; -import XFullScreen from "../svg/XFullScreen.svg"; -import DisAlarm from "../svg/DisAlarm.svg"; -import NoMike from "../svg/NoMike.svg"; -import NoCamera from "../svg/noCamera.svg"; -import Mike from "../svg/Mike.svg"; -import Camera from "../svg/DisCamera.svg"; - -const SpeechRecognition = - window.SpeechRecognition || window.webkitSpeechRecognition; - -const FullScreenPage = () => { - const { - isMike, - setIsMike, - isCamera, - setIsCamera, - FullScreen, - setFullScreen, - meetingEnd, - setMeetingEnd, - } = useContext(UseStateContext); - - const { - isListening, - setIsListening, - setTranscript, - videoRef, - stream, - setStream, - } = useContext(DiscordContext); - - const recognition = new SpeechRecognition(); - recognition.lang = "ko-KR"; // 한국어 - recognition.continuous = true; // 음성 인식 - recognition.interimResults = true; // 실시간 결과 - - useEffect(() => { - const getMediaStream = async () => { - // 카메라와 마이크 설정을 통해 비디오 스트림을 가져옴 - if (!videoRef.current) return; - - try { - const useStream = await navigator.mediaDevices.getUserMedia({ - video: { - width: { ideal: 1280 }, //해상도 - height: { ideal: 720 }, - frameRate: { ideal: 30 }, //프레임 속도도 - }, - audio: true, - }); - if (stream) { - const tracks = stream.getTracks(); - tracks.forEach((track) => track.stop()); - } - if (videoRef.current) { - videoRef.current.srcObject = useStream; - } - setStream(useStream); - } catch (error) { - console.error("MediaStream 에러:", error); - } - }; - if (isCamera && !stream) { - getMediaStream(); - } else if (!isCamera && stream) { - const tracks = stream.getTracks(); - tracks.forEach((track) => track.stop()); - setStream(null); - if (videoRef.current) { - videoRef.current.srcObject = null; - } - } - - return () => { - if (stream) { - const tracks = stream.getTracks(); - tracks.forEach((track) => track.stop()); - } - }; - }, [isCamera, stream]); - - useEffect(() => { - if (isListening) { - recognition.start(); - } else { - recognition.stop(); - } - recognition.onresult = (e) => { - const newTracript = e.results[0][0].transcript; - setTranscript(newTracript); - }; - recognition.onerror = (error) => { - console.log("음성인식 오류", error.error); - }; - return () => { - recognition.stop(); - }; - }, [isListening]); - - const [peopleCount, setPeopleCount] = useState(0); - - const gridStyle = { - display: "grid", - placeItems: "center", - gridTemplateColumns: `repeat(${peopleCount}, 1fr)`, - gap: "10px", - width: "100%", - height: "90%", - }; - - const addPerson = () => { - setPeopleCount((prev) => prev + 1); - console.log(peopleCount); - }; - const removePerson = () => setPeopleCount((prev) => Math.max(prev - 1, 1)); - - const onClickFull = () => { - if (FullScreen) setFullScreen((preState) => !preState); - }; - - const onClickMike = () => { - setIsMike((preState) => !preState); - setIsListening((preState) => !preState); - }; - - const onClickCamera = () => { - setIsCamera((preState) => !preState); - }; - - const onClickMeetingEnd = () => { - if (!meetingEnd) { - setMeetingEnd((preState) => !preState); - setFullScreen((preState) => !preState); - } - }; - - return ( -
-
- {Array.from({ length: peopleCount }).map((_, index) => ( - <> -
- {isCamera ? ( - <> -
- - ))} -
-
-
- - - - - -
-
- -
-
-
- ); -}; - -export default FullScreenPage; diff --git a/blip-project/src/components/MainTeam.jsx b/blip-project/src/components/MainTeam.jsx deleted file mode 100644 index 5b89f39..0000000 --- a/blip-project/src/components/MainTeam.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import "./CSS/MainTeam.css"; -import DateTeamJoinNo from "./DateTeam"; -import HeaderTeam from "./HeaderTeam"; -import SidebarTeam from "./sidebarTeam"; -import StartTeam from "./StartTeam"; -import MeetingTeamJoinNo from "./MeetingTeam"; - -const MainTeam = () => { - return ( - <> - -
- - -
- - -
-
- - ); -}; - -export default MainTeam; diff --git a/blip-project/src/components/MainTeamJoinNo.jsx b/blip-project/src/components/MainTeamJoinNo.jsx deleted file mode 100644 index 47bff92..0000000 --- a/blip-project/src/components/MainTeamJoinNo.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import "./CSS/MainTeamJoinNo.css"; -import DateTeamJoinNo from "./DateTeam"; -import HeaderTeam from "./HeaderTeam"; -import SidebarTeam from "./sidebarTeam"; -import StartTeamJoinNo from "./StartTeamJoinNo"; -import MeetingTeamJoinNo from "./MeetingTeam"; -import Alarm from "./AlarmTeam"; -import Letter from "./LetterTeam"; -import { useContext } from "react"; -import { UseStateContext } from "../Router"; - -const MTeamJoinNo = () => { - const { isAlarm, isLetter } = useContext(UseStateContext); - return ( - <> - -
- - {isAlarm ? : isLetter ? : } -
- - -
-
- - ); -}; - -export default MTeamJoinNo; diff --git a/blip-project/src/components/Modal/ModalDel.jsx b/blip-project/src/components/Modal/ModalDel.jsx index 3113583..6dde617 100644 --- a/blip-project/src/components/Modal/ModalDel.jsx +++ b/blip-project/src/components/Modal/ModalDel.jsx @@ -1,10 +1,11 @@ import "../CSS/ModalDel.css"; -import { typography } from "../../fonts/fonts"; -import { color } from "../../style/color"; -import ESC from "../../svg/ESC.svg"; -import { useState, useContext } from "react"; -import { SidebarContext } from "../../Router"; -import { TeamDel } from "../MainTeamOwner"; +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; +import ESC from "../../../svg/ESC.svg"; +import { useContext } from "react"; +import { SidebarContext } from "../../../Router"; +import { TeamDel } from "../Main/MainTeamOwner"; +// import { TeamDel } from "../Page/Main/Main"; import { useNavigate } from "react-router-dom"; const ModalDel = ({ onClose }) => { diff --git a/blip-project/src/components/Modal/ModalMeeting.jsx b/blip-project/src/components/Modal/ModalMeeting.jsx index e44d9ec..f1ae4ec 100644 --- a/blip-project/src/components/Modal/ModalMeeting.jsx +++ b/blip-project/src/components/Modal/ModalMeeting.jsx @@ -1,19 +1,18 @@ -import "../CSS/ModalMeeting.css"; -import { typography } from "../../fonts/fonts"; -import { color } from "../../style/color"; +import "../../CSS/ModalMeeting.css"; +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; import { useState, useContext } from "react"; -import ESC from "../../svg/ESC.svg"; -import { UseStateContext } from "../../Router"; -import { DiscordContext } from "../../Router"; +import ESC from "../../../svg/ESC.svg"; +import { UseStateContext } from "../../../Router"; +import { TeamDel } from "../Main/MainTeamOwner"; +// import { TeamDel } from "../Page/Main/Main"; const ModalMeeting = ({ onClose }) => { const [isTopic, setIsTopic] = useState(""); const [isCheckMike, setIsCheckMike] = useState(false); const [isCheckCamera, setIsCheckCamera] = useState(false); const { - isMike, setIsMike, - isCamera, setIsCamera, setting, setSetting, @@ -28,9 +27,12 @@ const ModalMeeting = ({ onClose }) => { discord, setDiscord, } = useContext(UseStateContext); - const { setIsListening } = useContext(DiscordContext); + + + const { itemId } = useContext(TeamDel); const onClickDiscord = () => { + console.log("key={itemId}", itemId); if (!discord) { setDiscord((preState) => !preState); onClose(); @@ -154,6 +156,7 @@ const ModalMeeting = ({ onClose }) => { backgroundColor: color.Main[4], color: color.White, }} + key={itemId} > 회의 시작하기 diff --git a/blip-project/src/components/Page/Main/FullScreen.jsx b/blip-project/src/components/Page/Main/FullScreen.jsx new file mode 100644 index 0000000..6abe8a7 --- /dev/null +++ b/blip-project/src/components/Page/Main/FullScreen.jsx @@ -0,0 +1,133 @@ +import "../../CSS/FullScreen.css"; +import { color } from "../../../style/color"; +import { useContext, useState } from "react"; +import { TeamDel } from "./MainTeamOwner"; +import { UseStateContext } from "../../../Router"; +import { DiscordContext } from "../../../Router"; +import ModalStart from "../Modal/ModalStart"; +import ModalStop from "../Modal/ModalStop"; +import Exit from "../../../svg/Exit.svg"; +import XFullScreen from "../../../svg/XFullScreen.svg"; +import DisAlarm from "../../../svg/DisAlarm.svg"; +import NoMike from "../../../svg/NoMike.svg"; +import NoCamera from "../../../svg/noCamera.svg"; +import Mike from "../../../svg/Mike.svg"; +import Camera from "../../../svg/DisCamera.svg"; +import MettingStart from "../../../svg/MettingStart.svg"; +import MettingStop from "../../../svg/MettingStop.svg"; +import Grid from "../Src/function/Grid"; + +const FullScreenPage = () => { + const { itemId } = useContext(TeamDel); + + const { + isMike, + setIsMike, + isCamera, + setIsCamera, + FullScreen, + setFullScreen, + meetingEnd, + setMeetingEnd, + } = useContext(UseStateContext); + + const { setIsListening } = useContext(DiscordContext); + + const [peopleCount, setPeopleCount] = useState(0); + + const gridStyle = { + display: "grid", + placeItems: "center", + gridTemplateColumns: `repeat(${peopleCount}, 1fr)`, + gap: "10px", + }; + + const onClickFull = () => { + if (FullScreen) setFullScreen((preState) => !preState); + }; + + const onClickMike = () => { + console.log("ddd", isCamera); + console.log("sss", isMike); + if (!isCamera) { + setIsMike((preState) => !preState); + } + setIsListening((preState) => !preState); + }; + + const onClickCamera = () => { + setIsCamera((preState) => !preState); + if (!isMike) { + setIsMike((preState) => !preState); + } + }; + + const onClickMeetingEnd = () => { + if (!meetingEnd) { + setMeetingEnd((preState) => !preState); + setFullScreen((preState) => !preState); + } + }; + + const [isModalOpen, setIsModalOpen] = useState(false); + const [isModalStart, setIsModalStart] = useState(false); + const [isMettingStop, setIsMettingStop] = useState(false); + + const openModalStop = () => setIsModalOpen(true); + const closeModal = () => setIsModalOpen(false); + + const openModalStart = () => setIsModalStart(true); + const IsCloseModal = () => setIsModalStart(false); + + return ( +
+
+ +
+
+ {itemId % 2 === 0 ? ( + <> +
+ + +
+ + ) : ( + "" + )} +
+
+ + + +
+
+ +
+
+
+ {isModalStart && ( + + )} + {isModalOpen && ( + + )} +
+ ); +}; + +export default FullScreenPage; diff --git a/blip-project/src/components/Page/Main/MainTeam.jsx b/blip-project/src/components/Page/Main/MainTeam.jsx new file mode 100644 index 0000000..4998d36 --- /dev/null +++ b/blip-project/src/components/Page/Main/MainTeam.jsx @@ -0,0 +1,63 @@ +import "../../CSS/MainTeam.css"; +import DateTeam from "../Src/DateTeam"; +import HeaderTeam from "../Src/page/HeaderTeam"; +import SidebarTeam from "../Src/sidebarTeam"; +import StartTeam from "./StartTeam"; +import MeetingTeam from "../Src/MeetingTeam"; +import FullScreenPage from "./FullScreen"; +import { useLocation } from "react-router-dom"; +import { SidebarContext } from "../../../Router"; +import { UseStateContext } from "../../../Router"; +import { createContext, useState, useContext, useEffect } from "react"; + +// export const TeamDel = createContext(); +// export const FindId = createContext(); + +const MainTeam = () => { + // const location = useLocation(); + // const { itemContent, itemId, image, itemImage } = location.state || {}; + // const { todos } = useContext(SidebarContext); + // const [filteredItem, setFilteredItem] = useState(null); + // const { FullScreen } = useContext(UseStateContext); + + // useEffect(() => { + // const matchingId = todos.find((item) => item.id === itemId); + // setFilteredItem(matchingId); + // }, [todos, itemId]); + + // const [targetId, setTargetId] = useState(null); + + // useEffect(() => { + // if (targetId === null) { + // const foodId = todos.find((item) => item.id === itemId)?.id || null; + // setTargetId(foodId); + // console.log(targetId); + // } + // }, []); + + return ( + // <> + // + // + // {FullScreen ? ( + // + // ) : ( + <> + +
+ + +
+ + +
+
+ + // )} + // + // + // + ); +}; + +export default MainTeam; diff --git a/blip-project/src/components/Page/Main/MainTeamJoinNo.jsx b/blip-project/src/components/Page/Main/MainTeamJoinNo.jsx new file mode 100644 index 0000000..95e5102 --- /dev/null +++ b/blip-project/src/components/Page/Main/MainTeamJoinNo.jsx @@ -0,0 +1,62 @@ +import "../../CSS/MainTeamJoinNo.css"; +import DateTeam from "../Src/DateTeam"; +import HeaderTeam from "../Src/page/HeaderTeam"; +import SidebarTeam from "../Src/sidebarTeam"; +import StartTeam from "./StartTeam"; +import MeetingTeam from "../Src/MeetingTeam"; +import FullScreenPage from "./FullScreen"; +import { useLocation } from "react-router-dom"; +import { SidebarContext } from "../../../Router"; +import { UseStateContext } from "../../../Router"; +import { createContext, useState, useContext, useEffect } from "react"; + +// export const TeamDel = createContext(); +// export const FindId = createContext(); +const MTeamJoinNo = () => { + // const location = useLocation(); + // const { itemContent, itemId, image, itemImage } = location.state || {}; + // const { todos } = useContext(SidebarContext); + // const [filteredItem, setFilteredItem] = useState(null); + // const { FullScreen } = useContext(UseStateContext); + + // useEffect(() => { + // const matchingId = todos.find((item) => item.id === itemId); + // setFilteredItem(matchingId); + // }, [todos, itemId]); + + // const [targetId, setTargetId] = useState(null); + + // useEffect(() => { + // if (targetId === null) { + // const foodId = todos.find((item) => item.id === itemId)?.id || null; + // setTargetId(foodId); + // console.log(targetId); + // } + // }, []); + + return ( + <> + {/* + + {FullScreen ? ( + + ) : ( + <> */} + +
+ + +
+ + +
+
+ + // )} + // + // + // + ); +}; + +export default MTeamJoinNo; diff --git a/blip-project/src/components/MainTeamOwner.jsx b/blip-project/src/components/Page/Main/MainTeamOwner.jsx similarity index 64% rename from blip-project/src/components/MainTeamOwner.jsx rename to blip-project/src/components/Page/Main/MainTeamOwner.jsx index 052c5da..77c799e 100644 --- a/blip-project/src/components/MainTeamOwner.jsx +++ b/blip-project/src/components/Page/Main/MainTeamOwner.jsx @@ -1,13 +1,13 @@ -import "./CSS/MainTeamOwner.css"; -import DateTeamJoinNo from "./DateTeam"; -import HeaderTeam from "./HeaderTeam"; -import SidebarTeam from "./sidebarTeam"; +import "../../CSS/MainTeamOwner.css"; +import DateTeamJoinNo from "../Src/DateTeam"; +import HeaderTeam from "../Src/page/HeaderTeam"; +import SidebarTeam from "../Src/sidebarTeam"; import StartTeam from "./StartTeam"; -import MeetingTeamJoinNo from "./MeetingTeam"; +import MeetingTeamJoinNo from "../Src/MeetingTeam"; import FullScreenPage from "./FullScreen"; import { useLocation } from "react-router-dom"; -import { SidebarContext } from "../Router"; -import { UseStateContext } from "../Router"; +import { SidebarContext } from "../../../Router"; +import { UseStateContext } from "../../../Router"; import { createContext, useState, useContext, useEffect } from "react"; export const TeamDel = createContext(); @@ -18,16 +18,26 @@ const MainTeamOwner = () => { const { itemContent, itemId, image, itemImage } = location.state || {}; const { todos } = useContext(SidebarContext); const [filteredItem, setFilteredItem] = useState(null); - const { FullScreen } = useContext(UseStateContext); + const {FullScreen } = useContext(UseStateContext); useEffect(() => { const matchingId = todos.find((item) => item.id === itemId); setFilteredItem(matchingId); }, [todos, itemId]); + const [targetId, setTargetId] = useState(null); + + useEffect(() => { + if (targetId === null) { + const foodId = todos.find((item) => item.id === itemId)?.id || null; + setTargetId(foodId); + console.log(targetId); + } + }, []); + return ( <> - + {FullScreen ? ( diff --git a/blip-project/src/components/StartTeam.jsx b/blip-project/src/components/Page/Main/StartTeam.jsx similarity index 56% rename from blip-project/src/components/StartTeam.jsx rename to blip-project/src/components/Page/Main/StartTeam.jsx index abd90e0..3b641d2 100644 --- a/blip-project/src/components/StartTeam.jsx +++ b/blip-project/src/components/Page/Main/StartTeam.jsx @@ -1,12 +1,12 @@ -import "./CSS/StartTeam.css"; -import Member from "./Member"; -import UserStart from "./UserStart"; -import OwnerTeam from "./OwnerTeam"; +import "../../CSS/StartTeam.css"; +import Member from "../Src/Member"; +import UserStart from "../Src/page/UserStart"; +import OwnerTeam from "../Src/page/OwnerTeam"; import { useContext } from "react"; -import { UseStateContext } from "../Router"; -import Alarm from "./AlarmTeam"; -import Letter from "./LetterTeam"; -import Discord from "./Discord"; +import { UseStateContext } from "../../../Router"; +import Alarm from "../Src/page/AlarmTeam"; +import Letter from "../Src/page/LetterTeam"; +import Discord from "../Src/page/Discord"; const StartTeam = () => { const { setting, isAlarm, isLetter, discord } = useContext(UseStateContext); diff --git a/blip-project/src/components/Modal/Modal.jsx b/blip-project/src/components/Page/Modal/Modal.jsx similarity index 95% rename from blip-project/src/components/Modal/Modal.jsx rename to blip-project/src/components/Page/Modal/Modal.jsx index 186cfc3..3e632f9 100644 --- a/blip-project/src/components/Modal/Modal.jsx +++ b/blip-project/src/components/Page/Modal/Modal.jsx @@ -1,7 +1,7 @@ -import "../CSS/Modal.css" -import { typography } from "../../fonts/fonts"; -import { color } from "../../style/color"; -import ESC from "../../svg/ESC.svg" +import "../../CSS/Modal.css" +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; +import ESC from "../../../svg/ESC.svg" import { useState } from "react"; import ModalCreate from "./ModalCreate"; import ModalJoin from "./ModalJoin"; diff --git a/blip-project/src/components/Modal/ModalCreate.jsx b/blip-project/src/components/Page/Modal/ModalCreate.jsx similarity index 92% rename from blip-project/src/components/Modal/ModalCreate.jsx rename to blip-project/src/components/Page/Modal/ModalCreate.jsx index 664bb7a..7a350ee 100644 --- a/blip-project/src/components/Modal/ModalCreate.jsx +++ b/blip-project/src/components/Page/Modal/ModalCreate.jsx @@ -1,10 +1,10 @@ -import "../CSS/ModalCreate.css"; -import { typography } from "../../fonts/fonts"; -import { color } from "../../style/color"; -import ESC from "../../svg/ESC.svg"; +import "../../CSS/ModalCreate.css"; +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; +import ESC from "../../../svg/ESC.svg"; import { useState, useContext, useRef, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import { SidebarContext } from "../../Router"; +import { SidebarContext } from "../../../Router"; const ModalCreate = ({ onClose }) => { const { dispatch } = useContext(SidebarContext); diff --git a/blip-project/src/components/Page/Modal/ModalDel.jsx b/blip-project/src/components/Page/Modal/ModalDel.jsx new file mode 100644 index 0000000..404b1e5 --- /dev/null +++ b/blip-project/src/components/Page/Modal/ModalDel.jsx @@ -0,0 +1,46 @@ +import "../../CSS/ModalDel.css"; +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; +import ESC from "../../../svg/ESC.svg"; +import { useContext } from "react"; +import { SidebarContext } from "../../../Router"; +import { TeamDel } from "../Main/MainTeamOwner"; +// import { TeamDel } from "../Page/Main/Main"; +import { useNavigate } from "react-router-dom"; + +const ModalDel = ({ onClose }) => { + const { dispatch } = useContext(SidebarContext); + const { itemId } = useContext(TeamDel); + const nav = useNavigate(); + + const ClickDel = () => { + if (itemId) { + dispatch.onDel(itemId); + nav("/", { state: {} }); + } + }; + + return ( +
+
+
+

+ 정말 스페이스를 삭제 하실건가요? +

+ +
+
+ +
+
+
+ ); +}; + +export default ModalDel; diff --git a/blip-project/src/components/Modal/ModalJoin.jsx b/blip-project/src/components/Page/Modal/ModalJoin.jsx similarity index 93% rename from blip-project/src/components/Modal/ModalJoin.jsx rename to blip-project/src/components/Page/Modal/ModalJoin.jsx index 20be333..8510699 100644 --- a/blip-project/src/components/Modal/ModalJoin.jsx +++ b/blip-project/src/components/Page/Modal/ModalJoin.jsx @@ -1,10 +1,10 @@ -import "../CSS/ModalJoin.css"; -import { typography } from "../../fonts/fonts"; -import { color } from "../../style/color"; -import ESC from "../../svg/ESC.svg"; +import "../../CSS/ModalJoin.css"; +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; +import ESC from "../../../svg/ESC.svg"; import { useState, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; -import { SidebarContext } from "../../Router"; +import { SidebarContext } from "../../../Router"; const ModalJoin = ({ onClose }) => { const [isInput, setIsInput] = useState(""); diff --git a/blip-project/src/components/Page/Modal/ModalMeeting.jsx b/blip-project/src/components/Page/Modal/ModalMeeting.jsx new file mode 100644 index 0000000..f1ae4ec --- /dev/null +++ b/blip-project/src/components/Page/Modal/ModalMeeting.jsx @@ -0,0 +1,181 @@ +import "../../CSS/ModalMeeting.css"; +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; +import { useState, useContext } from "react"; +import ESC from "../../../svg/ESC.svg"; +import { UseStateContext } from "../../../Router"; +import { TeamDel } from "../Main/MainTeamOwner"; +// import { TeamDel } from "../Page/Main/Main"; + +const ModalMeeting = ({ onClose }) => { + const [isTopic, setIsTopic] = useState(""); + const [isCheckMike, setIsCheckMike] = useState(false); + const [isCheckCamera, setIsCheckCamera] = useState(false); + const { + setIsMike, + setIsCamera, + setting, + setSetting, + isAlarm, + setIsAlarm, + isLetter, + setIsLetter, + isFeedback, + setIsFeedback, + isKeyword, + setIsKeyword, + discord, + setDiscord, + } = useContext(UseStateContext); + + + const { itemId } = useContext(TeamDel); + + const onClickDiscord = () => { + console.log("key={itemId}", itemId); + if (!discord) { + setDiscord((preState) => !preState); + onClose(); + if (isLetter === true) { + setIsLetter((preState) => !preState); + } else if (isAlarm) { + setIsAlarm((preState) => !preState); + } else if (setting === true) { + setSetting((preState) => !preState); + } else if (isFeedback === true) { + setIsFeedback((preState) => !preState); + } else if (isKeyword === true) { + setIsKeyword((preState) => !preState); + } + } + }; + + const onChageTopic = (e) => { + setIsTopic(e.target.value); + console.log(e.target.value); + }; + + const onChnageCheckMike = () => { + setIsCheckMike(!isCheckMike); + setIsMike((prev) => !prev); + }; + const onChnageCheckCamera = () => { + setIsCheckCamera(!isCheckCamera); + setIsCamera((prev) => !prev); + }; + + return ( +
+
+
+
+

회의 시작하기

+

+ BLIP은 실시간 요약, 키워드 기록, 참여율 분석으로 더 스마트하고 + 효율적인 회의를 제공합니다. +

+
+ +
+
+
+
+ 회의 주제 +
+

+ 회의 주제를 정해주세요! +

+ +
+
+
+
+ 설정 +
+

+ 무엇을 허용하고 입장하실건가요? +

+
+
+
+

마이크

+ +
+
+

카메라

+ +
+
+
+
+
+ {isTopic || isCheckMike || isCheckCamera ? ( + + ) : ( + + )} +
+
+
+ ); +}; + +export default ModalMeeting; diff --git a/blip-project/src/components/Page/Modal/ModalStart.jsx b/blip-project/src/components/Page/Modal/ModalStart.jsx new file mode 100644 index 0000000..81a3881 --- /dev/null +++ b/blip-project/src/components/Page/Modal/ModalStart.jsx @@ -0,0 +1,83 @@ +import styled from "styled-components"; +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; +import ESC from "../../../svg/ESC.svg"; + +const ModalStart = ({ onClose, setIsMettingStop }) => { + const onClickStart = () => { + setIsMettingStop((prev) => !prev); + onClose() + }; + return ( + +
+
+

+ 회의를 재개하실건가요? +

+ +
+ + + 재개 + + +
+ + ); +}; + +export default ModalStart; + +const ModalStop = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.25); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +`; + +const Main = styled.div` + background-color: #ffff; + width: 30%; + height: 30%; + border-radius: 12px; + z-index: 10000; + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +const Header = styled.div` + width: 100%; + height: 20%; + display: flex; + justify-content: space-around; + align-items: center; + padding-top: 5%; + gap: 10%; +`; + +const End = styled.div` + width: 100%; + height: 30%; + display: flex; + align-items: center; + justify-content: center; +`; + +const EndButton = styled.button` + width: 90%; + height: 80%; + border: none; + border-radius: 12px; + color: #ffff; +`; diff --git a/blip-project/src/components/Page/Modal/ModalStop.jsx b/blip-project/src/components/Page/Modal/ModalStop.jsx new file mode 100644 index 0000000..711194a --- /dev/null +++ b/blip-project/src/components/Page/Modal/ModalStop.jsx @@ -0,0 +1,83 @@ +import styled from "styled-components"; +import { color } from "../../../style/color"; +import { typography } from "../../../fonts/fonts"; +import ESC from "../../../svg/ESC.svg"; + +const ModalStop = ({ onClose, setIsMettingStop }) => { + const onClickStop = () => { + setIsMettingStop((prev) => !prev); + onClose(); + }; + return ( + +
+
+

+ 회의를 종료하실건가요? +

+ +
+ + + 종료 + + +
+ + ); +}; + +export default ModalStop; + +const ModalStart = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.25); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +`; + +const Main = styled.div` + background-color: #ffff; + width: 30%; + height: 30%; + border-radius: 12px; + z-index: 10000; + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +const Header = styled.div` + width: 100%; + height: 20%; + display: flex; + justify-content: space-around; + align-items: center; + padding-top: 5%; + gap: 10%; +`; + +const End = styled.div` + width: 100%; + height: 30%; + display: flex; + align-items: center; + justify-content: center; +`; + +const EndButton = styled.button` + width: 90%; + height: 80%; + border: none; + border-radius: 12px; + color: #ffff; +`; diff --git a/blip-project/src/components/DateTeam.jsx b/blip-project/src/components/Page/Src/DateTeam.jsx similarity index 80% rename from blip-project/src/components/DateTeam.jsx rename to blip-project/src/components/Page/Src/DateTeam.jsx index 2e394fb..ca8fb8e 100644 --- a/blip-project/src/components/DateTeam.jsx +++ b/blip-project/src/components/Page/Src/DateTeam.jsx @@ -1,6 +1,6 @@ -import "./CSS/DateTeam.css"; -import { color } from "../style/color"; -import { typography } from "../fonts/fonts"; +import "../../CSS/DateTeam.css"; +import { color } from "../../../style/color"; +import { typography } from "../../../fonts/fonts"; import { useState } from "react"; const DateTeamJoinNo = () => { @@ -10,50 +10,44 @@ const DateTeamJoinNo = () => { const year = currentDate.getFullYear(); const month = currentDate.getMonth(); - //달의 첫 날 const firstDayOfMonth = new Date(year, month, 1); - //달력 시작을 일욜로 지정 const startDay = new Date(firstDayOfMonth); startDay.setDate(1 - firstDayOfMonth.getDay()); - //달의 막 날 const lastDayOfMonth = new Date(year, month + 1, 0); - //달력 마지막을 토욜로 지정 const endDay = new Date(lastDayOfMonth); endDay.setDate(lastDayOfMonth.getDate() + (6 - lastDayOfMonth.getDay())); const groupDatesByWeek = (startDay, endDay) => { - const weeks = []; //주 단위: 최종 - let currentWeek = []; //주 단위 : 현재 주 - let currentDay = new Date(startDay); // 시작 날짜로 초가화 + const weeks = []; + let currentWeek = []; + let currentDay = new Date(startDay); while (currentDay <= endDay) { - currentWeek.push(new Date(currentDay)); // 현재 날짜를 현재 주의 추가 + currentWeek.push(new Date(currentDay)); if (currentWeek.length === 7 || currentDate.getDay() === 6) { weeks.push(currentWeek); currentWeek = []; } - currentDay.setDate(currentDay.getDate() + 1); //현재 날짜를 담날로 변경 + currentDay.setDate(currentDay.getDate() + 1); } - // 마지막 주 처리 (만약 남아있다면) + if (currentWeek.length > 0) { - weeks.push(currentWeek); // 남아 있는 날짜가 있다면 마지막 주로 weeks에 추가 + weeks.push(currentWeek); } - return weeks; // 주 단위로 그룹화된 날짜 배열들을 반환 + return weeks; }; const handlePrevMonth = () => { - //이전 달 이동 setCurrentDate( new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1) ); }; const handleNextMonth = () => { - //담 달 이동 setCurrentDate( new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1) ); @@ -79,7 +73,7 @@ const DateTeamJoinNo = () => {

{year}년

{/* 년도 */}

{currentDate.toLocaleString("default", { month: "long" })} -

{" "} + {/* 월 */}
diff --git a/blip-project/src/components/Page/Src/MeetingTeam.jsx b/blip-project/src/components/Page/Src/MeetingTeam.jsx new file mode 100644 index 0000000..6102ba9 --- /dev/null +++ b/blip-project/src/components/Page/Src/MeetingTeam.jsx @@ -0,0 +1,88 @@ +import "../../CSS/MeetingTeam.css"; +import { color } from "../../../style/color"; +import { typography } from "../../../fonts/fonts"; +import { useState, useContext } from "react"; +import { useLocation } from "react-router-dom"; +import { UseStateContext } from "../../../Router"; +import { FindId } from "../Main/MainTeamOwner"; +// import { FindId } from "../Main/Main"; +import ModalMeeting from "../Modal/ModalMeeting"; +import MettingContent from "./page/MeetingContent"; + +const MeetingTeam = () => { + const location = useLocation(); + const [isModalOpen, setIsModalOpen] = useState(false); + const { discord, meetingEnd, setMeetingEnd } = useContext(UseStateContext); + const { targetId, setTargetId } = useContext(FindId); + const modalOpen = () => setIsModalOpen(true); + const modalClose = () => setIsModalOpen(false); + + const onClickMeetingEnd = () => { + setTargetId(null); + console.log(targetId); + if (!meetingEnd) { + setMeetingEnd((preState) => !preState); + } + }; + + return ( + <> +
+
+ 지난 회의 내용 요약 +
+ +
+ {discord ? ( + + ) : location.pathname === "/TeamOwner" ? ( + + ) : ( + + )} + {isModalOpen && } + + ); +}; + +export default MeetingTeam; diff --git a/blip-project/src/components/Member.jsx b/blip-project/src/components/Page/Src/Member.jsx similarity index 79% rename from blip-project/src/components/Member.jsx rename to blip-project/src/components/Page/Src/Member.jsx index 6601686..49fa503 100644 --- a/blip-project/src/components/Member.jsx +++ b/blip-project/src/components/Page/Src/Member.jsx @@ -1,16 +1,14 @@ -import "./CSS/Member.css"; -import { color } from "../style/color"; -import { typography } from "../fonts/fonts"; -import MemberSVG from "../svg/member.svg"; -import { useEffect, useContext, useState } from "react"; -import { useLocation } from "react-router-dom"; -import { TeamDel } from "./MainTeamOwner"; -import { UseStateContext } from "../Router"; -import Setting from "../svg/setting.svg"; -import Plus from "../svg/plus.svg"; +import "../../CSS/Member.css"; +import { color } from "../../../style/color"; +import { typography } from "../../../fonts/fonts"; +import { useContext, useState } from "react"; +import { TeamDel } from "../Main/MainTeamOwner"; +import { UseStateContext } from "../../../Router"; +import MemberSVG from "../../../svg/member.svg"; +import Setting from "../../../svg/setting.svg"; +import Plus from "../../../svg/plus.svg"; const Member = ({ filterId }) => { - const location = useLocation(); const { itemId } = useContext(TeamDel) || {}; const { setSetting, diff --git a/blip-project/src/components/Page/Src/function/Grid.jsx b/blip-project/src/components/Page/Src/function/Grid.jsx new file mode 100644 index 0000000..eee3644 --- /dev/null +++ b/blip-project/src/components/Page/Src/function/Grid.jsx @@ -0,0 +1,261 @@ +import "../../../CSS/Grid.css" +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; +import { useContext, useEffect } from "react"; +import { TeamDel } from "../../Main/MainTeamOwner"; +import { UseStateContext } from "../../../../Router"; +import { DiscordContext } from "../../../../Router"; +import NoMike from "../../../../svg/NoMike.svg"; +import NoCamera from "../../../../svg/noCamera.svg"; +import Mike from "../../../../svg/Mike.svg"; +import Camera from "../../../../svg/DisCamera.svg"; + +const SpeechRecognition = + window.SpeechRecognition || window.webkitSpeechRecognition; + +const FullGrid = () => { + const { itemId } = useContext(TeamDel); + + const { isMike, setIsMike, isCamera, setIsCamera } = + useContext(UseStateContext); + + const { + isListening, + setIsListening, + setTranscript, + videoRef, + stream, + setStream, + } = useContext(DiscordContext); + + const recognition = new SpeechRecognition(); + recognition.lang = "ko-KR"; + recognition.continuous = true; + recognition.interimResults = true; + + useEffect(() => { + const getMediaStream = async () => { + if (!videoRef.current) return; + + try { + const useStream = await navigator.mediaDevices.getUserMedia({ + video: { + width: { ideal: 1280 }, + height: { ideal: 720 }, + frameRate: { ideal: 30 }, + }, + audio: true, + }); + if (stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + } + if (videoRef.current) { + videoRef.current.srcObject = useStream; + } + setStream(useStream); + } catch (error) { + console.error("MediaStream 에러:", error); + } + }; + if (isCamera && !stream) { + getMediaStream(); + } else if (!isCamera && stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + setStream(null); + if (videoRef.current) { + videoRef.current.srcObject = null; + } + } + + return () => { + if (stream) { + const tracks = stream.getTracks(); + tracks.forEach((track) => track.stop()); + } + }; + }, [isCamera, stream]); + + useEffect(() => { + console.log(isListening) + if (isListening) { + recognition.start(); + } else { + recognition.stop(); + } + recognition.onresult = (e) => { + const newTracript = e.results[0][0].transcript; + setTranscript(newTracript); + }; + recognition.onerror = (error) => { + console.log("음성인식 오류", error.error); + }; + return () => { + recognition.stop(); + }; + }, [isListening]); + + const onClickMike = () => { + setIsMike((preState) => !preState); + setIsListening((preState) => !preState); + }; + + const onClickCamera = () => { + setIsCamera((preState) => !preState); + }; + + const users = [ + { id: 1, name: "유저1", isCameraOn: true }, + { id: 2, name: "유저2", isCameraOn: false }, + { id: 3, name: "유저3", isCameraOn: true }, + // { id: 4, name: "유저4", isCameraOn: true }, + // { id: 4, name: "유저4", isCameraOn: true }, + ]; + + return ( +
+ {users.length > 1 && users.length % 2 === 1 ? ( + <> + {users.slice(0, users.length - 1).map((users, index) => ( +
+ {isCamera ? ( + <> +
+ ))} +
+
+ {users[users.length - 1].isCameraOn && isCamera ? ( + //1개 이상이고 홀수 일때 마지막 요소 + <> +
+
+ + ) : ( + <> + {users.map((user) => ( +
+ {isCamera ? ( + <> +
+ ))} + + )} +
+ ); +}; + +export default FullGrid; diff --git a/blip-project/src/components/Page/Src/function/graph.jsx b/blip-project/src/components/Page/Src/function/graph.jsx new file mode 100644 index 0000000..4d5fdce --- /dev/null +++ b/blip-project/src/components/Page/Src/function/graph.jsx @@ -0,0 +1,78 @@ +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; +import React from "react"; +import ReactApexChart from "react-apexcharts"; +import GraphImg from "../../../../svg/Graph.svg"; + +const Graph = () => { + const [state, setState] = React.useState({ + series: [5, 95], // 두 개의 값을 사용 + options: { + chart: { + type: "donut", + }, + labels: [], // 레이블을 빈 배열로 설정하여 외부 레이블 제거 + plotOptions: { + pie: { + donut: { + size: "60%", // 도넛 크기 설정 + labels: { + show: true, // 가운데 값 표시 + name: { + show: false, // 이름은 숨김 + }, + value: { + show: true, // 값 표시 + fontSize: "22px", // 값의 폰트 크기 + fontWeight: "bold", // 값의 폰트 굵기 + color: color.Main[4], // 값의 색상 + }, + total: { + show: true, // 총합 표시하지 않음 + label: "Total", // 이 부분은 총합 레이블 설정 + formatter: function (w) { + return `${w.globals.series[1]}%`; // 첫 번째 값만 표시 + }, + }, + }, + }, + }, + }, + dataLabels: { + enabled: false, // 데이터 라벨을 비활성화하여 값만 나타나게 함 + }, + legend: { + show: false, + }, + colors: [color.Main[0], color.Main[4]], + }, + }); + return ( +
+
+
+
회의 참여율 확인하기
+

+ 가장 최근 회의율은 95%입니다 +

+
+
+ +
+
+
+ +
+ ); +}; + +export default Graph; diff --git a/blip-project/src/components/MeetingTeam.jsx b/blip-project/src/components/Page/Src/metting/MeetingTeam.jsx similarity index 89% rename from blip-project/src/components/MeetingTeam.jsx rename to blip-project/src/components/Page/Src/metting/MeetingTeam.jsx index 79f1442..36e4bc0 100644 --- a/blip-project/src/components/MeetingTeam.jsx +++ b/blip-project/src/components/Page/Src/metting/MeetingTeam.jsx @@ -1,11 +1,11 @@ import "./CSS/MeetingTeam.css"; -import { color } from "../style/color"; -import { typography } from "../fonts/fonts"; +import { color } from "../../../style/color"; +import { typography } from "../../../fonts/fonts"; import { useState, useContext } from "react"; import { useLocation } from "react-router-dom"; -import { UseStateContext } from "../Router"; -import ModalMeeting from "./Modal/ModalMeeting"; -import MettingContent from "./MeetingContent"; +import { UseStateContext } from "../../../Router"; +import ModalMeeting from "../../Modal/ModalMeeting"; +import MettingContent from "./page/MeetingContent"; const MeetingTeam = () => { const location = useLocation(); diff --git a/blip-project/src/components/AlarmTeam.jsx b/blip-project/src/components/Page/Src/page/AlarmTeam.jsx similarity index 77% rename from blip-project/src/components/AlarmTeam.jsx rename to blip-project/src/components/Page/Src/page/AlarmTeam.jsx index 4bb23c9..40d7ad8 100644 --- a/blip-project/src/components/AlarmTeam.jsx +++ b/blip-project/src/components/Page/Src/page/AlarmTeam.jsx @@ -1,6 +1,6 @@ -import "./CSS/AlarmTeam.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; +import "../../../CSS/AlarmTeam.css"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; import { useLocation } from "react-router-dom"; const Alarm = () => { diff --git a/blip-project/src/components/Page/Src/page/Discord.jsx b/blip-project/src/components/Page/Src/page/Discord.jsx new file mode 100644 index 0000000..e8561dd --- /dev/null +++ b/blip-project/src/components/Page/Src/page/Discord.jsx @@ -0,0 +1,167 @@ +import "../../../CSS/Discord.css"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; +import DisAlarm from "../../../../svg/DisAlarm.svg"; +import NoMike from "../../../../svg/NoMike.svg"; +import NoCamera from "../../../../svg/noCamera.svg"; +import Mike from "../../../../svg/Mike.svg"; +import Camera from "../../../../svg/DisCamera.svg"; +import Fullscreen from "../../../../svg/FullScreen.svg"; +import X from "../../../../svg/X.svg"; +import MettingStop from "../../../../svg/MettingStop.svg"; +import MettingStart from "../../../../svg/MettingStart.svg"; +import ModalStop from "../../Modal/ModalStop"; +import ModalStart from "../../Modal/ModalStart"; +import Grid from "../function/Grid"; +import { useContext, useState } from "react"; +import { TeamDel } from "../../Main/MainTeamOwner"; +import { UseStateContext } from "../../../../Router"; +import { DiscordContext } from "../../../../Router"; +import { FindId } from "../../Main/MainTeamOwner"; +import UserStart from "./UserStart"; + +const Discord = () => { + const { itemId } = useContext(TeamDel); + const [isMettingStop, setIsMettingStop] = useState(false); + + const { targetId } = useContext(FindId); + + const { + isMike, + setIsMike, + isCamera, + setIsCamera, + FullScreen, + setFullScreen, + setDiscord, + meetingEnd, + setMeetingEnd, + } = useContext(UseStateContext); + + const { setIsListening } = useContext(DiscordContext); + + const onClickMike = () => { + if (!isCamera) { + setIsMike((preState) => !preState); + } + setIsListening((preState) => !preState); + }; + + const onClickCamera = () => { + setIsCamera((preState) => !preState); + if (!isMike) { + setIsMike((preState) => !preState); + } + }; + + const onClickFull = () => { + if (!FullScreen) { + setFullScreen((preState) => !preState); + } + }; + + const onClickEnd = () => { + setMeetingEnd((preState) => !preState); + setDiscord((preState) => !preState); + }; + + const [isModalOpen, setIsModalOpen] = useState(false); + const [isModalStart, setIsModalStart] = useState(false); + + const openModalStop = () => setIsModalOpen(true); + const closeModal = () => setIsModalOpen(false); + + const openModalStart = () => setIsModalStart(true); + const IsCloseModal = () => setIsModalStart(false); + + return ( + <> + {meetingEnd ? ( +
+
+
+ +
+
+
회의가 종료되었어요.
+

+ BLIP이 회의를 요약해서 알려드릴게요! +

+
+
+
+ ) : ( + <> + {itemId === targetId ? ( +
+
+ +
+
+ {itemId % 2 === 0 ? ( + <> +
+ + +
+ + ) : ( + "" + )} +
+
+ + +
+ +
+
+ {isModalStart && ( + + )} + {isModalOpen && ( + + )} +
+ ) : ( + + )} + + )} + + ); +}; + +export default Discord; diff --git a/blip-project/src/components/Feedback.jsx b/blip-project/src/components/Page/Src/page/Feedback.jsx similarity index 66% rename from blip-project/src/components/Feedback.jsx rename to blip-project/src/components/Page/Src/page/Feedback.jsx index cf0230a..a246b97 100644 --- a/blip-project/src/components/Feedback.jsx +++ b/blip-project/src/components/Page/Src/page/Feedback.jsx @@ -1,6 +1,6 @@ -import "./CSS/Feedback.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; +import "../../../CSS/Feedback.css"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; const Feedback = () => { return ( diff --git a/blip-project/src/components/HeaderTeam.jsx b/blip-project/src/components/Page/Src/page/HeaderTeam.jsx similarity index 86% rename from blip-project/src/components/HeaderTeam.jsx rename to blip-project/src/components/Page/Src/page/HeaderTeam.jsx index 9962134..594219f 100644 --- a/blip-project/src/components/HeaderTeam.jsx +++ b/blip-project/src/components/Page/Src/page/HeaderTeam.jsx @@ -1,10 +1,10 @@ -import "./CSS/HeaderTeam.css"; -import Alarm from "../svg/Alarm.svg"; -import blackLogo from "../svg/blackLogo.svg"; -import Letter from "../svg/letter.svg"; +import "../../../CSS/HeaderTeam.css"; +import Alarm from "../../../../svg/Alarm.svg" +import blackLogo from "../../../../svg/blackLogo.svg"; +import Letter from "../../../../svg/letter.svg"; import { useNavigate } from "react-router-dom"; import { useContext } from "react"; -import { UseStateContext } from "../Router"; +import { UseStateContext } from "../../../../Router"; const HeaderTeam = () => { const nav = useNavigate(); diff --git a/blip-project/src/components/Keyword.jsx b/blip-project/src/components/Page/Src/page/Keyword.jsx similarity index 68% rename from blip-project/src/components/Keyword.jsx rename to blip-project/src/components/Page/Src/page/Keyword.jsx index 0f34a0e..e090df7 100644 --- a/blip-project/src/components/Keyword.jsx +++ b/blip-project/src/components/Page/Src/page/Keyword.jsx @@ -1,6 +1,6 @@ -import "./CSS/Keyword.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; +import "../../../CSS/Keyword.css"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; const Keyword = () => { return ( diff --git a/blip-project/src/components/LetterTeam.jsx b/blip-project/src/components/Page/Src/page/LetterTeam.jsx similarity index 77% rename from blip-project/src/components/LetterTeam.jsx rename to blip-project/src/components/Page/Src/page/LetterTeam.jsx index fa9f040..8f7cce7 100644 --- a/blip-project/src/components/LetterTeam.jsx +++ b/blip-project/src/components/Page/Src/page/LetterTeam.jsx @@ -1,6 +1,6 @@ -import "./CSS/LetterTeam.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; +import "../../../CSS/LetterTeam.css"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; import { useLocation } from "react-router-dom"; const Letter = () => { diff --git a/blip-project/src/components/MeetingContent.jsx b/blip-project/src/components/Page/Src/page/MeetingContent.jsx similarity index 65% rename from blip-project/src/components/MeetingContent.jsx rename to blip-project/src/components/Page/Src/page/MeetingContent.jsx index 5c66d0f..e170034 100644 --- a/blip-project/src/components/MeetingContent.jsx +++ b/blip-project/src/components/Page/Src/page/MeetingContent.jsx @@ -1,6 +1,6 @@ -import "./CSS/MeetingContent.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; +import "../../../CSS/MeetingContent.css" +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; const MeetingContent = () => { return ( diff --git a/blip-project/src/components/OwnerTeam.jsx b/blip-project/src/components/Page/Src/page/OwnerTeam.jsx similarity index 89% rename from blip-project/src/components/OwnerTeam.jsx rename to blip-project/src/components/Page/Src/page/OwnerTeam.jsx index f2c276a..cc0095f 100644 --- a/blip-project/src/components/OwnerTeam.jsx +++ b/blip-project/src/components/Page/Src/page/OwnerTeam.jsx @@ -1,12 +1,13 @@ -import "./CSS/OwnerTeam.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; +import "../../../CSS/OwnerTeam.css"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; import { useRef, useState, useContext } from "react"; import { useNavigate } from "react-router-dom"; -import { TeamDel } from "./MainTeamOwner"; -import { UseStateContext } from "../Router"; -import ModalDel from "./Modal/ModalDel"; -import Camera from "../svg/camera.svg"; +import { TeamDel } from "../../Main/MainTeamOwner"; +// import { TeamDel } from "../../Main/Main"; +import { UseStateContext } from "../../../../Router"; +import ModalDel from "../../Modal/ModalDel"; +import Camera from "../../../../svg/camera.svg"; const OwnerTeam = () => { const fileInputImg = useRef(null); diff --git a/blip-project/src/components/StartTeamJoinNo.jsx b/blip-project/src/components/Page/Src/page/StartTeamJoinNo.jsx similarity index 91% rename from blip-project/src/components/StartTeamJoinNo.jsx rename to blip-project/src/components/Page/Src/page/StartTeamJoinNo.jsx index e4df31a..482dba3 100644 --- a/blip-project/src/components/StartTeamJoinNo.jsx +++ b/blip-project/src/components/Page/Src/page/StartTeamJoinNo.jsx @@ -1,10 +1,10 @@ -import "./CSS/StartTeamJoinNo.CSS"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; -import Modal from "./Modal/Modal"; +import "../../../CSS/StartTeamJoinNo.CSS"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; +import Modal from "../../Modal/Modal"; import { useState, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; -import { SidebarContext } from "../Router"; +import { SidebarContext } from "../../../../Router"; const StartTeamJoinNo = () => { const [isModalOpen, setIsModalOpen] = useState(false); diff --git a/blip-project/src/components/UserStart.jsx b/blip-project/src/components/Page/Src/page/UserStart.jsx similarity index 52% rename from blip-project/src/components/UserStart.jsx rename to blip-project/src/components/Page/Src/page/UserStart.jsx index d70d841..507a3b9 100644 --- a/blip-project/src/components/UserStart.jsx +++ b/blip-project/src/components/Page/Src/page/UserStart.jsx @@ -1,58 +1,14 @@ -import "./CSS/UserStart.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; -import FeedbackSvg from "../svg/feedback.svg"; -import Graph from "../svg/Graph.svg"; -import React from "react"; -import ReactApexChart from "react-apexcharts"; +import "../../../CSS/UserStart.css"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; +import FeedbackSvg from "../../../../svg/feedback.svg"; import { useContext } from "react"; -import { UseStateContext } from "../Router"; +import { UseStateContext } from "../../../../Router"; import Feedback from "./Feedback"; -import Keyword from "./keyword"; +import Keyword from "./Keyword"; +import Graph from "../function/graph"; const UserStart = () => { - const [state, setState] = React.useState({ - series: [5, 95], // 두 개의 값을 사용 - options: { - chart: { - type: "donut", - }, - labels: [], // 레이블을 빈 배열로 설정하여 외부 레이블 제거 - plotOptions: { - pie: { - donut: { - size: "60%", // 도넛 크기 설정 - labels: { - show: true, // 가운데 값 표시 - name: { - show: false, // 이름은 숨김 - }, - value: { - show: true, // 값 표시 - fontSize: "22px", // 값의 폰트 크기 - fontWeight: "bold", // 값의 폰트 굵기 - color: color.Main[4], // 값의 색상 - }, - total: { - show: true, // 총합 표시하지 않음 - label: "Total", // 이 부분은 총합 레이블 설정 - formatter: function (w) { - return `${w.globals.series[1]}%`; // 첫 번째 값만 표시 - }, - }, - }, - }, - }, - }, - dataLabels: { - enabled: false, // 데이터 라벨을 비활성화하여 값만 나타나게 함 - }, - legend: { - show: false, - }, - colors: [color.Main[1], color.Main[4]], - }, - }); const { setting, @@ -147,33 +103,7 @@ const UserStart = () => {
-
-
-
-
회의 참여율 확인하기
-

- 가장 최근 회의율은 95%입니다 -

-
-
- -
-
-
- -
+
)} diff --git a/blip-project/src/components/sidebarTeam.jsx b/blip-project/src/components/Page/Src/sidebarTeam.jsx similarity index 72% rename from blip-project/src/components/sidebarTeam.jsx rename to blip-project/src/components/Page/Src/sidebarTeam.jsx index 89575b6..01aa909 100644 --- a/blip-project/src/components/sidebarTeam.jsx +++ b/blip-project/src/components/Page/Src/sidebarTeam.jsx @@ -1,16 +1,17 @@ -import "./CSS/sidebarTeam.css"; -import { typography } from "../fonts/fonts"; -import { color } from "../style/color"; +import "../../CSS/sidebarTeam.css"; +import { typography } from "../../../fonts/fonts"; +import { color } from "../../../style/color"; import { useContext, useEffect, useState } from "react"; -import { SidebarContext } from "../Router"; -import { UseStateContext } from "../Router"; -import { TeamDel } from "./MainTeamOwner"; +import { SidebarContext } from "../../../Router"; +import { UseStateContext } from "../../../Router"; +import { TeamDel } from "../Main/MainTeamOwner"; import { useNavigate } from "react-router-dom"; const SidebarTeam = () => { const nav = useNavigate(); const { todos } = useContext(SidebarContext); const { image = "", itemId = null } = useContext(TeamDel) || {}; + const { meetingEnd } = useContext(UseStateContext); // const [isFirstLoad, setIsFirstLoad] = useState(false); // const [targetId, setTargetId] = useState(null); // targetId 상태 추가 @@ -57,32 +58,36 @@ const SidebarTeam = () => { const onClickEffect = (item) => { // setTargetId(item.id) - if (item.isPlus) { - nav("/", { state: {} }); + if (!meetingEnd) { + return; } else { - if (item.id % 2 == 0) { - nav("/TeamOwner", { - state: { - itemContent: item.content, - itemId: item.id, - itemImage: image, - }, - }); - console.log(item.id); - } else if (item.id % 2 == 1) { - nav("/TeamJoin", { state: {} }); + if (item.isPlus) { + nav("/", { state: {} }); + } else { + if (item.id % 2 == 0) { + nav("/TeamOwner", { + state: { + itemContent: item.content, + itemId: item.id, + itemImage: image, + }, + }); + console.log(item.id); + } else if (item.id % 2 == 1) { + nav("/TeamJoin", { state: {} }); + } + } + if (isLetter === true) { + setIsLetter((preState) => !preState); + } else if (setting === true) { + setSetting((preState) => !preState); + } else if (isAlarm === true) { + setIsAlarm((preState) => !preState); + } else if (isKeyword === true) { + setIsKeyword((preState) => !preState); + } else if (isFeedback === true) { + setIsFeedback((preState) => !preState); } - } - if (isLetter === true) { - setIsLetter((preState) => !preState); - } else if (setting === true) { - setSetting((preState) => !preState); - } else if (isAlarm === true) { - setIsAlarm((preState) => !preState); - } else if (isKeyword === true) { - setIsKeyword((preState) => !preState); - } else if (isFeedback === true) { - setIsFeedback((preState) => !preState); } }; From 96b432cb6b83259cbde0f53c5b3d633c1b702065 Mon Sep 17 00:00:00 2001 From: tccmw Date: Mon, 17 Mar 2025 23:35:26 +0900 Subject: [PATCH 25/75] =?UTF-8?q?img=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Page/Src/page/OwnerTeam.jsx | 24 ++-- .../src/components/Page/Src/sidebarTeam.jsx | 127 +++++++++--------- 2 files changed, 75 insertions(+), 76 deletions(-) diff --git a/blip-project/src/components/Page/Src/page/OwnerTeam.jsx b/blip-project/src/components/Page/Src/page/OwnerTeam.jsx index cc0095f..a22e2ac 100644 --- a/blip-project/src/components/Page/Src/page/OwnerTeam.jsx +++ b/blip-project/src/components/Page/Src/page/OwnerTeam.jsx @@ -3,18 +3,18 @@ import { typography } from "../../../../fonts/fonts"; import { color } from "../../../../style/color"; import { useRef, useState, useContext } from "react"; import { useNavigate } from "react-router-dom"; -import { TeamDel } from "../../Main/MainTeamOwner"; -// import { TeamDel } from "../../Main/Main"; +import { TeamDel } from "../../Main/Main"; import { UseStateContext } from "../../../../Router"; +import { FindId } from "../../Main/Main"; import ModalDel from "../../Modal/ModalDel"; import Camera from "../../../../svg/camera.svg"; const OwnerTeam = () => { const fileInputImg = useRef(null); - const [image, setImage] = useState(null); const [inputFont, setInputFont] = useState(""); const [isOpenModal, setIsOpenModal] = useState(false); - const { itemContent, itemId, itemImage } = useContext(TeamDel); + const { itemContent, itemId, image, setImage } = useContext(TeamDel); + const { targetId, setTargetId } = useContext(FindId); const { setSetting } = useContext(UseStateContext); const nav = useNavigate(); @@ -26,12 +26,12 @@ const OwnerTeam = () => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { - setImage(reader.result); + setImage(reader.result); // 이미지 상태 업데이트 }; }; const handleImage = () => { - fileInputImg.current.click(); + fileInputImg.current.click(); // 이미지 업로드를 위한 파일 입력 창 열기 }; const onChnageInput = (e) => { @@ -39,8 +39,11 @@ const OwnerTeam = () => { }; const CreateImg = () => { - nav("/TeamOwner", { state: { image: image, itemId } }); - setSetting((preState) => !preState); + if (image || inputFont) { + nav("/", { state: { itemId } }); + setSetting(false); + setTargetId(null); + } }; return ( @@ -61,14 +64,13 @@ const OwnerTeam = () => { className="circle-main" style={{ "--gray-200": color.GrayScale[2] }} > - {image ? ( + {image && itemId === targetId ? ( Team Space - ) : itemImage ? ( - Click to upload ) : ( Click to upload )} diff --git a/blip-project/src/components/Page/Src/sidebarTeam.jsx b/blip-project/src/components/Page/Src/sidebarTeam.jsx index 01aa909..0cb044a 100644 --- a/blip-project/src/components/Page/Src/sidebarTeam.jsx +++ b/blip-project/src/components/Page/Src/sidebarTeam.jsx @@ -1,47 +1,19 @@ import "../../CSS/sidebarTeam.css"; import { typography } from "../../../fonts/fonts"; import { color } from "../../../style/color"; -import { useContext, useEffect, useState } from "react"; +import { useContext } from "react"; import { SidebarContext } from "../../../Router"; import { UseStateContext } from "../../../Router"; -import { TeamDel } from "../Main/MainTeamOwner"; +import { TeamDel } from "../Main/Main"; +import { FindId } from "../Main/Main"; import { useNavigate } from "react-router-dom"; const SidebarTeam = () => { const nav = useNavigate(); const { todos } = useContext(SidebarContext); - const { image = "", itemId = null } = useContext(TeamDel) || {}; - const { meetingEnd } = useContext(UseStateContext); - // const [isFirstLoad, setIsFirstLoad] = useState(false); - - // const [targetId, setTargetId] = useState(null); // targetId 상태 추가 - - // const todoIds = todos.map((todo) => todo.id).join(","); - - // useEffect(() => { - // if (!isFirstLoad && targetId !== null) { - // const targetItem = todos.find((item) => item.id === targetId); - // console.log("targetId",targetItem.id) - // if (targetItem) { - // if (targetItem.id % 2 === 0) { - // nav("/TeamOwner", { - // state: { - // itemContent: - // typeof targetItem.content === "string" - // ? targetItem.content - // : String(targetItem.content), - // itemId: targetItem.id, - // itemImage: typeof image === "string" ? image : "", // image가 문자열일 경우만 전달 - // }, - // }); - // console.log(targetItem.id); - // } else { - // nav("/TeamJoin", { state: {} }); - // } - // } - // setIsFirstLoad(true); // 네비게이션이 끝난 후 isFirstLoad를 true로 설정 - // } - // }, [targetId, todos, isFirstLoad, nav, image]); // targetId가 변경될 때만 실행 + const { image, setImage, itemId, Owner, setOwner, join, setJoin } = + useContext(TeamDel); + const { basic, setBasic, discord } = useContext(UseStateContext); const { setting, @@ -56,39 +28,63 @@ const SidebarTeam = () => { setIsKeyword, } = useContext(UseStateContext); + const { targetId, setTargetId } = useContext(FindId); + const onClickEffect = (item) => { - // setTargetId(item.id) - if (!meetingEnd) { - return; + if (item.isPlus) { + if (basic) { + setBasic((prev) => !prev); + setTargetId(item.id); + } + if (join) { + setJoin((preState) => !preState); + } + nav("/", { + state: { + itemContent: + typeof item.content === "string" ? item.content : "기본 텍스트", + itemId: item.id, + }, + }); } else { - if (item.isPlus) { - nav("/", { state: {} }); + if (item.id % 2 === 0) { + if (Owner) { + setOwner((preState) => !preState); + setTargetId(item.id); + } + if (!basic) { + setBasic((prev) => !prev); + setTargetId(item.id); + } + if (join) { + setJoin((preState) => !preState); + } + console.log(targetId) } else { - if (item.id % 2 == 0) { - nav("/TeamOwner", { - state: { - itemContent: item.content, - itemId: item.id, - itemImage: image, - }, - }); - console.log(item.id); - } else if (item.id % 2 == 1) { - nav("/TeamJoin", { state: {} }); + if (!join) { + setJoin((preState) => !preState); + } + if (!basic) { + setBasic((prev) => !prev); + } + if (Owner) { + setOwner((preState) => !preState); } } - if (isLetter === true) { - setIsLetter((preState) => !preState); - } else if (setting === true) { - setSetting((preState) => !preState); - } else if (isAlarm === true) { - setIsAlarm((preState) => !preState); - } else if (isKeyword === true) { - setIsKeyword((preState) => !preState); - } else if (isFeedback === true) { - setIsFeedback((preState) => !preState); - } + nav("/", { + state: { + itemContent: + typeof item.content === "string" ? item.content : "기본 텍스트", + itemId: item.id, + }, + }); } + + if (isLetter) setIsLetter(false); + if (setting) setSetting(false); + if (isAlarm) setIsAlarm(false); + if (isKeyword) setIsKeyword(false); + if (isFeedback) setIsFeedback(false); }; return ( @@ -101,15 +97,15 @@ const SidebarTeam = () => { className={`content-item${ item.isPlus ? "-plus" - : image && item.id === itemId + : item.id === targetId && image ? "-image" : "" }`} - onClick={() => onClickEffect(item)} + onClick={discord ? undefined : () => onClickEffect(item)} style={{ ...typography.Header2, backgroundColor: - item.isPlus || (image && item.id === itemId) + item.isPlus || item.id === targetId ? "transparent" : color.GrayScale[1], }} @@ -117,7 +113,7 @@ const SidebarTeam = () => { {item.isPlus ? ( item.content - ) : image && item.id === itemId ? ( + ) : item.id === targetId && image ? ( { height: "100%", objectFit: "contain", }} + alt="Team Space" /> ) : ( item.content From dd545f23477866f7027b5bd62477f22d366a050e Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 18 Mar 2025 08:23:05 +0900 Subject: [PATCH 26/75] =?UTF-8?q?=EB=82=A0=EC=95=84=EA=B0=88=EB=BB=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blip-project/package-lock.json | 8 ++ blip-project/package.json | 1 + blip-project/src/Router.jsx | 37 +++-- .../src/components/CSS/sidebarTeam.css | 5 +- .../src/components/Page/Main/FullScreen.jsx | 2 +- .../src/components/Page/Main/Main.jsx | 76 ++++++++++ .../src/components/Page/Main/MainTeam.jsx | 61 ++------ .../components/Page/Main/MainTeamJoinNo.jsx | 38 ----- .../components/Page/Main/MainTeamOwner.jsx | 59 ++------ .../src/components/Page/Main/StartTeam.jsx | 11 +- .../src/components/Page/Modal/ModalCreate.jsx | 8 +- .../src/components/Page/Modal/ModalDel.jsx | 12 +- .../src/components/Page/Modal/ModalJoin.jsx | 17 ++- .../components/Page/Modal/ModalMeeting.jsx | 48 ++++--- .../src/components/Page/Src/MeetingTeam.jsx | 60 ++++++-- .../src/components/Page/Src/Member.jsx | 7 +- .../src/components/Page/Src/function/Grid.jsx | 135 +++++++++++++----- .../components/Page/Src/function/useMike.jsx | 55 +++++++ .../Page/Src/metting/MeetingTeam.jsx | 2 +- .../src/components/Page/Src/page/Discord.jsx | 34 ++--- .../components/Page/Src/page/OwnerTeam.jsx | 23 ++- .../Page/Src/page/StartTeamJoinNo.jsx | 2 +- 22 files changed, 449 insertions(+), 252 deletions(-) create mode 100644 blip-project/src/components/Page/Main/Main.jsx create mode 100644 blip-project/src/components/Page/Src/function/useMike.jsx diff --git a/blip-project/package-lock.json b/blip-project/package-lock.json index 0876da5..ec08921 100644 --- a/blip-project/package-lock.json +++ b/blip-project/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "apexcharts": "^4.4.0", + "lib-jitsi-meet": "^1.0.6", "react": "^18.3.1", "react-apexcharts": "^1.7.0", "react-dom": "^18.3.1", @@ -3307,6 +3308,13 @@ "node": ">= 0.8.0" } }, + "node_modules/lib-jitsi-meet": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/lib-jitsi-meet/-/lib-jitsi-meet-1.0.6.tgz", + "integrity": "sha512-Hnp8F7btmIFBGh5hgli1uTzb7c7IgWBgTMFu4GnSasE8sx23RcTerXBjH+XZcsGsxnoW3pFKlU77za1a0o3qhw==", + "deprecated": "Deprecated. lib-jitsi-meet is not distributed via npm, use the source.", + "license": "Apache-2.0" + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", diff --git a/blip-project/package.json b/blip-project/package.json index 4f198ab..e346b2c 100644 --- a/blip-project/package.json +++ b/blip-project/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "apexcharts": "^4.4.0", + "lib-jitsi-meet": "^1.0.6", "react": "^18.3.1", "react-apexcharts": "^1.7.0", "react-dom": "^18.3.1", diff --git a/blip-project/src/Router.jsx b/blip-project/src/Router.jsx index 5c57e9c..36fd929 100644 --- a/blip-project/src/Router.jsx +++ b/blip-project/src/Router.jsx @@ -1,8 +1,6 @@ import "./Router.css"; import { Route, Routes } from "react-router-dom"; -import MainTeamJoinNo from "./components/Page/Main/MainTeamJoinNo"; -import MainTeamJoin from "./components/Page/Main/MainTeam"; -import MainTeamOwner from "./components/Page/Main/MainTeamOwner"; +import Main from "./components/Page/Main/Main"; import SidebarImg from "./svg/add.svg"; import { useRef, @@ -41,6 +39,7 @@ function reducer(state, action) { export const SidebarContext = createContext(); export const UseStateContext = createContext(); export const DiscordContext = createContext(); +export const Call = createContext(); export const AppRouter = () => { const [todos, dispatch] = useReducer(reducer, mocDateSide); @@ -110,6 +109,13 @@ export const AppRouter = () => { const [transcript, setTranscript] = useState(""); const videoRef = useRef(null); const [stream, setStream] = useState(null); + const [basic, setBasic] = useState(null); + const [TeamJoin, setTeamJoin] = useState(null); + const [targetId, setTargetId] = useState(null); + + const [recorder, setRecorder] = useState(null); + const [recordedChunks, setRecordedChunks] = useState([]); + const [isUploading, setIsUploading] = useState(false); return ( { setIsCamera, meetingEnd, setMeetingEnd, + targetId, + setTargetId, + basic, + setBasic, + TeamJoin, + setTeamJoin, }} > { setStream, }} > - - } /> - } /> - } /> - + + + } /> + + diff --git a/blip-project/src/components/CSS/sidebarTeam.css b/blip-project/src/components/CSS/sidebarTeam.css index c7fdfc5..bc087a8 100644 --- a/blip-project/src/components/CSS/sidebarTeam.css +++ b/blip-project/src/components/CSS/sidebarTeam.css @@ -38,9 +38,8 @@ } .content-item-image { - margin-bottom: 15%; - min-width: 90%; - min-height: 2%; + margin-bottom: 20%; + width: 90%; aspect-ratio: 1 / 1; border-radius: 12px; display: flex; diff --git a/blip-project/src/components/Page/Main/FullScreen.jsx b/blip-project/src/components/Page/Main/FullScreen.jsx index 6abe8a7..a41e06a 100644 --- a/blip-project/src/components/Page/Main/FullScreen.jsx +++ b/blip-project/src/components/Page/Main/FullScreen.jsx @@ -1,7 +1,7 @@ import "../../CSS/FullScreen.css"; import { color } from "../../../style/color"; import { useContext, useState } from "react"; -import { TeamDel } from "./MainTeamOwner"; +import { TeamDel } from "./Main"; import { UseStateContext } from "../../../Router"; import { DiscordContext } from "../../../Router"; import ModalStart from "../Modal/ModalStart"; diff --git a/blip-project/src/components/Page/Main/Main.jsx b/blip-project/src/components/Page/Main/Main.jsx new file mode 100644 index 0000000..5ac2504 --- /dev/null +++ b/blip-project/src/components/Page/Main/Main.jsx @@ -0,0 +1,76 @@ +import MainTeam from "./MainTeam"; +import MainTeamOwner from "./MainTeamOwner"; +import MTeamJoinNo from "./MainTeamJoinNo"; +import FullScreenPage from "./FullScreen"; +import { useLocation } from "react-router-dom"; +import { SidebarContext } from "../../../Router"; +import { UseStateContext } from "../../../Router"; +import { createContext, useState, useContext, useEffect } from "react"; + +export const TeamDel = createContext(); +export const FindId = createContext({ + filteredItem: null, + targetId: null, + setTargetId: () => {}, +}); + +const Main = () => { + const location = useLocation(); + const { itemContent, itemId, itemImage } = location.state || {}; + const { todos } = useContext(SidebarContext); + const [filteredItem, setFilteredItem] = useState(null); + const { FullScreen, targetId, setTargetId } = useContext(UseStateContext); + const [Owner, setOwner] = useState(null); + const [join, setJoin] = useState(null); + const [image, setImage] = useState(null) + + useEffect(() => { + const matchingId = todos.find((item) => item.id === itemId); + setFilteredItem(matchingId); + }, [todos, itemId]); + + useEffect(() => { + if (targetId === null) { + const foodId = todos.find((item) => item.id === itemId)?.id || null; + setTargetId(foodId); + console.log(targetId); + } + }, [targetId, itemId, todos, setTargetId]); + + return ( + <> + + + {FullScreen ? ( + + ) : ( + <> + {Owner ? ( + + ) : join ? ( + + ) : ( + + )} + + )} + + + + ); +}; + +export default Main; diff --git a/blip-project/src/components/Page/Main/MainTeam.jsx b/blip-project/src/components/Page/Main/MainTeam.jsx index 4998d36..9d2a81d 100644 --- a/blip-project/src/components/Page/Main/MainTeam.jsx +++ b/blip-project/src/components/Page/Main/MainTeam.jsx @@ -4,59 +4,20 @@ import HeaderTeam from "../Src/page/HeaderTeam"; import SidebarTeam from "../Src/sidebarTeam"; import StartTeam from "./StartTeam"; import MeetingTeam from "../Src/MeetingTeam"; -import FullScreenPage from "./FullScreen"; -import { useLocation } from "react-router-dom"; -import { SidebarContext } from "../../../Router"; -import { UseStateContext } from "../../../Router"; -import { createContext, useState, useContext, useEffect } from "react"; - -// export const TeamDel = createContext(); -// export const FindId = createContext(); const MainTeam = () => { - // const location = useLocation(); - // const { itemContent, itemId, image, itemImage } = location.state || {}; - // const { todos } = useContext(SidebarContext); - // const [filteredItem, setFilteredItem] = useState(null); - // const { FullScreen } = useContext(UseStateContext); - - // useEffect(() => { - // const matchingId = todos.find((item) => item.id === itemId); - // setFilteredItem(matchingId); - // }, [todos, itemId]); - - // const [targetId, setTargetId] = useState(null); - - // useEffect(() => { - // if (targetId === null) { - // const foodId = todos.find((item) => item.id === itemId)?.id || null; - // setTargetId(foodId); - // console.log(targetId); - // } - // }, []); - return ( - // <> - // - // - // {FullScreen ? ( - // - // ) : ( - <> - -
- - -
- - -
-
- - // )} - // - // - // + <> + +
+ + +
+ + +
+
+ ); }; diff --git a/blip-project/src/components/Page/Main/MainTeamJoinNo.jsx b/blip-project/src/components/Page/Main/MainTeamJoinNo.jsx index 95e5102..ca67f56 100644 --- a/blip-project/src/components/Page/Main/MainTeamJoinNo.jsx +++ b/blip-project/src/components/Page/Main/MainTeamJoinNo.jsx @@ -4,44 +4,10 @@ import HeaderTeam from "../Src/page/HeaderTeam"; import SidebarTeam from "../Src/sidebarTeam"; import StartTeam from "./StartTeam"; import MeetingTeam from "../Src/MeetingTeam"; -import FullScreenPage from "./FullScreen"; -import { useLocation } from "react-router-dom"; -import { SidebarContext } from "../../../Router"; -import { UseStateContext } from "../../../Router"; -import { createContext, useState, useContext, useEffect } from "react"; -// export const TeamDel = createContext(); -// export const FindId = createContext(); const MTeamJoinNo = () => { - // const location = useLocation(); - // const { itemContent, itemId, image, itemImage } = location.state || {}; - // const { todos } = useContext(SidebarContext); - // const [filteredItem, setFilteredItem] = useState(null); - // const { FullScreen } = useContext(UseStateContext); - - // useEffect(() => { - // const matchingId = todos.find((item) => item.id === itemId); - // setFilteredItem(matchingId); - // }, [todos, itemId]); - - // const [targetId, setTargetId] = useState(null); - - // useEffect(() => { - // if (targetId === null) { - // const foodId = todos.find((item) => item.id === itemId)?.id || null; - // setTargetId(foodId); - // console.log(targetId); - // } - // }, []); - return ( <> - {/* - - {FullScreen ? ( - - ) : ( - <> */}
@@ -52,10 +18,6 @@ const MTeamJoinNo = () => {
- // )} - // - // - // ); }; diff --git a/blip-project/src/components/Page/Main/MainTeamOwner.jsx b/blip-project/src/components/Page/Main/MainTeamOwner.jsx index 77c799e..7d1d420 100644 --- a/blip-project/src/components/Page/Main/MainTeamOwner.jsx +++ b/blip-project/src/components/Page/Main/MainTeamOwner.jsx @@ -3,59 +3,20 @@ import DateTeamJoinNo from "../Src/DateTeam"; import HeaderTeam from "../Src/page/HeaderTeam"; import SidebarTeam from "../Src/sidebarTeam"; import StartTeam from "./StartTeam"; -import MeetingTeamJoinNo from "../Src/MeetingTeam"; -import FullScreenPage from "./FullScreen"; -import { useLocation } from "react-router-dom"; -import { SidebarContext } from "../../../Router"; -import { UseStateContext } from "../../../Router"; -import { createContext, useState, useContext, useEffect } from "react"; - -export const TeamDel = createContext(); -export const FindId = createContext(); +import MeetingTeam from "../Src/MeetingTeam"; const MainTeamOwner = () => { - const location = useLocation(); - const { itemContent, itemId, image, itemImage } = location.state || {}; - const { todos } = useContext(SidebarContext); - const [filteredItem, setFilteredItem] = useState(null); - const {FullScreen } = useContext(UseStateContext); - - useEffect(() => { - const matchingId = todos.find((item) => item.id === itemId); - setFilteredItem(matchingId); - }, [todos, itemId]); - - const [targetId, setTargetId] = useState(null); - - useEffect(() => { - if (targetId === null) { - const foodId = todos.find((item) => item.id === itemId)?.id || null; - setTargetId(foodId); - console.log(targetId); - } - }, []); - return ( <> - - - {FullScreen ? ( - - ) : ( - <> - -
- - -
- - -
-
- - )} - - + +
+ + +
+ + +
+
); }; diff --git a/blip-project/src/components/Page/Main/StartTeam.jsx b/blip-project/src/components/Page/Main/StartTeam.jsx index 3b641d2..f3ff8d4 100644 --- a/blip-project/src/components/Page/Main/StartTeam.jsx +++ b/blip-project/src/components/Page/Main/StartTeam.jsx @@ -7,9 +7,12 @@ import { UseStateContext } from "../../../Router"; import Alarm from "../Src/page/AlarmTeam"; import Letter from "../Src/page/LetterTeam"; import Discord from "../Src/page/Discord"; +import StartTeamJoinNo from "../Src/page/StartTeamJoinNo"; +import MainJoin from "./MainTeam"; const StartTeam = () => { - const { setting, isAlarm, isLetter, discord } = useContext(UseStateContext); + const { setting, isAlarm, isLetter, discord, basic, join } = + useContext(UseStateContext); return (
@@ -22,8 +25,12 @@ const StartTeam = () => { ) : discord ? ( - ) : ( + ) : basic ? ( + ) : join ? ( + + ) : ( + )}
); diff --git a/blip-project/src/components/Page/Modal/ModalCreate.jsx b/blip-project/src/components/Page/Modal/ModalCreate.jsx index 7a350ee..08d5c19 100644 --- a/blip-project/src/components/Page/Modal/ModalCreate.jsx +++ b/blip-project/src/components/Page/Modal/ModalCreate.jsx @@ -5,9 +5,11 @@ import ESC from "../../../svg/ESC.svg"; import { useState, useContext, useRef, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { SidebarContext } from "../../../Router"; +import { TeamDel } from "../Main/Main"; const ModalCreate = ({ onClose }) => { const { dispatch } = useContext(SidebarContext); + const { setOwner, setJoin, join } = useContext(TeamDel); const [content, setContent] = useState(""); const submitRef = useRef(); const nav = useNavigate(); @@ -19,7 +21,11 @@ const ModalCreate = ({ onClose }) => { const onClickCreate = () => { if (content !== "") { - nav("/TeamOwner", { state: { content } }); + setOwner((prev) => !prev); + if (join) { + setJoin((prev) => !prev); + } + nav("/", { state: { content } }); dispatch.onCreateone(content); setContent(""); } else if (content === "") { diff --git a/blip-project/src/components/Page/Modal/ModalDel.jsx b/blip-project/src/components/Page/Modal/ModalDel.jsx index 404b1e5..954e814 100644 --- a/blip-project/src/components/Page/Modal/ModalDel.jsx +++ b/blip-project/src/components/Page/Modal/ModalDel.jsx @@ -4,19 +4,25 @@ import { color } from "../../../style/color"; import ESC from "../../../svg/ESC.svg"; import { useContext } from "react"; import { SidebarContext } from "../../../Router"; -import { TeamDel } from "../Main/MainTeamOwner"; -// import { TeamDel } from "../Page/Main/Main"; +import { TeamDel } from "../Main/Main"; +import { UseStateContext } from "../../../Router"; import { useNavigate } from "react-router-dom"; const ModalDel = ({ onClose }) => { const { dispatch } = useContext(SidebarContext); - const { itemId } = useContext(TeamDel); + const { itemId, setOwner, setJoin } = useContext(TeamDel); + const { setSetting, setBasic } = useContext(UseStateContext); const nav = useNavigate(); const ClickDel = () => { if (itemId) { dispatch.onDel(itemId); nav("/", { state: {} }); + onClose(); + setOwner(false); + setJoin(false); + setSetting(false); + setBasic(false); } }; diff --git a/blip-project/src/components/Page/Modal/ModalJoin.jsx b/blip-project/src/components/Page/Modal/ModalJoin.jsx index 8510699..03d7513 100644 --- a/blip-project/src/components/Page/Modal/ModalJoin.jsx +++ b/blip-project/src/components/Page/Modal/ModalJoin.jsx @@ -5,18 +5,21 @@ import ESC from "../../../svg/ESC.svg"; import { useState, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import { SidebarContext } from "../../../Router"; +import { TeamDel } from "../Main/Main"; const ModalJoin = ({ onClose }) => { const [isInput, setIsInput] = useState(""); const [isValidURL, setIsValidURL] = useState(true); // URL 유효성 상태 const { onCreatedouble, dispatch } = useContext(SidebarContext); + const { setOwner, setJoin, Owner, TeamJoin, setTeamJoin } = + useContext(TeamDel); const [content, setContent] = useState(""); const submitRef = useRef(); - + const onChangeInput = (e) => { const value = e.target.value; setIsInput(value); - + // URL 유효성 검사 try { new URL(value); // URL 객체로 변환 @@ -30,10 +33,14 @@ const ModalJoin = ({ onClose }) => { const onClickUrl = () => { if (isValidURL) { - nav("/TeamJoin", { state: { isInput } }); + nav("/", { state: { isInput } }); dispatch.onCreatedouble(content); - setContent("") - }else if(content === ""){ + setContent(""); + setJoin((prev) => !prev); + if (Owner) { + setOwner((prev) => !prev); + } + } else if (content === "") { submitRef.current.focus(); return; } diff --git a/blip-project/src/components/Page/Modal/ModalMeeting.jsx b/blip-project/src/components/Page/Modal/ModalMeeting.jsx index f1ae4ec..0a2fc8e 100644 --- a/blip-project/src/components/Page/Modal/ModalMeeting.jsx +++ b/blip-project/src/components/Page/Modal/ModalMeeting.jsx @@ -1,16 +1,16 @@ import "../../CSS/ModalMeeting.css"; import { typography } from "../../../fonts/fonts"; import { color } from "../../../style/color"; -import { useState, useContext } from "react"; +import { useState, useContext, useEffect } from "react"; import ESC from "../../../svg/ESC.svg"; import { UseStateContext } from "../../../Router"; -import { TeamDel } from "../Main/MainTeamOwner"; -// import { TeamDel } from "../Page/Main/Main"; +import { TeamDel } from "../Main/Main"; const ModalMeeting = ({ onClose }) => { const [isTopic, setIsTopic] = useState(""); const [isCheckMike, setIsCheckMike] = useState(false); const [isCheckCamera, setIsCheckCamera] = useState(false); + const { setIsMike, setIsCamera, @@ -26,30 +26,40 @@ const ModalMeeting = ({ onClose }) => { setIsKeyword, discord, setDiscord, + basic, + setBasic, } = useContext(UseStateContext); - - const { itemId } = useContext(TeamDel); + const { itemId, Owner, setOwner, join, setJoin } = useContext(TeamDel); const onClickDiscord = () => { console.log("key={itemId}", itemId); - if (!discord) { - setDiscord((preState) => !preState); - onClose(); - if (isLetter === true) { - setIsLetter((preState) => !preState); - } else if (isAlarm) { - setIsAlarm((preState) => !preState); - } else if (setting === true) { - setSetting((preState) => !preState); - } else if (isFeedback === true) { - setIsFeedback((preState) => !preState); - } else if (isKeyword === true) { - setIsKeyword((preState) => !preState); - } + setDiscord((perState) => !perState); + console.log("시발시발", discord); + onClose(); + if (isLetter) { + setIsLetter((preState) => !preState); + } else if (isAlarm) { + setIsAlarm((preState) => !preState); + } else if (setting) { + setSetting((preState) => !preState); + } else if (isFeedback) { + setIsFeedback((preState) => !preState); + } else if (isKeyword) { + setIsKeyword((preState) => !preState); + } else if (Owner) { + setOwner((perState) => !perState); + } else if (join) { + setJoin((perState) => !perState); + } else if (basic) { + setBasic((perState) => !perState); } }; + useEffect(() => { + console.log("discord 상태 변경:", discord); + }, [discord]); + const onChageTopic = (e) => { setIsTopic(e.target.value); console.log(e.target.value); diff --git a/blip-project/src/components/Page/Src/MeetingTeam.jsx b/blip-project/src/components/Page/Src/MeetingTeam.jsx index 6102ba9..ed5ec06 100644 --- a/blip-project/src/components/Page/Src/MeetingTeam.jsx +++ b/blip-project/src/components/Page/Src/MeetingTeam.jsx @@ -2,27 +2,65 @@ import "../../CSS/MeetingTeam.css"; import { color } from "../../../style/color"; import { typography } from "../../../fonts/fonts"; import { useState, useContext } from "react"; -import { useLocation } from "react-router-dom"; import { UseStateContext } from "../../../Router"; -import { FindId } from "../Main/MainTeamOwner"; -// import { FindId } from "../Main/Main"; +import { TeamDel } from "../Main/Main"; +import { SidebarContext } from "../../../Router"; +import { Call } from "../../../Router"; import ModalMeeting from "../Modal/ModalMeeting"; import MettingContent from "./page/MeetingContent"; const MeetingTeam = () => { - const location = useLocation(); - const [isModalOpen, setIsModalOpen] = useState(false); const { discord, meetingEnd, setMeetingEnd } = useContext(UseStateContext); - const { targetId, setTargetId } = useContext(FindId); + + const { todos } = useContext(SidebarContext); + + const { Owner, itemId, join } = useContext(TeamDel); + + const { recordedChunks, setIsUploading } = useContext(Call); + + const [isModalOpen, setIsModalOpen] = useState(false); const modalOpen = () => setIsModalOpen(true); const modalClose = () => setIsModalOpen(false); - const onClickMeetingEnd = () => { - setTargetId(null); - console.log(targetId); + const uploadRecording = async () => { if (!meetingEnd) { setMeetingEnd((preState) => !preState); + console.log("시발련련"); + } + + if (!Owner) return; + + if (recordedChunks.length === 0) return; + + const blob = new Blob(recordedChunks, { type: "audio/webm" }); + const formData = new FormData(); + formData.append("file", blob, "recording.webm"); + + try { + setIsUploading(true); + const response = await fetch("링크", { + method: "post", + body: formData, + }); + + if (response.ok) { + console.log("파일 업로드 성공"); + } else { + console.error("업로드 실패", response.statusText); + } + } catch (error) { + console.log("업로드 중 에러"); + } finally { + setIsUploading(false); + } + }; + + const handleLeveMeeting = () => { + if (Owner) { + uploadRecording(); } + setMeetingEnd(true); + console.log("회의 종료"); }; return ( @@ -43,7 +81,7 @@ const MeetingTeam = () => { {discord ? ( - ) : location.pathname === "/TeamOwner" ? ( + ) : !Owner && todos.length > 1 && !join && itemId != 0 ? ( From 1b41c8a847e2d4ca00b6aab217d0cb68e428eb6f Mon Sep 17 00:00:00 2001 From: tccmw Date: Sun, 23 Mar 2025 23:18:34 +0900 Subject: [PATCH 43/75] =?UTF-8?q?feat:=20=ED=8C=80=20=EC=B0=B8=EA=B0=80=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 팀 초대 링크를 통해 팀에 참가하는 기능을 구현함 - 초대 링크에서 team_id 값을 추출하여 API 요청에 사용 - 팀 참가 성공 시 메인 페이지로 이동 - 팀 참가 실패 시 에러 메시지 출력 - 유효하지 않은 초대 링크에 대한 처리 추가 --- .../src/components/Page/Modal/ModalJoin.jsx | 49 ++++++++++++++++--- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/blip-project/src/components/Page/Modal/ModalJoin.jsx b/blip-project/src/components/Page/Modal/ModalJoin.jsx index 03d7513..82fae1d 100644 --- a/blip-project/src/components/Page/Modal/ModalJoin.jsx +++ b/blip-project/src/components/Page/Modal/ModalJoin.jsx @@ -6,6 +6,8 @@ import { useState, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import { SidebarContext } from "../../../Router"; import { TeamDel } from "../Main/Main"; +import { FindId } from "../Main/Main"; +import axios from "axios"; const ModalJoin = ({ onClose }) => { const [isInput, setIsInput] = useState(""); @@ -13,6 +15,7 @@ const ModalJoin = ({ onClose }) => { const { onCreatedouble, dispatch } = useContext(SidebarContext); const { setOwner, setJoin, Owner, TeamJoin, setTeamJoin } = useContext(TeamDel); + const { TeamId } = useContext(FindId); const [content, setContent] = useState(""); const submitRef = useRef(); @@ -31,14 +34,46 @@ const ModalJoin = ({ onClose }) => { const nav = useNavigate(); - const onClickUrl = () => { + const joinTeam = async (TeamId) => { + const url = "teams/join"; + const accessToken = "토큰 값"; + + const data = { + team_id: "ertyui", + }; + try { + const response = await axios.post(url, data, { + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${accessToken}`, + }, + }); + console.log("팀 가입 성공", response.data); + return response.data; + } catch (error) { + console.log("팀 가입 실패", error); + alert("팀 참가에 실패했습니다. 다시 시도해주세요."); + } + }; + + const onClickUrl = async () => { if (isValidURL) { - nav("/", { state: { isInput } }); - dispatch.onCreatedouble(content); - setContent(""); - setJoin((prev) => !prev); - if (Owner) { - setOwner((prev) => !prev); + const teamId = new URL(isInput).searchParams.get("team_id"); + + if (teamId) { + const result = await joinTeam(teamId); + + if (result) { + nav("/", { state: { isInput } }); + dispatch.onCreatedouble(content); + setContent(""); + setJoin((prev) => !prev); + if (Owner) { + setOwner((prev) => !prev); + } + } + } else { + alert("유효하지 않은 초대 링크입니다. 다시 확인해주세요."); } } else if (content === "") { submitRef.current.focus(); From e7dc6e25a715e113c531efd2019d51833032ec4a Mon Sep 17 00:00:00 2001 From: tccmw Date: Sun, 23 Mar 2025 23:18:50 +0900 Subject: [PATCH 44/75] =?UTF-8?q?feat:=20=ED=8C=80=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Main 컴포넌트에 TeamId 전달 - 팀 삭제 기능 구현을 위해 TeamId 값을 Main 컴포넌트로 전달 - 이후 팀 삭제 기능에서 해당 TeamId 값을 사용하여 팀 삭제 요청 예정 --- blip-project/src/components/Page/Main/Main.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blip-project/src/components/Page/Main/Main.jsx b/blip-project/src/components/Page/Main/Main.jsx index ec416bb..71a4fec 100644 --- a/blip-project/src/components/Page/Main/Main.jsx +++ b/blip-project/src/components/Page/Main/Main.jsx @@ -16,7 +16,7 @@ export const FindId = createContext({ const Main = () => { const location = useLocation(); - const { itemContent, itemId, itemImage } = location.state || {}; + const { itemContent, itemId, itemImage, TeamId } = location.state || {}; const { todos } = useContext(SidebarContext); const [filteredItem, setFilteredItem] = useState(null); const { FullScreen, targetId, setTargetId } = useContext(UseStateContext); @@ -47,6 +47,7 @@ const Main = () => { setTargetId, teamImages, setTeamImages, + TeamId, }} > Date: Tue, 25 Mar 2025 22:49:23 +0900 Subject: [PATCH 45/75] =?UTF-8?q?feat:=20=ED=8C=80=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 팀 생성 모달에서 생성된 팀 데이터를 서버로 전송하여 DB에 저장하도록 API를 연동함 - `REACT_APP_API_URL_CREATE` 환경변수를 사용하여 API URL을 설정 - axios `post` 메서드를 사용하여 팀 데이터 전송 - 응답으로 받은 `team_id`를 활용하여 메인 페이지로 이동 - 서버 API 연동을 통해 팀 생성 기능 완성 --- .../src/components/Page/Modal/ModalCreate.jsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/blip-project/src/components/Page/Modal/ModalCreate.jsx b/blip-project/src/components/Page/Modal/ModalCreate.jsx index d7b8dbb..1e63ea5 100644 --- a/blip-project/src/components/Page/Modal/ModalCreate.jsx +++ b/blip-project/src/components/Page/Modal/ModalCreate.jsx @@ -13,6 +13,7 @@ const ModalCreate = ({ onClose }) => { const { setOwner, setJoin, join } = useContext(TeamDel); const [content, setContent] = useState(""); const [isLoading, setIsLoading] = useState(false); + const [data, setData] = useState(false); const submitRef = useRef(); const nav = useNavigate(); @@ -27,11 +28,14 @@ const ModalCreate = ({ onClose }) => { } }; + const apiUrl = REACT_APP_API_URL_CREATE; + + console.log(apiUrl, "afdnmhtrhmjy"); + const handleSubmit = async () => { - const url = "/teams/create"; - const accessToken = "토큰 값" + const url = `${apiUrl}/data`; + const accessToken = "토큰 값"; - console.log("fds"); if (content === "") { submitRef.current.focus(); return; @@ -43,20 +47,20 @@ const ModalCreate = ({ onClose }) => { }; try { - const reponse = await axios.post(url, data, { + const response = await axios.post(url, data, { headers: { "Content-Type": "application/json", Authorization: `Bearer ${accessToken}`, }, }); - console.log("팀 생성 성공:", reponse.data); + console.log("팀 생성 성공:", response.data); setOwner((prev) => !prev); if (join) { setJoin((prev) => !prev); } - const TeamId = reponse.data.team_id; + const TeamId = response.data.team_id; nav("/", { state: { content, TeamId } }); console.log(TeamId); dispatch.onCreateone(content); From 21986e45f92e6415a215213ce134af26e52fa696 Mon Sep 17 00:00:00 2001 From: tccmw Date: Tue, 25 Mar 2025 22:50:51 +0900 Subject: [PATCH 46/75] =?UTF-8?q?refactor:=20JitsiMeet=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit JitsiMeet 기능 관련 코드 제거 - 기존 JitsiMeet 컴포넌트를 삭제함 - 추후 WebRTC 기반의 새로운 기능으로 대체 예정 --- .../Page/Src/function/jitsiMeet.jsx | 81 ------------------- 1 file changed, 81 deletions(-) diff --git a/blip-project/src/components/Page/Src/function/jitsiMeet.jsx b/blip-project/src/components/Page/Src/function/jitsiMeet.jsx index 60236a9..a6910f3 100644 --- a/blip-project/src/components/Page/Src/function/jitsiMeet.jsx +++ b/blip-project/src/components/Page/Src/function/jitsiMeet.jsx @@ -1,84 +1,3 @@ -// const JitsiMeet = () => { -// useEffect(() => { -// const script = document.createElement("script"); -// script.src = "https://meet.jit.si/external_api.js"; -// script.async = true; - -// script.onload = () => { -// const domain = "meet.jit.si"; -// const options = { -// roomName: "TestRoom", -// width: "100%", -// height: "100%", -// parentNode: document.querySelector("#jitsi-iframe-container"), -// configOverwrite: { -// startWithAudioMuted: false, -// startWithVideoMuted: false, -// enableWelcomePage: false, -// }, -// interfaceConfigOverwrite: { -// filmStripOnly: false, -// }, -// }; - -// const api = new window.JitsiMeetExternalAPI(domain, options); - -// api.addEventListener("videoConferenceJoined", () => { -// console.log("화상 회의에 참가했습니다!"); - -// // 음성 녹음 시작 -// const stream = api -// .getLocalTracks() -// .find((track) => track.getType() === "audio").jitsiTrack._track; -// const mediaRecorder = new MediaRecorder(stream); - -// mediaRecorder.ondataavailable = (event) => { -// const audioBlob = event.data; -// const audioUrl = URL.createObjectURL(audioBlob); -// console.log("녹음된 오디오 URL:", audioUrl); -// // 오디오 저장이나 처리 로직을 추가할 수 있습니다. -// }; - -// mediaRecorder.start(); - -// // 회의 종료 시 녹음 중지 -// api.addEventListener("videoConferenceLeft", () => { -// mediaRecorder.stop(); -// }); -// }); -// }; - -// script.onerror = (error) => { -// console.error("Jitsi API 로딩 실패:", error); -// alert("Jitsi API 로딩 실패: " + (error.message || "알 수 없는 오류")); -// }; - -// document.head.appendChild(script); - -// return () => { -// const scriptElement = document.querySelector( -// 'script[src="https://meet.jit.si/external_api.js"]' -// ); -// if (scriptElement) { -// document.head.removeChild(scriptElement); -// } -// }; -// }, []); - -// return ( -//
-// ); -// }; - -// export default JitsiMeet; - import React, { useState, useEffect, useContext } from "react"; import "../../../CSS/Grid.css"; import { typography } from "../../../../fonts/fonts"; From d26e7eb0b7ec8a28bc5dd1c622f9a108ab491c76 Mon Sep 17 00:00:00 2001 From: tccmw Date: Wed, 26 Mar 2025 23:17:22 +0900 Subject: [PATCH 47/75] =?UTF-8?q?feat:=20=ED=8C=80=20=EC=B0=B8=EA=B0=80=20?= =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 팀 초대 링크를 통해 팀에 참가하는 기능을 구현 - 초대 링크에서 team_id 값을 추출하여 API 호출 - API 호출 성공 시 팀 참가 처리 및 메인 페이지로 이동 - API 호출 실패 시 에러 메시지 출력 - 유효하지 않은 초대 링크 입력 시 에러 메시지 출력 --- .../Page/Src/page/StartTeamJoinNo.jsx | 62 +++++++++++++++---- 1 file changed, 50 insertions(+), 12 deletions(-) diff --git a/blip-project/src/components/Page/Src/page/StartTeamJoinNo.jsx b/blip-project/src/components/Page/Src/page/StartTeamJoinNo.jsx index 5bc69a3..27baaf0 100644 --- a/blip-project/src/components/Page/Src/page/StartTeamJoinNo.jsx +++ b/blip-project/src/components/Page/Src/page/StartTeamJoinNo.jsx @@ -5,6 +5,7 @@ import Modal from "../../Modal/Modal"; import { useState, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import { SidebarContext } from "../../../../Router"; +import axios from "axios"; const StartTeamJoinNo = () => { const [isModalOpen, setIsModalOpen] = useState(false); @@ -14,6 +15,53 @@ const StartTeamJoinNo = () => { const [content, setContent] = useState(""); const submitRef = useRef(); + const apiUrl = import.meta.env.VITE_API_URL_URL_JOIN; + + const joinTeam = async (TeamId) => { + const url = `${apiUrl}/data`; + const accessToken = "토큰 값"; + + const data = { + item_id: "fagda", + }; + try { + const reponse = await axios.post(url, data, { + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${accessToken}`, + }, + }); + console.log("팀 가입 성공", reponse.data); + return reponse.data; + } catch (error) { + console.log("팀 가입 실패", error); + alert("팀 참가에 실패했습니다. 다시 시도해주세요"); + } + }; + + const onClickUrl = async () => { + if (isUrl) { + const teamId = new URL(urlInput).searchParams.get("team_id"); + + if (teamId) { + const result = await joinTeam(teamId); + + if (result) { + nav("/", { state: { urlInput } }); + dispatch.onCreatedouble(content); + setContent(""); + } else { + openModal(); + } + } else { + alert("유효하지 않은 초대 링크입니다. 다시 확인해주세여. "); + } + } else if (content === "") { + submitRef.current.focus(); + return; + } + }; + const onChangeUrlInput = (e) => { const urlValue = e.target.value; setUrlInput(urlValue); @@ -27,19 +75,9 @@ const StartTeamJoinNo = () => { const nav = useNavigate(); - const handleClick = () => { - if (isUrl) { - nav("/", { state: { urlInput } }); - dispatch.onCreatedouble(content); - setContent(""); - } else { - openModal(); - } - }; - const handleKeyDown = (e) => { if (e.key === "Enter") { - handleClick(); // Enter 키가 눌리면 onClickCreate 함수 호출 + onClickUrl(); } }; @@ -71,7 +109,7 @@ const StartTeamJoinNo = () => {
+
+
+
+ ); +}; + +export default LogoutModal; From 71e24189581f90bbb851451fe86a36c273243d7c Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Tue, 8 Apr 2025 19:07:43 +0900 Subject: [PATCH 63/75] svg --- blip-project/src/svg/profileDefault.svg | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 blip-project/src/svg/profileDefault.svg diff --git a/blip-project/src/svg/profileDefault.svg b/blip-project/src/svg/profileDefault.svg new file mode 100644 index 0000000..4fc132b --- /dev/null +++ b/blip-project/src/svg/profileDefault.svg @@ -0,0 +1,9 @@ + + + + + + + + + From 9c1a43463fc5fb3442084812eb95990dd15240c6 Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Tue, 8 Apr 2025 19:08:40 +0900 Subject: [PATCH 64/75] =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=B0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Page/MyPage/Modals/emailChangeModal.jsx | 115 ++++++++++++++ .../Page/MyPage/Modals/idChangeModal.jsx | 100 ++++++++++++ .../Page/MyPage/Modals/imageChangeModal.jsx | 89 +++++++++++ .../Page/MyPage/Modals/killModal.jsx | 109 +++++++++++++ .../Page/MyPage/Modals/logoutModal.jsx | 57 ++++++- .../MyPage/Modals/passwordChangeModal.jsx | 144 ++++++++++++++++++ 6 files changed, 606 insertions(+), 8 deletions(-) create mode 100644 blip-project/src/components/Page/MyPage/Modals/emailChangeModal.jsx create mode 100644 blip-project/src/components/Page/MyPage/Modals/idChangeModal.jsx create mode 100644 blip-project/src/components/Page/MyPage/Modals/imageChangeModal.jsx create mode 100644 blip-project/src/components/Page/MyPage/Modals/killModal.jsx create mode 100644 blip-project/src/components/Page/MyPage/Modals/passwordChangeModal.jsx diff --git a/blip-project/src/components/Page/MyPage/Modals/emailChangeModal.jsx b/blip-project/src/components/Page/MyPage/Modals/emailChangeModal.jsx new file mode 100644 index 0000000..b0fa22c --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Modals/emailChangeModal.jsx @@ -0,0 +1,115 @@ +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; +import ESC from "../../../../svg/ESC.svg"; +const EmailChange = ({ message, onConfirm, onCancel }) => { + return ( +
+
+ +

+ {message} +

+

+ 보안을 위해 이메일로 발송된 6자리 인증 번호를 입력해 주세요.
+ 3분 내로 입력하지 않으면 만료될 수 있으니 유의하시기 바랍니다. +

+
+
+

+ 인증번호 +

+ +
+ +
+
+
+ ); +}; + +export default EmailChange; diff --git a/blip-project/src/components/Page/MyPage/Modals/idChangeModal.jsx b/blip-project/src/components/Page/MyPage/Modals/idChangeModal.jsx new file mode 100644 index 0000000..2bb1f51 --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Modals/idChangeModal.jsx @@ -0,0 +1,100 @@ +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; +import ESC from "../../../../svg/ESC.svg"; +const IdChangeModal = ({ message, onConfirm, onCancel }) => { + return ( +
+
+ +

+ {message} +

+
+
+

+ 아이디 +

+ +
+ +
+
+
+ ); +}; + +export default IdChangeModal; diff --git a/blip-project/src/components/Page/MyPage/Modals/imageChangeModal.jsx b/blip-project/src/components/Page/MyPage/Modals/imageChangeModal.jsx new file mode 100644 index 0000000..58219bc --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Modals/imageChangeModal.jsx @@ -0,0 +1,89 @@ +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; +import ESC from "../../../../svg/ESC.svg"; +const ImageChangeModal = ({ message, onConfirm, onCancel }) => { + return ( +
+
+ +

+ {message} +

+
+ +
+ +
+
+
+ ); +}; + +export default ImageChangeModal; diff --git a/blip-project/src/components/Page/MyPage/Modals/killModal.jsx b/blip-project/src/components/Page/MyPage/Modals/killModal.jsx new file mode 100644 index 0000000..97403e1 --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Modals/killModal.jsx @@ -0,0 +1,109 @@ +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; +import ESC from "../../../../svg/ESC.svg"; +const KillModal = ({ message, onConfirm, onCancel }) => { + return ( +
+
+ +

+ {message} +

+

+ 탈퇴를 위해서는 비밀번호 입력이 필요해요! +

+
+
+

+ 비밀번호 +

+ +
+ +
+
+
+ ); +}; + +export default KillModal; diff --git a/blip-project/src/components/Page/MyPage/Modals/logoutModal.jsx b/blip-project/src/components/Page/MyPage/Modals/logoutModal.jsx index d320dc1..e0fd3a4 100644 --- a/blip-project/src/components/Page/MyPage/Modals/logoutModal.jsx +++ b/blip-project/src/components/Page/MyPage/Modals/logoutModal.jsx @@ -20,23 +20,64 @@ const LogoutModal = ({ message, onConfirm, onCancel }) => {
- -

+ +

{message}

-

+

언제든지 다시 로그인할 수 있습니다!

-
- +
+
diff --git a/blip-project/src/components/Page/MyPage/Modals/passwordChangeModal.jsx b/blip-project/src/components/Page/MyPage/Modals/passwordChangeModal.jsx new file mode 100644 index 0000000..b5e8175 --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Modals/passwordChangeModal.jsx @@ -0,0 +1,144 @@ +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; +import ESC from "../../../../svg/ESC.svg"; +const PasswordChangeModal = ({ message, onConfirm, onCancel }) => { + return ( +
+
+ +

+ {message} +

+
+
+

+ 현재 비밀번호 +

+ +
+
+

+ 새 비밀번호 +

+ +
+
+

+ 비밀번호 확인 +

+ +
+ +
+
+
+ ); +}; + +export default PasswordChangeModal; From 2fc518cd3c87ebb2466d08bead241af38f3e77da Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Tue, 8 Apr 2025 19:08:52 +0900 Subject: [PATCH 65/75] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Page/MyPage/Profiles/profile.jsx | 96 +++++++++++++++++-- .../Page/MyPage/Profiles/profileStyle.jsx | 4 + 2 files changed, 94 insertions(+), 6 deletions(-) diff --git a/blip-project/src/components/Page/MyPage/Profiles/profile.jsx b/blip-project/src/components/Page/MyPage/Profiles/profile.jsx index 3e7f5d5..4cd1154 100644 --- a/blip-project/src/components/Page/MyPage/Profiles/profile.jsx +++ b/blip-project/src/components/Page/MyPage/Profiles/profile.jsx @@ -3,22 +3,57 @@ import { typography } from "../../../../fonts/fonts"; import { color } from "../../../../style/color"; import { useState } from "react"; import LogoutModal from "../Modals/logoutModal"; +import KillModal from "../Modals/killModal"; +import EmailChangeModal from "../Modals/emailChangeModal"; +import IdChangeModal from "../Modals/idChangeModal"; +import PasswordChangeModal from "../Modals/passwordChangeModal"; +import ImageChangeModal from "../Modals/imageEditModal"; +import profileDefault from "../../../../svg/profileDefault.svg"; const Profiles = () => { const [showLogoutModal, setShowLogoutModal] = useState(false); + const [showKillModal, setShowKillModal] = useState(false); + const [showEmailModal, setEmailChangeModal] = useState(false); + const [showIdModal, setIdChangemModal] = useState(false); + const [showPasswordModal, setPasswordChangeModal] = useState(false); + const [showImageModal, setImageChangeModal] = useState(false); + const handleLogout = () => { console.log("로그아웃 완료"); setShowLogoutModal(false); }; + const handleKill = () => { + console.log("회원탈퇴 완료"); + setShowKillModal(false); + }; + const handleChangeEmail = () => { + console.log("인증번호~~"); + setEmailChangeModal(false); + }; + const handleChangeId = () => { + console.log("아이디 바꾸기용용"); + }; + const handleChangePassword = () => { + console.log("비밀번호 바꾸기용용용"); + }; + const handleChangeImage = () => { + console.log("이미지 바뀌깅~~"); + }; return ( <> - + kimchijonmattang11 - 프로필 사진 변경 + setImageChangeModal(true)}> + 프로필 사진 변경 + @@ -34,7 +69,9 @@ const Profiles = () => { aaaaaaaaaaaa@gmail.com - 수정 + setEmailChangeModal(true)}> + 수정 + @@ -48,7 +85,9 @@ const Profiles = () => { kimchijonmattang11 - 수정 + setIdChangemModal(true)}> + 수정 + @@ -57,7 +96,11 @@ const Profiles = () => { 비밀번호 변경하기 - 변경하기 + setPasswordChangeModal(true)} + > + 변경하기 + 로그아웃 @@ -67,7 +110,9 @@ const Profiles = () => { 회원탈퇴 - 회원탈퇴 + setShowKillModal(true)}> + 회원탈퇴 + @@ -79,6 +124,45 @@ const Profiles = () => { onCancel={() => setShowLogoutModal(false)} /> )} + {showKillModal && ( + setShowKillModal(false)} + /> + )} + + {showEmailModal && ( + setEmailChangeModal(false)} + /> + )} + + {showIdModal && ( + setIdChangemModal(false)} + /> + )} + + {showPasswordModal && ( + setPasswordChangeModal(false)} + /> + )} + + {showImageModal && ( + setImageChangeModal(false)} + /> + )} ); }; diff --git a/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx b/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx index f494305..497fe92 100644 --- a/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx +++ b/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx @@ -19,6 +19,10 @@ export const Profile = styled.div` border-radius: 100px; border: 0.5px solid ${color.GrayScale[1]}; position: relative; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border-radius: 50%; `; /* export const Name = styled.p` From 12df8544cde6d2ef719dc7e8333b901134f34ba0 Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Tue, 8 Apr 2025 19:12:29 +0900 Subject: [PATCH 66/75] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blip-project/src/components/SignUpLogin/email.jsx | 0 blip-project/src/components/SignUpLogin/id.jsx | 0 blip-project/src/components/SignUpLogin/input.jsx | 0 blip-project/src/components/SignUpLogin/number.jsx | 0 blip-project/src/components/SignUpLogin/onValidMail.jsx | 0 blip-project/src/components/SignUpLogin/password.jsx | 0 blip-project/src/components/SignUpLogin/passwordCheck.jsx | 0 blip-project/src/components/SignUpLogin/timer.jsx | 0 8 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 blip-project/src/components/SignUpLogin/email.jsx create mode 100644 blip-project/src/components/SignUpLogin/id.jsx create mode 100644 blip-project/src/components/SignUpLogin/input.jsx create mode 100644 blip-project/src/components/SignUpLogin/number.jsx create mode 100644 blip-project/src/components/SignUpLogin/onValidMail.jsx create mode 100644 blip-project/src/components/SignUpLogin/password.jsx create mode 100644 blip-project/src/components/SignUpLogin/passwordCheck.jsx create mode 100644 blip-project/src/components/SignUpLogin/timer.jsx diff --git a/blip-project/src/components/SignUpLogin/email.jsx b/blip-project/src/components/SignUpLogin/email.jsx new file mode 100644 index 0000000..e69de29 diff --git a/blip-project/src/components/SignUpLogin/id.jsx b/blip-project/src/components/SignUpLogin/id.jsx new file mode 100644 index 0000000..e69de29 diff --git a/blip-project/src/components/SignUpLogin/input.jsx b/blip-project/src/components/SignUpLogin/input.jsx new file mode 100644 index 0000000..e69de29 diff --git a/blip-project/src/components/SignUpLogin/number.jsx b/blip-project/src/components/SignUpLogin/number.jsx new file mode 100644 index 0000000..e69de29 diff --git a/blip-project/src/components/SignUpLogin/onValidMail.jsx b/blip-project/src/components/SignUpLogin/onValidMail.jsx new file mode 100644 index 0000000..e69de29 diff --git a/blip-project/src/components/SignUpLogin/password.jsx b/blip-project/src/components/SignUpLogin/password.jsx new file mode 100644 index 0000000..e69de29 diff --git a/blip-project/src/components/SignUpLogin/passwordCheck.jsx b/blip-project/src/components/SignUpLogin/passwordCheck.jsx new file mode 100644 index 0000000..e69de29 diff --git a/blip-project/src/components/SignUpLogin/timer.jsx b/blip-project/src/components/SignUpLogin/timer.jsx new file mode 100644 index 0000000..e69de29 From 0067ab94338f3fc6389d1f7ff89519a77d31b820 Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Tue, 8 Apr 2025 21:49:22 +0900 Subject: [PATCH 67/75] svg --- blip-project/src/svg/eyeOff.svg | 3 +++ blip-project/src/svg/eyeOpen.svg | 3 +++ 2 files changed, 6 insertions(+) create mode 100644 blip-project/src/svg/eyeOff.svg create mode 100644 blip-project/src/svg/eyeOpen.svg diff --git a/blip-project/src/svg/eyeOff.svg b/blip-project/src/svg/eyeOff.svg new file mode 100644 index 0000000..7d3b5cf --- /dev/null +++ b/blip-project/src/svg/eyeOff.svg @@ -0,0 +1,3 @@ + + + diff --git a/blip-project/src/svg/eyeOpen.svg b/blip-project/src/svg/eyeOpen.svg new file mode 100644 index 0000000..1d42405 --- /dev/null +++ b/blip-project/src/svg/eyeOpen.svg @@ -0,0 +1,3 @@ + + + From 25b91b0672d129e102c5664ae06465f1550be25c Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Tue, 8 Apr 2025 21:49:44 +0900 Subject: [PATCH 68/75] =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Page/MyPage/Modals/emailChangeModal.jsx | 14 ++++++++++++-- .../Page/MyPage/Modals/idChangeModal.jsx | 11 ++++++++++- .../Page/MyPage/Modals/passwordChangeModal.jsx | 8 +++++--- 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/blip-project/src/components/Page/MyPage/Modals/emailChangeModal.jsx b/blip-project/src/components/Page/MyPage/Modals/emailChangeModal.jsx index b0fa22c..507963c 100644 --- a/blip-project/src/components/Page/MyPage/Modals/emailChangeModal.jsx +++ b/blip-project/src/components/Page/MyPage/Modals/emailChangeModal.jsx @@ -1,7 +1,15 @@ import { color } from "../../../../style/color"; import { typography } from "../../../../fonts/fonts"; import ESC from "../../../../svg/ESC.svg"; -const EmailChange = ({ message, onConfirm, onCancel }) => { +import { useState } from "react"; +import Timer from "../../../SignUpLogin/timer"; +const EmailChangeModal = ({ message, onConfirm, onCancel, onChange }) => { + const [email, setEmail] = useState(""); + const [count, setCount] = useState(180); + const handleChange = (value) => { + setEmail(value); + onChange(value); + }; return (
{ handleChange(e.target.value)} style={{ borderRadius: "12px", width: "512px", @@ -90,6 +99,7 @@ const EmailChange = ({ message, onConfirm, onCancel }) => { }} />
+ diff --git a/blip-project/src/components/Page/MyPage/Modals/emailChangeModal2.jsx b/blip-project/src/components/Page/MyPage/Modals/emailChangeModal2.jsx new file mode 100644 index 0000000..4185390 --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Modals/emailChangeModal2.jsx @@ -0,0 +1,109 @@ +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; +import ESC from "../../../../svg/ESC.svg"; +import Id from "../../../SignUpLogin/id"; +import { useState } from "react"; + +const EmailChangeModal2 = ({ message, onConfirm, onCancel, onChange }) => { + const [email, setEmail] = useState(""); + const handleChange = (value) => { + setEmail(value); + onChange(value); + }; + return ( +
+
+ +

+ {message} +

+
+
+

+ 이메일 +

+ handleChange(e.target.value)} + style={{ + borderRadius: "12px", + width: "512px", + height: "50px", + textIndent: "20px", + }} + /> +
+ +
+
+
+ ); +}; + +export default EmailChangeModal2; diff --git a/blip-project/src/components/Page/MyPage/Modals/imageChangeModal.jsx b/blip-project/src/components/Page/MyPage/Modals/imageChangeModal.jsx index 58219bc..d203f3e 100644 --- a/blip-project/src/components/Page/MyPage/Modals/imageChangeModal.jsx +++ b/blip-project/src/components/Page/MyPage/Modals/imageChangeModal.jsx @@ -1,7 +1,28 @@ +import { useState, useRef } from "react"; import { color } from "../../../../style/color"; import { typography } from "../../../../fonts/fonts"; import ESC from "../../../../svg/ESC.svg"; -const ImageChangeModal = ({ message, onConfirm, onCancel }) => { + +const ImageChangeModal = ({ message, onConfirm, onCancel, onImageSelect }) => { + const [previewImage, setPreviewImage] = useState(null); + const fileInputRef = useRef(null); + + const handleFileSelect = (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = () => { + setPreviewImage(reader.result); + onImageSelect(file); + }; + reader.readAsDataURL(file); + } + }; + + const triggerFileInput = () => { + fileInputRef.current.click(); + }; + return (
{ > Close { > {message}

+
{ backgroundColor: color.GrayScale[0], margin: "0 auto", marginTop: "80px", + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + position: "relative", + overflow: "hidden", + border: `1px solid ${color.GrayScale[2]}`, + borderRadius: "8px", }} - >
+ > + {previewImage ? ( + Preview + ) : ( +
+

+ 프로필 이미지를 선택해주세요 +

+ +
+ )} +
+ +
+ {previewImage && ( + + )} + diff --git a/blip-project/src/components/Page/MyPage/Modals/nameChangeModal.jsx b/blip-project/src/components/Page/MyPage/Modals/nameChangeModal.jsx new file mode 100644 index 0000000..fd55fae --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Modals/nameChangeModal.jsx @@ -0,0 +1,108 @@ +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; +import ESC from "../../../../svg/ESC.svg"; +import { useState } from "react"; + +const NameChangeModal = ({ message, onConfirm, onCancel, onChange }) => { + const [name, setName] = useState(""); + const handleChange = (value) => { + setName(value); + onChange(value); + }; + return ( +
+
+ +

+ {message} +

+
+
+

+ 이름 +

+ handleChange(e.target.value)} + style={{ + borderRadius: "12px", + width: "512px", + height: "50px", + textIndent: "20px", + }} + /> +
+ +
+
+
+ ); +}; + +export default NameChangeModal; From 892016c4cb6b9e9181adb263f956637f4078183a Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Wed, 9 Apr 2025 19:23:18 +0900 Subject: [PATCH 73/75] =?UTF-8?q?=ED=83=80=EC=9D=B4=EB=A8=B8=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blip-project/src/components/SignUpLogin/timer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blip-project/src/components/SignUpLogin/timer.jsx b/blip-project/src/components/SignUpLogin/timer.jsx index d14b9d0..2b9e781 100644 --- a/blip-project/src/components/SignUpLogin/timer.jsx +++ b/blip-project/src/components/SignUpLogin/timer.jsx @@ -16,7 +16,7 @@ const Timer = ({ count }) => { display: "flex", alignItems: "center", gap: "10px", - marginRight: "-40px", + marginRight: "-100px", }} > {count > 0 ? `${formatTime(count)}` : "시간 초과"} From 0a9148e05ce9173e005cee2ac5c82ead9d858014 Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Wed, 9 Apr 2025 19:23:31 +0900 Subject: [PATCH 74/75] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Page/MyPage/Profiles/profile.jsx | 31 ++- .../Page/MyPage/Profiles/profile2.jsx | 220 ++++++++++++++++++ .../Page/MyPage/Profiles/profileStyle.jsx | 21 +- .../Page/MyPage/Profiles/profileStyle2.jsx | 173 ++++++++++++++ 4 files changed, 418 insertions(+), 27 deletions(-) create mode 100644 blip-project/src/components/Page/MyPage/Profiles/profile2.jsx create mode 100644 blip-project/src/components/Page/MyPage/Profiles/profileStyle2.jsx diff --git a/blip-project/src/components/Page/MyPage/Profiles/profile.jsx b/blip-project/src/components/Page/MyPage/Profiles/profile.jsx index 9a820a3..cb0686d 100644 --- a/blip-project/src/components/Page/MyPage/Profiles/profile.jsx +++ b/blip-project/src/components/Page/MyPage/Profiles/profile.jsx @@ -19,8 +19,10 @@ const Profiles = () => { const [showImageModal, setImageChangeModal] = useState(false); const [userId, setUserId] = useState("kimchijonmattang11"); const [newIdInput, setNewIdInput] = useState(""); - const [userEmail, setUserEmail] = useState("aaaa@gmail.com"); + const [userEmail, setUserEmail] = useState("aaaaaaaaaaaa@gmail.com"); const [newEmailInput, setNewEmailInput] = useState(""); + const [profileImage, setProfileImage] = useState(profileDefault); + const [selectedImageFile, setSelectedImageFile] = useState(null); const handleLogout = () => { console.log("로그아웃 완료"); @@ -31,8 +33,9 @@ const Profiles = () => { setShowKillModal(false); }; const handleChangeEmail = () => { - console.log("인증번호~~"); + setUserEmail(newEmailInput); setEmailChangeModal(false); + console.log("이메일 바뀜딘메ㅐㄻㄴ얼;ㅁㄴㅇ", newEmailInput); }; const handleChangeId = () => { setUserId(newIdInput); @@ -43,18 +46,20 @@ const Profiles = () => { console.log("비밀번호 바꾸기용용용"); }; const handleChangeImage = () => { - console.log("이미지 바뀌깅~~"); + if (!selectedImageFile) return; + + const imageUrl = URL.createObjectURL(selectedImageFile); + setProfileImage(imageUrl); + setImageChangeModal(false); + + console.log("프로필 이미지 변경 완료:", selectedImageFile); }; return ( <> - + {userId} setImageChangeModal(true)}> @@ -62,7 +67,6 @@ const Profiles = () => { - @@ -75,7 +79,11 @@ const Profiles = () => { {userEmail} - setEmailChangeModal(true)}> + { + setEmailChangeModal(true); + }} + > 수정 @@ -140,7 +148,7 @@ const Profiles = () => { {showEmailModal && ( setEmailChangeModal(false)} onChange={setNewEmailInput} @@ -169,6 +177,7 @@ const Profiles = () => { message="이미지 편집하기" onConfirm={handleChangeImage} onCancel={() => setImageChangeModal(false)} + onImageSelect={setSelectedImageFile} /> )} diff --git a/blip-project/src/components/Page/MyPage/Profiles/profile2.jsx b/blip-project/src/components/Page/MyPage/Profiles/profile2.jsx new file mode 100644 index 0000000..cd3d666 --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Profiles/profile2.jsx @@ -0,0 +1,220 @@ +import * as S from "../Profiles/profileStyle"; +import { typography } from "../../../../fonts/fonts"; +import { color } from "../../../../style/color"; +import { useState } from "react"; +import LogoutModal from "../Modals/logoutModal"; +import KillModal from "../Modals/killModal"; +import EmailChangeModal from "../Modals/emailChangeModal"; +import IdChangeModal from "../Modals/idChangeModal"; +import PasswordChangeModal from "../Modals/passwordChangeModal"; +import ImageChangeModal from "../Modals/imageChangeModal"; +import profileDefault from "../../../../svg/profileDefault.svg"; +import NameChangeModal from "../Modals/nameChangeModal"; + +const Profiles2 = () => { + const [showLogoutModal, setShowLogoutModal] = useState(false); + const [showKillModal, setShowKillModal] = useState(false); + const [showEmailModal, setEmailChangeModal] = useState(false); + const [showIdModal, setIdChangemModal] = useState(false); + const [showPasswordModal, setPasswordChangeModal] = useState(false); + const [showImageModal, setImageChangeModal] = useState(false); + const [showNameModal, setNameChangeModal] = useState(false); + const [userId, setUserId] = useState("kimchijonmattang11"); + const [newIdInput, setNewIdInput] = useState(""); + const [userEmail, setUserEmail] = useState("aaaaaaaaaaaa@gmail.com"); + const [newEmailInput, setNewEmailInput] = useState(""); + const [profileImage, setProfileImage] = useState(profileDefault); + const [selectedImageFile, setSelectedImageFile] = useState(null); + const [userName, setUserName] = useState("손희찬"); + const [newNameInput, setNewNameInput] = useState(""); + + const handleLogout = () => { + console.log("로그아웃 완료"); + setShowLogoutModal(false); + }; + const handleKill = () => { + console.log("회원탈퇴 완료"); + setShowKillModal(false); + }; + const handleChangeEmail = () => { + console.log("인증번호~~"); + setEmailChangeModal(false); + }; + const handleChangeId = () => { + setUserId(newIdInput); + setIdChangemModal(false); + console.log("아이디가 바뀌었어용:", newIdInput); + }; + const handleChangePassword = () => { + console.log("비밀번호 바꾸기용용용"); + }; + const handleChangeImage = () => { + if (!selectedImageFile) return; + + const imageUrl = URL.createObjectURL(selectedImageFile); + setProfileImage(imageUrl); + setImageChangeModal(false); + + console.log("프로필 이미지 변경 완료:", selectedImageFile); + }; + const handleChangeName = () => { + setUserName(newNameInput); + setNameChangeModal(false); + console.log("이름이 바뀌었어용"); + }; + + return ( + <> + + + + + {userId} + setImageChangeModal(true)}> + 프로필 사진 변경 + + + + + + +

+ 이메일 +

+ + {userEmail} + + + { + setEmailChangeModal(true); + }} + > + 수정 + + + + + +

+ 아이디 +

+ + {userId} + + + setIdChangemModal(true)}> + 수정 + + + + + +

+ 이 스페이스에서 사용하는 이름 +

+ + {userName} + + + setNameChangeModal(true)}> + 수정 + + + + + + + + 비밀번호 변경하기 + + setPasswordChangeModal(true)} + > + 변경하기 + + + + 로그아웃 + setShowLogoutModal(true)}> + 로그아웃 + + + + 회원탈퇴 + setShowKillModal(true)}> + 회원탈퇴 + + + + + + {showLogoutModal && ( + setShowLogoutModal(false)} + /> + )} + {showKillModal && ( + setShowKillModal(false)} + /> + )} + + {showEmailModal && ( + setEmailChangeModal(false)} + onChange={setNewEmailInput} + /> + )} + + {showIdModal && ( + setIdChangemModal(false)} + onChange={setNewIdInput} + /> + )} + + {showPasswordModal && ( + setPasswordChangeModal(false)} + /> + )} + + {showImageModal && ( + setImageChangeModal(false)} + onImageSelect={setSelectedImageFile} + /> + )} + + {showNameModal && ( + setNameChangeModal(false)} + onChange={setNewNameInput} + /> + )} + + ); +}; + +export default Profiles2; diff --git a/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx b/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx index b41d69f..074d6e9 100644 --- a/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx +++ b/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx @@ -14,28 +14,20 @@ export const Line = styled.div` `; export const Profile = styled.div` - width: 140px; - height: 140px; - border-radius: 100px; - border: 0.5px solid ${color.GrayScale[1]}; - position: relative; - + width: 150px; + height: 120px; + border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; - border-radius: 50%; + border: 1px solid black; `; -/* export const Name = styled.p` - position: relative; - font: ${typography.Header2}; -`; */ - export const Id = styled.p` position: relative; font: ${typography.Header2}; color: ${color.GrayScale[8]}; - margin-left: 36px; + margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -100,9 +92,6 @@ export const ChangeLine = styled.div` `; export const ProfileContainer = styled.div` - /* display: flex; - align-items: center; - gap: 24px; */ display: flex; align-items: center; justify-content: start; diff --git a/blip-project/src/components/Page/MyPage/Profiles/profileStyle2.jsx b/blip-project/src/components/Page/MyPage/Profiles/profileStyle2.jsx new file mode 100644 index 0000000..074d6e9 --- /dev/null +++ b/blip-project/src/components/Page/MyPage/Profiles/profileStyle2.jsx @@ -0,0 +1,173 @@ +import styled from "styled-components"; +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; + +export const Line = styled.div` + display: flex; + flex-direction: column; + align-items: center; + border: 1px solid ${color.GrayScale[2]}; + width: 1114px; + height: 526px; + border-radius: 12px; + position: relative; +`; + +export const Profile = styled.div` + width: 150px; + height: 120px; + border-radius: 50%; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border: 1px solid black; +`; + +export const Id = styled.p` + position: relative; + font: ${typography.Header2}; + color: ${color.GrayScale[8]}; + margin-left: 6px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100% - 150px); +`; + +export const ProfileChangeButton = styled.button` + position: absolute; + right: 35px; + width: 111px; + height: 34px; + border-radius: 12px; + border: none; + background-color: ${color.Main[4]}; + color: ${color.White}; + font: ${typography.Button3}; +`; + +export const InfoLine = styled.div` + width: 1066px; + height: 212px; + border: 1px solid ${color.GrayScale[2]}; + position: relative; + border-radius: 12px; + margin-top: 16px; +`; + +export const Email = styled.p``; + +export const EmailChangeButton = styled.button` + width: 69px; + height: 34px; + border-radius: 12px; + background-color: ${color.Main[4]}; + font: ${typography.Button3}; + border: none; + color: ${color.White}; + margin-right: 36px; +`; + +export const IdChangeButton = styled.button` + width: 69px; + height: 34px; + border-radius: 12px; + background-color: ${color.Main[4]}; + font: ${typography.Button3}; + border: none; + color: ${color.White}; + margin-right: 36px; +`; + +export const ChangeLine = styled.div` + display: flex; + justify-content: start; + align-items: center; + width: 1066px; + height: 80px; + border: 1px solid ${color.GrayScale[2]}; + position: relative; + border-radius: 12px; + margin-top: 16px; +`; + +export const ProfileContainer = styled.div` + display: flex; + align-items: center; + justify-content: start; + gap: 24px; + width: 1066px; + margin-top: 44px; +`; + +export const PasswordChangeButton = styled.button` + width: 134px; + height: 34px; + border-radius: 12px; + color: ${color.White}; + background-color: ${color.Main[4]}; + border: none; +`; + +export const LogoutButton = styled.button` + width: 134px; + height: 34px; + border-radius: 12px; + color: ${color.White}; + background-color: ${color.Main[4]}; + border: none; +`; + +export const KillButton = styled.button` + width: 134px; + height: 34px; + border-radius: 12px; + color: ${color.White}; + background-color: ${color.Main[4]}; + border: none; +`; + +export const SmallId = styled.p` + position: relative; +`; + +export const TextWithButtonContainer = styled.div` + position: relative; + width: 100%; + display: flex; + align-items: center; +`; + +export const InfoItem = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + margin-top: 16px; +`; + +export const TextBlock = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + transform: translateX(24px); +`; + +export const ChangePassword = styled.p` + margin-bottom: 3px; +`; + +export const Logout = styled.p` + margin-bottom: 3px; +`; + +export const Kill = styled.p` + margin-bottom: 3px; +`; + +export const ChangeItem = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; +`; From 11bb3d277df1c5b263f270cd32cf66f11cd2bc9b Mon Sep 17 00:00:00 2001 From: seeum0507 Date: Wed, 14 May 2025 13:52:26 +0900 Subject: [PATCH 75/75] . --- blip-project/.gitignore | 1 + blip-project/src/Router.jsx | 7 +- blip-project/src/apis/instance.jsx | 5 ++ blip-project/src/components/CSS/MainTeam.css | 37 +++++++++- blip-project/src/components/CSS/myPage.css | 4 ++ .../MyPage/NeedPage/mainTeamWithoutStart.jsx | 38 +++++++++++ .../MyPage/NeedPage/mainTeamWithoutStart2.jsx | 38 +++++++++++ .../Page/MyPage/Profiles/profile.jsx | 1 + .../Page/MyPage/Profiles/profile2.jsx | 9 +-- .../Page/MyPage/Profiles/profileStyle.jsx | 37 +++++----- .../Page/MyPage/Profiles/profileStyle2.jsx | 18 +++-- .../src/components/Page/MyPage/myPage.jsx | 26 ------- .../components/Page/MyPage/myPageNoTeam.jsx | 68 +++++++++++++++++++ .../src/components/Page/MyPage/myPageTeam.jsx | 68 +++++++++++++++++++ 14 files changed, 299 insertions(+), 58 deletions(-) create mode 100644 blip-project/src/apis/instance.jsx create mode 100644 blip-project/src/components/CSS/myPage.css create mode 100644 blip-project/src/components/Page/MyPage/NeedPage/mainTeamWithoutStart.jsx create mode 100644 blip-project/src/components/Page/MyPage/NeedPage/mainTeamWithoutStart2.jsx delete mode 100644 blip-project/src/components/Page/MyPage/myPage.jsx create mode 100644 blip-project/src/components/Page/MyPage/myPageNoTeam.jsx create mode 100644 blip-project/src/components/Page/MyPage/myPageTeam.jsx diff --git a/blip-project/.gitignore b/blip-project/.gitignore index a547bf3..7ceb59f 100644 --- a/blip-project/.gitignore +++ b/blip-project/.gitignore @@ -22,3 +22,4 @@ dist-ssr *.njsproj *.sln *.sw? +.env diff --git a/blip-project/src/Router.jsx b/blip-project/src/Router.jsx index 89839df..15f7a0c 100644 --- a/blip-project/src/Router.jsx +++ b/blip-project/src/Router.jsx @@ -10,9 +10,10 @@ import { useMemo, useState, } from "react"; -import MyPage from "./components/Page/MyPage/myPage"; +import MyPageNoTeam from "./components/Page/MyPage/myPageNoTeam"; import Profiles from "./components/Page/MyPage/Profiles/profile"; import Profiles2 from "./components/Page/MyPage/Profiles/profile2"; +import MyPageTeam from "./components/Page/MyPage/myPageTeam"; const mocDateSide = [ { @@ -185,7 +186,9 @@ export const AppRouter = () => { } /> } /> } /> - } /> + } /> + + } /> diff --git a/blip-project/src/apis/instance.jsx b/blip-project/src/apis/instance.jsx new file mode 100644 index 0000000..e9138be --- /dev/null +++ b/blip-project/src/apis/instance.jsx @@ -0,0 +1,5 @@ +import axios from "axios"; + +export const instance = axios.create({ + baseURL: import.meta.env.VITE_USER_BASE_URL, +}); diff --git a/blip-project/src/components/CSS/MainTeam.css b/blip-project/src/components/CSS/MainTeam.css index 85a6190..3f6bf81 100644 --- a/blip-project/src/components/CSS/MainTeam.css +++ b/blip-project/src/components/CSS/MainTeam.css @@ -1,8 +1,7 @@ -*{ +* { margin: 0; padding: 0; overflow: hidden; - } .Main-Team { @@ -18,3 +17,37 @@ flex-direction: column; justify-content: space-between; } + +.Line { + border: 1px solid #cacaca; + border-radius: 12px; + width: 1290px; + height: 952px; + display: flex; + justify-content: center; + align-items: center; +} +.NoFeedBack { + position: absolute; + bottom: 100px; + width: 1146px; + height: 300px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + box-sizing: border-box; + white-space: nowrap; +} + +.FeedBackTitle { + margin-right: 1000px; +} + +.Feedback-p-font { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} diff --git a/blip-project/src/components/CSS/myPage.css b/blip-project/src/components/CSS/myPage.css new file mode 100644 index 0000000..0c649f3 --- /dev/null +++ b/blip-project/src/components/CSS/myPage.css @@ -0,0 +1,4 @@ +.STJoinNoLink, +.STJoinNoButton { + display: none !important; +} diff --git a/blip-project/src/components/Page/MyPage/NeedPage/mainTeamWithoutStart.jsx b/blip-project/src/components/Page/MyPage/NeedPage/mainTeamWithoutStart.jsx new file mode 100644 index 0000000..9b83e2c --- /dev/null +++ b/blip-project/src/components/Page/MyPage/NeedPage/mainTeamWithoutStart.jsx @@ -0,0 +1,38 @@ +import "../../../CSS/MainTeam.css"; +import DateTeam from "../../Src/DateTeam"; +import HeaderTeam from "../../Src/page/HeaderTeam"; +import SidebarTeam from "../../Src/sidebarTeam"; +import MeetingTeam from "../../Src/MeetingTeam"; +import Profiles from "../Profiles/profile"; +import Feedback from "../../Src/page/Feedback"; +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; + +const MainTeamWithoutStart = () => { + return ( + <> + +
+ +
+ +
+

+ 회의 피드백 +

+ +
+
+
+ + +
+
+ + ); +}; + +export default MainTeamWithoutStart; diff --git a/blip-project/src/components/Page/MyPage/NeedPage/mainTeamWithoutStart2.jsx b/blip-project/src/components/Page/MyPage/NeedPage/mainTeamWithoutStart2.jsx new file mode 100644 index 0000000..7740245 --- /dev/null +++ b/blip-project/src/components/Page/MyPage/NeedPage/mainTeamWithoutStart2.jsx @@ -0,0 +1,38 @@ +import "../../../CSS/MainTeam.css"; +import DateTeam from "../../Src/DateTeam"; +import HeaderTeam from "../../Src/page/HeaderTeam"; +import SidebarTeam from "../../Src/sidebarTeam"; +import MeetingTeam from "../../Src/MeetingTeam"; +import Profiles2 from "../Profiles/profile2"; +import Feedback from "../../Src/page/Feedback"; +import { color } from "../../../../style/color"; +import { typography } from "../../../../fonts/fonts"; + +const MainTeamWithoutStart2 = () => { + return ( + <> + +
+ +
+ +
+

+ 회의 피드백 +

+ +
+
+
+ + +
+
+ + ); +}; + +export default MainTeamWithoutStart2; diff --git a/blip-project/src/components/Page/MyPage/Profiles/profile.jsx b/blip-project/src/components/Page/MyPage/Profiles/profile.jsx index cb0686d..41a89a6 100644 --- a/blip-project/src/components/Page/MyPage/Profiles/profile.jsx +++ b/blip-project/src/components/Page/MyPage/Profiles/profile.jsx @@ -44,6 +44,7 @@ const Profiles = () => { }; const handleChangePassword = () => { console.log("비밀번호 바꾸기용용용"); + setPasswordChangeModal(false); }; const handleChangeImage = () => { if (!selectedImageFile) return; diff --git a/blip-project/src/components/Page/MyPage/Profiles/profile2.jsx b/blip-project/src/components/Page/MyPage/Profiles/profile2.jsx index cd3d666..5628343 100644 --- a/blip-project/src/components/Page/MyPage/Profiles/profile2.jsx +++ b/blip-project/src/components/Page/MyPage/Profiles/profile2.jsx @@ -1,4 +1,4 @@ -import * as S from "../Profiles/profileStyle"; +import * as S from "../Profiles/profileStyle2"; import { typography } from "../../../../fonts/fonts"; import { color } from "../../../../style/color"; import { useState } from "react"; @@ -69,6 +69,7 @@ const Profiles2 = () => { + {userName} {userId} setImageChangeModal(true)}> 프로필 사진 변경 @@ -130,7 +131,7 @@ const Profiles2 = () => { - + 비밀번호 변경하기 @@ -140,13 +141,13 @@ const Profiles2 = () => { 변경하기 - + 로그아웃 setShowLogoutModal(true)}> 로그아웃 - + 회원탈퇴 setShowKillModal(true)}> 회원탈퇴 diff --git a/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx b/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx index 074d6e9..412f376 100644 --- a/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx +++ b/blip-project/src/components/Page/MyPage/Profiles/profileStyle.jsx @@ -1,7 +1,6 @@ import styled from "styled-components"; import { color } from "../../../../style/color"; import { typography } from "../../../../fonts/fonts"; - export const Line = styled.div` display: flex; flex-direction: column; @@ -11,18 +10,31 @@ export const Line = styled.div` height: 526px; border-radius: 12px; position: relative; + margin-bottom: 390px; `; export const Profile = styled.div` + width: 140px; + height: 140px; + border-radius: 100px; + border: 0.5px solid ${color.GrayScale[1]}; + position: relative; width: 150px; height: 120px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; + border-radius: 50%; border: 1px solid black; + margin-bottom: 30px; `; +/* export const Name = styled.p` + position: relative; + font: ${typography.Header2}; +`; */ + export const Id = styled.p` position: relative; font: ${typography.Header2}; @@ -32,8 +44,8 @@ export const Id = styled.p` overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 150px); + margin-bottom: 25px; `; - export const ProfileChangeButton = styled.button` position: absolute; right: 35px; @@ -45,18 +57,15 @@ export const ProfileChangeButton = styled.button` color: ${color.White}; font: ${typography.Button3}; `; - export const InfoLine = styled.div` width: 1066px; height: 212px; border: 1px solid ${color.GrayScale[2]}; position: relative; border-radius: 12px; - margin-top: 16px; + margin-top: 5px; `; - export const Email = styled.p``; - export const EmailChangeButton = styled.button` width: 69px; height: 34px; @@ -67,7 +76,6 @@ export const EmailChangeButton = styled.button` color: ${color.White}; margin-right: 36px; `; - export const IdChangeButton = styled.button` width: 69px; height: 34px; @@ -78,7 +86,6 @@ export const IdChangeButton = styled.button` color: ${color.White}; margin-right: 36px; `; - export const ChangeLine = styled.div` display: flex; justify-content: start; @@ -92,6 +99,9 @@ export const ChangeLine = styled.div` `; export const ProfileContainer = styled.div` + /* display: flex; + align-items: center; + gap: 24px; */ display: flex; align-items: center; justify-content: start; @@ -99,7 +109,6 @@ export const ProfileContainer = styled.div` width: 1066px; margin-top: 44px; `; - export const PasswordChangeButton = styled.button` width: 134px; height: 34px; @@ -108,7 +117,6 @@ export const PasswordChangeButton = styled.button` background-color: ${color.Main[4]}; border: none; `; - export const LogoutButton = styled.button` width: 134px; height: 34px; @@ -117,7 +125,6 @@ export const LogoutButton = styled.button` background-color: ${color.Main[4]}; border: none; `; - export const KillButton = styled.button` width: 134px; height: 34px; @@ -126,18 +133,15 @@ export const KillButton = styled.button` background-color: ${color.Main[4]}; border: none; `; - export const SmallId = styled.p` position: relative; `; - export const TextWithButtonContainer = styled.div` position: relative; width: 100%; display: flex; align-items: center; `; - export const InfoItem = styled.div` display: flex; align-items: center; @@ -145,26 +149,21 @@ export const InfoItem = styled.div` width: 100%; margin-top: 16px; `; - export const TextBlock = styled.div` display: flex; flex-direction: column; gap: 8px; transform: translateX(24px); `; - export const ChangePassword = styled.p` margin-bottom: 3px; `; - export const Logout = styled.p` margin-bottom: 3px; `; - export const Kill = styled.p` margin-bottom: 3px; `; - export const ChangeItem = styled.div` display: flex; flex-direction: column; diff --git a/blip-project/src/components/Page/MyPage/Profiles/profileStyle2.jsx b/blip-project/src/components/Page/MyPage/Profiles/profileStyle2.jsx index 074d6e9..8f0a29b 100644 --- a/blip-project/src/components/Page/MyPage/Profiles/profileStyle2.jsx +++ b/blip-project/src/components/Page/MyPage/Profiles/profileStyle2.jsx @@ -7,7 +7,7 @@ export const Line = styled.div` flex-direction: column; align-items: center; border: 1px solid ${color.GrayScale[2]}; - width: 1114px; + width: 956px; height: 526px; border-radius: 12px; position: relative; @@ -21,11 +21,12 @@ export const Profile = styled.div` background-position: center; background-repeat: no-repeat; border: 1px solid black; + margin-left: 80px; `; export const Id = styled.p` position: relative; - font: ${typography.Header2}; + font: ${typography.Body1}; color: ${color.GrayScale[8]}; margin-left: 6px; white-space: nowrap; @@ -36,7 +37,7 @@ export const Id = styled.p` export const ProfileChangeButton = styled.button` position: absolute; - right: 35px; + right: 110px; width: 111px; height: 34px; border-radius: 12px; @@ -47,7 +48,7 @@ export const ProfileChangeButton = styled.button` `; export const InfoLine = styled.div` - width: 1066px; + width: 908px; height: 212px; border: 1px solid ${color.GrayScale[2]}; position: relative; @@ -83,7 +84,7 @@ export const ChangeLine = styled.div` display: flex; justify-content: start; align-items: center; - width: 1066px; + width: 908px; height: 80px; border: 1px solid ${color.GrayScale[2]}; position: relative; @@ -136,6 +137,7 @@ export const TextWithButtonContainer = styled.div` width: 100%; display: flex; align-items: center; + flex-direction: start; `; export const InfoItem = styled.div` @@ -155,6 +157,7 @@ export const TextBlock = styled.div` export const ChangePassword = styled.p` margin-bottom: 3px; + white-space: nowrap; `; export const Logout = styled.p` @@ -171,3 +174,8 @@ export const ChangeItem = styled.div` align-items: flex-start; gap: 8px; `; + +export const Name = styled.p` + font: ${typography.Header2}; + color: ${color.GrayScale[8]}; +`; diff --git a/blip-project/src/components/Page/MyPage/myPage.jsx b/blip-project/src/components/Page/MyPage/myPage.jsx deleted file mode 100644 index 9c9a5b7..0000000 --- a/blip-project/src/components/Page/MyPage/myPage.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useState } from "react"; -import MTeamJoinNo from "../Main/MainTeamJoinNo"; -import HeaderTeam from "../Src/page/HeaderTeam"; -import Feedback from "../Src/page/Feedback"; -import MeetingContent from "../Src/page/MeetingContent"; -import SidebarTeam from "../Src/sidebarTeam"; -import DateTeamJoinNo from "../Src/DateTeam"; -import MainTeam from "../Main/MainTeam"; -import { TeamDel } from "../Main/Main"; - -const MyPage = () => { - const contextValue = { - image: "someImageUrl", - Owner: "someOwner", - }; - - return ( - - - - - - ); -}; - -export default MyPage; diff --git a/blip-project/src/components/Page/MyPage/myPageNoTeam.jsx b/blip-project/src/components/Page/MyPage/myPageNoTeam.jsx new file mode 100644 index 0000000..f32c7bd --- /dev/null +++ b/blip-project/src/components/Page/MyPage/myPageNoTeam.jsx @@ -0,0 +1,68 @@ +import { useEffect, useState } from "react"; +import MTeamJoinNo from "../Main/MainTeamJoinNo"; +import HeaderTeam from "../Src/page/HeaderTeam"; +import Feedback from "../Src/page/Feedback"; +import MeetingContent from "../Src/page/MeetingContent"; +import SidebarTeam from "../Src/sidebarTeam"; +import DateTeamJoinNo from "../Src/DateTeam"; +import MainTeam from "../Main/MainTeam"; +import { TeamDel } from "../Main/Main"; +import DateTeam from "../Src/DateTeam"; +import MeetingTeam from "../Src/MeetingTeam"; +import MainTeamWithoutStart from "./NeedPage/mainTeamWithoutStart"; +import "../../CSS/myPage.css"; +import { useParams } from "react-router-dom"; +import { instance } from "../../../apis/instance"; + +const MyPageNoTeam = () => { + const [image, setImage] = useState(null); + const [Owner, setOwner] = useState(false); + const [join, setJoin] = useState(false); + const [itemId, setItemId] = useState(null); + + const teamId = itemId || "원하는팀ID"; + const accessToken = localStorage.getItem("accessToken"); + + const { userId } = useParams(); + const [userInfo, setUserInfo] = useState(null); + + useEffect(() => { + console.log("userId:", userId); + console.log("accessToken:", accessToken); + + if (!userId || !accessToken) return; + + instance + .get(`/users/${userId}/mypage`, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }) + .then((res) => { + console.log("API 응답:", res.data); + setUserInfo(res.data); + }) + .catch((err) => { + console.error("API 에러:", err); + }); + }, [userId]); + + const teamDelContext = { + image, + setImage, + itemId, + Owner, + setOwner, + join, + setJoin, + userInfo, + }; + + return ( + + + + ); +}; + +export default MyPageNoTeam; diff --git a/blip-project/src/components/Page/MyPage/myPageTeam.jsx b/blip-project/src/components/Page/MyPage/myPageTeam.jsx new file mode 100644 index 0000000..d783a3d --- /dev/null +++ b/blip-project/src/components/Page/MyPage/myPageTeam.jsx @@ -0,0 +1,68 @@ +import { useEffect, useState } from "react"; +import MTeamJoinNo from "../Main/MainTeamJoinNo"; +import HeaderTeam from "../Src/page/HeaderTeam"; +import Feedback from "../Src/page/Feedback"; +import MeetingContent from "../Src/page/MeetingContent"; +import SidebarTeam from "../Src/sidebarTeam"; +import DateTeamJoinNo from "../Src/DateTeam"; +import MainTeam from "../Main/MainTeam"; +import { TeamDel } from "../Main/Main"; +import DateTeam from "../Src/DateTeam"; +import MeetingTeam from "../Src/MeetingTeam"; +import MainTeamWithoutStart2 from "./NeedPage/mainTeamWithoutStart2"; +import "../../CSS/myPage.css"; +import { useParams } from "react-router-dom"; +import { instance } from "../../../apis/instance"; + +const MyPageTeam = () => { + const [image, setImage] = useState(null); + const [Owner, setOwner] = useState(false); + const [join, setJoin] = useState(false); + const [itemId, setItemId] = useState(null); + + const teamId = itemId || "원하는팀ID"; + const accessToken = localStorage.getItem("accessToken"); + + const { userId } = useParams(); + const [userInfo, setUserInfo] = useState(null); + + useEffect(() => { + console.log("userId:", userId); + console.log("accessToken:", accessToken); + + if (!userId || !accessToken) return; + + instance + .get(`/users/${userId}/mypage`, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }) + .then((res) => { + console.log("API 응답:", res.data); + setUserInfo(res.data); + }) + .catch((err) => { + console.error("API 에러:", err); + }); + }, [userId]); + + const teamDelContext = { + image, + setImage, + itemId, + Owner, + setOwner, + join, + setJoin, + userInfo, + }; + + return ( + + + + ); +}; + +export default MyPageTeam;