Merge branch 'frontend' of https://github.com/Kernel360/F2-TECHPICK i…

…nto front/feat/#612

frontend/techpick/src/apis/apiConstants.ts

@@ -6,6 +6,7 @@ const API_ENDPOINTS = {
   TAGS: 'tags',
   LINKS: 'links',
   SHARED: 'shared',
+  LOGOUT: 'logout',
 };
 
 export const API_URLS = {
@@ -37,4 +38,5 @@ export const API_URLS = {
   GET_PICK_BY_URL: (url: string) => `${API_ENDPOINTS.PICKS}/link?link=${url}`,
   GET_LINK_OG_DATA: (url: string) => `${API_ENDPOINTS.LINKS}?url=${url}`,
   SHARE_FOLDER: API_ENDPOINTS.SHARED,
+  POST_LOGOUT: `${API_ENDPOINTS.LOGOUT}`,
 };

frontend/techpick/src/apis/postLogout.ts

@@ -0,0 +1,16 @@
+import { HTTPError } from 'ky';
+import { apiClient } from '@/apis/apiClient';
+import { API_URLS } from './apiConstants';
+import { returnErrorFromHTTPError } from './error';
+
+export const postLogout = async () => {
+  try {
+    await apiClient.post(API_URLS.POST_LOGOUT);
+  } catch (httpError) {
+    if (httpError instanceof HTTPError) {
+      const error = await returnErrorFromHTTPError(httpError);
+      throw error;
+    }
+    throw httpError;
+  }
+};

frontend/techpick/src/app/(signed)/mypage/page.css.ts

@@ -0,0 +1,31 @@
+import { style } from '@vanilla-extract/css';
+import { colorVars } from 'techpick-shared';
+
+export const myPageLayoutStyle = style({
+  width: '100%',
+  height: '100vh',
+  padding: '12px',
+  backgroundColor: colorVars.gold2,
+});
+
+export const buttonSectionLayout = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+});
+
+export const logoutButtonStyle = style({
+  width: '120px',
+  height: '32px',
+  border: '1px solid',
+  borderColor: colorVars.red8,
+  borderRadius: '4px',
+  transition: 'background-color 0.3s ease',
+  color: colorVars.red11,
+  cursor: 'pointer',
+
+  ':hover': {
+    backgroundColor: colorVars.red3,
+  },
+});

frontend/techpick/src/app/(signed)/mypage/page.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { postLogout } from '@/apis/postLogout';
+import { ROUTES } from '@/constants';
+import {
+  buttonSectionLayout,
+  logoutButtonStyle,
+  myPageLayoutStyle,
+} from './page.css';
+
+export default function MyPage() {
+  const handleLogout = async () => {
+    try {
+      await postLogout();
+      window.location.replace(ROUTES.LOGIN);
+    } catch {
+      /* empty */
+    }
+  };
+
+  return (
+    <div className={myPageLayoutStyle}>
+      <div className={buttonSectionLayout}>
+        <button className={logoutButtonStyle} onClick={handleLogout}>
+          로그아웃
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/techpick/src/components/FolderContentHeader/currentFolderNameSection.css.ts

@@ -18,7 +18,8 @@ export const folderNameStyle = style({
   display: 'inline-block',
   fontWeight: fontWeights['medium'],
   fontSize: fontSize['3xl'],
-  height: '40px',
+  height: '48px',
+  lineHeight: '48px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',

frontend/techpick/src/components/FolderTree/UserMenuBar.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import { CircleUserRoundIcon, SearchIcon } from 'lucide-react';
+import { ROUTES } from '@/constants';
+import { userMenuBarLayoutStyle } from './userMenuBar.css';
+
+export function UserMenuBar() {
+  return (
+    <div className={userMenuBarLayoutStyle}>
+      <Link href={ROUTES.MY_PAGE}>
+        <CircleUserRoundIcon />
+      </Link>
+
+      <button>
+        <SearchIcon />
+      </button>
+    </div>
+  );
+}

frontend/techpick/src/components/FolderTree/folderLinkItem.css.ts

@@ -43,5 +43,5 @@ export const folderTextStyle = style({
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
-  height: '24px',
+  height: '28px',
 });

frontend/techpick/src/components/FolderTree/folderTreeHeader.css.ts

@@ -5,7 +5,6 @@ export const folderTreeHeaderLayout = style({
   position: 'sticky',
   top: 0,
   minWidth: sizes['6xs'],
-  paddingTop: '12px',
   backgroundColor: colorVars.sand2,
 });
 

frontend/techpick/src/components/FolderTree/index.tsx

@@ -9,6 +9,7 @@ import { HorizontalResizableContainer } from './HorizontalResizableContainer';
 import { ShowCreateFolderInputButton } from './ShowCreateFolderInputButton';
 import { treeLayout, treeNodeLayoutStyle } from './tree.css';
 import { TreeNode } from './TreeNode';
+import { UserMenuBar } from './UserMenuBar';
 
 export function FolderTree() {
   const { newFolderParentId } = useCreateFolderInputStore();
@@ -24,6 +25,7 @@ export function FolderTree() {
   return (
     <HorizontalResizableContainer>
       <div className={treeLayout}>
+        <UserMenuBar />
         <FolderTreeHeader />
 
         <div className={folderTreeHeaderTitleLayout}>

frontend/techpick/src/components/FolderTree/tree.css.ts

@@ -15,7 +15,7 @@ export const resizeHandleStyle = style({
 export const treeLayout = style({
   height: '100vh',
   padding: '12px',
-  paddingTop: '0',
+  paddingTop: '24px',
   backgroundColor: colorVars.sand2,
 
   '@media': {

frontend/techpick/src/components/FolderTree/userMenuBar.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const userMenuBarLayoutStyle = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginLeft: '12px',
+  marginRight: '8px',
+});

frontend/techpick/src/constants/route.ts

@@ -7,4 +7,5 @@ export const ROUTES = {
   FOLDER_DETAIL: (folderId: number) => `/folders/${folderId}`,
   SEARCH: '/folders/search',
   LOGIN: '/login',
+  MY_PAGE: '/mypage',
 };

frontend/techpick/src/middleware.ts

@@ -12,7 +12,7 @@ export default async function middleware(req: NextRequest) {
   const isAuthenticated = !!req.cookies.get('access_token');
 
   const unauthenticatedOnlyPaths = ['/login'];
-  const authenticatedOnlyPaths = ['/folders', '/'];
+  const authenticatedOnlyPaths = ['/folders', '/', '/mypage'];
 
   const isUnauthenticatedOnlyPath = unauthenticatedOnlyPaths.includes(pathname);
   const isAuthenticatedOnlyPath = authenticatedOnlyPaths.some((path) =>

frontend/techpick/src/styles/reset.css.ts

@@ -48,7 +48,7 @@ globalStyle(
 );
 
 globalStyle('body', {
-  lineHeight: 1,
+  lineHeight: 1.5,
   fontSize: '16px',
 });