Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat/#236] 가능 시간 입력 탭투탭과 우선 순위 페이지 연결 #238

Merged
merged 44 commits into from
Jul 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
091854a
refactor: Slot 컴포넌트 스타일링 조건부로직 개선
simeunseo Jun 22, 2024
c1c2f15
feat: selectTimeSlot과 selectPriority를 한 컴포넌트 아래서 관리하도록 구조 변경
simeunseo Jun 22, 2024
89f2b92
refactor: Slot에서 의존성 분리
simeunseo Jun 22, 2024
e67160c
fix: Column 컴포넌트 삭제하고 스타일링 컴포넌트만 남김
simeunseo Jun 22, 2024
4d5f2e0
feat: 우선순위 시간표 스타일링 로직 구현
simeunseo Jun 22, 2024
500b1e5
fix: select 페이지를 퍼널 형태로 변경
simeunseo Jun 22, 2024
838eed3
feat: Header 연결
simeunseo Jun 22, 2024
2d39522
feat: 가능 시간 입력 설명 컴포넌트 구현
simeunseo Jun 22, 2024
02324c9
feat: 가능시간, 우선순위 입력에 타이틀 추가
simeunseo Jun 22, 2024
d09d4e8
feat: 리팩토링한 시간표 컴포넌트에 우선순위 선택 드롭다운 연결
simeunseo Jun 22, 2024
b6b16be
feat: 우선순위 선택시 시간표에 우선순위 숫자 표시
simeunseo Jun 22, 2024
8857bbe
feat: 뒤로가기해도 우선순위 선택 내용이 남아있도록 함
simeunseo Jun 22, 2024
6157e73
feat: CTA 연결
simeunseo Jun 22, 2024
c3fb342
fix: 드롭다운 내 잘못된 endSlot과 날짜 포매팅 수정
simeunseo Jun 22, 2024
c7f3447
fix: 우선순위 드롭다운 수정이 안되는 오류 해결
simeunseo Jun 22, 2024
b6feb98
chore: 기존 api 함수를 legacy 폴더로 옮김
simeunseo Jun 22, 2024
b099be0
feat: react-query 서리
simeunseo Jun 22, 2024
cccfa14
feat: useGetTimetable 구현
simeunseo Jun 22, 2024
3a5c288
feat: useGetTimetable 연결
simeunseo Jun 22, 2024
013f9f1
feat: 가능 시간 입력 post 연결
simeunseo Jun 22, 2024
63ed971
fix: ts 에러 수정
simeunseo Jun 22, 2024
d68f6b3
fix: 온보딩 swiper css 적용 안되는 에러
simeunseo Jun 22, 2024
9596db2
chore: 안쓰는 컴포넌트 제거
simeunseo Jun 23, 2024
a0c97c3
chore: 코드 가독성 개선
simeunseo Jun 23, 2024
d66d3e4
fix: selectSchedule에서 step state 제거하고 context api로 변경
simeunseo Jun 23, 2024
5c95f13
fix: Timetable Context를 SelectSchedule에서 주입하는 것이 아니라 Timetable 컴포넌트에서…
simeunseo Jun 23, 2024
f6a9218
merge feat/Priority/#236
simeunseo Jun 23, 2024
6bb589e
fix: TimetableContext에 의존성이 있는 컴포넌트를 Timetable 컴포넌트 내부로 이동
simeunseo Jun 23, 2024
210f33f
Merge branch 'feat/Priority/#236' into feat/AvailableScheduleApi/#239
simeunseo Jun 23, 2024
49e1651
fix: 인터페이스에서는 no-unused-value lint error가 발생하지않도록 수정
simeunseo Jun 23, 2024
af422e5
fix: 가능시간 POST시 endTime이 30분 적게 들어가는 오류 수정
simeunseo Jun 23, 2024
6a12ea6
feat: getOverallTimetable api 구현
simeunseo Jun 23, 2024
4475608
feat: Timetable Context(->Select Context)를 Timetable 컴포넌트에서 분리하여 Sele…
simeunseo Jun 23, 2024
33d9b55
feat: 종합 일정 시간표 기본 UI 구현
simeunseo Jun 23, 2024
21e7190
feat: 종합일정시간표 클릭 이벤트 구현
simeunseo Jun 23, 2024
15c7966
feat: 타이틀, 선택된 슬롯에 참여 가능한 인원 목록 구현
simeunseo Jun 23, 2024
59d24bc
fix: userNames 렌더링 방식 변경
simeunseo Jun 23, 2024
a5361e9
fix: ts에러 수정
simeunseo Jun 25, 2024
64da00a
fix: setState type 정확히 지정
simeunseo Jun 25, 2024
b1579ea
fix: Slots -> Column으로 네이밍 변경
simeunseo Jun 25, 2024
7228267
fix: Timetable에서 필요없는 prop 삭제
simeunseo Jun 25, 2024
f72b629
fix: slots -> column으로 네이밍 변경
simeunseo Jun 25, 2024
1c6c460
Merge pull request #245 from ASAP-as-soon-as-possible/feat/overallSch…
simeunseo Jul 5, 2024
ad1f16b
Merge pull request #240 from ASAP-as-soon-as-possible/feat/AvailableS…
simeunseo Jul 5, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@

"no-duplicate-imports": "error", //중복 Import 안돼
"no-console": ["warn", { "allow": ["warn", "error", "info"] }], //콘솔은 확인 뒤 지우기
"no-unused-vars": "error", //사용하지 않은 변수면 없애기
"no-unused-vars": "off", //사용하지 않은 변수면 없애기
"@typescript-eslint/no-unused-vars": ["error"], //사용하지 않은 변수면 없애기
"no-multiple-empty-lines": "error", //공백 금지
"no-undef": "error", //정의 안 한 변수 사용 x
"indent": "off", // 프리티어 충돌로 인한 OFF
Expand Down
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
"lint:css": "stylelint './src/**/*.{ts,tsx}'"
},
"dependencies": {
"@tanstack/react-query": "^5.45.1",
"@tanstack/react-query-devtools": "^5.45.1",
"@types/axios": "^0.14.0",
"@types/react-copy-to-clipboard": "^5.0.4",
"axios": "^1.4.0",
Expand Down
57 changes: 28 additions & 29 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -1,58 +1,57 @@
#app {
height: 100%;
height: 100%;
}

html,
body {
position: relative;
height: 100%;
position: relative;
height: 100%;
}

body {
margin: 0;
background: #eee;
padding: 0;
color: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
color: #000;
font-size: 14px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background: #eee;
}

.swiper {
z-index: 0;
width: 100%;
height: 100%;
z-index: 0;
width: 100%;
height: 100%;
}

.swiper-slide {

/* Center slide text vertically */
display: flex;
align-items: center;
justify-content: center;
background: #141414;
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
text-align: center;
background: #141414;
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.swiper-button-prev {
display: none;
display: none;
}

.swiper-button-next {
display: none;
display: none;
}

.swiper-pagination-bullet {
background-color: #A4A4A4;
background-color: #a4a4a4 !important;
}

.swiper-pagination-bullet-active {
background-color: #3253FF;
}
background-color: #3253ff !important;
}
36 changes: 21 additions & 15 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import { useEffect } from 'react';
/**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */
import './utils/changeBrowser';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';

import { ThemeProvider } from 'styled-components';
import styled from 'styled-components/macro';
import ToastContainerBox from 'utils/toast/ToastContainer';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

import Router from './Router';
import GlobalStyle from './styles/globalStyles';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import Router from './Router';
import { ThemeProvider } from 'styled-components';
import ToastContainerBox from 'utils/toast/ToastContainer';
import styled from 'styled-components/macro';
import { theme } from './styles/theme';

import './App.css';
/**카카오톡 인앱브라우저 종료후 크롬 및 사파리로 오픈하는 utils file */
import './utils/changeBrowser';
import 'react-toastify/dist/ReactToastify.css';
import { useEffect } from 'react';

const MobileWrapper = styled.div`
display: flex;
Expand Down Expand Up @@ -47,14 +48,19 @@ function App() {
window.removeEventListener('resize', setScreenSize);
};
}, []);

const queryClient = new QueryClient();
return (
<>
<ThemeProvider theme={theme}>
<GlobalStyle />
<MobileWrapper>
<Router />
<ToastContainerBox />
</MobileWrapper>
<QueryClientProvider client={queryClient}>
<GlobalStyle />
<MobileWrapper>
<Router />
<ToastContainerBox />
</MobileWrapper>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</ThemeProvider>
</>
);
Expand Down
14 changes: 6 additions & 8 deletions src/Router.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { BrowserRouter, Route, Routes } from 'react-router-dom';

import ChooseBestTime from 'pages/bestMeetTime/ChooseBestTime';
import CreateMeeting from 'pages/createMeeting/CreateMeeting';
import CueCard from 'pages/cueCard/CueCard';
import ErrorPage404 from 'pages/errorLoading/ErrorPage404';
import LoadingPage from 'pages/errorLoading/LoadingPage';
import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage';
import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
import LoginEntrance from 'pages/loginEntrance/LoginEntrance';
import OnBoarding from 'pages/onBoarding/OnBoarding';
import SelectPage from 'pages/legacy/selectSchedule/SelectSchedulePage';
import SelectSchedule from 'pages/selectSchedule/SelectSchedule';
import SelectSchedulePriority from 'pages/legacy/selectSchedule/SelectPriorityPage';
import SteppingLayout from 'pages/steppingStone/SteppingLayout';
import Test from 'pages/Test';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

const Router = () => {
return (
Expand All @@ -18,8 +19,7 @@ const Router = () => {
<Route path="/" element={<OnBoarding />} />
<Route path="/meet/create" element={<CreateMeeting />} />
<Route path="/meet/complete" element={<SteppingLayout steppingType={'meetComplete'} />} />
<Route path="/:auth/schedule/:meetingId" element={<SelectPage />} />
<Route path="/:auth/priority/:meetingId" element={<SelectSchedulePriority />} />
<Route path="/:auth/select/:meetingId" element={<SelectSchedule />} />
<Route
path="/host/schedule-complete/:meetingId"
element={<SteppingLayout steppingType={'hostScheduleComplete'} />}
Expand All @@ -36,8 +36,6 @@ const Router = () => {
<Route path="/loadingpage" element={<LoadingPage />} />
<Route path="*" element={<ErrorPage404 />} />
<Route path="/error" element={<ErrorPage404 />} />
<Route path="/select" element={<SelectPage />} />
<Route path="/test" element={<Test />} />
</Routes>
</BrowserRouter>
);
Expand Down
5 changes: 3 additions & 2 deletions src/components/atomComponents/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

import { css, styled } from 'styled-components';

import React from 'react';

interface ButtonProps {
children: React.ReactNode;
typeState: string;
Expand Down Expand Up @@ -73,6 +73,7 @@ const buttonCSS = {
${buttonDefaultCSS.basicCss};
background: ${({ theme }) => theme.colors.grey7};
color: ${({ theme }) => theme.colors.grey5};
pointer-events: none;
`,
halfsecondaryDisabled: css`
${buttonDefaultCSS.basicCss};
Expand Down
46 changes: 27 additions & 19 deletions src/components/moleculesComponents/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,28 @@
import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
import { Dispatch, SetStateAction, useState } from 'react';

import CopyToClipboard from 'react-copy-to-clipboard';
import Navigation from './Navigation';
import Text from 'components/atomComponents/Text';
import { notify } from 'utils/toast/copyLink';
import { BackIc, ExitIc, HambergerIc, LinkIc, MainLogoIc } from 'components/Icon/icon';
import { useScheduleStepContext } from 'pages/selectSchedule/contexts/useScheduleStepContext';
import { ScheduleStepType } from 'pages/selectSchedule/types';
import CopyToClipboard from 'react-copy-to-clipboard';
import { useParams } from 'react-router';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components/macro';
import { theme } from 'styles/theme';
import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router';
import { notify } from 'utils/toast/copyLink';

import Navigation from './Navigation';


interface HeaderProps {
position: string;
setStep?: Dispatch<SetStateAction<number>>;
setFunnelStep?: Dispatch<SetStateAction<number>>;
setSelectScheduleStep?: Dispatch<SetStateAction<ScheduleStepType>>;
}

function Header({ position, setStep }: HeaderProps) {
function Header({ position, setFunnelStep }: HeaderProps) {
const { scheduleStep, setScheduleStep } = useScheduleStepContext();
const navigationOptions = [
// {
// title: '공지사항',
// url: '',
// },
// {
// title: 'ASAP family',
// url: '',
// },
{
title: '약속 생성하기',
url: '/meet/create',
Expand All @@ -38,8 +36,8 @@ function Header({ position, setStep }: HeaderProps) {
const navigate = useNavigate();
const [isNaviOpen, setIsNaviOpen] = useState(false);
const backToFunnel = () => {
if (setStep !== undefined) {
setStep((prev) => {
if (setFunnelStep !== undefined) {
setFunnelStep((prev) => {
if (prev === 0) {
navigate('/');
return prev;
Expand All @@ -48,6 +46,16 @@ function Header({ position, setStep }: HeaderProps) {
});
}
};
const backToSelectSchedule = () => {
if (setScheduleStep !== undefined) {
if (scheduleStep === 'selectTimeSlot') {
window.history.back();
return;
} else if (scheduleStep === 'selectPriority') {
setScheduleStep('selectTimeSlot');
}
}
};

const { meetingId } = useParams();
return (
Expand Down Expand Up @@ -78,7 +86,7 @@ function Header({ position, setStep }: HeaderProps) {
</CopyToClipboard>
</ConfirmIconSection>
) : position === 'schedule' ? (
<ConfirmIconSection onClick={() => window.history.back()}>
<ConfirmIconSection onClick={backToSelectSchedule}>
<IconSection>
<BackIc />
</IconSection>
Expand Down
21 changes: 13 additions & 8 deletions src/components/moleculesComponents/TitleComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,35 @@ import { theme } from 'styles/theme';

interface TextProps {
main: string;
sub: string;
sub?: string;
padding?: string;
}

function TitleComponents({ main, sub }: TextProps) {
const defaultPadding = `4.4rem 0 4.2rem 0`;
function TitleComponents({ main, sub, padding = defaultPadding }: TextProps) {
return (
<TitleWrapper>
<TitleWrapper $padding={padding}>
<Text font={'head2'} color={`${theme.colors.white}`}>
{main}
</Text>
<Text font={'body3'} color={`${theme.colors.grey4}`}>
{sub}
</Text>
{sub && (
<Text font={'body3'} color={`${theme.colors.grey4}`}>
{sub}
</Text>
)}
</TitleWrapper>
);
}

export default TitleComponents;

const TitleWrapper = styled.div`
const TitleWrapper = styled.div<{ $padding: string }>`
display: flex;
position: relative;
flex-direction: column;
gap: 1.2rem;
padding: 4.4rem 0 4.2rem 0;
padding: ${({ $padding }) => $padding};
width: 100%;
`;
Loading
Loading