Skip to content

Commit

Permalink
FE-58 👄 댓글 카드 관련 인터페이스, 스타일 분리
Browse files Browse the repository at this point in the history
  • Loading branch information
newjinlee committed Jul 11, 2024
1 parent 4b31636 commit b0591d6
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 49 deletions.
51 changes: 2 additions & 49 deletions src/components/Card/CommentCard.tsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,7 @@
import React from 'react';
import Image from 'next/image';

interface CommentCardProps {
status: 'edit' | 'complete';
}

const sizeStyles = {
sm: 'w-[360px] h-[130px]',
md: 'md:w-[384px] md:h-[162px]',
lg: 'lg:w-[640px] lg:h-[176px]',
};

const textSizeStyles = {
sm: {
name: 'text-xs',
time: 'text-xs',
action: 'text-xs',
content: 'text-sm',
},
md: {
name: 'md:text-sm',
time: 'md:text-sm',
action: 'md:text-sm',
content: 'md:text-base',
},
lg: {
name: 'lg:text-base',
time: 'lg:text-base',
action: 'lg:text-base',
content: 'lg:text-xl',
},
};

const gapStyles = {
sm: 'gap-2',
md: 'md:gap-3',
lg: 'lg:gap-4',
};

const paddingStyles = {
sm: 'py-4 px-6',
md: 'md:p-6',
lg: 'lg:py-[35px] lg:px-6',
};

const contentWidthStyles = {
sm: 'w-[248px]',
md: 'md:w-[272px]',
lg: 'lg:w-[528px]',
};
import { CommentCardProps } from '@/types/CommentCardTypes';
import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';

function CommentCard({ status }: CommentCardProps) {
return (
Expand Down
44 changes: 44 additions & 0 deletions src/styles/CommentCardStyles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
export const sizeStyles = {
sm: 'w-[360px] h-[130px]',
md: 'md:w-[384px] md:h-[162px]',
lg: 'lg:w-[640px] lg:h-[176px]',
};

export const textSizeStyles = {
sm: {
name: 'text-xs',
time: 'text-xs',
action: 'text-xs',
content: 'text-sm',
},
md: {
name: 'md:text-sm',
time: 'md:text-sm',
action: 'md:text-sm',
content: 'md:text-base',
},
lg: {
name: 'lg:text-base',
time: 'lg:text-base',
action: 'lg:text-base',
content: 'lg:text-xl',
},
};

export const gapStyles = {
sm: 'gap-2',
md: 'md:gap-3',
lg: 'lg:gap-4',
};

export const paddingStyles = {
sm: 'py-4 px-6', // 위아래 16px, 양 옆 24px
md: 'md:p-6', // 위아래, 양옆 24px
lg: 'lg:py-[35px] lg:px-6', // 위아래 35px, 양 옆 24px
};

export const contentWidthStyles = {
sm: 'w-[248px]',
md: 'md:w-[272px]',
lg: 'lg:w-[528px]',
};
3 changes: 3 additions & 0 deletions src/types/CommentCardTypes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export interface CommentCardProps {
status: 'edit' | 'complete';
}

0 comments on commit b0591d6

Please sign in to comment.