Refactor/til prompt (#607)

* docs: 불필요한 prompt 정리

* refactor: 레이아웃 컴포넌트를 main.tsx에서 추출 (why: 다른 라우트 컴포넌트들의 분리 기준과 일관성을 맞춰주기 위해)

* refactor: TimelinePage 컴포넌트 body에 있던 로직들을 최대한 응집해주기 (인라인, 사용처와 최대한 가깝게 이동)

* refactor: TimelinePage 리팩토링 마무리
- PostInput 관련 로직 응집
- UserAvatar 컴포넌트 분리 + useAuth 응집
- UnauthenticatedState -> GoToLogin으로 이름 변경

* refactor: sortOption을 url query params로 분리

* refactor: SprintChallenge 컴포넌트 내부 구현 단순화

* chore: 리팩토링 할만한 포인트 메모

* refactor: PostInput을 PostWriteSection으로 리팩토링 (div -> form)

---------

Co-authored-by: jongtaek-oh <[email protected]>

Author: milooy

fundamentals/today-i-learned/.claude/development.md

@@ -14,27 +14,6 @@
 - 의존성 해결은 워크스페이스 루트에서 관리됨
 - 개별 패키지 작업 시에도 상위 yarn 설정을 참조
 
-## TDD 및 커밋 규칙
-
-### TDD 주기 (필수)
-
-1. **Red**: 실패하는 테스트 작성
-2. **Green**: 테스트를 통과하는 최소한의 코드 구현
-3. **Refactor**: 테스트가 통과하는 상태에서 코드 개선
-
-### 구조적/행위적 변경 분리 (필수)
-
-- **구조적 변경**: 이름 변경, 메서드 추출, 파일 이동 등
-- **행위적 변경**: 실제 기능 추가/수정
-- **절대 같은 커밋에 섞지 않음**
-
-### 커밋 규칙
-
-- 모든 테스트가 통과할 때만 커밋
-- 컴파일러/린터 경고 해결 후 커밋
-- `--no-verify` 사용 금지
-- 구조적 변경을 먼저, 행위적 변경을 나중에
-
 ## Import 규칙 (필수)
 
 ### 절대 경로 필수
@@ -149,12 +128,6 @@ import { CreatePost } from "./components/CreatePost";
 // ❌ 금지: 코드 설명
 // 사용자 정보를 가져오는 함수
 function getUserInfo() {}
-
-// ❌ 금지: TODO 주석
-// TODO: 나중에 리팩토링
-
-// ❌ 금지: 인라인 설명
-const userId = user.id; // 사용자 ID
 ```
 
 **올바른 예시:**
@@ -173,6 +146,14 @@ function calculateEditDistance() {}
 
 #### 관심사 분리 (Separation of Concerns)
 
+작성되는 코드는 단일 책임 원칙에 따라 관심사 분리가 되어야 한다
+
+- 각 함수/컴포넌트는 하나의 명확한 책임만 가짐
+- 기능별로 작은 단위로 분해
+- 재사용 가능한 단위로 구성
+
+예시)
+
 - **비즈니스 로직**: 커스텀 훅으로 분리
 - **UI 로직**: 순수 컴포넌트로 분리
 - **스타일링**: 래퍼 컴포넌트로 격리
@@ -194,15 +175,3 @@ function PureComponent({ data, handlers }) {
   // 순수 UI 렌더링만
 }
 ```
-
-#### 단일 책임 원칙
-
-- 각 함수/컴포넌트는 하나의 명확한 책임만 가짐
-- 기능별로 작은 단위로 분해
-- 재사용 가능한 단위로 구성
-
-### 테스트 코드 가독성
-
-- 테스트 이름: 영어로 행동 중심 작성
-- `describe`/`it`에서 무엇을 테스트하는지 명확히 표현
-- Given-When-Then 구조 사용

fundamentals/today-i-learned/src/api/hooks/useDiscussions.ts

@@ -23,6 +23,7 @@ import {
   type DiscussionsApiParams
 } from "@/api/remote/discussions";
 
+// NOTE: 만약 쿼리 옵션으로 분리된다면 각각의 쿼리 옵션에서 인라인하기 (중앙 집권형 쿼리 키 x)
 export const DISCUSSIONS_QUERY_KEYS = {
   all: ["discussions"] as const,
   lists: () => [...DISCUSSIONS_QUERY_KEYS.all, "list"] as const,
@@ -210,7 +211,10 @@ export function useCreateDiscussion() {
   });
 }
 
+// TODO: queryOptions로 분리 + 사용처에서 useQuery를 드러낼 수 있으면 좋겠다
+// NOTE: 다른 remote fetching 훅들도 useQuery + queryOptions로 만들 수 있기를 희망
 export function useMyContributions({
+  // FIXME: 외부에서 주입하는 의존성 어떻게 처리할지 고민해보기
   owner = ENV_CONFIG.GITHUB_OWNER,
   repo = ENV_CONFIG.GITHUB_REPO,
   enabled = true
@@ -230,6 +234,7 @@ export function useMyContributions({
         authorLogin: user.login
       });
     },
+    // NOTE: (잡초?) enabled 너 꼭 필요해?
     enabled: enabled && !!user?.accessToken && !!user?.login,
     staleTime: 1000 * 60 * 10, // 10분
     gcTime: 1000 * 60 * 30, // 30분

fundamentals/today-i-learned/src/components/features/auth/UnauthenticatedState.tsx

@@ -2,7 +2,7 @@ import { useAuth } from "@/contexts/AuthContext";
 import { Button } from "@/components/shared/ui/Button";
 import { css } from "@styled-system/css";
 
-export function UnauthenticatedState() {
+export function GoToLogin() {
   const { login } = useAuth();
 
   return (

fundamentals/today-i-learned/src/components/features/sprint/SprintGrid.tsx

@@ -1,13 +1,25 @@
 import { css } from "@styled-system/css";
+import { Outlet, ScrollRestoration } from "react-router-dom";
 import { LayoutNavigation } from "./LayoutNavigation";
 
-export const Layout: React.FC<{ children: React.ReactNode }> = ({
-  children
-}) => {
+export const RootLayout = () => {
   return (
     <div className={layoutContainer}>
       <LayoutNavigation />
-      <main className={mainContent}>{children}</main>
+      <main className={mainContent}>
+        <ScrollRestoration
+          getKey={(location) => {
+            if (
+              location.pathname === "/" ||
+              location.pathname === "/today-i-learned/"
+            ) {
+              return location.key;
+            }
+            return null;
+          }}
+        />
+        <Outlet />
+      </main>
     </div>
   );
 };

fundamentals/today-i-learned/src/components/features/sprint/SprintHeader.tsx

@@ -24,6 +24,8 @@ interface AuthProviderProps {
   children: ReactNode;
 }
 
+// FIXME: 리액트 쿼리로 바꿔요 -> persist를 쓸지 고려해보기
+// FIXME: 로컬 스토리지 의존성 제거하기 -> 만약 필요할 경우 캐시에 의존하도록 하기
 export function AuthProvider({ children }: AuthProviderProps) {
   const [user, setUser] = useState<User | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -40,11 +42,6 @@ export function AuthProvider({ children }: AuthProviderProps) {
   };
 
   useEffect(() => {
-    if (typeof window === "undefined") {
-      setIsLoading(false);
-      return;
-    }
-
     const savedUser = localStorage.getItem("github_user");
     if (savedUser) {
       try {

fundamentals/today-i-learned/src/components/shared/layout/Layout.tsx renamed to fundamentals/today-i-learned/src/components/shared/layout/RootLayout.tsx

@@ -1,15 +1,10 @@
 import { OverlayProvider } from "overlay-kit";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import {
-  createBrowserRouter,
-  RouterProvider,
-  Outlet,
-  ScrollRestoration
-} from "react-router-dom";
+import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+
 import SearchPage from "./pages/search/SearchPage.tsx";
 import { ErrorBoundary } from "./components/shared/ErrorBoundary.tsx";
-import { Layout } from "./components/shared/layout/Layout";
 import { AuthProvider } from "./contexts/AuthContext.tsx";
 import { ThemeProvider } from "./contexts/ThemeContext.tsx";
 import "./index.css";
@@ -18,25 +13,7 @@ import { MyPage } from "./pages/profile/MyPage";
 import { TimelinePage } from "./pages/timeline/TimelinePage";
 import { QueryProvider } from "./providers/QueryProvider.tsx";
 import { ToastProvider } from "./contexts/ToastContext";
-
-const RootLayout = () => {
-  return (
-    <Layout>
-      <ScrollRestoration
-        getKey={(location) => {
-          if (
-            location.pathname === "/" ||
-            location.pathname === "/today-i-learned/"
-          ) {
-            return location.key;
-          }
-          return null;
-        }}
-      />
-      <Outlet />
-    </Layout>
-  );
-};
+import { RootLayout } from "./components/shared/layout/RootLayout.tsx";
 
 const router = createBrowserRouter(
   [