impl document viewer page #83

sparcscasio · 2025-01-24T07:32:34Z

요약 *

It closes #82

스크린샷

생각해보니 페이지를 /example/casio로 만들고 있었네요..?
작업 끝나면 파일 위치 변경 예정

"use client";

import TimelineTable from "@sparcs-students/web/features/document/components/TimelineTable";

const CompoenentPage: React.FC = () => {
  const mockTimeLine = [
    {
      startDate: new Date("2025-01-24"),
      endDate: new Date("2025-01-28"),
      content: "집행운영회 운영",
    },
    {
      startDate: new Date("2025-01-24"),
      endDate: new Date("2025-01-28"),
      content: "메모가 있는 경우",
      memo: "기이이이이ㅣ이이이이이ㅣ이이ㅣ이이이이이ㅣ이이ㅣ이이이이이ㅣ이이ㅣ이이이이이ㅣ이이ㅣ이이이이이ㅣ이이인메모",
    },
  ];

  return <TimelineTable contents={mockTimeLine} />;
};

export default CompoenentPage;

이후 Task *

table 구현하기

wjeongchoi · 2025-01-24T11:51:08Z

packages/web/src/app/document-lookup/project-proposal/result/[category]/detail/[id]/page.tsx

+const RowWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 60px;
+`;


이건 flexwrapper로 대체 가능할 것 같아요

wjeongchoi · 2025-01-24T11:51:54Z

packages/web/src/app/document-lookup/project-proposal/result/[category]/detail/[id]/page.tsx

+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-bottom: 48px;
+`;


이것도 flexwrapper로 쓰고 padding 대신 아래에 있는 컴포넌트랑 gap 가지게 묶어주세요

wjeongchoi · 2025-01-24T11:52:43Z

packages/web/src/app/document-lookup/project-proposal/result/[category]/detail/[id]/page.tsx

+    { name: "카테고리", path: "/category" },
+    { name: "서브카테고리", path: "/category/subcategory" },
+    { name: "상세 페이지", path: "/category/subcategory/detail" },


사업명 까지는 못 맞춰도 예결산 조회 / 사업 계획서 까지는 맞춰주세요

wjeongchoi · 2025-01-24T11:54:22Z

packages/web/src/app/document-lookup/project-proposal/result/[category]/detail/[id]/page.tsx

+            />
+            <TextAreaWithHeader header="사업 일시" contents={["contents1"]} />
+          </RowWrapper>
+          <div ref={thirdRow}>


rowwrapper 쓰다가 중간에 div로 바뀐 것 같아요

wjeongchoi · 2025-01-24T11:55:47Z

packages/web/src/common/components/Index.tsx

코드 맨 위에 주석으로 어떤 컴포넌트인지 메모 남겨주면 좋을 것 같아요

wjeongchoi · 2025-01-24T11:58:44Z

packages/web/src/features/document/components/TextAreaWithHeader.tsx

/features/report 로 옮겨주세요

wjeongchoi · 2025-01-24T11:59:01Z

packages/web/src/features/document/components/TimelineTable.tsx

여기도 /features/report 로 옮겨주세요

wjeongchoi · 2025-02-03T07:28:45Z

...es/web/src/app/document-lookup/project-proposal/result/[resultId]/detail/[detailId]/page.tsx

+const RowWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 60px;
+`;


이거 flexwrapper로 대체하는거 수정 안 됐어요

wjeongchoi · 2025-02-03T07:30:14Z

packages/web/src/features/report/components/TimelineTable.tsx

+      {/* <TableHeader>
+        <TableCell type="Header" width="60px">
+          번호
+        </TableCell>
+        <TableCell type="Header" width="260px">
+          날짜
+        </TableCell>
+        <TableCell type="Header" width="302px">
+          내용
+        </TableCell>
+        <TableCell type="Header" width="170px">
+          비고
+        </TableCell>
+      </TableHeader>
+      {contents.map((elm, index) => (
+        <React.Fragment key={index}>
+          <TableRow isLast={index === contents.length - 1}>
+            <TableCell type="Default" width="60px">
+              {index + 1}
+            </TableCell>
+            <TableCell
+              type="Default"
+              width="260px"
+            >{`${formatDate(elm.startDate)} - ${formatDate(elm.endDate)}`}</TableCell>


이 부분 왜 주석처리 된건가요?

wjeongchoi · 2025-02-03T07:32:24Z

...es/web/src/app/document-lookup/project-proposal/result/[resultId]/detail/[detailId]/page.tsx

+        <ContentsArea>
+          <RowWrapper ref={firstRow}>
+            <TextAreaWithHeader header="사업명" contents={["contents1"]} />
+            <TextAreaWithHeader header="사업 개요" contents={["contents1"]} />
+          </RowWrapper>
+          <RowWrapper ref={secondRow}>
+            <TextAreaWithHeader
+              header="사업 준비 기간"
+              contents={["contents1"]}
+            />
+            <TextAreaWithHeader header="사업 일시" contents={["contents1"]} />
+          </RowWrapper>
+          <RowWrapper ref={thirdRow}>
+            <TextAreaWithHeader
+              header="담당부서 / 담당자"
+              contents={["contents1", "contents2"]}
+            />
+          </RowWrapper>
+          <RowWrapper ref={fourthRow}>
+            <TextAreaWithHeader
+              header="사업 추진 목적"
+              contents={["contents1"]}
+            />
+          </RowWrapper>
+          <RowWrapper ref={fifthRow}>
+            <TextAreaWithHeader
+              header="사업 수혜 대상자"
+              contents={["contents1"]}
+            />
+          </RowWrapper>
+          <RowWrapper ref={sixthRow}>
+            <TextAreaWithHeader
+              header="세부 사업 내용"
+              contents={["contents1"]}
+            />
+          </RowWrapper>


이 부분은 mapping 해서 좀 더 깔끔하게 쓸 수 있을 것 같아요

wjeongchoi · 2025-02-03T07:33:23Z

...es/web/src/app/document-lookup/project-proposal/result/[resultId]/detail/[detailId]/page.tsx

+  const firstRow = useRef<HTMLDivElement>(null);
+  const secondRow = useRef<HTMLDivElement>(null);
+  const thirdRow = useRef<HTMLDivElement>(null);
+  const fourthRow = useRef<HTMLDivElement>(null);
+  const fifthRow = useRef<HTMLDivElement>(null);
+  const sixthRow = useRef<HTMLDivElement>(null);
+  const seventhRow = useRef<HTMLDivElement>(null);


각각 무슨 내용 가리키는지 변수 이름에 나타나면 좋을 것 같아요

wjeongchoi · 2025-02-03T07:34:24Z

...es/web/src/app/document-lookup/project-proposal/result/[resultId]/detail/[detailId]/page.tsx

+            </Typography>
+            <TimelineTable contents={mockTimeLine} />
+          </RowWrapper>
+          <TableArea />


이렇게 따로 컴포넌트 안 만들고 주석 한 줄 남겨도 될 것 같아요

wjeongchoi · 2025-02-03T07:36:14Z

packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx

+      fs={24}
+      lh={24}
+      fw="REGULAR"


이거 실제로 보니까 꽤 큰 것 같은데 디자이너 확인 필요할 것 같아요 @ChaeyeonAhn

네! 24 말고 20 어떠신가요..! 디자인도 수정해 놓겠습니다

wjeongchoi · 2025-02-03T07:36:59Z

packages/web/src/common/components/BreadCrumb/index.tsx

 `;

 const BreadCrumb: React.FC<BreadCrumbProps> = ({
  items,
  enableLast = false,
 }) => {
-  const itemsWithMain = [{ name: "메인", path: "/" }, ...items];
+  const itemWithMain: BreadCrumbItemDetails[] = [


변수명 그대로 itemsWithMain이 적절할 것 같아요

wjeongchoi · 2025-02-03T07:38:34Z

packages/web/src/common/components/Table/Table.tsx

+              const style = rowStyleResolver
+                ? rowStyleResolver(row.original)
+                : undefined;


이 부분 어떤 prop인지 주석 남겨주세요

wjeongchoi · 2025-02-03T07:39:31Z

packages/web/src/features/report/components/TextAreaWithHeader.tsx

+
+const TextAreaWithHeader: React.FC<TextAreaProps> = ({ header, contents }) => (
+  <TextAreaWithHeaderWrapper>
+    <div>{header}</div>


여긴 왜 div 쓴건가요?

feat: impl text area, scroll, index

1ae902f

sparcscasio added enhancement New feature or request frontend labels Jan 24, 2025

sparcscasio requested a review from wjeongchoi January 24, 2025 07:32

sparcscasio self-assigned this Jan 24, 2025

sparcscasio added 3 commits January 24, 2025 17:13

feat: index to componenet, layout fix

e773225

chore: fix flex

2990cf9

feat: impl timeline table

f1b8e7d

sparcscasio changed the title ~~feat: impl text area, scroll, index~~ impl document viewer page Jan 24, 2025

sparcscasio added 2 commits January 24, 2025 18:39

chore: delete test page

3f7c3bd

chore: change file dir

9b7dd42

wjeongchoi reviewed Jan 24, 2025

View reviewed changes

wjeongchoi and others added 8 commits January 24, 2025 22:04

chore: move pages

78d7f64

fix: shouldforwardprop

f6daf5e

Merge branch 'dev' into 82-impl-document-viewer-page

4a7c0ea

feat: fix table

1557498

fix: fix table cell

473ff0a

fix: table wrapper, cell width

c29688e

fix: line height

39af8b3

fix: breadcrumb

4d0defa

sparcscasio marked this pull request as ready for review January 24, 2025 14:54

wjeongchoi reviewed Feb 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

impl document viewer page #83

impl document viewer page #83

sparcscasio commented Jan 24, 2025 •

edited

Loading

wjeongchoi Jan 24, 2025

wjeongchoi Jan 24, 2025

wjeongchoi Jan 24, 2025

wjeongchoi Jan 24, 2025

wjeongchoi Jan 24, 2025

wjeongchoi Jan 24, 2025

wjeongchoi Jan 24, 2025

wjeongchoi Feb 3, 2025

wjeongchoi Feb 3, 2025

wjeongchoi Feb 3, 2025

wjeongchoi Feb 3, 2025

wjeongchoi Feb 3, 2025

wjeongchoi Feb 3, 2025

ChaeyeonAhn Feb 3, 2025

wjeongchoi Feb 3, 2025

wjeongchoi Feb 3, 2025

wjeongchoi Feb 3, 2025

impl document viewer page #83

Are you sure you want to change the base?

impl document viewer page #83

Conversation

sparcscasio commented Jan 24, 2025 • edited Loading

요약 *

스크린샷

이후 Task *

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sparcscasio commented Jan 24, 2025 •

edited

Loading