[#70] - 사이드바 완성 디자인 적용

package.json

@@ -33,6 +33,7 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.6",
     "@storybook/preview-api": "^8.6.2",
     "@tanstack/react-query": "^5.66.7",

src/common/components/button/button.stories.tsx → src/common/stories/button.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from './Button';
-import Icon from '../icon/icon';
+import { Button } from '../components/button/Button';
+import Icon from '../components/icon/icon';
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',

src/common/stories/sidebar.stories.tsx

@@ -0,0 +1,28 @@
+import { ThemeProvider } from '@emotion/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { theme } from '@/assets/styles/theme';
+import SelectedPageProvider from '@/features/total-evaluation/components/context/selected-page/selected-page-provider';
+import SidebarProvider from '@/features/total-evaluation/components/context/sidebar/sidebar-provider';
+import FeedbackSidebar from '@/features/total-evaluation/components/feedback-sidebar/feedback-sidebar';
+
+const meta: Meta<typeof FeedbackSidebar> = {
+  title: 'Components/FeedbackSidebar',
+  component: FeedbackSidebar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FeedbackSidebar>;
+
+export const Default: Story = () => (
+  <SidebarProvider>
+    <SelectedPageProvider>
+      <ThemeProvider theme={theme}>
+        <FeedbackSidebar />
+      </ThemeProvider>
+    </SelectedPageProvider>
+  </SidebarProvider>
+);
+
+Default.args = {};

src/features/total-evaluation/components/accordion-list/accordion-list.tsx

@@ -2,51 +2,22 @@ import { ReactNode } from 'react';
 
 import * as Accordion from '@radix-ui/react-accordion';
 
-import SingleAccordionItem from '@/features/total-evaluation/components/accordion-list/single-accordion-item';
-
-export type SingleSingleAccordionItemType = {
+export type AccordionItemsType = {
   accordionTrigger: string;
   accordionContents: string[];
 };
 
 interface AccordionListProps {
-  isSidebarOpen: boolean;
-  currentOpenedTrigger: string[];
-  currentSelectedContent: string | null;
-  sidebarListData: SingleSingleAccordionItemType[];
   type: 'multiple' | 'single';
-  renderTrigger?: (accordionTrigger: string) => ReactNode;
-  renderContent?: (submenu: string) => ReactNode;
+  orientation: 'vertical' | 'horizontal';
+  children: ReactNode;
 }
 
-function AccordionList({
-  isSidebarOpen,
-  currentOpenedTrigger,
-  currentSelectedContent,
-  sidebarListData,
-  type,
-  renderTrigger,
-  renderContent,
-}: AccordionListProps) {
+function AccordionList({ type, orientation, children }: AccordionListProps) {
   return (
-    <div>
-      <Accordion.Root type={type}>
-        {sidebarListData.map(({ accordionTrigger, accordionContents }) => {
-          return (
-            <SingleAccordionItem
-              key={accordionTrigger}
-              isSidebarOpen={isSidebarOpen}
-              accordionTrigger={accordionTrigger}
-              accordionContents={accordionContents}
-              renderContent={renderContent}
-              renderTrigger={renderTrigger}
-              currentOpenedTrigger={currentOpenedTrigger}
-              currentSelectedContent={currentSelectedContent}
-            />
-          );
-        })}
-      </Accordion.Root>
-    </div>
+    <Accordion.Root type={type} orientation={orientation}>
+      {children}
+    </Accordion.Root>
   );
 }
 export default AccordionList;

src/features/total-evaluation/components/accordion-list/feedback-contents.styles.ts

@@ -0,0 +1,49 @@
+import { css } from '@emotion/react';
+
+export const container = css`
+  margin-bottom: 0.8rem;
+  font-size: 1.4rem;
+  line-height: 1.68rem;
+`;
+
+export const wrapper = css`
+  margin-top: 0.4rem;
+  border-left: 0.2rem solid lightgray;
+  margin-left: 2rem;
+  padding-left: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
+
+export const defaultAnimation = css`
+  overflow: hidden;
+
+  &[data-state='open'] {
+    animation: slide-down 300ms ease-out;
+  }
+
+  &[data-state='closed'] {
+    animation: slide-up 300ms ease-out;
+  }
+
+  @keyframes slide-down {
+    from {
+      max-height: 0;
+    }
+
+    to {
+      max-height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      max-height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      max-height: 0;
+    }
+  }
+`;

src/features/total-evaluation/components/accordion-list/feedback-contents.tsx

@@ -0,0 +1,43 @@
+import * as Accordion from '@radix-ui/react-accordion';
+
+import {
+  RenderAccordionContentButtonType,
+  RenderAccordionTriggerButtonType,
+} from '../../types/sidebar-Info-types';
+
+import * as styles from './feedback-contents.styles';
+
+type EvalutationDataType = {
+  projectTitle: string;
+  feedbackPages: string[];
+};
+
+interface AccordionItemProps {
+  dataList: EvalutationDataType[];
+  renderTriggerButton: RenderAccordionTriggerButtonType;
+  renderContentButton: RenderAccordionContentButtonType;
+}
+
+function FeedbackContents({
+  dataList,
+  renderContentButton,
+  renderTriggerButton,
+}: AccordionItemProps) {
+  return dataList.map(({ projectTitle, feedbackPages }) => (
+    <Accordion.Item key={projectTitle} value={projectTitle} css={styles.container}>
+      <Accordion.Header>
+        <Accordion.Trigger asChild>{renderTriggerButton(projectTitle)}</Accordion.Trigger>
+      </Accordion.Header>
+
+      <Accordion.Content css={styles.defaultAnimation}>
+        <div css={styles.wrapper}>
+          {feedbackPages.map((page, buttonIndex) => (
+            <div key={page}>{renderContentButton(page, buttonIndex)}</div>
+          ))}
+        </div>
+      </Accordion.Content>
+    </Accordion.Item>
+  ));
+}
+
+export default FeedbackContents;

src/features/total-evaluation/components/context/selected-page/selected-page-context.tsx

@@ -0,0 +1,11 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+interface SelectedPageContextProps {
+  selectedPage: string | null;
+  setSelectedPage: Dispatch<SetStateAction<string | null>>;
+}
+
+export const SelectedPageContext = createContext<SelectedPageContextProps>({
+  selectedPage: null,
+  setSelectedPage: () => {},
+});