Merge branch 'dev' into feature-022

src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategorySelectBox.tsx

@@ -14,7 +14,7 @@ import { CategoryDropdown } from './CategoryDropdown';
 type Props = {
   disabled?: boolean;
   selectedCategoryId?: number;
-  onSelect: (categoryId: number) => void;
+  onSelect: (categoryId: number, categoryName?: string) => void;
 };
 
 const CategorySelectBox = ({
@@ -59,9 +59,10 @@ const CategorySelectBox = ({
   };
 
   const handleClick = () => {
-    if (!selectedId || selectedId === selectedCategoryId || disabled) return;
+    if (!selectedCategory || selectedId === selectedCategoryId || disabled)
+      return;
 
-    onSelect(selectedId);
+    onSelect(selectedCategory.categoryId, selectedCategory.name);
   };
 
   return (

src/components/SummaryPage/SummaryDetailBox/SummaryDetailBox.tsx

@@ -1,4 +1,4 @@
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { updateVideoCategoryIdAPI } from '@/apis/videos';
 
@@ -9,6 +9,7 @@ import {
   summaryUpdateVideoState,
   summaryVideoState,
 } from '@/stores/summary';
+import { toastListState } from '@/stores/toast';
 
 import { DetailBox } from '@/styles/SummaryPage';
 
@@ -26,17 +27,23 @@ const SummaryDetailBox = ({ onRefresh }: Props) => {
   const summaryVideo = useRecoilValue(summaryVideoState) as IVideo;
   const summaryUpdateVideo = useRecoilValue(summaryUpdateVideoState);
   const isEditingView = useRecoilValue(summaryIsEditingViewState);
+  const [toastList, setToastList] = useRecoilState(toastListState);
 
   const subHeading = isEditingView
     ? summaryUpdateVideo?.subHeading || []
     : summaryVideo.subHeading;
 
-  const handleSelectCategory = async (category_id: number) => {
+  const createToast = (content: string) => {
+    setToastList([...toastList, { id: Date.now(), content }]);
+  };
+
+  const handleSelectCategory = async (category_id: number, name?: string) => {
     try {
       await updateVideoCategoryIdAPI(category_id, {
         video_id: [summaryVideo.video_id],
       });
 
+      createToast(`[${name}] 카테고리로 이동되었어요!`);
       onRefresh();
     } catch (e) {
       console.error(e);

src/components/SummaryPage/SummaryScriptBox/ResizeThumb.tsx

@@ -1,15 +1,18 @@
 import { useEffect, useState } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
-type Props = {
-  width: number;
-  onChange: (width: number) => void;
-};
+import { isSideBarOpenState, summaryBoxWidthState } from '@/stores/ui';
+
+const ResizeThumb = () => {
+  const isSidebarOpen = useRecoilValue(isSideBarOpenState);
+  const [width, setWidth] = useRecoilState(summaryBoxWidthState);
 
-const ResizeThumb = ({ width, onChange }: Props) => {
   const [saveWidth, setSaveWidth] = useState(-1);
   const [holdX, setHoldX] = useState(-1);
 
   const handleMouseDown: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    if (isSidebarOpen) return;
+
     setSaveWidth(width);
     setHoldX(e.pageX);
   };
@@ -18,7 +21,7 @@ const ResizeThumb = ({ width, onChange }: Props) => {
     if (holdX < 0) return;
 
     const changeWidth = saveWidth + (holdX - e.pageX);
-    onChange(Math.min(Math.max(555, changeWidth), 865));
+    setWidth(Math.min(Math.max(555, changeWidth), 865));
   };
 
   const handleMouseUp = () => {
@@ -36,6 +39,10 @@ const ResizeThumb = ({ width, onChange }: Props) => {
     };
   });
 
+  useEffect(() => {
+    setWidth(isSidebarOpen ? 555 : 865);
+  }, [isSidebarOpen, setWidth]);
+
   return <div className="resize-thumb" onMouseDown={handleMouseDown} />;
 };
 

src/components/SummaryPage/SummaryScriptBox/SummaryScriptBox.tsx

@@ -33,7 +33,7 @@ const SummaryScriptBox = ({ onRefresh }: Props) => {
   const searchIsOpen = useRecoilValue(summarySearchIsOpenState);
   const transformModalIsOpen = useRecoilValue(summaryTransformModalState);
   const isEditingView = useRecoilValue(summaryIsEditingViewState);
-  const [width, setWidth] = useRecoilState(summaryBoxWidthState);
+  const width = useRecoilValue(summaryBoxWidthState);
 
   const [keyword, setKeyword] = useState('');
 
@@ -95,7 +95,7 @@ const SummaryScriptBox = ({ onRefresh }: Props) => {
         {isEditingView ? <ScriptEditor /> : <ScriptViewer keyword={keyword} />}
       </div>
 
-      <ResizeThumb width={width} onChange={setWidth} />
+      <ResizeThumb />
     </ScriptBox>
   );
 };

src/components/SummaryPage/SummaryScriptBox/ToolBox/ToolBox.tsx

@@ -107,7 +107,7 @@ const ToolBox = ({ onRefresh, onChangeKeyword }: Props) => {
     <div className="tools">
       {isEditingView ? (
         <>
-          <div>대충 히스토리 버튼</div>
+          <div />
 
           <div style={{ display: 'flex', gap: 8 }}>
             <button

src/components/layout/Layout.tsx

@@ -25,7 +25,7 @@ const Layout = () => {
     <>
       <Header />
 
-      <div style={{ display: 'flex', width: '100vw' }}>
+      <div style={{ display: 'flex', width: '100%' }}>
         {isSideBarOpen && <SideBar />}
 
         <div style={{ flex: '1 1 auto' }}>

src/components/layout/sideBar/VinoGuide.tsx

@@ -1,17 +1,13 @@
-import { Link } from 'react-router-dom';
-
 import GuideSvg from '@/assets/icons/guide.svg?react';
 
 import * as VinoGuideStyle from '@/styles/layout/sideBar/VinoGuide.style';
 
 const VinoGuide = () => {
   return (
-    <Link to="/guide">
-      <VinoGuideStyle.Wrap>
-        <GuideSvg width={28} height={28} />
-        <VinoGuideStyle.Button>Vino 가이드</VinoGuideStyle.Button>
-      </VinoGuideStyle.Wrap>
-    </Link>
+    <VinoGuideStyle.Wrap to="/guide">
+      <GuideSvg width={28} height={28} />
+      <VinoGuideStyle.Button>Vino 가이드</VinoGuideStyle.Button>
+    </VinoGuideStyle.Wrap>
   );
 };
 

src/styles/GlobalStyle.ts

@@ -36,6 +36,10 @@ const GlobalStyle = createGlobalStyle`
     font-family: 'Pretendard', 'Spline Sans' !important;
     box-sizing: border-box;
   }
+
+  #root {
+    min-width: 1440px;
+  }
 `;
 
 export default GlobalStyle;

src/styles/GuidePage.ts

@@ -55,10 +55,6 @@ export const Visual = styled.section`
         background-color: ${(props) => props.theme.color.green400};
         color: ${(props) => props.theme.color.gray500};
       }
-
-      &:hover {
-        text-decoration: underline;
-      }
     }
   }
 `;

src/styles/SummaryPage.ts

@@ -12,7 +12,7 @@ export const DetailBox = styled.div`
   display: flex;
   flex-direction: column;
   padding: 60px 58px 29.5px 60px;
-  min-width: 555px;
+  min-width: 535px;
   max-width: 760px;
 
   & span.created_at {

src/styles/layout/sideBar/VinoGuide.style.ts

@@ -1,10 +1,17 @@
 import styled from 'styled-components';
 import theme from '@/styles/theme';
-import { CommonButtonStyle, CommonWrapStyle } from '.';
+import { CommonButtonStyle } from '.';
+import { Link } from 'react-router-dom';
 
-export const Wrap = styled(CommonWrapStyle)`
+export const Wrap = styled(Link)`
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  border-radius: 12px;
+  width: 268px;
   background-color: ${theme.color.gray500};
   margin-bottom: 12px;
+  text-decoration: none;
 `;
 
 export const Button = styled(CommonButtonStyle)`