[Feature/BAR-244] 끄적이는 페이지 메모 작성시 하단으로 스크롤 이동 및 툴팁 적용

pages/main/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import WriteInput from '@components/Input/WriteInput';
 import Layout from '@components/Layout';
@@ -18,19 +18,33 @@ import { COLORS } from '@styles/tokens';
 const MainPage = () => {
   useGetMyProfile();
 
+  const writeContentRef = useRef<HTMLDivElement>(null);
   const writeInput = useInput({ id: 'write-input' });
   const { todayMemos, history } = useGetWriteHistory();
   const { mutate: submitTemporalMemo } = useCreateTemporalMemo();
   const { data: memoFolders } = useGetMemoFolders();
 
   const [selectedTab, setSelectedTab] = useState('끄적이는');
 
+  useEffect(() => {
+    handleScroll();
+  }, [todayMemos]);
+
+  const handleScroll = () => {
+    if (writeContentRef.current) {
+      writeContentRef.current.scrollTop = writeContentRef.current.scrollHeight;
+    }
+  };
+
   const handleTabSelect = (selectedTab: string) => {
     setSelectedTab(selectedTab);
   };
 
   const handleSubmit = () => {
     submitTemporalMemo(writeInput.value);
+    writeInput.reset();
+
+    handleScroll();
   };
 
   const backgroundColor =
@@ -41,7 +55,7 @@ const MainPage = () => {
       <MainPageTab
         write={
           <div className={styles.container}>
-            <div className={styles.content}>
+            <div ref={writeContentRef} className={styles.content}>
               <WriteGuide />
               <TemporalMemoHistoryTable
                 data={history}

src/domain/저장하는/components/ArchiveFolder/index.tsx

@@ -30,6 +30,7 @@ const ArchiveFolder = ({ folders }: ArchiveFolderProps) => {
             href={`${ROUTES.ARCHIVE}?folder=${folder.id}`}
             className={styles.userFolder({
               isActive:
+                router.asPath === `${ROUTES.ARCHIVE}` ||
                 router.asPath === `${ROUTES.ARCHIVE}?folder=${folder.id}`,
             })}
           >

src/domain/저장하는/components/ArchiveFolder/style.css.ts

@@ -22,6 +22,11 @@ export const userFolder = recipe({
       gap: '5px',
       padding: '8px 20px',
       borderRadius: '8px',
+      transition: 'all 100ms ease-in-out',
+
+      ':hover': {
+        backgroundColor: COLORS['Grey/100'],
+      },
     },
   ],
   variants: {

src/styles/global.css.ts

@@ -26,7 +26,7 @@ globalStyle('body', {
 });
 
 globalStyle('h1, h2, h3, h4, h5, h6, p', {
-  wordBreak: 'keep-all',
+  wordBreak: 'break-word',
   whiteSpace: 'pre-wrap',
 });