# 2. 이미지 클릭 시 원하는 카테고리 목록을 보여주고 싶어요.

* 상황 설정 : "반찬" 이미지 클릭시 > "반찬" 카테고리에 있는 게시글 목록을 보여주고 싶어요.

<div align="left"><figure><img src="https://3976660509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDgfvhQgmY9NbRK0Sln7j%2Fuploads%2FXzY5KyDfeI0pKvwW1b6n%2FScreenshot%202023-12-07%20at%203.38.06%20PM.png?alt=media&#x26;token=eff6ac4c-d24a-4e3e-977f-712404f182b9" alt="" width="455"><figcaption></figcaption></figure></div>

**구현방법 1. (쉽지만 반복 작업이 필요해요.)**

앱 설정 > "반찬" url 이미지 블록 > 우측 사이드바 액션/체인 클릭 > 다음과 같이 액션을 설정해 주세요.&#x20;

* 액션 타입 : 목록 화면으로 이동
* 메타 코드 : 해당 게시글에 보여질 레시피의 데이터가 저장되어 있는 **단일메타**
* 이동 후 상단 제목 : 자유롭게 작성해 주세요.
* findByMeta : 해당 목록으로 이동 시 recipe 메타의 데이터가 보여질 앱 화면

<div align="left"><figure><img src="https://3976660509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDgfvhQgmY9NbRK0Sln7j%2Fuploads%2FHGv1dVTlArpKfRNLGTlI%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-08-23%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.55.21.png?alt=media&#x26;token=8a486c09-0081-48ba-a1af-dfad6577c4db" alt="" width="322"><figcaption></figcaption></figure></div>

2. recipe 메타에 있는 listMetaMain2 앱 화면 생성 및 **필터 조회 조건** 설정
3. 앱 설정 > listMetaMain2 앱 화면 > 우측 조회 조건
4. 필터 > 조건 항목에는 해당 카테고리 값을 구분 지을 수 있는 **항목 ID**를 선택해 주세요.
5. 필터 > 조건 값에는 해당 카테고리의 값을 넣어주세요.

<div align="left"><figure><img src="https://3976660509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDgfvhQgmY9NbRK0Sln7j%2Fuploads%2FfUj7giMy16Q1PRJ27y6k%2FScreenshot%202023-12-07%20at%203.41.05%20PM.png?alt=media&#x26;token=fbd0559b-0c6e-4581-9c09-ffc67cd6b9ec" alt="" width="304"><figcaption></figcaption></figure></div>

**구현방법 2. (조금 어렵지만, 관리가 편해요.)**

앱 설정 > "반찬" url 이미지 레고 > 우측 사이드바 액션/체인 클릭 > 다음과 같이 액션을 설정해 주세요.&#x20;

1. 액션 1
   * 액션 타입 : injectData
     * 이후 inputData.categorySelect 로 해당 값에 접근하기 위해 사용해요.
   * ID : inputData에 들어갈 id
   * 입력할 값 : inputData에 들어갈 값
2. 액션 2&#x20;
   * 액션 타입 : 목록 화면으로 이동
   * 메타 코드 : "반찬" 카테고리에서 보여줄 레시피의 데이터가 저장되어 있는 **단일메타**
   * 이동 후 상단 제목 : 자유롭게 작성해 주세요.
   * findByMeta : 해당 목록으로 이동시 recipe 메타의 데이터를 보여줄 앱 화면

<div align="left"><figure><img src="https://3976660509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDgfvhQgmY9NbRK0Sln7j%2Fuploads%2FOU3auA8ZJ6dkzferc52F%2FScreenshot%202023-12-07%20at%203.48.09%20PM.png?alt=media&#x26;token=d90061fa-8a3d-4476-abc2-a69cdc99cb59" alt=""><figcaption></figcaption></figure></div>

1. recipe 메타에 있는 listMetaCategorySelect 앱 화면 생성 및 **필터 조회 조건** 설정
   1. 앱 설정 > listMetaCategorySelect 앱 화면 > 우측 사이드바 > 조회 조건
   2. 필터 > 조건 항목에는 해당 카테고리 값을 구분할 수 있는 **항목 ID**를 선택해 주세요.
   3. 필터 > 조건 값에는 preDocument.inputData.categorySelect 를 입력해 주세요.&#x20;
      1. preDocument : 해당 목록 화면으로 돌아오기 전의 복합 메타에 있는 데이터를 의미
      2. inputData : 입력된 데이터를 모아놓는 곳을 의미
      3. categorySelect : injectData에서 설정한 ID를 의미
      4. preDocument.inputData : 이전 데이터에서 있던 inputData 전체를 의미
      5. inputData.categorySelect : injectData에 들어가 있는 categorySelect의 값을 의미
      6. preDocument.inputData.categorySelect : 이전 데이터의 inputData에 들어가 있는 categorySelect의 값을 의미 (즉, **복합 메타에서 injectData로 입력된 "반찬"을 의미**)

         <div align="left"><figure><img src="https://3976660509-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDgfvhQgmY9NbRK0Sln7j%2Fuploads%2F1SHFa0mkbmz7h5vSiHC9%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-08-23%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.50.34.png?alt=media&#x26;token=5bf45dc3-1f44-4f71-977a-8c203022f70c" alt="" width="375"><figcaption></figcaption></figure></div>
2. 각 카테고리를 의미하는 url 이미지에 injectData 액션을 "입력할 값"만 변경하고, 후속 액션으로 똑같이 listMetaCategorySelect 목록 화면으로 이동하는 액션을 추가해 주세요.
3. &#x20;부가적으로, recipe 메타에 앱 화면을 만들지 않아도 돼요.

**구현방법 1,2의 차이점**

* 구현 방법 1
  * 난이도가 쉬워요.
  * 하나의 단일 메타에 같은 앱 화면이지만, **필터 조건을** 다르게 여러 개 생성하여 관리 포인트가 많아요.
* 구현 방법 2
  * 난이도가 어려워요.
  * injectData의 값만 변경해주면, **하나의 앱 화면을 공유**하므로, 관리하기가 용이해요.

2023.08.23 Garlic