Feature: UI 전면 개선 #47
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,6 +21,7 @@ interface CardProps { | |
| onPress?: () => void; | ||
| style?: ViewStyle; | ||
| fullWidth?: boolean; | ||
| variant?: 'default' | 'light'; | ||
| } | ||
|
|
||
| export default function Card({ | ||
|
|
@@ -31,6 +32,7 @@ export default function Card({ | |
| onPress, | ||
| style, | ||
| fullWidth = false, | ||
| variant = 'default', | ||
| }: CardProps) { | ||
| const { width: screenWidth } = Dimensions.get('window'); | ||
| const [imageError, setImageError] = useState(false); | ||
|
|
@@ -52,6 +54,7 @@ export default function Card({ | |
| <CardContainer | ||
| fullWidth={fullWidth} | ||
| mode={finalMode} | ||
| variant={variant} | ||
| onPress={onPress} | ||
| style={style} | ||
| activeOpacity={0.8} | ||
|
|
@@ -77,7 +80,7 @@ export default function Card({ | |
| </LoadingContainer> | ||
| )} | ||
| {content?.hasStar && ( | ||
| <StarIcon size={20} color="#2d2d2d" fill="#2d2d2d" /> | ||
| )} | ||
| </ImageContainer> | ||
| </CardContainer> | ||
|
|
@@ -86,16 +89,19 @@ export default function Card({ | |
|
|
||
| if (finalMode === 'image-with-text') { | ||
| const contentWidth = screenWidth - 64; | ||
| const imageSize = contentWidth * 0.36; // 0.45에서 0.36으로 변경 (약 20% 감소) | ||
|
There was a problem hiding this comment. 스타일 가이드에서는 매직 넘버 사용을 지양하고 이름 있는 상수로 치환할 것을 권장합니다.1 Style Guide ReferencesFootnotes
|
||
| return ( | ||
| <CardContainer | ||
| fullWidth={fullWidth} | ||
| mode={finalMode} | ||
| variant={variant} | ||
| onPress={onPress} | ||
| style={style} | ||
| activeOpacity={0.8} | ||
| > | ||
| {content?.cardTitle && ( | ||
| <CardTitle variant={variant}>{content.cardTitle}</CardTitle> | ||
| )} | ||
| <ContentRow> | ||
| {imageSource && ( | ||
| <CardImage | ||
|
|
@@ -107,14 +113,18 @@ export default function Card({ | |
| )} | ||
| {content && ( | ||
| <CardContentContainer> | ||
| {content.title && ( | ||
| <Title variant={variant}>{content.title}</Title> | ||
| )} | ||
| {content.subtitle && ( | ||
| <Subtitle variant={variant}>{content.subtitle}</Subtitle> | ||
| )} | ||
| {content.stats && ( | ||
| <StatsContainer> | ||
| {content.stats.map((stat, index) => ( | ||
| <StatItem key={index}> | ||
| <StatLabel variant={variant}>{stat.label}</StatLabel> | ||
| <StatValue variant={variant}>{stat.value}</StatValue> | ||
| </StatItem> | ||
| ))} | ||
| </StatsContainer> | ||
|
|
@@ -130,6 +140,7 @@ export default function Card({ | |
| <CardContainer | ||
| fullWidth={fullWidth} | ||
| mode={finalMode} | ||
| variant={variant} | ||
| onPress={onPress} | ||
| style={style} | ||
| activeOpacity={0.8} | ||
|
|
@@ -142,9 +153,11 @@ export default function Card({ | |
| const CardContainer = styled(TouchableOpacity)<{ | ||
| fullWidth: boolean; | ||
| mode: CardMode; | ||
| variant: 'default' | 'light'; | ||
| }>(({ fullWidth, mode, variant }) => ({ | ||
| backgroundColor: variant === 'light' ? '#ffffff' : 'rgba(255, 255, 255, 0.1)', | ||
| borderColor: | ||
| variant === 'light' ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.2)', | ||
|
Comment on lines
+157
to
+160
There was a problem hiding this comment. 스타일 가이드에 따라 색상 값은 theme 또는 constants 파일에서 관리하는 것이 좋습니다.1 예시: // theme.ts
export const theme = {
light: {
background: '#ffffff',
borderColor: 'rgba(0, 0, 0, 0.1)',
text: '#000000',
},
dark: {
background: 'rgba(255, 255, 255, 0.1)',
borderColor: 'rgba(255, 255, 255, 0.2)',
text: '#ffffff',
}
}
// CardContainer.tsx
const CardContainer = styled(TouchableOpacity)<...>(({ theme, variant }) => ({
backgroundColor: theme[variant].background,
borderColor: theme[variant].borderColor,
// ...
}));Style Guide ReferencesFootnotes
|
||
| borderWidth: 1, | ||
| borderRadius: 12, | ||
| padding: mode === 'only-image' ? 0 : 16, | ||
|
|
@@ -153,12 +166,14 @@ const CardContainer = styled(TouchableOpacity)<{ | |
| aspectRatio: fullWidth ? undefined : 1, | ||
| })); | ||
|
|
||
| const CardTitle = styled.Text<{ variant?: 'default' | 'light' }>( | ||
| ({ variant }) => ({ | ||
| color: variant === 'light' ? '#000000' : '#ffffff', | ||
| fontSize: 16, | ||
| fontWeight: '600', | ||
| marginBottom: 8, | ||
| }), | ||
| ); | ||
|
|
||
| const ContentRow = styled.View({ | ||
| flexDirection: 'row', | ||
|
|
@@ -185,18 +200,21 @@ const CardContentContainer = styled.View({ | |
| flex: 1, | ||
| }); | ||
|
|
||
| const Title = styled.Text<{ variant?: 'default' | 'light' }>(({ variant }) => ({ | ||
| color: variant === 'light' ? '#000000' : '#ffffff', | ||
| fontSize: 18, | ||
| fontWeight: 'bold', | ||
| marginBottom: 4, | ||
| })); | ||
|
|
||
| const Subtitle = styled.Text<{ variant?: 'default' | 'light' }>( | ||
| ({ variant }) => ({ | ||
| color: | ||
| variant === 'light' ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)', | ||
| fontSize: 14, | ||
| marginBottom: 8, | ||
| }), | ||
| ); | ||
|
|
||
| const StatsContainer = styled.View({ | ||
| flexDirection: 'row', | ||
|
|
@@ -207,17 +225,23 @@ const StatItem = styled.View({ | |
| alignItems: 'center', | ||
| }); | ||
|
|
||
| const StatLabel = styled.Text<{ variant?: 'default' | 'light' }>( | ||
| ({ variant }) => ({ | ||
| color: | ||
| variant === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)', | ||
| fontSize: 12, | ||
| marginBottom: 2, | ||
| }), | ||
| ); | ||
|
|
||
| const StatValue = styled.Text<{ variant?: 'default' | 'light' }>( | ||
| ({ variant }) => ({ | ||
| color: | ||
| variant === 'light' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)', | ||
| fontSize: 14, | ||
| fontWeight: '600', | ||
| }), | ||
| ); | ||
|
|
||
| const StarIcon = styled(Star)({ | ||
| position: 'absolute', | ||
|
|
@@ -254,7 +278,7 @@ const LoadingContainer = styled.View({ | |
| }); | ||
|
|
||
| const LoadingText = styled.Text({ | ||
| color: '#2d2d2d', | ||
| fontSize: 12, | ||
| fontWeight: '500', | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
스타일 가이드에 따르면 색상 값은 theme 또는 constants 파일로 관리해야 합니다.1
#2d2d2d와 같은 색상 값을 직접 사용하기보다,colors.ts에 정의된 테마 색상을 사용하도록 수정하는 것이 좋겠습니다.Style Guide References
Footnotes
재사용 가능한 색상, 폰트, spacing은 theme 또는 constants 파일로 관리해야 합니다. ↩