Merge branch 'develop' into feat/#325/webShareAPI

ASAP-as-soon-as-possible · Sep 2, 2024 · bcaab37 · bcaab37
2 parents 1af5ae8 + e76e291
commit bcaab37
Show file tree

Hide file tree

Showing 45 changed files with 331 additions and 343 deletions.
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
diff --git a/.github/workflows/push-buildRepo.yml b/.github/workflows/push-buildRepo.yml
@@ -1,4 +1,4 @@
-name: Push Main
+name: Push Main 
 
 on:
   push:

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,12 @@
 /**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */
-import './utils/changeBrowser';
 import 'react-toastify/dist/ReactToastify.css';
 import './App.css';
+import './utils/changeBrowser';
 
 import { useEffect } from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { ThemeProvider } from 'styled-components';
-import styled from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import ToastContainerBox from 'utils/toast/ToastContainer';
 
 import Router from './Router';
@@ -27,7 +25,7 @@ const MobileWrapper = styled.div`
   padding-right: 2rem;
   padding-left: 2rem;
 
-  max-width: var(--app-max-width, 37.5rem);
+  max-width: var(--app-max-width, 43.5rem);
   min-height: calc(var(--vh, 1vh) * 100);
 `;
 
@@ -37,7 +35,8 @@ function App() {
     document.documentElement.style.setProperty('--vh', `${vh}px`);
 
     const windowWidth = window.innerWidth || document.documentElement.clientWidth;
-    const maxWidth = Math.min(37.5, windowWidth);
+
+    const maxWidth = Math.min(43, windowWidth);
     document.documentElement.style.setProperty('--app-max-width', `${maxWidth}rem`);
   };
 
@@ -60,7 +59,7 @@ function App() {
             <Router />
             <ToastContainerBox />
           </MobileWrapper>
-          <ReactQueryDevtools initialIsOpen={false} />
+          {/* <ReactQueryDevtools initialIsOpen={false} /> */}
         </QueryClientProvider>
       </ThemeProvider>
     </>

diff --git a/src/components/Icon/icon.ts b/src/components/Icon/icon.ts
@@ -67,6 +67,6 @@ export {
   RadioCheckIc,
   SpeechBubbleIc,
   TimeIc,
-  TooltipArrowIc,
   Wave,
+  TooltipArrowIc,
 };
diff --git a/src/components/common/BottomSheet/BottomSheet.tsx b/src/components/common/BottomSheet/BottomSheet.tsx
@@ -28,12 +28,13 @@ const BottomSheetModal = styled.div<{ $isModalOpen: boolean }>`
   gap: 0.8rem;
   transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1);
   z-index: 1;
-  border-top-left-radius: 1.2rem;
-  border-top-right-radius: 1.2rem;
+  border-top-left-radius: 1.8rem;
+  border-top-right-radius: 1.8rem;
   background-color: ${({ theme }) => theme.colors.grey8};
 
-  padding: 4.4rem 2rem 4rem;
-  width: 37.5rem;
+  padding: 3.6rem 2rem 4.8rem;
+  width: 100%;
+  max-width: 43rem;
 
   & button {
     width: 100%;

diff --git a/src/components/common/atomComponents/Button.tsx b/src/components/common/atomComponents/Button.tsx
@@ -1,7 +1,7 @@
-import { css, styled } from 'styled-components';
-
 import React from 'react';
 
+import { css, styled } from 'styled-components';
+
 interface ButtonProps {
   children: React.ReactNode;
   typeState: string;
@@ -27,10 +27,11 @@ const buttonDefaultCSS = {
 
     border-radius: 0.8rem;
     padding: 1.6rem;
-    width: 33.5rem;
+    width: 100%;
+    max-width: 39rem;
     height: 5.4rem;
     letter-spacing: -0.032rem;
-
+    /* margin: 0 2rem; */
     pointer-events: auto;
   `,
 };
@@ -44,19 +45,22 @@ const buttonCSS = {
   halfPrimaryActive: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.main1};
-    width: 15.2rem;
+    width: 100%;
+    max-width: 18.8rem;
     color: ${({ theme }) => theme.colors.white};
   `,
   halfPrimaryDisabled: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
-    width: 15.2rem;
+    max-width: 18.8rem;
+    width: 100%;
     color: ${({ theme }) => theme.colors.grey4};
   `,
   primaryDisabled: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
     color: ${({ theme }) => theme.colors.grey4};
+    cursor: default;
   `,
   secondaryActive: css`
     ${buttonDefaultCSS.basicCss};
@@ -66,19 +70,20 @@ const buttonCSS = {
   halfSecondaryActive: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.main5};
-    width: 15.2rem;
+    max-width: 18.8rem;
     color: ${({ theme }) => theme.colors.grey9};
   `,
   secondaryDisabled: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
     color: ${({ theme }) => theme.colors.grey5};
     pointer-events: none;
+    cursor: default;
   `,
   halfsecondaryDisabled: css`
     ${buttonDefaultCSS.basicCss};
     background: ${({ theme }) => theme.colors.grey7};
-    width: 15.2rem;
+    max-width: 18.8rem;
     color: ${({ theme }) => theme.colors.grey5};
   `,
   tertiaryActive: css`
@@ -91,7 +96,7 @@ const buttonCSS = {
     ${buttonDefaultCSS.basicCss};
     border: 1px solid ${({ theme }) => theme.colors.main3};
     background-color: ${({ theme }) => theme.colors.grey10};
-    width: 15.2rem;
+    max-width: 18.8rem;
     color: ${({ theme }) => theme.colors.main3};
   `,
   tertiaryDisabled: css`

diff --git a/src/components/common/atomComponents/PasswordInput.tsx b/src/components/common/atomComponents/PasswordInput.tsx
@@ -25,7 +25,7 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp
           placeholder={placeholder}
           value={value}
           onChange={passWordOnChange}
-          $iserror={value.length < 4}
+          $iserror={value.length < 4 || value.length > 8}
           type={inputType ? 'password' : `number`}
           inputMode="numeric"
         />
@@ -34,15 +34,25 @@ function PasswordInput({ value, placeholder, passWordOnChange, page }: ValueProp
         </IconContainer>
       </InputSection>
       {page === 'createMeeting' ? (
-        <SubTextSection>
-          <Text font={'body4'} color={`${theme.colors.sub1}`}>
-            *
-          </Text>
-          <Text font={'body4'} color={`${theme.colors.sub1}`}>
-            확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니
-            반드시 기억해주세요!
-          </Text>
-        </SubTextSection>
+        <>
+          {value.length > 8 && (
+            <InvalidPWTextSection>
+              <Text font={'body4'} color={theme.colors.red}>
+                최대 8자리까지 입력 가능해요{' '}
+              </Text>
+            </InvalidPWTextSection>
+          )}
+
+          <SubTextSection>
+            <Text font={'body4'} color={`${theme.colors.sub1}`}>
+              *
+            </Text>
+            <Text font={'body4'} color={`${theme.colors.sub1}`}>
+              확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니
+              반드시 기억해주세요!
+            </Text>
+          </SubTextSection>
+        </>
       ) : (
         undefined
       )}
@@ -78,7 +88,7 @@ const StyledPasswordInput = styled.input<{ $iserror: boolean }>`
   background: ${({ theme }) => theme.colors.grey7};
   padding: 1rem 1.6rem;
 
-  width: 33.5rem;
+  width: 100%;
   height: 5.2rem;
 
   caret-color: ${({ theme }) => theme.colors.main1};
@@ -117,3 +127,11 @@ const SubTextSection = styled.div`
     font-weight: 600;
   }
 `;
+
+const InvalidPWTextSection = styled.div`
+  margin-top: 0.9rem;
+
+  span {
+    font-weight: 600;
+  }
+`;
diff --git a/src/components/common/atomComponents/PlaceInput.tsx b/src/components/common/atomComponents/PlaceInput.tsx
@@ -51,7 +51,9 @@ function PlaceInput({ value, setValue, placeholder }: ValueProps) {
 
 export default PlaceInput;
 
-const PlaceInputWrapper = styled.div``;
+const PlaceInputWrapper = styled.div`
+  width: 100%;
+`;
 
 const InputSection = styled.div`
   display: flex;
@@ -78,7 +80,7 @@ const StyledTextInput = styled.input<{ $iserror: boolean }>`
 
   padding: 1rem 1.6rem;
 
-  width: 33.5rem;
+  width: 100%;
   height: 5.2rem;
 
   color: ${({ theme }) => theme.colors.white};

diff --git a/src/components/common/atomComponents/TextAreaInput.tsx b/src/components/common/atomComponents/TextAreaInput.tsx
@@ -24,6 +24,7 @@ function TextAreaInput({ value, setValue, placeholder }: ValueProps) {
 export default TextAreaInput;
 
 const TextAreaWrapper = styled.div`
+  width: 100%;
   position: relative;
 `;
 
@@ -32,7 +33,7 @@ const StyledTextArea = styled.textarea`
   border-radius: 1rem;
   background-color: ${({ theme }) => theme.colors.grey8};
   padding: 1.8rem;
-  width: 33.5rem;
+  width: 100%;
   height: 20.8rem;
   resize: none;
   color: ${({ theme }) => theme.colors.white};