[FiX] style: 1차 배포 기준 디자인 피드백 반영 #41

SangWoo9734 · 2025-01-12T17:16:59Z

📝 작업 내용

📸 스크린샷

💬 리뷰 요구사항

vercel · 2025-01-12T17:17:04Z

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 15, 2025 5:56pm

github-actions · 2025-01-12T17:18:09Z

Qodana for JS

1 new problem were found

Inspection name	Severity	Problems
`Constant conditional expression`	🔶 Warning	1

💡 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

dahyeo-n

수고 많으셨어요! 코멘트 드렸습니다 :)

dahyeo-n · 2025-01-13T13:10:59Z

src/components/Input/EmailInput.tsx

@@ -45,15 +45,15 @@ const EmailInput = ({ mode }: EmailInputProps) => {
        placeholder='이메일을 입력해주세요.'
        isInvalid={false}
        classNames={{
-          label: 'custom-label',
+          label: 'custom-label top-5 !text-gray-400',


text-gray-400 앞의 느낌표는 어떤 걸 뜻하는 건가요? !important랑 비슷한 건가요?

text-gray-400 색상 적용되던가요? 전에 안 됐어서 궁금합니당

NextUI의 Input CSS 커스텀하는 거라서 배열 형태로 넣어야 해요. ['custom-label', 'top-5', 'text-gray-400'] 이렇게여

!는 important가 맞습니다..! 그냥 text-gray-400을 적용했을 때 어디서 적용되는 건지는 모르겠는데 색상이 설정된 이후에 white로 덮이고 있어 important를 적용했습니다. 해당 label의 경우 다른 스타일에 영향을 주지 않을 것으로 판단해서 Important를 사용했습니다..!

그리고 저 형태로 적용했을때 css가 적용되지 않은 상태인지는 다시 한 번 확인하고 수정해두겠습니다.

css 적용에는 문제없는 것 같습니다. 다만 코드 포멧 통일을 위해서 다음부터는 그렇게 적용하도록 하겠습니다..!

현재 제가 작업한 EmailInput의 경우에는 이후 다현님 pr merge이후에는 사라질 파일이라서 혹시 다현님께서 이 디자인 코드를 Input 공통 컴포넌트에 적용해주실 수 있나요?

엇 네네 추가하겠습니다!
!text-gray-400 이것도 적용해야 하나요?? 적용되는지 궁금합니당

네네 이것도 적용하면 텍스트 색상이 수정됩니다..!

!important 했을때

안했을 때

오 대박 감사합니다

dahyeo-n · 2025-01-13T13:23:57Z

src/components/Navbar/NavbarNoticeDetail/index.tsx

-          <div className='tablet:block hidden tablet:absolute top-[-8px] left-2/3 transform -translate-x-1/2 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[15px] border-b-gray-800' />
-          <div className='flex flex-col gap-[28px] w-full h-full py-[28px] bg-gray-800 rounded-md overflow-hidden'>
+          <div className='tablet:block hidden tablet:absolute top-[-8px] left-2/3 transform -translate-x-1/2 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[15px] border-b-notice-base' />
+          <div className='flex flex-col gap-[28px] w-full h-full pt-[28px] bg-notice-base rounded-2xl overflow-hidden'>


const colors = { main: '#6304FF', system: { error: '#FF2828', success: '#3D6EFF', }, black: '#111111', white: '#FFFFFF', gray: { 900: '#1B1B1B', 800: '#2B2B2B', 700: '#616161', 600: '#757575', 500: '#9E9E9E', 400: '#B5B5B5', 300: '#E0E0E0', 200: '#EEEEEE', 100: '#F5F5F5', 50: '#FAFAFA', }, title: '#FFFFFF', subtitle: '#F5F5F5', background: { base: '#101010', overlay: '#232225', }, };

background 색상에 overlay 추가돼서 이번 디자인 시스템 PR merge 하면 해당 CSS class 수정해주세요 :)

Suggested change

<div className='flex flex-col gap-[28px] w-full h-full pt-[28px] bg-notice-base rounded-2xl overflow-hidden'>

<div className='flex flex-col gap-[28px] w-full h-full pt-[28px] bg-background-overlay rounded-2xl overflow-hidden'>

그럼 이부분은 다현님 pr 머지 이후에 확인하고 수정하겠습니다.

dahyeo-n · 2025-01-13T13:26:15Z

src/components/Navbar/index.tsx

+            <li className='hover:text-gray-300 cursor-pointer'>전시회</li>
+            <li className='hover:text-gray-300 cursor-pointer'>커뮤니티</li>
+          </ul>
+          <div className='flex justify-end item-center gap-[50px] justify-items-end'>


justify-end 관련 CSS 2번 중첩됩니당

justify-end는 해당 태그 내부 요소를 정렬하기 위해 서용한 flex 관련 스타일 코드이고, justify-items-end는 상위 요소에서 사용된 grid를 통해서 해당 요소를 정렬하기 위해 사용했습니다..!

아아 각기 다른 거군여 친절하게 링크 달아주셔서 감사합니다 ㅎㅎ

dahyeo-n · 2025-01-13T13:32:24Z

src/components/Navbar/index.tsx

+                    variant='primary'
+                    buttonSize='s'
+                    onClick={moveToArtworkList}
+                    children={<p className='placeholder'>작품 업로드</p>}


엇 이렇게 작성하면 아래와 같이 되지 않나요?

<div className='button-s'>{children}</div> // OvalButton이 이렇게 구현돼 있기 때문에

<div className='button-s'> <p className='placeholder'>작품 업로드</p> // children 속성으로 넣으면 이렇게 되지 않나여? </div>

아 이부분은 수정하겠습니다

dahyeo-n · 2025-01-13T13:32:55Z

src/components/Navbar/index.tsx

@@ -103,7 +103,7 @@ const Navbar = () => {
              name='Menu'
              size='l'
              onClick={toggleMenu}
-              className='lg:hidden text-white focus:outline-none'
+              className='tablet:hidden text-white focus:outline-none '


Suggested change

className='tablet:hidden text-white focus:outline-none '

className='tablet:hidden text-white focus:outline-none'

불필요한 띄어쓰기 있습니당

dahyeo-n · 2025-01-13T13:38:20Z

tailwind.config.ts

+  notice: {
+    base: '#232225',
+    selected: '#1B1A1D',
+  },


아 notice랑 제가 디자인 시스템에서 추가한 거랑 겹치네요. 이렇게 적용하는 게 더 편하실까여?

이 두 컬러가 알림 영역에만 쓰이는 것 같아 이런식으로 네이밍을 하고 할용하려고 헀는데, 다른 부분에도 쓰이는 것 같아서 다현님께서 올려주시는 걸로 활용하는게 더 나을 것 같습니다...! 다현님 커밋 받고 일괄적으로 수정해보곘습니다.

아하! 넵 근데 selected 색상도 전역에서 쓰이나요??

selected는 전역에서는 사용되지 않는 것 같군요... 이건 해당 부분에서만 사용하는 걸로 할까요?

네 좋습니당

dahyeo-n · 2025-01-13T13:51:56Z

src/hooks/clientStateHooks/useIsCarouselOverflow.ts

+
+      setIsOverflowing(canScroll);
+    };
+


Suggested change

checkOverflow(); // Embla가 처음에 초기화됐는지 확인

Hook 실행 시, emblaApi 상태를 즉시 확인해서 초기화 이벤트(emblaApi.on('init', checkOverflow))가 이미 발생했더라도 상태가 반영되도록 해야 하지 않나여?

초기 상태(isOverflowing 상태)를 놓치지 않도록 하기 위해서 필요하지 않나 해서 질문드립니다!

제안해주신 checkOverflow() 실행이 필요할 것 같습니다.

init 이벤트를 등록했기 때문에 별도의 함수 실행이 필요없을 것이라고 생각하고 있었는데, 피드백 답변을 위해 해당 훅 플로우를 다시 점검하면서 의존성 배열에 있는 emblaApi가 초기화 되는 시점과 useLayoutEffect 훅이 실행되는 시점을 제가 혼동하고 있었습니다..!

이렇게 작성해도 테스트시에는 문제가 없었지만 두 시점의 순서를 결정할 수 없어 항상 제대로 동작한다는 보장이 없기 때문에 전달해주신 내용을 추가해서 초기화 이벤트에 관게없이 overflow여부를 판단할 수 있게 수정이 필요할 것 같습니다! 감사합니다.😊

오홍 넵넵! 도움이 되었다니 기쁩니당

dahyeo-n

Approve 했습니다 :)

dahyeo-n · 2025-01-13T16:52:08Z

src/components/Input/EmailInput.tsx

@@ -45,15 +45,15 @@ const EmailInput = ({ mode }: EmailInputProps) => {
        placeholder='이메일을 입력해주세요.'
        isInvalid={false}
        classNames={{
-          label: 'custom-label',
+          label: 'custom-label top-5 !text-gray-400',


오 대박 감사합니다

dahyeo-n · 2025-01-13T17:05:27Z

tailwind.config.ts

+  notice: {
+    base: '#232225',
+    selected: '#1B1A1D',
+  },


네 좋습니당

github-actions · 2025-01-15T17:47:35Z

Qodana for JS

2 new problems were found

Inspection name	Severity	Problems
`ESLint`	🔴 Failure	1
`Constant conditional expression`	🔶 Warning	1

💡 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-15T17:48:52Z

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 added 11 commits January 9, 2025 17:54

feat: 작품 목록 페이지 레이아웃에 전체 너비 스타일 코드 추가

c63153d

style: 로그인/회원가입 기본 버튼 스타일 수정

6b48a5b

style: Navbar 가운데 정렬 스타일 수정

48dacdc

style: Carousel 화살표관련 스타일 코드 추가

d17236a

style: Navbar 사용자/알림 관련 툴팁 디자인 수정

92fa5bc

feat: 케로셀을 마우스 휠을 통해서 사용할 수 있게 플러그인 추가

4869f1d

feat: 케로셀 영역이 overflow 되는 경우 오른쪽 끝 영역에 그라데이션 추가

c6f4f35

style: 로그인/회원가입 input 메세지로 인한 레이아웃 이동 방지

0451432

style: Navbar 높이 조절 및 사용자 정보 아이콘 사이즈 조절

8f84275

style: Navbar 내 작품 업로드 스타일 코드 수정

45d5f9e

feat: 알림 영역 하단 그라디에이션 추가

535799c

SangWoo9734 requested a review from dahyeo-n January 12, 2025 17:17

SangWoo9734 self-assigned this Jan 12, 2025

github-actions bot added feature style 사용자 UI 디자인 변경 labels Jan 12, 2025

dahyeo-n reviewed Jan 13, 2025

View reviewed changes

dahyeo-n approved these changes Jan 13, 2025

View reviewed changes

SangWoo9734 and others added 11 commits January 16, 2025 02:15

refactor: api 로직에 포함되어 있던 서버 데이터 fetching 관련 커스텀 훅을 별도 파일로 분리

a2bc767

fix: Discord 알림 기능 추가 및 이벤트 처리 로직 수정

35ea388

fix: Qodana CI 설정 수정 및 에러 해결

bf9c255

fix: Discord 알림 액션 오류 수정

e9612ef

fix: GitHub Actions 삼항 연산자 수정 및 조건 처리 개선

b48c2c7

fix: Discord 알림 액션 오류 수정 및 조건 처리 개선

c83a7e2

fix: args 내 잘못된 데이터 참조 수정

ff5d783

fix: Qodana Code Review 설정 수정 및 에러 해결

d26ef24

feat: 팔로우한 작가 api reseponse 타입 추가

0d6222f

Add qodana.yaml file

e435883

Add github workflow file

fa6528f

dahyeo-n and others added 17 commits January 16, 2025 02:22

chore: variant 변수명 수정

6fb3107

refactor: 아이콘 토글 로직 리팩토링

b32d548

style: 색상 프리셋 적용

aaba862

refactore: 범용성을 위해 Delete modal 개선

64402c2

feat: modal 오동작 방지를 위한 방어코드 추가

81be5f5

rename: EmailInput을 BasicInput으로 이름 변경

1e33ed6

feat: BasicInput에 비즈니스 로직 걷어내어 재사용 가능한 컴포넌트로 변경

3e22c96

chore: 로그인, 회원가입 Input 로직 리팩토링을 위한 롤백

bfbeba2

remove: 중복되는 파일 삭제

9ea5828

chore: 삭제된 아이콘 파일 롤백

82ac161

fix: PR만 알림 오도록 변경

5bcaec4

chore: variant 변수명 수정

9e345d0

fix: pr-issue-event-notifications.yml 롤백

743b5f2

style: 로그인/회원가입 기본 버튼 스타일 수정

f12264f

style: Navbar 가운데 정렬 스타일 수정

81808d3

style: Navbar 높이 조절 및 사용자 정보 아이콘 사이즈 조절

57f983b

refactor: 캐로셀 뷰포트 overflow시 우측 그라디언트 속성 적용 관련 로직 수정

72c896a

vercel bot had a problem deploying to Preview January 15, 2025 17:39 Failure

SangWoo9734 added 2 commits January 16, 2025 02:41

chore: 공백 제거

e89e4c1

style: 전역 색상 변수 이름 변경 내역 적용

92fced0

vercel bot had a problem deploying to Preview January 15, 2025 17:44 Failure

Merge branch 'dev' into fix/style

e490477

github-actions bot added bug refactor 코드 리팩토링, 주석 삭제 labels Jan 15, 2025

vercel bot had a problem deploying to Preview January 15, 2025 17:47 Failure

chore: lint 에러 수정

71c5d24

vercel bot deployed to Preview January 15, 2025 17:56 View deployment

SangWoo9734 merged commit 2e6d92c into dev Jan 15, 2025
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FiX] style: 1차 배포 기준 디자인 피드백 반영 #41

[FiX] style: 1차 배포 기준 디자인 피드백 반영 #41

SangWoo9734 commented Jan 12, 2025

vercel bot commented Jan 12, 2025 •

edited

Loading

github-actions bot commented Jan 12, 2025

dahyeo-n left a comment

dahyeo-n Jan 13, 2025

SangWoo9734 Jan 13, 2025

SangWoo9734 Jan 13, 2025 •

edited

Loading

dahyeo-n Jan 13, 2025

SangWoo9734 Jan 13, 2025

dahyeo-n Jan 13, 2025

dahyeo-n Jan 13, 2025

SangWoo9734 Jan 13, 2025

dahyeo-n Jan 13, 2025

SangWoo9734 Jan 13, 2025

dahyeo-n Jan 13, 2025

dahyeo-n Jan 13, 2025

SangWoo9734 Jan 13, 2025

dahyeo-n Jan 13, 2025

dahyeo-n Jan 13, 2025

SangWoo9734 Jan 13, 2025

dahyeo-n Jan 13, 2025

SangWoo9734 Jan 13, 2025

dahyeo-n Jan 13, 2025

dahyeo-n Jan 13, 2025

SangWoo9734 Jan 13, 2025

dahyeo-n Jan 13, 2025

dahyeo-n left a comment

dahyeo-n Jan 13, 2025

dahyeo-n Jan 13, 2025

github-actions bot commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

	<div className='flex flex-col gap-[28px] w-full h-full pt-[28px] bg-notice-base rounded-2xl overflow-hidden'>
	<div className='flex flex-col gap-[28px] w-full h-full pt-[28px] bg-background-overlay rounded-2xl overflow-hidden'>

	className='tablet:hidden text-white focus:outline-none '
	className='tablet:hidden text-white focus:outline-none'


	checkOverflow(); // Embla가 처음에 초기화됐는지 확인

[FiX] style: 1차 배포 기준 디자인 피드백 반영 #41

[FiX] style: 1차 배포 기준 디자인 피드백 반영 #41

Conversation

SangWoo9734 commented Jan 12, 2025

📝 작업 내용

📸 스크린샷

💬 리뷰 요구사항

vercel bot commented Jan 12, 2025 • edited Loading

github-actions bot commented Jan 12, 2025

Qodana for JS

dahyeo-n 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 13, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dahyeo-n left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

Qodana for JS

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

Qodana for JS

vercel bot commented Jan 12, 2025 •

edited

Loading

SangWoo9734 Jan 13, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading