design: 프로젝트-미팅룸작업중 #23

prgrms-web-devcourse-final-project · Feb 16, 2025 · 0dd8d64 · 0dd8d64
1 parent 5a0dd92
commit 0dd8d64
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,7 @@ import ProjectRoom from "./pages/ProjectRoom/ProjectRoom";
 import HeaderLayout from "./components/layout/HeaderLayout";
 import ProjectRoomDetail from "./pages/ProjectRoom/ProjectRoomDetail";
 import MyPage from "./pages/MyPage";
+import MeetingRoom from "./pages/MeetingRoom/MeetingRoom";
 
 const App = () => {
   return (
@@ -29,6 +30,7 @@ const App = () => {
       {/* 헤더만 있는 페이지 */}
       <Route element={<HeaderLayout />}>
         <Route path="/projectRoom" element={<ProjectRoom />} />
+        <Route path="/meetingRoom/:projectId" element={<MeetingRoom />} />
         <Route path="/myPage" element={<MyPage />} />
       </Route>
     </Routes>

diff --git a/src/components/MeetingRoom/MeetingRoomProjectBox.tsx b/src/components/MeetingRoom/MeetingRoomProjectBox.tsx
@@ -0,0 +1,30 @@
+const MeetingRoomProjectBox = () => {
+  return (
+    <div className="flex">
+      {/* 프로젝트 넘버 */}
+      <div className="w-[80px] flex ">
+        <span className="text-[50px] text-main-green02 font-notoTC mt-0">
+          10
+        </span>
+      </div>
+      <div
+        className="bg-white border border-[#CAD2CB] w-full h-[70px] flex 
+          gap-5 items-center px-5 font-bold "
+      >
+        <div className="flex justify-between items-center w-full px-5">
+          {/* 프로젝트 명, 미팅룸 명 */}
+          <div className="flex flex-col gap-[10px]">
+            <span className="font-bold">프로젝트 명</span>
+            <span className="font-bold text-[18px]">미팅룸 명</span>
+          </div>
+          <div className="flex flex-col items-end">
+            <span className="font-bold text-[14px]">새로운 메시지</span>
+            <span className="font-bold text-[14px]">+99</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MeetingRoomProjectBox;
diff --git a/src/components/ProjectRoom/ProjectListBox.tsx b/src/components/ProjectRoom/ProjectListBox.tsx
@@ -15,7 +15,9 @@ const ProjectListBox = ({ projectId, filterProject }: ProjectListBoxProps) => {
         gap-5 items-center px-5 font-bold "
     >
       {/* 프로젝트 넘버 */}
-      <p className="text-[50px] font-medium text-main-green02">10</p>
+      <p className="text-[50px] font-medium text-main-green02 font-notoTC">
+        10
+      </p>
 
       <div className="flex justify-between items-center w-full px-5">
         {/* 프로젝트 명, 기간 */}

diff --git a/src/components/modals/AlarmModal.tsx b/src/components/modals/AlarmModal.tsx
@@ -64,7 +64,7 @@ const AlarmModal = ({ onClose }: AlarmModalProps) => {
             css="bg-white border-logo-green text-logo-green "
           />
         </div>
-        <div className="flex flex-col w-full h-[300px] gap-[10px] overflow-y-auto">
+        <div className="flex flex-col w-full h-[300px] gap-[10px] overflow-y-auto scrollbar-none">
           {dummyAlarms.length > 0 ? (
             dummyAlarms.map((alarm, index) => (
               <AlarmBox

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lacquer&family=Noto+Sans+TC:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 @import "tailwindcss";
 @plugin 'tailwind-scrollbar';
 
@@ -22,4 +23,10 @@
   --color-black01: #212121;
   --color-gray01: #AFAFAF;
   --color-gray02: #E8E8E8;
+  --font-notoTC: "Noto Sans TC", "sans-serif";
 }
+
+
+.font-notoTC {
+    font-family: var(--font-notoTC);
+  }
diff --git a/src/pages/MeetingRoom/MeetingRoom.tsx b/src/pages/MeetingRoom/MeetingRoom.tsx
@@ -0,0 +1,30 @@
+import OutProjectIcon from "../../assets/icons/outProjectDetail.svg";
+import MeetingRoomProjectBox from "../../components/MeetingRoom/MeetingRoomProjectBox";
+
+const MeetingRoom = () => {
+  return (
+    <div
+      className="flex w-full p-[50px] gap-[20px] bg-white bg-gradient-to-t from-white/0 via-[#BFCDB7]/30 to-white/0"
+      style={{ maxHeight: "calc(100vh - 50px)" }}
+    >
+      <div className="flex-[0.37] h-[682px] flex flex-col gap-[30px] px-[30px] bg-white/60">
+        <div className="ml-[10px]">
+          <div className="inline-flex flex-col items-center">
+            <img
+              src={OutProjectIcon}
+              alt="프로젝트 나가기"
+              className="w-[24px] h-[24px]"
+            />
+            <span className="text-main-green01 font-bold">My 프로젝트</span>
+          </div>
+        </div>
+        <div className="w-full h-full flex flex-col">
+          <MeetingRoomProjectBox />
+        </div>
+      </div>
+      <div className="flex-[0.63] h-[682px] bg-white/60">미팅룸</div>
+    </div>
+  );
+};
+
+export default MeetingRoom;