feat: comment input (#develop)

Author: createhb21

pnpm-lock.yaml

@@ -25,4 +25,4 @@ dist-ssr
 /test-results/
 e2e/playwright-report/
 /blob-report/
-/playwright/.cache/
+/playwright/.cache/

services/ahhachul.com/.gitignore

@@ -34,6 +34,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@hookform/resolvers": "^3.9.1",
+    "@lexical/link": "^0.27.1",
     "@lexical/react": "^0.23.1",
     "@lottiefiles/react-lottie-player": "^3.6.0",
     "@radix-ui/react-dropdown-menu": "^2.1.4",

services/ahhachul.com/package.json

@@ -7,7 +7,7 @@ export const postComment = async (data: {
   servicePath: string;
   postId: number;
   content: string;
-  upperCommentId: number;
+  upperCommentId: number | null;
   isPrivate: boolean;
 }) => {
   const { servicePath, postId, content, upperCommentId, isPrivate } = data;

services/ahhachul.com/src/apis/request/comment.ts

@@ -20,6 +20,7 @@ export { default as WarningIcon } from './ic_warning.svg?react';
 export { default as ProfileIcon } from './ic_profile.svg?react';
 export { default as CommentIcon } from './ic_comment.svg?react';
 export { default as ChevronIcon } from './ic_chevron.svg?react';
+export { default as CheckboxIcon } from './ic_checkbox.svg?react';
 export { default as BookmarkIcon } from './ic_bookmark.svg?react';
 export { default as SmallLogeIcon } from './ic_logo_sm.svg?react';
 export { default as EllipsisIcon } from './ic_ellipsis.svg?react';

services/ahhachul.com/src/assets/icons/system/ic_checkbox.svg

@@ -0,0 +1,108 @@
+import { ChangeEvent } from 'react';
+
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { CheckboxIcon } from '@/assets/icons/system';
+
+interface CheckboxProps {
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+  name?: string;
+  value?: string;
+  className?: string;
+}
+
+const CheckboxContainer = styled.label<{ disabled?: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  user-select: none;
+`;
+
+const CheckboxInput = styled.input`
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+`;
+
+const CheckboxControl = styled.div<{ checked?: boolean; disabled?: boolean }>`
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 2px solid #eaeaec;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  background-color: #ffffff;
+  cursor: pointer;
+
+  ${({ checked, disabled }) => {
+    if (checked && !disabled) {
+      return css`
+        background-color: #2acf6c;
+        border-color: #2acf6c;
+      `;
+    }
+    if (checked && disabled) {
+      return css`
+        background-color: #b6efdb;
+        border-color: #b6efdb;
+      `;
+    }
+    if (!checked && disabled) {
+      return css`
+        background-color: #f7fdfb;
+        border-color: #b6efdb;
+      `;
+    }
+    return '';
+  }}
+
+  svg {
+    color: ${props => (props.disabled ? '#84E4C2' : '#ffffff')};
+    opacity: ${props => (props.checked ? 1 : 0)};
+    transition: opacity 0.2s ease;
+  }
+`;
+
+const CheckboxLabel = styled.span<{ disabled?: boolean }>`
+  color: ${props => (props.disabled ? '#33333E' : '#33333E')};
+  font-size: 13px;
+  cursor: pointer;
+`;
+
+export default function Checkbox({
+  checked = false,
+  disabled = false,
+  onChange,
+  label,
+  name,
+  value,
+  className,
+  ...props
+}: CheckboxProps) {
+  return (
+    <CheckboxContainer disabled={disabled} className={className}>
+      <CheckboxInput
+        type="checkbox"
+        defaultChecked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        name={name}
+        value={value}
+        {...props}
+      />
+      <CheckboxControl checked={checked} disabled={disabled}>
+        <CheckboxIcon />
+      </CheckboxControl>
+      {label && <CheckboxLabel disabled={disabled}>{label}</CheckboxLabel>}
+    </CheckboxContainer>
+  );
+}

services/ahhachul.com/src/assets/icons/system/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.component';