Merge branch 'main' into feat/setting

apis/dto/index.ts

@@ -0,0 +1 @@
+export * from './response';

apis/dto/response.ts

@@ -0,0 +1,6 @@
+export type Response<T = unknown> = {
+  data: T;
+  result: string;
+  code: string;
+  message: string;
+};

apis/index.ts

@@ -0,0 +1,2 @@
+export * from './dto';
+export * from './image-presign-url';

app/api/image/profile/presigned/url/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { fetchData } from '@/apis/fetch-data';
+import { ImagePresignedResponse } from '@/features/record';
+
+export async function PUT(request: NextRequest) {
+  const body = (await request.json()) as Promise<{ imageName: string }>;
+  const data = await fetchData<ImagePresignedResponse>(
+    `/image/profile/presigned-url`,
+    'PUT',
+    body,
+  );
+
+  return NextResponse.json(data);
+}

app/api/image/profile/url/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { fetchData } from '@/apis/fetch-data';
+import { ProfileImageUrlDoneResponse } from '@/features/profile';
+
+export async function PATCH(request: NextRequest) {
+  const body = (await request.json()) as Promise<{ imageName: string }>;
+  const data = await fetchData<ProfileImageUrlDoneResponse>(
+    `/image/profile/url`,
+    'PATCH',
+    body,
+  );
+
+  return NextResponse.json(data);
+}

app/api/memory/[memoryId]/reaction/eligibility/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { fetchData } from '@/apis/fetch-data';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { memoryId: number } },
+) {
+  const data = await fetchData<{ data: { eligibility: boolean } }>(
+    `/memory/${Number(params.memoryId)}/reaction/eligibility`,
+    'GET',
+  );
+
+  return NextResponse.json(data);
+}

app/layout.tsx

@@ -2,12 +2,12 @@ import '../styles/global.css';
 
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { Metadata } from 'next';
+import dynamic from 'next/dynamic';
 
 import MetaTagImage from '@/public/images/meta-tag.png';
 import { css } from '@/styled-system/css';
 import { pretendard } from '@/styles/font';
 
-import { PortalRoot } from './portal-root';
 import ReactQueryProvider from './providers/ReactQueryProvider';
 
 export const metadata: Metadata = {
@@ -35,6 +35,13 @@ const rootStyle = css({
   overflow: 'scroll',
 });
 
+const DynamicPortalRoot = dynamic(
+  () => import('./portal-root').then(({ PortalRoot }) => PortalRoot),
+  {
+    ssr: false,
+  },
+);
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -46,7 +53,7 @@ export default function RootLayout({
         <ReactQueryProvider>
           <ReactQueryDevtools initialIsOpen={true} />
           <div className={containerStyle}>{children}</div>
-          <PortalRoot />
+          <DynamicPortalRoot />
         </ReactQueryProvider>
       </body>
     </html>

app/alarm/page.tsx → app/notification/page.tsx

@@ -2,8 +2,11 @@ import dynamic from 'next/dynamic';
 
 import { LeftArrowIcon } from '@/components/atoms';
 import { HeaderBar } from '@/components/molecules';
-import { AlarmElementProps, NoAlarm } from '@/features/alarm';
-import { AlarmList } from '@/features/alarm/components/organisms/alarm-list';
+import {
+  NoNotification,
+  NotificationElementProps,
+  NotificationList,
+} from '@/features/notification';
 const DynamicBackButton = dynamic(
   () => import('@/components/molecules').then(({ BackButton }) => BackButton),
   {
@@ -14,7 +17,7 @@ const DynamicBackButton = dynamic(
 
 //Todo: 알람 불러오는 Api 연결
 export default function AlarmPage() {
-  const dummyAlarms: AlarmElementProps[] = [
+  const dummyAlarms: NotificationElementProps[] = [
     {
       id: 0,
       variant: 'follow',
@@ -67,12 +70,12 @@ export default function AlarmPage() {
         <HeaderBar.Title>알림</HeaderBar.Title>
       </HeaderBar>
       {!dummyAlarms ? (
-        <NoAlarm
+        <NoNotification
           mainText="아직 받은 알림이 없어요"
           subText="공지, 활동 소식이 도착하면 알려드릴게요"
         />
       ) : (
-        <AlarmList alarms={dummyAlarms} />
+        <NotificationList alarms={dummyAlarms} />
       )}
     </>
   );

app/portal-root.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Portal } from '@/components/atoms';
+import { Portal, ToastDialog } from '@/components/atoms';
 import { Dialog } from '@/components/molecules';
 import { useDialog } from '@/hooks/use-dialog';
 
@@ -9,7 +9,10 @@ export const PortalRoot = () => {
 
   return (
     <Portal>
-      <Dialog {...dialogState} />
+      <>
+        <ToastDialog />
+        <Dialog {...dialogState} />
+      </>
     </Portal>
   );
 };

app/profile/[id]/page.tsx

@@ -3,31 +3,17 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { LoadingArea, SettingIcon } from '@/components/atoms';
-import { HeaderBar } from '@/components/molecules';
+import { GlobalNavigationBar, HeaderBar } from '@/components/molecules';
+import { ProfileProps } from '@/features/profile';
 import { MyProfile } from '@/features/profile/components/organisms/my-page';
 import { OtherPage } from '@/features/profile/components/organisms/other-page';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
-export type ProfileType = 'statistics' | 'badge' | 'record';
-
 export type Mypage = {
   params: { id: number };
 };
 
-export interface ProfileProps {
-  status: number;
-  code: string;
-  data: {
-    memberId: number;
-    nickname: string;
-    isMyProfile: boolean;
-    followerCount: number;
-    followingCount: number;
-    introduction: string;
-  };
-}
-
 const fetchProfileData = async (id: number) => {
   const response = await fetch(`/api/profile/${id}`);
   if (!response.ok) {
@@ -68,6 +54,7 @@ export default function Profile({ params }: Mypage) {
       ) : (
         <OtherPage profileData={profileData} />
       )}
+      <GlobalNavigationBar />
     </article>
   );
 }

app/record-detail/[id]/page.tsx

@@ -90,7 +90,6 @@ export default async function RecordDetail({ params }: RecordDetail) {
     `recordDetail${params.id}`,
   );
 
-  // TODO: isMyRecordDetail (editButton, cheerButton) 분기처리 필요
   if (!data) return null;
   return (
     <>

components/atoms/dim/dim.tsx

@@ -12,6 +12,7 @@ type Dim = {
  *   BottomSheet - dim: 500 / container: 550
  *   Modal - dim: 700 / container: 750
  *   Dialog - dim: 800 / container: 850
+ *   Toast - container: 900
  */
 export const Dim = ({ onClick, zIndex = 800 }: Dim) => {
   return (

components/atoms/icons/album-icon.tsx

@@ -0,0 +1,18 @@
+export function AlbumIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="33"
+      height="32"
+      viewBox="0 0 33 32"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.16626 6.66699C3.16626 4.45785 4.95712 2.66699 7.16626 2.66699H25.8329C28.0421 2.66699 29.8329 4.45785 29.8329 6.66699V25.3337C29.8329 27.5428 28.0421 29.3337 25.8329 29.3337H7.16626C4.95712 29.3337 3.16626 27.5428 3.16626 25.3337V6.66699ZM21.9367 15.2148C21.3045 14.0769 19.6904 14.0159 18.9742 15.1028L14.4779 21.9258C14.327 22.1549 13.9955 22.1674 13.8276 21.9505L11.8724 19.4237C11.1321 18.4671 9.6644 18.5437 9.02772 19.5722L6.2736 24.0211C5.55877 25.1758 6.38931 26.6668 7.7474 26.6668H25.3531C26.6747 26.6668 27.5101 25.247 26.8683 24.0917L21.9367 15.2148ZM10.8329 12.667C12.4898 12.667 13.8329 11.3238 13.8329 9.66699C13.8329 8.01014 12.4898 6.66699 10.8329 6.66699C9.17607 6.66699 7.83293 8.01014 7.83293 9.66699C7.83293 11.3238 9.17607 12.667 10.8329 12.667Z"
+        fill="#3B87F4"
+      />
+    </svg>
+  );
+}

components/atoms/icons/default-image-icon.tsx

@@ -1,11 +1,12 @@
-export function DefaultImageIcon() {
+export function DefaultImageIcon(props?: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="17"
       height="16"
       viewBox="0 0 17 16"
       fill="none"
+      {...props}
     >
       <path
         fillRule="evenodd"

components/atoms/icons/index.ts

@@ -1,4 +1,5 @@
 export * from './apple-logo-icon';
+export * from './album-icon';
 export * from './badge-icon';
 export * from './bell-icon';
 export * from './camera-icon';
@@ -29,6 +30,7 @@ export * from './statistics-icon';
 export * from './success-check-icon';
 export * from './swim-icon';
 export * from './swimmer-icon';
+export * from './toast';
 export * from './triangle-arrow-icon';
 export * from './triangle-arrow-icon-reverse';
 export * from './types';

components/atoms/icons/toast/error.tsx

@@ -0,0 +1,27 @@
+export const Error = (props?: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_18199_7240)">
+        <circle cx="12" cy="12" r="8" fill="white" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.1001 12.0001C2.1001 6.53248 6.53247 2.1001 12.0001 2.1001C17.4677 2.1001 21.9001 6.53248 21.9001 12.0001C21.9001 17.4677 17.4677 21.9001 12.0001 21.9001C6.53247 21.9001 2.1001 17.4677 2.1001 12.0001ZM13.0001 16.2501C13.0001 16.8024 12.5524 17.2501 12.0001 17.2501C11.4478 17.2501 11.0001 16.8024 11.0001 16.2501C11.0001 15.6978 11.4478 15.2501 12.0001 15.2501C12.5524 15.2501 13.0001 15.6978 13.0001 16.2501ZM11.1001 6.75012V13.7501H12.9001V6.75012H11.1001Z"
+          fill="#FF4242"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_18199_7240">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

components/atoms/icons/toast/index.ts

@@ -0,0 +1,3 @@
+export * from './error';
+export * from './success';
+export * from './warning';

components/atoms/icons/toast/success.tsx

@@ -0,0 +1,27 @@
+export const Success = (props?: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_18199_7226)">
+        <circle cx="12" cy="12" r="8" fill="white" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.1459 9.62682L10.6766 16.2922L6.85426 12.3541L8.14591 11.1004L10.6766 13.7078L15.8543 8.37317L17.1459 9.62682ZM2.1001 12C2.1001 6.53236 6.53248 2.09998 12.0001 2.09998C17.4677 2.09998 21.9001 6.53236 21.9001 12C21.9001 17.4676 17.4677 21.9 12.0001 21.9C6.53248 21.9 2.1001 17.4676 2.1001 12Z"
+          fill="#00BF40"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_18199_7226">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

components/atoms/icons/toast/warning.tsx

@@ -0,0 +1,19 @@
+export const Warning = (props?: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.1001 12.0001C2.1001 6.53248 6.53247 2.1001 12.0001 2.1001C17.4677 2.1001 21.9001 6.53248 21.9001 12.0001C21.9001 17.4677 17.4677 21.9001 12.0001 21.9001C6.53247 21.9001 2.1001 17.4677 2.1001 12.0001ZM13.0001 16.2501C13.0001 16.8024 12.5524 17.2501 12.0001 17.2501C11.4478 17.2501 11.0001 16.8024 11.0001 16.2501C11.0001 15.6978 11.4478 15.2501 12.0001 15.2501C12.5524 15.2501 13.0001 15.6978 13.0001 16.2501ZM11.1001 6.75012V13.7501H12.9001V6.75012H11.1001Z"
+        fill="#FFCF58"
+      />
+    </svg>
+  );
+};

components/atoms/index.ts

@@ -5,4 +5,6 @@ export * from './icons';
 export * from './image';
 export * from './loading';
 export * from './portal';
+export * from './pull-to-refresh';
+export * from './toast';
 export * from './waves';

components/atoms/loading/loading.tsx

@@ -1,25 +1,38 @@
-import { css } from '@/styled-system/css';
+import { css, cva } from '@/styled-system/css';
 
 import { LoadingIcon } from '../icons';
 
 interface LoadingScale {
   width?: number;
   height?: number;
+  paddingY?: 'none' | 'small' | 'normal';
 }
 
-export const LoadingArea = ({ width = 20, height = 20 }: LoadingScale) => {
+export const LoadingArea = ({
+  width = 20,
+  height = 20,
+  paddingY = 'normal',
+}: LoadingScale) => {
   return (
-    <div className={containerStyle}>
+    <div className={containerStyle({ paddingY })}>
       <div className={wrapperStyle}>
         <LoadingIcon width={width} height={height} />
       </div>
     </div>
   );
 };
 
-const containerStyle = css({
-  width: 'full',
-  py: '40px',
+const containerStyle = cva({
+  base: {
+    width: 'full',
+  },
+  variants: {
+    paddingY: {
+      none: { py: '0' },
+      small: { py: '20px' },
+      normal: { py: '40px' },
+    },
+  },
 });
 
 const wrapperStyle = css({

components/atoms/pull-to-refresh/index.ts

@@ -0,0 +1 @@
+export * from './pull-to-refresh';