Merge pull request #139 from waldreg/feature/#137

[Fix] 홈페이지 공지글 수정 에러 핸들링

src/App.tsx

@@ -1,5 +1,5 @@
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 import AuthContext from "./states/auth-context";
 import Board from "./routes/Board";
@@ -15,33 +15,32 @@ import Schedule from "./routes/Schedule";
 import Setting from "./routes/Setting";
 import SignupForm from "./components/auth/signup/SignupForm";
 import { useContext } from "react";
-import useApiError from './hooks/error/useApiError';
+import useApiError from "./hooks/error/useApiError";
 
 const queryClient = new QueryClient();
 
 function App() {
   const authCtx = useContext(AuthContext);
-    
+
   const { handleError } = useApiError();
   queryClient.setDefaultOptions({
     queries: { onError: (error: any) => handleError(error) },
     mutations: {
       onError: (error: any) => {
-        console.log('에러 app', error);
+        console.log("에러 app", error);
         handleError(error);
       },
     },
   });
 
-
   return (
     <QueryClientProvider client={queryClient}>
       <GlobalStyle />
       <BrowserRouter>
         <Routes>
           {authCtx.isLoggedIn ? (
             <Route element={<Layout />}>
-              <Route path="/" element={<Home />} />
+              <Route path="/home/*" element={<Home />} />
               <Route path="/board/*" element={<Board />} />
               <Route path="/setting/*" element={<Setting />} />
               <Route path="/schedule/*" element={<Schedule />} />
@@ -50,7 +49,7 @@ function App() {
             </Route>
           ) : (
             <>
-              <Route path="/" element={<Home />} />
+              <Route path="/home" element={<Home />} />
               <Route path="/signup" element={<SignupForm />} />
               <Route path="/login" element={<LoginForm />} />
             </>

src/components/auth/login/LoginForm/index.tsx

@@ -47,7 +47,7 @@ const LoginForm = () => {
     try {
       const response = await authAPI.login(userId, userPassword);
       authCtx.login(response.access_token);
-      navigate("/");
+      navigate("/home");
       const TOKEN_EXPIRE_TIME = 1000 * 60 * 60; //60분
       setTimeout(() => {
         window.alert("로그인 유지 토큰이 만료되어 로그아웃됩니다.");

src/components/common/createbutton/index.tsx

@@ -3,12 +3,13 @@ import { PencilWhiteIcon } from "../../Icons/BoardIcons";
 import { Button } from "./style";
 
 interface CreateButtonProps {
-  onSubmit: (e: React.SyntheticEvent) => void;
+  onClick?: (e: React.SyntheticEvent) => void;
+  onSubmit?: (e: React.SyntheticEvent) => void;
 }
 
-const CreateButton = ({ onSubmit }: CreateButtonProps) => {
+const CreateButton = ({ onClick, onSubmit }: CreateButtonProps) => {
   return (
-    <Button onSubmit={onSubmit}>
+    <Button onClick={onClick} onSubmit={onSubmit}>
       <PencilWhiteIcon style={{ marginRight: "0.5rem" }} /> 작성
     </Button>
   );

src/components/global/Layout/index.tsx

@@ -3,8 +3,8 @@ import { Outlet } from "react-router-dom";
 import styled from "styled-components";
 import COLOR from "../../../constants/color";
 
-import NavBar from '../NavBar';
-import TopBar from '../TopBar';
+import NavBar from "../NavBar";
+import TopBar from "../TopBar";
 
 const Layout = ({ children }: { children?: ReactElement }) => {
   return (
@@ -23,10 +23,8 @@ const Layout = ({ children }: { children?: ReactElement }) => {
 };
 
 const Wrapper = styled.div`
-  width: max-content;
   min-width: 100vw;
   height: 100%;
-
   display: flex;
   position: relative;
 `;

src/components/global/NavBar/index.tsx

@@ -55,6 +55,7 @@ const NavBar = () => {
 
   const [width, setWidth] = useState(true);
   const location = useLocation().pathname;
+  const isHomeSelected = location.startsWith("/home");
 
   const navigate = useNavigate();
 
@@ -68,7 +69,7 @@ const NavBar = () => {
       {width ? (
         <>
           <Top>
-            <IconWrapper onClick={() => navigate("/")}>
+            <IconWrapper onClick={() => navigate("/home")}>
               <LogoIcon />
             </IconWrapper>
             <IconWrapper onClick={() => setWidth(false)}>
@@ -79,9 +80,9 @@ const NavBar = () => {
             <Items className="relative px-1">
               <Item className="relative">
                 <Link
-                  to="/"
+                  to="/home"
                   className="overflow-hidden text-ellipsis whitespace-nowrap rounded transition duration-300 ease-in-out cursor-pointer"
-                  selected={location === "/"}
+                  selected={isHomeSelected}
                 >
                   <HomeIcon />
                   <Text style={FONT.SUBTITLE2}>홈</Text>

src/components/home/HomeUpdate/index.tsx

@@ -4,37 +4,53 @@ import { useHome } from "../../../hooks/home/useHome";
 import { useHomeUpdate } from "../../../hooks/home/useHomeUpdate";
 import { ButtonContainer } from "../../../routes/Home/HomePage/style";
 import CreateButton from "../../common/createbutton";
-import { HomeTextarea } from "./style";
+import { CharacterCount, HomeTextarea } from "./style";
 import FONT from "../../../constants/fonts";
+import Container from "../../common/container";
 
 function HomeUpdate() {
   const { home } = useHome();
   const navigate = useNavigate();
   const [content, setContent] = useState(home?.content);
+  const [characterCount, setCharacterCount] = useState(content?.length || 0);
+  const MAX_CHARACTER_COUNT = 10000;
 
   const updateMutation = useHomeUpdate(content!!);
 
-  const handleUpdateSubmit = (e: React.SyntheticEvent) => {
-    e.preventDefault();
+  const handleUpdateSubmit = () => {
     updateMutation.mutate();
     navigate(-1);
   };
 
   const handleChange = (e: React.FormEvent<HTMLTextAreaElement>) => {
-    setContent(e.currentTarget.value);
+    const text = e.currentTarget.value;
+    setContent(text);
+    setCharacterCount(text.length);
   };
 
   return (
-    <form onSubmit={handleUpdateSubmit}>
-      <HomeTextarea
-        style={FONT.BODY1}
-        onChange={handleChange}
-        value={content}
-      />
+    <>
+      <Container
+        height="85%"
+        style={{
+          marginBottom: "1rem",
+          overflowX: "hidden",
+        }}
+      >
+        <HomeTextarea
+          style={FONT.BODY1}
+          onChange={handleChange}
+          value={content}
+          maxLength={MAX_CHARACTER_COUNT}
+        />
+      </Container>
+      <CharacterCount style={FONT.BODY1}>
+        {characterCount}/{MAX_CHARACTER_COUNT}
+      </CharacterCount>
       <ButtonContainer>
-        <CreateButton onSubmit={handleUpdateSubmit} />
+        <CreateButton onClick={handleUpdateSubmit} />
       </ButtonContainer>
-    </form>
+    </>
   );
 }
 

src/components/home/HomeUpdate/style.ts

@@ -2,14 +2,19 @@ import styled from "styled-components";
 import COLOR from "../../../constants/color";
 
 const HomeTextarea = styled.textarea`
-  width: 100%;
-  height: 29rem;
-  padding: 1.7rem;
+  height: 100%;
   border-radius: 0.5rem;
+  padding: 0.5rem;
   outline-color: ${COLOR.GRAY0};
-  margin-bottom: 1rem;
   resize: none;
-  scrollbar-width: none;
+  scrollbar-height: none;
+  overflow: auto;
 `;
 
-export { HomeTextarea };
+const CharacterCount = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin: 0.5rem;
+`;
+
+export { HomeTextarea, CharacterCount };

src/routes/Home/HomePage/index.tsx

@@ -1,5 +1,4 @@
 import { ButtonContainer, HomeText } from "./style";
-
 import AuthContext from "../../../states/auth-context";
 import Button from "../../../components/common/button";
 import Container from "../../../components/common/container";
@@ -33,10 +32,10 @@ const HomePage = () => {
   return (
     <>
       <Container
+        width="100%"
         height="85%"
         style={{
           marginBottom: "1rem",
-          overflow: "scroll",
           overflowX: "hidden",
           wordBreak: "break-all",
         }}