refactor: fsd 아키텍처를 위해 section 폴더를 제거한다

app/(site)/@modal/(.)i/image/[...info]/page.tsx

@@ -1,4 +1,4 @@
-import { MovieImageModal } from '@/widgets/modal/section'
+import { MovieImageModal } from '@/widgets/modal'
 
 type Props = {
   params: { info: [movieId: string, 'poster' | 'backdrop', imageUrl: string] }

app/(site)/@modal/(.)i/info/[movieId]/page.tsx

@@ -1,4 +1,4 @@
-import { MovieDetailModal } from '@/widgets/modal/section'
+import { MovieDetailModal } from '@/widgets/modal'
 
 type Props = {
   params: {

app/(site)/i/image/[...info]/page.tsx

@@ -1,4 +1,4 @@
-import { MovieImageModal } from '@/widgets/modal/section'
+import { MovieImageModal } from '@/widgets/modal'
 
 type Props = {
   params: { info: [string, 'backdrop' | 'poster', string] }

app/(site)/i/info/[movieId]/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { MovieDetailModal } from '@/widgets/modal/section'
+import { MovieDetailModal } from '@/widgets/modal'
 
 type Props = {
   params: {

app/(site)/layout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-import { Footer, Header } from '@/widgets/layout/section'
+import { Outlet } from '@/widgets/layout'
 
 import styles from './layout.module.scss'
 
@@ -13,9 +13,7 @@ export default function Layout({ children, modal }: Props) {
   return (
     <main className={styles.container}>
       {modal}
-      <Header />
-      {children}
-      <Footer />
+      <Outlet>{children}</Outlet>
     </main>
   )
 }

src/widgets/detail/ui/DetailMovieContentContainer.tsx → src/entities/content/ui/DetailMovieContentContainer.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { generateContents } from '@/entities/mock/generate'
-import { OneMovieContent } from '@/entities/movie/ui'
 import { DetailContentForm } from '@/features/detail/DetailContentForm'
+import { OneMovieContent } from '@/widgets/content'
 
 import styles from './detail-movie-content-container.module.scss'
 

src/widgets/detail/ui/index.ts → src/entities/content/ui/index.ts

@@ -1,2 +1 @@
 export { DetailMovieContentContainer } from './DetailMovieContentContainer'
-export { DetailMovieImageContainer } from './DetailMovieImageContainer'

src/entities/mock/data/movie-detail.mock.ts

@@ -42,13 +42,13 @@ export const movieDetailMock = {
   production_companies: [
     {
       id: 521,
-      logo_path: '/kP7t6RwGz2AvvTkvnI1uteEwHet.png',
+      logo_path: '/kP7t6RwGz2AvvTkvnI1uteEwHet.jpg',
       name: 'DreamWorks Animation',
       origin_country: 'US',
     },
     {
       id: 33,
-      logo_path: '/8lvHyhjr8oUKOOy2dKXoALWKdp0.png',
+      logo_path: '/8lvHyhjr8oUKOOy2dKXoALWKdp0.jpg',
       name: 'Universal Pictures',
       origin_country: 'US',
     },

src/widgets/detail/section/TopSection.tsx → src/entities/movie/ui/DetailMovieBanner.tsx

@@ -10,13 +10,13 @@ import { IMAGE_SIZE } from '@/shared/constants'
 import { MOVIE_QUERY_KEY } from '@/shared/constants/QUERY_KEY'
 import { quando } from '@/shared/font/quando'
 
-import styles from './top-section.module.scss'
+import styles from './detail-movie-banner.module.scss'
 
 type Props = {
   movieId: string
 }
 
-export function DetailTopSection({ movieId }: Readonly<Props>) {
+export function DetailMovieBanner({ movieId }: Readonly<Props>) {
   const queryKey = MOVIE_QUERY_KEY.detail(movieId) as [string, string, string]
   const { data: result } = useSuspenseQuery({
     queryKey: queryKey,

src/widgets/detail/ui/DetailMovieImageContainer.tsx → src/entities/movie/ui/DetailMovieImageContainer.tsx

@@ -3,9 +3,9 @@
 import { useSuspenseQuery } from '@tanstack/react-query'
 
 import { getImages } from '@/entities/movie/api'
-import { OneMovieImage } from '@/entities/movie/ui'
 import { MOVIE_QUERY_KEY } from '@/shared/constants'
 import { useDragHandler } from '@/shared/hook'
+import { OneMovieImage } from '@/widgets/movie'
 
 import styles from './detail-movie-image.container.module.scss'
 

src/widgets/detail/section/MiddleSection.tsx → src/entities/movie/ui/DetailMovieIntro.tsx

@@ -11,13 +11,13 @@ import { poppins } from '@/shared/font'
 import { Chip } from '@/shared/ui'
 import { getDecimal, getHour } from '@/shared/util'
 
-import styles from './middle-section.module.scss'
+import styles from './detail-movie-intro-section.module.scss'
 
 type Props = {
   movieId: string
 }
 
-export function DetailMiddleSection({ movieId }: Readonly<Props>) {
+export function DetailMovieIntro({ movieId }: Readonly<Props>) {
   const queryKey = MOVIE_QUERY_KEY.detail(movieId) as [string, string, string]
   const { data: result } = useSuspenseQuery({
     queryKey,

src/widgets/main/ui/MainMovieList.tsx → src/entities/movie/ui/MainMovieList.tsx

@@ -2,8 +2,8 @@ import { useSuspenseQuery } from '@tanstack/react-query'
 import Link from 'next/link'
 
 import { MoviesResponse } from '@/entities/movie/model'
-import { OneMovieCard } from '@/entities/movie/ui'
 import { useDragHandler } from '@/shared/hook'
+import { OneMovieCard } from '@/widgets/movie'
 
 import styles from './main-movie-list.module.scss'
 

src/widgets/list/ui/MovieInfinityList.tsx → src/entities/movie/ui/MovieInfinityList.tsx

@@ -7,7 +7,7 @@ import { useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import { MovieRequest, MoviesResponse } from '@/entities/movie/model'
-import { OneMovieCard } from '@/entities/movie/ui/OneMovieCard'
+import { OneMovieCard } from '@/widgets/movie'
 
 import styles from './movie-infinity-list.module.scss'
 

src/widgets/search/section/SearchBottomSection.tsx → src/entities/movie/ui/SearchInfinityList.tsx

@@ -6,16 +6,16 @@ import { useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import { getMovieSearch } from '@/entities/movie/api'
-import { OneMovieSearchCard } from '@/entities/movie/ui/OneMovieSearchCard'
 import { MOVIE_QUERY_KEY } from '@/shared/constants'
+import { OneMovieSearchCard } from '@/widgets/movie'
 
-import styles from './search-bottom-section.module.scss'
+import styles from './search-infinity-list.module.scss'
 
 type Props = {
   keyword: string
 }
 
-export function SearchBottomSection({ keyword }: Readonly<Props>) {
+export function SearchInfinityList({ keyword }: Readonly<Props>) {
   const { ref, inView } = useInView()
   const queryKey = MOVIE_QUERY_KEY.search(keyword) as [string, string, keyword: string]
   const { data, fetchNextPage, isFetching, hasNextPage } = useInfiniteQuery({

src/entities/movie/ui/index.ts

@@ -1,4 +1,8 @@
-export { OneMovieCard } from './OneMovieCard'
-export { OneMovieContent } from './OneMovieContent'
-export { OneMovieImage } from './OneMovieImage'
-export { OneMovieSearchCard } from './OneMovieSearchCard'
+export { DetailMovieBanner } from './DetailMovieBanner'
+export { DetailMovieImageContainer } from './DetailMovieImageContainer'
+export { DetailMovieIntro } from './DetailMovieIntro'
+export { MainMovieBanner } from './MainMovieBanner'
+export { MainMovieList } from './MainMovieList'
+export { MovieDetailContent } from './MovieDetailContent'
+export { MovieInfinityList } from './MovieInfinityList'
+export { SearchInfinityList } from './SearchInfinityList'

src/features/profile/ui/ProfileImageChangeButton.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { Edit } from '@mui/icons-material'
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+
+import { useImageOnChange } from '@/features/profile/hooks'
+import { ProfileImage } from '@/shared/ui'
+
+import styles from './profile-image-changeButton.module.scss'
+
+type Props = {
+  profileUrl: string
+  nickname: string
+}
+
+export function ProfileImageChangeButton({ profileUrl, nickname }: Props) {
+  const { onChange } = useImageOnChange()
+
+  return (
+    <div className={styles.imageBox}>
+      <ProfileImage src={profileUrl} alt={nickname + '프로필 이미지'} sx={{ width: 200, height: 200 }} />
+      <motion.label
+        animate={{ background: '#fffffe' }}
+        whileHover={{ background: '#142132' }}
+        className={classNames(styles.button, styles.container)}
+        htmlFor="file"
+      >
+        <Edit />
+        <input id="file" onChange={onChange} className={styles.inputFile} type={'file'} />
+      </motion.label>
+    </div>
+  )
+}

src/features/profile/ui/index.ts

@@ -0,0 +1 @@
+export { ProfileImageChangeButton } from './ProfileImageChangeButton'

src/widgets/landing/constants/subtitle.ts → src/shared/constants/LANDING_TITLE.ts

@@ -1,4 +1,4 @@
-export const subTitleList = [
+export const LANDING_TITLE = [
   '최신 영화 소식과 함께, 당신의 다음 영화 여행을 위한 시작점입니다.',
   '지금 어떤 영화가 뜨고 있는지 확인하고, 영화 팬들과 함께 소통하세요.',
   '영화의 감동을 함께 나누는 곳, 누구나 즐길 수 있는 영화 커뮤니티입니다.',

src/shared/constants/index.ts

@@ -1,4 +1,5 @@
 export { GENRES } from './GENRES'
 export { IMAGE_SIZE } from './IMAGE_SIZE'
+export { LANDING_TITLE } from './LANDING_TITLE'
 export { MOVIE_QUERY_KEY } from './QUERY_KEY'
 export { SITE_PATH } from './SITE_PATH'

src/shared/util/getImageWithDefault.ts

@@ -0,0 +1,5 @@
+export function getImageWithDefault(url: string | null | undefined) {
+  if (!url) return '/jpg/default-profile-image.jpg'
+
+  return url
+}

src/shared/util/index.ts

@@ -1,4 +1,5 @@
 export { getDecimal } from './get-decimal'
 export { getHour } from './get-hours'
 export { getScrollbarWidth } from './get-scroll-bar-width'
+export { getImageWithDefault } from './getImageWithDefault'
 export { timeAgo } from './time-age'

src/views/DetailPage.tsx

@@ -1,8 +1,9 @@
 import { Suspense } from 'react'
 
+import { DetailMovieContentContainer } from '@/entities/content/ui'
+import { DetailMovieBanner, DetailMovieImageContainer, DetailMovieIntro } from '@/entities/movie/ui'
 import { RQProvider } from '@/shared/ui'
-import { DetailBottomSection, DetailMiddleSection, DetailTopSection } from '@/widgets/detail/section'
-import { DetailPageSkeleton } from '@/widgets/detail/skeleton'
+import { DetailPageSkeleton } from '@/widgets/detail'
 
 type Props = {
   movieId: string
@@ -12,9 +13,10 @@ export function DetailPage({ movieId }: Props) {
   return (
     <RQProvider>
       <Suspense fallback={<DetailPageSkeleton />}>
-        <DetailTopSection movieId={movieId} />
-        <DetailMiddleSection movieId={movieId} />
-        <DetailBottomSection movieId={movieId} />
+        <DetailMovieBanner movieId={movieId} />
+        <DetailMovieIntro movieId={movieId} />
+        <DetailMovieImageContainer movieId={movieId} />
+        <DetailMovieContentContainer movieId={movieId} />
       </Suspense>
     </RQProvider>
   )

src/views/LandingPage.tsx

@@ -1,5 +1,4 @@
-import { LandingContents } from '@/widgets/landing/section'
-import { LandingBackGround } from '@/widgets/landing/ui'
+import { LandingBackGround, LandingContents } from '@/widgets/landing'
 
 export function LandingPage() {
   return (

src/views/MainPage.tsx

@@ -1,4 +1,4 @@
-import { MainBottomSection, MainTopSection } from '@/widgets/main/section'
+import { MainBottomSection, MainTopSection } from '@/widgets/main'
 
 export function MainPage() {
   return (

src/views/NotFoundPage.tsx

@@ -1,4 +1,4 @@
-import { NotFoundBottom, NotFoundTop } from '@/widgets/not-found/section'
+import { NotFoundBottom, NotFoundTop } from '@/widgets/not-found'
 
 export function NotFoundPage() {
   return (

src/views/SearchPage.tsx

@@ -1,8 +1,8 @@
 import { Suspense } from 'react'
 
+import { SearchInfinityList } from '@/entities/movie/ui'
 import { RQProvider } from '@/shared/ui'
-import { SearchBottomSection, SearchTopSection } from '@/widgets/search/section'
-import { SearchBottomSkeleton } from '@/widgets/search/skeleton'
+import { SearchBottomSkeleton, SearchTopSection } from '@/widgets/search'
 
 type Props = {
   keyword: string
@@ -14,7 +14,7 @@ export function SearchPage({ keyword }: Props) {
       <SearchTopSection keyword={keyword} />
       <RQProvider>
         <Suspense fallback={<SearchBottomSkeleton />}>
-          <SearchBottomSection keyword={keyword} />
+          <SearchInfinityList keyword={keyword} />
         </Suspense>
       </RQProvider>
     </div>

src/views/listPage.tsx

@@ -1,6 +1,5 @@
 import { MovieType } from '@/entities/movie/model/movie'
-import { InfinityListAdapter } from '@/widgets/list/section/InfinityListAdapter'
-import { InfinityListHeader } from '@/widgets/list/section/InfinityListHeader'
+import { InfinityListAdapter, InfinityListHeader } from '@/widgets/list'
 
 type Props = {
   type: MovieType

src/widgets/content/index.ts

@@ -0,0 +1 @@
+export { OneMovieContent } from './OneMovieContent'

src/widgets/detail/skeleton/DetailPageSkeleton.tsx → src/widgets/detail/DetailPageSkeleton.tsx

@@ -3,10 +3,10 @@
 import { Skeleton } from '@mui/material'
 import classNames from 'classnames'
 
+import top_styles from '@/entities/movie/ui/detail-movie-banner.module.scss'
+import middle_styles from '@/entities/movie/ui/detail-movie-intro-section.module.scss'
 import { poppins } from '@/shared/font'
 import { useBlockScroll } from '@/shared/hook/use-block-scroll'
-import middle_styles from '@/widgets/detail/section/middle-section.module.scss'
-import top_styles from '@/widgets/detail/section/top-section.module.scss'
 
 export function DetailPageSkeleton() {
   useBlockScroll()

src/widgets/landing/LandingContents.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import classNames from 'classnames'
+import { motion } from 'framer-motion'
+
+import { LANDING_TITLE } from '@/shared/constants'
+import { poppins } from '@/shared/font'
+import { HomeButton } from '@/shared/ui'
+import { SubTitle } from '@/widgets/landing/SubTitle'
+
+import styles from './landing-contents.module.scss'
+
+export function LandingContents() {
+  return (
+    <section className={styles.container}>
+      <div className={styles.box}>
+        <motion.div className={classNames(styles.title, poppins.className)}>Movie Connect</motion.div>
+        <SubTitle subTitleList={LANDING_TITLE} />
+        <HomeButton />
+      </div>
+    </section>
+  )
+}

src/widgets/landing/ui/index.ts → src/widgets/landing/index.ts

@@ -1,3 +1,3 @@
-export { GithubIcon } from './GithubIcon'
 export { LandingBackGround } from './LandingBackGround'
+export { LandingContents } from './LandingContents'
 export { SubTitle } from './SubTitle'