[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,6 +17,8 @@
   "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",
     "react": "^18.3.1",

src/asset/svg/Ellipse57.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from "react";
+const SvgEllipse57 = (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 SvgEllipse57;

src/asset/svg/Ellipses.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+const SvgEllipses = (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 SvgEllipses;

src/asset/svg/Message.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+const SvgMessage = (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 SvgMessage;

src/asset/svg/index.ts

@@ -1,3 +1,6 @@
+export { default as Ellipse57 } from "./Ellipse57";
+export { default as Ellipses } from "./Ellipses";
+export { default as Message } from "./Message";
 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,103 @@
+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: "8px 0px",
+    gap: "0.4rem",
+  },
+]);
+
+export const containerOptionsIcon = style([
+  {
+    position: "absolute",
+    right: "0.8rem",
+    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: "0px 11px 0px 40px",
+  },
+]);
+
+export const replyContainer = style([
+  {
+    display: "flex",
+    alignItems: "center",
+    padding: "0px 11px 0px 40px",
+  },
+]);
+
+export const replyText = style([
+  font.label01,
+  {
+    color: semanticColor.text.assistiveLight,
+  },
+]);
+
+export const icon = style([
+  {
+    gap: "0.4rem",
+  },
+]);

src/common/component/Comment/Comment.tsx

@@ -0,0 +1,36 @@
+import * as styles from "./Comment.css";
+import { Ellipse57, Message, Ellipses } from "@asset/svg";
+import mockComments from "@common/component/Comment/mock/mockComments";
+
+const Comment = () => {
+  const { comments } = mockComments;
+
+  return (
+    <div className={styles.commentContainer}>
+      {comments.map((comment) => (
+        <div key={comment.id} className={styles.commentItem}>
+          <div className={styles.contentContainer}>
+            <div className={styles.header}>
+              <Ellipse57 />
+              <div className={styles.headerInfo}>
+                <Ellipses className={styles.containerOptionsIcon} />
+                <span className={styles.nickname}>{comment.nickname}</span>
+                <span className={styles.meta}>
+                  {comment.breed}·{comment.petAge}살 · {comment.createdAt}
+                </span>
+              </div>
+            </div>
+            <p className={styles.text}>{comment.content}</p>
+
+            <div className={styles.replyContainer}>
+              <Message className={styles.icon} />
+              <p className={styles.replyText}>답글쓰기</p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Comment;

src/common/component/Comment/mock/mockComments.ts

@@ -0,0 +1,14 @@
+const mockComments = {
+  comments: [
+    {
+      id: 1,
+      nickname: "리트리버사랑해",
+      breed: "골든리트리버",
+      petAge: 12,
+      content: "호흡기 문제일 수 있는데 다른 증상은 없나요?",
+      createdAt: "1시간전",
+    },
+  ],
+};
+
+export default mockComments;

src/common/component/Divider/Divider.css.ts

@@ -0,0 +1,24 @@
+import { semanticColor } from "@style/styles.css";
+import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
+
+export const divider = recipe({
+  base: {
+    width: "100%",
+    backgroundColor: semanticColor.line.normal,
+  },
+
+  variants: {
+    size: {
+      large: { height: "1.6rem" },
+      small: { height: "0.1rem" },
+    },
+  },
+});
+
+export type DividerVariants = RecipeVariants<typeof divider>;
+//위는 아래와 동일한 타입 생성
+/*
+export type DividerVariants = {
+    size?: 'large' | 'small' 
+}
+*/

src/common/component/Divider/Divider.tsx

@@ -0,0 +1,9 @@
+import { divider, DividerVariants } from "./Divider.css";
+
+type DividerPropTypes = Exclude<DividerVariants, undefined>;
+
+const Divider = ({ size = "large" }: DividerPropTypes) => {
+  return <div className={divider({ size: size })} />;
+};
+
+export default Divider;

src/common/component/Spacing/Spacing.css.ts

@@ -0,0 +1,8 @@
+import { createVar, style } from "@vanilla-extract/css";
+
+//동적 스타일링 (style 관련된 코드는 반드시 .css.ts에 작성하는게 rule
+export const marginBottomVar = createVar();
+export const container = style({
+  marginBottom: marginBottomVar,
+  backgroundColor: "black",
+});