refactor-069: 영상 정리해보기 클릭 시 input으로 focus

teamViNO · Feb 15, 2024 · 9e27b88 · 9e27b88
1 parent aa7855d
commit 9e27b88
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 18 deletions.
diff --git a/src/components/Home/RecentVideos.tsx b/src/components/Home/RecentVideos.tsx
@@ -13,9 +13,10 @@ import { IVideoProps } from 'types/videos';
 
 interface IRecentVideosProp {
   videos: IVideoProps[];
+  searchRef: React.RefObject<HTMLInputElement>;
 }
 
-const RecentVideos = ({ videos }: IRecentVideosProp) => {
+const RecentVideos = ({ videos, searchRef }: IRecentVideosProp) => {
   return (
     <RecentVideosContainer length={videos.length}>
       <div className="container">
@@ -36,7 +37,7 @@ const RecentVideos = ({ videos }: IRecentVideosProp) => {
             <VideosSubtitle>
               처음 방문하셨나요? <br /> 아직 정리해본 영상이 없어요!
             </VideosSubtitle>
-            <VideoButton>
+            <VideoButton onClick={() => searchRef?.current?.focus()}>
               <h2 className="button-text">영상 정리해보기</h2>
             </VideoButton>
           </div>

diff --git a/src/components/Home/SearchYoutube.tsx b/src/components/Home/SearchYoutube.tsx
@@ -16,9 +16,10 @@ import WarningIcon from '@/assets/icons/warning.svg?react';
 
 interface SearchBarProps {
   onSearch: (value: string) => void;
+  searchRef: React.RefObject<HTMLInputElement>;
 }
 
-const SearchYoutube: React.FC<SearchBarProps> = ({ onSearch }) => {
+const SearchYoutube: React.FC<SearchBarProps> = ({ onSearch, searchRef }) => {
   const [inputLink, setInputLink] = useState('');
   const [isButtonValid, setIsButtonValid] = useState(false);
   const [isTextValid, setIsTextValid] = useState(true);
@@ -29,11 +30,11 @@ const SearchYoutube: React.FC<SearchBarProps> = ({ onSearch }) => {
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
     if (isValidYoutubeLink(inputLink)) {
-        setIsButtonValid(true);
-        setIsTextValid(true);
-        setIsConverting(true);
-        onSearch(inputLink);
-        setModalOpen(true);
+      setIsButtonValid(true);
+      setIsTextValid(true);
+      setIsConverting(true);
+      onSearch(inputLink);
+      setModalOpen(true);
     } else {
       setIsButtonValid(false);
       setIsTextValid(false);
@@ -106,14 +107,17 @@ const SearchYoutube: React.FC<SearchBarProps> = ({ onSearch }) => {
               value={inputLink}
               onChange={handleChange}
               placeholder="https://youtube.com/..."
+              ref={searchRef}
             />
           </div>
-          <SearchButton 
+          <SearchButton
             type="submit"
-            // onClick={ handleClick } 
-            style={{ 
-                color: isButtonValid ? 'white' : theme.color.gray300,
-                backgroundColor: isButtonValid ? theme.color.gray500 : theme.color.gray100
+            // onClick={ handleClick }
+            style={{
+              color: isButtonValid ? 'white' : theme.color.gray300,
+              backgroundColor: isButtonValid
+                ? theme.color.gray500
+                : theme.color.gray100,
             }}
           >
             변환하기

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import SearchYoutube from '@/components/Home/SearchYoutube';
 import { HomePageContainer } from '@/styles/HomepageStyle';
 import RecentVideos from '@/components/Home/RecentVideos';
@@ -29,6 +29,7 @@ const HomePage: React.FC = () => {
   const handleSearch = (value: string) => {
     console.log(value);
   };
+  const searchRef = useRef(null);
 
   const isModalOpen = useRecoilValue(recommendationModalState);
 
@@ -49,11 +50,11 @@ const HomePage: React.FC = () => {
 
   return (
     <HomePageContainer>
-      <SearchYoutube onSearch={handleSearch} />
+      <SearchYoutube searchRef={searchRef} onSearch={handleSearch} />
       {isModalOpen && <RecommendationModal />}
       {userToken && (
         <>
-          <RecentVideos videos={recentVideos} />
+          <RecentVideos searchRef={searchRef} videos={recentVideos} />
           <InsightVideos
             userToken={userToken}
             dummyVideos={dummyVideos}
@@ -68,7 +69,7 @@ const HomePage: React.FC = () => {
             dummyVideos={dummyVideos}
             setDummyVideos={setDummyVideos}
           />
-          <RecentVideos videos={recentVideos} />
+          <RecentVideos searchRef={searchRef} videos={recentVideos} />
         </>
       )}
     </HomePageContainer>

diff --git a/src/styles/HomepageStyle.ts b/src/styles/HomepageStyle.ts
@@ -204,7 +204,7 @@ export const VideosSubtitle = styled.h4`
 
 export const VideoButton = styled.button`
   padding: 12px 32px;
-  font-size: 1rem;
+  ${theme.typography.Subheader2}
   border: none;
   width: 190px;
   height: 56px;