Merge pull request #151 from choiyoubin/test

Docs/svg파일 Png수정

src/components/views/Header/Header480/Header480.jsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import menu from "../../../../assets/icons/Header/ic_round-menu.svg";
 import { IMAGES } from "../../../../constants/images";
 import SideMenu from "../../SideMenu/SideMenu";
 import OperationButton from "../OperationButton/OperationButton";
@@ -18,7 +17,7 @@ export default function Header480() {
       <SideMenu isOpen={isSideMenuOpen} toggleSidebar={handleSidebar} />
       <header className="header480">
         <img
-          src={menu}
+          src={IMAGES.round_menu}
           alt="menu"
           className="header480__menu"
           onClick={handleSidebar}

src/components/views/Header/Header480/HeaderBack480/HeaderBack480.css

@@ -6,6 +6,11 @@
   align-items: center;
 }
 
+.header__back__480 img {
+  width: 3rem;
+  height: 3rem;
+}
+
 .header__back__480 span {
   color: #000;
   font-family: Pretendard;

src/components/views/Header/Header480/HeaderBack480/HeaderBack480.jsx

@@ -1,14 +1,15 @@
-import back from "../../../../../assets/icons/icon_parkOutline.svg";
+import { IMAGES } from "../../../../../constants/images";
 import "./HeaderBack480.css";
 
 const HeaderBack480 = ({ pageName }) => {
   const handleGoBack = () => {
     window.history.back();
   };
 
+  //TODO:: 백버튼 마진 수정
   return (
     <header className="header__back__480">
-      <img src={back} alt="<" onClick={() => handleGoBack()} />
+      <img src={IMAGES.back} alt="<" onClick={() => handleGoBack()} />
       {/* 페이지 이름 표시 */}
       <span>{pageName}</span>
     </header>

src/components/views/Header/HeaderOrder/Header.css

@@ -87,8 +87,8 @@
 }
 
 .store_img{
-  width: 2rem;
-  height: 2rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .store_close_circle.close{

src/components/views/Header/HeaderOrder/Header.jsx

@@ -2,10 +2,6 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 import { useRecoilState, useRecoilValue } from "recoil";
-import StoreOff from "../../../../assets/icons/Header/CloseLight.svg"; //영업종료
-import StoreOn from "../../../../assets/icons/Header/OpenLight.svg"; //영업중
-import SoundOff from "../../../../assets/icons/Header/SoundOff.svg"; //소리끔
-import SoundOn from "../../../../assets/icons/Header/SoundOn.svg"; //소리켬
 import { IMAGES } from "../../../../constants/images";
 import { soundState, storeState } from "../../../Atom/status";
 import "./Header.css";
@@ -44,7 +40,7 @@ const Header = () => {
       <Row>
         <Col>
           <img
-            src={IMAGES.LOGO}
+            src={IMAGES.logo}
             className="LOGO"
             alt="LOGO"
             onClick={() => navigate(`/main`)}
@@ -55,22 +51,22 @@ const Header = () => {
           {!Store ? (
             <div className="store-group">
               <div className="store-img__wrapper">
-                <img src={StoreOn} alt="Open" />
+                <img src={IMAGES.store_on} alt="Open" />
               </div>
               <div className="header-font">영업중</div>
             </div>
           ) : (
             <div className="store-group">
               <div className="store-img__wrapper">
-                <img src={StoreOff} alt="Close" />
+                <img src={IMAGES.store_off} alt="Close" />
               </div>
               <div className="header-font">영업종료 </div>
             </div>
           )}
           {Sound ? (
-            <img src={SoundOn} onClick={onClickHandler} alt="SoundOn" />
+            <img src={IMAGES.sound_on} onClick={onClickHandler} alt="SoundOn" />
           ) : (
-            <img src={SoundOff} onClick={onClickHandler} alt="SoundOff" />
+            <img src={IMAGES.sound_off} onClick={onClickHandler} alt="SoundOff" />
           )}
         </Col>
       </Row>

src/components/views/Header/HeaderOrder/Header2.jsx

@@ -2,9 +2,6 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import { soundState } from "../../../../Atom/status";
-import StoreOff from "../../../../assets/icons/Header/CloseLight.svg"; //영업종료
-import SoundOff from "../../../../assets/icons/Header/SoundOff.svg"; //소리끔
-import SoundOn from "../../../../assets/icons/Header/SoundOn.svg"; //소리켬
 import { IMAGES } from "../../../../constants/images";
 import "./Header.css";
 
@@ -52,14 +49,14 @@ const Header = () => {
           {/* {storeValue ? (
             <div className="store-group">
               <div className="store-img__wrapper">
-                <img src={StoreOn} alt="Open" />
+                <img src={StoreOn} alt="Open" className="store_img"/>
               </div>
               <div className="header-font">영업중</div>
             </div>
           ) : ( */}
             <div className="store-group">
               <div className="store-img__wrapper">
-                <img src={StoreOff} alt="Close" className="store_img"/>
+                <img src={IMAGES.store_off} alt="Close" className="store_img"/>
               </div>
               <div className="store_font_wrapper">
                 <div className="header-font">영업종료</div>
@@ -69,7 +66,7 @@ const Header = () => {
           {sound ? (
             <div className="header-img-wrapper">
               <img
-                src={SoundOn}
+                src={IMAGES.sound_on}
                 onClick={onClickHandler}
                 alt="SoundOn"
                 className="soundImg"
@@ -78,7 +75,7 @@ const Header = () => {
           ) : (
             <div className="header-img-wrapper">
               <img
-                src={SoundOff}
+                src={IMAGES.sound_off}
                 onClick={onClickHandler}
                 alt="SoundOff"
                 className="soundImg"

src/components/views/Inven/InvenListColumnName/InvenListColumnName.jsx

@@ -1,5 +1,4 @@
-import downArrow from "../../../../assets/icons/icon_downArrow.svg";
-import upArrow from "../../../../assets/icons/icon_upArrow.svg";
+import { IMAGES } from "../../../../constants/images";
 import InvenCategoryList from "../InvenCategoryList/InvenCategoryList";
 import "./InvenListColumnName.css";
 const InvenListColumnName = ({
@@ -20,11 +19,11 @@ const InvenListColumnName = ({
         <span className="mainInven-title__span2">{category}</span>
         {isCategoryOpen ? (
           <span>
-            <img src={downArrow} alt="downArrow" />
+            <img src={IMAGES.arrow_down} alt="downArrow" />
           </span>
         ) : (
           <span>
-            <img src={upArrow} alt="upArrow" />
+            <img src={IMAGES.arrow_up} alt="upArrow" />
           </span>
         )}
       </div>

src/constants/images.js

@@ -32,4 +32,22 @@ export const IMAGES = {
         // 카카오톡 오픈 채팅 아이콘
     kakao_open_chat: require("../assets/images/ic_kakao_open_chat.png"),
     logo_open_chat: require("../assets/images/ic_logo_open_chat.png"),
+
+    //영업중 영업종료 아이콘
+    store_off: require("../assets/images/ic_close_light.png"),
+    store_on: require("../assets/images/ic_open_light.png"),
+
+    // 소리 크기, 끄기 버튼
+    sound_on: require("../assets/images/btn_sound_on.png"),
+    sound_off: require("../assets/images/btn_sound_off.png"),
+
+    // 메인페이지 햄버거바
+    round_menu: require("../assets/images/ic_round_menu.png"),
+
+    // 재고관리 화살표
+    arrow_up: require("../assets/images/ic_arrow_up.png"),
+    arrow_down: require("../assets/images/ic_arrow_down.png"),
+
+    //header480 뒤로가기
+    back: require("../assets/images/ic_park_outline.png"),
 };

src/pages/Inventory/MainInven.jsx

@@ -1,8 +1,6 @@
 import axios from "axios";
 import React, { useCallback, useEffect, useState } from "react";
 import { useCookies } from "react-cookie";
-import downArrow from "../../assets/icons/icon_downArrow.svg";
-import upArrow from "../../assets/icons/icon_upArrow.svg";
 import InvenBox from "../../components/views/Inven/InvenBox";
 import { IMAGES } from "../../constants/images";
 import "./MainInven.css";
@@ -111,7 +109,7 @@ function MainInven () {
         <div className="mainInven-title__span2__wrapper" onClick={() => setIsCategoryOpen((prev) => !prev)}>
           <span style={{ 'width': '1.125rem' }}></span>
           <span className="mainInven-title__span2">{category}</span>
-          {isCategoryOpen ? (<span><img src={downArrow} alt="downArrow"/></span>) : (<span><img src={upArrow} alt="upArrow"/></span>)}
+          {isCategoryOpen ? (<span><img src={IMAGES.arrow_down} alt="downArrow"/></span>) : (<span><img src={IMAGES.arrow_up} alt="upArrow"/></span>)}
         </div>
         <span className="mainInven-title__span3">상품명</span>
       </div>