Feat/file upload #19

hongggyelim · 2025-03-12T10:45:13Z

file input 컴포넌트
프리뷰 드래그앤 드롭
드래그앤 드롭 파일 업로드
색상 변수는 추후 수정 및 스토리북 팔레트 추가 예정

changeset-bot · 2025-03-12T10:45:18Z

⚠️ No Changeset found

Latest commit: c40225d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-03-12T11:54:51Z

💄 Storybook: https://67c9a019e2c059ab48fd9565-yiystyjmgj.chromatic.com/
🕖 Update: 2025년 03월 13일 17시 06분 50초

jongjunpark

일단 표면적인것만 작성했고 이따가 저녁에 세부하게 다시볼게

jongjunpark · 2025-03-13T02:06:09Z

apps/admin/src/app/layout.tsx

 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+// import "@repo/ui/src/globalStyle/global.css.ts";


이거 없어도 되는건가? 아니면 금욜에 추가하려는거?

추가할건데 alias 안되서 우선 주석처리 해놨음!

jongjunpark · 2025-03-13T02:06:45Z

apps/admin/tsconfig.json

  "paths": {
-    "@/*": ["./src/*"]
+    "@/*": ["./src/*"],
+    "@repo/ui/*": ["../../packages/ui/*"]


얘도 지우고 install해서 사용하는걸로

jongjunpark · 2025-03-13T02:07:13Z

apps/storybook/.storybook/addons.js

요건 왜 추가한거야?

컴파일돼서 생긴건가?

jongjunpark · 2025-03-13T02:08:04Z

apps/storybook/.storybook/main.ts

+    config.plugins = config.plugins || [];
+    config.plugins.push(
+      vanillaExtractPlugin({
+        identifiers: ({ hash }) => `_${hash}`,


이거 추가하면 어떻게 바뀌는거지?

스토리북에서 바닐라 익스트랙트 사용하기 위해 추가했으

indetifiers 요거 저거 어디에 쓰는지 궁금해서 저거없어도 돌아가긴 하거든

https://vanilla-extract.style/documentation/integrations/vite/#identifiers
음 지정안해도 기본값 설정이 있다고는 하네

jongjunpark · 2025-03-13T02:09:38Z

apps/storybook/package.json

    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "storybook": "start-storybook -p 6006"


dev가 이거랑 동일한 역할을 하고 있긴함. 그리고 굳이 apps/storybook까지 와서 pnpm storybook을 쓸 필요없이 루트에 "storybook": "pnpm --filter storybook dev"을 추가해뒀기 때문에 루트에서 pnpm storybook하면 실행됨

그럼 8번 줄만 삭제하면 될까욥

예얍 삭제하고 apps/storybook 경로에서는 pnpm dev로 하고, root에서는 pnpm storybook으로 쓰면됨!

jongjunpark · 2025-03-13T02:10:34Z

apps/user/tsconfig.json

  "paths": {
-    "@/*": ["./src/*"]
+    "@/*": ["./src/*"],
+    "@repo/ui/*": ["../../packages/ui/*"]


여기도 삭제

jongjunpark · 2025-03-13T02:12:13Z

packages/ui/assets/Add_Image.png

PascalCase랑 snake_case를 혼용해서 사용해 본적이 없는데
하나만 쓰면 좋을 것 같음

jongjunpark · 2025-03-13T05:30:07Z

packages/ui/src/globalStyle/theme.css.ts

+  },
+});
+
+export const Color = createGlobalTheme(":root", {


요기 몇몇 색깔은 ColorVar로 대체하면 좋을듯?

jongjunpark · 2025-03-13T05:32:33Z

packages/ui/src/store/useImageUrlStore.ts

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+import { UrlType } from "../types/imageUrlType";


type은 import type으로 됐으면 좋겠음.
lint에 https://typescript-eslint.io/rules/consistent-type-imports/ 요거 추가하는걸로

jongjunpark · 2025-03-13T05:33:20Z

packages/ui/src/imageInput/ImageInput.tsx

폴더명은 camel인데, 파일명은 Pascal인게 어색해서,
camel/camel로 하던지 Pascal/Pascal로 해서 통일했으면 함

그럼 컴포넌트가 들어가있는 폴더만 파스칼로 바꾸고 나머진 camel 유지하면 될까요

응응 그렇게 통일하자 그러면

jongjunpark

양이 많네... ㅋㅋ 기능은 잘동작하는거 확인함 잘만들었네
몇개 생각한거 쭉 적어둘게 TODO list라고 생각해

고용량 처리 어떻게 할지?
dnd가 과연 폰에서도 잘 될지?
아키텍처 구분이 필요
- globalStyle, store랑 같은 level이면 안됨
- 동일한 컴포넌트는 하나의 폴더내에서 구분필요
폴더마다 style.css.ts 두는게 나을지 논의 필요
px 표시하는걸로
Immer 알아보기
spell checker

jongjunpark · 2025-03-13T14:25:05Z

packages/ui/src/imageInput/ImageInput.tsx

+      const newUrlList = [...urlList];
+      for (let file of files) {
+        const url = URL.createObjectURL(file);
+        const uuid = crypto.randomUUID();
+        const urlObj = {
+          id: uuid,
+          url,
+        };
+        newUrlList.push(urlObj);
+        setUrlList(newUrlList);
+      }


Suggested change

const newUrlList = [...urlList];

for (let file of files) {

const url = URL.createObjectURL(file);

const uuid = crypto.randomUUID();

const urlObj = {

id: uuid,

url,

};

newUrlList.push(urlObj);

setUrlList(newUrlList);

}

setUrlList([

...urlList,

...Array.from(files).map((file) => ({

id: crypto.randomUUID(),

url: URL.createObjectURL(file),

})),

]);

깊은 복제 후에 push 하기 보다는 더 간편하게 할 수 있음.
그리고 for문을 쓰기보다는 map, forEach 같이 좀 더 선언적인 방법을 사용하는 것을 추천

jongjunpark · 2025-03-13T14:28:41Z

packages/ui/src/imageInput/ImageInput.tsx

+  const handleSelectFile = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files || [];
+    uploadFiles(files as FileList);
+  };


Suggested change

const handleSelectFile = (e: ChangeEvent<HTMLInputElement>) => {

const files = e.target.files || [];

uploadFiles(files as FileList);

};

const handleSelectFile = (e: ChangeEvent<HTMLInputElement>) => {

const files = e.target.files;

if (!files) return;

uploadFiles(files);

};

억지로 as를 쓰는 방법보다는 early return을 사용해서, 값이 없는 경우에는 해당 루트를 타지않도록 설정 추천

jongjunpark · 2025-03-13T14:30:42Z

packages/ui/src/imageInput/ImageInput.tsx

+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };


이건 안쓰는거 같은데 빼는게 나을듯?

jongjunpark · 2025-03-13T14:32:35Z

packages/ui/src/imageInput/ImageInput.tsx

+  return (
+    <InputWrapper>
+      <label
+        className={isActive ? `${style.label.active}` : `${style.label.none}`}


삼항연산자로 class명을 바꾸기 보다는 recipe를 써보는건 어때?

jongjunpark · 2025-03-13T14:35:05Z

packages/ui/src/imageInput/ImageInput.tsx

+        name="image"
+        type="file"
+        multiple
+        accept="image/png, image/jpeg, image/jpg"


핸드폰 업로드 때에 파일 확장자가 뭐가 더있는지 한번 파악해보면 좋을 것 같아

ngrok 스토리북 컴포넌트 로딩이 안돼서 이따 같이 함 봐주시오

jongjunpark · 2025-03-13T14:51:49Z

packages/ui/src/imageUploader/ImageUploader.tsx

+      }
+    }
+  };
+  const hadleDragEnter = (e: React.DragEvent) => {


어떤ㄱ ㅓ,, ?

jongjunpark · 2025-03-13T14:52:11Z

packages/ui/src/imageUploader/ImageUploader.tsx

+  return (
+    <div className={style.wrapper}>
+      <ImageInput />
+      <ul className={style.previewList}>


오 ul + li 쓴거 상당히 칭찬해

jongjunpark · 2025-03-13T14:53:25Z

packages/ui/src/imageUploader/style.css.ts

+export const previewList = style({
+  display: "flex",
+  gap: 8,
+  justifyContent: "start",


start와 flex-start의 차이를 한번 알아보기

jongjunpark · 2025-03-13T14:58:02Z

packages/ui/src/imageInput/imagePreview/style.css.ts

+  position: "absolute",
+  top: 0,
+  right: 0,
+  transform: "translateY(-30%) translateX(30%)",


transform으로 처리한 이유가 궁금합니다

버튼 위치 조정하려고 했는데 그냥 top, right에 값을 주는게 나을까요

jongjunpark · 2025-03-13T14:58:42Z

packages/ui/tsconfig.json

  "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "typeRoots": ["./node_modules/@types", "./src/types"]


"./node_modules/@types" 요거 필요한가요?

jongjunpark

👍

hongggyelim added 15 commits March 11, 2025 15:10

chore: 패키지 이름 수정

55241bf

d.ts 파일 추가

8da8e2d

chore: 바닐라 익스트랙트 설치

a58d705

feat: 스토리북 vanilla extract 적용

1789b2e

chore: 색상 변수 추가

a6c974f

feat: 유틸리티 타입 추가

bb908e1

chore: 스타일 정의

7714904

feat: globalcss 적용(스토리북만)

cfc8bca

feat: 이미지 파일 선택 시 프리뷰 추가

8e1f00d

feat: 프리뷰 삭제 기능 추가

5f32be9

chore: 사진 등록 로직 일부 수정

73994f2

feat: 프리뷰 dnd

35bc846

fix: 파일 개수 선택 제한 수정

b80b419

chore: img 드래그 방지

43353aa

feat: 파일 드래그 업로드

e75107c

hongggyelim added 6 commits March 12, 2025 19:51

feat: PR에서 크로매틱 배포

7b6d916

fix: storybook build script수정

ee79de2

fix: main.ts에 globalcss 삭제

ca16f42

feat: yaml 수정 깃헙봇추가

37bee12

chore: yml 원복

a3153a0

feat: yml 수정

9148b04

hongggyelim requested a review from jongjunpark March 12, 2025 11:54

chore: 오타 수정 및 불필요한 스토리 삭제

4eef9df

jongjunpark reviewed Mar 13, 2025

View reviewed changes

hongggyelim added 2 commits March 13, 2025 17:03

fix: PR 리뷰 반영

23c762c

delete: package/ui eslint.config.js 삭제

c40225d

jongjunpark reviewed Mar 13, 2025

View reviewed changes

jongjunpark approved these changes Mar 14, 2025

View reviewed changes

hongggyelim merged commit 5501486 into main Mar 15, 2025
4 checks passed

hongggyelim deleted the feat/file_upload branch March 15, 2025 02:13

		@@ -0,0 +1,21 @@
		import { create } from "zustand";
		import { UrlType } from "../types/imageUrlType";

Feat/file upload #19

Feat/file upload #19

Uh oh!

Conversation

hongggyelim commented Mar 12, 2025

Uh oh!

changeset-bot bot commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jongjunpark left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jongjunpark left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

changeset-bot bot commented Mar 12, 2025 •

edited

Loading

github-actions bot commented Mar 12, 2025 •

edited

Loading