[TASK-92, TASK-93, TASK-94] style: 작품 업로드 페이지 UI 구현 #47

dahyeo-n · 2025-01-18T08:59:15Z

📝 작업 내용

1. 디자인 시스템 적용

2. 작품 업로드 페이지에서만 사용하는 UI 구축

3. 모바일 비율에 따른 반응형 적용

📸 스크린샷 (선택)

vercel · 2025-01-18T08:59:20Z

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

Name	Status	Preview	Comments	Updated (UTC)
momentia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 19, 2025 10:03am

github-actions · 2025-01-18T09:00:27Z

Qodana for JS

3 new problems were found

Inspection name	Severity	Problems
`ESLint`	🔴 Failure	3

💡 Qodana analysis was run in the pull request mode: only the changed files were checked
☁️ View the detailed Qodana report

Contact Qodana team

Contact us at [email protected]

Or via our issue tracker: https://jb.gg/qodana-issue
Or share your feedback: https://jb.gg/qodana-discussions

github-actions · 2025-01-18T09:01:36Z

Qodana for JS

26 new problems were found

Inspection name	Severity	Problems
`Unused local symbol`	🔶 Warning	5
`Import can be shortened`	🔶 Warning	3
`Exception used for local control-flow`	🔶 Warning	2
`Constant conditional expression`	🔶 Warning	1
`Pointless statement or boolean expression`	🔶 Warning	1
`Redundant local variable`	🔶 Warning	1
`Missing await for an async function call`	◽️ Notice	6
`Result of method call returning a promise is ignored`	◽️ Notice	3
`Duplicated code fragment`	◽️ Notice	1
`Deprecated symbol used`	◽️ Notice	1
`Referenced UMD global variable`	◽️ Notice	1
`Vulnerable declared dependency`	◽️ Notice	1

☁️ View the detailed Qodana report

Contact Qodana team

Contact us at [email protected]

Or via our issue tracker: https://jb.gg/qodana-issue
Or share your feedback: https://jb.gg/qodana-discussions

SangWoo9734

다현님 코멘트 남겼습니다-! 확인부탁드려요!😋

SangWoo9734 · 2025-01-18T11:55:45Z

src/app/artwork/upload/page.tsx

+  { name: '비공개', value: 'PRIVATE' },
+];
+
+const ARTWORK_FIELDS_NOT_INCLUDED_ALL = ARTWORK_FIELDS.filter(


이부분은 크리티컬한 부분은 아니라 제안만 드립니다..!

( 카페에서 이야기했을 때 저는 이렇게 하면 어떨까 생각했었습니다..! 😋 )

const ARTWORK_FIELDS _WITH_ALL_OPTION= [ ....ARTWORK_FIELDS, { name: '전체', value: 'ALL' }, ] const ARTWORK_FIELDS = [ ... ] // 여기는 카테고리 리스트

아 그렇게({ name: '전체', value: 'ALL' }) 하시려는 이유가 '전체'는 작품 목록 페이지에서만 사용되기 때문일까요? 궁금해서 질문드립니당

+) 카페에선 왜 얘기 안 해주셨나요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

맞습니다..! 정확합니다..!

+) 미리 말씀드리면 다현님께서 다양한 방향으로 생각하실때 방해가 될 수 있잖아요 ㅎㅎ

아하! 그렇군요! 그럼 제안주신 대로 하는 게 좋을 것 같아요! 그 방향으로 로직 바꾸겠습니다

오 그런 배려가..! 🥺 감사해여 ㅋㅋㅋㅋㅋㅋㅋ

SangWoo9734 · 2025-01-18T12:03:43Z

src/app/artwork/upload/page.tsx

+    if (errors.uploadedImageError) clearErrorMessage('uploadedImageError');
+  };
+
+  const validateArtworkUploadForm = () => {


현재 폼에 대한 validation이 값이 변경 ( 입력이나 이미지 업로드 )시 마다 확인하고, 폼 제출 직전에 한번더 확인하는데 내부 로직 ( 검증 로직 + 에러 텍스트 수정 )이 동일한 것 같은데 여러번 validation을 체크하는 의도가 있으실까요?

UX 때문에 그렇게 했습니다!
예림님이 Figma 내에서 요청주신 요청 사항은 필수 항목을 입력하지 않고 넘어갔을 경우처럼 필수 항목에 대한 유효성 검사 체크였어요. 이외에도 활성화되지 않은 업로드 버튼을 클릭했을 경우라든가 에러 메시지가 뜬 필수 항목을 제대로 기입 및 업로드 했을 경우에 떴던 에러 메시지가 사라지는 등 추가적인 처리를 해줘야 해서 이렇게 처리했습니다!

혹여 수정을 원하시는 부분 있으면 알려주세요 :)

아하 설명감사합니다..! 따로 수정 사항은 없습니다.

넵넵 궁금하신 부분 있으시면 언제든 질문 주세요. 저도 답변드릴 때 복기하게 돼서 좋습니당 ㅎㅎ

SangWoo9734 · 2025-01-18T12:08:06Z

src/app/artwork/upload/page.tsx

+            <Icon name='Image' size='m' className='block md:hidden' />
+            <Icon name='Image' size='l' className='hidden md:block' />


이건 예림님께 문의드려도 괜찮을 것 같은데, 상세페이지의 버튼은 반응형에 관계없이 사이즈가 동일합니다..!

+) 이미지 업로드에 관계없이 보이는 버튼인가요??

엇 업로드 페이지는 아이콘 사이즈가 다릅니다. 의도를 갖고 하신 것 같은데 흠 질문드려 볼게용

이미지 업로드했을 때 보여야 하는데, 아직 업로드 후의 로직 작성을 안 해서 지금은 업로드 관계없이 보이도록 해두었습니다!

SangWoo9734 · 2025-01-18T12:20:15Z

src/app/artwork/upload/page.tsx

+          style={{
+            border: '2px dashed transparent',
+            borderImage:
+              'repeating-linear-gradient(45deg, gray 0, gray 10px, transparent 10px, transparent 20px) 1',
+          }}


이부분은 왜 인라인으로 스타일링 되어있나요?

예림님이 디자인하신 UI(이미지 업로드 섹션의 Outline 스타일)는 style 속성으로밖에 구현이 안 돼서 인라인으로 스타일링 하였습니다! Tailwind CSS로는 긴 점선 처리가 불가해서요 🥲

아하..! 저도 긴 점선 처리가 필요해서 참고하겠습니다... 🙏🏻

넹 가져다 쓰시죵

SangWoo9734 · 2025-01-18T12:24:19Z

src/components/Input/Textarea.tsx

+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;


height를 두번 변경하고 있는데 어떤 이유가 있을까요?

textareaRef.current.style.height = 'auto';

사용자가 minHeight: '256px' 을 넘겨서 작성하다가 내용을 삭제하여 textarea를 minHeight 높이로 돌려놨을 경우, 그 높이에 맞게 높이가 줄어듭니다!

textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;

minHeight: '256px'을 넘길 경우, 그에 맞게 textarea의 높이가 자동으로 늘어납니다 :)

설명하신 내용과 제가 생각하는 fit-content와 유사하다는 생각이 드는데 fit-content 로는 한계가 있나요..?

아 h-fit(fit-content)은 스타일이 최초 렌더링 시에만 적용돼서 사용자의 입력에 따라 동적으로 변화하는 높이를 처리하기에는 한계가 있어요 🥲

사용자의 입력값에 따라 동적으로 높이가 계속해서 바뀌어야 하기 때문에 CSS가 아닌, JS로 구현했습니다!

아하... 동적으로 바뀌어야하는 거면 다현님께서 구현하신 방법이 맞는 것 같습니다..! 답변 감사합니다-!

dahyeo-n added 22 commits January 16, 2025 18:28

feat: 작품 업로드 페이지 경로 추가

88d72fc

move: 작품 업로드 페이지 경로로 이동하는 onClick 위치 변경

af56012

style:OvalButton이 padding 대신 line-height가 높이를 기준으로 텍스트를 중앙에 배치하도록 CSS 수정

78d5471

refactor: custom-label 스타일 삭제

9e1be90

style: FilterDropdown의 width를 className으로 받아서 처리될 수 있도록 변경

8d6e1c9

refactor: custom-label 스타일이 적용됐던 컴포넌트를 placeholder로 변경

61e6168

style: OvalButton의 padding CSS 수정

30b9f80

style: BasicInput CSS 수정

e3bd74c

feat: BasicInput 타입이 textarea일 경우, 입력 필드의 높이가 입력한 내용에 따라 자동으로 확장되도록 처리

007f2ac

style: textarea 내에서 텍스트 길이가 보이도록 CSS 수정

a3be420

style: 작품 업로드 페이지 UI 구현

6362f98

style: 이미지 변경 버튼 및 모바일 반응형 추가

146466b

feat: OvalButton에 disabled 속성 추가

1ec3cea

feat: FilterDropdown에 에러 메시지 추가

eb40349

style: 잘못 지정된 아이콘 올바르게 지정

cdd38a2

feat: 필수 항목의 유효성 검사 추가

2722009

feat: 업로드 버튼이 비활성화(disabled) 상태일 때 누르면 페이지 상단으로 스크롤 올라가도록 처리

504ab77

style: 작품 업로드 버튼 CSS 수정

d291e82

chore: 필수 항목 작성 안 하고 활성화되지 않은 업로드 버튼 눌렀을 시의 로직 수정

2825d48

refactor: 작품 분야 상수화 및 타입 따로 관리

94d5a0a

refactor: 명확한 타입 지정을 위해 BasicInput과 Textarea를 따로 분리

934cc50

refactor: 반복되는 코드 리팩토링

af21a40

dahyeo-n requested a review from SangWoo9734 January 18, 2025 08:59

dahyeo-n self-assigned this Jan 18, 2025

github-actions bot added chore 그 외 기타 수정 (ex. 오타 등) feature refactor 코드 리팩토링, 주석 삭제 style 사용자 UI 디자인 변경 labels Jan 18, 2025

SangWoo9734 reviewed Jan 18, 2025

View reviewed changes

SangWoo9734 approved these changes Jan 19, 2025

View reviewed changes

refactor: ARTWORK_FIELDS의 '전체' 옵션을 ArtworkFilter에서 추가하여 사용하도록 수정

b6e70b3

vercel bot deployed to Preview January 19, 2025 10:03 View deployment

dahyeo-n merged commit e0d6456 into dev Jan 19, 2025
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TASK-92, TASK-93, TASK-94] style: 작품 업로드 페이지 UI 구현 #47

[TASK-92, TASK-93, TASK-94] style: 작품 업로드 페이지 UI 구현 #47

dahyeo-n commented Jan 18, 2025

vercel bot commented Jan 18, 2025 •

edited

Loading

github-actions bot commented Jan 18, 2025 •

edited

Loading

github-actions bot commented Jan 18, 2025 •

edited

Loading

SangWoo9734 left a comment

SangWoo9734 Jan 18, 2025

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 19, 2025 •

edited

Loading

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 18, 2025

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 19, 2025

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 18, 2025

SangWoo9734 Jan 18, 2025

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 18, 2025

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 19, 2025

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 18, 2025

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 19, 2025

dahyeo-n Jan 19, 2025

SangWoo9734 Jan 19, 2025

		<Icon name='Image' size='m' className='block md:hidden' />
		<Icon name='Image' size='l' className='hidden md:block' />

		textareaRef.current.style.height = 'auto';
		textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;

[TASK-92, TASK-93, TASK-94] style: 작품 업로드 페이지 UI 구현 #47

[TASK-92, TASK-93, TASK-94] style: 작품 업로드 페이지 UI 구현 #47

Conversation

dahyeo-n commented Jan 18, 2025

📝 작업 내용

📸 스크린샷 (선택)

vercel bot commented Jan 18, 2025 • edited Loading

github-actions bot commented Jan 18, 2025 • edited Loading

Qodana for JS

github-actions bot commented Jan 18, 2025 • edited Loading

Qodana for JS

SangWoo9734 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SangWoo9734 Jan 19, 2025 • edited Loading

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

Choose a reason for hiding this comment

vercel bot commented Jan 18, 2025 •

edited

Loading

github-actions bot commented Jan 18, 2025 •

edited

Loading

github-actions bot commented Jan 18, 2025 •

edited

Loading

SangWoo9734 Jan 19, 2025 •

edited

Loading