💄 design:post 리디자인 및 notice 컴포넌트 리팩토링 #59

[sohyun0]

📝 작업 개요 (필수)

1. 시급 5자리 이상 넘어갈 경우 현재 디자인으로 커버되지 않는 문제가 발견되어 리디자인을 진행

• 기존에 있던 하단 뱃지형태는 가게이미지 하단으로 옮겨 뱃지유무에 따라 컨텐츠 높이가 상이해지는것을 방지
• 시급은 하단에 똑같이 위치하되 상단 info 디자인과 유사하게 가져가 너무 비어보이는것을 방지
• 시급 아이콘이 추가됨에 따라 해당 스타일반영하여 기존 2개의 아이콘 스타일 변경 (시안1 -> 시안2 아이콘 채택, 기존 스타일 반영하여 굵기 조절)
• close 상태일때 동일하게 gray 로 노출하려 했으나 기존 가게이미지위에 dimmed 가 있어서 가독성 저하 발생, open 상태 + dimmed 조합으로 가져가면 기존 gray와 비슷한 효과를 가져갈 수 있다고 판단하여 1가지의 상태로만 작업
• 아이콘 컬러는 기존 red 컬러에서 gray-700으로 변경했는데 이유는 아이콘 갯수 증가 + 가게이미지 화려 = 시선분산 으로 인하여 정보파악 저하 우려로 아이콘의 색상을 변경함

2. post / notice 에서 반복적으로 보이는 가게 정보, 이미지, 뱃지의 경우 리팩토링을 진행해 Card컴포넌트로 분리
3. Image 는 유효하지 않은 src 가 들어왔을때 fallback 이미지 처리
4. 가게 시급 상승률을 계산하는 로직도 여러번 반복되어 컴포넌트로 분리
5. 시급 상승률에 따라 배경색상 차등 적용 (다만 현재는 디자인대로 가져갔지만, 30% 이하일때 색상이 너무 밝은것같아 수정고민)
6. 페이지 작업시 container 컴포넌트에 지속적인 여백(상하 60px -> 40px)이 필요한경우가 다소 높아보여 isPage props 추가
7. 추가적으로 notice 컴포넌트의 스토리북에 버그가 발생하여 조치를 취함 (자식이 부모 컴포넌트의 타입을 export 하는 문제)

• notice/api 의 타입을 추가 및 네이밍 일부 변경하였고 filter 에서 사용되던 타입 네이밍이 변경되어 수정

✨ 작업 내용 (필수)

• 기능 구현
• 버그 수정
• 스타일/UI 변경
• 리팩토링
• 최적화/성능개선
• 문서 업데이트
• 기타 변경사항

📸 스크린샷

기존 시도했던 방법 :

1. 뱃지 하단으로 위치 : 시급이 작은 공고와 디자인 갭차이가 심함
2. 뱃지 그대로 유지 : 시급이 클수록 컨텐츠 overflow 가 심해짐

변경된 디자인

🧐 해결해야 하는 문제

🤔 리뷰어 확인 필요 사항

대부분 디자인 관련해서 수정이 되었습니다.
페이지 작업하면서 Container를 필수적으로 사용하게 될텐데 페이지를 확인해보니 상하여백이 필요한 경우가 많아서 isPage props를 넣어
pc:60 mob:40 으로 가져갈 수 있도록 했습니다.
거의 대부분의 페이지에서는 적용가능하나 일부 컴포넌트 혹은 일부페이지에서 맞지않을 수 있으니 그런경우 기존처럼 사용하시면 됩니다.

🔗 관련 이슈

• Closes [Feature] Post/Notice 컴포넌트 디자인 수정 #59
• Related to [Feature] Post/Notice 컴포넌트 디자인 수정 #59

🛠️ 후속 작업

✅ 체크리스트 (필수)

• 작업한 내용과 커밋 메시지 컨벤션을 통일했는지 확인
• 내가 작성한 코드를 테스트까지 완료했는지 잘 작동했는지 확인
• ESLint 검사 통과
• Prettier 포맷팅 적용
• TypeScript 에러 없음
• 빌드 에러 없음

[vercel]

@sohyun0 is attempting to deploy a commit to the projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thejulge	Error			Oct 14, 2025 4:37am