Skip to content

[REFACTOR] 컴포넌트 구조 정리 #221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shooukie merged 10 commits into from
Mar 24, 2026
Merged

[REFACTOR] 컴포넌트 구조 정리 #221

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
104ac10
[REFACTOR] 공용 컴포넌트 푸터를 직접 작성으로 변경
shooukie Mar 3, 2026
4033fef
[REFACTOR] 기존의 TodayMeal, WeekMeal 컴포넌트를 meal-plan-page파일에 추가
shooukie Mar 4, 2026
bc0e509
[REFACTOR] 닫는 기능 함수이름을 handleOpen에서 hanldeClose로 변경
shooukie Mar 4, 2026
6dd4950
[REFACTOR] 기존의 ReviewModal 컴포넌트를 meal-plan-page파일에 추가
shooukie Mar 4, 2026
7956197
[REFACTOR] [REFACTOR] 기존의 ChooseWeek 컴포넌트를 meal-plan-create-page파일에 추가
shooukie Mar 5, 2026
d20ed5d
[REFACTOR] 기존의 memberMealPlanView 컴포넌트를 meal-plan-create-page파일에 추가
shooukie Mar 5, 2026
de917f5
[REMOVE] ListHeader 컴포넌트 제거
shooukie Mar 5, 2026
a2a7cb5
[REFACTOR] 기존의 MealPlanResult 컴포넌트를 meal-plan-create-page파일에 추가
shooukie Mar 5, 2026
62662ec
[REFACTOR] 기존의 bottomsheet 컴포넌트를 meal-plan-edit-page파일에 추가
shooukie Mar 5, 2026
27af3e6
[RENAME] 기존 component 폴더 내 meal-plan 폴더 안 파일을 chip 폴더로 분리
shooukie Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 0 additions & 52 deletions src/components/common/Footer.tsx
View file
Open in desktop

This file was deleted.

65 changes: 0 additions & 65 deletions src/components/meal-plan/TodayMeal.tsx
View file
Open in desktop

This file was deleted.

118 changes: 0 additions & 118 deletions src/components/meal-plan/WeekMeal.tsx
View file
Open in desktop

This file was deleted.

52 changes: 49 additions & 3 deletions src/layouts/mobile-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,64 @@
import { Outlet, useLocation } from "react-router-dom";
import Footer from "../components/common/Footer";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import Background from "../assets/icons/footer-background.svg";
import Home from "../assets/icons/home.svg";
import Note from "../assets/icons/note-edit.svg";
import UpButton from "../components/common/UpButton";
import CalendarIcon from "../components/common/icon/Calendar";

export default function MobileLayout() {
const location = useLocation();
const footerPaths = ["/", "/meal-plan"];

const showFooter = footerPaths.includes(location.pathname);
Comment on lines 10 to 12

@coderabbitai coderabbitai Bot Mar 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

상수 네이밍을 가이드에 맞게 UPPER_SNAKE_CASE로 맞춰주세요.

footerPaths는 상수 성격이므로 FOOTER_PATHS로 변경하는 게 규칙에 맞고, 컴포넌트 바깥으로 올리면 불필요한 재생성도 줄일 수 있습니다.

♻️ Proposed refactor 
+const FOOTER_PATHS = ["/", "/meal-plan"];
+
 export default function MobileLayout() {
   const location = useLocation();
-  const footerPaths = ["/", "/meal-plan"];
-
-  const showFooter = footerPaths.includes(location.pathname);
+  const showFooter = FOOTER_PATHS.includes(location.pathname);

As per coding guidelines, Constants must be UPPER_SNAKE_CASE.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/layouts/mobile-layout.tsx` around lines 10 - 12, Rename the constant
footerPaths to FOOTER_PATHS and move its declaration out of the component scope
to avoid repeated creation; update any usages (e.g., the showFooter computation
that uses footerPaths.includes(location.pathname)) to reference FOOTER_PATHS
instead, ensuring the constant follows UPPER_SNAKE_CASE and is declared at
module level.


const navigate = useNavigate();

return (
<div className="flex min-h-[100dvh] justify-center bg-gray-50">
<div className="relative w-full max-w-[400px] bg-white shadow-md">
<Outlet />
{showFooter && <Footer />}
{showFooter && (
<div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[400px] text-[10px] font-medium z-10 text-center">
<div className="relative">
<img src={Background} className="w-full" alt="푸터 배경" />

@coderabbitai coderabbitai Bot Mar 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

장식용 이미지는 스크린리더에서 제외해주세요.

Line 23의 배경 이미지는 정보 전달용이 아니므로 alt=""와 aria-hidden="true"가 적절합니다.

♿ Proposed fix 
-              <img src={Background} className="w-full" alt="푸터 배경" />
+              <img src={Background} className="w-full" alt="" aria-hidden="true" />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<img src={Background} className="w-full" alt="푸터 배경" />
<img src={Background} className="w-full" alt="" aria-hidden="true" />
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/layouts/mobile-layout.tsx` at line 23, The background <img> using the
Background asset in the mobile layout is decorative and should be hidden from
assistive tech; update the <img> element that renders Background (in
src/layouts/mobile-layout.tsx) to include alt="" and aria-hidden="true" so
screen readers ignore it (locate the img that currently has src={Background} and
replace its attributes accordingly).


<div className="absolute bottom-0 w-full aspect-[400/92] flex justify-between px-6">
<div className="flex justify-center w-19 pt-2">
<button
className="flex flex-col cursor-pointer gap-2"
onClick={() => navigate("/")}
>
Comment on lines +27 to +30

@coderabbitai coderabbitai Bot Mar 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

button 기본 submit 동작을 명시적으로 차단해주세요.

Line 27, Line 37, Line 47의 버튼 모두 type이 없어, 폼 컨텍스트에서 의도치 않은 submit이 발생할 수 있습니다(정적 분석 에러와 동일).

🔧 Proposed fix 
                   <button
+                    type="button"
                     className="flex flex-col cursor-pointer gap-2"
                     onClick={() => navigate("/")}
                   >
@@
                   <button
+                    type="button"
                     className="flex flex-col items-center cursor-pointer gap-2"
                     onClick={() => navigate("/meal-plan")}
                   >
@@
               <button
+                type="button"
                 className="
             absolute left-1/2 -translate-x-1/2 bottom-[clamp(32px,calc(56/400*100vw),56px)]
             flex flex-col justify-center items-center gap-1

Also applies to: 37-40, 47-55

🧰 Tools
🪛 Biome (2.4.4)

[error] 27-30: Provide an explicit type prop for the button element.

(lint/a11y/useButtonType)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/layouts/mobile-layout.tsx` around lines 27 - 30, The three JSX <button>
elements in mobile-layout.tsx (the one with onClick={() => navigate("/")} and
the other two buttons around lines referenced) lack an explicit type and can
unintentionally submit surrounding forms; update each button element to include
type="button" to prevent default form submit behavior while preserving their
onClick handlers.

<img src={Home} className="size-5" alt="홈 아이콘" />
<p>홈</p>
</button>
</div>

<div className="flex flex-col items-center w-19 pt-2">
<button
className="flex flex-col items-center cursor-pointer gap-2"
onClick={() => navigate("/meal-plan")}
>
<CalendarIcon size={20} />
<p>식단표</p>
</button>
</div>
</div>

<button
className="
absolute left-1/2 -translate-x-1/2 bottom-[clamp(32px,calc(56/400*100vw),56px)]
flex flex-col justify-center items-center gap-1
w-[clamp(40px,calc(68/400*100vw),56px)]
h-[clamp(40px,calc(68/400*100vw),56px)]
rounded-full bg-primary-700 cursor-pointer"
onClick={() => navigate("/meal-plan/create")}
>
<img src={Note} className="size-5" alt="식단짜기 아이콘" />
<p className="text-white">식단 짜기</p>
</button>
</div>
</div>
)}
<UpButton />
</div>
</div>
Expand Down
Loading