Feat: 자료집 UI 구현 #379

jongse7 · 2025-01-24T12:23:23Z

1️⃣ 작업 내용 Summary

resolved feat: 자료집 UI 구현 #374

자료집 UI 제작했습니다. API 변경 여지가 있기 때문에 기존에 있던 const 데이터와 mockupData로 작업했습니다.

/data

/data/edit

/data/:id

노트북으로 보는 중인데 ArticleHeader, Container 마진 조금 줄여도 될 거 같더라고요? 어떻게 생각하시는지

(아무튼 기반을 만들어준 효민이에게 박수를...)

yarn lint error, warning 전부 고쳤습니다. 제가 테스트 해봤지만 각자 담당하시는 파트 문제 없는지 다시 한번 확인해주세요!

2️⃣ 추후 작업할 내용

3️⃣ 체크리스트

develop 브랜치의 최신 코드를 pull 받았나요?

자료집 제거 후 자료집 경로 연 결 (#374)

…ion/homepage-frontend into feat/#374_data_ui

vercel · 2025-01-24T12:23:28Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev-homepage-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 5, 2025 4:22pm

EATSTEAK · 2025-01-24T13:33:43Z

@jongse7 commit 내역에 보이는 다른 계정은 github 쪽 에러 같습니다... 분명 제 토큰을 썼는데

커밋 내역은 깃에 설정된 이메일하고 이름을 따라갑니다.

git config --global user.email <내 이메일>
git config --global user.name <내 이름>

--global 안 붙이면 해당 레포에만 적용됩니다.

지금 올라가 있는 커밋 바꾸려면

git rebase -i 7e4c6fc -x \
  "git commit --amend --author 'rail <[email protected]>' -CHEAD"

이 명령어 실행하고 force push하면 될 것 같네요.

jongse7 · 2025-01-25T19:54:53Z

@EATSTEAK
말씀해주신대로
git rebase -i 7e4c6fc -x
"git commit --amend --author 'rail [email protected]' -CHEAD"
해봤는데 어... 잘 안되네요 ㅠㅜ 어디서 꼬인거지

EATSTEAK · 2025-01-26T12:45:49Z

@EATSTEAK 말씀해주신대로 git rebase -i 7e4c6fc -x "git commit --amend --author 'rail [email protected]' -CHEAD" 해봤는데 어... 잘 안되네요 ㅠㅜ 어디서 꼬인거지

@jongse7 < > 꺽쇠도 넣어주셔야 하는데... 현재 데브를 머지한 시점에서 이 명령은 안먹힐거고

git rebase -i 7e4c6fc 로 interactive rebase 모드로 들어가서, 수정할 대상 커밋 아래에 exec git commit --amend --author 'rail <[email protected]>' 써주고 편집기 나간 다음 git rebase --continue 로 리베이스해준 다음에 포스푸시 하면 될 것 같네요. 근데 좀 어렵긴함

그냥 제가 리베이스해서 올려드릴게요. 나중에 한번 interactive rebase 공부 ㄱㄱ

EATSTEAK · 2025-01-28T02:29:50Z

@jongse7 리베이스 해보려고 했는데 커밋이 꼬여서 그런지 계속 컨플릭트가 나네요. 커밋 히스토리를 선형으로 유지할 필요가 있어 보입니다. 머지 커밋 좀 날리고 히스토리 좀 정리할게요.

추가로 branch ruleset에 선형 히스토리 유지하도록 하고 스쿼시로 머지하도록 옵션 강제해놨으니 참고 부탁드려요.

EATSTEAK

제가 커밋 히스토리 정리해드리려 했는데 코드 보니까 컨플릭트가 그대로 남아 있네요.
develop을 어떻게 합치셨는지(머지? 리베이스?)모르겠지만 그것 때문에 코드가 다 꼬여서 원본 코드가 어떤 형태인지도 모르겠습니다.

develop 머지 전으로 되돌리시거나 다시 작업하셔야 할 듯요.

nebulaBdj · 2025-02-05T16:49:06Z

src/apis/getBoardDataPosts.ts

해당 코드는 전체 주석처리해도 문제 없나요??

이 파일 제외하고도 사용하지 않는 api 훅들이 많아 보이는데 다 삭제하죠.

getBoardDataPosts.ts

getBoardDataPostSearch.ts

getOnboardingEmail.ts

patchBoardDataPosts.ts

postBoardBoardCodeFiles.ts

postBoardDataFiles.ts

postBoardDataSubCategoryPost.ts

자료집 API인데, Lint 오류 때문에 주석 처리했어요. 제가 다시 구현해야 해서 일단 급하게 땜질했습니다

nebulaBdj · 2025-02-05T16:53:08Z

src/pages/audit/auditEdit/container/auditEditImageSection.tsx

@@ -10,9 +10,18 @@ interface AuditEditImageSectionProps {
 export function AuditEditImageSection({ onImagesChange }: AuditEditImageSectionProps): JSX.Element {
  const { images, addImage, removeImage, getValidImages } = useImageManager();

+  const memoizedGetValidImages = useCallback(() => getValidImages(), [getValidImages]);


해당 부분에 useCallback 로직을 추가한 이유가 궁금합니당

굳이 memorized 라는 prefix를 추가할 필요가 없어 보입니다. 변수명은 해당 함수의 의미론적 동작만을 반영하도록 간결하게 작성하는 편이 좋습니다.

nebulaBdj

질문 위주여서 승인합니다! 아 그리고 이전 코드리뷰 과정에서 얘기 나왔던 develop 머지 전으로 되돌려서 문제를 해결했는지도 궁금합니다..! PR 이름 기존 규칙에 맞게 수정했습니다.

EATSTEAK

리뷰중이였는데 머지되었네요. 확인 부탁드려요 @jongse7

EATSTEAK · 2025-02-05T23:17:33Z

src/apis/getBoardDataPosts.ts

이 파일 제외하고도 사용하지 않는 api 훅들이 많아 보이는데 다 삭제하죠.

getBoardDataPosts.ts

getBoardDataPostSearch.ts

getOnboardingEmail.ts

patchBoardDataPosts.ts

postBoardBoardCodeFiles.ts

postBoardDataFiles.ts

postBoardDataSubCategoryPost.ts

EATSTEAK · 2025-02-05T23:20:13Z

src/apis/postBoardFiles.ts

@@ -13,7 +13,7 @@ export async function postBoardFiles({
  boardCode,
  files = [],
  images = [],
-}: postBoardFilesProps): Promise<AxiosResponse<any>> {
+}: postBoardFilesProps): Promise<AxiosResponse> {


이건 백엔드의 리턴 타입대로 구현하는게 맞을 것 같네요.

Suggested change

}: postBoardFilesProps): Promise<AxiosResponse> {

}: postBoardFilesProps): Promise<AxiosResponse<ApiResponse<UploadFilesResponse>>> {

다만 apis 아래의 훅들은 점진적으로 Deprecated 처리해야 할 것 같습니다.

EATSTEAK · 2025-02-05T23:22:06Z

src/apis/postBoardPosts.ts

@@ -11,7 +11,7 @@ export interface postBoardPostsProps {
    content: string;
    categoryCode?: string;
    groupCode?: string;
-    memberCode?: string;
+    memberCode?: string | null;


어떤 경우에 memberCode가 null이 되나요?
그리고 백엔드에서 null로 보내준다면 ?를 제거해야 하지 않을까요?

만약 이게 patch 같은 곳에서도 사용해야 하는 값이라면 PatchBoardPostsProps 같은 이름으로 먼저 정의하고 Required<> Utility Type을 사용해서 다른 타입을 또 정의하는게 좋겠습니다.

EATSTEAK · 2025-02-05T23:23:52Z

src/components/ui/button.tsx

    );
  }
 );
 Button.displayName = 'Button';

-export { Button, buttonVariants };


fast-refresh 관련 이슈는 shadcn/ui 자체 이슈라 eslint-disable-next-line 으로 린트를 꺼주는게 더 적절해 보입니다. buttonVariants는 컴포넌트가 아니니까요

참고: shadcn-ui/ui#1534

동일하게 대문자로 만들고 export 위치 변경한것도 revert하면 좋겠습니다.

EATSTEAK · 2025-02-05T23:25:19Z

src/components/ui/navigation-menu.tsx

@@ -93,7 +88,6 @@ const NavigationMenuIndicator = React.forwardRef<
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;

 export {
-  navigationMenuTriggerStyle,


이것도 린트를 꺼야하지 export에서 제외하면 안될 것 같습니다. react-router의 Link 컴포넌트를 네비게이션 링크로 사용할 때에는 이 함수가 필요합니다.

EATSTEAK · 2025-02-06T00:00:10Z

src/containers/common/Header/component/Navigation.tsx

-          className="relative h-full min-w-fit text-[20px]"
-          onClick={() => window.open(import.meta.env.VITE_TEMP_DATA_URL, '_blank')}
-        >
+        <NavigationMenuItem className="relative h-full min-w-fit text-[20px]" onClick={() => navigate(dataPath)}>


이것도 Link 컴포넌트를 asChild로 넘겨주는게 좋습니다. shadcn docs 보시면 어떻게 하는지 아실 수 있어요.

src/containers/new/Container.tsx

EATSTEAK · 2025-02-06T00:04:10Z

src/hooks/useIsOverflow.tsx

    const element = ref.current;
    if (element) {
-      const isOverflow = element.scrollWidth > element.clientWidth || windowWidth < 1741;
-      setIsOverflow(isOverflow);
+      setIsOverflow(element.scrollWidth > element.clientWidth || windowWidth < 1741);


Magic value는 지양했으면 좋겠네요.

EATSTEAK · 2025-02-06T00:05:55Z

src/pages/audit/auditEdit/container/auditEditImageSection.tsx

@@ -10,9 +10,18 @@ interface AuditEditImageSectionProps {
 export function AuditEditImageSection({ onImagesChange }: AuditEditImageSectionProps): JSX.Element {
  const { images, addImage, removeImage, getValidImages } = useImageManager();

+  const memoizedGetValidImages = useCallback(() => getValidImages(), [getValidImages]);


굳이 memorized 라는 prefix를 추가할 필요가 없어 보입니다. 변수명은 해당 함수의 의미론적 동작만을 반영하도록 간결하게 작성하는 편이 좋습니다.

EATSTEAK · 2025-02-06T01:59:07Z

src/pages/data/components/DataContent.tsx

+ *
+ * 자료집에 쓰이는 자료 목록에서 사용할 수 있는 자료 항목 컴포넌트입니다.
+ * 일반적으로 `BodyLayout` 아래에 리스트 형태 아이템으로 표시할 수 있습니다.
+ * C는 literal union이길 권장합니다만, 상황에 따라 다양한 타입을 넣을 수 있습니다. - 효민's 주석에서 발췌


C 제네릭이 없는 것 같습니다...

h-ye-ryoung and others added 10 commits January 19, 2025 22:20

delete: 기존 자료집 관련 코드 삭제 (#374)

64e549b

chore: 임시 자료집 제거 후 자료집 경로 연결 (#374)

be50fa1

chore: 임시

7e4c6fc

자료집 제거 후 자료집 경로 연 결 (#374)

Merge branch 'feat/#374_data_ui' of https://github.com/ssu-student-un…

56ac8b4

…ion/homepage-frontend into feat/#374_data_ui

feat: 자료집 홈 ui (#374)

10c51d6

feat: 자료집 상세 페이지 ui (#374)

70f9d5c

Merge branch 'feat/#374_data_ui' of https://github.com/ssu-student-un…

1b1d262

…ion/homepage-frontend into feat/#374_data_ui

refactor: Input 컴포넌트 className 위치 변경 (#374)

5aff7ab

feat: FileInput을 제외한 data/edit 페이지 작업

92575bb

feat: 자료집 edit 페이지 ui (#374)

87ca081

jongse7 added the feat label Jan 24, 2025

jongse7 requested review from EATSTEAK, naraeng, nebulaBdj and ssumai-kr January 24, 2025 12:23

jongse7 self-assigned this Jan 24, 2025

jongse7 linked an issue Jan 24, 2025 that may be closed by this pull request

feat: 자료집 UI 구현 #374

Closed

3 tasks

vercel bot deployed to Preview January 25, 2025 19:04 View deployment

vercel bot had a problem deploying to Preview January 25, 2025 19:51 Failure

EATSTEAK requested changes Jan 28, 2025

View reviewed changes

jongse7 requested a review from EATSTEAK February 5, 2025 06:13

vercel bot had a problem deploying to Preview February 5, 2025 06:14 Failure

jongse7 added 2 commits February 5, 2025 15:27

chore: merge develop

40a8d83

chore: merge develop

7f800f7

jongse7 force-pushed the feat/#374_data_ui branch from 2d5aa95 to 5cc90cc Compare February 5, 2025 06:35

jongse7 force-pushed the feat/#374_data_ui branch from 5cc90cc to d62ec1c Compare February 5, 2025 06:39

vercel bot deployed to Preview February 5, 2025 06:40 View deployment

Merge branch 'develop' into feat/#374_data_ui

8a9edc1

jongse7 had a problem deploying to develop February 5, 2025 12:25 — with GitHub Actions Failure

vercel bot deployed to Preview February 5, 2025 12:26 View deployment

chore: fix prettier formatting issues

90ff36c

jongse7 had a problem deploying to develop February 5, 2025 12:32 — with GitHub Actions Failure

vercel bot deployed to Preview February 5, 2025 12:33 View deployment

fix: lint error fix

ba4bc06

jongse7 had a problem deploying to develop February 5, 2025 15:47 — with GitHub Actions Failure

vercel bot had a problem deploying to Preview February 5, 2025 15:47 Failure

jongse7 added 3 commits February 6, 2025 00:59

fix: lint error fix 2

2077c7b

style: main 공지사항 스크롤 바 위 여백 추가

6bf49c9

fix: 공지사항 게시글 작성 시 캐시 초기화

3c0e93f

jongse7 had a problem deploying to develop February 5, 2025 16:12 — with GitHub Actions Failure

vercel bot deployed to Preview February 5, 2025 16:13 View deployment

fix: lint warning fix

97daf0c

jongse7 had a problem deploying to develop February 5, 2025 16:17 — with GitHub Actions Failure

vercel bot had a problem deploying to Preview February 5, 2025 16:18 Failure

fix: yarn run build error

6659fe9

jongse7 temporarily deployed to develop February 5, 2025 16:21 — with GitHub Actions Inactive

vercel bot deployed to Preview February 5, 2025 16:22 View deployment

nebulaBdj reviewed Feb 5, 2025

View reviewed changes

nebulaBdj approved these changes Feb 5, 2025

View reviewed changes

nebulaBdj changed the title ~~Feat/#374 data UI~~ Feat: 자료집 UI 구현 Feb 5, 2025

jongse7 merged commit 4a238ad into develop Feb 6, 2025
3 checks passed

jongse7 deleted the feat/#374_data_ui branch February 6, 2025 01:45

EATSTEAK reviewed Feb 6, 2025

View reviewed changes

jongse7 restored the feat/#374_data_ui branch February 6, 2025 02:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: 자료집 UI 구현 #379

Feat: 자료집 UI 구현 #379

jongse7 commented Jan 24, 2025 •

edited

Loading

vercel bot commented Jan 24, 2025 •

edited

Loading

EATSTEAK commented Jan 24, 2025

jongse7 commented Jan 25, 2025

EATSTEAK commented Jan 26, 2025 •

edited

Loading

EATSTEAK commented Jan 28, 2025 •

edited

Loading

EATSTEAK left a comment

nebulaBdj Feb 5, 2025

EATSTEAK Feb 5, 2025

jongse7 Feb 6, 2025

nebulaBdj Feb 5, 2025

EATSTEAK Feb 6, 2025

nebulaBdj left a comment •

edited

Loading

EATSTEAK left a comment

EATSTEAK Feb 5, 2025

EATSTEAK Feb 5, 2025

EATSTEAK Feb 5, 2025

EATSTEAK Feb 5, 2025

EATSTEAK Feb 5, 2025

EATSTEAK Feb 5, 2025

EATSTEAK Feb 5, 2025

EATSTEAK Feb 6, 2025

EATSTEAK Feb 6, 2025

EATSTEAK Feb 6, 2025

EATSTEAK Feb 6, 2025

	}: postBoardFilesProps): Promise<AxiosResponse> {
	}: postBoardFilesProps): Promise<AxiosResponse<ApiResponse<UploadFilesResponse>>> {

Feat: 자료집 UI 구현 #379

Feat: 자료집 UI 구현 #379

Conversation

jongse7 commented Jan 24, 2025 • edited Loading

1️⃣ 작업 내용 Summary

2️⃣ 추후 작업할 내용

3️⃣ 체크리스트

vercel bot commented Jan 24, 2025 • edited Loading

EATSTEAK commented Jan 24, 2025

jongse7 commented Jan 25, 2025

EATSTEAK commented Jan 26, 2025 • edited Loading

EATSTEAK commented Jan 28, 2025 • edited Loading

EATSTEAK left a 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

nebulaBdj left a comment • edited Loading

Choose a reason for hiding this comment

EATSTEAK left a 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

jongse7 commented Jan 24, 2025 •

edited

Loading

vercel bot commented Jan 24, 2025 •

edited

Loading

EATSTEAK commented Jan 26, 2025 •

edited

Loading

EATSTEAK commented Jan 28, 2025 •

edited

Loading

nebulaBdj left a comment •

edited

Loading