# 7. FeedPage

![FeedPage](https://github.com/klaytn/klaytn-docs-ko/blob/main/docs/bapp/tutorials/klaystagram/images/klaystagram-feedpage.png)

FeedPage는 `Klaystagram` 컨트랙트와 상호작용하는 3개의 주요 컴포넌트로 이루어져 있습니다.

[7-2. `UploadPhoto` component](/content/dapp/tutorials/klaystagram/7.-feedpage/7-2.-uploadphoto-component.md)\
[7-3. `Feed` component](/content/dapp/tutorials/klaystagram/7.-feedpage/7-3.-feed-component.md)\
[7-4. `TransferOwnership` 컴포넌트](/content/dapp/tutorials/klaystagram/7.-feedpage/7-4.-transferownership-component.md)

```javascript
// src/pages/FeedPage.js

const FeedPage = () => (
  <main className="FeedPage">
    <UploadButton />               // 7-2. UploadPhoto 컴포넌트
    <Feed />                       // 7-3. Feed 컴포넌트
  </main>
)
```

```javascript
// src/components/Feed.js

<div className="Feed">
  {feed.length !== 0
    ? feed.map((photo) => {
      // ...
      return (
        <div className="FeedPhoto" key={id}>

            // ...
            {
              userAddress.toUpperCase() === currentOwner.toUpperCase() && (
                <TransferOwnershipButton   // 7-4. TransferOwnership 컴포넌트
                  className="FeedPhoto__transferOwnership"
                  id={id}
                  issueDate={issueDate}
                  currentOwner={currentOwner}
                />
              )
            }
            // ...
        </div>
      )
    })
    : <span className="Feed__empty">No Photo :D</span>
  }
</div>
)
```

아래 세 단계에 걸쳐 컴포넌트가 컨트랙트와 상호작용하도록 합니다.

**첫 번째**, 프론트엔드와 컨트랙트를 연결하는 `KlaystagramContract` 인스턴스를 생성합니다. **Second**, using `KlaystagramContract` instance, make API functions that interact with contract in `redux/actions`\
**Third**, call functions in each component

이제 구현해보죠!


---

# 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://archive-ko.docs.klaytn.foundation/content/dapp/tutorials/klaystagram/7.-feedpage.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.