♻️ Refact: Frame 컴포넌트 Button 적용

[BaeZzi813]

📝 작업 개요 (필수)

Frame 컴포넌트에 신천님 작업하신 Button 적용하고 Link 설정

✨ 작업 내용 (필수)

• 기능 구현
• 버그 수정
• 스타일/UI 변경
• 리팩토링
• 최적화/성능개선
• 문서 업데이트
• 기타 변경사항

📸 스크린샷

🧐 해결해야 하는 문제

🤔 리뷰어 확인 필요 사항

import Frame from './frame';

const Test = () => {
  return (
    <>
      <Frame
        title='내 가게'
        content='내 가게를 소개하고 공고도 등록해 보세요.'
        buttonText='가게 등록하기'
        href='/'
      />
    </>
  );
};

export default Test;

• 테스트용 페이지 하나 만들어서 적용한 코드입니다.
• Frame 컴포넌트에 위와 같이 props 내려줘서 사용 가능합니다.

🔗 관련 이슈

🛠️ 후속 작업

✅ 체크리스트 (필수)

• 작업한 내용과 커밋 메시지 컨벤션을 통일했는지 확인
• 내가 작성한 코드를 테스트까지 완료했는지 잘 작동했는지 확인
• ESLint 검사 통과
• Prettier 포맷팅 적용
• TypeScript 에러 없음
• 빌드 에러 없음

[vercel]

@BaeZzi813 is attempting to deploy a commit to the projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thejulge	Ready	Preview	Comment	Oct 9, 2025 7:24am

[sohyun0]

고생하셨습니다 ! 코멘트 확인부탁드립니다

[sohyun0]

기존 프레임 테스트 해봤는데 1030px 일때 전체로 보여야 할것 같은데 작게 보이더라구요!

desktop:px-[237px] 이부분 여백이 아닌 컨테이너로 설정해야할것 같아보입니다

[BaeZzi813]

확인 감사합니다! div 태그로 전체 묶어서 max-w 넣어서 수정하였습니다!

[sohyun0]

max-w-5xl 면 1024px 인데 레이아웃 컨테이너는 1028px 이여서 혹시 container 컴포넌트를 사용하는건 어려울까요??
그리고 max-width 는 section 에 주어야 될것 같습니다! 프레임의 크기는 피그마기준 964px 로 나오는데 저렇게 작성되면 1024로 나올것으로 예상됩니다 :'(

또한 이렇게 section 바로 밑에 div 가 있으면 h1이랑 간격주려고 flex flex-col 한건데 의미가 사라질것 같습니다!

제안 : 기존에 작성된 컴포넌트를 활용하면 어떨까요?
태그도 줄일 수 있고 기존에 하려던 레이아웃도 동일하게 나오는것 같습니다

      <Container as='section' className='flex flex-col gap-4 py-10 tablet:py-[60px]'>
        <h1 className='text-heading-s font-bold tablet:text-heading-l'>{title}</h1>
      </Container>

밑에있는 프레임이 현재 container 컴포넌트 적용된 모습입니다!

[BaeZzi813]

CSS 아직 멀었네요..ㅠㅠ 말씀해주신 내용으로 수정했습니다! Frame 최대 964px 로 되었고, div 삭제하고 Container 로 적용했습니다!

[sohyun0]

확인했습니다 고생 많으셨습니다 :)