Skip to content

Commit 3a82128

Browse files
MINJE-98MINJE-98
authored
댓글, 좋아요 카운트 컴포넌트 (#142)
* fix: 아이콘크기를 고정하였습니다. * feat: 갯수를 표시할때 사용하는 컴포넌트 추가 * feat: count 분자 컴포넌트 작성 * fix: 글로벌 시멘틱 테그 스타일 수정 * fix: 글로벌 css 수정 * fix: 글로벌 css
1 parent 5f9aca5 commit 3a82128

File tree

6 files changed

+87
-37
lines changed

6 files changed

+87
-37
lines changed

‎src/components/atom/icons/CommentIcon.tsx

+17-21
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
1-
const CommentIcon = () => {
1+
interface CommentIconProps {
2+
className?: string;
3+
}
4+
const CommentIcon = ({ className }: CommentIconProps) => {
25
return (
3-
<svg
4-
xmlns="http://www.w3.org/2000/svg"
5-
width="25"
6-
height="25"
7-
viewBox="0 0 1000 1000"
8-
className="dark:fill-neutral-50 fill-neutral-800"
9-
>
10-
<path
11-
d="M573 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40zM293 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"
12-
p-id="8186"
13-
/>
14-
<path
15-
d="M894 345c-48.1-66-115.3-110.1-189-130v0.1c-17.1-19-36.4-36.5-58-52.1-163.7-119-393.5-82.7-513 81-96.3 133-92.2 311.9 6 439l0.8 132.6c0 3.2 0.5 6.4 1.5 9.4 5.3 16.9 23.3 26.2 40.1 20.9L309 806c33.5 11.9 68.1 18.7 102.5 20.6l-0.5 0.4c89.1 64.9 205.9 84.4 313 49l127.1 41.4c3.2 1 6.5 1.6 9.9 1.6 17.7 0 32-14.3 32-32V753c88.1-119.6 90.4-284.9 1-408zM323 735l-12-5-99 31-1-104-8-9c-84.6-103.2-90.2-251.9-11-361 96.4-132.2 281.2-161.4 413-66 132.2 96.1 161.5 280.6 66 412-80.1 109.9-223.5 150.5-348 102z m505-17l-8 10 1 104-98-33-12 5c-56 20.8-115.7 22.5-171 7l-0.2-0.1C613.7 788.2 680.7 742.2 729 676c76.4-105.3 88.8-237.6 44.4-350.4l0.6 0.4c23 16.5 44.1 37.1 62 62 72.6 99.6 68.5 235.2-8 330z"
16-
p-id="8187"
17-
/>
18-
<path
19-
d="M433 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"
20-
p-id="8188"
21-
/>
22-
</svg>
6+
<span>
7+
<svg
8+
xmlns="http://www.w3.org/2000/svg"
9+
width="17"
10+
height="17"
11+
viewBox="0 0 17 17"
12+
className={className}
13+
>
14+
<path d="M9.5127 6.98926C9.1292 6.98926 8.83203 7.28643 8.83203 7.65332C8.83203 8.02021 9.1292 8.31738 9.5127 8.31738C9.86299 8.31738 10.1602 8.02021 10.1602 7.65332C10.1602 7.28643 9.86299 6.98926 9.5127 6.98926ZM4.86426 6.98926C4.48076 6.98926 4.18359 7.28643 4.18359 7.65332C4.18359 8.02021 4.48076 8.31738 4.86426 8.31738C5.21455 8.31738 5.51172 8.02021 5.51172 7.65332C5.51172 7.28643 5.21455 6.98926 4.86426 6.98926Z" />
15+
<path d="M14.8416 5.72755C14.043 4.63185 12.9274 3.89972 11.7039 3.56935V3.57101C11.42 3.25558 11.0996 2.96505 10.741 2.70606C8.02331 0.730479 4.20827 1.33312 2.22439 4.05079C0.625657 6.2588 0.693724 9.22882 2.324 11.3389L2.33728 13.5402C2.33728 13.5934 2.34558 13.6465 2.36218 13.6963C2.45017 13.9769 2.749 14.1313 3.0279 14.0433L5.12966 13.3809C5.68581 13.5784 6.26023 13.6913 6.83132 13.7229L6.82302 13.7295C8.30222 14.8069 10.2413 15.1307 12.0193 14.543L14.1294 15.2303C14.1825 15.2469 14.2373 15.2568 14.2937 15.2568C14.5876 15.2568 14.825 15.0194 14.825 14.7256V12.501C16.2876 10.5154 16.3258 7.7712 14.8416 5.72755ZM5.36208 12.2022L5.16286 12.1192L3.51931 12.6338L3.50271 10.9072L3.3699 10.7578C1.9654 9.04454 1.87243 6.57589 3.18728 4.76466C4.78767 2.56993 7.85564 2.08517 10.0437 3.66896C12.2384 5.26437 12.7249 8.32735 11.1394 10.5088C9.80964 12.3333 7.42898 13.0073 5.36208 12.2022ZM13.7459 11.9199L13.6131 12.0859L13.6297 13.8125L12.0027 13.2647L11.8035 13.3477C10.8738 13.693 9.88269 13.7212 8.96462 13.4639L8.9613 13.4622C10.1882 13.0854 11.3005 12.3217 12.1023 11.2227C13.3707 9.47452 13.5765 7.27814 12.8394 5.40548L12.8494 5.41212C13.2312 5.68605 13.5815 6.02804 13.8787 6.44142C15.084 8.09493 15.0159 10.3461 13.7459 11.9199Z" />
16+
<path d="M7.18848 6.98926C6.80498 6.98926 6.50781 7.28643 6.50781 7.65332C6.50781 8.02021 6.80498 8.31738 7.18848 8.31738C7.53877 8.31738 7.83594 8.02021 7.83594 7.65332C7.83594 7.28643 7.53877 6.98926 7.18848 6.98926Z" />
17+
</svg>
18+
</span>
2319
);
2420
};
2521

‎src/components/atom/icons/HeartIcon.tsx

+17-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1-
const HeartIcon = () => (
2-
<svg
3-
xmlns="http://www.w3.org/2000/svg"
4-
width="25"
5-
height="25"
6-
viewBox="0 0 225 225"
7-
className="dark:fill-neutral-50 fill-neutral-800"
8-
>
9-
<path d="M159.933,12.904c-26.386,0-40.36,12.722-47.313,22.892c-6.944-10.17-20.897-22.892-47.228-22.892 C33.897,12.904,0,33.865,0,79.887c0,18.138,3.938,32.532,13.166,48.132c8.983,15.184,28.006,33.897,56.541,55.622 c11.137,8.479,21.396,15.612,28.042,20.103c12.771,8.631,13.271,8.72,14.814,8.721c0.078,0.002,0.153,0.003,0.228,0.003 c1.459,0,2.464-0.465,14.673-8.675c6.65-4.473,16.918-11.579,28.065-20.039c28.57-21.681,47.646-40.433,56.699-55.734 c9.212-15.571,13.143-29.967,13.143-48.132C225.371,33.865,191.45,12.904,159.933,12.904z" />
10-
</svg>
1+
interface HeartIconProps {
2+
className?: string;
3+
}
4+
const HeartIcon = ({
5+
className = "dark:fill-neutral-50 fill-neutral-800",
6+
}: HeartIconProps) => (
7+
<span>
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
width="18"
11+
height="16"
12+
viewBox="0 0 18 16"
13+
className={className}
14+
>
15+
<path d="M12.3543 1C10.481 1 9.48897 1.89249 8.99535 2.60594C8.50237 1.89249 7.51179 1 5.64244 1C3.40649 1 1 2.47048 1 5.69905C1 6.97149 1.27957 7.98127 1.93471 9.07566C2.57245 10.1409 3.92297 11.4536 5.94878 12.9777C6.73944 13.5725 7.46777 14.0729 7.9396 14.388C8.84626 14.9935 8.88176 14.9997 8.9913 14.9998C8.99684 14.9999 9.00217 15 9.00749 15C9.11107 15 9.18242 14.9674 10.0492 14.3914C10.5213 14.0776 11.2503 13.5791 12.0416 12.9856C14.0699 11.4646 15.4242 10.1491 16.0669 9.07573C16.7209 7.98337 17 6.97345 17 5.69912C17 2.47048 14.5918 1 12.3543 1Z" />
16+
</svg>
17+
</span>
1118
);
1219

1320
export default HeartIcon;

‎src/components/atom/text/Count.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
interface CountProps {
2+
className: string;
3+
children: number;
4+
}
5+
6+
const Count = ({ className, children }: CountProps) => (
7+
<span className={className}>{children}</span>
8+
);
9+
export default Count;

‎src/components/molecules/count/CommentCount.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import CommentIcon from "@Components/atom/icons/CommentIcon";
2+
import Count from "@Components/atom/text/Count";
3+
4+
interface CommentCountProps {
5+
comment: number;
6+
}
7+
8+
const CommentCount = ({ comment }: CommentCountProps) => {
9+
return (
10+
<div className="flex items-center">
11+
<CommentIcon />
12+
<Count className="mt-[3px] ml-1 text-xs font-eng-sub-font-1 text-neutral-800 dark:text-neutral-50">
13+
{comment}
14+
</Count>
15+
</div>
16+
);
17+
};
18+
19+
export default CommentCount;

‎src/components/molecules/count/LikeCount.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import HeartIcon from "@Components/atom/icons/HeartIcon";
2+
import Count from "@Components/atom/text/Count";
3+
4+
interface LikeCountProps {
5+
like: number;
6+
}
7+
8+
const LikeCount = ({ like }: LikeCountProps) => {
9+
return (
10+
<div className="flex items-center">
11+
<HeartIcon />
12+
<Count className="ml-1 mt-[2px] text-sm font-eng-sub-font-1 text-neutral-800 dark:text-neutral-50">
13+
{like}
14+
</Count>
15+
</div>
16+
);
17+
};
18+
19+
export default LikeCount;

‎styles/globals.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@
33
@tailwind utilities;
44
@layer base {
55
h1 {
6-
@apply text-5xl text-neutral-800 dark:text-neutral-200 font-eng-sub-font-2;
6+
@apply text-5xl font-bold text-neutral-800 dark:text-neutral-50 font-eng-sub-font-2;
77
}
88
h2 {
9-
@apply text-4xl text-neutral-800 dark:text-neutral-200 font-eng-sub-font-2;
9+
@apply text-4xl font-semibold text-neutral-800 dark:text-neutral-50 font-eng-sub-font-2;
1010
}
1111
h3 {
12-
@apply text-3xl text-neutral-800 dark:text-neutral-200 font-eng-sub-font-2;
12+
@apply text-3xl font-medium text-neutral-500 dark:text-neutral-300 font-eng-sub-font-2;
1313
}
1414
a {
15-
@apply text-neutral-800 dark:text-neutral-200 hover:underline;
15+
@apply text-neutral-800 dark:text-neutral-50 hover:underline;
1616
}
1717
p {
18-
@apply text-xl text-neutral-400 font-eng-sub-font-2;
18+
@apply text-xl text-neutral-800 dark:text-neutral-50 font-eng-sub-font-2;
1919
}
2020
input {
21-
@apply text-gray-700 dark:text-white dark:bg-neutral-900 focus:outline-none;
21+
@apply font-medium text-neutral-800 dark:text-neutral-50 dark:bg-neutral-900 focus:outline-none;
2222
}
2323
}

0 commit comments

Comments
 (0)