refactor: add type annotation to functions

src/components/Button.tsx

@@ -1,11 +1,12 @@
 import { Button as MUIButton } from "@mui/material";
+import type { FC } from "react";
 
-type props = {
+type Props = {
   text: string;
   isPrimary: boolean;
   onClick?: () => void;
 };
-export const Button = ({ text, isPrimary, onClick }: props) => {
+export const Button: FC<Props> = ({ text, isPrimary, onClick }) => {
   return (
     <MUIButton
       fullWidth

src/components/EventMakePage/DateRangePicker/CalenderBody.tsx

@@ -6,7 +6,7 @@ import type { CalenderItemType } from "@/@types/calender";
 
 import { DayCell } from "./DayCell";
 
-type props = {
+type Props = {
   calenderArray: CalenderItemType[][];
   handleSelectDay: (day: Dayjs) => void;
   isUndefinedSelectedDay: boolean;
@@ -25,7 +25,7 @@ export const CalenderBody = ({
   handleSelectDay,
   isUndefinedSelectedDay,
   isSameDay,
-}: props) => {
+}: Props) => {
   return (
     <Stack>
       {calenderArray.map((week, index) => {

src/components/EventMakePage/DateRangePicker/CalenderControlHeader.tsx

@@ -3,7 +3,7 @@ import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { Grid, IconButton, Typography } from "@mui/material";
 import { Stack } from "@mui/system";
 
-type props = {
+type Props = {
   headerLabel: string;
   addMonth: () => void;
   subtractMonth: () => void;
@@ -20,7 +20,7 @@ export const CalenderControlHeader = ({
   headerLabel,
   addMonth,
   subtractMonth,
-}: props) => {
+}: Props) => {
   return (
     <Grid container columns={7} alignItems="center">
       <Grid item xs={3}>

src/components/EventMakePage/DateRangePicker/DateRangePicker.tsx

@@ -10,7 +10,7 @@ import { CalenderBody } from "./CalenderBody";
 import { CalenderControlHeader } from "./CalenderControlHeader";
 import { CalenderHeader } from "./CalenderHeader";
 
-type props = {
+type Props = {
   startDay: Dayjs | undefined;
   endDay: Dayjs | undefined;
   setStartDay: (newValue: Dayjs | undefined) => void;
@@ -30,7 +30,7 @@ export const DateRangePicker = ({
   endDay,
   setStartDay,
   setEndDay,
-}: props) => {
+}: Props) => {
   const { nowDate, dateArrayByWeek, addMonth, subtractMonth } =
     useCalenderControl();
 

src/components/EventMakePage/DateRangePicker/DayCell.tsx

@@ -9,7 +9,7 @@ import { theme } from "@/theme/theme";
 
 const PRIMARYLIGHT = theme.palette.primary.light;
 
-type props = {
+type Props = {
   calenderItem: CalenderItemType;
   handleSelectDay: (day: Dayjs) => void;
   isUndefinedSelectedDay: boolean;
@@ -28,7 +28,7 @@ export const DayCell = ({
   handleSelectDay,
   isUndefinedSelectedDay,
   isSameDay,
-}: props) => {
+}: Props) => {
   const { day, isThisMonthDay, isStarted, isEnded, isBetween } = calenderItem;
   const isSelected = isStarted || isEnded;
 

src/components/EventMakePage/InputSchedule.tsx

@@ -17,7 +17,7 @@ import type { IEventTimeDuration } from "@/@types/api/event";
 
 import Styles from "../GuestPage/GuestPageBody.module.scss";
 
-type props = {
+type Props = {
   eventTimeDuration: IEventTimeDuration;
   checkList: Record<string, boolean>;
   setCheckList: (checkList: Record<string, boolean>) => void;
@@ -27,7 +27,7 @@ export const InputSchedule = ({
   checkList,
   setCheckList,
   eventTimeDuration,
-}: props) => {
+}: Props) => {
   dayjs.locale("ja");
   return (
     <TableContainer>

src/components/EventMakePage/TimeSelect.tsx

@@ -7,7 +7,7 @@ const timeList = [
   23, 24,
 ];
 
-type props = {
+type Props = {
   time: number;
   handleTime: (time: number) => void;
   underTime?: number;
@@ -20,7 +20,7 @@ type props = {
  *  @param handleTime 時間を更新するhandler
  *  @param underTime 以下の時間を選択できないようにする
  */
-export const TimeSelect = ({ time, handleTime, underTime }: props) => {
+export const TimeSelect = ({ time, handleTime, underTime }: Props) => {
   // 開始時間よりも前の時間を選択できないようにする
   const editTimeList = underTime
     ? timeList.filter((item) => {

src/components/GuestPage/GuestPageBody.tsx

@@ -32,7 +32,7 @@ import { Button } from "../Button";
 import Styles from "./GuestPageBody.module.scss";
 import { UserCalender } from "./UserCalender";
 
-type props = {
+type Props = {
   event: IEvent;
 };
 
@@ -45,7 +45,7 @@ export type IAnswerList = {
   };
 };
 
-const GuestPageBody = ({ event }: props) => {
+const GuestPageBody = ({ event }: Props) => {
   const router = useRouter();
   const { user } = useUser();
   const { calendars } = useCalendars();

src/components/GuestPage/UserCalender.tsx

@@ -8,7 +8,7 @@ import { useState } from "react";
 import type { UserCalendarItem, UserCalendarProvider } from "@/@types/calender";
 import { date2time } from "@/libraries/time";
 
-type props = {
+type Props = {
   calendars: UserCalendarProvider[];
 };
 
@@ -19,7 +19,7 @@ for (let i = 0; i < 30; i++) {
   );
 }
 
-export const UserCalender = ({ calendars }: props) => {
+export const UserCalender = ({ calendars }: Props) => {
   const schedules = groupScheduleByDate(calendars);
   const [CalenderBarOpen, setCalenderBarOpen] = useState<boolean>(true);
   return (

src/components/Header/Header.tsx

@@ -13,11 +13,11 @@ import { useState } from "react";
 import { Login } from "@/components/login";
 import { useUser } from "@/hooks/user";
 
-type props = {
+type Props = {
   type?: "primary" | "secondary";
 };
 
-export const Header = ({ type = "primary" }: props) => {
+export const Header = ({ type = "primary" }: Props) => {
   const router = useRouter();
   const [loginModalActive, setLoginModalActive] = useState(false);
   const { user, logout } = useUser();

src/components/TopPage/ListButton.tsx

@@ -1,12 +1,12 @@
 import { Button, Stack, Typography } from "@mui/material";
 import { useRouter } from "next/router";
 
-type props = {
+type Props = {
   text: string;
   page: string;
 };
 
-const ListButton = ({ text, page }: props) => {
+const ListButton = ({ text, page }: Props) => {
   const router = useRouter();
   return (
     <Stack

src/components/TopPage/VerticalCard.tsx

@@ -3,12 +3,12 @@ import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import { Button } from "@mui/material";
 import { Stack } from "@mui/system";
 
-type props = {
+type Props = {
   isUp: boolean;
   onClick: (isUp: boolean) => void;
 };
 
-export const VerticalCard = ({ isUp, onClick }: props) => {
+export const VerticalCard = ({ isUp, onClick }: Props) => {
   return (
     <Stack
       sx={{

src/components/common/PageTitle.tsx

@@ -1,11 +1,11 @@
 import { Typography } from "@mui/material";
 import type { ReactNode } from "react";
 
-type props = {
+type Props = {
   children: ReactNode;
 };
 
-export const PageTitle = ({ children }: props) => {
+export const PageTitle = ({ children }: Props) => {
   return (
     <Typography variant="h5" sx={{ textAlign: "center" }}>
       {children}

src/components/detailPage/detailPageBody.tsx

@@ -24,7 +24,7 @@ import type {
 import { Button } from "@/components/Button";
 import { groupAnswerByStartsTime } from "@/libraries/event";
 import { getEventStorage } from "@/libraries/eventStorage";
-type props = {
+type Props = {
   event: IEventResponse;
 };
 
@@ -34,7 +34,7 @@ const availabilityMap: { [availability in IAvailability]: string } = {
   maybe: "不明",
 };
 
-const DetailPageBody = ({ event }: props) => {
+const DetailPageBody = ({ event }: Props) => {
   const router = useRouter();
   const isAnswered = getEventStorage().reduce(
     (pv: boolean, val) => (val.yourAnswerId && val.id === event.id) || pv,

src/components/login/login.tsx

@@ -6,11 +6,11 @@ import { API_ENDPOINT, CALLBACK_URL_KEY } from "@/libraries/env";
 
 import Styles from "./login.module.scss";
 
-type props = {
+type Props = {
   onClose: () => void;
 };
 
-const Login = ({ onClose }: props) => {
+const Login = ({ onClose }: Props) => {
   const onClick = (service: AuthorizationService) => {
     localStorage.setItem(CALLBACK_URL_KEY, location.pathname);
     location.href = `${API_ENDPOINT}/oauth2/${service.id}`;

src/hooks/calendars.ts

@@ -20,7 +20,7 @@ const useCalendars = (): {
     UserCalendarResponseProvider[] | undefined
   >(undefined);
 
-  const updateCalendars = () => {
+  const updateCalendars = (): void => {
     void (async () => {
       const calendars = await requests<
         IRequestResult<UserCalendarResponseProvider[]>

src/hooks/event.ts

@@ -5,10 +5,15 @@ import type { IRequestError, IRequestResult } from "@/@types/api/request";
 import { requests } from "@/libraries/requests";
 import { typeGuard } from "@/libraries/typeGuard";
 
-const useEvent = (eventId: string) => {
+const useEvent = (
+  eventId: string,
+): {
+  event: IEventResponse | undefined;
+  error: IRequestError | undefined;
+} => {
   const [event, setEvent] = useState<IEventResponse | undefined>(undefined);
   const [error, setError] = useState<IRequestError | undefined>(undefined);
-  const update = async () => {
+  const update = async (): Promise<void> => {
     const res = await requests<IRequestResult<IEventResponse>>(
       `/events/${eventId}`,
     );

src/hooks/useCalenderControl.ts

@@ -45,10 +45,10 @@ export const useCalenderControl = (): CalenderControlType => {
    * - addMonth: 1ヶ月後
    * - subtractMonth: 1ヶ月前
    */
-  const addMonth = () => {
+  const addMonth = (): void => {
     setMonthPosition(MonthPosition + 1);
   };
-  const subtractMonth = () => {
+  const subtractMonth = (): void => {
     setMonthPosition(MonthPosition - 1);
   };
 

src/hooks/user.ts

@@ -7,7 +7,7 @@ import { requests } from "@/libraries/requests";
 const useUser = (): { user?: User; logout: () => void; update: () => void } => {
   const [user, setUser] = useState<User | undefined>();
   const ref = useRef(false);
-  const update = () => {
+  const update = (): void => {
     void (async () => {
       setUser(await getUser());
     })();
@@ -17,7 +17,7 @@ const useUser = (): { user?: User; logout: () => void; update: () => void } => {
     ref.current = true;
     update();
   }, []);
-  const logout = () => {
+  const logout = (): void => {
     void requests("/logout", { method: "POST" }).then(() => {
       location.reload();
     });

src/libraries/eventStorage.ts

@@ -1,7 +1,7 @@
 import type { IEvent } from "@/@types/api/event";
 import { mockEventList } from "@/components/TopPage/data";
 
-const setEventStorage = (event: IEvent) => {
+const setEventStorage = (event: IEvent): void => {
   const eventList = JSON.parse(
     localStorage.getItem("event-list") ?? "[]",
   ) as IEvent[];
@@ -20,7 +20,7 @@ const setEventStorage = (event: IEvent) => {
   localStorage.setItem("event-list", JSON.stringify(eventList));
 };
 
-const getEventStorage = () => {
+const getEventStorage = (): IEvent[] => {
   const data = localStorage.getItem("event-list");
   if (!data) {
     return process.env.NODE_ENV === "production" ? [] : mockEventList;

src/libraries/proposedStartTime.ts

@@ -8,7 +8,7 @@ export const createProposedStartTimeList = (
   duration: number,
   startTime: number,
   endTime: number,
-) => {
+): string[] => {
   if (startDate === undefined || endDate === undefined) {
     return [];
   }

src/libraries/uuid.ts

@@ -1,6 +1,6 @@
 import type { UUID } from "@/@types/brands";
 
-const generateUuid = () => {
+const generateUuid = (): UUID => {
   // https://github.com/GoogleChrome/chrome-platform-analytics/blob/master/src/internal/identifier.js
   // const FORMAT: string = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
   const chars = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".split("");

src/pages/_app.tsx

@@ -5,11 +5,12 @@ import type { AppProps } from "next/app";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { SnackbarProvider } from "notistack";
+import type { FC } from "react";
 
 import { Header } from "@/components/Header/Header";
 import { theme } from "@/theme/theme";
 
-function App({ Component, pageProps }: AppProps) {
+const App: FC<AppProps> = ({ Component, pageProps }) => {
   const router = useRouter();
 
   const headerType = (() => {
@@ -34,10 +35,6 @@ function App({ Component, pageProps }: AppProps) {
         <link rel="icon" type="image/png" sizes="64x64" href="/favicon.ico" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Quicksand&display=swap"
-          rel="stylesheet"
-        />
       </Head>
       <ThemeProvider theme={theme}>
         <SnackbarProvider>
@@ -48,6 +45,6 @@ function App({ Component, pageProps }: AppProps) {
       </ThemeProvider>
     </>
   );
-}
+};
 
 export default App;

src/pages/_document.tsx

@@ -1,15 +1,21 @@
 import { Head, Html, Main, NextScript } from "next/document";
+import type { FC } from "react";
 
-function Document() {
+const Document: FC = () => {
   return (
     <Html lang="ja">
-      <Head />
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Quicksand&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
-}
+};
 
 export default Document;