[feature] 관리자 모바일 비밀번호 수정 페이지 추가 및 관리자용 공통 inputField 추가

frontend/src/components/common/InputField/InputField.styles.ts

@@ -8,7 +8,7 @@ const INPUT_RIGHT_PADDING = {
   none: '18px',
 } as const;
 
-const BORDER_ERROR = '#dc3545';
+const BORDER_ERROR = colors.primary[900];
 const BORDER_SUCCESS = '#28a745';
 const BORDER_FOCUS = '#007bff';
 

frontend/src/pages/AdminPage/components/AdminInputField/AdminInputField.styles.ts

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import { colors } from '@/styles/theme/colors';
+import { setTypography, typography } from '@/styles/theme/typography';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+`;
+
+export const Card = styled.div<{ $isError?: boolean }>`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 14px;
+  gap: 10px;
+  width: 100%;
+  height: 46px;
+  background: ${colors.base.white};
+  border: 1px solid
+    ${({ $isError }) => ($isError ? colors.primary[900] : colors.gray[200])};
+  border-radius: 10px;
+
+  &:focus-within {
+    border-color: ${({ $isError }) =>
+      $isError ? colors.primary[900] : colors.gray[800]};
+  }
+`;
+
+export const Input = styled.input`
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  ${setTypography(typography.paragraph.p5)};
+  color: ${colors.gray[900]};
+  letter-spacing: -0.02em;
+
+  &::placeholder {
+    font-weight: 400;
+    color: ${colors.gray[500]};
+  }
+`;
+
+export const ClearButton = styled.button`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+export const ToggleButton = styled.button`
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  ${setTypography(typography.button.button2)};
+  color: ${colors.gray[500]};
+`;
+
+export const HelperText = styled.span`
+  ${setTypography(typography.button.button2)};
+  color: ${colors.primary[900]};
+  letter-spacing: -0.02em;
+  padding: 0 4px;
+`;

frontend/src/pages/AdminPage/components/AdminInputField/AdminInputField.tsx

@@ -0,0 +1,78 @@
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
+import ClearButtonIcon from '@/assets/images/icons/dark_clear_button_icon.svg?react';
+import * as Styled from './AdminInputField.styles';
+
+interface AdminInputFieldProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onClear?: () => void;
+  placeholder?: string;
+  type?: 'text' | 'password';
+  isError?: boolean;
+  helperText?: string;
+  maxLength?: number;
+}
+
+const AdminInputField = ({
+  value,
+  onChange,
+  onClear,
+  placeholder,
+  type = 'text',
+  isError,
+  helperText,
+  maxLength,
+}: AdminInputFieldProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onClear?.();
+  };
+
+  const inputType =
+    type === 'password' ? (isPasswordVisible ? 'text' : 'password') : type;
+
+  return (
+    <Styled.Wrapper>
+      <Styled.Card $isError={isError}>
+        <Styled.Input
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          type={inputType}
+          maxLength={maxLength}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
+        {type === 'password' ? (
+          <Styled.ToggleButton
+            type='button'
+            onClick={() => setIsPasswordVisible((v) => !v)}
+          >
+            {isPasswordVisible ? '숨기기' : '보기'}
+          </Styled.ToggleButton>
+        ) : (
+          isFocused &&
+          value &&
+          onClear && (
+            <Styled.ClearButton
+              type='button'
+              onMouseDown={handleClear}
+              aria-label='지우기'
+            >
+              <ClearButtonIcon />
+            </Styled.ClearButton>
+          )
+        )}
+      </Styled.Card>
+      {isError && helperText && (
+        <Styled.HelperText>{helperText}</Styled.HelperText>
+      )}
+    </Styled.Wrapper>
+  );
+};
+
+export default AdminInputField;

frontend/src/pages/AdminPage/tabs/AccountEditTab/AccountEditTab.styles.ts

@@ -1,41 +1,30 @@
 import styled from 'styled-components';
+import { colors } from '@/styles/theme/colors';
+import { setTypography, typography } from '@/styles/theme/typography';
 
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 60px;
 `;
 
-export const SuccessMessage = styled.p`
-  color: #28a745; /* 성공을 의미하는 긍정적인 녹색 */
-  font-size: 0.9rem; /* 일반 텍스트보다 약간 작게 설정 */
-  text-align: left; /* 메시지 좌측 정렬 */
-  margin: 8px 0; /* 위아래로 적절한 여백 추가 */
-  font-weight: 500; /* 살짝 굵게 하여 가독성 확보 */
-`;
-
-export const ErrorMessage = styled.p`
-  color: #dc3545; /* 실패를 의미하는 명확한 빨간색 */
-  font-size: 0.9rem;
-  text-align: left;
-  margin: 8px 0;
-  font-weight: 500;
+export const FieldWrapper = styled.div<{ $hasError?: boolean }>`
+  position: relative;
+  padding-bottom: ${({ $hasError }) => ($hasError ? '10px' : '0')};
 `;
 
 export const GuidanceBox = styled.div`
   padding: 16px;
-  background-color: #f8f9fa;
+  background-color: ${colors.gray[100]};
   border-radius: 8px;
-  border: 1px solid #e9ecef;
+  border: 1px solid ${colors.gray[300]};
 `;
 
 export const GuidanceText = styled.p`
-  font-size: 0.9rem;
-  color: #495057; /* 너무 진하지 않은 회색 텍스트 */
-  line-height: 1.5; /* 줄 간격 확보로 가독성 향상 */
-  margin: 0; /* 기본 p 태그의 마진 제거 */
+  ${setTypography(typography.paragraph.p6)};
+  color: ${colors.gray[700]};
+  margin: 0;
 
-  /* 두 번째 p 태그부터는 위에 살짝 여백 추가 */
   & + & {
     margin-top: 8px;
   }

frontend/src/pages/AdminPage/tabs/AccountEditTab/AccountEditTab.tsx

@@ -6,20 +6,22 @@ import { PASSWORD_MAX } from '@/constants/adminFieldLimits';
 import { ADMIN_EVENT, PAGE_VIEW } from '@/constants/eventName';
 import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack';
 import useTrackPageView from '@/hooks/Mixpanel/useTrackPageView';
+import useDevice from '@/hooks/useDevice';
 import { ContentSection } from '@/pages/AdminPage/components/ContentSection/ContentSection';
 import * as Styled from './AccountEditTab.styles';
+import AccountEditTabMobile from './AccountEditTabMobile';
 
 const PASSWORD_REGEX =
   /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^])(?!.*\s).{8,20}$/;
 
 const AccountEditTab = () => {
+  const { isMobile, isTablet } = useDevice();
   const trackEvent = useMixpanelTrack();
   useTrackPageView(PAGE_VIEW.ADMIN_ACCOUNT_EDIT_PAGE);
 
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
-  const [successMessage, setSuccessMessage] = useState('');
-  const [isLoading, setIsLoading] = useState(false); // 1. 로딩 상태 추가
+  const [isLoading, setIsLoading] = useState(false);
 
   const isPasswordValid =
     newPassword.length > 0 && !PASSWORD_REGEX.test(newPassword);
@@ -30,8 +32,6 @@ const AccountEditTab = () => {
   const handleChangePassword = async () => {
     if (isLoading) return;
 
-    setSuccessMessage('');
-
     if (!newPassword || !confirmPassword) {
       alert('새 비밀번호와 확인 필드를 모두 입력해주세요.');
       return;
@@ -57,7 +57,6 @@ const AccountEditTab = () => {
         confirmPasswordLength: confirmPassword.length,
       });
 
-      setSuccessMessage('비밀번호가 성공적으로 변경되었습니다.');
       setNewPassword('');
       setConfirmPassword('');
     } catch (err) {
@@ -71,6 +70,21 @@ const AccountEditTab = () => {
     }
   };
 
+  if (isMobile || isTablet) {
+    return (
+      <AccountEditTabMobile
+        newPassword={newPassword}
+        setNewPassword={setNewPassword}
+        confirmPassword={confirmPassword}
+        setConfirmPassword={setConfirmPassword}
+        isLoading={isLoading}
+        isPasswordValid={isPasswordValid}
+        isPasswordMatching={isPasswordMatching}
+        onChangePassword={handleChangePassword}
+      />
+    );
+  }
+
   return (
     <Styled.Container>
       <ContentSection>
@@ -87,47 +101,44 @@ const AccountEditTab = () => {
             </Styled.GuidanceText>
           </Styled.GuidanceBox>
 
-          <InputField
-            placeholder='새 비밀번호'
-            type='password'
-            value={newPassword}
-            onChange={(e) => setNewPassword(e.target.value)}
-            onClear={() => {
-              setNewPassword('');
-              trackEvent(ADMIN_EVENT.NEW_PASSWORD_CLEAR_BUTTON_CLICKED);
-            }}
-            maxLength={PASSWORD_MAX}
-            isError={isPasswordValid}
-            isSuccess={newPassword.length > 0 && !isPasswordValid}
-            helperText={
-              isPasswordValid ? '영문, 숫자, 특수문자 포함 8~20자' : ''
-            }
-          />
-
-          <InputField
-            placeholder='새 비밀번호 재입력'
-            type='password'
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            onClear={() => {
-              setConfirmPassword('');
-              trackEvent(ADMIN_EVENT.CONFIRM_PASSWORD_CLEAR_BUTTON_CLICKED);
-            }}
-            maxLength={PASSWORD_MAX}
-            isError={isPasswordMatching}
-            isSuccess={confirmPassword.length > 0 && !isPasswordMatching}
-            helperText={
-              isPasswordMatching ? '비밀번호가 일치하지 않습니다.' : ''
-            }
-          />
-
-          {successMessage && (
-            <Styled.SuccessMessage>{successMessage}</Styled.SuccessMessage>
-          )}
+          <Styled.FieldWrapper $hasError={isPasswordValid}>
+            <InputField
+              placeholder='새 비밀번호'
+              type='password'
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              onClear={() => {
+                setNewPassword('');
+                trackEvent(ADMIN_EVENT.NEW_PASSWORD_CLEAR_BUTTON_CLICKED);
+              }}
+              maxLength={PASSWORD_MAX}
+              isError={isPasswordValid}
+              helperText={
+                isPasswordValid ? '영문, 숫자, 특수문자 포함 8~20자' : ''
+              }
+            />
+          </Styled.FieldWrapper>
+
+          <Styled.FieldWrapper $hasError={isPasswordMatching}>
+            <InputField
+              placeholder='새 비밀번호 재입력'
+              type='password'
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              onClear={() => {
+                setConfirmPassword('');
+                trackEvent(ADMIN_EVENT.CONFIRM_PASSWORD_CLEAR_BUTTON_CLICKED);
+              }}
+              maxLength={PASSWORD_MAX}
+              isError={isPasswordMatching}
+              helperText={
+                isPasswordMatching ? '비밀번호가 일치하지 않습니다.' : ''
+              }
+            />
+          </Styled.FieldWrapper>
 
           <Button
             width={'100%'}
-            animated
             onClick={handleChangePassword}
             disabled={isLoading}
           >