Merge branch 'main' into feature/BAR-255

.eslintrc.json

@@ -25,6 +25,7 @@
     ],
     "unused-imports/no-unused-imports": "error",
     "no-else-return": ["error", { "allowElseIf": false }],
+    "jsx-a11y/label-has-associated-control": "off",
     "@typescript-eslint/consistent-type-imports": [
       "error",
       { "fixStyle": "inline-type-imports" }

middleware.ts

@@ -1,6 +1,7 @@
 import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
+import { ROUTES } from '@constants/routes';
 import { STORAGE_KEY } from '@models/storage';
 
 export const middleware = async (request: NextRequest) => {
@@ -9,15 +10,17 @@ export const middleware = async (request: NextRequest) => {
   if (request.nextUrl.pathname.startsWith('/terms')) return;
 
   if (refreshToken?.value && request.nextUrl.pathname === '/') {
-    return NextResponse.redirect(new URL('/main', request.url));
+    return NextResponse.redirect(
+      new URL(`${ROUTES.MAIN}?tab=write`, request.url),
+    );
   }
 
   if (
     !refreshToken &&
     request.nextUrl.pathname !== '/' &&
     !request.nextUrl.pathname.startsWith('/redirect')
   ) {
-    return NextResponse.redirect(new URL('/', request.url));
+    return NextResponse.redirect(new URL(ROUTES.LANDING, request.url));
   }
 };
 

pages/main/index.tsx

@@ -1,23 +1,27 @@
-import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 import Layout from '@components/Layout';
 import MainPageTab from '@components/Layout/MainPageTab';
+import { ROUTES } from '@constants/routes';
 import WriteTabContent from '@domain/끄적이는/components/WriteTabContent';
 import 참고하는TabContent from '@domain/참고하는/components';
 import useGetMyProfile from '@queries/useGetMyProfile';
 import { COLORS } from '@styles/tokens';
 
 const MainPage = () => {
-  useGetMyProfile();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const selectedTab = searchParams.get('tab') || 'write';
 
-  const [selectedTab, setSelectedTab] = useState('끄적이는');
+  useGetMyProfile();
 
   const handleTabSelect = (selectedTab: string) => {
-    setSelectedTab(selectedTab);
+    router.push(`${ROUTES.MAIN}?tab=${selectedTab}`);
   };
 
   const backgroundColor =
-    selectedTab === '참고하는' ? COLORS['Grey/100'] : undefined;
+    selectedTab === 'refer' ? COLORS['Grey/100'] : undefined;
 
   return (
     <Layout backgroundColor={backgroundColor}>

pages/redirect/[authType]/index.tsx

@@ -31,7 +31,7 @@ const Bridge = () => {
       saveToken({ accessToken, refreshToken });
       localStorage.setItem(STORAGE_KEY.RECENT_LOGIN_TYPE, authType);
 
-      router.replace(ROUTES.MAIN);
+      router.replace(`${ROUTES.MAIN}?tab=write`);
     })();
   }, [router.query, router]);
 

src/components/Input/WriteInput/index.tsx

@@ -23,7 +23,7 @@ const WriteInput = ({
   maxLength = MAIN_INPUT_MAX_LENGTH,
   onSubmit,
 }: WriteInputProps) => {
-  const { id, value } = inputProps;
+  const { id, value, onChange } = inputProps;
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
   const [textareaHeight, setTextareaHeight] = useState<{
@@ -62,12 +62,15 @@ const WriteInput = ({
   };
 
   const handleKeydownEnter = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.code === 'Enter') {
-      setTextareaHeight((prev) => ({
-        row: prev.row + 1,
-        lineBreak: { ...prev.lineBreak, [value.length]: true },
-      }));
-      return;
+    if (e.nativeEvent.isComposing) return;
+
+    if (e.code === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      setTextareaHeight({
+        row: 1,
+        lineBreak: {},
+      });
+      value.trim() && onSubmit();
     }
   };
 
@@ -81,13 +84,15 @@ const WriteInput = ({
       >
         <label htmlFor={id} className={style.label}>
           <textarea
-            {...inputProps}
+            id={id}
+            value={value}
             ref={inputRef}
             autoComplete="off"
             rows={textareaHeight.row}
             className={style.input}
             placeholder={placeholder}
             maxLength={maxLength}
+            onChange={onChange}
             onInput={handleResize}
             onKeyDown={handleKeydownEnter}
           />

src/components/Layout/MainPageTab.tsx

@@ -29,7 +29,7 @@ const MainPageTab = ({
           <Tooltip hasArrow>
             <Tooltip.Trigger>
               <Tabs.Trigger
-                value="끄적이는"
+                value="write"
                 icon={{ default: 'pencilDefault', active: 'pencilActive' }}
               >
                 끄적이는
@@ -40,7 +40,7 @@ const MainPageTab = ({
           <Tooltip hasArrow>
             <Tooltip.Trigger>
               <Tabs.Trigger
-                value="참고하는"
+                value="refer"
                 icon={{ default: 'templateDefault', active: 'templateActive' }}
               >
                 참고하는
@@ -52,8 +52,8 @@ const MainPageTab = ({
       </div>
 
       <section className={styles.tabWrapper}>
-        <Tabs.Content value="끄적이는">{write}</Tabs.Content>
-        <Tabs.Content value="참고하는">{refer}</Tabs.Content>
+        <Tabs.Content value="write">{write}</Tabs.Content>
+        <Tabs.Content value="refer">{refer}</Tabs.Content>
       </section>
     </Tabs>
   );

src/components/Layout/components/Header.tsx

@@ -23,7 +23,7 @@ const Header = ({ type }: HeaderProps) => {
   return (
     <header className={styles.header}>
       <Link
-        href={refreshToken ? ROUTES.MAIN : ROUTES.LANDING}
+        href={refreshToken ? `${ROUTES.MAIN}?tab=write` : ROUTES.LANDING}
         className={styles.logo}
       >
         <Logo />

src/domain/끄적이는/components/WriteTabContent/style.css.ts

@@ -25,7 +25,7 @@ export const inputWrapper = style({
   width: '100%',
   transform: 'translateX(-50%)',
   maxWidth: '1120px',
-
+  zIndex: 10,
   '@media': {
     'screen and (max-width: 1200px)': {
       padding: '0 40px',

src/domain/저장하는/components/NotFoundArchiveCard/index.tsx

@@ -18,7 +18,11 @@ const NotFoundArchiveCard = () => {
           자주 사용하는 글과 템플릿을 저장해보세요.
         </span>
       </div>
-      <Button state="enabled" size="M" onClick={() => router.push(ROUTES.MAIN)}>
+      <Button
+        state="enabled"
+        size="M"
+        onClick={() => router.push(`${ROUTES.MAIN}?tab=refer`)}
+      >
         문장 템플릿 보러가기
       </Button>
     </div>