2.사이드 프로젝트 - 짝꿍 바꾸기

확인중·2024년 3월 2일

사프

목록 보기

2/2

평일 퇴근 하고 3일에서 4일 정도 사이드 프로젝트를 진행 중이다.

이전 글에서 파이썬과 엑셀로 인터페이스 없이 자리바꾸기를 구현했고 곧 이어 핵심 기능이였던 자리 배치시 관계 설정하는 부분의 어려움이 있었다.

이걸 해결하기 위해서 mongoDB를 사용했다. 그리고 하는 김에 좀 더 고도화하여
Python에서 간단하게 frontend를 구현하게 도와주는 Streamlit 이라는 프레임워크도 하용하기로 한다.

기술 Stack 소개

steamlit은 적은 공수로 어플리케이션 개발에서 배포까지 간단하게 해결해줄 수 있어서 이전의 토이프로젝트 진행시 요긴하게 사용했었다.

그리하여 python + streamlit + mongoDB을 기술 스택으로 선정하고 엑셀 시트에서 학생들을 목록을 불러와서 자리를 배치하고 셔플 기능을 통해서 학생들의 자리를 앞 뒤로 바꾸는 기능을 구현하기로 한다.

그리고 이 과정에서 간단한 디자인 작업이 필요하여 uizard 의 도움도 아주 가벼운 수준에서 받게 된다.
uizard를 프롬프트를 입력하면 간단한 UI를 구현해준다. 그리고 react로 export해주는 기능이 있다.(그렇지만 단일 컴포넌트 단위로 제공해주고, 복잡한 컴포넌트를 선택조차 되지 않아 크게 실효성은 없었다)

간단한 UI 구현하기

첫번째로 위와 같이 구현할 수 있었다.
이전에 사용했던 엑셀 시트에서 데이터를 추출하여 First Area , Second Area 에 학생들을 순서대로 넣었다.

history_df = pd.read_excel("student_data.xlsx", sheet_name="짝꿍 히스토리")
last_shuffle_number = history_df.iloc[:, 0].max()
last_shuffle_df = history_df[history_df.iloc[:, 0] == last_shuffle_number]
names = last_shuffle_df.iloc[:, 1:].values.flatten().tolist()


# 메인 컬럼을 두 개로 나눕니다: 첫 번째 영역과 두 번째 영역
area1, area2 = st.columns(2)

# 첫 번째 영역에 대한 카드 배치
with area1:
    st.write("First Area")
    for i in range(0, 10, 2):  # 첫 10명 중 2명씩 그룹화
        col1, col2 = st.columns(2)  # 2열 생성
        with col1:
            st.markdown(generate_card(names[i]), unsafe_allow_html=True)
        with col2:
            st.markdown(generate_card(names[i+1]), unsafe_allow_html=True)

# 두 번째 영역에 대한 카드 배치
with area2:
    st.write("Second Area")
    for i in range(10, 20, 2):  # 나머지 10명 중 2명씩 그룹화
        col1, col2 = st.columns(2)  # 2열 생성
        with col1:
            st.markdown(generate_card(names[i]), unsafe_allow_html=True)
        with col2:
            st.markdown(generate_card(names[i+1]), unsafe_allow_html=True)

그리고 streamlit에서 원하는 컴포넌트가 없다면 이렇게 html로 간단한 스타일링 한 컴포넌트를 직접 삽입이 가능했다.

# 카드 스타일과 HTML 구조를 정의하는 함수
def generate_card(name):
    card_html = f"""
    <div style="
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        margin: 10px;
        text-align: center;
        background-color: white;
        padding: 20px;
        ">
        <h4 style="color: black;"><b>{name}</b></h4> 
    </div>
    """
    return card_html