# 커플형

<p align="center"><img src="https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2Ftag.svg_131b9f20-ce14-4808-a398-c53af3324ee5?alt=media&#x26;token=c58f9e10-c357-44a0-a02d-0aa2cfb804c7" alt="" data-size="line"></p>

<h3 align="center"><strong>커플형</strong></h3>

<p align="center">커플 또는 페어를 등록하고 예쁘게 정리 가능한 게시판</p>

<p align="center"><sub><em>+</em></sub> <em> </em><sub><em><mark style="color:purple;">80,000₩</mark></em></sub></p>

{% tabs %}
{% tab title="3단형" %}
{% hint style="warning" %}
자세한 이미지는 아래에서 확인 가능합니다.  [#undefined-7](#undefined-7 "mention")
{% endhint %}

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.50.43.png_59429956-b631-4133-9344-df16ba79d036?alt=media\&token=8ad4c3f3-6012-4738-8372-1af3e673599d)

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.52.47.png_44ff6fe3-d511-43bc-bc89-dfb839d4195b?alt=media\&token=7aef2e9f-6e74-4baf-8afa-28eabeb863e5)

<p align="center"><sup>💟 갠홈 샘플 허락해주신 맛밤님 감사합니다 💟</sup></p>
{% endtab %}

{% tab title="4단형" %}
{% hint style="warning" %}
자세한 이미지는 아래에서 확인 가능합니다.  [#undefined-7](#undefined-7 "mention")
{% endhint %}

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.52.59.png_0cdda7c5-a887-428d-8450-ba1cf0e32490?alt=media\&token=0161e477-550e-47eb-9cef-dde2a584a3f6)

<p align="center"><sup>💟 갠홈 샘플 허락해주신 현제님 감사합니다 💟</sup></p>
{% endtab %}
{% endtabs %}

<br>

<br>

<br>

<mark style="color:blue;">**\[1]**</mark> [#undefined-2](#undefined-2 "mention")

<mark style="color:blue;">**\[2]**</mark> [#undefined-3](#undefined-3 "mention")

<mark style="color:blue;">**\[3]**</mark> [#undefined-7](#undefined-7 "mention")

<h2 align="center"><strong>#1</strong></h2>

<h3 align="center"><strong>페어 추가</strong></h3>

관리자로 로그인 시, 추가/편집 버튼이 보이게 됩니다.\
\&#xNAN;**\[추가]** 버튼 클릭 시, 빈 카드가 목록에 추가됩니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.50.58.png_922700d3-5c17-4f0c-90ef-218b0b162a19?alt=media\&token=0935740c-5ca5-4d31-989a-05a59aeb8671)

<h2 align="center"><strong>#2</strong></h2>

<h3 align="center"><strong>페이지 편집</strong></h3>

> ### **페이지 편집**
>
> 1. \[편집] 클릭해 목록 편집모드 진입 -> 카드 아래 \[수정] 버튼 클릭
> 2. 상세 페이지의 톱니바퀴 아이콘 클릭

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F48Futxci9v1lilcqeG1Q%2Fimage.png?alt=media&#x26;token=6d4f5fd2-ed6e-4941-a222-cd747b8f05e1" alt=""><figcaption></figcaption></figure>

페이지 편집모드로 들어갑니다.&#x20;

레이아웃 선택 및, 컬러 지정을 해줍니다.

> ### **선택 가능 레이아웃**&#x20;
>
> * **3단형**
> * **3단 숨김 형**
> * **4단형**
> * **풀페이지 형**
> * **포토카드 연동형**\
>   **= 포토카드 게시판이 있을 시에만 가능한 옵션입니다.**&#x20;

{% hint style="info" %}
각 게시글을 작성할 때 마다 레이아웃 중 선택 가능합니다.
{% endhint %}

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2Fucrm3ZhLXKQc7xZYv0HC%2Fimage.png?alt=media&#x26;token=3eb5b00c-6e3f-463f-884d-468ef10455d0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FAElsE4PupGHhaUPzATyO%2Fimage.png?alt=media&#x26;token=e20baa7f-0787-410c-95e1-b99531d9100e" alt=""><figcaption></figcaption></figure>

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.57.57.png_f4c93cba-3fca-4fe3-be01-082b6ea5105a?alt=media\&token=1319d62c-842d-405c-b320-d3840ba03abb)

<br>

> ### **커플 리스트에서 이미지 랜덤 출력하기**

바깥 리스트 썸네일을 등록하면, 목록의 디데이/문구 중앙을 클릭했을 때, 랜덤으로 이미지가 출력됩니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.00.18.png_bc42e668-df33-42d8-a6ed-c52617c77b7f?alt=media\&token=beba71ee-fbb8-4c09-ae84-85c101573e8d)

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2022-11-30_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_7_02_03_AdobeExpress.gif_74c90085-32db-4a37-b0f1-2b7192317b83?alt=media\&token=1e513688-723b-45c7-a36b-15df9e081e3b)

<h2 align="center"><strong>#3</strong></h2>

<h3 align="center"><strong>레이아웃 및 기능 소개</strong></h3>

### **1.  3단형 레이아웃**

갤러리는 여러 장 추가 가능하며, 클릭 시 원본사이즈 열람 가능합니다.

{% hint style="info" %}
화면크기를 넘는 원본은 약간 축소됩니다.
{% endhint %}

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.52.47.png_44ff6fe3-d511-43bc-bc89-dfb839d4195b?alt=media\&token=7aef2e9f-6e74-4baf-8afa-28eabeb863e5)

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.09.57.png_b107a1a2-4eb3-424a-acc1-232f252a4c21?alt=media\&token=78da7635-488d-4849-a181-1d1a3411b645)

'**프로필 사진**' 클릭 시 화변 반쪽에 전신이 띄워집니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.09.43.png_bcd89cc3-4d0e-4dea-ba01-ca107174f6cb?alt=media\&token=63e96971-1960-4fef-8d82-9d4620a496fd)

갤러리 탭 옆의 **\[노트]** 탭을 클릭하면 노트내용을 볼 수 있습니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.15.48.png_a606c15f-7836-4445-87e4-8e9e286c9ff0?alt=media\&token=86a7b9b4-3812-4814-899e-ef0911b0af8c)

\ <br>

### **2.  4단형 레이아웃**

전신이 양 옆에 배치됩니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.18.58.png_b400a180-9520-4d27-9e59-7cd20ce39f89?alt=media\&token=51878e5a-d120-4d31-935b-e69ccf03220f)

전신을 추가하지 않고, 배경이미지를 활용하면 아래와 같은 연출이 가능합니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.52.59.png_0cdda7c5-a887-428d-8450-ba1cf0e32490?alt=media\&token=0161e477-550e-47eb-9cef-dde2a584a3f6)

<br>

### **3.  풀페이지 형 레이아웃**

아래로 이어지는 스크롤 형식입니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.21.32.png_fc61305c-96ca-4835-8b0c-ed9b0944c83a?alt=media\&token=9b69b2ce-dab5-468e-b595-1902fa5f6587)

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.21.23.png_1d3182b8-ffa0-442c-94aa-1102a712446c?alt=media\&token=0da6695c-d177-4a64-a58e-f8d4eee47dc3)

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%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%202022-11-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2010.43.58.png_3e0ead6e-a252-4635-953a-993b53a91aa1?alt=media\&token=c255bb0d-1830-4bd2-8bae-77160203d687)

### **4.  포토카드 연동형 레이아웃**

{% hint style="danger" %}
해당 레이아웃은 **포토카드형 게시판**이 있을 시에만 적용 가능합니다 !&#x20;
{% endhint %}

포토카드 게시판의 인물들을 연동합니다.\
양 옆으로 인물들의 프로필을 띄우고, 중앙으로 옷장에 등록된 사진이 나타납니다.&#x20;

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FOA4eUN0Tf3pfUZYDjICL%2Fimage.png?alt=media&#x26;token=fc18f211-9421-46bb-88a4-ce3cc8cff78d" alt=""><figcaption></figcaption></figure>