인터셉트 라우팅 적용 후 page.tsx 파일명을 변경 했을 때, 404 에러 발생

안녕하세요. 제로초 강사님.

수업 그대로 따라가고 있었는데 궁금한 점이 생겨서 질문 드립니다.

영상과 동일하게 따라하고 있었고, 질문이 있는 파일 경로는 다음과 같습니다.
src\app\(beforeLogin)\@modal\(.)i\flow\login\page.tsx

이 때,
파일명을 page.tsx --> qwer.tsx로 변경하면 404 에러를 띄웁니다.

혹시나 해서,

src\app\(beforeLogin)\i\flow\login\page.tsx

의 파일 또한 qwer.tsx로 바뀐 뒤 해당 경로로 들어가려고 하면 똑같이 404 에러를 띄웁니다.

src\app\(beforeLogin)\page.tsx 파일의

import Image from "next/image";
import styles from '@/app/page.module.css'
import Link from "next/link";
import zlogo from '../../../public/zlogo.png'


export default function Home() {
  return (
    <>
      <div className={styles.left}>
        <Image src={zlogo} alt="logo"/>
      </div>
      <div className={styles.right}>
        <h1> 지금 일어나고 있는 일 </h1>
        <h2> 지금 가입하세요 </h2>
        <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기</Link>
        <h3> 이미 트위터에 가입하셨나요? </h3>
        <Link href="/i/flow/login" className={styles.login}> 로그인 </Link>
      </div>
    </>
  );
}

에서

<Link href="/i/flow/login" className={styles.login}> 로그인 </Link>

컴포넌트를 클릭시 제가 원하는 해당 경로의 특정파일명과 매핑할 수 있는 방법이 있나요??

아니면 하나의 폴더에는 하나의 page.tsx만 존재해야하고, 그 파일 명은 page.tsx가 되야하는 규칙인건가요??