[#24] TextField component 잘못된 이름 수정

src/components/button/arrow-button.jsx

@@ -1,12 +1,12 @@
 import styled from "styled-components";
-import arrowLeftImg from "../../assets/ic-chevron-left.svg";
-import arrowRightImg from "../../assets/ic-chevron-right.svg";
+import arrowLeftImage from "../../assets/ic-chevron-left.svg";
+import arrowRightImage from "../../assets/ic-chevron-right.svg";
 import Colors from "../color/colors";
 import ARROW_BUTTON_DIRECTION from "./arrow-button-direction";
 
 const arrowImg = {
-  [ARROW_BUTTON_DIRECTION.left]: arrowLeftImg,
-  [ARROW_BUTTON_DIRECTION.right]: arrowRightImg,
+  [ARROW_BUTTON_DIRECTION.left]: arrowLeftImage,
+  [ARROW_BUTTON_DIRECTION.right]: arrowRightImage,
 };
 
 const StyledArrowButton = styled.button`

src/components/header/header.jsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import logoImg from "../../assets/logo.svg";
+import logoImage from "../../assets/logo.svg";
 import { media } from "../../utils/media";
 
 const HeaderContent = styled.div`
@@ -27,7 +27,7 @@ function Header({ className, children }) {
   return (
     <StyledHeader className={className}>
       <HeaderContent>
-        <img src={logoImg} alt="로고" />
+        <img src={logoImage} alt="로고" />
         <div>{children}</div>
       </HeaderContent>
     </StyledHeader>

src/components/modal/modal.jsx

@@ -1,6 +1,6 @@
 import { createPortal } from "react-dom";
 import styled, { css } from "styled-components";
-import defaultProfileImg from "../../assets/ic-person.svg";
+import defaultProfileImage from "../../assets/ic-person.svg";
 import { useModal } from "../../hooks/use-modal";
 import { formatDate } from "../../utils/formatter";
 import Badge from "../badge/badge";
@@ -40,7 +40,7 @@ const DefaultProfileImage = styled.div`
 `;
 
 function ProfileImage({ profileImg }) {
-  const img = <img src={profileImg ?? defaultProfileImg} alt="프로필 사진" />;
+  const img = <img src={profileImg ?? defaultProfileImage} alt="프로필 사진" />;
   return profileImg ? (
     <UserProfileImage>{img}</UserProfileImage>
   ) : (

src/components/text-field/dropdown-input/dropdown-input.jsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
-import arrowDownImg from "../../../assets/ic-chevron-down.svg";
-import arrowUpImg from "../../../assets/ic-chevron-up.svg";
+import arrowDownImage from "../../../assets/ic-chevron-down.svg";
+import arrowUpImage from "../../../assets/ic-chevron-up.svg";
 import { useDropdown } from "../../../hooks/use-dropdown";
 import INPUT_STYLES from "../input-styles";
 import Dropdown from "./dropdown";
@@ -117,7 +117,7 @@ function DropdownInput({
         <Text value={value} placeholder={placeholder} />
         <Icon>
           <img
-            src={showsDropdown ? arrowUpImg : arrowDownImg}
+            src={showsDropdown ? arrowUpImage : arrowDownImage}
             alt="Dropdown 화살표"
           />
         </Icon>

src/components/text-field/text-field.jsx

@@ -4,7 +4,7 @@ import DropdownInput from "./dropdown-input/dropdown-input";
 import TEXT_FIELD_TYPE from "./text-field-type";
 import TextInput from "./text-input/text-input";
 
-const StyledInputTextField = styled.div`
+const StyledTextField = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -18,17 +18,17 @@ const ErrorMessage = styled.p`
   color: ${Colors.error};
 `;
 
-function InputTextField({ type, error, dropdownId, ...props }) {
+function TextField({ type, error, dropdownId, ...props }) {
   return (
-    <StyledInputTextField>
+    <StyledTextField>
       {type === TEXT_FIELD_TYPE.input ? (
         <TextInput error={error} {...props} />
       ) : (
         <DropdownInput dropdownId={dropdownId} error={error} {...props} />
       )}
       {error && <ErrorMessage>{error}</ErrorMessage>}
-    </StyledInputTextField>
+    </StyledTextField>
   );
 }
 
-export default InputTextField;
+export default TextField;

src/components/toast/toast.jsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
-import checkImg from "../../assets/ic-check-circle-green.svg";
-import closeImg from "../../assets/ic-xmark.svg";
+import checkImage from "../../assets/ic-check-circle-green.svg";
+import closeImage from "../../assets/ic-xmark.svg";
 
 const StyledToast = styled.div`
   background-color: rgba(0, 0, 0, 0.8);
@@ -60,11 +60,11 @@ function Toast({ message, onDismiss }) {
   return (
     <StyledToast>
       <Icon>
-        <img src={checkImg} alt="확인" />
+        <img src={checkImage} alt="확인" />
       </Icon>
       <p>{message}</p>
       <IconButton as="button" onClick={onDismiss}>
-        <img src={closeImg} alt="닫기" />
+        <img src={closeImage} alt="닫기" />
       </IconButton>
     </StyledToast>
   );

src/pages/test-page.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import styled from "styled-components";
-import smileAddImg from "../assets/ic-face-smile-add.svg";
+import smileAddImage from "../assets/ic-face-smile-add.svg";
 import Badge from "../components/badge/badge";
 import BADGE_TYPE from "../components/badge/badge-type";
 import EmojiBadge from "../components/badge/emoji-badge";
@@ -44,11 +44,11 @@ function TestPage() {
 
   const handleToastClick = () => setShowsToast(true);
   const handleToastDismiss = () => setShowsToast(false);
-  
+
   /* Modal */
   const { showsModal, setShowsModal } = useModal();
   const handleModalClick = () => setShowsModal(true);
-  
+
   return (
     <div
       style={{
@@ -84,33 +84,33 @@ function TestPage() {
         <OutlinedButton
           size={BUTTON_SIZE.medium}
           title="Hello"
-          icon={smileAddImg}
+          icon={smileAddImage}
         />
         <OutlinedButton
           size={BUTTON_SIZE.small}
           title="Hello"
-          icon={smileAddImg}
+          icon={smileAddImage}
         />
         <OutlinedButton
           size={BUTTON_SIZE.extraSmall}
           title="Hello"
-          icon={smileAddImg}
+          icon={smileAddImage}
         />
         <OutlinedButton
           size={BUTTON_SIZE.extraSmall}
           title="Hello"
           disabled
-          icon={smileAddImg}
+          icon={smileAddImage}
         />
       </div>
       <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
-        <OutlinedButton size={BUTTON_SIZE.medium} icon={smileAddImg} />
-        <OutlinedButton size={BUTTON_SIZE.small} icon={smileAddImg} />
-        <OutlinedButton size={BUTTON_SIZE.extraSmall} icon={smileAddImg} />
+        <OutlinedButton size={BUTTON_SIZE.medium} icon={smileAddImage} />
+        <OutlinedButton size={BUTTON_SIZE.small} icon={smileAddImage} />
+        <OutlinedButton size={BUTTON_SIZE.extraSmall} icon={smileAddImage} />
         <OutlinedButton
           size={BUTTON_SIZE.extraSmall}
           disabled
-          icon={smileAddImg}
+          icon={smileAddImage}
         />
       </div>
       <div style={{ display: "flex", alignItems: "center", gap: 16 }}>