🛠️ refactor: 파일 컨벤션 (#35)

* 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

@@ -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 },

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) =>

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;

src/components/common/Input.tsx → 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';
 

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;

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';

src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export * from './Layout';
+export * from './LoginLayout';

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 {

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';

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';

src/components/meetingRoom/index.ts

@@ -0,0 +1,4 @@
+export * from './timer/Timer';
+export * from './AgendaCard';
+export * from './MeetingCard';
+export * from './TimeLineButton';

src/components/timer/Timer.tsx → 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

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: {

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';

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 {

src/pages/meetingroom/index.tsx → 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';

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 = () => {
         <IconOnboardingBackground />
       </StyledGraphic>
 
-      <Link to={userApi.kakaoLogin}>
+      <Link to={userApi.GET_KAKAO_LOGIN}>
         <StyledButton>
           <SvgIcon id="kakao" /> 카카오로 계속하기
         </StyledButton>

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: <MeetingRoom />,
     auth: true
   }

src/store/bottomSheet.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ReactNode } from 'react';
 import { atom } from 'recoil';