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

Leeyoonji23 · 2025-01-13T14:55:47Z

🔥 Related Issues

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

✅ 작업 리스트

댓글 컴포넌트 구현

🔧 작업 내용

import Comment from "@common/component/Comment/Comment";

const Main = () => {
  return <Comment />;
};

export default Main;

📣 리뷰어에게 어떠신가요?

아이콘.. 이... 아무 속성값을 주지 않았는데도 묘하게 작아보이는 느낌이...

📸 스크린샷 / GIF / Link

minjeoong · 2025-01-13T17:47:30Z

public/svgs/plus.svg

p3) svg 네이밍 변경 필요해 보여용 !!!!( ic_000.svg)

완료했습니다!

minjeoong · 2025-01-13T17:49:02Z

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

+    fontWeight: "500",
+    lineHeight: "2.24rem",
+    letterSpacing: "-0.16rem",
+    padding: "0px 11px 0px 40px",


p3) 패딩은 rem 아닌 px 로 한 이유가 있을까요??

엇 그것은 그냥 저의 무지... padding 값과 borderRadius 값이랑 헷갈렸나봐요 ㅠㅠ 수정했습니다!

minjeoong · 2025-01-13T17:49:33Z

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

+  {
+    display: "flex",
+    alignItems: "center",
+    padding: "0px 11px 0px 40px",


p3) 여기도 px 확인 해주세용

minjeoong · 2025-01-13T17:57:06Z

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

p2) 이거 mock comment 목 데이터 임시로 만드신 거 같은데, 파일 위치 여기 위치하는 게 맞을지 얘기해보면 좋을 것 같아요

…JAM-WEB-COCOS into feat/#26/comment

ocahs9

윤지 코멘트 컴포넌트 만드느라 고생했어!!
아직 어푸하기에는 바꿔야하는게 많아서 코멘트만 남겨둘게!
코멘트 전부 확인하고 반영 부탁해~!

ocahs9 · 2025-01-13T18:13:34Z

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

+export const commentContainer = style([
+  {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    width: "33.5rem",
+    padding: "8px 0px",
+    gap: "0.4rem",
+  },
+]);


p3) 혹시 padding : 8px, 0px 은 어디에 있던 값이었나요?

피그마상에서는, padding-top : 16px 로 되어 있던데 확실히 디자인이 달라보이더라구요. 다시 한번 확인 부탁드립니다 !

어엇 Comment layout에 해당 padding 값이 있어서 적용했습니다..!

ocahs9 · 2025-01-13T18:20:51Z

src/common/component/Comment/Comment.tsx

+                </span>
+              </div>
+            </div>
+            <p className={styles.text}>{comment.content}</p>


p3)

이거 보면 content 내용이 길어질경우 피그마와는 다르게 오른쪽으로 조금 삐져나오는데, 이거 조정이 필요할 것 같아요!

저 content를 감싸는 p 태그의 width(혹은 max-width)값을 정해져서 모양이 일관되면 좋을 것 같아요!

수정했습니다~!

ocahs9 · 2025-01-13T18:23:16Z

src/common/component/Comment/Comment.tsx

+        <div key={comment.id} className={styles.commentItem}>
+          <div className={styles.contentContainer}>
+            <div className={styles.header}>
+              <Ellipse57 />


p3) 이거 버튼에도 함수를 연결할 수 있도록 만들어야 할 것 같아요!

ocahs9 · 2025-01-13T18:28:08Z

src/common/component/Comment/Comment.tsx

+const Comment = () => {
+  const { comments } = mockComments;


p1) mock data를 사용해서 코멘트의 예시 모습을 렌더링하는거 너무 좋은데,
나중에는 Comment 컴포넌트에 prop으로 직접 넘겨줘야하니까 prop들, interface를 전부 구성해둡시다!
(지금 형태는 단순하게 퍼블리싱 된 형태입니다!)

수정했습니다 -!

ocahs9 · 2025-01-13T18:30:27Z

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

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


p1) 그리고 mockData 위에는 반드시 주석 남겨줍시다 "api 연결 후 삭제할 예정입니다"
그리고 common/component 에 파일 만들어서 저장해두는 건 폴더 구조를 위반하는거니까 꼭 수정합시다!
(그냥 해당 예시 데이터를 사용하는 곳에서 직접 정의해두거나, constant 폴더에서 파일 만들고 export 하거나)

…JAM-WEB-COCOS into feat/#26/comment

yarimu · 2025-01-13T23:39:49Z

src/common/component/Comment/Comment.tsx

+interface CommentData {
+  id: number;
+  nickname: string;
+  breed: string;
+  petAge: number;
+  createdAt: string;
+  content: string;
+  profileImage: string;
+}
+
+interface CommentProps {
+  comments: CommentData[];
+}
+
+const Comment = ({ comments }: CommentProps) => {


p5) 코리 반영하신거 깔꼼하네요!

yarimu · 2025-01-13T23:48:29Z

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

+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",
+  },
+]);


p3) replyText와 icon이 항상 함께 사용되는데, 스타일을 따로 분리해서 작성하신 이유가 있을실까요?? 다음과 같이 한 번에 사용하지 않고 따로 사용하신 이유가 있는지 궁금합니다!
스타일이 달라지는 것이 아니라면, 한 번에 사용하는 것이 가독성에 더 좋지 않을까 싶어 남겨봅니다..!

export const replyTextWithIcon = style([ font.label01, { display: "flex", alignItems: "center", gap: "0.4rem", color: semanticColor.text.assistiveLight, padding: "0rem 1.1rem 0rem 4rem", }, ]);

오호 처음엔 피그마를 기반으로 replyContainer 하나, 그 안에 답글 이모티콘과 답글쓰기 태그를 따로 보고 구현했습니다!
그런데 예림님 말씀 듣고 보니 저렇게 하는게 훨씬 더 가독성이 좋네요 👏❤️ 관련사항 반영하여 수정했습니다 ! 감사합니다❤️

반영해서 다른 것들도 수정했씁니다 ❤️❤️

yarimu

코리 반영하신 것 잘 확인했습니다! 전반적으로 대부분의 요소에 스타일을 주신 것 같은데, 아래의 코멘트 한 번 확인 부탁드려욤~

…JAM-WEB-COCOS into feat/#26/comment

ocahs9 · 2025-01-14T09:01:23Z

반영한거 전부 확인했어요~

Leeyoonji23 added 5 commits January 13, 2025 03:25

feat: 댓글기능 초기세팅

7fab75c

feat: 아이콘 추가

2199e41

feat: 목데이터 만들기

6762b2a

feat: 댓글 컴포넌트

f0851af

main 돌려놓기!

cb5b42e

Leeyoonji23 requested review from ocahs9, minjeoong and yarimu January 13, 2025 14:56

Leeyoonji23 added ✨ feat 기능 구현 💄 style 기능에 영향을 주지 않는 커밋, 코드 순서, css등의 포맷에 관한 커밋 labels Jan 13, 2025

Leeyoonji23 self-assigned this Jan 13, 2025

minjeoong requested changes Jan 13, 2025

View reviewed changes

Merge branch 'feat/#26/comment' of https://github.com/SOPT-all/35-APP…

d05b6df

…JAM-WEB-COCOS into feat/#26/comment

ocahs9 reviewed Jan 13, 2025

View reviewed changes

Leeyoonji23 added 5 commits January 14, 2025 03:37

fix: px -> rem 수정

d98f5b7

Merge branch 'feat/#26/comment' of https://github.com/SOPT-all/35-APP…

0fbd12d

…JAM-WEB-COCOS into feat/#26/comment

fix: svg 이름 수정

939c726

fix: 내용 넘치지 않게 수정

6c73a94

fix: props, interface 추가

6e78357

Leeyoonji23 requested review from ocahs9 and minjeoong January 13, 2025 22:26

yarimu reviewed Jan 13, 2025

View reviewed changes

yarimu approved these changes Jan 13, 2025

View reviewed changes

Leeyoonji23 added 2 commits January 14, 2025 16:22

fix: 답글 부분 간소화

555cd9d

fix: text 스타일 수정

1784d8d

Leeyoonji23 requested a review from yarimu January 14, 2025 07:58

Leeyoonji23 changed the title ~~[Feat] 댓글 컴포넌트 구현~~ [Feat /#26 ] 댓글 컴포넌트 구현 Jan 14, 2025

Leeyoonji23 changed the title ~~[Feat /#26 ] 댓글 컴포넌트 구현~~ [Feat/#26 ] 댓글 컴포넌트 구현 Jan 14, 2025

Merge branch 'develop' into feat/#26/comment

d42aa85

ocahs9 added 3 commits January 14, 2025 17:53

fix: 충돌 처리

08adcce

Merge branch 'feat/#26/comment' of https://github.com/SOPT-all/35-APP…

b7d954e

…JAM-WEB-COCOS into feat/#26/comment

feat: 필요없는 import 제거

a31aa11

ocahs9 merged commit 3c69f40 into develop Jan 14, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Leeyoonji23 commented Jan 13, 2025 •

edited

Loading

minjeoong Jan 13, 2025

Leeyoonji23 Jan 13, 2025

minjeoong Jan 13, 2025

Leeyoonji23 Jan 13, 2025

minjeoong Jan 13, 2025

minjeoong Jan 13, 2025

ocahs9 left a comment

ocahs9 Jan 13, 2025

Leeyoonji23 Jan 13, 2025

ocahs9 Jan 13, 2025

ocahs9 Jan 13, 2025

Leeyoonji23 Jan 13, 2025

ocahs9 Jan 13, 2025

ocahs9 Jan 13, 2025

Leeyoonji23 Jan 13, 2025

ocahs9 Jan 13, 2025

yarimu Jan 13, 2025

yarimu Jan 13, 2025

Leeyoonji23 Jan 14, 2025

Leeyoonji23 Jan 14, 2025

yarimu left a comment

ocahs9 commented Jan 14, 2025

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

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

Conversation

Leeyoonji23 commented Jan 13, 2025 • edited Loading

🔥 Related Issues

✅ 작업 리스트

🔧 작업 내용

📣 리뷰어에게 어떠신가요?

📸 스크린샷 / GIF / Link

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ocahs9 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yarimu left a comment

Choose a reason for hiding this comment

ocahs9 commented Jan 14, 2025

Leeyoonji23 commented Jan 13, 2025 •

edited

Loading