> For the complete documentation index, see [llms.txt](https://docs.ohmyapp.io/main/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ohmyapp.io/main/guide/faq/action/28.md).

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

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

<div align="left"><figure><img src="/files/soGUJvsYH4p7BhrI191d" alt="" width="455"><figcaption></figcaption></figure></div>

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

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

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

<div align="left"><figure><img src="/files/qcpmr812KRlM9Bb8nCna" alt="" width="322"><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/CgiWCpXW2LCICoPzTTVE" 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="/files/5nZWfg41mAL3ypegGzXv" 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="/files/zl7WHpSRjQ9OVcVqWb6d" alt="" width="375"><figcaption></figcaption></figure></div>
2. 각 카테고리를 의미하는 url 이미지에 injectData 액션을 "입력할 값"만 변경하고, 후속 액션으로 똑같이 listMetaCategorySelect 목록 화면으로 이동하는 액션을 추가해 주세요.
3. &#x20;부가적으로, recipe 메타에 앱 화면을 만들지 않아도 돼요.

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

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

2023.08.23 Garlic