diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml deleted file mode 100644 index 9d30e02c..00000000 --- a/.github/workflows/CI.yml +++ /dev/null @@ -1,68 +0,0 @@ -name: CI - -on: - pull_request: - branches: ['main'] - push: - branches: [ "main" ] - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - name: Checkout code - uses: actions/checkout@v3 - - - name: Install dependencies - run: yarn install - - - name: Build # 빌드 - run: yarn build - - - name: Close PR, if build fails - if: ${{ failure() }} - uses: actions/github-script@v6 - with: - github-token: ${{ github.TOKEN }} - script: | - const pull_number = ${{ github.event.pull_request.number }} - const updated_title = `[BUILD FAIL] ${{ github.event.pull_request.title }}` - await github.rest.pulls.createReview({ - owner: context.repo.owner, - repo: context.repo.repo, - pull_number: pull_number, - body: '빌드에 실패했습니다.', - event: 'REQUEST_CHANGES' - }) - await github.rest.pulls.update({ - owner: context.repo.owner, - repo: context.repo.repo, - pull_number: pull_number, - title: updated_title, - state: 'closed' - }) - - push_main: - runs-on: ubuntu-latest - container: pandoc/latex - steps: - - uses: actions/checkout@v2 - - name: Install mustache (to update the date) - run: apk add ruby && gem install mustache - - name: creates output - run: sh ./build.sh - - name: Pushes to another repository - id: push_directory - uses: cpina/github-action-push-to-another-repository@main - env: - API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }} - with: - source-directory: 'output' - destination-github-username: ljh0608 - destination-repository-name: ASAP_Client - user-email: ${{ secrets.LEAD_EMAIL }} - commit-message: ${{ github.event.commits[0].message }} - target-branch: main - - name: Test get variable exported by push-to-another-repository - run: echo $DESTINATION_CLONED_DIRECTORY diff --git a/.github/workflows/push-buildRepo.yml b/.github/workflows/push-buildRepo.yml index c43ecfee..d67bc1fe 100644 --- 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 index d0f1a518..efd8517e 100644 --- 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() { - + {/* */} diff --git a/src/components/Icon/icon.ts b/src/components/Icon/icon.ts index 88563acc..e2572dd2 100644 --- 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 index da0295c4..3e5d7ea5 100644 --- 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 index 34f99cd2..9cf8e0d3 100644 --- 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,7 +70,7 @@ 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` @@ -74,11 +78,12 @@ const buttonCSS = { 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 index 59945ec1..e0f02082 100644 --- 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 {page === 'createMeeting' ? ( - - - * - - - 확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니 - 반드시 기억해주세요! - - + <> + {value.length > 8 && ( + + + 최대 8자리까지 입력 가능해요{' '} + + + )} + + + + * + + + 확정 후 비밀번호는 수정할 수 없으며, 비밀번호가 있어야 방장 페이지에 접속할 수 있으니 + 반드시 기억해주세요! + + + ) : ( 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 index b81e7fd7..a708b12b 100644 --- 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 index f4c3032c..d559151d 100644 --- 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}; diff --git a/src/components/common/atomComponents/TextInput.tsx b/src/components/common/atomComponents/TextInput.tsx index 18cf7156..62c4c6b6 100644 --- a/src/components/common/atomComponents/TextInput.tsx +++ b/src/components/common/atomComponents/TextInput.tsx @@ -9,10 +9,11 @@ interface ValueProps { value: string; setValue: (e: React.ChangeEvent) => void; resetValue: () => void; + max: number; placeholder: string; } -function TextInput({ value, setValue, resetValue, placeholder }: ValueProps) { +function TextInput({ value, setValue, resetValue, max, placeholder }: ValueProps) { const [focus, setFocus] = useState(false); const resetOnClick = () => { @@ -20,7 +21,7 @@ function TextInput({ value, setValue, resetValue, placeholder }: ValueProps) { setFocus(false); }; return ( - <> + setFocus(true)} - $iserror={value?.length > 15} + $iserror={value?.length > max} /> {focus && ( - {value && value.length > 15 ? : } + {value && value.length > max ? : } )} {value && - value.length > 15 && ( + value.length > max && ( - 공백포함 최대 15자까지 입력가능해요 + {`공백포함 최대 ${String(max)}자까지 입력가능해요`} )} - + ); } export default TextInput; -const TextInputWrapper = styled.div``; +const TextInputWrapper = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; const InputSection = styled.div` display: flex; position: relative; flex-direction: column; - +width: 100%; input:focus + div { display: flex; svg { @@ -77,7 +82,8 @@ const StyledTextInput = styled.input<{ $iserror: boolean }>` background: ${({ theme }) => theme.colors.grey7}; padding: 1rem 1.6rem; - width: 33.5rem; + width: 100%; + max-width: 39rem; height: 5.2rem; color: ${({ theme }) => theme.colors.white}; diff --git a/src/components/common/moleculesComponents/BottomBtnSection.tsx b/src/components/common/moleculesComponents/BottomBtnSection.tsx new file mode 100644 index 00000000..83652dff --- /dev/null +++ b/src/components/common/moleculesComponents/BottomBtnSection.tsx @@ -0,0 +1,22 @@ +import { ReactNode } from 'react'; + +import styled from 'styled-components'; + +interface BottomBtnProps { + children: ReactNode; +} + +const BottomBtnSection = ({ children }: BottomBtnProps) => { + return {children}; +}; + +const ButtomBtnWrapper = styled.div` + display: flex; + justify-content: center; + width: 100%; + position: fixed; + bottom: 1.2rem; + padding: 0 2rem; + gap: 1.4rem; +`; +export default BottomBtnSection; diff --git a/src/components/common/moleculesComponents/Header.tsx b/src/components/common/moleculesComponents/Header.tsx index bf0a6491..c6b79168 100644 --- a/src/components/common/moleculesComponents/Header.tsx +++ b/src/components/common/moleculesComponents/Header.tsx @@ -25,7 +25,7 @@ function Header({ position, setFunnelStep }: HeaderProps) { const { scheduleStep, setScheduleStep } = useScheduleStepContext(); const navigationOptions = [ { - title: '약속 생성하기', + title: '회의 일정 정하기', url: '/meet/create', }, { @@ -112,7 +112,7 @@ function Header({ position, setFunnelStep }: HeaderProps) { ) : undefined} {position === 'createMeeting' ? ( - 회의정보입력 + 회의 정보 입력 ) : position === 'confirmMeet' ? ( diff --git a/src/components/common/timetableComponents/Timetable.tsx b/src/components/common/timetableComponents/Timetable.tsx index c16cd699..53dbe72a 100644 --- a/src/components/common/timetableComponents/Timetable.tsx +++ b/src/components/common/timetableComponents/Timetable.tsx @@ -45,6 +45,7 @@ export default Timetable; const TimetableWrapper = styled.div` display: flex; + justify-content: center; width: 100%; gap: 1.1rem; `; diff --git a/src/pages/bestMeetTime/ChooseBestTime.tsx b/src/pages/bestMeetTime/ChooseBestTime.tsx index 541b0356..8a456ff2 100644 --- a/src/pages/bestMeetTime/ChooseBestTime.tsx +++ b/src/pages/bestMeetTime/ChooseBestTime.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import Header from 'components/common/moleculesComponents/Header'; import BestMeetTime from 'pages/bestMeetTime/components/BestMeetTime'; @@ -38,6 +38,7 @@ const ViewPickerWrapper = styled.div` `; const ChangeViewPicker = styled.div<{ $isClicked: boolean }>` + cursor: pointer; display: flex; justify-content: center; margin-top: 2.5rem; @@ -73,6 +74,7 @@ const ChangeViewPicker = styled.div<{ $isClicked: boolean }>` const ViewContainer = styled.div` display: flex; align-items: center; + justify-content: center; width: 100%; margin-top: 3.6rem; margin-bottom: 16.4rem; diff --git a/src/pages/bestMeetTime/components/BestMeetTime.tsx b/src/pages/bestMeetTime/components/BestMeetTime.tsx index f76c1a7b..d30a127b 100644 --- a/src/pages/bestMeetTime/components/BestMeetTime.tsx +++ b/src/pages/bestMeetTime/components/BestMeetTime.tsx @@ -1,7 +1,8 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { DropDown, DropUp } from 'components/Icon/icon'; import BestTimeCard from 'pages/bestMeetTime/components/BestTimeCard'; import ConfirmModal from 'pages/bestMeetTime/components/ConfirmModal'; @@ -21,14 +22,14 @@ function BestMeetTime() { const [selected, setSelected] = useState(0); const [showModal, setShowModal] = useState(false); const { meetingId } = useParams(); - const { isloading, bestTimeData, isError } = GetBestMeetimeListHooks( + const { isLoading, bestTimeData, isError } = GetBestMeetimeListHooks( (meetingId as unknown) as string, ); const navigate = useNavigate(); if (isError) { navigate(`/*`); } - if (isloading) { + if (isLoading) { return ( @@ -104,11 +105,11 @@ function BestMeetTime() { ) : null} ) : null} - + - + {showModal && bestMeetimeObj && ( ` + display: flex; + flex-direction: column; width: 100%; + align-items: center; `; const TitleSection = styled.article` display: flex; @@ -158,6 +164,7 @@ const AlternativeSection = styled.section` display: flex; flex-direction: column; gap: 1.6rem; + width: 100%; `; const BasicIconContainer = styled.div` display: flex; @@ -168,7 +175,9 @@ const BasicIconContainer = styled.div` height: 3rem; `; const BtnWrapper = styled.div` + display: flex; + justify-content: center; + width: 100%; position: fixed; bottom: 1.2rem; - border-radius: 50%; `; diff --git a/src/pages/bestMeetTime/components/BestTimeCard.tsx b/src/pages/bestMeetTime/components/BestTimeCard.tsx index bdba9e78..d9cae088 100644 --- a/src/pages/bestMeetTime/components/BestTimeCard.tsx +++ b/src/pages/bestMeetTime/components/BestTimeCard.tsx @@ -47,6 +47,7 @@ const BestTimeCardWrapper = styled.article<{ $rank: number; $selected: number }> display: flex; position: relative; flex-direction: row; + align-items: center; border: 1px solid ${({ $rank, $selected, theme }) => $rank === $selected ? theme.colors.main1 : theme.colors.grey7}; diff --git a/src/pages/bestMeetTime/components/BlankMeetCard.tsx b/src/pages/bestMeetTime/components/BlankMeetCard.tsx index 7ae5bf1a..d354c9f2 100644 --- a/src/pages/bestMeetTime/components/BlankMeetCard.tsx +++ b/src/pages/bestMeetTime/components/BlankMeetCard.tsx @@ -15,6 +15,7 @@ function BlankMeetCard() { export default BlankMeetCard; const BlankMeetCardWrapper = styled.div` + width: 100%; display: flex; align-items: center; justify-content: center; diff --git a/src/pages/bestMeetTime/hooks/getBestMeetimeList.ts b/src/pages/bestMeetTime/hooks/getBestMeetimeList.ts index 1ab9c09b..2fbec504 100644 --- a/src/pages/bestMeetTime/hooks/getBestMeetimeList.ts +++ b/src/pages/bestMeetTime/hooks/getBestMeetimeList.ts @@ -6,7 +6,7 @@ import { DateTimeData } from '../types/meetCardData'; const GetBestMeetimeListHooks = (meetingId: string) => { const [isError, setIsError] = useState(false); - const [isloading, setIsloading] = useState(true); + const [isLoading, setIsloading] = useState(true); const [bestTimeData, setBestTimeData] = useState(); const getBestMeetimeList = async () => { @@ -27,7 +27,7 @@ const GetBestMeetimeListHooks = (meetingId: string) => { }, [meetingId], ); - return { isloading, bestTimeData, isError }; + return { isLoading, bestTimeData, isError }; }; export default GetBestMeetimeListHooks; diff --git a/src/pages/completeCreateMeeting/CompleteCreateMeeting.tsx b/src/pages/completeCreateMeeting/CompleteCreateMeeting.tsx index 573b4727..2b7a3c36 100644 --- a/src/pages/completeCreateMeeting/CompleteCreateMeeting.tsx +++ b/src/pages/completeCreateMeeting/CompleteCreateMeeting.tsx @@ -1,6 +1,7 @@ import stepingCheck from 'assets/images/steppingCheck.png'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import CheckPoint from 'components/common/moleculesComponents/CheckPoint'; import Header from 'components/common/moleculesComponents/Header'; import { useNavigate, useParams } from 'react-router-dom'; @@ -24,11 +25,11 @@ const CompleteCreateMeeting = () => { mainText={'회의 생성 완료!'} subText={'이제 나의 가능 시간을 입력하러 가볼까요?'} /> - + - + ); @@ -36,10 +37,6 @@ const CompleteCreateMeeting = () => { export default CompleteCreateMeeting; -const BtnWrapper = styled.div` - position: absolute; - bottom: 1.2rem; -`; const CompleteCreateMeetingWrapper = styled.div` display: flex; flex-direction: column; diff --git a/src/pages/createMeeting/components/ReturnTitleComponent.tsx b/src/pages/createMeeting/components/ReturnTitleComponent.tsx index c7340c69..bcdcbeb7 100644 --- a/src/pages/createMeeting/components/ReturnTitleComponent.tsx +++ b/src/pages/createMeeting/components/ReturnTitleComponent.tsx @@ -25,7 +25,7 @@ const funnelSteps: FunnelSteps = { }, hostInfo: { main: '방장 정보를 입력해주세요', - sub: '관리자 페이지에 접속할 때 필요해요', + sub: '방장 페이지에 접속할 때 필요해요', }, additionalInfo: { main: '더 알리고 싶은 내용이 있나요?', diff --git a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx index dc511ea2..35e5eae4 100644 --- a/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetAdditionalInfo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { isAxiosError } from 'axios'; import Button from 'components/common/atomComponents/Button'; @@ -6,6 +6,7 @@ import Text from 'components/common/atomComponents/Text'; import TextAreaInput from 'components/common/atomComponents/TextAreaInput'; import BottomSheet from 'components/common/BottomSheet/BottomSheet'; import useModalState from 'components/common/Modal/hooks/useModalState'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { durationType, placeType, weekDayType } from 'pages/createMeeting/data/meetingInfoData'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; import { useNavigate } from 'react-router-dom'; @@ -65,7 +66,7 @@ function SetAdditionalInfo({ meetingInfo, setMeetingInfo }: FunnelProps) { setValue={textAreaOnChange} placeholder={'회의 안건, 준비물 등 회의와 관련하여 알리고 싶은 추가 내용을 적어 보세요.'} /> - + - + @@ -138,17 +139,12 @@ function SetAdditionalInfo({ meetingInfo, setMeetingInfo }: FunnelProps) { export default SetAdditionalInfo; const SetAdditionalInfoWrapper = styled.div` +width:100%; display: flex; align-items: center; justify-content: center; `; -const StyledBtnWrapper = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; -`; - const BottomSheetDescription = styled.div` display: flex; flex-direction: column; diff --git a/src/pages/createMeeting/components/useFunnel/SetDates.css b/src/pages/createMeeting/components/useFunnel/SetDates.css index 5765289d..dba47b97 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDates.css +++ b/src/pages/createMeeting/components/useFunnel/SetDates.css @@ -29,7 +29,7 @@ } .rmdp-calendar { - width: 36rem; + width: 100%; height: 37.9rem; } @@ -38,12 +38,12 @@ } .rmdp-day-picker > div { - width: 36rem; + width: 100%; } .rmdp-day-picker > div > div:first-child { margin-bottom: 0.7rem; - border-bottom: 0.5px solid white; + /* border-bottom: 0.5px solid white; */ } /* .rmdp-week { @@ -154,10 +154,10 @@ pointer-events: none !important; } .rmdp-day { - width: 4rem; - height: 4rem; + width: 5rem; + height: 5rem; /*날짜*/ - padding: 2.5rem 2.5rem; + padding: 2.7rem 2.7rem; } .rmdp-day span { font-weight: 400; @@ -173,7 +173,7 @@ .rmdp-week-day { /*요일*/ - width: 4rem; + width: 5.4rem !important; height: 4rem; padding: 0 0.4rem; } @@ -197,3 +197,7 @@ .rmdp-day.rmdp-disabled.rmdp-deactive { color: var(--rmdp-grey10) !important; } + +.rmdp-header-values.rmdp-header-values span { + padding: 0px; +} diff --git a/src/pages/createMeeting/components/useFunnel/SetDates.tsx b/src/pages/createMeeting/components/useFunnel/SetDates.tsx index 05a32a73..fa408993 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDates.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetDates.tsx @@ -5,6 +5,7 @@ import './SetDates.css'; import { methodStateAtom } from 'atoms/atom'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; import { Calendar, DateObject, getAllDatesInRange } from 'react-multi-date-picker'; import { useRecoilState } from 'recoil'; @@ -27,7 +28,6 @@ const months = [ const weekDays = ['일', '월', '화', '수', '목', '금', '토']; const dateRangeFormat = 'YYYY/MM/DD/ddd'; function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { - // const [multiple, setMultiple] = useState(false); const [multiple, setMultiple] = useRecoilState(methodStateAtom); return ( @@ -76,6 +76,8 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { shadow={false} showOtherDays weekDays={weekDays} + headerOrder={['LEFT_BUTTON', 'YEAR_MONTH', 'RIGHT_BUTTON']} + monthYearSeparator={'년 '} className="bg-dark" range={!multiple} multiple={multiple} @@ -117,7 +119,7 @@ function SetDates({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { /> - + - + ); } @@ -155,18 +157,15 @@ const SetDatesWrapper = styled.div` display: flex; align-items: center; justify-content: center; + width: 100%; `; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - z-index: 3; -`; const DateSelectorWrapper = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; + width: 100%; `; const RangeInputBox = styled.div<{ $isClicked: boolean }>` @@ -177,19 +176,20 @@ const RangeInputBox = styled.div<{ $isClicked: boolean }>` border-radius: 0.8rem; border-color: ${({ $isClicked, theme }) => $isClicked ? theme.colors.grey5 : theme.colors.main1}; - width: 33.5rem; + width: 100%; height: 5.2rem; + cursor: pointer; color: ${({ theme }) => theme.colors.white}; `; const Input = styled.input` appearance: none; - margin: 1.5rem 0 1.5rem 1.6rem; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='10' stroke='%23D9D9D9' stroke-width='2'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; - width: 2.2rem; + width: 3.2rem; height: 2.2rem; - + margin-left: 1.5rem; + cursor: pointer; &:checked { background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='11' fill='%233C49FF'/%3E%3Ccircle cx='11' cy='11' r='4' fill='white'/%3E%3C/svg%3E "); } @@ -200,9 +200,10 @@ const Input = styled.input` const Label = styled.label` display: flex; align-items: center; - margin-left: 1.2rem; + padding: 0 1.2rem; height: 5rem; - width: 28rem; + width: 100%; + cursor: pointer; ${({ theme }) => theme.fonts.button1}; color: ${({ theme }) => theme.colors.grey6}; `; @@ -216,7 +217,7 @@ const MultipleInputBox = styled.div<{ $isClicked: boolean }>` border-color: ${({ $isClicked, theme }) => $isClicked ? theme.colors.main1 : theme.colors.grey5}; background-color: transparent; - width: 33.5rem; + width: 100%; height: 5.2rem; color: ${({ theme }) => theme.colors.white}; `; @@ -224,7 +225,7 @@ const MultipleInputBox = styled.div<{ $isClicked: boolean }>` const InputContianer = styled.div` display: flex; flex-direction: column; - align-items: left; + width: 100%; margin-bottom: 3rem; div:first-child { margin-bottom: 1.1rem; diff --git a/src/pages/createMeeting/components/useFunnel/SetDuration.tsx b/src/pages/createMeeting/components/useFunnel/SetDuration.tsx index 45fcf35c..02c7f1a2 100644 --- a/src/pages/createMeeting/components/useFunnel/SetDuration.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetDuration.tsx @@ -1,5 +1,6 @@ import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { durationType } from 'pages/createMeeting/data/meetingInfoData'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; import styled from 'styled-components'; @@ -26,7 +27,7 @@ function SetDuration({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { ); })} - + - + ); } @@ -54,16 +55,14 @@ const SetAdditionalInfoWrapper = styled.div` display: flex; align-items: center; justify-content: center; -`; - -const StyledBtnWrapper = styled.section` - position: fixed; - bottom: 1.2rem; + width: 100%; `; const DurationWrapper = styled.div` - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(2, 1fr); /* 3열로 나누기 */ + grid-template-rows: repeat(3, 1fr); /* 2행으로 나누기 */ + width: 100%; gap: 1.1rem; justify-content: center; diff --git a/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx b/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx index e0dc7f9c..20726fe4 100644 --- a/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetHostInfo.tsx @@ -4,6 +4,7 @@ import Button from 'components/common/atomComponents/Button'; import PasswordInput from 'components/common/atomComponents/PasswordInput'; import Text from 'components/common/atomComponents/Text'; import TextInput from 'components/common/atomComponents/TextInput'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; import styled from 'styled-components'; import { theme } from 'styles/theme'; @@ -22,11 +23,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { const passWordOnChange = (e: React.ChangeEvent) => { setMeetingInfo((prev: MeetingInfo) => { - if (e.target.value.length < 9) { - return { ...prev, password: e.target.value }; - } - alert('비밀번호는 8자리 이하로 말해주세요'); - return { ...prev }; + return { ...prev, password: e.target.value }; }); }; @@ -44,6 +41,15 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { } }; + const validateForm = () => { + return ( + meetingInfo.name && + meetingInfo.name.length <= 15 && + meetingInfo.password.length >= 4 && + meetingInfo.password.length <= 8 + ); + }; + return ( @@ -55,6 +61,7 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { value={meetingInfo.name} setValue={hostOnChange} resetValue={resetHost} + max={8} placeholder={'방장 이름'} /> @@ -64,28 +71,20 @@ function SetHostInfo({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { - + - + ); } @@ -98,12 +97,6 @@ const SetHostInfoWrapper = styled.div` justify-content: center; `; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; -`; - const HostNameSection = styled.section` display: flex; flex-direction: column; @@ -113,5 +106,4 @@ const HostInfoSection = styled.div` display: flex; flex-direction: column; gap: 3.4rem; - padding: 0 2rem; `; diff --git a/src/pages/createMeeting/components/useFunnel/SetPlace.tsx b/src/pages/createMeeting/components/useFunnel/SetPlace.tsx index 948b0136..55bc9d32 100644 --- a/src/pages/createMeeting/components/useFunnel/SetPlace.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetPlace.tsx @@ -1,6 +1,7 @@ import Button from 'components/common/atomComponents/Button'; import PlaceInput from 'components/common/atomComponents/PlaceInput'; import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { placeType } from 'pages/createMeeting/data/meetingInfoData'; import { FunnelProps } from 'pages/createMeeting/types/useFunnelInterface'; import styled from 'styled-components'; @@ -39,7 +40,7 @@ function SetPlace({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { ); })} - + - + ); } export default SetPlace; -const SetPlaceWrapper = styled.div``; +const SetPlaceWrapper = styled.div` + display: flex; + justify-content: center; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; + width: 100%; `; const PlaceInfoSection = styled.section` display: flex; flex-direction: column; gap: 1rem; + width: 100%; `; const PlaceSection = styled.section``; diff --git a/src/pages/createMeeting/components/useFunnel/SetTitle.tsx b/src/pages/createMeeting/components/useFunnel/SetTitle.tsx index 8720ec27..f018df72 100644 --- a/src/pages/createMeeting/components/useFunnel/SetTitle.tsx +++ b/src/pages/createMeeting/components/useFunnel/SetTitle.tsx @@ -3,6 +3,7 @@ import React from 'react'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; import TextInput from 'components/common/atomComponents/TextInput'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import { FunnelProps, MeetingInfo } from 'pages/createMeeting/types/useFunnelInterface'; import styled from 'styled-components'; @@ -24,9 +25,10 @@ function SetTitle({ meetingInfo, setMeetingInfo, setStep }: FunnelProps) { value={meetingInfo.title} setValue={titleOnChange} resetValue={resetTitle} + max={15} placeholder={'서비스 기획 1차 회의'} /> - + - + ); } @@ -56,10 +58,14 @@ const SetTitleWrapper = styled.div` display: flex; align-items: center; justify-content: center; + width: 100%; `; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; -`; +// const StyledBtnSection = styled.section` +// position: absolute; +// width: 100%; +// display: flex; +// justify-content: center; +// bottom: 1.2rem; +// border-radius: 50%; +// `; diff --git a/src/pages/cueCard/CueCard.tsx b/src/pages/cueCard/CueCard.tsx index 7c98975d..db5b5519 100644 --- a/src/pages/cueCard/CueCard.tsx +++ b/src/pages/cueCard/CueCard.tsx @@ -2,6 +2,7 @@ import { useRef } from 'react'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import Header from 'components/common/moleculesComponents/Header'; import html2canvas from 'html2canvas'; import CueCardTitle from 'pages/cueCard/components/CueCardTitle'; @@ -32,7 +33,7 @@ function CueCard() {
- + - + ); } @@ -62,12 +63,3 @@ const CueCardWrapper = styled.div` width: 100%; `; - -const ButtonSection = styled.section` - display: flex; - position: fixed; - bottom: 1.2rem; - flex-direction: row; - gap: 1.4rem; - justify-content: center; -`; diff --git a/src/pages/errorLoading/ErrorPage404.tsx b/src/pages/errorLoading/ErrorPage404.tsx index 2608b094..bd3e90f3 100644 --- a/src/pages/errorLoading/ErrorPage404.tsx +++ b/src/pages/errorLoading/ErrorPage404.tsx @@ -1,11 +1,13 @@ import Error404 from 'assets/images/Error404.png'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; -import { Link } from 'react-router-dom'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; +import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import { theme } from 'styles/theme'; function ErrorPage404() { + const navigate = useNavigate(); return ( @@ -27,13 +29,16 @@ function ErrorPage404() { - - - - - + + + ); } diff --git a/src/pages/loginEntrance/LoginEntrance.tsx b/src/pages/loginEntrance/LoginEntrance.tsx index d9bd5ff4..9f08703a 100644 --- a/src/pages/loginEntrance/LoginEntrance.tsx +++ b/src/pages/loginEntrance/LoginEntrance.tsx @@ -38,5 +38,6 @@ export default LoginEntrance; const LoginEntranceWrapper = styled.div` display: flex; flex-direction: column; + align-items: center; width: 100%; `; diff --git a/src/pages/loginEntrance/components/HostComponent.tsx b/src/pages/loginEntrance/components/HostComponent.tsx index f99fd3ee..962b961a 100644 --- a/src/pages/loginEntrance/components/HostComponent.tsx +++ b/src/pages/loginEntrance/components/HostComponent.tsx @@ -5,6 +5,7 @@ import Button from 'components/common/atomComponents/Button'; import PasswordInput from 'components/common/atomComponents/PasswordInput'; import Text from 'components/common/atomComponents/Text'; import TextInput from 'components/common/atomComponents/TextInput'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import Header from 'components/common/moleculesComponents/Header'; import TitleComponent from 'components/common/moleculesComponents/TitleComponents'; import { useNavigate, useParams } from 'react-router-dom'; @@ -75,7 +76,7 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { } }; return ( - <> +
@@ -87,6 +88,7 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { value={hostInfo.name} setValue={hostOnChange} resetValue={resetHostId} + max={8} placeholder={'방장 이름'} /> @@ -96,13 +98,13 @@ function HostComponent({ hostInfo, setHostInfo }: HostProps) { - + - + {ismodalOpen ? : undefined} {isLoginModalOpen ? ( ) : ( undefined )} - + ); } export default HostComponent; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; +const HostComponentWrapper = styled.div` + display: flex; + flex-direction: column; + + align-items: center; + width: 100%; `; const HostNameSection = styled.section` display: flex; flex-direction: column; gap: 1rem; + width: 100%; `; const HostInfoSection = styled.div` display: flex; flex-direction: column; gap: 3.4rem; + + width: 100%; `; diff --git a/src/pages/loginEntrance/components/IncorrectInfoModal.tsx b/src/pages/loginEntrance/components/IncorrectInfoModal.tsx index 1e1218df..ebe7af8e 100644 --- a/src/pages/loginEntrance/components/IncorrectInfoModal.tsx +++ b/src/pages/loginEntrance/components/IncorrectInfoModal.tsx @@ -1,8 +1,7 @@ -import { Link, useParams } from 'react-router-dom'; -import React, { Dispatch, SetStateAction, useState } from 'react'; +import { Dispatch, SetStateAction } from 'react'; -import { ExitIc } from 'components/Icon/icon'; import Text from 'components/common/atomComponents/Text'; +import { ExitIc } from 'components/Icon/icon'; import styled from 'styled-components'; import { theme } from 'styles/theme'; diff --git a/src/pages/loginEntrance/components/MemberComponent.tsx b/src/pages/loginEntrance/components/MemberComponent.tsx index ea8187b1..22cac341 100644 --- a/src/pages/loginEntrance/components/MemberComponent.tsx +++ b/src/pages/loginEntrance/components/MemberComponent.tsx @@ -4,6 +4,7 @@ import { userNameAtom } from 'atoms/atom'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; import TextInput from 'components/common/atomComponents/TextInput'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import Header from 'components/common/moleculesComponents/Header'; import TitleComponent from 'components/common/moleculesComponents/TitleComponents'; import { useParams } from 'react-router'; @@ -57,37 +58,35 @@ function MemberComponent({ hostInfo, setHostInfo }: HostProps) { value={hostInfo.name} setValue={hostOnChange} resetValue={resetHostId} + max={8} placeholder={'참여자 이름'} /> - + - + ); } export default MemberComponent; -const StyledBtnSection = styled.section` - position: fixed; - bottom: 1.2rem; - border-radius: 50%; -`; - const HostNameSection = styled.section` display: flex; flex-direction: column; gap: 1rem; + width: 100%; `; const HostInfoSection = styled.div` display: flex; flex-direction: column; gap: 3.4rem; + + width: 100%; `; diff --git a/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx b/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx index f1d83cbe..2904a546 100644 --- a/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx +++ b/src/pages/loginEntrance/components/NoAvailableTimeModal.tsx @@ -1,8 +1,7 @@ -import React, { Dispatch, SetStateAction, useState } from 'react'; +import { Dispatch, SetStateAction } from 'react'; import Text from 'components/common/atomComponents/Text'; -import { ExitIc } from 'components/Icon/icon'; -import { Link, useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import styled from 'styled-components'; import { theme } from 'styles/theme'; @@ -12,30 +11,26 @@ interface ModalProps { function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) { const { meetingId } = useParams(); + const navigate = useNavigate(); + return ( - + setIsModalOpen(false)}> - setIsModalOpen(false)}> - - - - 잠깐! - - - 나의 가능 시간을 입력해야 + + 가능 시간을 입력하지 않으셨나요? + + + 나의 가능 시간을 입력해야
방장 페이지에 접속할 수 있어요 + + + + navigate(`/host/select/${meetingId}?step=selectSchedule`)}> - 방장 페이지에 접속할 수 있어요! + 가능 시간 입력하러 가기 - - - - - 가능 시간 입력하러 가기 - - - + ); @@ -43,6 +38,11 @@ function NoAvailableTimeModal({ setIsModalOpen }: ModalProps) { export default NoAvailableTimeModal; +const ModalText = styled.span` + ${({ theme }) => theme.fonts.body2}; + color: ${({ theme }) => theme.colors.grey3}; +`; + const ReturnModalWrpper = styled.div` display: flex; position: absolute; @@ -57,14 +57,16 @@ const ReturnModalWrpper = styled.div` const ModalSection = styled.article` display: flex; - position: relative; + /* position: relative; */ flex-direction: column; align-items: center; justify-content: center; + gap: 2.4rem; border-radius: 0.8rem; background-color: ${({ theme }) => theme.colors.grey8}; - width: 28.8rem; - height: 21.2rem; + width: 32.4rem; + height: 18.4rem; + padding: 2.4rem 2rem; `; const IconCatainer = styled.div` @@ -83,15 +85,17 @@ const MentContainer = styled.div` display: flex; flex-direction: column; align-items: center; - margin-top: 1.2rem; + justify-content: center; + gap: 0.8rem; + text-align: center; `; const ModalBtn = styled.button` display: flex; align-items: center; justify-content: center; - margin-top: 2.4rem; + border-radius: 0.6rem; background-color: ${({ theme }) => theme.colors.main1}; - width: 17.6rem; + width: 100%; height: 4.2rem; `; diff --git a/src/pages/onBoarding/OnBoarding.tsx b/src/pages/onBoarding/OnBoarding.tsx index 81f520fd..382553c6 100644 --- a/src/pages/onBoarding/OnBoarding.tsx +++ b/src/pages/onBoarding/OnBoarding.tsx @@ -8,8 +8,9 @@ import MakePng from 'assets/images/make.png'; import PointPng from 'assets/images/point.png'; import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import Header from 'components/common/moleculesComponents/Header'; -import { Link } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import { Autoplay, Navigation, Pagination } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -44,11 +45,14 @@ const slides = [ ]; function OnBoarding() { + const navigate = useNavigate(); + const handleCreateMeeting = () => { + navigate('/meet/create?step=title'); + }; return ( <>
- {slide.icon} */} {/* 로딩 속도로 차선책 png code */} {slide.icon} - + <> - + ))} - - - - - - + + + ); @@ -92,6 +93,10 @@ function OnBoarding() { export default OnBoarding; const OnboardingWrapper = styled.div` + display: flex; + flex-direction: column; + + align-items: center; width: 100%; `; @@ -100,8 +105,6 @@ const SwiperContext = styled.div` height: 50rem; `; -const SwiperSection = styled.section``; - const StyledSwiperSlide = styled(SwiperSlide)` display: flex; flex-direction: column; @@ -113,10 +116,3 @@ const SvgContainer = styled.section` height: 33rem; } `; - -const ExplainContainer = styled.section``; - -const ButtonSection = styled.section` - position: fixed; - bottom: 1.2rem; -`; diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 151a0695..e6ab6ccc 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -66,7 +66,12 @@ function SelectSchedule() { sub={TITLES[scheduleStep].sub} padding={scheduleStep === 'selectTimeSlot' ? `0 0 2.6rem` : `4.4rem 0 3.2rem 0`} /> - {isLottieOpen && } + {isLottieOpen && ( + + )} theme.colors.dim_gradient}; diff --git a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx index d289137c..49a57f7a 100644 --- a/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx +++ b/src/pages/selectSchedule/components/selectPriority/PriorityDropdown.tsx @@ -193,10 +193,10 @@ const PriorityDropdownWrapper = styled.div` flex-direction: column; gap: 1.2rem; justify-content: start; - + align-items: center; margin-top: 3rem; margin-bottom: 7.5rem; - width: 100%; + width: 33.5rem; height: 18rem; `; @@ -254,7 +254,7 @@ const DropdownWrapper = styled.div` background-color: ${({ theme }) => theme.colors.grey6}; width: 27.4rem; height: fit-content; - max-height: 15.6rem; + max-height: 18.3rem; overflow-x: hidden; overflow-y: auto; diff --git a/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx b/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx index 51eb13b6..101817c2 100644 --- a/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/OnboardingLottie.tsx @@ -5,9 +5,10 @@ import styled from 'styled-components'; interface OnboardingLottieProps { onClose: () => void; + top: number; } -function OnboardingLottie({ onClose }: OnboardingLottieProps) { +function OnboardingLottie({ onClose, top }: OnboardingLottieProps) { const defaultOptions = { loop: true, autoplay: true, @@ -18,7 +19,7 @@ function OnboardingLottie({ onClose }: OnboardingLottieProps) { }; return ( <> - + @@ -29,9 +30,9 @@ function OnboardingLottie({ onClose }: OnboardingLottieProps) { export default OnboardingLottie; -const OnboardingLottieWrapper = styled.aside` +const OnboardingLottieWrapper = styled.aside<{ $top: number }>` position: absolute; - top: 29.4rem; + top: ${({ $top }) => $top}rem; z-index: 1; `; diff --git a/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx b/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx index 7d63b3da..eb1fe6a3 100644 --- a/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/SelectionColumn.tsx @@ -26,16 +26,12 @@ function SelectionColumn({ date, timeSlots }: ColumnStructure) { * 가능시간 입력 시간표 스타일링 * 1. border-top: 30분 단위는 dashed, 1시간 단위는 solid * 2. border: 탭투탭 시 startSlot에 dashed - * 3. background-color: 선택된 시간이면서 맨 첫번째 Slot이라면 그라디언트, 그 외는 main1, 선택된 시간이 아니면 transparent; + * 3. background-color: 선택된 시간이라면 main1, 선택된 시간이 아니면 transparent; */ const borderStyle = slotId.endsWith(':30') ? 'dashed' : 'solid'; const border = isStartSlot && `1px dashed ${theme.colors.main5}`; const borderTop = `1px ${borderStyle} ${theme.colors.grey7}`; - const background = isSelectedSlot - ? isFirstSlot - ? 'linear-gradient(180deg, #496AFF 0%, #3253FF 75%)' - : theme.colors.main1 - : 'transparent'; + const background = isSelectedSlot ? theme.colors.main1 : 'transparent'; return ` cursor:pointer; diff --git a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx index 1de825e1..01c25098 100644 --- a/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx +++ b/src/pages/selectSchedule/components/selectTimeSlot/TimeSlotCta.tsx @@ -51,8 +51,7 @@ const BtnDim = styled.div` margin-top: 3rem; background: ${({ theme }) => theme.colors.dim_gradient}; - padding-bottom: 2.9rem; - + padding: 0 2rem 2.9rem 2rem; width: 100%; height: 16.4rem; diff --git a/src/pages/steppingStone/components/SteppingBody.tsx b/src/pages/steppingStone/components/SteppingBody.tsx index 54e16c9f..5177f8a8 100644 --- a/src/pages/steppingStone/components/SteppingBody.tsx +++ b/src/pages/steppingStone/components/SteppingBody.tsx @@ -77,12 +77,6 @@ function SteppingBody({ steppingType, meetingTitle }: SteppingProps) { export default SteppingBody; -// const LinkToolTipIcon = styled(LinkTooltipIc)` -// position: relative; -// left: 10.3rem; -// cursor: pointer; -// `; - const ImageSection = styled.section` display: flex; align-items: center; diff --git a/src/pages/steppingStone/components/SteppingBtnSection.tsx b/src/pages/steppingStone/components/SteppingBtnSection.tsx index b46a0042..04ce89d8 100644 --- a/src/pages/steppingStone/components/SteppingBtnSection.tsx +++ b/src/pages/steppingStone/components/SteppingBtnSection.tsx @@ -2,13 +2,13 @@ import Button from 'components/common/atomComponents/Button'; import Text from 'components/common/atomComponents/Text'; +import BottomBtnSection from 'components/common/moleculesComponents/BottomBtnSection'; import CopyToClipboard from 'react-copy-to-clipboard'; import { useParams } from 'react-router'; -import { Link } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import { notify } from 'utils/toast/copyLinkToast'; - interface SteppingProps { steppingType: string; } @@ -16,19 +16,18 @@ interface SteppingProps { function SteppingBtnSection({ steppingType }: SteppingProps) { const { meetingId } = useParams(); + const navigate=useNavigate(); return ( <> - + { { hostScheduleComplete: ( <> - - - @@ -40,30 +39,24 @@ function SteppingBtnSection({ steppingType }: SteppingProps) { ), meetEntrance: ( <> - - - - - - ), memberScheduleComplete: ( <> - - - ), }[steppingType] } - + ); } diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts index 5209820c..29b2e69d 100644 --- a/src/styles/globalStyles.ts +++ b/src/styles/globalStyles.ts @@ -12,7 +12,9 @@ const GlobalStyle = createGlobalStyle` } - +input { + margin:0; +} html, body { margin: 0 auto;