중간 배포 (#74)

* 🧹 chore: add tanstack router plugins

* ✨ feat(routes): integrate tanstack router

* ✨ feat(routes): add basic routes

profile, explore, login

* 🧹 chore(eslint): add ignore for shared/ui

* ✨ feat(components): add sidebar component

* 🧹 chore(asset): add instagram logo

* 💎 style(index): initialize style

* ✨ feat(route): add /me to route

* ✨ feat(provider): add sidebar provider

* ✨ feat(route): configure provider

* ✨ feat(components): add sidebar navigation item component

* ✨ feat(component): add sidebar component

* ✨ feat(routes): separate homepage component

* ✨ feat(components): add drawer component

* ✨ feat(components): add dialog component

* ✨ feat(components): add action, type to navItems

* ✨ feat(components): add app level modal, drawer

* ✨ feat(components): open drawer on search click, open modal on create click

* 로그인 페이지 UI 구현

* 비밀번호 찾기 화면 구현

* 계정 생성 UI 및 비밀번호 생성 로직 구현

* 로그인 메인화면 가입하기 버튼 버그 수정

* ✨ feat(components): add create post modal component

* package-lock.json 삭제

* ✨ feat(components): add sonner

* ✨ feat(provider): integrate toaster

* ✨ feat(components): add dropzone component

* ✨ feat(components): integrate drag and drop to createmodal

* ♻️ refactor(components): separate logic using custom hook

* ♻️ refactor(components): separate ui components

* ✨ feat(components): add post details pane

* ✨ feat(components): add double modal on exit

* 🧹 chore: add testing library

* 🧪 test(createmodal): add create post modal related tests

* ✨ feat(components): add profile header

* ✨ feat(api): initialize ky instance

* ✨ feat(components): add tabs

* ✨ feat(routes): separate app route layer

* ✨ feat(routes): update route tree

* ✨ feat(components): add fallback image

* ✨ feat(profile-posts): add grid ui

* ✨ feat(profilepage): add posts grid ui

* 🧹 chore(homepage): remove duplicate navigation shell

* ♻️ refactor(profilepage): add common style container component

* ✨ feat(profile): add profile page component

* ✨ feat(navigation): add useNavController hook

* 🧹 chore: rerun yarn install

* ✨ feat(msw): msw 기본 설정

* ✨ feat(components): add carousel

* ♻️ refactor(sidebar): collapse sidebar below xl

* ✨ feat(components): add stories field

* ✨ feat(stories): add link to story route

* ✨ feat: msw 구조 수정

* ✨ feat: msw post db 업데이트 및 기본 레이아웃 구현

* ✨ feat: 사진 기본 ui 구현

* ✨ feat: 하트 색깔 및 불투명도 수정

* ✨ feat: 하트 올라가는 애니메이션 구현

* ✨ feat: 하트 애니메이션 구체화 및 버그 수정

* ✨ feat(msw): add common response type

* 🐛 fix(msw): fix common response type field name

* ✨ feat(msw): add mock users

* ✨ feat(msw): add follow handlers

* 💎 style(sidebar): add padding

* ✨ feat(components): add follow list modal component

needs to be fixed based on real api

* ✨ feat(components): add mock data / match data type

* 💎 style(search): adjust search drawer style

* ✨ feat: ... (설정) 화면 모달 구현

* ✨ feat(search): apply debounce to input value

* ✨ feat: msw 구현 (comment)

* 🧹 chore: remove duplicate key

* ✨ feat: 댓글 ui

* ✨ feat: 댓글 설정창(...) ui 구현

* ✨ feat: ... 모달 로직 수정

* ✨ feat: 글 본문 및 프로필 ui 수정 (여백 정리)

* ✨ feat(msw): warn unhandled requests for debugging

* ✨ feat(gitignore): add env

* ✨ feat(providers): add query client provider

* ✨ feat(api): add test (health check) handler

* ✨ feat(route): add test route for api connection test

* ✨ feat: 액션 바 (상호작용) ui 구현

* ✨ feat: env 삭제

* 💎 style(sidebar): update layout stability

* ✨ feat(sidebar): updage search drawer toggle logic

* ✨ feat(sidebar): remain page width when opening search drawer

* ✨ feat(components): add pagination

* ✨ feat(components): add shared components

lazyimage / card

* ✨ feat(msw): add post mock data

* ✨ feat(api): add feed schema / types

* ✨ feat(api): add handler / api function

* ✨ feat(home): add feed ui

* ✨ feat(actions): add env variable on cd workflow

* 💎 style(sidebar): collapse sidebar on search drawer toggle

* 🐛 fix(route): update route from profile_id to post_id

* ✨ feat(feed): link to post detail on click

* ✨ feat(components): add dropdown

* ✨ feat(msw): add album handler

* ✨ feat(api): add album api call functions

* ✨ feat(api): add album api call function

* 🐛 fix(msw): adjust handler order

* 💎 style(dropdown): remove circle icon

* ✨ feat(album): add album dropdown

* 🧪 test(album): add album dropdown tests

* 🐛 fix(actions): apply secrets

* 🧹 chore: update test:ci command option

* ✨ feat(msw): add bookmarks handler

* ✨ feat(bookmarks): add bookmarked posts ui

* ✨ feat(postdetail): return to previous page when closing page

* ✨ feat(postdetail): validate search params with zod

* ✨ feat: 하단 푸터 - 위치 화면 구현

* ✨ feat: 하단 푸터 수정 (Instagram Lite 추가)

* ✨ feat: 푸터 완성

* ✨ feat: 푸터 ui, 기능, 경로 설정 완성

* ✨ feat: 로그인 msw 설정

* ✨ feat: 로그인 검사 로직 추가 및 카카오톡 로그인 ui 구현

---------

Co-authored-by: c0912jy <c0912jy@gmail.com>

Author: kimnamheeee

package.json

@@ -41,7 +41,7 @@
     "framer-motion": "^12.26.2",
     "immer": "^11.1.3",
     "ky": "^1.14.2",
-    "lucide-react": "^0.562.0",
+    "lucide-react": "^0.563.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

src/components/auth/LoginCard.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import { useNavigate } from '@tanstack/react-router'
 import instagramLogo from '../../assets/instagram-logo.svg'
+import { instance } from '../../shared/api/ky'
+import { MessageCircle } from 'lucide-react'
 
 interface FloatingInputProps {
   label: string
@@ -11,6 +13,14 @@ interface FloatingInputProps {
   setShowPw?: (show: boolean) => void
 }
 
+interface LoginResponse {
+  success: boolean
+  data?: {
+    accessToken: string
+    refreshToken: string
+  }
+}
+
 const FloatingInput = ({
   label,
   value,
@@ -61,10 +71,32 @@ const LoginCard = () => {
   const [id, setId] = useState('')
   const [pw, setPw] = useState('')
   const [showPw, setShowPw] = useState(false)
+  const [errorMsg, setErrorMsg] = useState('')
   const navigate = useNavigate()
 
   const isValid = id.length > 0 && pw.length >= 6
 
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setErrorMsg('')
+
+    try {
+      const res = await instance
+        .post('*/api/v1/auth/login', {
+          json: { loginId: id, password: pw },
+        })
+        .json<LoginResponse>()
+
+      if (res.success && res.data) {
+        localStorage.setItem('accessToken', res.data.accessToken)
+        localStorage.setItem('refreshToken', res.data.refreshToken)
+        navigate({ to: '/' })
+      }
+    } catch {
+      setErrorMsg('잘못된 이메일 또는 비밀번호입니다. 다시 입력해주세요.')
+    }
+  }
+
   return (
     <div className="flex w-full flex-col items-center bg-white p-10">
       <img
@@ -73,13 +105,7 @@ const LoginCard = () => {
         className="mt-2 mb-8 w-[175px]"
       />
 
-      <form
-        className="flex w-full flex-col"
-        onSubmit={(e) => {
-          e.preventDefault()
-          navigate({ to: '/' })
-        }}
-      >
+      <form className="flex w-full flex-col" onSubmit={handleLogin}>
         <FloatingInput
           label="전화번호, 사용자 이름 또는 이메일"
           value={id}
@@ -94,9 +120,16 @@ const LoginCard = () => {
           setShowPw={setShowPw}
         />
 
+        {errorMsg && (
+          <p className="mb-2 px-1 text-left text-[11px] leading-tight text-[#ed4956]">
+            {errorMsg}
+          </p>
+        )}
+
         <button
+          type="submit"
           disabled={!isValid}
-          className={`mt-3 rounded py-1.5 text-sm font-semibold text-white transition-colors ${
+          className={`mt-1.5 rounded py-1.5 text-sm font-semibold text-white transition-colors ${
             isValid ? 'bg-[#0095f6]' : 'bg-[#b2dffc]'
           }`}
         >
@@ -112,9 +145,17 @@ const LoginCard = () => {
         <div className="h-px flex-1 bg-gray-300"></div>
       </div>
 
+      <button
+        type="button"
+        className="flex w-full items-center justify-center gap-2 rounded bg-[#FEE500] py-2 text-[14px] font-semibold text-[#191919] transition-opacity hover:opacity-90"
+      >
+        <MessageCircle className="h-4 w-4 fill-[#191919] stroke-none" />
+        카카오톡으로 로그인
+      </button>
+
       <button
         onClick={() => navigate({ to: '/password/reset' })}
-        className="mt-2 cursor-pointer text-xs text-[#00376b] hover:underline"
+        className="mt-6 cursor-pointer text-xs text-[#00376b] hover:underline"
       >
         비밀번호를 잊으셨나요?
       </button>

src/components/post/PostDetail.tsx

@@ -131,7 +131,7 @@ export default function PostDetail() {
                 }}
                 transition={{
                   duration: 0.7,
-                  times: [0, 0.57, 1], // 0.4s 지점까지 기울기 유지, 이후 0.3s 동안 회전 완료
+                  times: [0, 0.57, 1],
                   ease: 'easeInOut',
                 }}
                 onAnimationComplete={() => setIsAnimating(false)}

src/mocks/db/auth.db.ts

@@ -0,0 +1,33 @@
+export interface MockAuth {
+  loginId: string
+  password: string
+  userId: number
+}
+
+export const authUsers: MockAuth[] = [
+  {
+    loginId: 'admin123@gmail.com',
+    password: 'admin123',
+    userId: 1,
+  },
+  {
+    loginId: 'user2@gmail.com',
+    password: 'password123',
+    userId: 2,
+  },
+  {
+    loginId: 'user3@gmail.com',
+    password: 'password123',
+    userId: 3,
+  },
+  {
+    loginId: 'user4@gmail.com',
+    password: 'password123',
+    userId: 4,
+  },
+  {
+    loginId: 'user5@gmail.com',
+    password: 'password123',
+    userId: 5,
+  },
+]

src/mocks/handlers.ts

@@ -4,8 +4,10 @@ import { albumHandlers } from './handlers/album'
 import { feedHandlers } from './handlers/feed'
 import { followHandlers } from './handlers/follow'
 import { testHandlers } from './handlers/test'
+import { authHandlers } from './handlers/auth'
 
 export const handlers = [
+  ...authHandlers,
   ...postHandlers,
   ...commentHandlers,
   ...albumHandlers,

src/mocks/handlers/auth.ts

@@ -1,6 +1,48 @@
-// 해당 엔티티에 필요한 데이터를 나중에 여기서 가져옴
-// import { mockData } from '../db/entity.db';
+import { http, HttpResponse } from 'msw'
+import { authUsers } from '../db/auth.db'
 
 export const authHandlers = [
-  // 여기에 http.get, http.post 등을 추가
+  http.post('*/api/v1/auth/login', async ({ request }) => {
+    const body = (await request.json()) as Record<string, string>
+    const { loginId, password } = body
+
+    const authInfo = authUsers.find((u) => u.loginId === loginId)
+
+    if (!authInfo) {
+      return HttpResponse.json(
+        {
+          code: 'USER404',
+          message: '사용자를 찾을 수 없습니다.',
+          data: null,
+          success: false,
+        },
+        { status: 404 }
+      )
+    }
+
+    if (authInfo.password !== password) {
+      return HttpResponse.json(
+        {
+          code: 'AUTH401',
+          message: '비밀번호가 일치하지 않습니다.',
+          data: null,
+          success: false,
+        },
+        { status: 401 }
+      )
+    }
+
+    return HttpResponse.json(
+      {
+        code: 'COMMON200',
+        message: '성공입니다.',
+        data: {
+          accessToken: `mock-access-token-${authInfo.userId}`,
+          refreshToken: 'mock-refresh-token',
+        },
+        success: true,
+      },
+      { status: 200 }
+    )
+  }),
 ]

yarn.lock

@@ -3281,10 +3281,10 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-lucide-react@^0.562.0:
-  version "0.562.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.562.0.tgz#217796c2f57624f012b484ea7f08505067c90d51"
-  integrity sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==
+lucide-react@^0.563.0:
+  version "0.563.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.563.0.tgz#9a660d6f009942914a0df42391cf7d7d4dbcc713"
+  integrity sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA==
 
 lz-string@^1.5.0:
   version "1.5.0"