Feat/markup/mypage/DEVING-44

src/app/(user-page)/mypage/components/BasicEdit.tsx

@@ -21,10 +21,13 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
   const [ageLabel, setAgeLabel] = useState('선택 안함');
   const [locationLabel, setLocationLabel] = useState('선택 안함');
 
+  // 소개글 글자 수 상태 관리
+  const [introLength, setIntroLength] = useState(0);
+
   // 커스텀 훅을 사용하여 프로필 데이터 가져오기
   const { data: profileData, isLoading } = useProfileQuery();
 
-  // 프로필 업데이트 뮤테이션 훅 사용 - 이 부분이 누락되어 있었습니다
+  // 프로필 업데이트 뮤테이션 훅 사용
   const { mutate: updateProfile, isPending: isUpdating } =
     useUpdateProfileMutation();
 
@@ -35,6 +38,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
     control,
     setValue,
     reset,
+    watch,
     formState: { errors, isSubmitting },
   } = useForm<IFormData>({
     defaultValues: {
@@ -53,6 +57,12 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
     name: 'gender',
   });
 
+  // 소개글 감시하여 글자 수 업데이트
+  const introValue = watch('intro');
+  useEffect(() => {
+    setIntroLength(introValue?.length || 0);
+  }, [introValue]);
+
   // 옵션 데이터 - useMemo로 메모이제이션
   const positionOptions = useMemo(
     () => [
@@ -115,6 +125,9 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
         location: profile.location || '',
       });
 
+      // 소개글 글자 수 초기화
+      setIntroLength(profile.intro?.length || 0);
+
       // 드롭다운 라벨 초기 설정
       const positionOption = positionOptions.find(
         (opt) => opt.value === profile.position,
@@ -133,6 +146,11 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
 
   // 폼 제출 처리
   const onSubmit = (data: IFormData) => {
+    // 글자 수 검사 추가
+    if (data.intro && data.intro.length > 250) {
+      return;
+    }
+
     updateProfile(data, {
       onSuccess: () => {
         onEditComplete();
@@ -193,28 +211,43 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
             id="name-input"
             type="text"
             {...register('name', { required: true })}
-            className="typo-button1 h-[50px] rounded-[8px] border-b border-Cgray300 bg-Cgray200 py-2 pl-[16px] text-Cgray700 focus:outline-none"
+            className="rounded-2 typo-button1 h-[50px] border-b border-Cgray300 bg-Cgray200 px-4 py-2 text-Cgray700 focus:outline-none"
           />
           {errors.name && (
-            <span className="text-red-500 text-sm">이름을 입력해주세요</span>
+            <span className="text-sm text-warning">이름을 입력해주세요</span>
           )}
         </div>
 
         {/* 자기소개 텍스트 영역 */}
-        <div className="flex flex-col gap-[8px]">
-          <label htmlFor="intro-input" className="typo-head3 text-main">
-            자기소개
-          </label>
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <label htmlFor="intro-input" className="typo-head3 text-main">
+              자기소개
+            </label>
+          </div>
           <textarea
             id="intro-input"
-            {...register('intro')}
+            {...register('intro', {
+              maxLength: {
+                value: 250,
+                message: '최대 250자까지 작성 가능합니다',
+              },
+            })}
             rows={3}
-            className="h-[140px] resize-none rounded-[8px] border-b border-Cgray300 bg-Cgray200 py-2 pl-[16px] text-Cgray700 focus:outline-none"
+            className="rounded-2 h-[140px] resize-none border-b border-Cgray300 bg-Cgray200 px-4 py-2 text-Cgray700 focus:outline-none"
           />
+          {errors.intro && (
+            <span className="text-sm text-warning">{errors.intro.message}</span>
+          )}
+          {introLength > 250 && !errors.intro && (
+            <span className="text-sm text-warning">
+              최대 250자까지 작성 가능합니다
+            </span>
+          )}
         </div>
 
         {/* 포지션 드롭다운 */}
-        <div className="flex flex-col gap-[16px] border-b border-Cgray300 pb-[32px]">
+        <div className="flex flex-col gap-4 border-b border-Cgray300 pb-8">
           <div className="typo-head3 text-main">포지션</div>
           <Controller
             name="position"
@@ -241,7 +274,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
               <button
                 key={option}
                 type="button"
-                className={`flex-1 rounded-md px-4 py-2 transition-colors duration-200 ${
+                className={`flex-1 rounded-md px-1 py-2 transition-colors duration-200 ${
                   currentGender === option
                     ? 'bg-main font-medium text-white'
                     : 'bg-white'
@@ -307,7 +340,7 @@ const BasicEdit = ({ onEditComplete }: BasicEditProps) => {
           <Button
             type="submit"
             className="h-[40px] w-[140px] select-none md:h-[46px]"
-            disabled={isSubmitting || isUpdating}
+            disabled={isSubmitting || isUpdating || introLength > 250}
           >
             {isUpdating ? '저장 중...' : '변경사항 저장'}
           </Button>

src/app/(user-page)/mypage/components/BasicInfo.tsx

@@ -1,19 +1,15 @@
 import { Button } from '@/components/ui/Button';
-import { useQuery } from '@tanstack/react-query';
+import { useProfileQuery } from '@/hooks/queries/useMyPageQueries';
 
-import { getProfile } from '../../../../service/api/mypageProfile';
 import SkeletonBasicInfo from './skeletons/SkeletonBasicInfo';
 
 interface BasicInfoProps {
   onEnableEdit: () => void;
 }
 
 const BasicInfo = ({ onEnableEdit }: BasicInfoProps) => {
-  // tanstack query를 사용하여 사용자 프로필 데이터 불러오기
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['profile'],
-    queryFn: getProfile,
-  });
+  // Use the custom hook instead of direct useQuery
+  const { data, isLoading, error } = useProfileQuery();
 
   // 사용자 데이터 포맷팅
   const userData = {

src/app/(user-page)/mypage/components/ContactEdit.tsx

@@ -81,7 +81,7 @@ const ContactEdit = ({ onEditComplete }: ContactEditProps) => {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="mb-6 w-full rounded-[16px] border border-Cgray300 p-[32px]"
+      className="w-full rounded-[16px] border border-Cgray300 p-[32px]"
     >
       <div className="flex flex-col gap-[32px]">
         <div className="flex flex-col gap-[8px]">

src/app/(user-page)/mypage/components/PasswordEdit.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useToast } from '@/components/common/ToastContext';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useUpdatePasswordMutation } from '@/hooks/queries/useMyPageQueries';
@@ -16,6 +17,9 @@ interface PasswordEditProps {
 }
 
 const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
+  // Toast 컨텍스트 사용
+  const { showToast } = useToast();
+
   // React Hook Form 설정
   const {
     register,
@@ -58,7 +62,11 @@ const PasswordEdit = ({ onEditComplete }: PasswordEditProps) => {
       },
       {
         onSuccess: () => {
-          // 성공 시 편집 모드 종료
+          // 성공 시 토스트 메시지 표시
+          showToast('비밀번호가 성공적으로 변경되었습니다.', 'success', {
+            duration: 3000,
+          });
+          // 편집 모드 종료
           onEditComplete();
         },
         onError: () => {

src/app/(user-page)/mypage/components/TechStackEdit.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { Button } from '@/components/ui/Button';
+// Button 컴포넌트 import 추가
 import {
   useProfileQuery,
   useUpdateSkillsMutation,
@@ -16,9 +18,13 @@ import TechButtonList from '../../../../components/ui/tech-stack/tech-stack-comp
 
 interface TechStackEditProps {
   onEditComplete: () => void;
+  maxSelections?: number;
 }
 
-const TechStackEdit = ({ onEditComplete }: TechStackEditProps) => {
+const TechStackEdit = ({
+  onEditComplete,
+  maxSelections = 999,
+}: TechStackEditProps) => {
   const queryClient = useQueryClient(); // 추가: 직접 queryClient 참조
   const [activeCategory, setActiveCategory] = useState<CategoryType>('all');
 
@@ -42,7 +48,7 @@ const TechStackEdit = ({ onEditComplete }: TechStackEditProps) => {
     handleRemoveSelection,
     setInitialSelection,
   } = useTechSelection({
-    maxSelections: 5,
+    maxSelections: maxSelections,
   });
 
   // 초기 스킬 설정 - 단 한 번만 실행되도록 개선
@@ -73,12 +79,9 @@ const TechStackEdit = ({ onEditComplete }: TechStackEditProps) => {
   }
 
   return (
-    <div className="rounded-lg border border-Cgray300 bg-Cgray200 p-4">
+    <div className="rounded-lg border border-Cgray300 bg-BG p-[32px]">
       <div className="mb-4 flex items-center justify-between">
-        <h3 className="typo-head3 text-Cgray700">기술 스택 편집</h3>
-        <span className="text-xs text-Cgray500">
-          최대 5개 선택 가능 ({selectedCount}/5)
-        </span>
+        <div className="typo-head3 text-main">기술 스택 편집</div>
       </div>
 
       {/* 선택된 기술 목록 */}
@@ -102,26 +105,28 @@ const TechStackEdit = ({ onEditComplete }: TechStackEditProps) => {
         icons={getIconsByCategory(activeCategory)}
         clickedButtons={clickedButtons}
         selectedCount={selectedCount}
-        maxSelections={5}
+        maxSelections={maxSelections}
         onButtonClick={handleButtonClick}
+        className="bg-transparent"
       />
 
-      <div className="mt-4 flex justify-end gap-3">
-        <button
+      <div className="mt-4 flex justify-between">
+        <Button
           type="button"
+          variant="outline"
+          className="h-[40px] w-[140px] md:h-[46px]"
           onClick={onEditComplete}
-          className="rounded-md border border-Cgray300 px-4 py-2 text-Cgray700"
         >
           취소
-        </button>
-        <button
+        </Button>
+        <Button
           type="button"
-          onClick={handleSave}
-          className="rounded-md bg-main px-4 py-2 text-white"
+          className="h-[40px] w-[140px] select-none md:h-[46px]"
           disabled={isUpdating}
+          onClick={handleSave}
         >
-          {isUpdating ? '저장 중...' : '저장'}
-        </button>
+          {isUpdating ? '저장 중...' : '변경사항 저장'}
+        </Button>
       </div>
     </div>
   );

src/app/(user-page)/mypage/components/TechStackInfo.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/Button';
 import { useProfileQuery } from '@/hooks/queries/useMyPageQueries';
 import { getIconColor, getIconComponent } from '@/util/getIconDetail';
 import React from 'react';
@@ -20,15 +21,9 @@ const TechStackInfo = ({ onEnableEdit }: TechStackInfoProps) => {
   }
 
   return (
-    <div className="rounded-lg border border-Cgray300 bg-Cgray200 p-4">
+    <div className="rounded-[16px] border border-Cgray300 bg-BG p-[32px]">
       <div className="mb-4 flex items-center justify-between">
-        <h3 className="typo-head3 text-Cgray700">기술 스택</h3>
-        <button
-          onClick={onEnableEdit}
-          className="hover:text-main-dark text-sm text-main"
-        >
-          편집
-        </button>
+        <div className="typo-head3 text-Cgray700">기술 스택</div>
       </div>
 
       {userSkills.length > 0 ? (
@@ -42,7 +37,7 @@ const TechStackInfo = ({ onEnableEdit }: TechStackInfoProps) => {
                 className="flex items-center gap-1 rounded-full border border-main bg-Cgray100 px-2 py-1 shadow-sm"
               >
                 <span className="flex-shrink-0">
-                  <Icon size={14} color={color} />
+                  <Icon size={20} color={color} />
                 </span>
                 <span
                   style={{ color }}
@@ -55,8 +50,17 @@ const TechStackInfo = ({ onEnableEdit }: TechStackInfoProps) => {
           })}
         </div>
       ) : (
-        <p className="text-sm text-Cgray500">등록된 기술 스택이 없습니다.</p>
+        <p className=" text-Cgray500">등록된 기술 스택이 없습니다.</p>
       )}
+      <div className="flex justify-center pt-[32px] md:justify-start">
+        <Button
+          variant="outline"
+          className="h-[40px] w-[295px] md:h-[46px] md:w-[280px]"
+          onClick={onEnableEdit}
+        >
+          기술스택 변경
+        </Button>
+      </div>
     </div>
   );
 };

src/components/common/Header.tsx

@@ -79,6 +79,7 @@ const AfterLogin = ({ userInfo }: { userInfo: IUserInfo }) => {
                 src={userInfo.profilePic}
                 width={40}
                 height={40}
+                className="h-10 w-10 rounded-full"
                 alt="프로필 이미지"
               />
             ),

src/components/ui/tech-stack/tech-stack-components/TechButtonList.tsx

@@ -9,6 +9,7 @@ interface TechButtonListProps {
   selectedCount: number;
   maxSelections: number;
   onButtonClick: (name: string) => void;
+  className?: string;
 }
 
 const TechButtonList = ({
@@ -17,9 +18,10 @@ const TechButtonList = ({
   selectedCount,
   maxSelections,
   onButtonClick,
+  className = '',
 }: TechButtonListProps): JSX.Element => {
   return (
-    <div className="mt-4 rounded-md bg-Cgray200 p-4">
+    <div className={`mt-4 rounded-md bg-Cgray200 p-4 ${className}`}>
       <div
         className="h-[140px] overflow-y-auto pr-2"
         style={{