PyQt5 리그오브레전드 로그인창 따라하기 [2023-05-04 학습일지]

 

오늘은 오전부터 점점 UI 디자인에 대해 깨달음을 얻은 것 같았다.

 

게임사는 UI 디자인에 진심이기 때문에, 이걸 따라하면 또 무언갈 깨닫지 않을까 고심하였고,

 

그 서늘하고 묵직한 느낌 아니까.. 따라하기 Topic을 이와 같이 선정해보았다.

 

 

 

교수님께서 꾸미는 디자인보단 우선적으로 기능 구현을 해놓은 뒤에 디자인을 입히라고 말씀하셔서

 

큰 골조만 짜고 후에 디자인을 추후에 채워보기로 한다.

 

그리하여 이미지도 대충 붙여놓았으니, 이점 양해 바랍니다.

 

Qt 디자이너로 다음과 같은 login_window.ui를 하나 제작하고

 

대표사진 삭제

사진 설명을 입력하세요.

로그인 결과를 띄워주는 Dialog를 만들어보았다.

 

추후에 로그인이 성공하면 메인화면을 띄우는 로직을 실행시키고,

 

실패하면 이런 다이어로그가 뜨게 하는 것이다.

 

 

그 다음, 우선 메인메뉴를 들어가야하니깐, 일단 MainMenu 버튼을 만들었다.

 

막상 구현하려니까 상단 메뉴와 하부 이미지를 어떻게 통일시켰을지 예상이 되면서, 프론트엔드에 깊은 애도를..

 

소스는 uic를 통해 구현하였고, 스택 위젯을 적용시켰다.

 

import sys
import os
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5 import uic


def resource_path(relative_path):
    base_path = getattr(sys, "_MEIPASS", os.path.dirname(os.path.abspath(__file__)))
    return os.path.join(base_path, relative_path)


login_window = resource_path('login_window.ui')
login_window_class = uic.loadUiType(login_window)[0]

login_result_modal = resource_path('login_modal.ui')
login_result_modal_class = uic.loadUiType(login_result_modal)[0]

main_window = resource_path('main_menu.ui')
main_window_class = uic.loadUiType(main_window)[0]


class MainWindowClass(QMainWindow, main_window_class):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.setWindowFlags(Qt.FramelessWindowHint)

        # 여기에 시그널, 설정
        self.btn_play.clicked.connect(self.btn_play_clicked)
        self.btn_home.clicked.connect(self.btn_home_clicked)
        self.btn_profile.clicked.connect(self.btn_profile_clicked)
        self.btn_collection.clicked.connect(self.btn_collection_clicked)
        self.btn_TFT.clicked.connect(self.btn_TFT_clicked)
        self.btn_user_box.clicked.connect(self.btn_user_box_clicked)
        self.btn_shop.clicked.connect(self.btn_shop_clicked)
        self.btn_user_logo.clicked.connect(self.btn_user_logo_clicked)
        self.btn_qustion.clicked.connect(self.btn_question_clicked)
        self.btn_minimize.clicked.connect(self.btn_minimize_clicked)
        self.btn_setting.clicked.connect(self.btn_setting_clicked)
        self.btn_close.clicked.connect(self.btn_close_clicked)
        self.btn_online_state.clicked.connect(self.btn_online_state_clicked)
        self.btn_this_week_lotation.clicked.connect(self.btn_this_week_lotation_clicked)

    # 여기에 함수 설정
    def upper_bar_frame(self): # 상단 프레임 드래그앤드롭
        pass

    def btn_play_clicked(self):
        self.main_body_stack.setCurrentIndex(0)

    def btn_home_clicked(self):
        self.main_body_stack.setCurrentIndex(1)

    def btn_profile_clicked(self):
        self.main_body_stack.setCurrentIndex(2)

    def btn_collection_clicked(self):
        self.main_body_stack.setCurrentIndex(3)

    def btn_TFT_clicked(self):
        self.main_body_stack.setCurrentIndex(4)

    def btn_user_box_clicked(self):
        pass

    def btn_shop_clicked(self):
        pass

    def btn_user_logo_clicked(self):
        pass

    def btn_question_clicked(self):
        pass

    def btn_minimize_clicked(self):
        pass

    def btn_setting_clicked(self):
        pass

    def btn_online_state_clicked(self):
        pass

    def btn_this_week_lotation_clicked(self):
        pass

    def btn_close_clicked(self):
        self.close()


class LoginWindowClass(QMainWindow, login_window_class):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.setWindowFlags(Qt.FramelessWindowHint)

        # 여기에 시그널, 설정
        self.btn_login.clicked.connect(self.btn_login_clicked)
        self.btn_main.clicked.connect(self.btn_main_menu_clicked)

    # 여기에 함수 설정
    def btn_login_clicked(self):
        self.login_result_window = LoginResultModalClass()
        self.login_result_window.show()

    def btn_main_menu_clicked(self):
        self.main_window = MainWindowClass()
        self.main_window.show()
        self.close()


class LoginResultModalClass(QWidget, login_result_modal_class):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.setWindowFlags(Qt.FramelessWindowHint)

        # 여기에 시그널, 설정
        self.btn_confirm.clicked.connect(self.btn_confirm_clicked)

    # 여기에 함수 설정
    def btn_confirm_clicked(self):
        self.close()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    myWindow = LoginWindowClass()
    myWindow.show()
    app.exec_()

 

 

소스코드는 우선 아직 간단하게 짜보았다. 기능 구현하는 것은 스택 위젯과 닫기 버튼정도.

 

setWindowFlags(Qt.FramelessWindowHint) 함수를 써서 외곽 프레임을 없애고, 버튼을 새로 만들어 주었다.

(그래야 나중에 UI입힐 때 통일성 줄 수 있음)

 

그래서 만들어진 화면은 다음과 같다.

 

감사합니다.