Merge pull request #310 from Bamdoliro/feat/#309

props 컨벤션 통일
Bamdoliro · Aug 22, 2023 · 54f342c · 54f342c
2 parents 6f9dc89 + 29e94e9
commit 54f342c
Show file tree

Hide file tree

Showing 64 changed files with 201 additions and 236 deletions.
diff --git a/apps/admin/src/app/layout.tsx b/apps/admin/src/app/layout.tsx
@@ -6,11 +6,11 @@ export const metadata = {
     description: '부산소프트웨어마이스터고등학교 입학전형 시스템 마루의 어드민 페이지입니다.',
 };
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const RootLayout = ({ children }: PropsType) => {
+const RootLayout = ({ children }: Props) => {
     return (
         <html lang="en">
             <body>

diff --git a/apps/admin/src/components/Provider.tsx b/apps/admin/src/components/Provider.tsx
@@ -3,11 +3,11 @@
 import { GlobalStyle } from '@maru/theme';
 import { ReactNode } from 'react';
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const Provider = ({ children }: PropsType) => {
+const Provider = ({ children }: Props) => {
     return (
         <>
             <GlobalStyle />

diff --git a/apps/admin/src/components/common/ListHeader/ListHeader.tsx b/apps/admin/src/components/common/ListHeader/ListHeader.tsx
@@ -3,11 +3,11 @@ import { flex } from '@maru/utils';
 import { ReactNode } from 'react';
 import { styled } from 'styled-components';
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const ListHeader = ({ children }: PropsType) => {
+const ListHeader = ({ children }: Props) => {
     return <StyledListHeader>{children}</StyledListHeader>;
 };
 

diff --git a/apps/admin/src/components/common/ListItem/ListItem.tsx b/apps/admin/src/components/common/ListItem/ListItem.tsx
@@ -3,11 +3,11 @@ import { flex } from '@maru/utils';
 import { ReactNode } from 'react';
 import { styled } from 'styled-components';
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const ListItem = ({ children }: PropsType) => {
+const ListItem = ({ children }: Props) => {
     return <StyledListItem>{children}</StyledListItem>;
 };
 

diff --git a/apps/admin/src/layouts/AppLayout.tsx b/apps/admin/src/layouts/AppLayout.tsx
@@ -3,11 +3,11 @@ import { flex } from '@maru/utils';
 import { ReactNode } from 'react';
 import { styled } from 'styled-components';
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const AppLayout = ({ children }: PropsType) => {
+const AppLayout = ({ children }: Props) => {
     return (
         <StyledAppLayout>
             <SideBar />
@@ -20,7 +20,7 @@ export default AppLayout;
 
 const StyledAppLayout = styled.div`
     ${flex({ flexDirection: 'row' })}
-    width: 100vw;
+    width: 100%;
     height: 100vh;
 `;
 

diff --git a/apps/user/src/app/layout.tsx b/apps/user/src/app/layout.tsx
@@ -1,17 +1,17 @@
-import { ReactNode } from 'react';
-import QueryClientProvider from '@/services/QueryClientProvider';
 import Provider from '@/components/Provider';
+import QueryClientProvider from '@/services/QueryClientProvider';
+import { ReactNode } from 'react';
 
 export const metadata = {
     title: '마루',
     description: '부산소프트웨어마이스터고등학교 입학전형 시스템 마루입니다',
 };
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const RootLayout = ({ children }: PropsType) => {
+const RootLayout = ({ children }: Props) => {
     return (
         <html lang="en">
             <body>

diff --git a/apps/user/src/app/notice/[id]/page.tsx b/apps/user/src/app/notice/[id]/page.tsx
@@ -12,11 +12,11 @@ import { useRouter } from 'next/navigation';
 import { Suspense } from 'react';
 import styled from 'styled-components';
 
-interface PropsType {
+interface Props {
     params: { id: number };
 }
 
-const NoticeDetailPage = ({ params: { id } }: PropsType) => {
+const NoticeDetailPage = ({ params: { id } }: Props) => {
     const router = useRouter();
 
     return (

diff --git a/apps/user/src/app/signup/page.tsx b/apps/user/src/app/signup/page.tsx
@@ -29,7 +29,7 @@ const SignUpPage = () => {
                     alt="colabo-logo"
                 />
                 <ContentBox>
-                    <SignUpBox enabled={isRequestEmail}>
+                    <SignUpBox>
                         <Column gap={24}>
                             <Text fontType="H2" color={color.gray900}>
                                 회원가입
@@ -114,7 +114,7 @@ const ContentBox = styled.div`
     overflow: auto;
 `;
 
-const SignUpBox = styled.div<{ enabled: boolean }>`
+const SignUpBox = styled.div`
     ${flex({ flexDirection: 'column' })};
     gap: 36px;
     width: 446px;

diff --git a/apps/user/src/components/Provider.tsx b/apps/user/src/components/Provider.tsx
@@ -1,16 +1,16 @@
 'use client';
 
-import { RecoilRoot } from 'recoil';
 import { GlobalStyle } from '@maru/theme';
-import { ReactNode } from 'react';
 import { OverlayProvider } from '@toss/use-overlay';
+import { ReactNode } from 'react';
+import { RecoilRoot } from 'recoil';
 import { AuthWrapper } from './common';
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const Provider = ({ children }: PropsType) => {
+const Provider = ({ children }: Props) => {
     return (
         <RecoilRoot>
             <OverlayProvider>

diff --git a/apps/user/src/components/common/Wrappers/AuthWrapper/AuthWrapper.tsx b/apps/user/src/components/common/Wrappers/AuthWrapper/AuthWrapper.tsx
@@ -11,11 +11,11 @@ import { ReactNode, useEffect } from 'react';
 const NOT_LOGGEDIN_PRIVATE_PAGE: string[] = [ROUTES.FORM, ROUTES.FIRST_RESULT, ROUTES.FINAL_RESULT];
 const LOGGEDIN_PRIVATE_PAGE: string[] = [ROUTES.LOGIN, ROUTES.SIGNUP];
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const AuthWrapper = ({ children }: PropsType) => {
+const AuthWrapper = ({ children }: Props) => {
     const router = useRouter();
     const pathName = usePathname();
     const overlay = useOverlay();

diff --git a/apps/user/src/components/common/Wrappers/FormWrapper/FormWrapper.tsx b/apps/user/src/components/common/Wrappers/FormWrapper/FormWrapper.tsx
@@ -12,11 +12,11 @@ import {
 import { useInterval } from '@toss/react';
 import { ReactNode, useEffect } from 'react';
 
-interface PropsType {
+interface Props {
     children: ReactNode;
 }
 
-const FormWrapper = ({ children }: PropsType) => {
+const FormWrapper = ({ children }: Props) => {
     const { data: saveFormData } = useSaveFormQuery();
     const { saveFormMutate } = useSaveFormMutation();
     const [isSaveFormLoaded, setIsSaveFormLoaded] = useIsSaveFormLoadedStore();

diff --git a/apps/user/src/components/faq/CategoryFilter/Category/Category.tsx b/apps/user/src/components/faq/CategoryFilter/Category/Category.tsx
@@ -3,13 +3,13 @@ import { flex } from '@maru/utils';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
-interface PropsType {
+interface Props {
     children: ReactNode;
     isSelected: boolean;
     onClick: () => void;
 }
 
-const Category = ({ children, isSelected, onClick }: PropsType) => {
+const Category = ({ children, isSelected, onClick }: Props) => {
     return (
         <StyledCategory $isSelected={isSelected} onClick={onClick}>
             {children}
@@ -25,7 +25,7 @@ const StyledCategory = styled.button<{ $isSelected: boolean }>`
     height: 100%;
     padding: 0px 14px;
     border-radius: 25px;
-    color: ${({ $isSelected: isSelected }) => (isSelected ? color.maruDefault : color.gray900)};
-    background-color: ${({ $isSelected: isSelected }) => (isSelected ? '#eff5ff' : color.gray100)};
+    color: ${(props) => (props.$isSelected ? color.maruDefault : color.gray900)};
+    background-color: ${(props) => (props.$isSelected ? '#eff5ff' : color.gray100)};
     cursor: pointer;
 `;
diff --git a/apps/user/src/components/faq/CategoryFilter/CategoryFilter.tsx b/apps/user/src/components/faq/CategoryFilter/CategoryFilter.tsx
@@ -1,8 +1,8 @@
+import { color, font } from '@maru/theme';
+import { flex } from '@maru/utils';
 import { Dispatch, SetStateAction, useState } from 'react';
 import styled from 'styled-components';
 import Category from './Category/Category';
-import { color, font } from '@maru/theme';
-import { flex } from '@maru/utils';
 
 const FAQ_CATEGORY_LIST = [
     { id: 0, category: '질문 TOP', value: 'TOP_QUESTION' },
@@ -11,11 +11,11 @@ const FAQ_CATEGORY_LIST = [
     { id: 3, category: '관련 제출 서류', value: 'SUBMIT_DOCUMENT' },
 ] as const;
 
-interface PropsType {
+interface Props {
     setCategory: Dispatch<SetStateAction<string>>;
 }
 
-const CategoryFilter = ({ setCategory }: PropsType) => {
+const CategoryFilter = ({ setCategory }: Props) => {
     const [selectedCategory, setSelectedCategory] = useState(0);
 
     return (

diff --git a/apps/user/src/components/faq/FaqList/FaqItem/FaqItem.tsx b/apps/user/src/components/faq/FaqList/FaqItem/FaqItem.tsx
@@ -5,12 +5,12 @@ import { flex } from '@maru/utils';
 import { useState } from 'react';
 import styled from 'styled-components';
 
-interface PropsType {
+interface Props {
     title: string;
     content: string;
 }
 
-const FaqItem = ({ content, title }: PropsType) => {
+const FaqItem = ({ content, title }: Props) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (

diff --git a/apps/user/src/components/faq/FaqList/FaqList.tsx b/apps/user/src/components/faq/FaqList/FaqList.tsx
@@ -3,11 +3,11 @@ import { flex } from '@maru/utils';
 import styled from 'styled-components';
 import FaqItem from './FaqItem/FaqItem';
 
-interface PropsType {
+interface Props {
     category: string;
 }
 
-const FaqList = ({ category }: PropsType) => {
+const FaqList = ({ category }: Props) => {
     const { data: faqListData } = useFaqListQuery(category);
 
     return faqListData ? (

diff --git a/...c/components/form/Calculators/GradeCalculator/GradeCalculatorItem/GradeCalculatorItem.tsx b/...c/components/form/Calculators/GradeCalculator/GradeCalculatorItem/GradeCalculatorItem.tsx
@@ -1,17 +1,17 @@
-import { Td, Dropdown } from '@maru/ui';
+import { Subject } from '@/types/form/client';
+import { Dropdown, Td } from '@maru/ui';
 import { flex } from '@maru/utils';
 import { Dispatch, SetStateAction } from 'react';
 import styled from 'styled-components';
-import { Subject } from '@/types/form/client';
 
-interface PropsType {
+interface Props {
     id: number;
     subjectList: Subject[];
     setSubjectList: Dispatch<SetStateAction<Subject[]>>;
     achievementLevels: string[];
 }
 
-const GradeCalculatorItem = ({ id, subjectList, setSubjectList, achievementLevels }: PropsType) => {
+const GradeCalculatorItem = ({ id, subjectList, setSubjectList, achievementLevels }: Props) => {
     const handleCaculatorItemDataChange = (data: string, name: string) => {
         setSubjectList((prev) => {
             const updatedData = [...prev];

diff --git a/...onents/form/Calculators/GradeCalculator/NewGradeCalculatorItem/NewGradeCalculatorItem.tsx b/...onents/form/Calculators/GradeCalculator/NewGradeCalculatorItem/NewGradeCalculatorItem.tsx
@@ -1,11 +1,11 @@
+import { Subject } from '@/types/form/client';
 import { color, font } from '@maru/theme';
-import { Button, Td, Dropdown } from '@maru/ui';
+import { Button, Dropdown, Td } from '@maru/ui';
 import { flex } from '@maru/utils';
 import { ChangeEvent, Dispatch, SetStateAction } from 'react';
-import { Subject } from '@/types/form/client';
 import styled from 'styled-components';
 
-interface PropsType {
+interface Props {
     id: number;
     achievementLevels: string[];
     newSubjectList: Subject[];
@@ -17,7 +17,7 @@ const NewGradeCalculatorItem = ({
     achievementLevels,
     newSubjectList,
     setNewSubjectList,
-}: PropsType) => {
+}: Props) => {
     const newSubjectIndex = newSubjectList.findIndex((item) => item.id === id);
 
     const handleDeleteNewSubjectItemButtonClick = (id: number) => {

diff --git a/apps/user/src/components/form/CheckFormComplete/CheckFormComplete.tsx b/apps/user/src/components/form/CheckFormComplete/CheckFormComplete.tsx
@@ -4,19 +4,14 @@ import { Row, Text } from '@maru/ui';
 import { flex } from '@maru/utils';
 import styled from 'styled-components';
 
-interface PropsType {
+interface Props {
     formStep: string;
     maxCompleteOfNumber: number;
     completeOfNumber: number;
     onClick: () => void;
 }
 
-const CheckFormComplete = ({
-    formStep,
-    maxCompleteOfNumber,
-    completeOfNumber,
-    onClick,
-}: PropsType) => {
+const CheckFormComplete = ({ formStep, maxCompleteOfNumber, completeOfNumber, onClick }: Props) => {
     const isFilledFormStep = maxCompleteOfNumber !== completeOfNumber;
 
     return (

diff --git a/apps/user/src/components/form/CompleteAlaram/CompleteAlaram.tsx b/apps/user/src/components/form/CompleteAlaram/CompleteAlaram.tsx
@@ -2,13 +2,13 @@ import { IconCancelCircle, IconCheckCircle } from '@maru/icon';
 import { color } from '@maru/theme';
 import { Column, Text } from '@maru/ui';
 
-interface PropsType {
+interface Props {
     isComplete: boolean;
     completeText: string;
     inCompleteText?: string;
 }
 
-const CompleteAlaram = ({ isComplete, completeText, inCompleteText }: PropsType) => {
+const CompleteAlaram = ({ isComplete, completeText, inCompleteText }: Props) => {
     return (
         <Column
             style={{ marginTop: '173px' }}

diff --git a/apps/user/src/components/form/DraftFormConfirm/DraftFormConfirm.tsx b/apps/user/src/components/form/DraftFormConfirm/DraftFormConfirm.tsx
@@ -1,13 +1,13 @@
 import { color } from '@maru/theme';
 import { Column, Confirm, Text } from '@maru/ui';
 
-interface PropsType {
+interface Props {
     isOpen: boolean;
     onClose: () => void;
     onConfirm: () => void;
 }
 
-const DraftFormConfirm = ({ isOpen, onClose, onConfirm }: PropsType) => {
+const DraftFormConfirm = ({ isOpen, onClose, onConfirm }: Props) => {
     return (
         <Confirm
             isOpen={isOpen}

diff --git a/apps/user/src/components/form/FinalFormConfirm/FinalFormConfirm.tsx b/apps/user/src/components/form/FinalFormConfirm/FinalFormConfirm.tsx
@@ -1,13 +1,13 @@
 import { color } from '@maru/theme';
 import { Column, Confirm, Text } from '@maru/ui';
 
-interface PropsType {
+interface Props {
     isOpen: boolean;
     onClose: () => void;
     onConfirm: () => void;
 }
 
-const FinalFormConfirm = ({ isOpen, onClose, onConfirm }: PropsType) => {
+const FinalFormConfirm = ({ isOpen, onClose, onConfirm }: Props) => {
     return (
         <Confirm
             isOpen={isOpen}