본문 바로가기
재밌는 IT 개발/그누보드 테마 제작기(記)

그누보드 테마 제작 12 - 소셜 로그인 및 회원가입 페이지 개발

by 행복한 만수킴 2020. 6. 27.

오늘은 로그인과 회원가입 화면에 소셜 로그인이 빠져 있어
해당 부분을 메우는 작업을 진행하려 합니다.

소셜로그인 영역이 빠졌다는걸 인식하지 못하고 있었네요. 흠냐...

 

로그인 스킨은 /theme/basic/skin/member/login.skin.php 네요. 이 안에서... 아래놈을 쏙 복사하여...

<?php @include_once(get_social_skin_path().'/social_login.skin.php'); // 소셜로그인 사용시 소셜로그인 버튼 ?>

새로운 테마의 login.skin.php(/theme/basic/skin/member/login.skin.php)에 쏙~~

                                    <path d="M10.1993 3.85336C12.1142 3.85336 13.406 4.66168 14.1425 5.33717L17.0207 2.59107C15.253 0.985496 12.9527 0 10.1993 0C6.2106 0 2.76588 2.23672 1.08887 5.49214L4.38626 7.99466C5.21352 5.59183 7.50242 3.85336 10.1993 3.85336Z" fill="#EB4335" />
                                </svg>
                                <!--end::Svg Icon-->
                            </span>Sign in with Google</button>
                        </div>
                        <!--end::Action-->
                    </form>
                    <?php @include_once(get_social_skin_path().'/social_login.skin.php'); // 소셜로그인 사용시 소셜로그인 버튼 ?>
                    <!--end::Form-->
                </div>
                <!--end::Signin-->

걍 쏙 넣었을 때 이미지...

너무 가로가 길어 예쁘지 않네요. 두 줄로 나누어주는게 이쁠 것 같아요...
위에서 include 했던,
/theme/basic/skin/member/social_login.skin.php 을 다시 수정하러 갑니다. 

                            </span>Sign in with Google</button>
                        </div>
                        <!--end::Action-->
                    </form>            <?php tLog("get_social_skin_path", get_social_skin_path()); ?>
                    <?php @include_once(get_social_skin_path().'/social_login.skin.php'); // 소셜로그인 사용시 소셜로그인 버튼 ?>
                    <!--end::Form-->
                </div>
                <!--end::Signin-->

get_social_skin_path()의 경로를 알아내야 skin 파일의 위치를 알 수 있기에 로그로 찍어봅니다.

social_login.skin.php의 위치 확인

그런데, 테마가 적용이 된 상황에서, 테마 폴더로 연결이 되지 않네요... 뭘까요....
이유는 /skin 폴더에는 social 폴더가 존재하는데,
/theme/mt703 폴더 안에는 social 폴더가 존재하지 않기 때문입니다.
이를 해결하기 위해서는,
/skin/social 폴더를 복사하여 /theme/skin/에 복사하면 되겠습니다.

social 디렉토리를 theme/skin 이하로 복붙한다.
이제 테마 폴더 안의 스킨 파일을 정상적으로 출력하네요.

 

한 줄에 두개씩 출력하기 위해,
CSS의 수정 작업을 들어 갑니다.

/* 신규 테마에 맞게 변경 조치. by tank. at 200622. */
/* .login-sns {padding-bottom:10px;margin-top:5px;border:1px solid #dde7e9;border-bottom:1px solid #dde7e9;clear:both;background:#fff} */
.login-sns {padding-bottom:10px;margin-top:5px;border:1px solid #dde7e9;border-bottom:1px solid #dde7e9;clear:both;}

/* 신규 테마에 맞게 변경 조치. by tank. at 200622. */
/* #sns_login {border:0;margin-top:15px;border-top:1px solid #edeaea} */
#sns_login {border:0;margin-top:15px;}
#sns_login h3 {padding:10px 0 0;text-align:left;font-weight:bold}
/* 신규 테마에 맞게 변경 조치. by tank. at 200622. */
/* #sns_login .sns-icon {display:block;height:40px;line-height:40px;width:100%;margin:0 0 5px;padding-left:40px;text-align:left;color:#fff;border-radius:2px} */
#sns_login .sns-icon {height:40px;line-height:40px;width:49%;margin:0 0 5px;padding-left:40px;text-align:left;color:#fff;border-radius:2px}
#sns_login .sns-naver {background-color:#1fc800;background-position:5px 5px;border-bottom:1px solid #1ea505}
#sns_login .sns-kakao {background-color:#ffeb00;background-position:5px 5px;border-bottom:1px solid #e2c10a}

음... 아까보단 낫긴 한데... 로그인 글자가 회색으로 나타나는게 불만이네요.

로그인 글자를 원래처럼 흰색으로 나오게 하고 싶었으나,
CSS 실력이 워낙에 부족한지라, 도대체 고쳐지지가 않네요. ㅠㅠ
이럴땐 어쩔 수 없니, 해당 태그에 직접 수정을 가해버립니다.
능력이 안되니, 어쩔 수 없이... 삽질이라도... ㅠㅠ

        <?php if( social_service_check('naver') ) {     //네이버 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=naver&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-naver" title="네이버">
            <span class="ico"></span>
            <span class="txt" style="font-size:1.25rem;">네이버<i style="color:#fff;"> 로그인</i></span>
        </a>
        <?php }     //end if ?>
        <?php if( social_service_check('kakao') ) {     //카카오 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=kakao&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-kakao" title="카카오">
            <span class="ico"></span>
            <span class="txt" style="font-size:1.25rem;">카카오<i style="color:#fff;"> 로그인</i></span>
        </a>
        <?php }     //end if ?>
        <?php if( social_service_check('facebook') ) {     //페이스북 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=facebook&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-facebook" title="페이스북">
            <span class="ico"></span>
            <span class="txt" style="font-size:1.25rem;">페이스북<i style="color:#fff;"> 로그인</i></span>
        </a>
        <?php }     //end if ?>
        <?php if( social_service_check('google') ) {     //구글 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=google&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-google" title="구글">
            <span class="ico"></span>
            <span class="txt" style="font-size:1.25rem;">구글+<i style="color:#fff;"> 로그인</i></span>
        </a>
        <?php }     //end if ?>
        <?php if( social_service_check('twitter') ) {     //트위터 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=twitter&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-twitter" title="트위터">
            <span class="ico"></span>
            <span class="txt" style="font-size:1.25rem;">트위터<i style="color:#fff;"> 로그인</i></span>
        </a>
        <?php }     //end if ?>
        <?php if( social_service_check('payco') ) {     //페이코 로그인을 사용한다면 ?>
        <a href="<?php echo $self_url;?>?provider=payco&amp;url=<?php echo $urlencode;?>" class="sns-icon social_link sns-payco" title="페이코">
            <span class="ico"></span>
            <span class="txt" style="font-size:1.25rem;">페이코<i style="color:#fff;"> 로그인</i></span>
        </a>

직접 스타일을 적용해버렸네요. 능력이 딸리니... 흠냐...

 

암튼 그리하여...
나름 괜찮은 화면이 나온 듯 합니다.

완성된 화면... 뭐... 나름 괜찮은 듯 합니다.

 

로그인 화면 작업과 비슷한 방식으로
회원 가입 화면의 소셜도 적용하였네요.
(CSS를 분석하고 찾아서 고치는 것이 넘 어려워 회원 가입은 걍 style를 바로 적용해서 완료했습니다.)

회원가입에 SNS계정 가입을 적용한 화면

 

소셜 연동은 전에 말씀 드린데로 맨 마지막에 처리해야 할 듯 하네요~.

실제 연동은 테마가 모두 끝나면 그때 하자!

 

이번에는 CSS 고치느라 시간이 많이 걸렸어요.
CSS는 알다가도 모르겠고, 모르다가도 좀 아는 것 같고...

매번 작업 할때마다 삽질을 좀 하게 되는 파트네요.
쩝...

다음번엔 무슨 삽질을 하게 될지 두근하네요~

댓글0