3주차 배포 (#69)

* 🧹 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, 기능, 경로 설정 완성

---------

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

Author: kimnamheeee

.github/workflows/cd.yml

@@ -24,6 +24,8 @@ jobs:
         run: yarn install --frozen-lockfile
 
       - name: Build project
+        env:
+          VITE_API_URL: ${{ secrets.VITE_API_URL }}
         run: yarn build
 
       - name: Configure AWS credentials

.github/workflows/ci.yml

@@ -30,9 +30,13 @@ jobs:
         run: yarn type-check
 
       - name: Run tests (Vitest)
+        env:
+          VITE_API_URL: ${{ secrets.VITE_API_URL }}
         run: yarn test:ci
 
       - name: Build project
+        env:
+          VITE_API_URL: ${{ secrets.VITE_API_URL }}
         run: yarn build
 
       - name: Comment on PR (CI Result)

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

package.json

@@ -14,7 +14,7 @@
     "prepare": "husky",
     "commit": "cz",
     "test": "vitest",
-    "test:ci": "vitest run"
+    "test:ci": "vitest run --reporter=verbose --silent"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",

src/app/providers/Providers.tsx

@@ -4,12 +4,17 @@ import { ThemeProvider } from 'next-themes'
 
 import { SidebarProvider } from '@/shared/ui/sidebar'
 import { Toaster } from '@/shared/ui/sonner'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
 
 export function Providers({ children }: PropsWithChildren) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <SidebarProvider>{children}</SidebarProvider>
-      <Toaster duration={1500} className="text-center" />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <SidebarProvider>{children}</SidebarProvider>
+        <Toaster duration={1500} className="text-center" />
+      </ThemeProvider>
+    </QueryClientProvider>
   )
 }

src/assets/google-play-badge.png

@@ -0,0 +1,78 @@
+import instagramLogo from '../../assets/instagram-logo.svg'
+import pinIcon from '../../assets/pin.png'
+import { CITIES } from '../../constants/cities'
+
+interface CitySelectViewProps {
+  country: string
+  onLoginClick: () => void
+  onSignupClick: () => void
+}
+
+const CitySelectView = ({
+  country,
+  onLoginClick,
+  onSignupClick,
+}: CitySelectViewProps) => {
+  return (
+    <div className="flex w-full flex-col items-center">
+      <div className="fixed top-0 left-0 z-50 flex h-[60px] w-full justify-center border-b border-gray-300 bg-white px-4">
+        <div className="flex w-full max-w-[935px] items-center justify-between">
+          <img
+            src={instagramLogo}
+            alt="Instagram"
+            className="w-[103px] cursor-pointer"
+            onClick={onLoginClick}
+          />
+          <div className="flex items-center gap-4">
+            <button
+              onClick={onLoginClick}
+              className="rounded-[8px] bg-[#4a5df9] px-4 py-1.5 text-sm font-semibold text-white"
+            >
+              로그인
+            </button>
+            <button
+              onClick={onSignupClick}
+              className="text-sm font-semibold text-[#4a5df9]"
+            >
+              가입하기
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-32 mb-12 flex w-11/24 flex-col">
+        <div className="mb-10 flex items-center gap-2">
+          <img
+            src={pinIcon}
+            alt="Location"
+            className="h-4 w-4 object-contain"
+          />
+          <span className="text-[16px] leading-none font-bold text-black">
+            {country}
+          </span>
+        </div>
+        <div className="mb-5 text-left">
+          <span className="text-[12px] font-bold text-[#737373] uppercase">
+            {country}의 도시
+          </span>
+        </div>
+        <div className="flex flex-col rounded-[3px] border border-gray-300 bg-white shadow-sm">
+          <div className="p-8">
+            <div className="grid grid-cols-4 gap-x-8 gap-y-5">
+              {CITIES.map((city, index) => (
+                <div
+                  key={`${city}-${index}`}
+                  className="cursor-pointer truncate text-[14px] text-black active:text-[#4a5df9]"
+                >
+                  {city}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CitySelectView

src/assets/instagram-icon.png

@@ -0,0 +1,57 @@
+import instagramIcon from '../../assets/instagram-icon.png'
+import googlePlayBadge from '../../assets/google-play-badge.png'
+
+interface LiteDownloadViewProps {
+  onBack: () => void
+}
+
+const LiteDownloadView = ({ onBack }: LiteDownloadViewProps) => {
+  return (
+    <div className="flex w-full flex-col items-center justify-center px-4 pt-40 text-center tracking-tighter">
+      <img
+        src={instagramIcon}
+        alt="Instagram"
+        className="mb-4 h-16 w-16 cursor-pointer object-contain"
+        onClick={onBack}
+      />
+
+      <h1 className="mb-[6px] text-[22px] font-bold text-black">
+        Instagram Lite 다운로드
+      </h1>
+
+      <p className="mb-[20px] text-[16px] text-black">
+        더 가볍고 빠르며 데이터도 절약할 수 있습니다
+      </p>
+
+      <div className="flex w-full flex-col items-center">
+        <button className="mb-[7px] flex w-full max-w-[130px] items-center justify-center gap-2 rounded-[8px] bg-[#4a5df9] py-3 text-[13px] font-semibold tracking-tighter text-white transition-opacity hover:opacity-90">
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+          APK 다운로드
+        </button>
+      </div>
+
+      <div className="cursor-pointer">
+        <img
+          src={googlePlayBadge}
+          alt="Google Play"
+          className="h-12 object-contain"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default LiteDownloadView