[Feat/#76] bank component 아이콘 수정

src/App.tsx

@@ -8,7 +8,6 @@ import theme from "@styles/theme";
 import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
 
-import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider as MuiThemeProvider, createTheme } from "@mui/material/styles";
 
 const darkTheme = createTheme({
@@ -20,7 +19,6 @@ const darkTheme = createTheme({
 function App() {
   return (
     <MuiThemeProvider theme={darkTheme}>
-      <CssBaseline />
       <ThemeProvider theme={theme}>
         <LocalizationProvider dateAdapter={AdapterDayjs}>
           <GlobalStyle />

src/assets/svgs/IconArrowDown.tsx

@@ -1,9 +1,8 @@
-import * as React from "react";
 import type { SVGProps } from "react";
 const SvgIconArrowDown = (props: SVGProps<SVGSVGElement>) => (
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
     <path
-      fill="#F4F4F4"
+      fill="#fff"
       fillRule="evenodd"
       d="M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.954a1.125 1.125 0 0 1 1.592 1.59l-6.75 6.75c-.44.44-1.152.44-1.591 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.59"
       clipRule="evenodd"

src/components/commons/bank/Bank.styled.ts

@@ -11,7 +11,7 @@ export const BankLayout = styled.section`
   display: block;
   width: 37.5rem;
   margin: 0;
-  padding: 4rem 2.4rem 4.5rem;
+  padding: 2.1rem 2.4rem 4.5rem;
 
   background: ${({ theme }) => theme.colors.gray_800};
   transform: translateX(-50%);
@@ -80,6 +80,8 @@ export const ToggleIcon = styled(SvgIconArrowDown)`
   width: 2.4rem;
 
   cursor: pointer;
+
+  transition: transform 0.3s;
 `;
 
 // InputAccountWrapper

src/components/commons/bank/InputBank.tsx

@@ -2,14 +2,16 @@ import { ButtonHTMLAttributes } from "react";
 import * as S from "./Bank.styled";
 
 export interface InputBankProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  bankOpen: boolean;
   onClick: () => void;
   children: string;
 }
 
-const InputBank = ({ onClick, children }: InputBankProps) => {
+const InputBank = ({ bankOpen, onClick, children }: InputBankProps) => {
   return (
     <S.InputBank onClick={onClick} $hasChildren={!!children}>
       {children ? children : "은행을 선택해주세요."}
+      {/* bankOpen하면 토글 회전하는거 나중에할게요요 */}
       <S.ToggleIcon />
     </S.InputBank>
   );

src/pages/BankTest.tsx

@@ -25,7 +25,9 @@ const BankTest = () => {
   return (
     <Test>
       <InputAccountWrapper>
-        <InputBank onClick={handleBankOpen}>{bankInfo}</InputBank>
+        <InputBank bankOpen={bankOpen} onClick={handleBankOpen}>
+          {bankInfo}
+        </InputBank>
         <TextField
           value={accountInfo}
           onChangeValue={handleChangeInput}

yarn.lock

@@ -5891,7 +5891,6 @@ __metadata:
     prettier-linter-helpers: "npm:^1.0.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
-    react-player: "npm:^2.16.0"
     react-router-dom: "npm:^6.24.0"
     shelljs: "npm:^0.8.5"
     storybook: "npm:^8.1.11"
@@ -6842,13 +6841,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.0.0":
-  version: 4.3.1
-  resolution: "deepmerge@npm:4.3.1"
-  checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
-  languageName: node
-  linkType: hard
-
 "default-browser-id@npm:3.0.0":
   version: 3.0.0
   resolution: "default-browser-id@npm:3.0.0"
@@ -9828,13 +9820,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"load-script@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "load-script@npm:1.0.0"
-  checksum: 10c0/9919c777fe83f8a3a917f65c9c3ab186ad8b194248c57f413ef6e610194abc8484d123a6838d77ab33e5fa1a05a676b5dfe779c38cfe602bdd27c239423d0acd
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^3.0.0":
   version: 3.0.0
   resolution: "locate-path@npm:3.0.0"
@@ -10069,13 +10054,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memoize-one@npm:^5.1.1":
-  version: 5.2.1
-  resolution: "memoize-one@npm:5.2.1"
-  checksum: 10c0/fd22dbe9a978a2b4f30d6a491fc02fb90792432ad0dab840dc96c1734d2bd7c9cdeb6a26130ec60507eb43230559523615873168bcbe8fafab221c30b11d54c1
-  languageName: node
-  linkType: hard
-
 "memoizerific@npm:^1.11.3":
   version: 1.11.3
   resolution: "memoizerific@npm:1.11.3"
@@ -11416,13 +11394,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.0.1":
-  version: 3.2.2
-  resolution: "react-fast-compare@npm:3.2.2"
-  checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
-  languageName: node
-  linkType: hard
-
 "react-is@npm:18.1.0":
   version: 18.1.0
   resolution: "react-is@npm:18.1.0"
@@ -11451,21 +11422,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-player@npm:^2.16.0":
-  version: 2.16.0
-  resolution: "react-player@npm:2.16.0"
-  dependencies:
-    deepmerge: "npm:^4.0.0"
-    load-script: "npm:^1.0.0"
-    memoize-one: "npm:^5.1.1"
-    prop-types: "npm:^15.7.2"
-    react-fast-compare: "npm:^3.0.1"
-  peerDependencies:
-    react: ">=16.6.0"
-  checksum: 10c0/ee0f4cd3bd468b28af38dbbb65cae1659218153956f43c0bdd15cd8b38aaaf151deec43b93b7dd887c0ac28242a4ba7e9d01823351e78ba60ae04d5fb51defb4
-  languageName: node
-  linkType: hard
-
 "react-remove-scroll-bar@npm:^2.3.4":
   version: 2.3.6
   resolution: "react-remove-scroll-bar@npm:2.3.6"