[FE] ETC: 컴포넌트 명 컨벤션에 따라 수정 #1718

innovationacademy-kr · Dec 23, 2024 · 3fe91e8 · 3fe91e8
1 parent 769f7e7
commit 3fe91e8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/frontend/src/Presentation/components/Register/DropdownDateMenu.tsx b/frontend/src/Presentation/components/Register/DropdownDateMenu.tsx
@@ -68,7 +68,7 @@ const DropdownDateMenu = ({
           rotated={dropdownState.isFocused}
         />
       </RegisterTimeInputStyled>
-      <AnimatedDropdownOptions
+      <AnimatedDropdownOptionsStyled
         isVisible={dropdownState.isVisible}
         clickCount={clickCount}
       >
@@ -84,7 +84,7 @@ const DropdownDateMenu = ({
             </DropdownOption>
           );
         })}
-      </AnimatedDropdownOptions>
+      </AnimatedDropdownOptionsStyled>
     </DropdownContainer>
   );
 };
@@ -119,7 +119,7 @@ const DropdownContainer = styled.div`
   position: relative;
 `;
 
-const AnimatedDropdownOptions = styled.ul<{
+const AnimatedDropdownOptionsStyled = styled.ul<{
   isVisible: boolean;
   clickCount: number;
 }>`

diff --git a/frontend/src/Presentation/components/Register/DropdownTimeMenu.tsx b/frontend/src/Presentation/components/Register/DropdownTimeMenu.tsx
@@ -60,13 +60,13 @@ const DropdownTimeMenu = ({
         hasSelectedOption={selectedOption !== ""}
       >
         {selectedOption || "시간을 선택해주세요"}
-        <DropdownIcon
+        <DropdownIconStyled
           src={chevronIcon}
           alt="Dropdown Icon"
           rotated={dropdownState.isFocused}
         />{" "}
       </RegisterTimeInputStyled>
-      <AnimatedDropdownOptions
+      <AnimatedDropdownOptionsStyled
         isVisible={dropdownState.isVisible}
         clickCount={clickCount}
       >
@@ -75,15 +75,15 @@ const DropdownTimeMenu = ({
           .map((timeKey) => {
             const time = timeKey as PresentationTimeKey;
             return (
-              <DropdownOption
+              <DropdownOptionStyled
                 key={time}
                 onClick={() => handleOptionSelect(time)}
               >
                 {time}
-              </DropdownOption>
+              </DropdownOptionStyled>
             );
           })}
-      </AnimatedDropdownOptions>
+      </AnimatedDropdownOptionsStyled>
     </DropdownContainer>
   );
 };
@@ -118,7 +118,7 @@ const DropdownContainer = styled.div`
   position: relative;
 `;
 
-const AnimatedDropdownOptions = styled.ul<{
+const AnimatedDropdownOptionsStyled = styled.ul<{
   isVisible: boolean;
   clickCount: number;
 }>`
@@ -152,12 +152,13 @@ const AnimatedDropdownOptions = styled.ul<{
   }
 `;
 
-const DropdownOptions = styled.ul`
-  list-style-type: none;
-  padding: 0;
-`;
+// TODO: 확인 후 삭제
+// const DropdownOptions = styled.ul`
+//   list-style-type: none;
+//   padding: 0;
+// `;
 
-const DropdownOption = styled.li`
+const DropdownOptionStyled = styled.li`
   font-size: 0.875rem;
   padding: 10px;
   cursor: pointer;
@@ -194,7 +195,7 @@ const RegisterTimeInputStyled = styled.div<{
       : "var(--normal-text-color)"};
 `;
 
-const DropdownIcon = styled.img<{ rotated: boolean }>`
+const DropdownIconStyled = styled.img<{ rotated: boolean }>`
   width: 14px;
   height: 8px;
   transform: ${(props) => (props.rotated ? "rotate(180deg)" : "rotate(0deg)")};

diff --git a/frontend/src/Presentation/pages/DropdownMenu.tsx b/frontend/src/Presentation/pages/DropdownMenu.tsx
@@ -48,13 +48,16 @@ const DropdownMenu = () => {
         {selectedOption || "시간을 선택해주세요"}
       </RegisterTimeInputStyled>
       {isVisible && (
-        <DropdownOptions>
+        <DropdownOptionsStyled>
           {Object.values(PresentationTime).map((time) => (
-            <DropdownOption key={time} onClick={() => handleOptionSelect(time)}>
+            <DropdownOptionStyled
+              key={time}
+              onClick={() => handleOptionSelect(time)}
+            >
               {time}
-            </DropdownOption>
+            </DropdownOptionStyled>
           ))}
-        </DropdownOptions>
+        </DropdownOptionsStyled>
       )}
     </DropdownContainer>
   );
@@ -64,7 +67,7 @@ const DropdownContainer = styled.div`
   position: relative;
 `;
 
-const DropdownOptions = styled.ul`
+const DropdownOptionsStyled = styled.ul`
   position: absolute;
   top: 52px;
   left: 0;
@@ -82,7 +85,7 @@ const DropdownOptions = styled.ul`
   }
 `;
 
-const DropdownOption = styled.li`
+const DropdownOptionStyled = styled.li`
   font-size: 0.875rem;
   color: var(--gray-line-btn-color);
   padding: 10px;