Skip to content

Commit

Permalink
Refactor: remove unnecessary code
Browse files Browse the repository at this point in the history
  • Loading branch information
@JSH99
JSH99 committed Jan 18, 2024
1 parent 43632ae commit 27f940f
Showing 1 changed file with 45 additions and 107 deletions.
152 changes: 45 additions & 107 deletions src/pages/Trip/Trip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,76 +8,54 @@ import {
TabPanels,
Tabs,
useDisclosure,
} from "@chakra-ui/react";
import { useEffect, useRef, useState } from "react";
import { AiOutlineBell as AlarmIcon } from "react-icons/ai";
import { AiOutlineMenu as MenuIcon } from "react-icons/ai";
import { FiPlus as PlusIcon } from "react-icons/fi";
import { useNavigate } from "react-router-dom";
} from '@chakra-ui/react';
import {useEffect, useRef, useState} from 'react';
import {AiOutlineBell as AlarmIcon} from 'react-icons/ai';
import {AiOutlineMenu as MenuIcon} from 'react-icons/ai';
import {FiPlus as PlusIcon} from 'react-icons/fi';

import styles from "./Trip.module.scss";
import styles from './Trip.module.scss';

import Alarm from "@/components/Alarm/Alarm";
import BottomSlide from "@/components/BottomSlide/BottomSlide";
import RouteTabPanel from "@/components/Route/RouteTabPanel/RouteTabPanel";
import SlideBar from "@/components/SideBar/SideBar";
import EditTripSpace from "@/components/TripSpace/EditTripSpace/EditTripSpace";
import FriendList from "@/components/TripSpace/FriendList/FriendList";
import InviteFriends from "@/components/TripSpace/InviteFriends/InviteFriends";
import VoteTabPanel from "@/components/VoteTabPanel/VoteTabPanel";
import Alarm from '@/components/Alarm/Alarm';
import BottomSlide from '@/components/BottomSlide/BottomSlide';
import RouteTabPanel from '@/components/Route/RouteTabPanel/RouteTabPanel';
import SlideBar from '@/components/SideBar/SideBar';
import EditTripSpace from '@/components/TripSpace/EditTripSpace/EditTripSpace';
import FriendList from '@/components/TripSpace/FriendList/FriendList';
import InviteFriends from '@/components/TripSpace/InviteFriends/InviteFriends';
import VoteTabPanel from '@/components/VoteTabPanel/VoteTabPanel';

import { LatLng } from "@/types/route";
import {LatLng} from '@/types/route';

function Trip() {
// 임시 데이터
const users = [
{ name: "김철수", src: "" },
{ name: "나철수", src: "" },
{ name: "다철수", src: "https://bit.ly/kent-c-dodds" },
{ name: "라철수", src: "https://bit.ly/prosper-baba" },
{ name: "마철수", src: "https://bit.ly/code-beast" },
{name: '김철수', src: ''},
{name: '나철수', src: ''},
{name: '다철수', src: 'https://bit.ly/kent-c-dodds'},
{name: '라철수', src: 'https://bit.ly/prosper-baba'},
{name: '마철수', src: 'https://bit.ly/code-beast'},
];

const navigate = useNavigate();
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
const mapRef = useRef<kakao.maps.Map>(null);
const [center, setCenter] = useState<LatLng>({ lat: 37, lng: 131 }); // 기준: 독도
const [center, setCenter] = useState<LatLng>({lat: 37, lng: 131}); // 기준: 독도

const {
isOpen: isBottomSlideOpen,
onOpen: onBottomSlideOpen,
onClose: onBottomSlideClose,
} = useDisclosure();
const {
isOpen: isSlideBarOpen,
onOpen: onSlideBarOpen,
onClose: onSlideBarClose,
} = useDisclosure();
const {isOpen: isBottomSlideOpen, onOpen: onBottomSlideOpen, onClose: onBottomSlideClose} = useDisclosure();
const {isOpen: isSlideBarOpen, onOpen: onSlideBarOpen, onClose: onSlideBarClose} = useDisclosure();

const {
isOpen: isInviteOpen,
onOpen: onInviteOpen,
onClose: onInviteClose,
} = useDisclosure();
const {isOpen: isInviteOpen, onOpen: onInviteOpen, onClose: onInviteClose} = useDisclosure();

const {
isOpen: isFriendListOpen,
onOpen: onFriendListOpen,
onClose: onFriendListClose,
} = useDisclosure();
const {isOpen: isFriendListOpen, onOpen: onFriendListOpen, onClose: onFriendListClose} = useDisclosure();

const {
isOpen: isAlarmOpen,
onOpen: onAlarmOpen,
onClose: onAlarmClose,
} = useDisclosure();
const {isOpen: isAlarmOpen, onOpen: onAlarmOpen, onClose: onAlarmClose} = useDisclosure();

useEffect(() => {
const map = mapRef.current;

if (map) {
map.relayout();
setCenter({ lat: 37.76437082535426, lng: 128.87675285339355 });
setCenter({lat: 37.76437082535426, lng: 128.87675285339355});
}
}, [selectedTabIndex]);

Expand All @@ -86,48 +64,29 @@ function Trip() {
<div className={styles.container}>
<div className={styles.iconTab}>
<button onClick={onAlarmOpen}>
<AlarmIcon size="24px" color="white" />
<AlarmIcon size='24px' color='white' />
</button>
<button onClick={onSlideBarOpen}>
<MenuIcon size="24px" color="white" />
<MenuIcon size='24px' color='white' />
</button>
</div>

<header className={styles.header}>
<div className={styles.titleContainer}>
<div className={styles.titleContainer__dDayTitle}>D-day</div>
<div className={styles.titleContainer__placeTitle}>
여행지를 정해주세요
</div>
<div className={styles.titleContainer__placeTitle}>여행지를 정해주세요</div>
<div className={styles.dateContainer}>
<span className={styles.dateContainer__dateTitle}>
날짜를 정해주세요
</span>
<button
className={styles.dateContainer__editButton}
onClick={onBottomSlideOpen}
>
<span className={styles.dateContainer__dateTitle}>날짜를 정해주세요</span>
<button className={styles.dateContainer__editButton} onClick={onBottomSlideOpen}>
편집
</button>
</div>
</div>
<div className={styles.userContainer}>
<button
className={styles.avatarContainer}
onClick={onFriendListOpen}
>
<AvatarGroup
className={styles.avatarContainer__group}
spacing="-8px"
max={3}
>
<button className={styles.avatarContainer} onClick={onFriendListOpen}>
<AvatarGroup className={styles.avatarContainer__group} spacing='-8px' max={3}>
{users.map((user) => (
<Avatar
w="2.6rem"
h="2.6rem"
name={user.name}
src={user.src}
/>
<Avatar w='2.6rem' h='2.6rem' name={user.name} src={user.src} />
))}
</AvatarGroup>
<span>외 {users.length - 3}명</span>
Expand All @@ -140,33 +99,24 @@ function Trip() {
</header>

<div className={styles.contents}>
<Tabs
isFitted
variant="voteTab"
index={selectedTabIndex}
onChange={(index) => setSelectedTabIndex(index)}
>
<Tabs isFitted variant='voteTab' index={selectedTabIndex} onChange={(index) => setSelectedTabIndex(index)}>
<div className={styles.contents__stickyTabList}>
<TabList className={styles.contents__tabList}>
<Tab
fontSize="tabLabel"
padding="0"
borderColor="transparent"
_selected={{ color: "#1D2433", fontWeight: "700" }}
fontSize='tabLabel'
padding='0'
borderColor='transparent'
_selected={{color: '#1D2433', fontWeight: '700'}}
>
투표
</Tab>
<Tab
fontSize="tabLabel"
padding="0"
_selected={{ color: "#1D2433", fontWeight: "700" }}
>
<Tab fontSize='tabLabel' padding='0' _selected={{color: '#1D2433', fontWeight: '700'}}>
일정
</Tab>
</TabList>
<TabIndicator className={styles.contents__tabIndicator} />
</div>
<TabPanels bg="#fff">
<TabPanels bg='#fff'>
<TabPanel className={styles.contents__tabContent}>
<VoteTabPanel />
</TabPanel>
Expand All @@ -176,21 +126,9 @@ function Trip() {
</TabPanels>
</Tabs>
</div>
<BottomSlide
isOpen={isBottomSlideOpen}
onClose={onBottomSlideClose}
children={<EditTripSpace />}
/>
<BottomSlide
isOpen={isInviteOpen}
onClose={onInviteClose}
children={<InviteFriends isOpen={isInviteOpen} />}
/>
<BottomSlide
isOpen={isFriendListOpen}
onClose={onFriendListClose}
children={<FriendList users={users} />}
/>
<BottomSlide isOpen={isBottomSlideOpen} onClose={onBottomSlideClose} children={<EditTripSpace />} />
<BottomSlide isOpen={isInviteOpen} onClose={onInviteClose} children={<InviteFriends isOpen={isInviteOpen} />} />
<BottomSlide isOpen={isFriendListOpen} onClose={onFriendListClose} children={<FriendList users={users} />} />
</div>
<SlideBar isSideOpen={isSlideBarOpen} sideClose={onSlideBarClose} />
<Alarm isAlarmOpen={isAlarmOpen} alarmClose={onAlarmClose} />
Expand Down

0 comments on commit 27f940f

Please sign in to comment.