[Feat/#41] 메인 뷰 구현 #63

Leeyoonji23 · 2025-01-15T21:26:13Z

🔥 Related Issues

close [ Feat ] 메인 뷰 구현 #41

✅ 작업 리스트

🔧 작업 내용

메인 뷰 그렸습니다.

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

인기 게시글 정보는 반려동물 등록 정보가 있을 때/ 없을 때 나눠서 없으면

있으면

되게 구현했어요

증상부분은 피그마상으로는 10갠데 추후에 어디까지 늘어날지 아직 논의중이라고 하셔서 일단 임의로 데이터 넣었습니다.
아이콘 추가되면 밑으로 내려가게 했어요.

Nav 바 svg biome 에러 풀어서 생긴 오류 예림언니랑 같이 잡았어요!

📸 스크린샷 / GIF / Link

bandicam.2025-01-16.06-46-35-339.mp4

수정 후

bandicam.2025-01-18.02-32-06-292.mp4

하지만! 반응형인데 캐러셀 이미지가 늘어나고 줄어드는거.... 해결 못했어요
캐러셀 이미지에 걸린 height 속성 값 풀면 풀 이미지로 잘 보이는데 검색 바가 문제입니다.
크기가 커졌다가 줄어들었다가 하면 검색바가 같이 위로 올라갔다가 내려갔다가 해서... 제가 알고 있는 선에서 해볼 수 있는 건 다 해봤는데 안돼서 일단 다른것부터 수정해서 올렸습니다 ㅜㅜ!
somebody help mee.eee...ee..e

…PJAM-WEB-COCOS into feat/#41/mainview

ocahs9

고생하셨습니다~ 코멘트 한번 확인하고 반영해주세요!
그리고 아래와 같은 에러 나는데, textField가 안 쓰이더라도 아무 동작안하는 함수를 onChange에 주고, 동일한 key값을 안 주도록 수정하는 게 좋을 거 같아요!

ocahs9 · 2025-01-17T11:47:56Z

src/shared/constant/symptomMock.ts

+export type SymptomItem = {
+  id: number;
+  name: string;
+  icon: typeof IcTemporary;
+};
+
+/*아이콘은 바뀔 예정~*/
+export const symptomMock: SymptomItem[] = [
+  { id: 1, name: "눈", icon: IcTemporary },
+  { id: 2, name: "손", icon: IcTemporary },
+  { id: 3, name: "코", icon: IcTemporary },
+  { id: 4, name: "피부", icon: IcTemporary },
+  { id: 5, name: "피부", icon: IcTemporary },
+  { id: 6, name: "김의진", icon: IcTemporary },
+  { id: 8, name: "머리" , icon: IcTemporary },
+  { id: 9, name: "발바닥", icon: IcTemporary },
+  { id: 10, name: "꼬리", icon: IcTemporary },
+  { id: 7, name: "의진 눈", icon: IcTemporary },
+  { id: 7, name: "의진 눈", icon: IcTemporary },
+  { id: 7, name: "의진 눈", icon: IcTemporary },
+];


ocahs9 · 2025-01-17T12:09:33Z

src/page/main/index/hotPost/HotPost.css.ts

+  gap: "1.2rem",
+  borderRadius: "16px",
+  border: `0.1rem solid ${semanticColor.text.normal}`,
+  borderColor: "#f0f0f0",


p3) 혹시 이거, 피그마에서 지정된 색상은 없이 f0f0f0 이었나요?
만약 있었다면 color나 semanticColor로 알맞게 변경부탁드립니다!

헉 그렇네요..! semanticColor 로 수정 했습니다 !

ocahs9 · 2025-01-17T12:10:39Z

src/page/main/index/hotPost/HotPost.tsx

+              <div className={styles.contentId}>{post.id}</div>
+              <div className={styles.contentTitle}>{post.title}</div>
+            </div>
+            {index !== posts.length - 1 && <Divider size="small" />}


p5) 마지막에 divider 안 들어가는 것 세심하게 잘 체크했네요 ~ 굿!

ocahs9 · 2025-01-17T12:11:22Z

src/page/main/index/mainFooter/MainFooter.tsx

+      <p className={styles.footerDetail}>
+        이용약관 및 개인정보 취급방침
+        <p>리뷰운영정책</p>
+      </p>


p3) 이거 기획분들에게 말씀 해두긴 했지만, 나중에 클릭하면 페이지 이동하도록 만들어야해요!
그러니까 태그로 만들어두는 게 좋을 것 같습니다

ocahs9 · 2025-01-17T12:15:40Z

src/page/main/index/hotPost/HotPost.tsx

+    <div className={styles.hotPostContainer}>
+      <p className={styles.p}>인기 게시물을 확인해보세요</p>
+
+      <div className={styles.title}>
+        {petName ? (
+          <>
+            <span className={styles.petName}>{petName}</span>를 위한 인기 게시글을 확인해보세요
+          </>
+        ) : (
+          "반려인들이 주목하는 글 TOP 5"
+        )}
+      </div>


p2) 여기 글씨 약간 오밀조밀 이상하게 모여있는데 한번 확인 부탁드립니다 ~

오밀조밀업

홀리몰리

수정완료

ocahs9 · 2025-01-17T12:17:30Z

src/page/main/index/hotPost/HotPost.tsx

+      <div className={styles.hotPostListContainer}>
+        {posts.map((post, index) => (
+          <div key={post.id}>
+            <div className={styles.postContent}>


p3) 그리고 나중에 postContent누르면 해당 포스트로 넘어가야하니까,
postId를 가지고 넘어가는 로직(navigate) 연결해주세요! url은 우리 노션에 정리해둔거 바탕으로 적어두면 됩니다!

ocahs9 · 2025-01-17T12:20:11Z

src/page/main/index/mainHeader/Carousel/mainCarousel.tsx

+      <div className={styles.carouselStatus}>
+        {currentIndex + 1} / {images.length}
+      </div>
+    </div>


p2) 이거 피그마 디자인에 맞게, 투명도, blur 처리 부탁드립니다~

수정완료~

yarimu

수고하셨습니당 🖤

아래 코멘트만 확인해주셔요!

yarimu · 2025-01-17T12:13:49Z

src/common/component/TextField/styles.css.ts

@@ -19,6 +19,14 @@ export const styles = {
        error: {
          border: `0.1rem solid ${color.red.warning_red200}`,
        },
+        search: {
+          display: "flex",


p4) 위 base에 display: flex" 속성이 있는데 search에도 추가하신 이유가 있나요?

삭제했어요 졸렸나봐요... 꼼꼼 코리 감사합니다 -!

yarimu · 2025-01-17T12:21:39Z

src/page/main/index/Main.tsx

+          state="search"
+          placeholder="심장병, 백내장"
+          onClick={handleSearchClick}
+          value=""


p5) 검색 기능 구현 아직 안하셔서 value="" 인걸까요??

넹 기획분들이 아직 앱잼 단에서는 여기서 검색기능 없다고 하셔서 일단 그렇게 짰습니다 -!

yarimu · 2025-01-17T12:27:14Z

src/page/main/index/hotPost/HotPost.tsx

+    <div className={styles.hotPostContainer}>
+      <p className={styles.p}>인기 게시물을 확인해보세요</p>
+
+      <div className={styles.title}>
+        {petName ? (
+          <>
+            <span className={styles.petName}>{petName}</span>를 위한 인기 게시글을 확인해보세요
+          </>
+        ) : (
+          "반려인들이 주목하는 글 TOP 5"
+        )}
+      </div>


오밀조밀업

yarimu · 2025-01-17T12:30:14Z

src/page/main/index/symptom/Symptom.tsx

+            key={symptom.id}
+            className={styles.symptomItem}
+            onClick={() => handleClick(symptom.name)}
+            aria-label={`증상 부위: ${symptom.name}`}


p5) 웹 접근성 고려까지!? 그저 레전드 개발자

minjeoong

p1) 풀받아서 확인했는데, 이거 요소 클릭하면 게시물 detail 로 안 넘어가서
확인해주시고, 변경 하셔야 할 것 같습니다.

minjeoong · 2025-01-17T12:29:55Z

src/common/component/SubComment/SubCommentList.tsx

+import SubComment, { SubCommentData } from "./SubComment";
+
+interface SubCommentListProps {
+  subComments: SubCommentData[];
+}
+
+const SubCommentList = ({ subComments }: SubCommentListProps) => {
+  return (
+    <div>
+      {subComments.map((subComment) => (
+        <SubComment key={subComment.id} subComment={subComment} />
+      ))}
+    </div>
+  );
+};
+
+export default SubCommentList;


p4) 근데 이거 이미 머지된 건인데 왜 또 올라온 걸까요..

minjeoong · 2025-01-17T12:42:02Z

src/page/main/index/mainHeader/Carousel/mainCarousel.tsx

+  useEffect(() => {
+    if (!emblaApi) return;
+
+    const onSelect = () => {
+      setCurrentIndex(emblaApi.selectedScrollSnap());
+    };
+
+    emblaApi.on("select", onSelect);
+
+    return () => {
+      emblaApi.off("select", onSelect);
+    };
+  }, [emblaApi]);


p2) emblaApi 는 useEffect 안에서 꼭 구현되어야 하는 건가요??
수정 필요해보입니다 !

minjeoong · 2025-01-17T12:56:34Z

src/page/onboarding/index/common/title/Title.css.ts

+    color: color.gray.gray900,
+    maxWidth: "32rem",
+    maxHeight: "5.8rem",
+    wordBreak: "keep-all",


p5) 섬세한 스타일,, 굿굿

yarimu

지금 conflict 나는데 textfied의 경우는 제꺼 머지되서 나는 것 같아요 최신 상태로 머지 부탁드림다!

…PJAM-WEB-COCOS into feat/#41/mainview

ocahs9

반응형인데 캐러셀 이미지가 늘어나고 줄어드는거 아직 해결 못한건 나중에 다같이 qa할 때 잡아봅시다~
머지해도 됩니다!

Leeyoonji23 added 19 commits January 14, 2025 19:03

feat: 헤더 (캐러셀 제외) 구현

732b37c

feat: 헤더 구현

8c2949c

feat: 스타일 수정

5fc82ed

feat: footer 구현

3c2e9df

feat: 인기순위 중간저장

d39d94b

Merge branch 'develop' into feat/#41/mainview

3cf1b5b

fix: mainHeader 스타일 수정

a28f35e

feat: 인기 게시글 구현

4512d40

feat: footer 색상입히기

5af16ee

feat: 인기 게시글 스타일 수정

f589ef0

feat: 증상 부분 추가

1bfade7

feat: 증상 퍼블리싱

33f8e0e

feat:증상 스타일 수정

d06d60d

feat: 티끌만한 수정

264fd23

feat: 버튼 기능 추가 (추후 API 붙일작업 해야됨)

ca55146

Merge branch 'develop' into feat/#41/mainview

0a4e200

feat: main 뷰 width 값 설정

e746446

feat: 검색 바 퍼블리싱 완료

1221977

feat: 메인뷰 붙이기

3fc8bb1

github-actions bot requested review from minjeoong, ocahs9 and yarimu January 15, 2025 21:26

github-actions bot assigned Leeyoonji23 Jan 15, 2025

Leeyoonji23 added 2 commits January 16, 2025 06:28

fix: rem 값 수정

a8e26e8

fix: Nav 스타일 수정

5bbe011

Leeyoonji23 changed the title ~~[Feat/#41]~~ [Feat/#41] 메인 뷰 구현 Jan 15, 2025

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

ocahs9 added 2 commits January 17, 2025 20:50

Merge branch 'feat/#41/mainview' of https://github.com/SOPT-all/35-AP…

dd3d8e7

…PJAM-WEB-COCOS into feat/#41/mainview

chore: 이상한 useEffect 제거

6158e35

Leeyoonji23 and others added 2 commits January 17, 2025 21:08

fix: 메인헤더 텍스트 삭제

ba27575

Merge branch 'feat/#41/mainview' of https://github.com/SOPT-all/35-AP…

b5c71df

…PJAM-WEB-COCOS into feat/#41/mainview

ocahs9 approved these changes Jan 17, 2025

View reviewed changes

chore: 빌드에러 해결

4ead2d1

yarimu approved these changes Jan 17, 2025

View reviewed changes

ocahs9 added 2 commits January 17, 2025 21:44

chore: 공백 제거

7a15e84

chore: 공백 제거2

51cc0c3

minjeoong reviewed Jan 17, 2025

View reviewed changes

minjeoong approved these changes Jan 17, 2025

View reviewed changes

Leeyoonji23 added 6 commits January 17, 2025 23:28

캐러셀용 이미지 저장

f02da14

fix: 캐러셀 이미지 수정, 자동넘김, 페이지네이션 투명도 설정

01eb32a

fix: 반응형으로 수정

5b0a7ef

fix: 푸터 링크 걸기

a0d7a11

fix: 인기 게시글 navigate 구현

1aec784

fix: 에러잡기

8ceea66

yarimu approved these changes Jan 17, 2025

View reviewed changes

Leeyoonji23 and others added 8 commits January 18, 2025 09:01

Merge branch 'develop' into feat/#41/mainview

9a7b5f9

충돌해결

0ad0990

TextField 충돌해결

6673a47

Merge branch 'develop' into feat/#41/mainview

8450df4

Merge remote-tracking branch 'origin/develop' into feat/#41/mainview

efcde5f

fix: 빌드 에러 해결

09f3287

Merge branch 'feat/#41/mainview' of https://github.com/SOPT-all/35-AP…

7e5ec4f

…PJAM-WEB-COCOS into feat/#41/mainview

feat: 타입변환

c13491c

ocahs9 approved these changes Jan 18, 2025

View reviewed changes

Leeyoonji23 merged commit 9c20596 into develop Jan 18, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat/#41] 메인 뷰 구현 #63

[Feat/#41] 메인 뷰 구현 #63

Leeyoonji23 commented Jan 15, 2025 •

edited

Loading

ocahs9 left a comment

ocahs9 Jan 17, 2025

ocahs9 Jan 17, 2025

Leeyoonji23 Jan 17, 2025

ocahs9 Jan 17, 2025

ocahs9 Jan 17, 2025

ocahs9 Jan 17, 2025

yarimu Jan 17, 2025

Leeyoonji23 Jan 17, 2025

Leeyoonji23 Jan 17, 2025

ocahs9 Jan 17, 2025

ocahs9 Jan 17, 2025

Leeyoonji23 Jan 17, 2025

yarimu left a comment •

edited

Loading

yarimu Jan 17, 2025

Leeyoonji23 Jan 17, 2025

yarimu Jan 17, 2025

Leeyoonji23 Jan 17, 2025

yarimu Jan 17, 2025

yarimu Jan 17, 2025

minjeoong left a comment •

edited

Loading

minjeoong Jan 17, 2025

minjeoong Jan 17, 2025

minjeoong Jan 17, 2025

yarimu left a comment

ocahs9 left a comment •

edited

Loading

[Feat/#41] 메인 뷰 구현 #63

[Feat/#41] 메인 뷰 구현 #63

Conversation

Leeyoonji23 commented Jan 15, 2025 • edited Loading

🔥 Related Issues

✅ 작업 리스트

🔧 작업 내용

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

📸 스크린샷 / GIF / Link

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

yarimu left a comment • edited Loading

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

minjeoong left a comment • edited Loading

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 left a comment • edited Loading

Choose a reason for hiding this comment

Leeyoonji23 commented Jan 15, 2025 •

edited

Loading

yarimu left a comment •

edited

Loading

minjeoong left a comment •

edited

Loading

ocahs9 left a comment •

edited

Loading