From bbaaefe5a610645a0e8c9b0a4039002ce67fc0fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=82=98=EC=97=B0?= <103591752+kongnayeon@users.noreply.github.com> Date: Sun, 3 Mar 2024 22:48:58 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20refactor:=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=BB=A8=EB=B2=A4=EC=85=98=20(#35)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: api 네이밍 수정 * fix: jsx single quote * fix: 컴포넌트 파일명 * fix: component alias 적용 * fix: meetingRoom 페이지 네이밍 컨벤션 통일 * fix: alias, double qoute * chore: delete meetingroom directory --- src/apis/user/userApi.ts | 6 +++--- .../BottomSheet}/GlobalBottomSheet.tsx | 0 .../BottomSheet}/customBottomSheet.css | 0 src/components/common/Button/Button.tsx | 12 ++++++----- src/components/common/Button/index.ts | 1 - src/components/common/Button/types/index.d.ts | 9 -------- src/components/common/Header/Header.tsx | 2 +- src/components/common/Header/index.ts | 1 - src/components/common/{ => Input}/Input.tsx | 3 ++- src/components/common/Modal/MordalPortal.ts | 4 +--- src/components/common/SvgIcon/index.ts | 1 - src/components/common/index.ts | 8 +++++++ src/components/layout/GlobalLayout.tsx | 0 src/components/layout/index.ts | 2 ++ src/components/layout/index.tsx | 3 --- src/components/meetingRoom/AgendaCard.tsx | 2 +- src/components/meetingRoom/MeetingCard.tsx | 2 +- src/components/meetingRoom/TimeLineButton.tsx | 2 +- src/components/meetingRoom/index.ts | 4 ++++ .../{ => meetingRoom}/timer/Timer.tsx | 2 +- src/main.tsx | 2 +- src/pages/join/complete.tsx | 3 +-- src/pages/join/index.tsx | 8 +++---- .../{meetingroom => meetingRoom}/index.tsx | 21 ++++++++++--------- src/pages/onboarding/index.tsx | 4 ++-- src/routes/index.tsx | 4 ++-- src/store/bottomSheet.ts | 1 - 27 files changed, 52 insertions(+), 55 deletions(-) rename src/components/{bottomSheet => common/BottomSheet}/GlobalBottomSheet.tsx (100%) rename src/components/{bottomSheet => common/BottomSheet}/customBottomSheet.css (100%) delete mode 100644 src/components/common/Button/index.ts delete mode 100644 src/components/common/Button/types/index.d.ts delete mode 100644 src/components/common/Header/index.ts rename src/components/common/{ => Input}/Input.tsx (98%) delete mode 100644 src/components/common/SvgIcon/index.ts create mode 100644 src/components/common/index.ts delete mode 100644 src/components/layout/GlobalLayout.tsx create mode 100644 src/components/layout/index.ts delete mode 100644 src/components/layout/index.tsx create mode 100644 src/components/meetingRoom/index.ts rename src/components/{ => meetingRoom}/timer/Timer.tsx (97%) rename src/pages/{meetingroom => meetingRoom}/index.tsx (90%) diff --git a/src/apis/user/userApi.ts b/src/apis/user/userApi.ts index a9b63b5..5625e37 100644 --- a/src/apis/user/userApi.ts +++ b/src/apis/user/userApi.ts @@ -3,16 +3,16 @@ import { api } from '../axois'; export const userApi = { // 카카오 로그인 - kakaoLogin: `${BASE_URL}/oauth2/authorization/kakao?redirect_uri=${REDIRECT_URI}`, + GET_KAKAO_LOGIN: `${BASE_URL}/oauth2/authorization/kakao?redirect_uri=${REDIRECT_URI}`, // 유저 조회 - getInfo: (token: string) => + GET_MEMBERS: (token: string) => api.get('/api/members', { headers: { Authorization: token } }), // 닉네임 추가 - addNickname: (nickname: string, token: string) => + PATCH_NICKNAME: (nickname: string, token: string) => api.patch( '/api/members/nickname', { nickname }, diff --git a/src/components/bottomSheet/GlobalBottomSheet.tsx b/src/components/common/BottomSheet/GlobalBottomSheet.tsx similarity index 100% rename from src/components/bottomSheet/GlobalBottomSheet.tsx rename to src/components/common/BottomSheet/GlobalBottomSheet.tsx diff --git a/src/components/bottomSheet/customBottomSheet.css b/src/components/common/BottomSheet/customBottomSheet.css similarity index 100% rename from src/components/bottomSheet/customBottomSheet.css rename to src/components/common/BottomSheet/customBottomSheet.css diff --git a/src/components/common/Button/Button.tsx b/src/components/common/Button/Button.tsx index c99ef79..dc65d79 100644 --- a/src/components/common/Button/Button.tsx +++ b/src/components/common/Button/Button.tsx @@ -1,12 +1,14 @@ +import { KeyOfPalette } from '@/styles'; import styled from '@emotion/styled'; -import { Size, BackgroundColor, TextColor } from './types'; + +export type Size = 'lg' | 'md' | 'sm'; interface ButtonProps { children: React.ReactNode; size: Size; fullWidth?: boolean; - backgroundColor: BackgroundColor; - textColor?: TextColor; + backgroundColor: KeyOfPalette; + textColor?: KeyOfPalette; disabled?: boolean; onClick: () => void; } @@ -36,8 +38,8 @@ export const Button = ({ const StyledButton = styled.button<{ size: 'lg' | 'md' | 'sm'; fullWidth?: boolean; - backgroundColor: BackgroundColor; - textColor: TextColor; + backgroundColor: KeyOfPalette; + textColor: KeyOfPalette; disabled?: boolean; }>` ${(props) => diff --git a/src/components/common/Button/index.ts b/src/components/common/Button/index.ts deleted file mode 100644 index 8b166a8..0000000 --- a/src/components/common/Button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Button'; diff --git a/src/components/common/Button/types/index.d.ts b/src/components/common/Button/types/index.d.ts deleted file mode 100644 index 1d84cdb..0000000 --- a/src/components/common/Button/types/index.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -export type Size = 'lg' | 'md' | 'sm'; -export type Typo = 'BL' | 'BM1' | 'BM2' | 'BM3'; -export type TextColor = 'white' | 'main_blue'; -export type BackgroundColor = - | 'main' - | 'light_gray3' - | 'main_blue' - | 'skyblue' - | 'kakao_yellow'; diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 97fc242..7189264 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { SvgIcon } from '../SvgIcon'; +import { SvgIcon } from '@/components/common/SvgIcon/SvgIcon'; interface HeaderProps { title?: string; diff --git a/src/components/common/Header/index.ts b/src/components/common/Header/index.ts deleted file mode 100644 index 266dec8..0000000 --- a/src/components/common/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Header'; diff --git a/src/components/common/Input.tsx b/src/components/common/Input/Input.tsx similarity index 98% rename from src/components/common/Input.tsx rename to src/components/common/Input/Input.tsx index f227dbc..ef1f9df 100644 --- a/src/components/common/Input.tsx +++ b/src/components/common/Input/Input.tsx @@ -1,3 +1,4 @@ +/* eslint-disable prettier/prettier */ /* eslint-disable react/display-name */ /* eslint-disable @typescript-eslint/no-unused-vars */ import { @@ -10,7 +11,7 @@ import styled from '@emotion/styled'; import { theme } from '@/styles'; import { Flex } from '@/components/Wrapper'; import { css } from '@emotion/react'; -import { SvgIcon } from './SvgIcon'; +import { SvgIcon } from '../SvgIcon/SvgIcon'; export type InputVariant = 'default' | 'join' | 'meeting'; diff --git a/src/components/common/Modal/MordalPortal.ts b/src/components/common/Modal/MordalPortal.ts index 55c8f89..c7f6058 100644 --- a/src/components/common/Modal/MordalPortal.ts +++ b/src/components/common/Modal/MordalPortal.ts @@ -1,10 +1,8 @@ import { ReactNode } from 'react'; import reactDom from 'react-dom'; -const ModalPortal = ({ children }: { children: ReactNode }) => { +export const ModalPortal = ({ children }: { children: ReactNode }) => { const el = document.getElementById('modal'); if (!el) return null; return reactDom.createPortal(children, el); }; - -export default ModalPortal; diff --git a/src/components/common/SvgIcon/index.ts b/src/components/common/SvgIcon/index.ts deleted file mode 100644 index e1243a0..0000000 --- a/src/components/common/SvgIcon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './SvgIcon'; diff --git a/src/components/common/index.ts b/src/components/common/index.ts new file mode 100644 index 0000000..14021e1 --- /dev/null +++ b/src/components/common/index.ts @@ -0,0 +1,8 @@ +export * from './BottomSheet/GlobalBottomSheet'; +export * from './Button/Button'; +export * from './Header/Header'; +export * from './Input/Input'; +export * from './Modal/MeetingRoomModal'; +export * from './Modal/MordalPortal'; +export * from './SvgIcon/SvgIcon'; +export * from './TimePicker/TimePicker'; diff --git a/src/components/layout/GlobalLayout.tsx b/src/components/layout/GlobalLayout.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts new file mode 100644 index 0000000..867750a --- /dev/null +++ b/src/components/layout/index.ts @@ -0,0 +1,2 @@ +export * from './Layout'; +export * from './LoginLayout'; diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx deleted file mode 100644 index 46b249d..0000000 --- a/src/components/layout/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -/* eslint-disable react-refresh/only-export-components */ -export * from './Layout'; -export * from './LoginLayout'; diff --git a/src/components/meetingRoom/AgendaCard.tsx b/src/components/meetingRoom/AgendaCard.tsx index 2b74a4c..226f724 100644 --- a/src/components/meetingRoom/AgendaCard.tsx +++ b/src/components/meetingRoom/AgendaCard.tsx @@ -3,7 +3,7 @@ import { BreakTime, BreakTimeDisabled } from '@/assets/BreakTime'; import { Flex, Space, Text } from '@/components/Wrapper'; import { theme } from '@/styles'; import styled from '@emotion/styled'; -import { SvgIcon } from '@/components/common/SvgIcon'; +import { SvgIcon } from '@/components/common/SvgIcon/SvgIcon'; import { css } from '@emotion/react'; interface AgendaCardProps { diff --git a/src/components/meetingRoom/MeetingCard.tsx b/src/components/meetingRoom/MeetingCard.tsx index 1d4498f..4a6c4c0 100644 --- a/src/components/meetingRoom/MeetingCard.tsx +++ b/src/components/meetingRoom/MeetingCard.tsx @@ -1,5 +1,5 @@ import { Flex, Space, Text } from '@/components/Wrapper'; -import { SvgIcon } from '@/components/common/SvgIcon'; +import { SvgIcon } from '@/components/common/SvgIcon/SvgIcon'; import { theme } from '@/styles'; import { keyframes } from '@emotion/react'; import styled from '@emotion/styled'; diff --git a/src/components/meetingRoom/TimeLineButton.tsx b/src/components/meetingRoom/TimeLineButton.tsx index 3b3316b..c24a3e7 100644 --- a/src/components/meetingRoom/TimeLineButton.tsx +++ b/src/components/meetingRoom/TimeLineButton.tsx @@ -1,5 +1,5 @@ import { Text } from '@/components/Wrapper'; -import { SvgIcon } from '@/components/common/SvgIcon'; +import { SvgIcon } from '@/components/common/SvgIcon/SvgIcon'; import { theme } from '@/styles'; import styled from '@emotion/styled'; import { ButtonHTMLAttributes } from 'react'; diff --git a/src/components/meetingRoom/index.ts b/src/components/meetingRoom/index.ts new file mode 100644 index 0000000..5bb2698 --- /dev/null +++ b/src/components/meetingRoom/index.ts @@ -0,0 +1,4 @@ +export * from './timer/Timer'; +export * from './AgendaCard'; +export * from './MeetingCard'; +export * from './TimeLineButton'; diff --git a/src/components/timer/Timer.tsx b/src/components/meetingRoom/timer/Timer.tsx similarity index 97% rename from src/components/timer/Timer.tsx rename to src/components/meetingRoom/timer/Timer.tsx index e57b3a3..a37b65d 100644 --- a/src/components/timer/Timer.tsx +++ b/src/components/meetingRoom/timer/Timer.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { formatSeconds } from '../../utils/formatSeconds'; +import { formatSeconds } from '@/utils'; import { ColorFormat, CountdownCircleTimer diff --git a/src/main.tsx b/src/main.tsx index 12848a4..dcce37d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,7 +7,7 @@ import { Global, ThemeProvider } from '@emotion/react'; import { theme } from './styles/theme'; import { Routers } from '@/routes/index.tsx'; import { Layout } from '@/components/layout'; -import { GlobalBottomSheet } from '@/components/bottomSheet/GlobalBottomSheet'; +import { GlobalBottomSheet } from '@/components/common/BottomSheet/GlobalBottomSheet'; const queryClient = new QueryClient({ defaultOptions: { diff --git a/src/pages/join/complete.tsx b/src/pages/join/complete.tsx index 93921e3..4550860 100644 --- a/src/pages/join/complete.tsx +++ b/src/pages/join/complete.tsx @@ -1,7 +1,6 @@ import { IconJoinComplete } from '@/assets/IconJoinComplete'; import { Space } from '@/components/Wrapper'; -import { Button } from '@/components/common/Button'; -import { Header } from '@/components/common/Header'; +import { Button, Header } from '@/components/common'; import { media } from '@/styles'; import styled from '@emotion/styled'; import { useNavigate } from 'react-router-dom'; diff --git a/src/pages/join/index.tsx b/src/pages/join/index.tsx index abb74e9..0cf41a1 100644 --- a/src/pages/join/index.tsx +++ b/src/pages/join/index.tsx @@ -1,8 +1,6 @@ import { userApi } from '@/apis/user'; import { Space } from '@/components/Wrapper'; -import { Button } from '@/components/common/Button'; -import { Header } from '@/components/common/Header'; -import { Input } from '@/components/common/Input'; +import { Button, Header, Input } from '@/components/common'; import { media } from '@/styles'; import styled from '@emotion/styled'; import { useEffect } from 'react'; @@ -31,7 +29,7 @@ const Join = () => { if (token) { try { - await userApi.addNickname(nickname, token); + await userApi.PATCH_NICKNAME(nickname, token); document.cookie = `token=${token}`; navigate('/join/complete'); } catch { @@ -45,7 +43,7 @@ const Join = () => { const getUserData = async () => { if (token) { try { - const { data } = await userApi.getInfo(token); + const { data } = await userApi.GET_MEMBERS(token); const nickname = data?.response?.nickname; setValue('join', nickname); } catch { diff --git a/src/pages/meetingroom/index.tsx b/src/pages/meetingRoom/index.tsx similarity index 90% rename from src/pages/meetingroom/index.tsx rename to src/pages/meetingRoom/index.tsx index 9c44ccc..ed904df 100644 --- a/src/pages/meetingroom/index.tsx +++ b/src/pages/meetingRoom/index.tsx @@ -1,17 +1,18 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ import { ButtonWrapper, Flex, Space, Text } from '@/components/Wrapper'; -import { Button } from '@/components/common/Button'; -import { Header } from '@/components/common/Header'; -import { Input } from '@/components/common/Input'; -import { MeetingRoomModal } from '@/components/common/Modal/MeetingRoomModal'; -import ModalPortal from '@/components/common/Modal/MordalPortal'; import { + Button, + Header, + Input, + MeetingRoomModal, + ModalPortal, TimePicker, TimePickerValueGroups -} from '@/components/common/TimePicker/TimePicker'; -import { AgendaCard } from '@/components/meetingRoom/AgendaCard'; -import { MeetingCard } from '@/components/meetingRoom/MeetingCard'; -import { TimeLineButton } from '@/components/meetingRoom/TimeLineButton'; +} from '@/components/common'; +import { + AgendaCard, + MeetingCard, + TimeLineButton +} from '@/components/meetingRoom'; import useBottomSheet from '@/hooks/useBottomSheet'; import { media, theme } from '@/styles'; import styled from '@emotion/styled'; diff --git a/src/pages/onboarding/index.tsx b/src/pages/onboarding/index.tsx index 75288e8..2593ad8 100644 --- a/src/pages/onboarding/index.tsx +++ b/src/pages/onboarding/index.tsx @@ -1,6 +1,6 @@ import { userApi } from '@/apis/user'; import { IconOnboardingBackground } from '@/assets/IconOnboardingBackground'; -import { SvgIcon } from '@/components/common/SvgIcon'; +import { SvgIcon } from '@/components/common'; import { media } from '@/styles'; import styled from '@emotion/styled'; import { Link } from 'react-router-dom'; @@ -12,7 +12,7 @@ const Onboarding = () => { - + 카카오로 계속하기 diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 0d9802f..472da0e 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -2,7 +2,7 @@ import App from '@/App'; import { LoginLayout } from '@/components/layout'; import Join from '@/pages/join'; import JoinComplete from '@/pages/join/complete'; -import { MeetingRoom } from '@/pages/meetingroom'; +import { MeetingRoom } from '@/pages/meetingRoom'; import Onboarding from '@/pages/onboarding'; import { @@ -37,7 +37,7 @@ const routeChildren: RouteChildren[] = [ auth: false }, { - path: '/meetingroom/:meetingId', + path: '/meeting-room/:meetingId', element: , auth: true } diff --git a/src/store/bottomSheet.ts b/src/store/bottomSheet.ts index 3f67cf4..a890ff6 100644 --- a/src/store/bottomSheet.ts +++ b/src/store/bottomSheet.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ import { ReactNode } from 'react'; import { atom } from 'recoil';