refactor: Editor와 VideoList컴포넌트에 중복적으로 존재하던 코드를 LogoSelect 컴포넌트로 코드 리…

…펙토링함

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.dbuqiibdomg"
+    "revision": "0.48tff2uhq0g"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
+    "motion": "^11.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.2",
+    "react-select": "^5.9.0",
     "react-youtube": "^10.1.0"
   },
   "devDependencies": {

src/components/Button.jsx

@@ -1,7 +1,16 @@
 import "./css/Button.css";
+import { motion } from "motion/react";
 
 const Button = ({ text, type, onClick }) => {
-  return <button onClick={onClick} className={`Button Button_${type}`}>{text}</button>
+  return (
+    <motion.button
+      whileHover={{ scale: 1.1 }}
+      whileTap={{ scale: 0.95 }}
+      onClick={onClick}
+      className={`Button Button_${type}`}>
+      {text}
+    </motion.button>
+  )
 }
 
 export default Button;

src/components/Editor.jsx

@@ -1,16 +1,17 @@
 import { useEffect, useState } from 'react'
 import './css/Editor.css'
-import LogoItem from './LogoItem'
 import Button from './Button'
 import { useNavigate } from 'react-router-dom'
 import { LogoList } from '../utils/constants'
 import { getStringedDate } from '../utils/getStringedDate'
+import LogoSelector from './LogoSelector'
 
 const Editor = ({ initData, onSubmit, videoId = "" }) => {
   const [input, setInput] = useState({
     createdDate: new Date(),
     content: ["", "", ""],
     videoId: "",
+    logoName: ""
   });
 
   const nav = useNavigate();
@@ -55,6 +56,16 @@ const Editor = ({ initData, onSubmit, videoId = "" }) => {
     onSubmit(updatedInput);
   };
 
+  const handleLogoSelect = (company) => {
+    onChangeInput({
+      target: {
+        name: "logoName",
+        value: company
+      }
+    });
+  }
+
+
   useEffect(() => {
     if (initData) {
       setInput({
@@ -65,6 +76,8 @@ const Editor = ({ initData, onSubmit, videoId = "" }) => {
     }
   }, [initData]);
 
+  console.log(input.logoName)
+
   return (
     <div className='Editor'>
       {/* 날짜 선택 */}
@@ -75,21 +88,10 @@ const Editor = ({ initData, onSubmit, videoId = "" }) => {
       {/* 로고 섹션 */}
       <section className='logo_section'>
         <h4>주제</h4>
-        <div className='logo_list_wrapper'>
-          {LogoList.map((item, index) => {
-            return (
-              <LogoItem
-                key={index} {...item}
-                isSelected={item.logoId === input.logoId}
-                onClick={() => onChangeInput({
-                  target: {
-                    name: "logoId",
-                    value: item.logoId
-                  }
-                })} />
-            )
-          })}
-        </div>
+        <LogoSelector
+          selectedLogo={input.logoName}
+          onLogoSelect={handleLogoSelect}
+        />
       </section>
       {/* if videoId 비디오 섹션 */}
       {

src/components/Header.jsx

@@ -1,6 +1,5 @@
 import './css/Header.css';
 
-
 const Header = ({ title, leftChild, rightChild, color = "black" }) => {
   return (
     <header
@@ -13,4 +12,4 @@ const Header = ({ title, leftChild, rightChild, color = "black" }) => {
   )
 }
 
-export default Header;
+export default Header;

src/components/LogoItem.jsx

@@ -3,7 +3,6 @@ import { getLogoImage } from '../utils/getLogoImage'
 
 const LogoItem = ({ logoId, isSelected, onClick }) => {
   return (
-
     <div onClick={onClick} className={`LogoItem ${isSelected ? `LogoItem_on_${logoId}` : ""}`}>
       <img className="logo_img" src={getLogoImage(logoId)} />
     </div>

src/components/LogoSelector.jsx

@@ -0,0 +1,24 @@
+import './css/LogoSelector.css'
+import LogoItem from './LogoItem'
+import { LogoList } from '../utils/constants'
+
+const LogoSelector = ({ selectedLogo, onLogoSelect }) => {
+  return (
+    <div className="LogoSelector">
+      {
+        LogoList.map((company, index) => {
+          return (
+            <LogoItem
+              key={index}
+              isSelected={company.logoName === selectedLogo}
+              onClick={() => onLogoSelect(company.logoName)}
+              logoId={company.logoId}
+            />
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default LogoSelector

src/components/MenuBar.jsx

@@ -0,0 +1,22 @@
+import Button from "./Button";
+import { useNavigate } from 'react-router-dom'
+import './css/MenuBar.css'
+import Select from './Select'
+
+const MenuBar = ({ onChange }) => {
+  const nav = useNavigate();
+
+  const handleSelectChange = (selectedOption) => {
+    onChange({ target: { value: selectedOption.value } });
+  }
+
+  return (
+    <div className="MenuBar">
+      <Select onChange={handleSelectChange} />
+      <Button text={"새 지식 쓰기"} type={"POSITIVE"} onClick={() => nav("/new")} />
+      <Button text={"영상 글쓰기"} type={"POSITIVE"} onClick={() => nav("/video")} />
+    </div>
+  )
+}
+
+export default MenuBar

src/components/PostList.jsx

@@ -1,17 +1,14 @@
-import Button from "./Button";
-import { useNavigate } from 'react-router-dom'
 import PostItem from "./PostItem";
 import "./css/PostList.css";
 import { useState } from 'react'
+import MenuBar from "./MenuBar";
 
 
 const PostList = ({ data }) => {
-  const nav = useNavigate();
   const [sortType, setSortType] = useState('latest')
 
   const onChangeSortType = e => {
     setSortType(e.target.value)
-    console.log(e.target.value)
   }
 
   const getSortedDate = () => {
@@ -27,14 +24,7 @@ const PostList = ({ data }) => {
   const sortedDate = getSortedDate()
   return (
     <div className="PostList">
-      <div className="menu_bar">
-        <select onChange={onChangeSortType}>
-          <option value={"latest"}>최신순</option>
-          <option value={"oldest"}>오래된 순</option>
-        </select>
-        <Button text={"새 지식 쓰기"} type={"POSITIVE"} onClick={() => nav("/new")} />
-        <Button text={"영상 글쓰기"} type={"POSITIVE"} onClick={() => nav("/video")} />
-      </div>
+      <MenuBar onChange={onChangeSortType} />
       <div className="list_wrapper">
         {sortedDate.map((item) => {
           return (

src/components/Select.jsx

@@ -0,0 +1,35 @@
+import ReactSelect from 'react-select'
+
+const options = [
+  { value: 'latest', label: '최신순' },
+  { value: 'oldest', label: '오래된 순' },
+]
+
+const customStyles = {
+  option: (provided, state) => ({
+    ...provided,
+    fontWeight: state.isSelected ? "bold" : "normal",
+    backgroundColor: state.isSelected ? 'rgb(49, 130, 239)' : 'white',
+  }),
+  control: (provided) => ({
+    ...provided,
+    width: 120
+  }),
+  singleValue: (provided, state) => ({
+    ...provided,
+    fontSize: state.selectProps.myFontSize
+  })
+};
+
+const Select = ({ onChange }) => {
+  return (
+    <ReactSelect
+      styles={customStyles}
+      onChange={onChange}
+      options={options}
+      defaultValue={options[0]}
+    />
+  )
+}
+
+export default Select

src/components/VideoList.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useMemo } from 'react';
 import './css/VideoList.css';
 // 컴포넌트
 import SearchBar from './SearchBar';
-import Selector from './Selector'
+import LogoSelector from './LogoSelector'
 import VideoItem from './VideoItem'
 // constant
 import { getStorageVideoIds, storeVideoIds } from '../utils/storage';
@@ -36,7 +36,6 @@ const VideoList = () => {
       const results = await Promise.all(allVideoIdPromises);
       const allVideoId = results.flat();
 
-      console.log(allVideoId);
       storeVideoIds(allVideoId);
       setVideoList(allVideoId);
     } catch (error) {
@@ -66,10 +65,15 @@ const VideoList = () => {
     );
   }, [videoList, searchKeyword]);
 
+  const handleLogoSelect = (company) => {
+    setQuery(company);
+    setSearchKeyword("");
+  }
+
   return (
     <>
       <SearchBar setSearchKeyword={setSearchKeyword} />
-      <Selector setQuery={setQuery} setSearchKeyword={setSearchKeyword} />
+      <LogoSelector selectedLogo={query} onLogoSelect={handleLogoSelect} />
       {selectedVideo && (
         <VideoOverlay selectedVideo={selectedVideo} setSelectedVideo={setSelectedVideo} />
       )}

src/components/css/Button.css

@@ -1,5 +1,5 @@
 .Button {
-  background-color: rgb(216, 216, 216);
+  background-color: rgb(244, 244, 246);
   color: black;
   border : none;
   border-radius: 5px;
@@ -8,13 +8,14 @@
   white-space: nowrap;
 
   font-size: small;
+  font-weight: 700;
 }
 
 .Button_POSITIVE {
-  background-color: rgb(133, 175, 243);
+  background-color: rgb(49, 130, 239);
   color: white;
 }
 .Button_NEGATIVE {
-  background-color:  rgb(236, 68, 82);
+  background-color:  rgb(231, 56, 70);
   color: white
 }

src/components/css/Header.css

@@ -14,7 +14,8 @@
 
 .Header .header_center {
   width: 50%;
-  font-size: 25px;
+  font-size: x-large;
+  font-weight: 500;
   justify-content: center;
 }
 

src/components/css/LogoItem.css

@@ -3,6 +3,7 @@
   border-radius: 5px;
   cursor: pointer;
   text-align: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 
   /* 정사각형 모양 유지 */
   aspect-ratio: 1;
@@ -16,7 +17,7 @@
 }
 
 .LogoItem .logo_img {
-  width: 75%;
+  width: 80%;
   height: auto;
   object-fit: contain;
   margin-bottom: 8px;

src/components/css/LogoSelector.css

@@ -0,0 +1,6 @@
+.LogoSelector {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin: 20px 0;
+}

src/components/css/MenuBar.css

@@ -0,0 +1,10 @@
+.MenuBar {
+  margin: 20px 0px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.MenuBar Button {
+  flex : 1;
+}