[Feat/#26 ] 댓글 컴포넌트 구현

.github/ISSUE_TEMPLATE/feature-issue.yml

@@ -1,5 +1,6 @@
 name: "✨ Feat"
 description: "새로운 기능 추가"
+title: "[ Feat ] "
 labels: ["feature"]
 body:
   - type: textarea
@@ -19,4 +20,4 @@ body:
   - type: textarea
     attributes:
       label: 🙋🏻 참고 자료
-      description: 참고 자료가 있다면 작성해 주세요.
+      description: 참고 자료가 있다면 작성해 주세요.

biome.json

@@ -18,7 +18,7 @@
     "lineWidth": 120,
     "attributePosition": "auto"
   },
-  "organizeImports": { "enabled": true },
+  "organizeImports": { "enabled": false },
   "linter": {
     "enabled": true,
     "rules": {
@@ -35,6 +35,11 @@
           "level": "warn",
           "fix": "safe"
         }
+      },
+      "style": {
+        "useImportType": {
+          "level": "off"
+        }
       }
     }
   }

package.json

@@ -17,8 +17,11 @@
   "dependencies": {
     "@tanstack/react-query": "^5.62.11",
     "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/dynamic": "^2.1.2",
+    "@vanilla-extract/recipes": "^0.5.5",
     "axios": "^1.7.9",
     "openapi-typescript": "^7.5.2",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.1",

src/asset/svg/IcEllipse57.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcEllipse57 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={32}
+    height={32}
+    fill="none"
+    {...props}
+  >
+    <circle cx={16} cy={16} r={16} fill="#E4E4E4" />
+  </svg>
+);
+export default SvgIcEllipse57;

src/asset/svg/IcEllipses.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcEllipses = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={22}
+    height={22}
+    fill="none"
+    {...props}
+  >
+    <g
+      stroke="#222"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+    >
+      <path d="M11 11.875a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75M11 5.75A.875.875 0 1 0 11 4a.875.875 0 0 0 0 1.75M11 18a.875.875 0 1 0 0-1.75.875.875 0 0 0 0 1.75" />
+    </g>
+  </svg>
+);
+export default SvgIcEllipses;

src/asset/svg/IcMessage.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcMessage = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={18}
+    height={18}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#BEBEBE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M5.625 9h.008M9 9h.008m3.367 0h.008M9 15.75a6.75 6.75 0 1 0-6.256-4.212c.06.15.09.225.104.286a.7.7 0 0 1 .019.164c0 .062-.012.13-.034.265l-.445 2.668c-.046.28-.07.42-.026.52a.38.38 0 0 0 .196.197c.101.044.241.02.52-.026l2.669-.445c.135-.022.203-.034.265-.034.06 0 .105.005.164.019s.136.043.286.105c.783.318 1.64.493 2.538.493M6 9a.375.375 0 1 1-.75 0A.375.375 0 0 1 6 9m3.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0m3.375 0A.375.375 0 1 1 12 9a.375.375 0 0 1 .75 0"
+    />
+  </svg>
+);
+export default SvgIcMessage;

src/asset/svg/index.ts

@@ -1,3 +1,6 @@
+export { default as IcEllipse57 } from "./IcEllipse57";
+export { default as IcEllipses } from "./IcEllipses";
+export { default as IcMessage } from "./IcMessage";
 export { default as Plus } from "./Plus";
 export { default as React } from "./React";
 export { default as Vite } from "./Vite";

src/common/component/Comment/Comment.css.ts

@@ -0,0 +1,113 @@
+import { style } from "@vanilla-extract/css";
+import { font, semanticColor } from "@style/styles.css";
+
+export const commentContainer = style([
+  {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    width: "33.5rem",
+    padding: "0.8rem 0rem",
+    gap: "0.4rem",
+  },
+]);
+
+export const pStyle = style({
+  padding: "0rem, 1.1rem, 0rem, 4rem",
+});
+
+export const containerOptionsIcon = style([
+  {
+    position: "absolute",
+    left: "31.1rem",
+    top: "0.8rem",
+  },
+]);
+
+export const commentItem = style([
+  {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "0.4rem",
+  },
+]);
+
+export const contentContainer = style([
+  {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.4rem",
+  },
+]);
+
+export const header = style([
+  {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.8rem",
+  },
+]);
+
+export const headerInfo = style([
+  {
+    display: "flex",
+    flexDirection: "column",
+  },
+]);
+
+export const nickname = style([
+  font.label01,
+  {
+    fontWeight: 600,
+    color: semanticColor.text.assistive,
+    letterSpacing: "-0.024rem",
+  },
+]);
+
+export const meta = style([
+  font.label01,
+  {
+    color: semanticColor.text.assistive,
+    fontWeight: 500,
+    letterSpacing: "-0.024rem",
+  },
+]);
+
+export const text = style([
+  font.heading03,
+  {
+    color: semanticColor.text.normal,
+    fontWeight: "500",
+    lineHeight: "2.24rem",
+    letterSpacing: "-0.16rem",
+    padding: "0rem 1.1rem 0rem 4rem",
+  },
+]);
+
+export const replyContainer = style([
+  {
+    display: "flex",
+    alignItems: "center",
+    padding: "0rem 1.1rem 0rem 4rem",
+  },
+]);
+
+export const replyText = style([
+  font.label01,
+  {
+    color: semanticColor.text.assistiveLight,
+  },
+]);
+
+export const icon = style([
+  {
+    gap: "0.4rem",
+  },
+]);
+
+export const profileImage = style({
+  width: "3.2rem",
+  height: "3.2rem",
+  borderRadius: "50%",
+});