Skip to content

style: snac->SNAC, 카드 배경 흰색 #129

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
merged 3 commits into from
Aug 6, 2025
Merged

style: snac->SNAC, 카드 배경 흰색 #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8db1d82
style: snac->SNAC, 카드 배경 흰색
yshls Aug 6, 2025
16dff6f
Merge branch 'main' into QI1-218-서비스-소개-안내-배너-1개
yshls Aug 6, 2025
5e43ecf
fix: 로그인 막히는것, 반응형
yshls Aug 6, 2025
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
20 changes: 7 additions & 13 deletions app/(shared)/components/DataItemCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ export const DataItemCard = ({
cardId,
carrier,
dataAmount,
skipLoginCheck = false,
}: DataItemCardProps) => {
const loggedInUser = useAuthStore((state: AuthState) => state.user);
const { actions } = useHomeStore();
Expand Down Expand Up @@ -101,14 +100,14 @@ export const DataItemCard = ({
const buttonConfig = getButtonConfig();

return (
<div className="transition-transform duration-300 hover:scale-[1.02] relative bg-[#F3F5F7] rounded-2xl shadow-md max-w-[150px] max-h-[203px] md:w-[238px] md:max-w-none md:max-h-[348px] flex flex-col p-3">
<div className="transition-transform duration-300 hover:scale-[1.02] relative bg-[#F3F5F7] rounded-2xl shadow-md w-full max-h-[203px] md:max-h-[348px] flex flex-col p-3">
{isNew && (
<span className="absolute z-10 bg-red text-white text-regular-2xs md:text-regular-xs font-bold w-[47px] md:w-[57px] h-[20px] md:h-[24px] rounded-[16px] flex items-center justify-center ">
<span className="absolute top-3 left-3 z-10 bg-red text-white text-regular-2xs md:text-regular-xs font-bold w-[47px] md:w-[57px] h-[20px] md:h-[24px] rounded-[16px] flex items-center justify-center">
{newBadgeText}
</span>
)}
{isMyPost && (
<span className="absolute top-3 right-3 z-10 bg-green-400 text-white text-regular-2xs md:text-regular-xs w-[47px] md:w-[57px] h-[20px] md:h-[24px] rounded-[16px] font-bold px-1 py-1 flex items-center justify-center ">
<span className="absolute top-3 right-3 z-10 bg-green-400 text-white text-regular-2xs md:text-regular-xs w-[47px] md:w-[57px] h-[20px] md:h-[24px] rounded-[16px] font-bold px-1 py-1 flex items-center justify-center">
MY
</span>
)}
Expand All @@ -117,12 +116,13 @@ export const DataItemCard = ({
src={imageUrl}
alt={title}
fill
sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
style={{ objectFit: 'contain' }}
/>
</div>

<div className="flex-grow flex flex-col items-center md:items-start md:py-[18px] mt-2">
<h3 className="text-medium-xs font-bold md:text-medium-md text-[#141718]">
<h3 className="text-medium-xs font-bold md:text-medium-md text-[#141718] truncate w-full text-center md:text-left">
{title}
</h3>
<p className="text-medium-sm md:text-medium-sm text-gray-900 h-6 flex items-center">
Expand All @@ -142,22 +142,16 @@ export const DataItemCard = ({
return;
}

// 로그인 상태 확인 (skipLoginCheck가 true면 건너뛰기)
if (!skipLoginCheck && !loggedInUser) {
toast.error('로그인 해주세요.');
router.push('/login');
return;
}
onClickBuy({ email, createdAt });
}}
className={`w-btn-sm h-btn-sm md:w-btn-md md:h-btn-md ${buttonConfig.className} transition text-regular-md border rounded-lg flex items-center justify-center`}
className={`w-full h-full ${buttonConfig.className} transition text-regular-md border rounded-lg flex items-center justify-center`}
style={{ fontSize: 'clamp(12px, 2.5vw, 16px)' }}
disabled={!buttonConfig.clickable}
>
{buttonConfig.text}
</Button>
) : (
<div className="flex gap-2 w-full">
<div className="flex gap-2 w-full h-full">
{sellStatus === 'SELLING' ? (
<>
{cardCategory === 'SELL' && (
Expand Down
26 changes: 14 additions & 12 deletions app/home/components/introduction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,22 +216,24 @@ const DataItemCard = ({
whileInView={{ opacity: 1, y: 0 }}
viewport={{ amount: 0.5 }}
transition={{ duration: 0.5, delay }}
className="transition-transform duration-300 hover:scale-[1.05] relative bg-white dark:bg-gray-800 rounded-2xl shadow-light flex flex-col p-4 h-full"

className="transition-transform duration-300 hover:scale-[1.05] relative bg-white dark:bg-white rounded-2xl shadow-light flex flex-col p-4 h-full"

>
<div className="relative h-20 w-full my-2">
<Image src={imageUrl} alt={title} layout="fill" objectFit="contain" />
</div>

<div className="flex-grow flex flex-col items-start mt-2">
<h3 className="font-bold text-gray-900 dark:text-white text-left text-sm md:text-base">

<h3 className="font-bold text-gray-900 text-left text-sm md:text-base">
{title}
</h3>
<p className="text-sm text-gray-800 dark:text-gray-200 h-6 flex items-center">
<p className="text-sm text-gray-800 h-6 flex items-center">
{displayPrice}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
바삭스코어 {ratingScore}
</p>
<p className="text-xs text-gray-500 ">바삭스코어 {ratingScore}</p>

</div>

<div className="flex justify-center mt-4">
Expand Down Expand Up @@ -325,7 +327,7 @@ export default function Introduction() {
className="absolute flex flex-col items-center"
>
<h2 className="text-8xl md:text-9xl font-extrabold text-teal-green bg-gradient-to-r from-teal-400 to-lime-400 bg-clip-text text-transparent">
Snac
SNAC
</h2>
</motion.div>
</div>
Expand All @@ -348,7 +350,7 @@ export default function Introduction() {
}}
className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
>
Snac의 약속
SNAC의 약속
</motion.h2>
<motion.p
variants={{
Expand All @@ -371,7 +373,7 @@ export default function Introduction() {
{
icon: <Users className="w-12 h-12 text-teal-green" />,
title: '신속한 실시간 매칭',
desc: 'AI 기반 매칭 시스템이 최적의 거래 상대를 즉시 찾아 연결합니다.',
desc: '시스템이 최적의 거래 상대를 즉시 찾아 연결합니다.',
},
].map((item, i) => (
<motion.div
Expand Down Expand Up @@ -423,7 +425,7 @@ export default function Introduction() {
}}
className="mt-4 text-lg text-gray-600 dark:text-gray-400"
>
Snac은 데이터 거래에 필요한 모든 기능을 갖추고 있습니다.
SNAC은 데이터 거래에 필요한 모든 기능을 갖추고 있습니다.
</motion.p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
Expand Down Expand Up @@ -533,7 +535,7 @@ export default function Introduction() {
}}
className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
>
Snac 포인트만의 특별한 혜택
SNAC 포인트만의 특별한 혜택
</motion.h2>
<motion.p
variants={{
Expand All @@ -542,7 +544,7 @@ export default function Introduction() {
}}
className="mt-4 text-lg text-gray-600 dark:text-gray-400"
>
포인트는 현금으로 환전할 수 없지만, Snac 생태계 안에서 더 큰
포인트는 현금으로 환전할 수 없지만, SNAC 생태계 안에서 더 큰
가치를 가집니다.
</motion.p>
</motion.div>
Expand Down