Merge pull request #15 from MJU-Letter/feat/#9-ui-QA

Feat/#9 UI qa
MJU-Letter · Aug 15, 2024 · 8c56b2a · 8c56b2a
2 parents 6e8cad4 + 3539dda
commit 8c56b2a
Show file tree

Hide file tree

Showing 18 changed files with 252 additions and 183 deletions.
diff --git a/src/app/auth/layout.tsx b/src/app/auth/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import logo from '@public/icons/logo.png';
+import Image from 'next/image';
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function AuthLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className=''>
+      <Image className='w-67 h-32' src={logo} alt='logo' />
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/login/auth/page.tsx → src/app/auth/page.tsx b/src/app/login/auth/page.tsx → src/app/auth/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,14 +1,14 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import Image from "next/image";
-import logo from "../../public/icons/logo.png";
-import "../styles/globals.css";
-import Navigation from "@/components/organisms/navigation/navigation/Navigation";
-import RecoilRootWrapper from "@/recoil/recoilRootWrapper";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import Image from 'next/image';
+import logo from '../../public/icons/logo.png';
+import '../styles/globals.css';
+import Navigation from '@/components/organisms/navigation/navigation/Navigation';
+import RecoilRootWrapper from '@/recoil/recoilRootWrapper';
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({
@@ -17,25 +17,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className=" bg-main-background">
-      <body className="flex justify-center">
+    <html lang='en' className='bg-main-background'>
+      <body className='flex justify-center'>
         <RecoilRootWrapper>
-          <figure className="hidden tablet:flex tablet:h-screen tablet:items-center tablet:pr-[216px] transition-opacity duration-500 ease-in-out opacity-0 tablet:opacity-100">
-            <Image
-              className="w-419 h-198 object-contain "
-              src={logo}
-              alt="logo"
-            />
+          <figure className='hidden tablet:flex tablet:h-screen tablet:items-center tablet:pr-[216px] transition-opacity duration-500 ease-in-out opacity-0 tablet:opacity-100'>
+            <Image className='w-419 h-198 object-contain ' src={logo} alt='logo' />
           </figure>
-          <main
-            id="modal"
-            className="flex flex-col items-center  relative  w-fit "
-          >
-            <header className="w-full mb-76">
-              <Navigation />
-            </header>
-            {children}
-          </main>
+          {children}
         </RecoilRootWrapper>
       </body>
     </html>

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
diff --git a/src/app/(social)/detail/page.tsx → src/app/mju-letter/(social)/detail/page.tsx b/src/app/(social)/detail/page.tsx → src/app/mju-letter/(social)/detail/page.tsx
diff --git a/src/app/mju-letter/(social)/main/page.tsx b/src/app/mju-letter/(social)/main/page.tsx
@@ -0,0 +1,12 @@
+import Main from '@/components/templates/social/main/Main';
+import React from 'react';
+
+const page = () => {
+  return (
+    <div>
+      <Main />
+    </div>
+  );
+};
+
+export default page;
diff --git a/src/app/mju-letter/layout.tsx b/src/app/mju-letter/layout.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from 'next';
+import Image from 'next/image';
+import logo from '../../../public/icons/logo.png';
+import '../../styles/globals.css';
+import Navigation from '@/components/organisms/navigation/navigation/Navigation';
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function SocialLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className='flex justify-center'>
+      <main id='modal' className='flex flex-col items-center  relative  w-fit '>
+        <header className='w-full mb-76'>
+          <Navigation />
+        </header>
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/src/app/mypage/page.tsx → src/app/mju-letter/mypage/page.tsx b/src/app/mypage/page.tsx → src/app/mju-letter/mypage/page.tsx
diff --git a/src/app/notice/page.tsx → src/app/mju-letter/notice/page.tsx b/src/app/notice/page.tsx → src/app/mju-letter/notice/page.tsx
diff --git a/src/app/setting/page.tsx → src/app/mju-letter/setting/page.tsx b/src/app/setting/page.tsx → src/app/mju-letter/setting/page.tsx
diff --git a/src/app/mju-letter/setting/profile/page.tsx b/src/app/mju-letter/setting/profile/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+import ProfileSetting from '@/components/organisms/profileSetting/ProfileSetting';
+import React from 'react';
+import testProfile from '@public/icons/testProfile.png';
+
+const page = () => {
+  const test = () => {
+    console.log('hi');
+  };
+  return (
+    <div>
+      <ProfileSetting
+        name={'이보현'}
+        major={'응용소프트웨어전공'}
+        studentId={'19'}
+        profileImg={testProfile}
+        setInstagramId={test}
+      />
+    </div>
+  );
+};
+
+export default page;
diff --git a/src/app/setting/profile/page.tsx b/src/app/setting/profile/page.tsx
diff --git a/src/components/atoms/input/emailInput/EmailInput.stories.tsx b/src/components/atoms/input/emailInput/EmailInput.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import test from '../../../../public/icons/testProfile.png';
+
+import EmailInput from './EmailInput';
+
+const meta: Meta<typeof EmailInput> = {
+  title: 'components/atoms/input/EmailInput',
+  component: EmailInput,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EmailInput>;
+
+export const Default: Story = {
+  args: {
+    label: '이메일',
+    placeholder: '이메일을 입력해 주세요',
+  },
+};
diff --git a/src/components/atoms/input/emailInput/EmailInput.tsx b/src/components/atoms/input/emailInput/EmailInput.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+type Props = {
+  label: string;
+  placeholder: string;
+  isDisabled: boolean;
+};
+
+const EmailInput = ({ label, placeholder, isDisabled }: Props) => {
+  return (
+    <div className={`flex items-center whitespace-nowrap ${isDisabled ? 'opacity-50 pointer-events-none' : ''}`}>
+      <h1 className={`w-232 medium-bold text-main-point mr-25`}>{label}</h1>
+      <input
+        className='appearance-none focus:outline-none focus:ring-0 border-b-1 border-b-main-point placeholder:text-gray-medium-text-2 medium-regular pb-8 px-4 pt-4'
+        placeholder={placeholder}
+        disabled={isDisabled}
+      />
+    </div>
+  );
+};
+
+export default EmailInput;
diff --git a/src/components/organisms/navigation/navigation/Navigation.tsx b/src/components/organisms/navigation/navigation/Navigation.tsx
@@ -1,24 +1,25 @@
-"use client";
-import NoticeIcon from "../../../atoms/notice/noticeIcon/NoticeIcon";
-import Image from "next/image";
-import React, { useEffect, useState } from "react";
-import logo from "@public/icons/logo.png";
-import menu from "@public/icons/menu.png";
-import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import NavigationList from "../navigationList/NavigationList";
+'use client';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import logo from '@public/icons/logo.png';
+import menu from '@public/icons/menu.png';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import NavigationList from '../navigationList/NavigationList';
 
-import ModalPortal from "@/utils/ModalPortal";
-import { AnimatePresence } from "framer-motion";
+import ModalPortal from '@/utils/ModalPortal';
+import { AnimatePresence } from 'framer-motion';
+import { NAVIGATION } from '@/constants/navigation';
+import NoticeIcon from '@/components/atoms/notice/noticeIcon/NoticeIcon';
 
 const Navigation = () => {
   const [isOpened, setIsOpened] = useState(false);
   useEffect(() => {
-    if (typeof document !== "undefined") {
+    if (typeof document !== 'undefined') {
       if (isOpened) {
-        document.body.style.overflow = "hidden";
+        document.body.style.overflow = 'hidden';
       } else {
-        document.body.style.overflow = "auto";
+        document.body.style.overflow = 'auto';
       }
     }
   }, [isOpened]);
@@ -35,7 +36,7 @@ const Navigation = () => {
 
   return (
     <>
-      <div className="relative z-header box-border">
+      <div className='relative z-header box-border'>
         <AnimatePresence>
           {isOpened && (
             <ModalPortal>
@@ -44,20 +45,15 @@ const Navigation = () => {
           )}
         </AnimatePresence>
 
-        <div className="fixed z-header  flex items-center w-360 justify-between h-56 py-12 px-16 bg-main-background box-border">
-          <Link href={"/"}>
-            <Image className="w-67 h-32" src={logo} alt="logo" />
+        <div className='fixed z-header  flex items-center w-360 justify-between h-56 py-12 px-16 bg-main-background box-border'>
+          <Link href={NAVIGATION.social.main_path}>
+            <Image className='w-67 h-32' src={logo} alt='logo' />
           </Link>
-          <div className="flex">
-            <Link href={"/notice"}>
+          <div className='flex'>
+            <Link href={NAVIGATION.notice.default_path}>
               <NoticeIcon isOn={false} />
             </Link>
-            <Image
-              className="ml-12 w-24 h-24 cursor-pointer"
-              onClick={handleIsOpened}
-              src={menu}
-              alt="menu"
-            />
+            <Image className='ml-12 w-24 h-24 cursor-pointer' onClick={handleIsOpened} src={menu} alt='menu' />
           </div>
         </div>
       </div>