Merge pull request #330 from ASAP-as-soon-as-possible/develop

release 2.0.0 -> main

.github/workflows/prBuildCI.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Build # 빌드
         run: yarn build
 
-      - name: Close PR, if build fails 
+      - name: Comment and Request changes, if build fails 
         if: ${{ failure() }} 
         uses: actions/github-script@v6
         with: 
@@ -40,6 +40,5 @@ jobs:
                repo: context.repo.repo,
                pull_number: pull_number,
                title: updated_title,
-               state: 'closed'
               })
 

.github/workflows/push-buildRepo.yml

@@ -1,4 +1,4 @@
-name: Push Main
+name: Push Main 
 
 on:
   push:

.stylelintrc

@@ -3,7 +3,6 @@
   "extends": [
     "stylelint-config-recommended",
     "stylelint-config-styled-components",
-    "stylelint-config-prettier",
     "stylelint-config-concentric-order"
   ],
   "overrides": [

package.json

@@ -24,6 +24,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.10",
+    "react-lottie": "^1.2.4",
     "react-multi-date-picker": "^4.1.2",
     "react-router-dom": "6",
     "react-toastify": "^9.1.3",
@@ -38,6 +39,7 @@
     "@types/node": "^20.3.2",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
+    "@types/react-lottie": "^1.2.10",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
@@ -54,7 +56,6 @@
     "styled-components": "^6.0.1",
     "stylelint": "15.5.0",
     "stylelint-config-concentric-order": "^5.1.0",
-    "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended": "^12.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "typescript": "^5.0.2",

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/macro';
+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>
     </>

src/Router.tsx

@@ -1,4 +1,5 @@
 import ChooseBestTime from 'pages/bestMeetTime/ChooseBestTime';
+import CompleteCreateMeeting from 'pages/completeCreateMeeting/CompleteCreateMeeting';
 import CreateMeeting from 'pages/createMeeting/CreateMeeting';
 import CueCard from 'pages/cueCard/CueCard';
 import ErrorPage404 from 'pages/errorLoading/ErrorPage404';
@@ -15,7 +16,7 @@ const Router = () => {
       <Routes>
         <Route path="/" element={<OnBoarding />} />
         <Route path="/meet/create" element={<CreateMeeting />} />
-        <Route path="/meet/complete" element={<SteppingLayout steppingType={'meetComplete'} />} />
+        <Route path="/meet/complete/:meetingId" element={<CompleteCreateMeeting />} />
         <Route path="/:auth/select/:meetingId" element={<SelectSchedule />} />
         <Route
           path="/host/schedule-complete/:meetingId"

src/atoms/atom.ts

@@ -1,5 +1,6 @@
 import { ScheduleStates } from 'pages/legacy/selectSchedule/types/Schedule';
 import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
 
 export const methodStateAtom = atom<boolean>({
   key: 'methodStateAtom',
@@ -29,7 +30,10 @@ export const clickedTimeSlotAtom = atom<string>({
   default: undefined,
 });
 
+const { persistAtom } = recoilPersist();
+
 export const userNameAtom = atom<string>({
   key: 'userNameAtom',
   default: '',
+  effects_UNSTABLE: [persistAtom],
 });

src/components/Icon/icon.ts

@@ -1,18 +1,25 @@
+import { ReactComponent as ArrowBottomIc } from 'assets/svgs/arrowBottom.svg';
+import { ReactComponent as ArrowTopIc } from 'assets/svgs/arrowTop.svg';
 import { ReactComponent as BackIc } from 'assets/svgs/backBtn.svg';
 import { ReactComponent as Circle1Ic } from 'assets/svgs/circle1.svg';
 import { ReactComponent as Circle2Ic } from 'assets/svgs/circle2.svg';
 import { ReactComponent as Circle3Ic } from 'assets/svgs/circle3.svg';
 import { ReactComponent as ClockIc } from 'assets/svgs/clock.svg';
+import { ReactComponent as CloseIc } from 'assets/svgs/close.svg';
+import { ReactComponent as DropDown } from 'assets/svgs/dropdown.svg';
 import { ReactComponent as DropDownIc } from 'assets/svgs/dropDownBtn.svg';
 import { ReactComponent as DropdownWhite } from 'assets/svgs/dropdownWhite.svg';
+import { ReactComponent as DropUp } from 'assets/svgs/dropup.svg';
 import { ReactComponent as DropUpIc } from 'assets/svgs/dropUpBtn.svg';
 import { ReactComponent as DropupWhite } from 'assets/svgs/dropupWhite.svg';
 import { ReactComponent as ExitIc } from 'assets/svgs/exitIcon.svg';
 import { ReactComponent as HambergerIc } from 'assets/svgs/hambergerIcon.svg';
 import { ReactComponent as InputCancelIc } from 'assets/svgs/inputCancelBtn.svg';
 import { ReactComponent as InputErrorIc } from 'assets/svgs/inputErrorBtn.svg';
 import { ReactComponent as LinkIc } from 'assets/svgs/linkIcon.svg';
+import { ReactComponent as LinkTooltipIc } from 'assets/svgs/linkTooltip.svg';
 import { ReactComponent as MainLogoIc } from 'assets/svgs/mainLogo.svg';
+import { ReactComponent as Member } from 'assets/svgs/member.svg';
 import { ReactComponent as OfflinePlaceIc } from 'assets/svgs/offlinePlace.svg';
 import { ReactComponent as OnlinePlaceIc } from 'assets/svgs/onlinePlace.svg';
 import { ReactComponent as PasswordEyeIc } from 'assets/svgs/passwordEye.svg';
@@ -23,33 +30,43 @@ import { ReactComponent as RadioCheckIc } from 'assets/svgs/radioCheck.svg';
 import { ReactComponent as RadioCheckedIc } from 'assets/svgs/radioChecked.svg';
 import { ReactComponent as SpeechBubbleIc } from 'assets/svgs/speechBubble.svg';
 import { ReactComponent as TimeIc } from 'assets/svgs/time.svg';
+import { ReactComponent as TooltipArrowIc } from 'assets/svgs/tooltipArrow.svg';
 import { ReactComponent as Wave } from 'assets/svgs/wave.svg';
+//git test
 
 export {
-  MainLogoIc,
-  HambergerIc,
-  ExitIc,
-  InputCancelIc,
-  RadioCheckIc,
-  RadioCheckedIc,
+  ArrowBottomIc,
+  ArrowTopIc,
   BackIc,
-  PlusIc,
-  InputErrorIc,
+  Circle1Ic,
+  Circle2Ic,
+  Circle3Ic,
+  ClockIc,
+  CloseIc,
+  DropDown,
   DropDownIc,
+  DropdownWhite,
+  DropUp,
   DropUpIc,
-  PasswordOpenEyeIc,
-  PasswordEyeIc,
+  DropupWhite,
+  ExitIc,
+  HambergerIc,
+  InputCancelIc,
+  InputErrorIc,
   LinkIc,
-  PlaceIc,
-  ClockIc,
-  OnlinePlaceIc,
+  LinkTooltipIc,
+  MainLogoIc,
+  Member,
   OfflinePlaceIc,
-  TimeIc,
-  DropdownWhite,
-  DropupWhite,
+  OnlinePlaceIc,
+  PasswordEyeIc,
+  PasswordOpenEyeIc,
+  PlaceIc,
+  PlusIc,
+  RadioCheckedIc,
+  RadioCheckIc,
   SpeechBubbleIc,
+  TimeIc,
   Wave,
-  Circle1Ic,
-  Circle2Ic,
-  Circle3Ic,
+  TooltipArrowIc,
 };

src/components/common/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,52 @@
+import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+
+import styled from 'styled-components';
+
+interface BottomSheetProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+  children?: ReactNode;
+  isOpen: boolean;
+  onClose?: () => void;
+}
+
+function BottomSheet({ children, isOpen }: BottomSheetProps) {
+  return (
+    <>
+      <BottomSheetModal $isModalOpen={isOpen}>{children}</BottomSheetModal>
+      <ModalOverlay $isModalOpen={isOpen} />
+    </>
+  );
+}
+
+export default BottomSheet;
+
+const BottomSheetModal = styled.div<{ $isModalOpen: boolean }>`
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  transform: translateY(${({ $isModalOpen }) => ($isModalOpen ? 0 : '100%')});
+  flex-direction: column;
+  gap: 0.8rem;
+  transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1);
+  z-index: 1;
+  border-top-left-radius: 1.8rem;
+  border-top-right-radius: 1.8rem;
+  background-color: ${({ theme }) => theme.colors.grey8};
+
+  padding: 3.6rem 2rem 4.8rem;
+  width: 100%;
+  max-width: 43rem;
+
+  & button {
+    width: 100%;
+  }
+`;
+
+const ModalOverlay = styled.div<{ $isModalOpen: boolean }>`
+  display: ${({ $isModalOpen }) => ($isModalOpen ? 'block' : 'none')};
+  position: fixed;
+  top: 0;
+
+  background-color: ${({ theme }) => theme.colors.black60};
+  width: 100%;
+  height: 100%;
+`;

src/components/common/Modal/hooks/useModalState.tsx

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+
+function useModalState(initialState = false) {
+  const [isOpen, setIsOpen] = useState<boolean>(initialState);
+
+  const onOpen = () => {
+    setIsOpen(true);
+  };
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return { isOpen, onOpen, onClose };
+}
+
+export default useModalState;