feat: Badge size prop (sm/md) and use Badge in ExperienceCard

src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx

@@ -64,10 +64,10 @@ describe('ExperienceCard', () => {
       expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Senior Developer');
     });
 
-    it('period badge has brutal-border, bg-blue, text-cream, text-sm', () => {
+    it('period badge has brutal-border, bg-blue, text-cream, md size', () => {
       render(<ExperienceCard {...DEFAULT_PROPS} />);
       const badge = screen.getByText('2021 – 2024');
-      expect(badge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
+      expect(badge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'px-4', 'py-2', 'text-sm');
     });
 
     it('description renders via RichText with rich-text class', () => {

src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx

@@ -1,4 +1,4 @@
-import { Card, CardSidebar, CardTitle, RichText } from '$shared/ui';
+import { Badge, Card, CardSidebar, CardTitle, RichText } from '$shared/ui';
 
 type Props = {
   /**
@@ -10,7 +10,7 @@ type Props = {
    */
   company: string;
   /**
-   * Employment period (e.g. "2021 – 2024")
+   * Employment period (e.g. "Jan 2021 – Dec 2024")
    */
   period: string;
   /**
@@ -38,17 +38,14 @@ export function ExperienceCard({ title, company, period, description, stack, cla
       <CardSidebar
         sidebar={
           <div className="flex flex-col gap-4">
-            <span className="brutal-border px-4 py-2 bg-blue text-cream text-sm self-start">{period}</span>
+            <Badge size="md">{period}</Badge>
             <p className="text-base font-medium">{company}</p>
             {stack.length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {stack.map((tech) => (
-                  <span
-                    key={tech}
-                    className="brutal-border px-3 py-1 bg-cream text-blue text-sm uppercase tracking-wide"
-                  >
+                  <Badge key={tech} variant="outline">
                     {tech}
-                  </span>
+                  </Badge>
                 ))}
               </div>
             )}