Merge pull request #172 from jihwooon/issue-98

React 오탈자 및 컴포넌트 수정하라

client/src/components/common/EllipisisBox.tsx

@@ -3,16 +3,16 @@ import { FaAngleDown } from "react-icons/fa";
 import { styled } from "styled-components";
 import Button from "./Button";
 
-interface Prpos {
+interface Props {
   children: React.ReactNode;
-  linelimit: number;
+  lineLimit: number;
 }
 
-const EllipsisBox = ({ children, linelimit }: Prpos) => {
+const EllipsisBox = ({ children, lineLimit }: Props) => {
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <EllipsisBoxStyle linelimit={linelimit} $expanded={expanded}>
+    <EllipsisBoxStyle lineLimit={lineLimit} $expanded={expanded}>
       <p>{children}</p>
       <div className="toggle">
         <Button
@@ -30,7 +30,7 @@ const EllipsisBox = ({ children, linelimit }: Prpos) => {
 };
 
 interface EllipsisBoxStyleProps {
-  linelimit: number;
+  lineLimit: number;
   $expanded: boolean;
 }
 
@@ -39,8 +39,8 @@ const EllipsisBoxStyle = styled.div<EllipsisBoxStyleProps>`
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
-    -webkit-line-clamp: ${({ linelimit, $expanded }) => ($expanded ? "none" : linelimit)};
-    - webkit - box - orient : vertical;
+    -webkit-line-clamp: ${({ lineLimit, $expanded }) => ($expanded ? "none" : lineLimit)};
+    -webkit-box-orient: vertical;
     padding: 20px 0 0 0;
     margin: 0;
   }
@@ -53,6 +53,6 @@ const EllipsisBoxStyle = styled.div<EllipsisBoxStyleProps>`
   svg {
     transform: ${({ $expanded }) => ($expanded ? "rotate(180deg)" : "rotate(0)")}
   }
-`;
+`
 
 export default EllipsisBox;

client/src/components/common/Error.tsx

@@ -7,7 +7,7 @@ interface RouterError {
 
 const Error = () => {
   const error = useRouteError() as RouterError
-  
+
   return (
     <div>
       <h1>오류가 발생했습니다</h1>

client/src/components/common/Header.tsx

@@ -7,7 +7,7 @@ import { useAuthStore } from "../../store/authStore";
 
 const Header = () => {
   const { category } = useCategory();
-  const { isLoggedIn: isloggedIn, storeLogout } = useAuthStore();
+  const { isLoggedIn, storeLogout } = useAuthStore();
 
   return (
     <HeaderStyle>
@@ -29,7 +29,7 @@ const Header = () => {
       </nav>
       <nav className="auth">
         {
-          isloggedIn && (
+          isLoggedIn && (
             <ul>
               <li><Link to="/carts">장바구니</Link></li>
               <li><Link to="/orderlist">주문내역</Link></li>
@@ -40,7 +40,7 @@ const Header = () => {
           )
         }
         {
-          !isloggedIn && (
+          !isLoggedIn && (
             <ul>
               <li>
                 <Link to="/signin"><FaSignInAlt/>로그인</Link>

client/src/context/themeContext.tsx

@@ -4,7 +4,7 @@ import { GlobalStyle } from "../style/global";
 import { ThemeProvider } from "styled-components";
 
 const DEFAULT_THEME_NAME = 'light'
-const THEME_LOCALSTORAGE_KEY = 'book_store_theme';
+const THEME_LOCAL_STORAGE_KEY = 'book_store_theme';
 interface State {
   themeName: ThemeName;
   toggleTheme: () => void,
@@ -18,17 +18,17 @@ export const state = {
 export const ThemeContext = createContext<State>(state)
 
 export const BookStoreThemeProvider = ({children}: {children: ReactNode}) => {
-  
+
   const [themeName, setThemeName] = useState<ThemeName>('light');
-  
+
   const toggleTheme = () => {
     setThemeName(themeName === 'light' ? 'dark' : 'light')
-    localStorage.setItem(THEME_LOCALSTORAGE_KEY, 
+    localStorage.setItem(THEME_LOCAL_STORAGE_KEY,
       themeName === 'light' ? 'dark' : 'light');
   };
 
   useEffect(() => {
-    const savedThemeName = localStorage.getItem(THEME_LOCALSTORAGE_KEY) as ThemeName;
+    const savedThemeName = localStorage.getItem(THEME_LOCAL_STORAGE_KEY) as ThemeName;
     setThemeName(savedThemeName || DEFAULT_THEME_NAME);
   }, [])
 

client/src/pages/BookDetail.tsx

@@ -85,7 +85,7 @@ const BookDetail = () => {
       </header>
       <div className="content">
         <Title size="medium">상세 설명</Title>
-        <EllipsisBox linelimit={4}>{book.detail}</EllipsisBox>
+        <EllipsisBox lineLimit={4}>{book.detail}</EllipsisBox>
 
         <Title size="medium">목차</Title>
         <p className="index">{book.contents}</p>

client/src/store/authStore.ts

@@ -20,7 +20,7 @@ export const removeToken = () => {
 }
 
 export const useAuthStore = create<StoreState>((set) => ({
-  isLoggedIn: getToken() ? true : false,
+  isLoggedIn: !!getToken(),
 
   storeLogin: (token: string) => {
     set({ isLoggedIn: true })