크래프톤 정글 week13, day96 - 잔디심기, 글 작성 페이지 UI 구현

백준

1271

파이썬

브론즈5

엄청난 부자2

n, m = map(int, input().split())

print(n//m)
print(n%m)

---

post 페이지에서 네비게이션 바가 너무 가독성 떨어지고 밋밋하다고 해서 조금 수정했다.

import "../../style/post/postSidebar.scss"
import write from "../../img/write.png"
import setting from "../../img/gear.png"
import cube from "../../img/cube.png"
import logout from "../../img/logout.png"
import downArrow from "../../img/downArrow.png"
import upArrow from "../../img/upArrow.png"
import axios from "axios";
import { useNavigate } from 'react-router-dom';

const PostSidebar = () => {
    const navigate = useNavigate();

    const logoutfunc = async () => {
        try {
            const response = await axios.post('http://localhost:5000/api/users/logout');
            if (response.data.message === '로그아웃 성공') {
                // 클라이언트 측 인증 정보 삭제
                localStorage.removeItem('userToken');
                sessionStorage.clear();
    
                // 사용자를 로그인 페이지로 리디렉션
                window.location.href = '/login';
            }
        } catch (error) {
            console.error('로그아웃 에러:', error);
        }
    };
    
    

    return (
        <>
            <div className="postSidebar-box">
                <div className="postSidebar-inner">
                    <p className="postSidebar-inner-nickname">Navigator</p>
                    <div className="postSidebar-icon">
                        <a href="/write">
                            <img src={write} alt="" />
                            <p>write</p>
                        </a>
                        <a href="#">
                            <img src={setting} alt="" />
                            <p>settings</p>
                        </a>
                    </div>
                    <div className="postSidebar-icon">
                        <a href="#" onClick={logoutfunc}>
                            <img src={logout} alt="" />
                            <p>logout</p>
                        </a>
                        <a href="#">
                            <img src={cube} alt="" />
                            <p>cube</p>
                        </a>
                    </div>
                    <div className="postSidebar-arrow">
                        <img src={upArrow} alt="" />
                        <img src={downArrow} alt="" />
                    </div>
                </div>
            </div>
        </>
    )
}
export default PostSidebar;

아직 백에 연결되는 기능을 구현 못해서 UI만 제작된 상태이고 추후에 작성할 예정

 

 

그리고 게시판 페이지가 어느정도 만들어져서 백엔드 작업을 위해 글 작성 페이지를 만들었다.

네비게이션에 있는 write 버튼을 클릭 시 작성 페이지로 이동된다.

티스토리의 UI를 참고하여 만들었고 페이지를 초과하는 텍스트를 입력 시 textarea 태그가 계속 늘어나게 해놨다.

원래는 페이지를 고정으로 하고 textarea 스크롤을 하려고했는데 이왕 티스토리 참조한거 스크롤 부분도 참조하기로 했다.

import { useRef } from "react"
import "../../style/write/writeContent.scss"

interface WriteContentProps {
    imagePreview: string | null;
}

const WriteContent: React.FC<WriteContentProps> = ({ imagePreview }) => {
    const textareaRef = useRef<HTMLTextAreaElement>(null);

    const handleResizeHeight = () => {
        if (textareaRef.current) {
            textareaRef.current.style.height = 'auto';
            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
        }
    };

    return (
        <>
            <div className="write-content-box">
                <textarea className="write-content-input"
                    ref={textareaRef}
                    rows={11}
                    placeholder="내용을 입력하세요."
                    onChange={handleResizeHeight}
                >
                {imagePreview && <img src={imagePreview} alt="Preview" />}
                </textarea>
            </div>
        </>
    )
}
export default WriteContent

 

이 후 글 쓰기 완료버튼과 이미지 파일 추가 버튼도 네비게이션에 만들고 게시판과 동일한 css를 사용했다.

그런데 이미지를 첨부할 시 작성하고 있던 게시글에 추가가 되는 부분은 어떻게 하는지 아직 잘 몰라 현재 헤매고 있다.

이 부분은 다음 날에 다른 기능 구현하며 생각 좀 해봐야겠다.