광고 수익을 창출할 웹사이트 만들어보기 2-10 (Frontend 꾸미기~! -완-)

좋다. 일단 내 페이지를 한번 다시 봐보자.

 

위치가 별로다. 

그리고 나는 영어분노증(나만 가지고있음)이 있어서 한글로 싹다 변경하고 위치조정까지 해보겠다.

---

 

좋아 한글 밖에 없다 한글사랑.

    return (
        <div className="app-container">
            <h1 className="title">만능 그림봇</h1>
            <div className="input-container">
                <input
                    type="text"
                    placeholder="아무 말이나 넣어보세요."
                    value={prompt}
                    onChange={(e) => setPrompt(e.target.value)}
                    className="input-box"
                />
                <button onClick={handleGenerate} className="generate-button" disabled={loading}> 
                    {loading ? "생성 중..." : "생성!"}
                </button>
            </div>

            {/* 로딩바 및 대기 안내 */}
            {loading && (
               <div className="loading-container">
                 <div className="spinner"></div> {/* 로딩 스피너만 표시 */}
              </div>
            )}
            {imageUrl && (
                <div className="image-container">
                    <h3>이미지가 생성되었습니다. 카카오톡으로 공유해서 친구들에게 전달하세요.</h3>
                    <img src={imageUrl} alt="Generated" className="generated-image" />
                    <button onClick={shareToKakao} className="kakao-button">
                        카카오톡 공유하기
                    </button>
                </div>
            )}
        </div>
    );

이게 변경한 소스긴 한데 사실 소스랄 것도 없다. 

그냥 눈치껏 아 여기 위친가 파악하고 바꾸면된다.

---

좋다. 이제 공유버튼의 위치를 이미지 아래로 내리고싶다.

간단하다.

 

버튼을 감싸는 <div className="button-container">를 추가하면 된다.

버튼을 이미지 아래로 강제로 배치하는 데 도움을 준다.

<div className="button-container">
    <button onClick={shareToKakao} className="kakao-button">
        카카오톡 공유하기
    </button>
</div>

 

장조림 사냥꾼

짜잔~ 아래로 잘 이동했다.

 

GPT를 갈궈서 이미지를 안쓰고 카카오톡 공유하기 비슷한 느낌을 내도록 해봤다.

/* 카카오톡 버튼 스타일 */
.kakao-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(90deg, #ffe812 0%, #fdd835 100%);
    color: #3a1d1d;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

/* 카카오톡 버튼 */
.kakao-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    background: #ffe812;
    color: #3a1d1d;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 20px; /* 이미지와 버튼 사이 간격 */
}

/* 카카오톡 말풍선 아이콘 */
.kakao-icon {
    position: relative;
    width: 30px; /* 가로 길이를 늘려 타원형으로 만듦 */
    height: 20px; /* 세로 길이는 원래와 비슷하게 유지 */
    background-color: #3a1d1d; /* 말풍선 색상 */
    border-radius: 50%; /* 타원형으로 만들기 */
    margin-right: 10px;
}

/* 말풍선 꼬리 */
.kakao-icon::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 20%; /* 꼬리 위치 조정 */
    width: 8px;
    height: 8px;
    background-color: #3a1d1d;
    transform: rotate(45deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* 호버 효과 */
.kakao-button:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}

 

CSS는 너무 어렵다.................

햄버거자장면

 

이정도면 완벽한 것 같다. 이제 프로그램을 다 만들었으니 뭘해볼까?

---

다음편에 깨속....