Feat/#50 category #53

NaveOWO · 2022-07-15T14:47:14Z

📌 내용

카테고리뷰 grid 사용해서 구현했습니다.

📌 내가 알게 된 부분

grid 사용법 알게 됐습니닷
줄바꿈 처리하는 pre-wrap 알게 됐습니닷
공통 컴포넌트를 변형해서 쓸 때 타입이나 프롭스를 어떻게 주는지 알게 됐습니닷

📌 질문할 부분

이번엔 없어용!! 해결 완료!!
아 하나 있는데, \n 했을 때 왜 줄바꿈이 안됐을까욤....

📸 스크린샷

henization

지영 넘 야무지게 객체 잘 만드러따 짱 !!!!!!!!!!

henization · 2022-07-16T01:56:49Z

src/components/Category/CategoryContents/index.tsx

+export default function CategoryContents() {
+  type gridValueProps = {
+    id: number;
+    columnStart: number;
+    columnEnd: number;
+    rowStart: number;
+    rowEnd: number;
+  };
+  const gridValue: gridValueProps[] = [
+    {
+      id: 1,
+      columnStart: 1,


type이랑 const export default function 위에다가 적어줘도 될 거 같아용

아하하핫!! 그새 까묵었당 감쟈해욤 헤헤

henization · 2022-07-16T01:57:17Z

src/components/Category/CategoryContents/index.tsx

+      id: 2,
+      columnStart: 1,
+      columnEnd: 2,
+      rowStart: 6,
+      rowEnd: 9,
+    },
+


야무지게 줬네 ~~ 짱짱!!

헿헤ㅔㅅ!!

henization · 2022-07-16T01:57:54Z

src/components/Category/CategoryContents/style.ts

+    grid-gap: 0.8rem;
+  `,
+
+  CategoryItem: styled.article<{ columnStart: number; columnEnd: number; rowStart: number; rowEnd: number }>`


henization · 2022-07-16T01:58:33Z

src/components/common/HeadingTitleContainer/style.ts

@@ -22,6 +22,8 @@ export const St = {
  Content: styled.p`
    margin-top: 0.4rem;

+    white-space: pre-wrap;


뿌듯 ㅎㅎ

쵝오🔥🔥

NYeonK

그리드 장인 윤지영~!~!! 고생해쒀
저걸 어떻게 하나 싶었는데, 성공하다니.. 대단해언냐🤗🤗

NYeonK · 2022-07-16T03:55:31Z

src/asset/image/index.tsx

+export { default as CategoryBanner } from "./categoryBanner.png";
 export { ReactComponent as MoodPiickle1 } from "./MoodPiickle1.svg";


밑에 쓴 거 내가 썼던 건댜ㅎㅎ default랑 ReactComponent의 차이가 뭘까?!? 궁금합니당!!

@NYeonK
너였ㅆ구나?ㅎㅎㅎ

svg 는 컴포넌트처럼 사용하기 위해서 ReactComponent 로 export 시켜주고,
image (png) 는 src 값을 string 으로 받아와서 img 태그의 src 속성에 넣어주거든ㄴ 그래서 그냥 default 로 export 시켜줘

❗ 그래서 말이지, 앞으로 svg 파일은 asset/image 가 아니라 asset/icon 파일에 넣어주세요 !

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아그런거여써??
나는 저거 icon/index.tsx에 있는거 고대로 복붙해왔지ㅎㅎ

넹~~~~~~~~~~~~

NYeonK · 2022-07-16T03:57:13Z

src/components/Category/CategoryContents/style.ts

+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(14, 1fr);


오와 이게 그리드구낭!!
repeat안에 2, 1fr 이게 어떤 의미인지 궁금합니다!!

repeat 하면 컨테이너를 <repeat(몇칸으로 나눌껀지, 칸들의 비율)> 이렇게 설정할 수 있어욧!!! 각각 행이랑 열을 여러개의 단위로 나눠주고 그 안에 아이템들이 얼만큼 차지하는지 계산해서 나타내주면 되더라궁!!

NYeonK · 2022-07-16T03:59:14Z

src/components/Category/CategoryContents/style.ts

+    grid-row-end: ${({ rowEnd }) => rowEnd};
+    background-color: white;
+    border-radius: 1.6rem;
+    border: 0.1rem solid #e0e0e0;


#e0e0e0 이 부분 theme에 gray200으로 있던데, theme에서 가져오는 건 어떨깡?-?

background-color 도 theme.colors.white 로 고쳐주세요-

헤헤.. border 에 색깔도 theme 써야되지.. 까뭇따
background-color도 바꿔놓을께욤 감쟈해욤~~~~~

joohaem

👍👍🔥🎇🎇🎇🍉📷📸📷📸📷📸

joohaem · 2022-07-16T04:02:45Z

src/components/Category/CategoryContents/style.ts

+  CategoryItem: styled.article<{ columnStart: number; columnEnd: number; rowStart: number; rowEnd: number }>`
+    grid-column-start: ${({ columnStart }) => columnStart};
+    grid-column-end: ${({ columnEnd }) => columnEnd};
+    grid-row-start: ${({ rowStart }) => rowStart};
+    grid-row-end: ${({ rowEnd }) => rowEnd};


옹 신기해 대박

오예예~~~~

joohaem · 2022-07-16T04:07:10Z

src/core/category/categoryList.ts

+export const categoryList: categoryListProps[] = [
+  {
+    id: 0,
+    title: "소개팅",
+    content: "커플과의 추억을 공유하세요",
+  },
+  {
+    id: 0,
+    title: "소개팅",


더미 객체이고, 하루만에 수정될 사항이지만, id값은 모두 다르게 선언하는 게 좋다고 생각듭니다~>~

아이디값을 안바꿨넴....!? 앞으로 더 꼼고하게 체크 할께욤!!! 감쟈감쟈

joohaem · 2022-07-16T04:07:37Z

src/components/Category/CategoryContents/style.ts

-  CategoryItem2: styled.article`
-    grid-column-start: 1;
-    grid-column-end: 2;
-    grid-row-start: 6;
-    grid-row-end: 9;
-    background-color: white;
-    border-radius: 1.6rem;
-    border: 0.1rem solid #e0e0e0;
-  `,
-  CategoryItem3: styled.article`
-    grid-column-start: 1;
-    grid-column-end: 2;
-    grid-row-start: 9;
-    grid-row-end: 12;
-    background-color: white;
-    border-radius: 1.6rem;
-    border: 0.1rem solid #e0e0e0;
-  `,
-  CategoryItem4: styled.article`
-    grid-column-start: 1;
-    grid-column-end: 2;
-    grid-row-start: 12;
-    grid-row-end: 15;
-    background-color: white;
-    border-radius: 1.6rem;
-    border: 0.1rem solid #e0e0e0;
-  `,


ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅌㅋ애자일 졍 뀼

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ아뜨 싹들켰네

NaveOWO added 7 commits July 15, 2022 23:41

[ disign ] 배너 업로드

eb5ce8e

[ design ] png파일 업로드

91a2b9d

[ feat ] category뷰 구현

9ce671d

[ feat ] grid 컴포넌트 구현

1e7d647

[ design ] grid 컴포넌트스타일링

ccc2826

[ design ] headigntitle 줄바꿈 스타일링

a6c9b53

[ feat ] categoryList 더밈 객체 생성

8652c19

NaveOWO added Feature 지영 labels Jul 15, 2022

NaveOWO requested review from joohaem, NYeonK and henization July 15, 2022 14:47

NaveOWO self-assigned this Jul 15, 2022

NaveOWO linked an issue Jul 15, 2022 that may be closed by this pull request

[ Category - MoodPiickle ] 카테고리뷰 구현 #50

Closed

2 tasks

[ design ] 사용하지 않는 컴포넌트 삭제

6f7771f

henization reviewed Jul 16, 2022

View reviewed changes

NYeonK reviewed Jul 16, 2022

View reviewed changes

joohaem approved these changes Jul 16, 2022

View reviewed changes

joohaem merged commit a625dcd into develop Jul 16, 2022

joohaem deleted the feat/#50-Category branch July 16, 2022 05:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/#50 category #53

Feat/#50 category #53

NaveOWO commented Jul 15, 2022 •

edited

Loading

henization left a comment

henization Jul 16, 2022

NaveOWO Jul 16, 2022

henization Jul 16, 2022

NaveOWO Jul 16, 2022

henization Jul 16, 2022

NaveOWO Jul 16, 2022

henization Jul 16, 2022

NaveOWO Jul 16, 2022

NYeonK left a comment

NYeonK Jul 16, 2022

joohaem Jul 16, 2022

NYeonK Jul 16, 2022

NaveOWO Jul 16, 2022

NYeonK Jul 16, 2022

NaveOWO Jul 16, 2022

NYeonK Jul 16, 2022

joohaem Jul 16, 2022 •

edited

Loading

NaveOWO Jul 16, 2022

joohaem left a comment

joohaem Jul 16, 2022

NaveOWO Jul 16, 2022

joohaem Jul 16, 2022

NaveOWO Jul 16, 2022

joohaem Jul 16, 2022

NaveOWO Jul 16, 2022

		export { default as CategoryBanner } from "./categoryBanner.png";
		export { ReactComponent as MoodPiickle1 } from "./MoodPiickle1.svg";

		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(14, 1fr);

Feat/#50 category #53

Feat/#50 category #53

Conversation

NaveOWO commented Jul 15, 2022 • edited Loading

📌 내용

📌 내가 알게 된 부분

📌 질문할 부분

📸 스크린샷

henization 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

NYeonK 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

joohaem Jul 16, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joohaem 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

NaveOWO commented Jul 15, 2022 •

edited

Loading

joohaem Jul 16, 2022 •

edited

Loading