6회차 과제 - 류승현 #2

RSH0770 · 2025-05-03T16:36:32Z

신경써서 구현한 부분

Category.jsx

<div className="flex flex-row justify-center items-center">
        {categoryList.map((category) => (
          <button id={category.id} className=" text-gray-800 px-4 py-2 text-xs">
            {category.category}
          </button>
        ))}
      </div>

각 숙소의 테마는 categoryList에 저장하고, map()을 사용해서 배열의 모든 카테고리 항목들이 출력 되도록 만들었습니다.

{/* 더보기 버튼 */}
      <button className="flex justify-center items-center w-8 h-8 mr-4 border border-gray-200 rounded-full text-base hover:bg-gray-300">
        {">"}
      </button>

{/* 필터 버튼 */}
      <button className="flex justify-center items-center w-20 h-10 bg-white border border-gray-200 rounded-xl text-sm hover:bg-gray-300">
        필터
      </button>

더보기 버튼과 필터 버튼에 마우스를 가져다 올리면 발생되는 hover 기능도 추가했습니다.

Cards.jsx

const cardInfo = [
  {
    id: 1,
    picture: thumbnail1,
    prefer: 1,
    location: "Yesan-gun",
    rate: "4.92",
    dist: "94",
    term: "6월 8일~13일",
    review: "한적한 동네라 오히려 편안했고",
    price: "216,824",
  },

  ...
];

card에서 출력 되어야 할 내용들을 cardInfo 배열에 저장, map() 함수를 통해 배열의 모든 항목들이 출력 되도록 구현했습니다.
cardInfo에 저장된 항목들은 다음과 같습니다.
- id = 카드 객체를 식별하는 고유 식별자
- picture = 숙소의 썸네일
- prefer = 게스트 선호 여부로, 1이면 "게스트 선호" 문구 출력, 0이면 출력되지 않음
- location = 숙소의 위치
- rate = 숙소에 대한 평가
- dist = 사용자와 숙소 간 거리
- term = 체크인-체크아웃 기간
- review = 사용자들의 숙소 리뷰
- price = 숙소의 1박 비용

const like = "https://img.icons8.com/?size=100&id=87&format=png&color=ffffff";

<div>
            {card.prefer == 1 && (
              <span className="absolute top-4 left-3 bg-white text-black font-bold text-base px-3 py-1.5 rounded-full">
                게스트 선호
              </span>
            )}
            <button className="absolute top-4 right-8">
              <img src={like} className="w-7 h-7"></img>
            </button>
          </div>

card 속 이미지 위에 출력되는 게스트 선호 여부와 좋아요 아이콘은 icons8.com에서 가져온 아이콘을 활용해 출력해주고, 두 아이콘 모두 position: absolute를 사용해서 숙소 이미지가 들어있는 thumbnail 컴포넌트 위에 렌더링되도록 만들었습니다!

구조 분석 및 완성본

카테고리 및 버튼 구조 분석

구조 분석	완성본

카드 구조 분석

구조 분석	완성본

새롭게 알게 된 내용

질문

Limtaehyeon · 2025-05-07T08:14:39Z

src/components/Cards.jsx

+  {
+    id: 1,
+    picture: thumbnail1,
+    prefer: 1,
+    location: "Yesan-gun",
+    rate: "4.92",
+    dist: "94",
+    term: "6월 8일~13일",
+    review: "한적한 동네라 오히려 편안했고",
+    price: "216,824",
+  },


각각의 특징이 잘 들어난 변수를 사용해서 이해하기 쉬운 것 같습니다!!

Limtaehyeon · 2025-05-07T08:17:35Z

src/components/Cards.jsx

+            {card.prefer == 1 && (
+              <span className="absolute top-4 left-3 bg-white text-black font-bold text-base px-3 py-1.5 rounded-full">
+                게스트 선호
+              </span>
+            )}


== 비교 보다는 === 비교를 사용하는 것이 더 정확한 코드를 작성하는 데 좋을 것 같습니다!

card.prefer 값이 1인지 확인하여 1일 때에만 span 태그를 보여주는 로직은 정말 좋은 접근인 것 같습니다.

알고 계시겠지만 프로그래밍에서 1은 true의 의미도 갖습니다. 이를 활용해서 card.prefer의 값이 1인지를 명시적으로 확인하지 않고 card.prefer 값만으로도 해당 로직을 구현할 수 있습니다.

React에선 0, null, "" 등이 false값을 가지고 1 또는 일반 숫자들은 true값을 가집니다. 선호도가 없다면 0으로 설정해도 되지만 null 값이나 ""(빈문자열)로 설정하는 것도 좋은 방법이에요.

card.prefer 값만으로 확인하는 방법은 아래와 같습니다.

{card.prefer && <span>게스트 선호</span> }

이처럼 card.prefer 값을 활용한다면 더 간결해지고 가독성도 높아집니다. 이게 별 것 아닌 것 같지만 이런 것들이 모여서 유지보수성과 완성도를 높여줍니다. 이후에 과제할 때 참고해서 적용해보시면 좋을 것 같습니다 :)

Limtaehyeon · 2025-05-07T08:20:00Z

src/components/Category.jsx

+      {/* 더보기 버튼 */}
+      <button className="flex justify-center items-center w-8 h-8 mr-4 border border-gray-200 rounded-full text-base hover:bg-gray-300">
+        {">"}
+      </button>
+      {/* 필터 버튼 */}
+      <button className="flex justify-center items-center w-20 h-10 bg-white border border-gray-200 rounded-xl text-sm hover:bg-gray-300">
+        필터
+      </button>


hover을 사용해서 마우스를 올렸을 때 버튼의 색이 회색으로 바뀌게 하는 것은 좋은 효과인 것 같습니다!!

태현님 말씀에 동감합니다. hover 기능을 통해 해당 버튼이 버튼임을 UI적으로 보여주어 좋네요. 신경 쓰신 게 보여서 좋은 것 같습니다.

vni911

코드 이해가 쉽게 잘 짜인 것 같습니다. 고생하셨습니다!

vni911 · 2025-05-07T21:40:08Z

src/components/Cards.jsx

+          <div>
+            게스트 한마디 "<span className="text-black">{card.review}</span>"
+          </div>


card.review &&를 사용하여 평점이 있을 때만 평점 요소를 렌더링 하는 방법도 있으니 참고하면 좋을 것 같습니다!

정운님 의견은 실제 프로젝트에서도 자주 사용되는 방식이라서 다음에 과제할 때 적용해보면 좋을 것 같네요!

해당 코드를 card.review && 을 사용한 코드로 보여드리면 아래와 같습니다.

<div> 게스트 한마디 {card.review && <span className="text-black"> "{card.review}" </span> } </div>

card.review가 존재하면 true, 존재하지 않으면 false를 반환하는 것을 활용한 것입니다.

vni911 · 2025-05-07T21:40:13Z

src/components/Cards.jsx

+          <img
+            className="w-96 h-96 object-cover mb-2 rounded-3xl"
+            src={card.picture}
+          />


이미지의 크기가 고정되어 옆으로 화면을 늘렸을 때 간격이 벌어져 보이는 현상이 발생합니다.
높이는 고정하되 width를 auto로 두는 것은 어떨까요?

eveveev · 2025-05-09T00:11:32Z

꼼꼼하게 잘 구현하신 것 같아요!

jihyun132

전반적으로 많이 고민하시고 코드 구현하신 게 느껴지네요~! 과제하느라 수고하셨습니다!

jihyun132 · 2025-05-10T17:16:57Z

src/components/Cards.jsx

+    const boxes = cardInfo.map((card) => (
+      <div>
+        <div className="relative">


map함수를 사용하실 때는 가장 바깥에서 감싸고 있는 태그(반환되는 태그)에 key또는 id값을 주어야 합니다. 아래처럼 말이죠 👀

const boxes = cardInfo.map((card) => ( <div key={card.id}> {/* 내용 */} </div> ));

map 함수는 cardInfo배열의 각 요소에 접근 후 저희가 작성한 코드대로 반환하여 배열에 저장된다고 생각하시면 됩니다.

key 또는 id 값을 주는 이유는 React에게 지금 반환하는 것이 고유한 항목임을 알려주어 React가 각 요소를 효율적으로 식별하고, 변경이 필요한 요소만 빠르게 업데이트할 수 있도록 해주는 역할이기 때문입니다.

만약 key 또는 id 를 제대로 지정하지 않는다면 React는 어떤 항목이 변경되었는지를 알 수 없게 되어 전체 리스트를 다시 렌더링하게 됩니다. 이처럼 여러 번의 렌더링은 성능 저하의 요인이 될 수 있습니다. 그래서 가능하면 고유한 값인 key나 id를 사용하는 것이 좋습니다.

jihyun132 · 2025-05-10T17:30:05Z

src/components/Cards.jsx

+            {card.prefer == 1 && (
+              <span className="absolute top-4 left-3 bg-white text-black font-bold text-base px-3 py-1.5 rounded-full">
+                게스트 선호
+              </span>
+            )}


card.prefer 값이 1인지 확인하여 1일 때에만 span 태그를 보여주는 로직은 정말 좋은 접근인 것 같습니다.

알고 계시겠지만 프로그래밍에서 1은 true의 의미도 갖습니다. 이를 활용해서 card.prefer의 값이 1인지를 명시적으로 확인하지 않고 card.prefer 값만으로도 해당 로직을 구현할 수 있습니다.

React에선 0, null, "" 등이 false값을 가지고 1 또는 일반 숫자들은 true값을 가집니다. 선호도가 없다면 0으로 설정해도 되지만 null 값이나 ""(빈문자열)로 설정하는 것도 좋은 방법이에요.

card.prefer 값만으로 확인하는 방법은 아래와 같습니다.

{card.prefer && <span>게스트 선호</span> }

이처럼 card.prefer 값을 활용한다면 더 간결해지고 가독성도 높아집니다. 이게 별 것 아닌 것 같지만 이런 것들이 모여서 유지보수성과 완성도를 높여줍니다. 이후에 과제할 때 참고해서 적용해보시면 좋을 것 같습니다 :)

RSH0770 added 3 commits May 3, 2025 21:48

카테고리 및 버튼 구현

2387f5d

card 구현 및 category 코드 수정

cc4bd9b

좋아요 버튼 추가

b07e481

Limtaehyeon reviewed May 7, 2025

View reviewed changes

vni911 reviewed May 7, 2025

View reviewed changes

jihyun132 reviewed May 10, 2025

View reviewed changes

6회차 과제 - 류승현 #2

Are you sure you want to change the base?

6회차 과제 - 류승현 #2

Uh oh!

Conversation

RSH0770 commented May 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

신경써서 구현한 부분

Category.jsx

Cards.jsx

구조 분석 및 완성본

새롭게 알게 된 내용

질문

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vni911 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eveveev commented May 9, 2025

Uh oh!

jihyun132 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

RSH0770 commented May 3, 2025 •

edited

Loading