{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Index","type":"text","marks":[{"type":"strong"}]}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"9ed395a3-5dcf-4240-a900-8b2aa4ba6319"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}}}},{"type":"paragraph","content":[{"text":"Pop 디자인 customize 관련 자세한 사항은 ","type":"text"},{"text":"Pop 디자인 가이드 문서","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://www.figma.com/file/0i0lNvrDx9oVJCkhnfJoVs/%F0%9F%93%8B-POP-UI-integration-guide-official"}}]},{"text":"에서 확인 가능합니다.","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Ad] Feed 광고 리스트 아이템 영역 Customization","type":"text"}]},{"type":"paragraph","content":[{"text":"Feed의 광고 리스트 아이템 뷰를 커스터마이징하고 광고 이벤트에 대한 콜백을 등록할 수 있습니다.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"AdsAdapter","type":"text","marks":[{"type":"code"}]},{"text":" 를 상속받는 class 를 구현합니다.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"onCreateViewHolder","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"onBindViewHolder","type":"text","marks":[{"type":"code"}]},{"text":" 를 구현해 Feed 리스트에 보여줄 ","type":"text"},{"text":"itemView","type":"text","marks":[{"type":"code"}]},{"text":" 의 레이아웃 및 바인딩 로직을 커스터마이징합니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"CtaView의 getCtaTextView() 및 getRewardImageView() 함수를 호출하여 CtaView에 보여지는 텍스트 및 리워드 이미지에 대한 customization을 할 수 있습니다. (좀 더 유연한 customization을 위해 View를 새로 만들고 싶은 경우에는 아래 CtaView Customization 참조)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"(optional) ","type":"text"},{"text":"onImpressed","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"onClicked","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"onRewardRequested","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"onRewarded","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"onParticipated","type":"text","marks":[{"type":"code"}]},{"text":"를 오버라이드하여 광고의 임프레션, 클릭, 리워드 요청, 리워드 지급 결과, 참여완료에 대한 이벤트 콜백을 받을 수 있습니다 (콜백의 정의 및 동작은 ","type":"text"},{"text":"문서 참조","type":"text","marks":[{"type":"link","attrs":{"href":"https://docs.google.com/document/d/1hDABpDfJ9bTNfb2Mq5SnPc1Knxz2SiQYH8sZCr2q1VI/edit#bookmark=id.9uh8y7qm67i6"}}]},{"text":")","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class CustomAdsAdapter extends AdsAdapter {\n\n @Override\n public NativeAdViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {\n final LayoutInflater inflater = LayoutInflater.from(parent.getContext());\n final NativeAdView feedNativeAdView = (NativeAdView) inflater.inflate(R.layout.bz_view_feed_ad, parent, false);\n return new NativeAdViewHolder(feedNativeAdView);\n }\n\n @Override\n public void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) {\n final NativeAdView view = (NativeAdView) holder.itemView;\n\n final Ad ad = nativeAd.getAd();\n final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();\n\n final MediaView mediaView = view.findViewById(R.id.mediaView);\n final LinearLayout titleLayout = view.findViewById(R.id.titleLayout);\n final TextView titleView = view.findViewById(R.id.textTitle);\n final ImageView iconView = view.findViewById(R.id.imageIcon);\n final TextView descriptionView = view.findViewById(R.id.textDescription);\n final CtaView ctaView = view.findViewById(R.id.ctaView);\n ctaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // (선택) 변경하려는 \"색상코드\"\n final CtaPresenter ctaPresenter = new CtaPresenter(ctaView); // CtaView should not be null\n ctaPresenter.bind(nativeAd);\n\n if (mediaView != null) {\n mediaView.setCreative(ad.getCreative());\n mediaView.setVideoEventListener(new VideoEventListener() \n // Override and implement methods\n });\n }\n if (titleView != null) {\n titleView.setText(ad.getTitle());\n }\n\n if (iconView != null) {\n ImageLoader.getInstance().displayImage(ad.getIconUrl(), iconView);\n }\n if (descriptionView != null) {\n descriptionView.setText(ad.getDescription());\n }\n\n final Collection clickableViews = new ArrayList<>();\n clickableViews.add(ctaView);\n clickableViews.add(mediaView);\n clickableViews.add(titleLayout);\n clickableViews.add(descriptionView);\n\n view.setMediaView(mediaView);\n view.setClickableViews(clickableViews);\n view.setNativeAd(nativeAd);\n view.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {\n @Override\n public void onImpressed(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {\n\n }\n\n @Override\n public void onClicked(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {\n\n }\n\n @Override\n public void onRewardRequested(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {\n\n }\n\n @Override\n public void onRewarded(@NonNull NativeAdView view, @NonNull NativeAd nativeAd, @Nullable RewardResult rewardResult) {\n\n }\n\n @Override\n public void onParticipated(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {\n ctaPresenter.bind(nativeAd);\n }\n });\n }\n}","type":"text"}]},{"type":"paragraph"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FeedConfig","type":"text","marks":[{"type":"code"}]},{"text":" 빌드 시점에 해당 ","type":"text"},{"text":"AdsAdapter","type":"text","marks":[{"type":"code"}]},{"text":" class 를 지정합니다.","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n\t...\n .adsAdapterClass(CustomAdsAdapter.class)\n .build();","type":"text"}]}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Ad] CTA Color 변경","type":"text"}]},{"type":"paragraph","content":[{"text":"여기에서는 CTA color 변경을 설명합니다. Color 변경 외에 CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우, 아래의 ‘CtaView (버튼) Customization’ 항목을 참조해주세요.","type":"text"}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[167.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"wrap-left","width":50.0},"content":[{"type":"media","attrs":{"width":965,"id":"5576fd49-d054-4b80-90b0-1eab89c6ad5e","collection":"contentId-721027924","type":"file","height":314}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[593.0]},"content":[{"type":"paragraph","content":[{"text":"기본 Color","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[167.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"wrap-left","width":50.0},"content":[{"type":"media","attrs":{"width":965,"id":"dbdf35e5-51dd-4d79-a333-b6586675cc1c","collection":"contentId-721027924","type":"file","height":302}}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[593.0]},"content":[{"type":"paragraph","content":[{"text":"변경 된 Color","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"project 의 colors.xml 파일에 아래의 color resource 값을 추가 하면 CTA color 가 변경됩니다. (Benefit 의 모든 CTA Color 가 변경됩니다.)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"benefit_native_bg_cta_button_normal","type":"text","marks":[{"type":"code"}]},{"text":" CTA 가 노출 됐을 때","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"benefit_native_bg_cta_button_pressed","type":"text","marks":[{"type":"code"}]},{"text":" CTA 가 눌렸을 때","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"benefit_native_bg_cta_button_disabled","type":"text","marks":[{"type":"code"}]},{"text":" CTA 가 비활성화 상태 일 때","type":"text"}]}]}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n ...\n #1290FF\n #0072E1\n #DDDEDF\n","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Ad] CtaView (버튼) Customization","type":"text"}]},{"type":"paragraph","content":[{"text":"CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우 다음과 같이 설정을 진행하면 됩니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"@Override\npublic void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) {\n final NativeAdView view = (NativeAdView) holder.itemView;\n\n final Ad ad = nativeAd.getAd();\n final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();\n \n ...\n // View를 상속받는 CustomCtaView class를 생성하여 원하는 모양의 CtaView를 사용 할 수 있습니다.\n final CustomCtaView customizedCtaView = view.findViewById(R.id.customCtaView);\n\n // 아래 정보를 이용하여 cta view를 업데이트\n final String callToAction = nativeAd.getAd().getCallToAction();\n final int reward = nativeAd.getAd().getReward(); // 주의사항 참조\n final boolean participated = nativeAd.isParticipated();\n \n // 다음과 같은 function을 CustomCtaView class에 생성하여 텍스트 및 아이콘을 업데이트 할 수 있습니다.\n customizedCtaView.setCtaText(callToAction);\n customizedCtaView.setRewardText(reward);\n customizedCtaView.setRewardIcon(R.drawable.your_reward_icon);\n customizedCtaView.setParticiapted(participated); // 참여 완료된 광고에 대해서 UI를 처리하는 부분\n customizedCtaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // 변경하려는 \"색상코드\"\n\n ...\n\n final List clickableViews = new ArrayList<>();\n clickableViews.add(customizedCtaView);\n ...\n\n nativeAdView.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {\n ...\n\n @Override\n public void onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {\n // 매체사 기획에 따라 UI 처리\n // Customize 된 CtaView를 participated 상태에 맞게 업데이트\n final boolean participated = nativeAd.isParticipated();\n customizedCtaView.setParticipated(participated);\n }\n });\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"※ 주의사항","type":"text"}]},{"type":"paragraph","content":[{"text":"유저가 적립을 받은지 시간이 얼마 지나지 않아서 리워드가 부여되지 않거나 또는 원래 광고 자체가 리워드를 가지고 있지 않은 경우가 있을 수 있습니다. 따라서 광고 레이아웃을 구성할 때 Ad Properties를 Assign 하는 과정에서 rewardImage와 rewardText에 대해서 reward > 0 인지 체크해서 리워드를 보여줄지 말지 결정하는 로직이 필요합니다 (아래의 샘플 코드 참조).","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"if (reward > 0) {\n customizedCtaVIew.showRewardImage(CtaView.ImageType.Default);\n customizedCtaVIew.setRewardText(String.format(Locale.US, \"+%d\", reward));\n} else {\n customizedCtaVIew.showRewardImage(null);\n customizedCtaVIew.setRewardText(null);\n}","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Preview Message] CustomPreviewMessage","type":"text"}]},{"type":"paragraph","content":[{"text":"CustomPreviewMessage 는 6시간 간격으로 서버에 설정된 CustomPreviewConfig 를 받아와서 frequency capping 후 PreviewMessage 를 보여주는 기능입니다. 따라서 서버에 CustomPreviewConfig 설정하는 작업이 선행되어야합니다. (frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.)","type":"text"}]},{"type":"paragraph","content":[{"text":"서버에서 클라이언트로 전달되는 CustomPreviewMessageConfig 는 다음과 같은 정보를 가지고 있습니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"{\n \"id\": 5,\n \"unit_id\": 1234567890,\n \"message\": \"오늘도 아케이드 게임하고 최대 90P 팡팡!\",\n \"landing_url\": \"deeplink://landing?activity=arcade\",\n \"start_date\": \"2020-03-01T00:00:00Z\",\n \"end_date\": \"2020-03-31T23:59:59Z\",\n \"start_hour_minute\": \"21:00\",\n \"end_hour_minute\": \"23:00\",\n \"dipu\": 2,\n \"tipu\": 60,\n \"dcpu\": 1,\n \"tcpu\": 30,\n \"icon\": \"http://imagelocation/arcade_icon.png\"\n}","type":"text"}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"이름","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"내용","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"id","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"configId (messageId), 서버에서 자동 할당합니다","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"unit_id","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"pop unitId","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"landing_url","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"랜딩 url or deeplink","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"start_date","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"config 시작 일 (UTC, 시간은 무시됩니다)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"end_date","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"config 종료 일 (UTC, 시간은 무시됩니다)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"start_hour_minute","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"config 시작 시간 (분은 무시됩니다)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"end_hour_minute","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"config 종료 시간 (분은 무시됩니다)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"dipu","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"Frequency capping: daily impression per user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"tipu","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"Frequency capping: total impression per user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"dcpu","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"Frequency capping: daily click per user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"tcpu","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"Frequency capping: total click per user","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"icon","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[550.0]},"content":[{"type":"paragraph","content":[{"text":"icon url","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"CustomPreviewMessage 는 두가지 영역에 표시됩니다.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Pop 의 CustomPreviewMessage 영역 (그림1)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"설정된 기간, 시간 내에 dipu, tipu, dcpu, tcpu 에 따라 frequency capping 됩니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PopFeedHeader 의 CustomPreviewMessage 영역 (그림2)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"frequency capping 되지 않고 설정된 기간, 시간내 라면 보여집니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FeedConfig 를 customize 가능합니다","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FeedConfig 를 사용하면서 header 를 설정하지 않으면 CustomPreviewMessage 를 안보이게 설정 가능합니다","type":"text"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"그림1. Pop 에 CustomPreviewMessage 가 표시된 모습","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":290,"id":"f48e3190-6838-46b5-91b4-feb7a3ee020b","collection":"contentId-721027924","type":"file","height":96}}]},{"type":"paragraph","content":[{"text":"그림2. PopFeedHeader 에 CustomPreviewMessage 가 표시된 모습","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":374,"id":"a27900ed-a237-426e-b47d-e85ccd17498c","collection":"contentId-721027924","type":"file","height":304}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Step 1. (Optional) PopFeedHeader Customize","type":"text","marks":[{"type":"strong"}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"DefaultPopHeaderViewAdapter","type":"text","marks":[{"type":"code"}]},{"text":" 를 상속받아 ","type":"text"},{"text":"CustomPopHeaderViewAdapter","type":"text","marks":[{"type":"code"}]},{"text":" 를 만들고","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"getCustomPreviewMessageLayout","type":"text","marks":[{"type":"code"}]},{"text":" 를 오버라이드 합니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"getCustomPreviewMessageLayout","type":"text","marks":[{"type":"code"}]},{"text":" 의 파라미터인 ","type":"text"},{"text":"CustomPreviewMessage","type":"text","marks":[{"type":"code"}]},{"text":" 에 message, landingUrl, iconUrl 정보가 담겨있습니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"line 9~17","type":"text","marks":[{"type":"code"}]},{"text":" 3번에서 받아온 정보를 토대로 직접 layout 을 구성하고, clickEvent 처리할 수 있습니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"line 24","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"},{"text":"FeedConfig.feedHeaderViewAdapterClass","type":"text","marks":[{"type":"code"}]},{"text":"를 통해 1번에서 생성한 ","type":"text"},{"text":"CustomPopHeaderViewAdapter","type":"text","marks":[{"type":"code"}]},{"text":" 를 설정합니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"line 29","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"},{"text":"PopConfig.feedConfig","type":"text","marks":[{"type":"code"}]},{"text":"를 통해 5번에서 설정한 FeedConfig 를 설정합니다.","type":"text"}]}]}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {\n @Nullable\n @Override\n protected View getCustomPreviewMessageLayout(Context context, ViewGroup parent, CustomPreviewMessage customPreviewMessage) {\n final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);\n if (inflater == null) {\n return null;\n }\n View viewCustomPreviewMessage = inflater.inflate(R.layout.view_custom_preview_message, parent, false);\n final TextView textCustomPreviewMessageTitle = viewCustomPreviewMessage.findViewById(R.id.textCustomPreviewMessageTitle);\n textCustomPreviewMessageTitle.setText(customPreviewMessage.getMessage());\n viewCustomPreviewMessage.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n startDeeplinkActivity(context, customPreviewMessage.getLandingUrl());\n }\n });\n return viewCustomPreviewMessage;\n }\n}\n\nfinal FeedConfig popFeedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)\n ...\n .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)\n ...\n .build();\nfinal PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)\n ...\n .feedConfig(popFeedConfig)\n ...\n .build();","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Step 2. (Optional) FeedConfig 사용 설정","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"- PopFeedHeader 에 CustomPreviewMessage 보이지 않도록 설정","type":"text"}]},{"type":"paragraph","content":[{"text":"PopConfig.feedConfig","type":"text","marks":[{"type":"code"}]},{"text":" 설정시 ","type":"text"},{"text":"FeedConfig.feedHeaderViewAdapterClass","type":"text","marks":[{"type":"code"}]},{"text":" 를 설정 하지 않으면 PopFeedHeader 의 CustomPreviewMessage 를 보이지 않게 설정할 수 있습니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"- PopFeedHeader 에 DefaultPreviewMessage 보이도록 설정","type":"text"}]},{"type":"paragraph","content":[{"text":"PopConfig.feedConfig","type":"text","marks":[{"type":"code"}]},{"text":" 설정시 ","type":"text"},{"text":"FeedConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class)","type":"text","marks":[{"type":"code"}]},{"text":" 를 설정 하면 기본 제공하는 DefaultPreviewMessage 를 사용할 수 있습니다. (그림 2 참조)","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Step 3. (Optional) Preview Interval 설정","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"PopConfig.previewIntervalInMillis","type":"text","marks":[{"type":"code"}]},{"text":"를 통해서 Preview interval 을 설정합니다. AdPreview, ContentPreview/CustomPreviewMessage 동일하게 interval 이 설정됩니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)\n ...\n .previewIntervalInMillis(1 * 60 * 60 * 1000) // 1 hour\n ...\n .build();","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Preview Message] PopAdMessageViewClass","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wrap-right","width":50.0},"content":[{"type":"media","attrs":{"width":870,"id":"8f16d582-7670-4bb9-8ac4-9c2854a5c584","collection":"contentId-721027924","type":"file","height":282}}]},{"type":"paragraph","content":[{"text":"광고가 있는 경우 ","type":"text"},{"text":"PopAdMessageViewClass","type":"text","marks":[{"type":"code"}]},{"text":"를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 현재 적립가능한 포인트와 몇초후에 닫히는지 보여줍니다. 해당 클래스는 ","type":"text"},{"text":"PopAdMessageView","type":"text","marks":[{"type":"code"}]},{"text":"를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"updateView","type":"text","marks":[{"type":"code"}]},{"text":": 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 적립가능한 reward 값이 인자로 넘어옵니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"getDurationInSeconds","type":"text","marks":[{"type":"code"}]},{"text":" 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"예제 코드"},"content":[{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class MyPopAdMessageView extends PopAdMessageView {\n\n private TextView textTitle, textDescription;\n\n public MyPopAdMessageView(@NonNull Context context) {\n super(context);\n LayoutInflater.from(context).inflate(R.layout.view_my_pop_ad_message, this);\n this.textTitle = findViewById(R.id.textTitle);\n this.textDescription = findViewById(R.id.textDescription);\n }\n\n @Override\n public void updateView(int reward, int remainSeconds) {\n textTitle.setText(reward + \"포인트 적립 가능합니다.\");\n textDescription.setText(remainSeconds + \"초 후에 닫힙니다.\");\n }\n\n @Override\n public int getDurationInSeconds() {\n return 5;\n }\n}\n","type":"text"}]},{"type":"paragraph"}]},{"type":"paragraph","content":[{"text":"사용법","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"new PopConfig.Builder(getApplicationContext(), \"POP_UNIT_ID\")\n .popAdMessageViewClass(MyPopAdMessageView.class)","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Preview Message] PopArticleMessageViewClass","type":"text"}]},{"type":"paragraph","content":[{"text":"광고가 없는 경우 ","type":"text"},{"text":"PopArticleMessageViewClass","type":"text","marks":[{"type":"code"}]},{"text":" 를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 로드된 첫번째 기사의 제목과 몇초후에 닫히는지를 보여줍니다. 해당 클래스는 ","type":"text"},{"text":"PopArticleMessageView","type":"text","marks":[{"type":"code"}]},{"text":"를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"updateView","type":"text","marks":[{"type":"code"}]},{"text":": 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 기사의 제목이 인자로 넘어옵니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"getDurationInSeconds","type":"text","marks":[{"type":"code"}]},{"text":": 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"getNativeArticleView","type":"text","marks":[{"type":"code"}]},{"text":": ","type":"text"},{"text":"NativeArticleView","type":"text","marks":[{"type":"code"}]},{"text":" 클래스의 인스턴스를 반환합니다. ","type":"text"},{"text":"NativeArticleView","type":"text","marks":[{"type":"code"}]},{"text":"는 LinearLayout을 상속받아 Impression과 Click을 처리합니다. ","type":"text"},{"text":"PopArticleMessageViewClass","type":"text","marks":[{"type":"code"}]},{"text":"의 뷰를 다음과 같이 설정합니다.","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\n \n \n \n \n","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"예제 코드"},"content":[{"type":"codeBlock","content":[{"text":"import com.buzzvil.buzzad.benefit.presentation.article.NativeArticleView;\n\npublic class MyPopArticleMessageView extends PopArticleMessageView {\n\n private final NativeArticleView nativeArticleView;\n private TextView textTitle, textDescription;\n\n public MyPopArticleMessageView(@NonNull Context context) {\n super(context);\n LayoutInflater.from(context).inflate(R.layout.bz_view_article_message, this);\n this.nativeArticleView = findViewById(R.id.my_pop_message_native_article);\n this.textTitle = findViewById(R.id.textTitle);\n this.textDescription = findViewById(R.id.textDescription);\n }\n\n @Override\n public void updateView(@Nullable String title, int remainSeconds) {\n textTitle.setText(title);\n textDescription.setText(remainSeconds + \"초 후에 닫힙니다.\");\n }\n\n @NonNull\n @Override\n public NativeArticleView getNativeArticleView() {\n return nativeArticleView;\n }\n\n @Override\n public int getDurationInSeconds() {\n return 5;\n }\n}\n\n\n","type":"text"}]}]},{"type":"paragraph","content":[{"text":"사용법","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"new PopConfig.Builder(getApplicationContext(), \"POP_UNIT_ID\")\n .popArticleMessageViewClass(MyPopArticleMessageView.class)","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Pop Feed] PopUtilityLayoutHandlerClass","type":"text"}]},{"type":"paragraph","content":[{"text":"피드 하단의 Utility화면을 커스텀할 때 ","type":"text"},{"text":"PopUtilityLayoutHandler","type":"text","marks":[{"type":"code"}]},{"text":" 클래스를 사용합니다. ","type":"text"}]},{"type":"paragraph","content":[{"text":"기본 클래스에서는 카메라, 사진첩, 브라우저로 이동하는 뷰가 제공됩니다. 유틸리티를 커스텀하기 위해서는 ","type":"text"},{"text":"PopUtilityLayoutHandler","type":"text","marks":[{"type":"code"}]},{"text":" 클래스를 상속받아 사용합니다. 오버라이드 해야 하는 함수는 다음과 같습니다. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":65.0},"content":[{"type":"media","attrs":{"width":1122,"id":"95a34676-2170-461a-ab34-b0817a887957","collection":"contentId-721027924","type":"file","height":549}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"onLayoutCreated(ViewGroup parent)","type":"text","marks":[{"type":"code"}]},{"text":": Utility에 넣고 싶은 View를 작성한 후에 인자로 넘어온 Parent 뷰그룹에 붙여줍니다. 커스텀으로 작성된 뷰에 있는 아이콘에 클릭 리스너를 달아서 원하는 행동을 수행하도록 작업합니다.","type":"text"}]}]}]},{"type":"codeBlock","content":[{"text":"final LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.my_view_utility_layout, parent, false);\nparent.addView(layout);","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"팝피드 하단아이콘 참고사항","type":"text","marks":[{"type":"strong"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"이미지 사이즈","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"24*24 dp (mdpi 기준)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"96*96 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"아이콘은 png 와 벡터이미지가 모두 가능합니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"컬러 아이콘 사용 가능","type":"text"}]}]}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"사용법","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"codeBlock","content":[{"text":"new PopConfig.Builder(getApplicationContext(), \"POP_UNIT_ID\")\n .popUtilityLayoutHandlerClass(MyPopUtilityLayoutHandler.class)","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Pop Feed] Pop Toolbar (AppBar) Customize","type":"text"}]},{"type":"paragraph","content":[{"text":"PopConfig 를 사용하여 Toolbar 영역을 Customize 할 수 있습니다. PopConfig 에 ","type":"text"},{"text":"PopConfig.feedToolbarHolderClass","type":"text","marks":[{"type":"code"}]},{"text":" 를 설정하는데 여기에 ","type":"text"},{"text":"DefaultPopToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":" 를 상속받은 class 를 사용해서 Pop Toolbar customize 가능합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)\n ...\n .feedUnitId(feedUnitId)\n // 아래에서 소개하는 TemplatePopToolbarHolder, CustomPopToolbarHolder 등을 \n // 용도에 맞게 사용합니다\n .feedToolbarHolderClass(DefaultPopToolbarHolder.class) \n ...\n .build();","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"DefaultPopToolbarHolder","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"DefaultPopToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":" 를 바로 설정하면 간단하게 Pop Toolbar 가 설정됩니다.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":700,"alt":"DefaultPopToolbarHolder 를 설정한 화면","id":"bd7e7c54-3797-4e35-b95f-4d3ba57b3c84","collection":"contentId-721027924","type":"file","height":135}}]},{"type":"paragraph"},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"TemplatePopToolbarHolder","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"DefaultPopToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":" 를 상속하여 ","type":"text"},{"text":"TemplatePopToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":" 를 만들어 사용합니다. 그리고 기본 제공하는 PopToolbar 를 사용하여 미리 구성되어있는 PopToolbarTemplate 을 수정하여 customize 가능합니다. Toolbar 내의 Pop feed icon, title, toolbar background color 등을 변경할 수 있고 Toolbar 우측에 클릭 가능한 이미지 버튼을 추가할 수 있습니다.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":701,"id":"f2041ce7-a40b-4c10-914e-29fd415fcd7e","collection":"contentId-721027924","type":"file","height":133}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Toolbar icon 변경: ","type":"text"},{"text":"toolbar.setIconResource","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Toolbar title 변경: ","type":"text"},{"text":"toolbar.setTitle","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Toolbar background color 변경: ","type":"text"},{"text":"toolbar.setBackgroundColor","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Toolbar 우측 문의하기 버튼 추가: ","type":"text"},{"text":"addInquiryMenuItemView","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Toolbar 우측 custom 버튼 추가: ","type":"text"},{"text":"toolbar.buildPopMenuItemView","type":"text","marks":[{"type":"code"}]},{"text":" 를 통해 ","type":"text"},{"text":"PopMenuImageView","type":"text","marks":[{"type":"code"}]},{"text":" 를 생성하고 생성된 View 를 ","type":"text"},{"text":"toolbar.addRightMenuButton","type":"text","marks":[{"type":"code"}]},{"text":" 를 통해 toolbar에 추가합니다. (우측 버튼은 add 된 순서대로 좌측부터 우측으로 배열됩니다.)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"showInquiry","type":"text","marks":[{"type":"code"}]},{"text":" 함수: 문의하기 페이지를 엽니다. 문의하기 버튼 icon 을 customize 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.","type":"text"}]}]}]}]}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"// DefaultPopToolbarHolder 상속\npublic class TemplatePopToolbarHolder extends DefaultPopToolbarHolder {\n @Override\n public View getView(Activity activity, @NonNull final String unitId) {\n toolbar = new PopToolbar(activity); // PopToolbar 에서 제공하는 기본 Template 사용\n toolbar.setTitle(\"TemplatePopToolbarHolder\");\n toolbar.setIconResource(R.mipmap.ic_launcher);\n toolbar.setBackgroundColor(Color.LTGRAY);\n\n addInquiryMenuItemView(activity, unitId); // 문의하기 버튼은 이 함수를 통해 간단하게 추가 가능합니다.\n addRightMenuItemView1(activity, unitId); // custom 버튼 추가 \n addRightMenuItemView2(activity);\n return toolbar;\n }\n\n // custom 버튼 추가는 toolbar.buildPopMenuItemView 를 사용하여 View 를 생성하고\n // toolbar.addRightMenuButton 를 사용하여 toolbar 에 추가합니다.\n private void addRightMenuItemView1(@NonNull final Activity activity, @NonNull final String unitId) {\n PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher);\n menuItemView.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n showInquiry(activity, unitId));\n }\n });\n toolbar.addRightMenuButton(menuItemView);\n }\n\n private void addRightMenuItemView2(@NonNull final Activity activity) {\n PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher);\n menuItemView.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n showPotto(activity);\n }\n });\n toolbar.addRightMenuButton(menuItemView);\n }\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"CustomizePopToolbarHolder","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"DefaultPopToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":" 를 상속받아서 사용하는 점은 ","type":"text"},{"text":"TemplatePopToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":" 와 동일합니다. 차이점은 PopToolbar 를 사용하지않고 layout 을 직접 구성하여 Toolbar 영역을 전부 customize 할 수 있습니다.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":704,"id":"1f60620a-eaf9-4197-acb5-e128755acbe3","collection":"contentId-721027924","type":"file","height":132}}]},{"type":"paragraph","content":[{"text":"1. ","type":"text"},{"text":"CustomPopToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":" class","type":"text"}]},{"type":"codeBlock","content":[{"text":"// DefaultPopToolbarHolder 상속\npublic class CustomPopToolbarHolder extends DefaultPopToolbarHolder {\n @Override\n public View getView(Activity activity, @NonNull final String unitId) {\n // 직접 구성한 layout 을 사용합니다\n ViewGroup root = (ViewGroup) activity.getLayoutInflater().inflate(R.layout.view_pop_custom_toolbar, null);\n\n View buttonInquiry = root.findViewById(R.id.buttonInquiry);\n buttonInquiry.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n // 문의하기 페이지 열기\n showInquiry(activity, unitId);\n }\n });\n return root;\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"2. ","type":"text"},{"text":"CustomPopToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":"에서 사용하는 ","type":"text"},{"text":"layout.view_pop_custom_toolbar","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","content":[{"text":"\n\n\n \n\n \n\n \n\n \n\n \n\n \n\n","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Pop Feed] Custom Bottom Sheet","type":"text"}]},{"type":"paragraph","content":[{"text":"PopContentActivity 내에서 사용가능한 Custom Bottom Sheet 입니다. 일반적으로 PopUtilityLayoutHandler 를 Customize 하여 호출합니다.","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"BottomSheet 호출 코드 (CustomPopUtilityLayoutHandler 사용)","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Utility 버튼을 눌렀을 때 아래 코드를 호출하면 BottomSheet 이 열립니다.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":2391,"id":"c8968c1a-0a4f-4dd8-a941-241f14ac2ca0","collection":"contentId-721027924","type":"file","height":2112}}]},{"type":"paragraph","content":[{"text":"1. line 1~6: bottomsheet 에서 사용할 view 와 동작을 지정할 수 있습니다.","type":"text"}]},{"type":"codeBlock","content":[{"text":"val inflater: LayoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater\nval dialogView = inflater.inflate(R.layout.view_fragment_pop_bottom_sheet, null)\nval textBottomSheet: TextView = dialogView.findViewById(R.id.textBottomSheet)\ntextBottomSheet.setOnClickListener {\n Toast.makeText(context, \"text bottom sheet clicked\", Toast.LENGTH_SHORT).show()\n}\nval dialog = BottomSheetDialog(context)\ndialog.setContentView(dialogView)\ndialog.show()","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"(Optional) PopContentActivity 에 Theme을 적용하여 BottomSheet 좌우측 상단 모서리 둥글게 만들기","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"기본적으로 제공되는 BottomSheet은 흰색 사각형 모양인데, 좌우측 상단을 둥글게 사용하기 위해서는 다음과 같이 설정하면 됩니다.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":797,"id":"2dd3e87b-a3ba-4b8b-b780-8e6dcb73d8c9","collection":"contentId-721027924","type":"file","height":398}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"1. 좌우측 상단 모서리가 둥근 drawable 을 준비합니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"rounded_dialog.xml","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","content":[{"text":"\n\n \n \n\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"2. PopContentActivity 를 위한 theme(BuzzvilSamplePopContentActivityTheme) 을 준비합니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"styles.xml","type":"text","marks":[{"type":"code"}]},{"text":" BottomSheet 에서 위에서 설정한 좌우측이 둥근 background 를 사용할 수 있도록 설정합니다.","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n\n\n\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"3. BuzzvilSamplePopContentActivityTheme 을 PopContentActivity 에 적용합니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"AndroidManifest.xml","type":"text","marks":[{"type":"code"}]},{"text":"를 통해 ","type":"text"},{"text":"PopContentActivity","type":"text","marks":[{"type":"code"}]},{"text":" 에 위에서 선언한 ","type":"text"},{"text":"BuzzvilSamplePopContentActivityTheme","type":"text","marks":[{"type":"code"}]},{"text":" 스타일을 사용하도록 설정합니다.","type":"text"}]},{"type":"codeBlock","content":[{"text":"","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Pop Feed] ","type":"text"},{"text":"Custom In-app-landing","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"3fb28597-a55d-423a-8230-533fe1cf709a"}}]}]},{"type":"paragraph","content":[{"text":"유틸리티 영역이나 툴바 영역에 버튼을 추가한 경우, 버튼을 클릭했을때 유저를 새로운 activity로 랜딩시키거나 fragment로 랜딩시킬 수 있습니다. (fragment를 이용하는 경우, 보다 자연스러운 UX를 만들 수 있습니다.) ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"activity로 랜딩하는 경우, startActivity를 이용하여 원하는 activity를 열 수 있습니다. ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"fragment로 랜딩하는 경우, 정해신 방식을 따라야 합니다. (아래의 그림은 fragment로 in app landing 시켰을 경우의 예시입니다.)","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"BuzzAd SDK에서는 툴바를 제공하며, SDK 사용자는 fragment 의 내용을 채워넣게 됩니다. ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"toolbar 영역은 제목의 텍스트만 변경가능합니다. ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"contents 영역은 모든 내용을 fragment 로 만들어 넣을 수 있습니다.","type":"text"}]}]}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":50.0},"content":[{"type":"media","attrs":{"width":1072,"id":"99d58f39-f773-468b-903e-697be48ec520","collection":"contentId-721027924","type":"file","height":1280}}]},{"type":"paragraph","content":[{"text":"다음의 클래스가 필요합니다.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PopNavigator: pop의 navigation을 담당하는 클래스","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"CustomInAppLandingInfo: 랜딩하게 될 fragment의 내용에 대한 정보를 가지고 있는 클래스","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"fragment: 랜딩되는 화면의 컨텐츠를 담당하는 fragment 객체를 넘겨줍니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"titleResId: 랜딩되는 화면의 타이틀의 resource id를 넘겨줍니다.","type":"text"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"예시 코드","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"new PopNavigator().launchCustomFragment(\n context,\n new CustomInAppLandingInfo(\n new ExampleFragment(),\n R.stirng.example_title\n )\n)","type":"text"}]},{"type":"paragraph","content":[{"text":"원하는 fragment 를 instantiate하여 (","type":"text"},{"text":"ExampleFragment","type":"text","marks":[{"type":"code"}]},{"text":") ","type":"text"},{"text":"CustomInAppLandingInfo","type":"text","marks":[{"type":"code"}]},{"text":" 에 넘겨서 화면에 표시하는 코드입니다. ","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"[Pop Feed] Custom Feedback (Snackbar, Toast)","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":30.0},"content":[{"type":"media","attrs":{"width":1037,"id":"65773e0e-a3d8-4d28-b7f8-c5cba932a092","collection":"contentId-721027924","type":"file","height":350}}]},{"type":"paragraph","content":[{"text":"팝 지면에서 보여주는 다양한 피드백을 customize 할 수 있습니다. 오른쪽의 이미지는 피드 오픈 리워드 피드백을 customize 했을 때 보여주는 커스텀 피드백입니다.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"2.7.0 미만의 버전에서는 Toast 가 항상 노출됩니다.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"다음의 적용이 필요합니다.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PopFeedbackHandler 인터페이스를 구현하는 커스텀 클래스를 생성합니다. 기본으로 제공되는 피드백의 일부를 사용하고 싶다면, DefaultPopFeedbackHandler를 확장하는 것을 권장합니다. (하단의 PopFeedbackHandler 인터페이스에 대한 부연 설명을 참고)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PopConfig를 초기화할 때에, 이전 스텝에서 생성한 Custom PopFeedbackHandler 클래스를 넘겨줍니다.","type":"text"}]}]}]},{"type":"expand","attrs":{"title":"예시 코드"},"content":[{"type":"codeBlock","attrs":{"language":"kotlin"},"content":[{"text":"class CustomPopFeedbackHandler : DefaultPopFeedbackHandler() {\n override fun notifyFeedLaunchReward(\n context: Context,\n view: View,\n canUseSnackbar: Boolean,\n reward: Int\n ) {\n val message = \"Customized feed launch reward message\"\n\n if (canUseSnackbar) {\n showSnackbar(context, view, message)\n } else {\n showToast(context, message)\n }\n }\n\n ...\n}\n\nfinal PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)\n ...\n .PopFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)\n ...\n .build();","type":"text"}]},{"type":"paragraph"}]},{"type":"paragraph","content":[{"text":"PopFeedbackHandler Interface","type":"text","marks":[{"type":"strong"}]}]},{"type":"codeBlock","attrs":{"language":"kotlin"},"content":[{"text":"interface PopFeedbackHandler {\n fun notifyFeedLaunchReward(context: Context, view: View, canUseSnackbar: Boolean, reward: Int)\n\n fun notifyNativeAdReward(context: Context, view: View, canUseSnackbar: Boolean, reward: Int)\n\n fun notifyPottoDrawOneMore(context: Context, view: View, canUseSnackbar: Boolean)\n\n fun notifyPottoStatus(context: Context, view: View, canUseSnackbar: Boolean)\n}","type":"text"}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"methods","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"notifyFeedLaunchReward","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"피드 오픈 리워드 피드백을 보여줍니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"notifyNativeAdReward","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"광고 적립 피드백을 보여줍니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"notifyPottoDrawOneMore","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"포또 한번 더 뽑기 피드백을 보여줍니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"notifyPottoStatus","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"포또 뽑기가 가능한 상태일 때를 알려주는 피드백을 보여줍니다. 해당 피드백은 한 번 만 노출됩니다.","type":"text"}]}]}]}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"Parameters","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"Description","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"context: Context","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"snackbar나 toast를 사용할 때 인수로 넘겨주는 context입니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"view: View","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"snackbar를 사용할 때 인수로 넘겨주는 view입니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"canUseSnackbar: Boolean","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[221.0]},"content":[{"type":"paragraph","content":[{"text":"reward: Int","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[539.0]},"content":[{"type":"paragraph","content":[{"text":"적립된 리워드 포인트 양을 나타내는 인수입니다. 해당 인수를 사용해서 커스텀 메시지를 formatting 하면 유저에게 좀 더 구체적인 피드백을 제공할 수 있습니다.","type":"text"}]}]}]}]},{"type":"paragraph"}],"version":1}

Browser not supported