release(web): v1.0.2 (#173)

* 테스트

* none

* none

* none

* video css add

* none

* chating add

* camera on off add

* exit user check chat,live session exit

* chat css fix

* pull develop

* chore(web): 레이아웃 컴포넌트 초기 진입시에만 렌더링 되도록 수정

* feat(web): Live 타입 모듈로 추가

* chore(web): 오픈비두 환경변수 추가

* refactor(web): 기존 컴포넌트 내부에 선언된 api들을 tanstack-query로 이관

* refactor(web): 기존 Live 사용하던 타입들 모듈로 재사용

* refactor(web): 기존 컨벤션에 맞춰 네임스페이스 방식으로 Import 변경

* design(ui): FormLabel padding 수정

* design(ui): FormAttachment 모바일 스타일 수정

* feat(web): Live Form State 추가

* refactor(web): Ui Form 패키지 사용

* chore(web): Live 종료시 invalidQuery 실행 삭제

* chore(web): Live 리스트 Api 스펙 변경 적용

* pull feature_live

* private room password input modal add, chat stomp get userNumbers

* none

* disconnect fix

* openvidu disconnection 구현

* fix(web): 새로 올라온 QA 리스트 - 1  (#163)

* fix(web): 메인페이지 매거진 수량 버그

* fix(web): 마이페이지 갤러리 좌우 간격

* fix(web): 더보기 버튼 텍스트 웨이트

* fix(web): 검색 시 x 버튼 중복

* fix(web): 매거진 카드 flex

* fix(web): 커뮤니티 - Main - 리스트 글자

* fix(web): SEO title 변경

* pc version live complite

* fix(web): lint error

* feat(web): WebRTC을 사용한 라이브 페이지 초기 구현 (#165)

* chore(web): 레이아웃 컴포넌트 초기 진입시에만 렌더링 되도록 수정

* feat(web): Live 타입 모듈로 추가

* chore(web): 오픈비두 환경변수 추가

* refactor(web): 기존 컴포넌트 내부에 선언된 api들을 tanstack-query로 이관

* refactor(web): 기존 Live 사용하던 타입들 모듈로 재사용

* refactor(web): 기존 컨벤션에 맞춰 네임스페이스 방식으로 Import 변경

* design(ui): FormLabel padding 수정

* design(ui): FormAttachment 모바일 스타일 수정

* feat(web): Live Form State 추가

* refactor(web): Ui Form 패키지 사용

* chore(web): Live 종료시 invalidQuery 실행 삭제

* chore(web): Live 리스트 Api 스펙 변경 적용

* pull feature_live

* private room password input modal add, chat stomp get userNumbers

* none

* disconnect fix

* openvidu disconnection 구현

* pc version live complite

* fix(web): lint error

---------

Co-authored-by: [email protected] <[email protected]>
Co-authored-by: doyupKim <[email protected]>

* add recoil for layout footer toggle controll

* striming video width 100% add

* striming mobile header delete advertisement

* fix style

* change mobile publish view

* fix(web): 자잘자잘한 qa 최신 리스트 수정 (#172)

* feat: change private api method to public api

* feat: include Navbar about live link

* fix(web, lib): udate truncate maxLength arg

---------

Co-authored-by: [email protected] <[email protected]>
Co-authored-by: doyupKim <[email protected]>
Co-authored-by: baejinWoong <[email protected]>

apps/web/next.config.js

@@ -9,7 +9,7 @@ const withPWA = require('next-pwa')({
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   swcMinify: true,
   compiler: {
     styledComponents: {

apps/web/package.json

@@ -61,6 +61,10 @@
     "node-fetch-commonjs": "^3.2.4",
     "prettier": "^2.8.4",
     "typescript": "^4.9.5",
-    "webpack": "^5.75.0"
+    "webpack": "^5.75.0",
+    "openvidu-browser": "^2.26.0",
+    "axios": "^1.3.4",
+    "@stomp/stompjs": "^7.0.0",
+    "recoil": "^0.7.7"
   }
 }

apps/web/public/css/live.module.css

@@ -0,0 +1,18 @@
+.chatTextarea:focus {
+  outline: none;
+}
+
+.chatTextarea::placeholder {
+  color: #8E8E95;
+  font-weight: 500;
+  font-family: 'Pretendard';
+}
+
+.chatTextarea {
+  resize: none;
+  border: none;
+  height: 100%;
+  font-weight: 500;
+  font-family: 'Pretendard';
+  width: 100%;
+}

apps/web/src/components/layout/layout.styled.ts

@@ -19,6 +19,7 @@ const Container = styled.div`
   min-height: calc(100vh - 17.5rem);
   padding-bottom: 85px;
   ${applyMediaQuery('mobile')} {
+    padding-bottom: 10px;
     & > .navbar {
       display: none !important;
     }

apps/web/src/components/layout/layout.tsx

@@ -5,24 +5,27 @@ import * as Styled from './layout.styled';
 import Navbar from './navbar';
 import Toggle from './toggle';
 import Advertisements from 'components/common/advertisements';
+import { useRecoilState } from 'recoil';
+import { layoutPropsRecoil } from 'src/recoil/atom';
 
 interface LayoutProps extends PageProps {
   children?: React.ReactNode;
 }
 
 const Layout = ({ children, ...rest }: LayoutProps) => {
+  const [layoutRecoil] = useRecoilState(layoutPropsRecoil);
   return (
     <>
       <Styled.Container>
         <Header />
         <Navbar />
         <main role="main">
-          <Advertisements {...rest} />
+          {layoutRecoil.isFooter && <Advertisements {...rest} />}
           {children}
         </main>
       </Styled.Container>
-      <Footer />
-      <Toggle />
+      {layoutRecoil.isFooter && <Footer />}
+      {layoutRecoil.isFooter && <Toggle />}
     </>
   );
 };

apps/web/src/components/layout/navbar/navbar.tsx

@@ -33,7 +33,7 @@ const NavLink = memo(function NavLink({
             fontSize="header-16"
             fontWeight="bold"
             lineHeight="120%"
-            color="black"
+            color={href === 'live' ? 'system-1' : 'black'}
           >
             {title}
           </Typography>