Skip to content

refactor(typo, colors): 타이포그래피, 컬러 미반영 사항 반영 및 스토리북 개선 #285

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
rtttr1 merged 8 commits into from
Jan 11, 2026
+240 −112
Merged

refactor(typo, colors): 타이포그래피, 컬러 미반영 사항 반영 및 스토리북 개선 #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8b39f7d
feat: 호버시 색상코드, 이름 보이게 애니메이션 적용
rtttr1 Sep 29, 2025
036ebb3
fix: sub-color로 혼자 차별당하던 오렌지색상 scale color로 통합
rtttr1 Sep 29, 2025
c7a6e95
fix: 다르게 적용되있던 컬러 싱크 맞추기
rtttr1 Sep 29, 2025
6c9f5e1
feat: alpha 색상 적용
rtttr1 Sep 29, 2025
b94c201
feat: 투명도색상에 배경 밑 테두리 추가
rtttr1 Sep 29, 2025
4211047
chore: opacity 배경 png 추가
rtttr1 Sep 29, 2025
bbe1d00
feat: Heading 40 font 추가
rtttr1 Sep 29, 2025
dd783dc
feat: alphaGreen, alphaYellow 추가
rtttr1 Jan 11, 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
Binary file added apps/docs/src/assets/Opacity.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 84 additions & 18 deletions apps/docs/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "SUIT", sans-serif;
font-family: 'SUIT', sans-serif;
font-style: normal;
}

Expand All @@ -11,37 +11,32 @@ body {
}

@font-face {
font-family: "SUIT";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Light.woff2")
format("woff2");
font-family: 'SUIT';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "SUIT";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Regular.woff2")
format("woff2");
font-family: 'SUIT';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "SUIT";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Medium.woff2")
format("woff2");
font-family: 'SUIT';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "SUIT";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-SemiBold.woff2")
format("woff2");
font-family: 'SUIT';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "SUIT";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Bold.woff2")
format("woff2");
font-family: 'SUIT';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SUIT-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
Expand All @@ -58,7 +53,7 @@ body {
flex-direction: column;
gap: 16px;
color: white;
font-family: "SUIT", sans-serif;
font-family: 'SUIT', sans-serif;

h4 {
font-size: 28px;
Expand Down Expand Up @@ -96,10 +91,81 @@ body {
.color-chips {
display: flex;

a {
span {
width: 80px;
height: 80px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: transparent;
transition: color 160ms ease;
}

span::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.15);
opacity: 0;
transition: opacity 160ms ease;
pointer-events: none;
z-index: 1;
}

span::after {
content: attr(data-title);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
text-align: center;
white-space: pre-line;
color: white;
opacity: 0;
transition: opacity 160ms ease;
pointer-events: none;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
z-index: 2;
}

span:hover::before {
opacity: 1;
}
span:hover::after {
opacity: 1;
}
span .alpha-bg {
position: absolute;
inset: 0;
background-image: url('/src/assets/Opacity.png');
background-position: center;
background-repeat: repeat;
background-size: 80px 80px;
border-radius: 6px;
z-index: 0;
}
span .alpha-fill {
position: absolute;
inset: 0;
border-radius: 6px;
z-index: 0;
}
}
.alpha-surface {
padding: 6px;
gap: 10px;
border-radius: 8px;
}
.alpha-surface span {
border: 1px solid rgba(255, 255, 255);
border-radius: 6px;
}
}

Expand Down
223 changes: 132 additions & 91 deletions apps/docs/src/stories/Colors.stories.tsx
View file
Open in desktop
Copy link
Contributor

@constantly-dev constantly-dev Dec 27, 2025

Choose a reason for hiding this comment

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

반복되는 코드가 많은 것 같은데 Chip이나 Row등을 따로 컴포넌트로 만들고 map을 사용하도록 수정하면 어떨까요??

Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { colors } from '@sopt-makers/colors';

export default {
title: 'colors/Colors'
}
title: 'colors/Colors',
};

export const Default = {
render: () => {
Expand All @@ -11,101 +11,142 @@ export const Default = {
const alphaScales = [900, 800, 700, 600, 500, 400, 300, 200, 100];

const renderColorChips = (scalesArr: number[], name: string) =>
scalesArr.map(item => {
scalesArr.map((item) => {
const key = `${name}${item}` as keyof typeof colors;
return <a key={key} title={`${key}(${colors[key]})`} style={{ background: colors[key] }}></a>
return <span key={key} data-title={`${key}\n${colors[key]}`} style={{ backgroundColor: colors[key] }}></span>;
});

return <div className="colors-wrap">
<p style={{ fontSize: '20px' }}>* 마우스 오버시 이름과 코드가 뜹니다 *</p>
const renderAlphaChips = (scalesArr: number[], name: string) =>
scalesArr.map((item) => {
const colorKey = `${name}Alpha${item}` as keyof typeof colors;
const displayName = `alpha${item}`;
return (
<span key={colorKey} data-title={`${displayName}`}>
<span className='alpha-bg' aria-hidden='true'></span>
<span className='alpha-fill' aria-hidden='true' style={{ backgroundColor: colors[colorKey] }}></span>
</span>
);
});

<h4>Main Color</h4>
<div className="colors-group">
<p>black</p>
<div className="color-chips"><a title={`black(${colors.black})`} style={{ background: colors.black }}></a></div>
</div>
<div className="colors-group">
<p>white</p>
<div className="color-chips"><a title={`white(${colors.white})`} style={{ background: colors.white }}></a></div>
</div>
return (
<div className='colors-wrap'>
<p style={{ fontSize: '20px' }}>* 마우스 오버시 이름과 코드가 뜹니다 *</p>

<h4>Gray Scale</h4>
<div className="colors-group">
<p>grayscale</p>
<div className="color-chips">{renderColorChips(grayScales, 'gray')}</div>
</div>
<h4>Main Color</h4>
<div className='colors-group'>
<p>black</p>
<div className='color-chips'>
<a data-title={`black\n${colors.black}`} style={{ backgroundColor: colors.black }}></a>
</div>
</div>
<div className='colors-group'>
<p>white</p>
<div className='color-chips'>
<a data-title={`white\n${colors.white}`} style={{ backgroundColor: colors.white }}></a>
</div>
Comment on lines +38 to +46
Copy link
Contributor

@constantly-dev constantly-dev Dec 27, 2025

Choose a reason for hiding this comment

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

chip 내부에 a태그는 무슨 역할을 하나요??
color code 복사 등의 기능이 있는 건지 궁금합니다. 특별하게 기능이 없다면 a태그가 아니어도 되지 않을까 생각해서 여쭤봅니다!

Copy link
Contributor Author

@rtttr1 rtttr1 Jan 11, 2026

Choose a reason for hiding this comment

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

아마 전에 a태그에 title 속성넣어서 브라우저에서 기본으로 제공하는 툴팁 사용했었어서 a태그로 구현되어있는거 같네요.
시멘틱적으로 맞지않다 생각해 span으로 바꿔주었습니다!

</div>

<h4>Scale Color</h4>
<div className="colors-group">
<p>blue</p>
<div className="color-chips">{renderColorChips(scales, 'blue')}</div>
</div>
<div className="colors-group">
<p>red</p>
<div className="color-chips">{renderColorChips(scales, 'red')}</div>
</div>
<div className="colors-group">
<p>green</p>
<div className="color-chips">{renderColorChips(scales, 'green')}</div>
</div>
<div className="colors-group">
<p>yellow</p>
<div className="color-chips">{renderColorChips(scales, 'yellow')}</div>
</div>
<h4>Gray Scale</h4>
<div className='colors-group'>
<p>grayscale</p>
<div className='color-chips'>{renderColorChips(grayScales, 'gray')}</div>
</div>

<h4>Sub Color</h4>
<div className="colors-group">
<p>orange</p>
<div className="color-chips">{renderColorChips(scales, 'orange')}</div>
</div>
<h4>Scale Color</h4>
<div className='colors-group'>
<p>orange</p>
<div className='color-chips'>{renderColorChips(scales, 'orange')}</div>
</div>
<div className='colors-group'>
<p>blue</p>
<div className='color-chips'>{renderColorChips(scales, 'blue')}</div>
</div>
<div className='colors-group'>
<p>red</p>
<div className='color-chips'>{renderColorChips(scales, 'red')}</div>
</div>
<div className='colors-group'>
<p>green</p>
<div className='color-chips'>{renderColorChips(scales, 'green')}</div>
</div>
<div className='colors-group'>
<p>yellow</p>
<div className='color-chips'>{renderColorChips(scales, 'yellow')}</div>
</div>
Comment on lines +62 to +75
Copy link

@ljh0608 ljh0608 Dec 27, 2025

Choose a reason for hiding this comment

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

반복되는 부분 map활용해서 가독성과 코드량을 줄이면 더 좋을 것 같습니다!


<h4>Alpha Color</h4>
<div className="colors-group">
<p>red</p>
<div className="color-chips">{renderColorChips(alphaScales, 'red')}</div>
</div>
<div className="colors-group">
<p>orange</p>
<div className="color-chips">{renderColorChips(alphaScales, 'orange')}</div>
</div>
<div className="colors-group">
<p>blue</p>
<div className="color-chips">{renderColorChips(alphaScales, 'blue')}</div>
</div>
<div className="colors-group">
<p>gray</p>
<div className="color-chips">{renderColorChips(alphaScales, 'gray')}</div>
</div>
<h4>Alpha Color</h4>
<div className='colors-group'>
<p>gray</p>
<div className='color-chips alpha-surface'>{renderAlphaChips(alphaScales, 'gray')}</div>
</div>
<div className='colors-group'>
<p>orange</p>
<div className='color-chips alpha-surface'>{renderAlphaChips(alphaScales, 'orange')}</div>
</div>
<div className='colors-group'>
<p>blue</p>
<div className='color-chips alpha-surface'>{renderAlphaChips(alphaScales, 'blue')}</div>
</div>
<div className='colors-group'>
<p>red</p>
<div className='color-chips alpha-surface'>{renderAlphaChips(alphaScales, 'red')}</div>
</div>
<div className='colors-group'>
<p>green</p>
<div className='color-chips alpha-surface'>{renderAlphaChips(alphaScales, 'green')}</div>
</div>
<div className='colors-group'>
<p>yellow</p>
<div className='color-chips alpha-surface'>{renderAlphaChips(alphaScales, 'yellow')}</div>
</div>

<h4>Semantic Color</h4>
<div className="colors-group">
<p>background</p>
<div className="color-chips"><a title={`background(${colors.background}, gray950)`} style={{ background: colors.background }}></a></div>
</div>
<div className="colors-group">
<p>background-dimmed</p>
<div className="color-chips"><a title={`background-dimmed(${colors.backgroundDimmed}, gray-alpha100)`} style={{ background: colors.backgroundDimmed }}></a></div>
</div>
<div className="colors-group">
<p>secondary</p>
<div className="color-chips"><a title={`secondary(${colors.secondary}, orange400)`} style={{ background: colors.secondary }}></a></div>
</div>
<div className="colors-group">
<p>success</p>
<div className="color-chips"><a title={`success(${colors.success}, blue400)`} style={{ background: colors.success }}></a></div>
</div>
<div className="colors-group">
<p>error</p>
<div className="color-chips"><a title={`error(${colors.error}, red400)`} style={{ background: colors.error }}></a></div>
</div>
<div className="colors-group">
<p>information</p>
<div className="color-chips"><a title={`information(${colors.information}, green400)`} style={{ background: colors.information }}></a></div>
</div>
<div className="colors-group">
<p>attention</p>
<div className="color-chips"><a title={`attention(${colors.attention}, yellow400)`} style={{ background: colors.attention }}></a></div>
</div>
</div>
}
}
<h4>Semantic Color</h4>
<div className='colors-group'>
<p>background</p>
<div className='color-chips'>
<a data-title={`background\n${colors.background}`} style={{ backgroundColor: colors.background }}></a>
</div>
</div>
<div className='colors-group'>
<p>background-dimmed</p>
<div className='color-chips'>
<a
data-title={`background-dimmed\n${colors.backgroundDimmed}`}
style={{ backgroundColor: colors.backgroundDimmed }}
></a>
</div>
</div>
<div className='colors-group'>
<p>secondary</p>
<div className='color-chips'>
<a data-title={`secondary\n${colors.secondary}`} style={{ backgroundColor: colors.secondary }}></a>
</div>
</div>
<div className='colors-group'>
<p>success</p>
<div className='color-chips'>
<a data-title={`success\n${colors.success}`} style={{ backgroundColor: colors.success }}></a>
</div>
</div>
<div className='colors-group'>
<p>error</p>
<div className='color-chips'>
<a data-title={`error\n${colors.error}`} style={{ backgroundColor: colors.error }}></a>
</div>
</div>
<div className='colors-group'>
<p>information</p>
<div className='color-chips'>
<a data-title={`information\n${colors.information}`} style={{ backgroundColor: colors.information }}></a>
</div>
</div>
<div className='colors-group'>
<p>attention</p>
<div className='color-chips'>
<a data-title={`attention\n${colors.attention}`} style={{ backgroundColor: colors.attention }}></a>
</div>
</div>
</div>
);
},
};
Loading