Skip to content

[Style] 자잘한 스타일 수정 #547

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
namdaeun merged 3 commits into from
Jun 1, 2026
Merged

[Style] 자잘한 스타일 수정 #547

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef5c6f0
style: add border-radius
namdaeun May 29, 2026
73db8da
style: adjust padding
namdaeun May 29, 2026
028c2d9
style: adjust padding
namdaeun Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/views/AboutPage/components/CoreValue/Item/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order:
width: 298px;
height: 330px;
padding: 36px 100px;
border-radius: 24px;
gap: 24px;
border-radius: 24px;
background: center bottom 36px no-repeat ${colors.gray900} url(${({ src }) => src});
background-size: calc(120px + 7vw);
opacity: 0;
Expand All @@ -36,6 +36,7 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order:
height: 202px;
padding: 20px 80px;
gap: 8px;
border-radius: 14px;
background-size: 134px 134px;
background-position: center bottom 14px;
white-space: nowrap;
Expand All @@ -46,6 +47,7 @@ export const ItemContainer = styled.div<{ src: string; isInView: boolean; order:
height: 202px;
padding: 20px 80px;
gap: 8px;
border-radius: 14px;
background-size: 134px 134px;
Comment on lines 49 to 51

@gemini-code-assist gemini-code-assist Bot May 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

media.tablet에서 이미 border-radius: 14px;가 정의되어 있고, media.tablet이 모바일 화면 크기까지 커버한다면 media.mobile에서의 중복 선언은 생략할 수 있습니다.

    gap: 8px;
    background-size: 134px 134px;

background-position: center bottom 12px;
white-space: nowrap;
Expand All @@ -67,6 +69,13 @@ export const BackgroundBlur = styled.div<{ isHovered: boolean }>`
backdrop-filter: blur(3.5px);
background-color: rgba(0, 0, 0, 60%);
`};

${media.tablet} {
border-radius: 14px;
}
${media.mobile} {
border-radius: 14px;
}
Comment on lines +73 to +78

@gemini-code-assist gemini-code-assist Bot May 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

일반적으로 media.tablet은 모바일 기기의 화면 크기까지 포함하는 max-width 미디어 쿼리로 정의됩니다. 만약 그렇다면, media.tablet에서 설정한 border-radius: 14px; 스타일이 모바일 기기에도 자연스럽게 적용(cascade)되므로, media.mobile 블록을 중복해서 작성할 필요가 없습니다.

중복 코드를 제거하여 스타일 시트를 더 간결하고 유지보수하기 쉽게 개선하는 것을 제안합니다.

  ${media.tablet} {
    border-radius: 14px;
  }

`;

export const CoreValue = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion src/views/MainPage/components/RecentNews/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ReactComponent as IconInstagram } from '@src/assets/icons/ic_instagram.
import { media } from '@src/lib/styles/breakpoints';

export const RecentNews = styled.section`
padding: 432px 0 372px 0px;
padding: 432px 0 0 0;

${media.tablet} {
padding: 100px 0;
Expand Down
Loading