refactor(constants): 체계 정리, 파일 네이밍 컨벤션 camelCase (#275)

* refactor(constants): 체계 정리, 파일 네이밍 컨벤션 camelCase

* refactor(constants): tmp 제거

파일명의 대소문자 변화는 git에서 인식하지 못합니다.

app/src/@core/AppRoutes.tsx

@@ -6,7 +6,7 @@ import { ProfileVersusPageSkeleton } from '@/Profile/components/skeletons/Profil
 import { UserProfileSkeleton } from '@/Profile/components/skeletons/UserProfileSkeleton';
 import { AuthGuard } from '@core/guards/AuthGuard';
 import { UnAuthGuard } from '@core/guards/UnAuthGuard';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { DeferredComponent } from '@shared/ui-kit';
 import { Suspense, lazy } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';

app/src/@core/components/Footer/index.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactComponent as GithubLogo } from '@shared/assets/logo/github-logo.svg';
-import { ARIA_LABEL_LINK } from '@shared/constants/accessibility/ARIA_LABEL';
+import { ARIA_LABEL } from '@shared/constants/accessibility';
 import { CaptionText, HStack } from '@shared/ui-kit';
 import { Link } from 'react-router-dom';
 
@@ -18,7 +18,7 @@ export const Footer = () => {
           to="https://github.com/orgs/42Statistics/repositories"
           target="_blank"
           rel="noreferrer"
-          aria-label={ARIA_LABEL_LINK.STAT_GITHUB}
+          aria-label={ARIA_LABEL.LINK.STAT_GITHUB}
         >
           <GithubLogo width={16} height={16} fill={theme.colors.mono.gray500} />
         </Link>

app/src/@core/components/Header/Mobile/index.tsx

@@ -1,7 +1,7 @@
 import { SearchBarShapeButton } from '@core/components/SearchBarShapeButton';
 import styled from '@emotion/styled';
 import { AppLogoTitle } from '@shared/components/AppLogoTitle';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { VStack } from '@shared/ui-kit';
 import { Link } from 'react-router-dom';
 

app/src/@core/components/Modal/ReLoginDialog.tsx

@@ -1,5 +1,5 @@
 import { reLoginDialogInfoAtom } from '@core/atoms/reLoginDialogInfoAtom';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { AlertDialog } from '@shared/ui-kit';
 import { clearStorage } from '@shared/utils/storage/clearStorage';
 import { useAtom } from 'jotai';

app/src/@core/components/NavBar/Desktop/index.tsx

@@ -3,8 +3,8 @@ import { SearchBarShapeButton } from '@core/components/SearchBarShapeButton';
 import styled from '@emotion/styled';
 import { userAtom } from '@shared/atoms/userAtom';
 import { AppLogoTitle } from '@shared/components/AppLogoTitle';
-import { ROUTES } from '@shared/constants/ROUTES';
-import { ARIA_LABEL_LINK } from '@shared/constants/accessibility/ARIA_LABEL';
+import { ARIA_LABEL } from '@shared/constants/accessibility';
+import { ROUTES } from '@shared/constants/routes';
 import { VStack } from '@shared/ui-kit';
 import { useAtomValue } from 'jotai';
 import { Link } from 'react-router-dom';
@@ -20,7 +20,7 @@ export const DesktopNavBar = ({ fixed = true }: DesktopNavBarProps) => {
   return (
     <Layout fixed={fixed}>
       <VStack w="100%" h="100%" spacing="4rem">
-        <Link to={ROUTES.HOME} aria-label={ARIA_LABEL_LINK.STAT}>
+        <Link to={ROUTES.HOME} aria-label={ARIA_LABEL.LINK.STAT}>
           <AppLogoTitle size="sm" />
         </Link>
         <DesktopNavProfile

app/src/@core/components/NavBar/Tablet/index.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactComponent as MdSearch } from '@shared/assets/icon/md-search.svg';
 import { userAtom } from '@shared/atoms/userAtom';
-import { ARIA_LABEL_BUTTON } from '@shared/constants/accessibility/ARIA_LABEL';
+import { ARIA_LABEL } from '@shared/constants/accessibility';
 import { Center, Clickable, VStack } from '@shared/ui-kit';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { TabletNavDrawer } from './TabletNavDrawer';
@@ -28,7 +28,7 @@ export const TabletNavBar = () => {
         </Center>
         <Clickable
           onClick={openSpotlight}
-          aria-label={ARIA_LABEL_BUTTON.SEARCH_USER_OR_PROJECT_USING_SPOTLIGHT}
+          aria-label={ARIA_LABEL.BUTTON.SEARCH_USER_OR_PROJECT_USING_SPOTLIGHT}
         >
           <MdSearch width={20} height={20} fill={theme.colors.mono.black} />
         </Clickable>

app/src/@core/components/NavBar/hooks/useNavRoutes.ts

@@ -9,7 +9,7 @@ import { ReactComponent as MdQuickReference } from '@shared/assets/icon/md-quick
 import { ReactComponent as MdSettingsFill } from '@shared/assets/icon/md-settings-fill.svg';
 import { ReactComponent as MdSettings } from '@shared/assets/icon/md-settings.svg';
 import { userAtom } from '@shared/atoms/userAtom';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import type { SvgElement } from '@shared/types/SvgElement';
 import { useAtomValue } from 'jotai';
 

app/src/@core/components/NavProfile/Desktop/index.tsx

@@ -1,9 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { userAtom } from '@shared/atoms/userAtom';
-import { ALT } from '@shared/constants/accessibility/ALT';
-import { ARIA_LABEL_LINK } from '@shared/constants/accessibility/ARIA_LABEL';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ALT, ARIA_LABEL } from '@shared/constants/accessibility';
+import { ROUTES } from '@shared/constants/routes';
 import {
   Avatar,
   CaptionText,
@@ -33,7 +32,7 @@ export const DesktopNavProfile = ({
     <Link
       to={ROUTES.PROFILE_OF(user.login)}
       style={{ width: '100%' }}
-      aria-label={ARIA_LABEL_LINK.PROFILE_OF(user.login)}
+      aria-label={ARIA_LABEL.LINK.PROFILE_OF(user.login)}
     >
       <Layout>
         <HStack w="100%" spacing="2rem">

app/src/@core/components/NavProfile/Tablet/index.tsx

@@ -1,6 +1,6 @@
 import { userAtom } from '@shared/atoms/userAtom';
-import { ROUTES } from '@shared/constants/ROUTES';
-import { ALT } from '@shared/constants/accessibility/ALT';
+import { ALT } from '@shared/constants/accessibility';
+import { ROUTES } from '@shared/constants/routes';
 import { Avatar } from '@shared/ui-kit';
 import { useAtomValue } from 'jotai';
 import { Link } from 'react-router-dom';

app/src/@core/components/SearchBarShapeButton/index.tsx

@@ -2,7 +2,7 @@ import { isSpotlightOpenAtom } from '@core/atoms/isSpotlightOpenAtom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactComponent as MdSearch } from '@shared/assets/icon/md-search.svg';
-import { ARIA_LABEL_BUTTON } from '@shared/constants/accessibility/ARIA_LABEL';
+import { ARIA_LABEL } from '@shared/constants/accessibility';
 import { CaptionText, Clickable, HStack, Spacer, Text } from '@shared/ui-kit';
 import { mq } from '@shared/utils/facepaint/mq';
 import { detect } from 'detect-browser';
@@ -21,7 +21,7 @@ export const SearchBarShapeButton = () => {
   return (
     <Layout
       onClick={openSpotlight}
-      aria-label={ARIA_LABEL_BUTTON.SEARCH_USER_OR_PROJECT_USING_SPOTLIGHT}
+      aria-label={ARIA_LABEL.BUTTON.SEARCH_USER_OR_PROJECT_USING_SPOTLIGHT}
     >
       <HStack w="100%" justify="start" spacing="1.6rem">
         <MdSearch width={18} height={18} fill={theme.colors.mono.gray500} />

app/src/@core/components/Spotlight/SpotlightProjectListItem.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { ProjectPreview } from '@shared/__generated__/graphql';
 import { ReactComponent as FtLogo } from '@shared/assets/logo/ft-logo.svg';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { SpotlightListItem } from './SpotlightListItem';
 
 type SpotlightProjectListItemProps = {

app/src/@core/components/Spotlight/SpotlightUserListItem.tsx

@@ -1,6 +1,6 @@
 import { UserPreview } from '@shared/__generated__/graphql';
-import { ROUTES } from '@shared/constants/ROUTES';
-import { ALT } from '@shared/constants/accessibility/ALT';
+import { ALT } from '@shared/constants/accessibility';
+import { ROUTES } from '@shared/constants/routes';
 import { Avatar } from '@shared/ui-kit';
 import { SpotlightListItem } from './SpotlightListItem';
 

app/src/@core/guards/AuthGuard.tsx

@@ -1,5 +1,5 @@
 import { useAuth } from '@core/guards/hooks/useAuth';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { Navigate, Outlet } from 'react-router-dom';
 
 export const AuthGuard = () => {

app/src/@core/guards/UnAuthGuard.tsx

@@ -1,5 +1,5 @@
 import { useAuth } from '@core/guards/hooks/useAuth';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { Navigate, Outlet } from 'react-router-dom';
 
 export const UnAuthGuard = () => {

app/src/@shared/atoms/themePreferenceAtom.ts

@@ -1,8 +1,9 @@
+import { LOCAL_STORAGE_KEYS } from '@shared/constants/storage';
 import { atomWithStorage } from 'jotai/utils';
 
 export type ThemePreference = 'light' | 'dark' | 'system';
 
 export const themePreferenceAtom = atomWithStorage<ThemePreference>(
-  'theme_preference',
+  LOCAL_STORAGE_KEYS.THEME_PREFERENCE,
   'light',
 );

app/src/@shared/components/CoalitionMark.tsx

@@ -6,7 +6,7 @@ import coalition_gon_mark from '@shared/assets/coalition/mark/coalition-gon-mark
 import coalition_gun_mark from '@shared/assets/coalition/mark/coalition-gun-mark.svg';
 import coalition_lee_mark from '@shared/assets/coalition/mark/coalition-lee-mark.svg';
 import ft_logo from '@shared/assets/logo/ft-logo.svg';
-import { ALT } from '@shared/constants/accessibility/ALT';
+import { ALT } from '@shared/constants/accessibility';
 import { Image } from '@shared/ui-kit';
 
 type CoalitionMarkProps = {

app/src/@shared/components/DashboardContentView/Rank/ProjectRankListItem.tsx

@@ -1,5 +1,5 @@
 import { ProjectRank } from '@shared/__generated__/graphql';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { RankListItem } from './RankListItem';
 
 type ProjectRankListItemProps = {

app/src/@shared/components/DashboardContentView/Rank/UserRankListItem.tsx

@@ -1,6 +1,6 @@
 import { UserRank } from '@shared/__generated__/graphql';
-import { ROUTES } from '@shared/constants/ROUTES';
-import { ALT } from '@shared/constants/accessibility/ALT';
+import { ALT } from '@shared/constants/accessibility';
+import { ROUTES } from '@shared/constants/routes';
 import { Avatar } from '@shared/ui-kit';
 import { RankListItem } from './RankListItem';
 

app/src/@shared/components/DashboardContentView/Text/TextProject.tsx

@@ -1,4 +1,4 @@
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { TextDefault } from './TextDefault';
 
 type TextProjectProps = {

app/src/@shared/components/EvalLogList/EvalLogListItemTitle.tsx

@@ -2,7 +2,7 @@ import {
   EvalLogHeader,
   TeamEvalLogHeader,
 } from '@shared/__generated__/graphql';
-import { ROUTES } from '@shared/constants/ROUTES';
+import { ROUTES } from '@shared/constants/routes';
 import { BoldText, HStack, PrimaryBoldText, Text } from '@shared/ui-kit';
 import dayjs from 'dayjs';
 import { Link } from 'react-router-dom';

app/src/@shared/components/LoginButton/FtLoginButton.tsx

@@ -1,25 +1,22 @@
 import { useTheme } from '@emotion/react';
 import { ReactComponent as FtLogo } from '@shared/assets/logo/ft-logo.svg';
-import {
-  FT_OAUTH_ENDPOINT,
-  FT_OAUTH_RESPONSE_TYPE,
-} from '@shared/constants/FT_OAUTH';
-import { ARIA_LABEL_BUTTON } from '@shared/constants/accessibility/ARIA_LABEL';
+import { ARIA_LABEL } from '@shared/constants/accessibility';
+import { URL } from '@shared/constants/url';
 import { LoginButton } from './LoginButton';
 
 export const FtLoginButton = () => {
   const theme = useTheme();
   const params = new URLSearchParams();
   params.append('client_id', import.meta.env.VITE_FT_OAUTH_CLIENT_ID);
   params.append('redirect_uri', import.meta.env.VITE_FT_OAUTH_REDIRECT_URI);
-  params.append('response_type', FT_OAUTH_RESPONSE_TYPE);
-  const FT_OAUTH_URL = `${FT_OAUTH_ENDPOINT}?${params.toString()}`;
+  params.append('response_type', 'code');
+  const FT_OAUTH_URL = `${URL.FT_OAUTH_ENDPOINT}?${params.toString()}`;
 
   return (
     <LoginButton
       logo={<FtLogo width={18} height={18} fill={theme.colors.mono.black} />}
       text="42 계정으로 로그인"
-      ariaLabel={ARIA_LABEL_BUTTON.LOGIN_WITH_42_ACCOUNT}
+      ariaLabel={ARIA_LABEL.BUTTON.LOGIN_WITH_42_ACCOUNT}
       onClick={() => {
         window.location.href = FT_OAUTH_URL;
       }}

app/src/@shared/components/LoginButton/GoogleLoginButton.tsx

@@ -1,9 +1,9 @@
 import { useMutation } from '@apollo/client';
 import { gql } from '@shared/__generated__';
 import { ReactComponent as GoogleLogo } from '@shared/assets/logo/google-logo.svg';
-import { GAPI_URL } from '@shared/constants/GAPI';
-import { ROUTES } from '@shared/constants/ROUTES';
-import { ARIA_LABEL_BUTTON } from '@shared/constants/accessibility/ARIA_LABEL';
+import { ARIA_LABEL } from '@shared/constants/accessibility';
+import { ROUTES } from '@shared/constants/routes';
+import { URL } from '@shared/constants/url';
 import {
   FakeGoogleWrapperType,
   createFakeGoogleWrapper,
@@ -37,7 +37,7 @@ export const GOOGLE_LOGIN = gql(/* GraphQL */ `
 `);
 
 export const GoogleLoginButton = () => {
-  const status = useScript(GAPI_URL, { removeOnUnmount: true });
+  const status = useScript(URL.GAPI, { removeOnUnmount: true });
   const [login, { data, loading, error }] = useMutation(GOOGLE_LOGIN);
   const [googleButtonWrapper, setGoogleButtonWrapper] =
     useState<FakeGoogleWrapperType>();
@@ -88,7 +88,7 @@ export const GoogleLoginButton = () => {
     <LoginButton
       logo={<GoogleLogo width={18} height={18} />}
       text="Google 계정으로 로그인"
-      ariaLabel={ARIA_LABEL_BUTTON.LOGIN_WITH_GOOGLE_ACCOUNT}
+      ariaLabel={ARIA_LABEL.BUTTON.LOGIN_WITH_GOOGLE_ACCOUNT}
       onClick={() => googleButtonWrapper?.click()}
     />
   );

app/src/@shared/components/Pagination/PageButton.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ARIA_LABEL_BUTTON } from '@shared/constants/accessibility/ARIA_LABEL';
+import { ARIA_LABEL } from '@shared/constants/accessibility';
 import { Clickable, Text } from '@shared/ui-kit';
 
 type PageButtonProps = {
@@ -28,8 +28,8 @@ export const PageButton = ({
       onClick={handleClick}
       aria-label={
         pageNumber !== currPageNumber
-          ? ARIA_LABEL_BUTTON.PAGINATION.PAGE_OF(pageNumber)
-          : ARIA_LABEL_BUTTON.PAGINATION.CURRENT_PAGE_OF(pageNumber)
+          ? ARIA_LABEL.BUTTON.PAGINATION.PAGE_OF(pageNumber)
+          : ARIA_LABEL.BUTTON.PAGINATION.CURRENT_PAGE_OF(pageNumber)
       }
     >
       <Text

app/src/@shared/components/Pagination/index.tsx

@@ -3,7 +3,7 @@ import { ReactComponent as MdChevronLeft } from '@shared/assets/icon/md-chevron-
 import { ReactComponent as MdChevronRight } from '@shared/assets/icon/md-chevron-right.svg';
 import { ReactComponent as MdFirstPage } from '@shared/assets/icon/md-first-page.svg';
 import { ReactComponent as MdLastPage } from '@shared/assets/icon/md-last-page.svg';
-import { ARIA_LABEL_BUTTON } from '@shared/constants/accessibility/ARIA_LABEL';
+import { ARIA_LABEL } from '@shared/constants/accessibility';
 import { Clickable, HStack } from '@shared/ui-kit';
 import { PageButton } from './PageButton';
 
@@ -61,15 +61,15 @@ export const Pagination = ({
       {isStartButtonDisabled ? null : (
         <Clickable
           onClick={handleClickStartButton}
-          aria-label={ARIA_LABEL_BUTTON.PAGINATION.FIRST_PAGE}
+          aria-label={ARIA_LABEL.BUTTON.PAGINATION.FIRST_PAGE}
         >
           <MdFirstPage width={16} height={16} fill={theme.colors.mono.black} />
         </Clickable>
       )}
       {isBackButtonDisabled ? null : (
         <Clickable
           onClick={handleClickBackButton}
-          aria-label={ARIA_LABEL_BUTTON.PAGINATION.PREVIOUS_PAGE_GROUP}
+          aria-label={ARIA_LABEL.BUTTON.PAGINATION.PREVIOUS_PAGE_GROUP}
         >
           <MdChevronLeft
             width={16}
@@ -91,7 +91,7 @@ export const Pagination = ({
       {isForwardButtonDisabled ? null : (
         <Clickable
           onClick={handleClickForwardButton}
-          aria-label={ARIA_LABEL_BUTTON.PAGINATION.NEXT_PAGE_GROUP}
+          aria-label={ARIA_LABEL.BUTTON.PAGINATION.NEXT_PAGE_GROUP}
         >
           <MdChevronRight
             width={16}
@@ -103,7 +103,7 @@ export const Pagination = ({
       {isEndButtonDisabled ? null : (
         <Clickable
           onClick={handleClickEndButton}
-          aria-label={ARIA_LABEL_BUTTON.PAGINATION.LAST_PAGE}
+          aria-label={ARIA_LABEL.BUTTON.PAGINATION.LAST_PAGE}
         >
           <MdLastPage width={16} height={16} fill={theme.colors.mono.black} />
         </Clickable>

app/src/@shared/constants/accessibility.ts

@@ -0,0 +1,33 @@
+export const ALT = {
+  AVATAR_OF: (login: string) => `${login} 사진`,
+  COALITION_LOGO_OF: (name: string) => `코알리숑 ${name} 로고`,
+  LOGO_42: '42 로고',
+  POKEMON_OF: (name: string) => `포켓몬 ${name}`,
+  POKEMON_NOT_FOUND: '포켓몬을 찾을 수 없습니다',
+} as const;
+
+export const ARIA_LABEL = {
+  LINK: {
+    STAT: '42 Stat',
+    HOME: '홈',
+    STAT_GITHUB: '42 Stat 깃허브',
+    PROFILE_OF: (login: string) => `${login} 프로필`,
+  } as const,
+  BUTTON: {
+    LOGIN_WITH_42_ACCOUNT: '42 계정으로 로그인',
+    LOGIN_WITH_GOOGLE_ACCOUNT: '구글 계정으로 로그인',
+    SEARCH_USER_OR_PROJECT_USING_SPOTLIGHT:
+      '스포트라이트를 이용해 유저나 프로젝트 검색',
+    PAGINATION: {
+      FIRST_PAGE: '첫 페이지',
+      PREVIOUS_PAGE_GROUP: '이전 페이지 그룹',
+      NEXT_PAGE_GROUP: '다음 페이지 그룹',
+      LAST_PAGE: '마지막 페이지',
+      PAGE_OF: (page: number) => `${page} 페이지`,
+      CURRENT_PAGE_OF: (page: number) => `현재 ${page} 페이지`,
+    } as const,
+    SEARCH_EVAL_LOGS: '평가 로그 검색',
+    LINK_WITH: (provider: string) => `${provider} 계정으로 연결`,
+    UNLINK_WITH: (provider: string) => `${provider} 계정 연결 해제`,
+  } as const,
+} as const;