fix-fe: ProcessColumn QA

frontend/src/components/dashboard/ProcessColumn/ProcessDescription/ProcessDescription.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ProcessDescription from './index';
+
+const meta: Meta<typeof ProcessDescription> = {
+  title: 'Components/ProcessColumn/ProcessDescription',
+  component: ProcessDescription,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '프로세스의 설명을 렌더링합니다. 더보기 버튼을 클릭하면 설명이 전체로 펼쳐집니다.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Child) => (
+      <div
+        style={{
+          width: '25rem',
+        }}
+      >
+        <Child />
+      </div>
+    ),
+  ],
+  args: {
+    description: '프로세스 설명입니다.',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProcessDescription>;
+
+export const Default: Story = {};

frontend/src/components/dashboard/ProcessColumn/ProcessDescription/index.tsx

@@ -0,0 +1,32 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import S from './style';
+
+interface ProcessDescriptionProps {
+  description: string;
+}
+
+export default function ProcessDescription({ description }: ProcessDescriptionProps) {
+  const [isOverflow, setOverflow] = useState(false);
+  const [showMore, setShowMore] = useState(false);
+
+  const toggleShowMore = () => setShowMore((prev) => !prev);
+
+  const descriptionRef = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (descriptionRef.current) {
+      setOverflow(descriptionRef.current.scrollWidth > descriptionRef.current.clientWidth);
+    }
+  }, [description]);
+
+  return (
+    <S.Container showMore={showMore}>
+      <S.Description
+        ref={descriptionRef}
+        showMore={showMore}
+      >
+        {description}
+      </S.Description>
+      {isOverflow && <S.MoreButton onClick={toggleShowMore}>{showMore ? '접기' : '더보기'}</S.MoreButton>}
+    </S.Container>
+  );
+}

frontend/src/components/dashboard/ProcessColumn/ProcessDescription/style.ts

@@ -0,0 +1,48 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+const Container = styled.div<{ showMore: boolean }>`
+  width: 100%;
+  display: flex;
+  align-items: baseline;
+
+  ${({ showMore }) =>
+    showMore &&
+    css`
+      flex-direction: column;
+      align-items: flex-end;
+    `}
+`;
+
+const Description = styled.p<{ showMore: boolean }>`
+  width: 100%;
+
+  ${({ theme }) => theme.typography.common.block};
+  color: ${({ theme }) => theme.baseColors.grayscale[700]};
+  margin-bottom: 0;
+  padding: 0.4rem;
+
+  ${({ showMore }) =>
+    !showMore &&
+    css`
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `}
+`;
+
+const MoreButton = styled.button`
+  ${({ theme }) => theme.typography.common.block};
+  color: ${({ theme }) => theme.baseColors.grayscale[500]};
+
+  white-space: nowrap;
+  margin: 0;
+`;
+
+const S = {
+  Container,
+  Description,
+  MoreButton,
+};
+
+export default S;

frontend/src/components/dashboard/ProcessColumn/index.tsx

@@ -8,6 +8,7 @@ import { useModal } from '@contexts/ModalContext';
 
 import S from './style';
 import ApplicantCard from '../ApplicantCard';
+import ProcessDescription from './ProcessDescription/index';
 
 interface ProcessColumnProps {
   process: Process;
@@ -38,6 +39,7 @@ export default function ProcessColumn({ process }: ProcessColumnProps) {
     <S.ProcessWrapper>
       <S.Header>
         <S.Title>{process.name}</S.Title>
+        <ProcessDescription description={process.description} />
       </S.Header>
       <S.ApplicantList>
         {process.applicants.map(

frontend/src/components/dashboard/ProcessColumn/style.ts

@@ -3,11 +3,13 @@ import { hideScrollBar } from '@styles/utils';
 
 const ProcessWrapper = styled.section`
   width: 100%;
-  min-width: 25rem;
+  min-width: 28rem;
+  max-width: 28rem;
+
   height: 100%;
-  padding: 20px 12px 12px 12px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.baseColors.grayscale[400]};
+  padding: 1.2rem;
+  border-radius: 0.8rem;
+  border: 0.1rem solid ${({ theme }) => theme.baseColors.grayscale[400]};
   background-color: ${({ theme }) => theme.baseColors.grayscale[50]};
 
   overflow-y: scroll;
@@ -17,16 +19,19 @@ const ProcessWrapper = styled.section`
 
 const Header = styled.header`
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   justify-content: space-between;
+  gap: 0.8rem;
 
-  padding: 8px 4px;
-  margin-bottom: 20px;
-  border-bottom: 1px solid ${({ theme }) => theme.baseColors.grayscale[400]};
+  padding: 0.8rem 0.4rem;
+  margin-bottom: 2rem;
+  border-bottom: 0.1rem solid ${({ theme }) => theme.baseColors.grayscale[400]};
 `;
 
 const Title = styled.h2`
   ${({ theme }) => theme.typography.heading[500]};
-  padding: 4px;
+  padding: 0.4rem;
 `;
 
 const ApplicantList = styled.ul`

frontend/src/mocks/processMockData.json

@@ -43,7 +43,7 @@
         }
       ],
       "name": "지원서",
-      "description": "지원서를 확인한다."
+      "description": "지원서를 확인한다.지원서를 확인한다.지원서를 확인한다.지원서를 확인한다.지원서를 확인한다.지원서를 확인한다.지원서를 확인한다."
     },
     {
       "processId": 4,