[feature] 상세페이지 콘텐츠에 애니메이션을 추가한다

frontend/src/pages/ClubDetailPage/ClubDetailPage.styles.ts

@@ -70,4 +70,17 @@ export const TabButton = styled.button<{ $active: boolean }>`
   }
 `;
 
-export const TabContent = styled.div``;
+export const TabContent = styled.div`
+  animation: fadeIn 0.3s ease-in-out;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;

frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.styles.ts

@@ -186,11 +186,18 @@ export const ArrowIcon = styled.svg<{ $isOpen: boolean }>`
   flex-shrink: 0;
 `;
 
-export const AnswerContainer = styled.div`
-  padding: 0 20px 20px 20px;
+export const AnswerContainer = styled.div<{ $isOpen: boolean }>`
+  max-height: ${({ $isOpen }) => ($isOpen ? '500px' : '0')};
+  opacity: ${({ $isOpen }) => ($isOpen ? '1' : '0')};
+  padding: ${({ $isOpen }) => ($isOpen ? '0 20px 20px 20px' : '0 20px')};
+  overflow: hidden;
+  transition:
+    max-height 0.3s ease-in-out,
+    opacity 0.3s ease-in-out,
+    padding 0.3s ease-in-out;
 
   ${media.mobile} {
-    padding: 0 16px 16px 16px;
+    padding: ${({ $isOpen }) => ($isOpen ? '0 16px 16px 16px' : '0 16px')};
   }
 `;
 

frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsx

@@ -124,11 +124,9 @@ const ClubIntroContent = ({
                       />
                     </Styled.ArrowIcon>
                   </Styled.QuestionRow>
-                  {isOpen && (
-                    <Styled.AnswerContainer>
-                      <Styled.AnswerBox>{faq.answer}</Styled.AnswerBox>
-                    </Styled.AnswerContainer>
-                  )}
+                  <Styled.AnswerContainer $isOpen={isOpen}>
+                    <Styled.AnswerBox>{faq.answer}</Styled.AnswerBox>
+                  </Styled.AnswerContainer>
                 </Styled.FaqItem>
               );
             })}