Merge pull request #179 from Ludo-SMP/feat/SP-515-implement-accordion

아코디언 컴포넌트 구현

src/Assets/SelectArrow.tsx

@@ -1,6 +1,20 @@
-export const SelectArrow = () => {
+interface SelectArrowProps {
+  isOpen?: boolean;
+}
+
+export const SelectArrow = ({ isOpen }: SelectArrowProps) => {
   return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="24"
+      height="24"
+      transform={`${isOpen ? 'rotate(180)' : 'rotate(0)'}`}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        transition: 'transform 0.3s ease',
+      }}
+    >
       <path
         id="Vector"
         d="M20.9999 7.92031C20.9999 8.07391 20.9414 8.22751 20.8241 8.34451L12.8339 16.335C12.374 16.7949 11.6258 16.7949 11.1662 16.335L3.17572 8.34451C2.94142 8.11021 2.94142 7.73041 3.17572 7.49611C3.41002 7.26181 3.78982 7.26181 4.02412 7.49611L11.9999 15.4719L19.9757 7.49611C20.21 7.26181 20.5898 7.26181 20.8241 7.49611C20.9414 7.61341 20.9999 7.76671 20.9999 7.92031Z"

src/Components/Accordion/Accordion.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from '.';
+
+const meta = {
+  component: Accordion,
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    title: '알림 제목',
+    children: '알림 내용',
+  },
+} satisfies Story;
+
+export const Description: Story = {
+  args: {
+    title: '알림 제목',
+    description: '알림 설명',
+    children: '알림 내용',
+  },
+} satisfies Story;

src/Components/Accordion/index.tsx

@@ -0,0 +1,127 @@
+import { SelectArrow } from '@/Assets/SelectArrow';
+import { textEllipsis } from '@/Styles/theme';
+import { useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+export interface AccordionProps {
+  /** 아코디언 써머리 영역에 나타날 제목 */
+  title: string;
+
+  /** 아코디언 제목 아래의 설명 */
+  description?: string;
+
+  /** 아코디언을 펼쳤을 때 나타날 내용 */
+  children?: React.ReactNode;
+}
+
+/** 마이페이지 아코디언 */
+const Accordion = (props: AccordionProps) => {
+  const { title, description, children } = props;
+
+  const [isOpen, setIsOpen] = useState<boolean | null>(null);
+
+  const [contentHeight, setContentHeight] = useState<number>(0);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setContentHeight(contentRef?.current?.clientHeight ?? 0);
+    setIsOpen(null);
+  }, []);
+
+  return (
+    <Container>
+      <AccordionSummary onClick={() => setIsOpen((prev) => !prev)}>
+        <SummaryWrap>
+          <Title>{title}</Title>
+          {description && <Description>{description}</Description>}
+        </SummaryWrap>
+        <SelectArrow isOpen={isOpen} />
+      </AccordionSummary>
+
+      <AccordionDetail ref={contentRef} isOpen={isOpen} contentHeight={contentHeight}>
+        {children}
+      </AccordionDetail>
+    </Container>
+  );
+};
+
+const SummaryWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: calc(100% - 24px);
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 808px;
+  padding: 16px 0px;
+  gap: 10px;
+`;
+
+const AccordionSummary = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  cursor: pointer;
+  min-width: 300px;
+  background-color: ${({ theme }) => theme.color.white};
+  min-height: 56px;
+`;
+
+export const Title = styled.div`
+  color: ${({ theme }) => theme.color.black5};
+
+  /* TODO: 타이포 브랜치 머지 후, typo 적용 */
+  /* Page/Sub Title-Medium */
+  font-family: 'Pretendard500';
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 32px;
+
+  ${textEllipsis}
+`;
+
+export const Description = styled.div`
+  color: ${({ theme }) => theme.color.black2};
+
+  /* TODO: 타이포 브랜치 머지 후, typo 적용 */
+  /* List,Alert/Lable-Medium */
+  font-family: 'Pretendard400';
+  font-size: 16px;
+  line-height: 24px;
+
+  ${textEllipsis}
+`;
+
+const AccordionDetail = styled.p<{ isOpen?: null | boolean; contentHeight: number }>`
+  min-width: 300px;
+  padding: 8px 64px 8px 0px;
+  gap: 16px;
+
+  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
+  opacity: 0;
+
+  margin-top: -${({ contentHeight }) => contentHeight}px;
+
+  ${({ isOpen }) =>
+    isOpen
+      ? css`
+          opacity: 1;
+          margin-top: 0;
+          transition:
+            margin-top 0.2s ease-in-out,
+            opacity 0.7s ease-in-out,
+            visibility 0.4s ease-in-out;
+        `
+      : typeof isOpen === 'boolean' &&
+        css`
+          transition:
+            margin-top 0.2s ease-in-out,
+            opacity 0.3s ease-in-out;
+        `}
+`;
+
+export { Accordion };

src/Styles/theme.ts

@@ -1,5 +1,5 @@
 // theme.ts
-import { DefaultTheme } from 'styled-components';
+import { DefaultTheme, css } from 'styled-components';
 
 export const color = {
   white: '#ffffff',
@@ -74,3 +74,9 @@ export const theme: DefaultTheme = {
   borderRadius,
   buttonSize,
 };
+
+export const textEllipsis = css`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;