Merge branch 'develop' of https://github.com/KEEPER31337/Homepage-Fro…

…nt-R2 into feature/도서검색_ui_구현_#369

# Conflicts:
#	src/router/useMainRouter.tsx

.github/workflows/eslint-on-pr.yml

@@ -0,0 +1,27 @@
+name: EsLint On PR
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.x ]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install, build, and test
+        run: |
+          npm ci
+          npx eslint .
+        env:
+          CI: true

package.json

@@ -3,22 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@material-tailwind/react": "^1.2.5",
-    "@mui/material": "^5.11.6",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.0",
     "@mui/x-date-pickers": "^5.0.18",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@toast-ui/editor": "^3.2.2",
+    "@toast-ui/react-editor": "^3.2.3",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.3",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.1",
     "axios": "^1.3.2",
     "luxon": "^3.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.44.1",
     "react-icons": "^4.7.1",

src/api/dto.ts

@@ -79,3 +79,14 @@ export interface SignUpInfo {
 export interface SignUpDuplication {
   duplicate: boolean;
 }
+
+export interface CommentInfo {
+  commentId: number;
+  writerName: string;
+  writerThumbnailPath: string | null;
+  content: string;
+  registerTime: string;
+  parentId: number | null;
+  likeCount: number;
+  dislikeCount: number;
+}

src/api/logInApi.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
+
+const useLoginMutation = () => {
+  const fetcher = ({ loginId, password }: { loginId: string; password: string }) =>
+    axios.post(`/sign-in`, { loginId, password });
+
+  const navigate = useNavigate();
+
+  return useMutation(fetcher, {
+    onError: () => {
+      alert('아이디 또는 비밀번호를 확인해주세요.');
+    },
+    onSuccess: () => {
+      navigate('/');
+    },
+  });
+};
+
+export default useLoginMutation;

src/api/signUpApi.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { useQuery, useMutation } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { SignUpDuplication, SignUpInfo } from './dto';
 
 const signUpKeys = {

src/components/Badge/CustomBadge.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface CustomBadgeProps {
+  children: React.ReactNode;
+}
+
+const CustomBadge = ({ children }: CustomBadgeProps) => {
+  return (
+    <span className="rounded bg-mainBlack px-1.5 py-0.5 text-center text-small font-semibold text-pointBlue">
+      {children}
+    </span>
+  );
+};
+
+export default CustomBadge;

src/components/Button/FilledButton.tsx

@@ -15,7 +15,7 @@ const FilledButton = ({ children, onClick, disabled, type, small }: OutlinedButt
       variant="contained"
       className={`${
         small && '!text-small'
-      } h-fit !rounded-sm !py-2 !px-6 !font-semibold !text-subBlack hover:!opacity-80 hover:!shadow-none disabled:!bg-subGray`}
+      } h-fit !rounded-sm !px-6 !py-2 !font-semibold !text-subBlack hover:!opacity-80 hover:!shadow-none disabled:!bg-subGray`}
       type={type}
       onClick={onClick}
       disabled={disabled}

src/components/Button/OutlinedButton.tsx

@@ -17,7 +17,7 @@ const OutlinedButton = ({ children, onClick, disabled, type, small, startIcon, e
       variant="outlined"
       className={`${
         small && '!text-small'
-      } h-fit !rounded-sm !border-pointBlue !py-2 !px-6 !font-semibold disabled:!border-subGray`}
+      } h-fit !rounded-sm !border-pointBlue !px-6 !py-2 !font-semibold disabled:!border-subGray`}
       type={type}
       onClick={onClick}
       disabled={disabled}

src/components/Button/TextButton.tsx

@@ -15,7 +15,7 @@ const TextButton = ({ children, onClick, disabled, type, small }: TextButtonProp
       variant="text"
       className={`${
         small && '!text-small'
-      } h-fit !rounded-sm !py-2 !px-6 !font-semibold hover:!bg-pointBlue/10 active:!bg-pointBlue/30 disabled:!text-subGray`}
+      } h-fit !rounded-sm !px-6 !py-2 !font-semibold hover:!bg-pointBlue/10 active:!bg-pointBlue/30 disabled:!text-subGray`}
       type={type}
       onClick={onClick}
       disabled={disabled}

src/components/Card/PostingCard.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Avatar, Card, CardContent, CardMedia } from '@mui/material';
-import { Typography } from '@material-tailwind/react';
+import { Avatar, Card, CardContent, CardMedia, Typography } from '@mui/material';
 import { VscComment, VscEye } from 'react-icons/vsc';
 import { DateTime } from 'luxon';
 import { ReactComponent as Logo } from '@assets/logo/logo_neon.svg';
@@ -13,7 +12,7 @@ export interface PostingCardProps extends CardMainInfoProps, CardDetailInfoProps
 const CardMainInfo = ({ type, title }: CardMainInfoProps) => {
   return (
     <div>
-      <Typography className="-mt-2 h-3 font-medium text-pointBlue" variant="small">
+      <Typography className="!-mt-2 h-3 font-medium text-pointBlue" variant="small">
         {type ?? ''}
       </Typography>
       <Typography className="font-semibold" variant="paragraph">
@@ -44,13 +43,13 @@ const InteractionScore = ({ visitCount, commentCount }: InteractionScoreProps) =
     <div className="flex space-x-1.5 text-pointBlue">
       <div className="flex items-center">
         <VscEye className="mr-0.5 fill-pointBlue" size={12} />
-        <Typography className="mt-0.5 font-normal" variant="small">
+        <Typography className="!mt-0.5 font-normal" variant="small">
           {visitCount}
         </Typography>
       </div>
       <div className="flex items-center">
         <VscComment className="mr-0.5 fill-pointBlue" size={12} />
-        <Typography className="mt-0.5 font-normal" variant="small">
+        <Typography className="!mt-0.5 font-normal" variant="small">
           {commentCount}
         </Typography>
       </div>

src/components/Editor/StandardEditor.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Editor, EditorProps } from '@toast-ui/react-editor';
+
+import '@toast-ui/editor/dist/toastui-editor.css';
+import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
+
+interface StandardEditorProps extends EditorProps {
+  forwardedRef?: React.MutableRefObject<Editor>;
+}
+
+const StandardEditor = ({ forwardedRef, ...props }: StandardEditorProps) => {
+  return (
+    <Editor
+      ref={forwardedRef}
+      initialValue=""
+      placeholder="내용을 입력해주세요."
+      previewStyle="vertical"
+      minHeight="300px"
+      initialEditType="markdown"
+      language="ko"
+      theme="dark"
+      {...props}
+    />
+  );
+};
+
+export default StandardEditor;

src/components/Input/BackgroundInput.tsx

@@ -1,22 +1,28 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { forwardRef } from 'react';
-import { TextField, StandardTextFieldProps } from '@mui/material';
+import { InputAdornment, StandardTextFieldProps, TextField } from '@mui/material';
 
 interface BackgroundInputProps extends StandardTextFieldProps {
   value: string;
+  endAdornment?: React.ReactNode;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
 }
 
 const BackgroundInput = forwardRef(
   (
-    { value, onChange, error, ...standardTextFieldProps }: BackgroundInputProps,
+    { value, onChange, error, endAdornment, ...standardTextFieldProps }: BackgroundInputProps,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
     return (
       <TextField
         ref={ref}
         InputProps={{
           className: `${!error && 'before:!border-pointBlue bg-pointBlue/5'} h-12`,
+          endAdornment: (
+            <InputAdornment position="end" sx={{ p: 1 }}>
+              {endAdornment}
+            </InputAdornment>
+          ),
         }}
         value={value}
         onChange={onChange}

src/components/Input/SearchInput.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { KeyboardEvent } from 'react';
-import { TextField, InputAdornment, StandardTextFieldProps, IconButton } from '@mui/material';
+import { IconButton, InputAdornment, StandardTextFieldProps, TextField } from '@mui/material';
 import { MdOutlineSearch } from 'react-icons/md';
 
 interface SearchInputProps extends StandardTextFieldProps {

src/components/Input/StandardInput.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { TextField, StandardTextFieldProps } from '@mui/material';
+import { StandardTextFieldProps, TextField } from '@mui/material';
 
 interface StandardInputProps extends StandardTextFieldProps {
   value: string;

src/components/Layout/Header/Header.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
 import { ReactComponent as Logo } from '@assets/logo/logo_neon.svg';
-import { VscGithubInverted, VscAccount } from 'react-icons/vsc';
+import { VscAccount, VscGithubInverted } from 'react-icons/vsc';
 import FilledButton from '@components/Button/FilledButton';
 import AccountMenu from './Menu/AccountMenu';
 

src/components/Modal/MailAuthenticationModal.tsx

@@ -6,18 +6,25 @@ import ConfirmModal from './ConfirmModal';
 interface MailAuthenticationModalProps {
   open: boolean;
   onClose: () => void;
+  onOtherEmailButtonClick: () => void;
+  onResendMailButtonClick: () => void;
 }
 
-const MailAuthenticationModal = ({ open, onClose }: MailAuthenticationModalProps) => {
+const MailAuthenticationModal = ({
+  open,
+  onClose,
+  onOtherEmailButtonClick,
+  onResendMailButtonClick,
+}: MailAuthenticationModalProps) => {
   const modalContents =
     '이메일 주소가 정확한지 확인해 주세요.\n메일 서비스에 따라 인증 메일 발송이 늦어질 수 있습니다.';
 
   return (
     <ConfirmModal open={open} onClose={onClose} title="인증 메일이 오지 않았나요?">
       <Typography className="h-24 w-[440px] whitespace-pre">{modalContents}</Typography>
       <Stack className="flex justify-end space-x-2" direction="row">
-        <OutlinedButton>다른 이메일로 인증</OutlinedButton>
-        <OutlinedButton>인증 메일 재발송</OutlinedButton>
+        <OutlinedButton onClick={onOtherEmailButtonClick}>다른 이메일로 인증</OutlinedButton>
+        <OutlinedButton onClick={onResendMailButtonClick}>인증 메일 재발송</OutlinedButton>
       </Stack>
     </ConfirmModal>
   );

src/components/Navigation/SubCategoryNav.tsx

@@ -13,7 +13,10 @@ const SubCategoryNav = ({ subcategory }: SubCategoryNavProps) => {
 
   return (
     <ListItemButton component={Link} to={`/${subcategory.path}`} className="w-full">
-      <ListItemText className={isCurrentPath ? 'text-pointBlue' : ''} primary={`• ${subcategory.name}`} />
+      <ListItemText
+        className={`whitespace-pre ${isCurrentPath ? 'text-pointBlue' : ''}`}
+        primary={`•\t${subcategory.name}`}
+      />
     </ListItemButton>
   );
 };

src/components/Section/SearchSection.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MdOutlineSearch, MdOutlineArrowDropDown } from 'react-icons/md';
+import { MdOutlineArrowDropDown, MdOutlineSearch } from 'react-icons/md';
 
 const SearchSection = () => {
   return (

src/components/Tab/StandardTab.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tabs, Tab } from '@mui/material';
+import { Tab, Tabs } from '@mui/material';
 
 interface StandardTabProps {
   options: { id: number; label: string }[];

src/components/Table/StandardTable.tsx

@@ -2,14 +2,16 @@ import React, { ReactNode } from 'react';
 import { Checkbox, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
 
 import StandardTablePagination from '@components/Pagination/StandardTablePagination';
-import { Column, Row, ChildComponent } from './StandardTable.interface';
+import { ChildComponent, Column, Row } from './StandardTable.interface';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 interface StandardTableProps<T extends Record<string, any>> {
   columns: Column<T>[];
   rows: Row<T>[];
   onRowClick?: ({ rowData }: { rowData: Row<T> }) => void;
   childComponent?: ({ key, value, rowData }: ChildComponent<T>) => ReactNode;
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const StandardTable = <T extends Record<string, any>>({
   columns,
@@ -54,7 +56,11 @@ const StandardTable = <T extends Record<string, any>>({
                     ) : (
                       <div>
                         {childComponent
-                          ? childComponent({ key: column.key, value: row[column.key], rowData: row })
+                          ? childComponent({
+                              key: column.key,
+                              value: row[column.key],
+                              rowData: row,
+                            })
                           : row[column.key]}
                       </div>
                     )}