# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ohmyapp.io/main/guide/faq/action/28.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.