feat #70 : 변경된 피그마 상세 디자인 적용

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

@@ -1,28 +1,19 @@
 import { css } from '@emotion/react';
 
 export const container = css`
-  margin-bottom: 2.4rem;
+  margin-bottom: 0.8rem;
   font-size: 1.4rem;
   line-height: 1.68rem;
 `;
 
 export const wrapper = css`
-  margin-top: 1.4rem;
+  margin-top: 0.4rem;
   border-left: 0.2rem solid lightgray;
-  margin-left: 1.8rem;
+  margin-left: 2rem;
   padding-left: 1rem;
-`;
-
-export const content = css`
   display: flex;
-
-  &[data-orientation='horizontal'] {
-    flex-direction: row;
-  }
-
-  &[data-orientation='vertical'] {
-    flex-direction: column;
-  }
+  flex-direction: column;
+  gap: 0.8rem;
 `;
 
 export const defaultAnimation = css`

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

@@ -31,7 +31,7 @@ function FeedbackContents({
         </Accordion.Trigger>
       </Accordion.Header>
 
-      <Accordion.Content css={[styles.content, styles.defaultAnimation]}>
+      <Accordion.Content css={styles.defaultAnimation}>
         <div css={styles.wrapper}>
           {feedbackPages.map((page, buttonIndex) => (
             <div key={page}>

src/features/total-evaluation/components/custom-buttons/add-button.tsx

@@ -0,0 +1,18 @@
+import { FaPlus } from 'react-icons/fa6';
+
+import { useTheme } from '@emotion/react';
+
+import { BaseButton } from '@/common/components/button/base-button';
+
+import * as styles from './sidebar-control-button.styles';
+
+function AddButton() {
+  const theme = useTheme();
+  return (
+    <BaseButton css={styles.controlButtonCommonStyle}>
+      <FaPlus size={24} color={theme.colors.GRAY[700]} />
+    </BaseButton>
+  );
+}
+
+export default AddButton;

src/features/total-evaluation/components/custom-buttons/accordion-content-button.styles.ts → src/features/total-evaluation/components/custom-buttons/page-location-button.styles.ts

@@ -2,25 +2,24 @@ import { css } from '@emotion/react';
 
 import { withTheme } from '@/common/utils/with-theme';
 
-export const singleContentButton = withTheme(
+export const pageLocationButton = withTheme(
   (theme, buttonIndex: number, isCurrentContentSelected: boolean, isSidebarOpen: boolean) => css`
     display: flex;
     justify-content: flex-start;
     width: 100%;
     height: 100%;
+    padding: 0.8rem 1rem;
     border: none;
     color: ${theme.colors.GRAY[200]};
     transform: translateY(3rem);
-    padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
-    padding-left: 0.5rem;
     background-color: transparent;
     opacity: 0;
     animation: fade-in 0.2s forwards;
     animation-delay: ${buttonIndex * 0.07}s;
 
     &:hover {
-      background-color: #25252e;
+      background-color: #18171d;
+      border-radius: 0.8rem;
     }
 
     &::after {
@@ -33,6 +32,7 @@ export const singleContentButton = withTheme(
       transition: width 0.3s ease;
       content: '';
       background-color: #3f3f4e;
+      border-radius: 0.8rem;
     }
 
     @keyframes fill-right {

src/features/total-evaluation/components/custom-buttons/page-location-button.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import { BaseButton, BaseButtonProps } from '../../../../common/components/button/base-button';
+
+import * as styles from './page-location-button.styles';
+
+interface PageLocationButtonProps extends BaseButtonProps {
+  buttonIndex: number;
+  isSidebarOpen: boolean;
+  isSelected: boolean;
+}
+
+const PageLocationButton = forwardRef<HTMLButtonElement, PageLocationButtonProps>(
+  ({ buttonIndex, isSelected, isSidebarOpen, ...props }, ref) => {
+    return (
+      <BaseButton
+        css={styles.pageLocationButton(buttonIndex, isSelected, isSidebarOpen)}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+PageLocationButton.displayName = 'PageLocationButton';
+
+export { PageLocationButton };

src/features/total-evaluation/components/custom-buttons/accordion-trigger-button.styles.ts → src/features/total-evaluation/components/custom-buttons/project-title-button.styles.ts

@@ -2,14 +2,15 @@ import { css } from '@emotion/react';
 
 import { withTheme } from '@/common/utils/with-theme';
 
-export const container = css`
-  display: flex;
-  gap: 0.4rem;
-  align-items: center;
-`;
+export const container = css``;
 
-export const accordionTriggerButton = withTheme(
+export const projectTitleButton = withTheme(
   (theme, isCurrentTriggerSelected: boolean) => css`
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0.8rem;
     color: ${isCurrentTriggerSelected ? theme.colors.SORA[200] : theme.colors.GRAY[200]};
     font-size: ${isCurrentTriggerSelected && '1.6rem'};
     font-weight: ${isCurrentTriggerSelected && 'bolder'};
@@ -19,6 +20,11 @@ export const accordionTriggerButton = withTheme(
       color 0.3s ease-in-out,
       font-weight 0.3s ease-in-out,
       line-height 0.3s ease-in;
+    gap: 0.2rem;
+
+    &:hover {
+      background-color: #18171d;
+    }
 
     /* Radix의 접근성으로 인한 기본 포커스 스타일 제거 */
     &:focus {

src/features/total-evaluation/components/custom-buttons/project-title-button.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, ReactNode } from 'react';
+
+import { css } from '@emotion/react';
+
+import { BaseButton, BaseButtonProps } from '@/common/components/button/base-button';
+import Icon from '@/common/components/icon/icon';
+
+import * as styles from './project-title-button.styles';
+
+interface ProjectTitleButtonProps extends BaseButtonProps {
+  children: ReactNode;
+  isCurrentTriggerSelected: boolean;
+}
+
+const ProjectTitleButton = forwardRef<HTMLButtonElement, ProjectTitleButtonProps>(
+  ({ isCurrentTriggerSelected, children, ...props }, ref) => (
+    <BaseButton css={styles.projectTitleButton(isCurrentTriggerSelected)} ref={ref} {...props}>
+      <Icon
+        name="sidebar-menu-icon"
+        customStyle={css`
+          opacity: ${isCurrentTriggerSelected ? 1 : 0};
+          width: 0;
+          width: ${isCurrentTriggerSelected && '14px'};
+          transition:
+            opacity 0.3s ease-in-out,
+            width 0.3s ease-in-out;
+
+          path {
+            fill: ${isCurrentTriggerSelected && '#D7ADFE'};
+          }
+        `}
+      />
+      {children}
+    </BaseButton>
+  ),
+);
+ProjectTitleButton.displayName = 'ProjectTitleButton';
+
+export { ProjectTitleButton };

src/features/total-evaluation/components/custom-buttons/sidebar-close-button.tsx

@@ -1,14 +1,21 @@
 import { ButtonHTMLAttributes, forwardRef } from 'react';
 import { MdOutlineKeyboardDoubleArrowLeft } from 'react-icons/md';
 
+import { useTheme } from '@emotion/react';
+
 import { BaseButton } from '@/common/components/button/base-button';
 
+import * as styles from './sidebar-control-button.styles';
+
 const SidebarCloseButton = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
-  (props, ref) => (
-    <BaseButton {...props} ref={ref}>
-      <MdOutlineKeyboardDoubleArrowLeft size={30} />
-    </BaseButton>
-  ),
+  (props, ref) => {
+    const theme = useTheme();
+    return (
+      <BaseButton css={styles.controlButtonCommonStyle} {...props} ref={ref}>
+        <MdOutlineKeyboardDoubleArrowLeft size={24} color={theme.colors.GRAY[700]} />
+      </BaseButton>
+    );
+  },
 );
 SidebarCloseButton.displayName = 'SidebarCloseButton';
 

src/features/total-evaluation/components/custom-buttons/sidebar-control-button.styles.ts

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+
+export const controlButtonCommonStyle = css`
+  padding: 0.8rem;
+  border-radius: 0.8rem;
+
+  &:hover {
+    background-color: #18171d;
+  }
+`;

src/features/total-evaluation/components/custom-buttons/sidebar-open-button.tsx

@@ -3,10 +3,17 @@ import { MdOutlineKeyboardDoubleArrowRight } from 'react-icons/md';
 
 import { BaseButton } from '@/common/components/button/base-button';
 
+import * as styles from './sidebar-control-button.styles';
+
 const SidebarOpenButton = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
   (props, ref) => (
-    <BaseButton {...props} ref={ref}>
-      <MdOutlineKeyboardDoubleArrowRight size={30} color="black" />
+    <BaseButton
+      css={styles.controlButtonCommonStyle}
+      style={{ backgroundColor: 'transparent' }}
+      {...props}
+      ref={ref}
+    >
+      <MdOutlineKeyboardDoubleArrowRight size={24} color="black" />
     </BaseButton>
   ),
 );