feat: few codes for subway info test (#develop)

Author: createhb21

services/ahhachul.com/src/apis/request/community.ts

@@ -53,7 +53,11 @@ export const fetchCommunityDetail = (id: number) =>
   axiosInstance.get<ApiResponse<CommunityDetail>>(`/community-posts/${id}`);
 
 export const fetchCommunityCommentList = (id: number) =>
-  axiosInstance.get<ApiResponse<CommentList>>(`/community-posts/${id}/comments`);
+  axiosInstance.get<ApiResponse<CommentList>>(`/community-posts/${id}/comments`, {
+    params: {
+      sort: 'createdAt,asc',
+    },
+  });
 
 export const editCommunity = async (id: number, req: CommunityEditForm) => {
   const formData = new FormData();

services/ahhachul.com/src/apis/request/complaint.ts

@@ -46,4 +46,8 @@ export const fetchComplaintDetail = (id: number) =>
   axiosInstance.get<ApiResponse<ComplaintPostDetail>>(`/complaint-posts/${id}`);
 
 export const fetchComplaintCommentList = (id: number) =>
-  axiosInstance.get<ApiResponse<CommentList>>(`/complaint-posts/${id}/comments`);
+  axiosInstance.get<ApiResponse<CommentList>>(`/complaint-posts/${id}/comments`, {
+    params: {
+      sort: 'createdAt,asc',
+    },
+  });

services/ahhachul.com/src/apis/request/lostFound.ts

@@ -50,7 +50,11 @@ export const fetchLostFoundDetail = (id: number) =>
   axiosInstance.get<ApiResponse<LostFoundPostDetail>>(`/lost-posts/${id}`);
 
 export const fetchLostFoundCommentList = (id: number) =>
-  axiosInstance.get<ApiResponse<CommentList>>(`/lost-posts/${id}/comments`);
+  axiosInstance.get<ApiResponse<CommentList>>(`/lost-posts/${id}/comments`, {
+    params: {
+      sort: 'createdAt,asc',
+    },
+  });
 
 export const editLostFound = async (id: number, req: LostFoundEditForm) => {
   const formData = new FormData();

services/ahhachul.com/src/apis/request/subway.ts

@@ -0,0 +1,10 @@
+import axiosInstance from '@/apis/fetcher';
+import { ITrain, WithSubwayLineId, WithSubwayStationId, type ApiResponse } from '@/types';
+
+interface APITrainInfoParams extends WithSubwayLineId, WithSubwayStationId {}
+interface APITrainInfoResponse {
+  trainRealTimes: ITrain[];
+}
+
+export const fetchTrainInfo = (params: APITrainInfoParams) =>
+  axiosInstance.get<ApiResponse<APITrainInfoResponse>>('/trains/real-times', { params });

services/ahhachul.com/src/assets/icons/system/ic_chevron.svg

@@ -7,6 +7,7 @@ export { default as InfoIcon } from './ic_info.svg?react';
 export { default as LogoIcon } from './ic_logo.svg?react';
 export { default as HomeIcon } from './ic_home.svg?react';
 export { default as PlusIcon } from './ic_plus.svg?react';
+export { default as RetryIcon } from './ic_retry.svg?react';
 export { default as ShareIcon } from './ic_share.svg?react';
 export { default as CloseIcon } from './ic_close.svg?react';
 export { default as CheckIcon } from './ic_check.svg?react';

services/ahhachul.com/src/assets/icons/system/ic_retry.svg

@@ -60,7 +60,7 @@ export const ReplyButton = styled.button`
 export const readonlyEditorCss = css`
   padding: 0;
 
-  & > div {
+  & > div > div {
     padding: 0;
     border: none;
   }

services/ahhachul.com/src/assets/icons/system/index.ts

@@ -11,16 +11,23 @@ interface NewBtnProps {
   label?: string;
   type?: NewBtnType;
   replace?: boolean;
+  checkAuth?: boolean;
 }
 
-const NewBtn = ({ activityName, label = '글쓰기', type = 'new', replace = false }: NewBtnProps) => {
+const NewBtn = ({
+  activityName,
+  label = '글쓰기',
+  type = 'new',
+  replace = false,
+  checkAuth = true,
+}: NewBtnProps) => {
   const { push, replace: replacePage } = useFlow();
   const { authService } = useAuth();
 
   const onClick = () => {
     const action = replace ? replacePage : push;
     action(
-      authService.isAuthenticated ? activityName : 'SignInPage',
+      !checkAuth ? activityName : authService.isAuthenticated ? activityName : 'SignInPage',
       {},
       {
         animate: !replace,

services/ahhachul.com/src/components/common/comment/commentListItem/CommentListItem.styled.tsx

@@ -0,0 +1,133 @@
+import { useMemo, useReducer, useCallback, useRef } from 'react';
+
+import { motion } from 'motion/react';
+import { from, tap, map } from 'rxjs';
+
+import { ChevronIcon } from '@/assets/icons/system';
+import useOnClickOutside from '@/hooks/useOnClickOutside';
+import { useUserStationStore } from '@/stores/subway';
+import type { UserStation } from '@/types';
+
+import * as S from './HomeHeaderActions.styled';
+
+const wrapperVariants = {
+  open: {
+    scaleX: 1,
+    scaleY: 1,
+    opacity: 1,
+    transition: {
+      stiffness: 300,
+      damping: 20,
+      when: 'beforeChildren',
+      staggerChildren: 0.02,
+      duration: 0.15,
+    },
+  },
+  closed: {
+    scaleX: 0.8,
+    scaleY: 0.8,
+    opacity: 0,
+    transition: {
+      duration: 0.4,
+      staggerChildren: 0.5,
+    },
+  },
+};
+
+const iconVariants = {
+  open: { rotate: 180 },
+  closed: { rotate: 0, transition: { duration: 0 } },
+};
+
+const itemVariants = {
+  open: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0,
+      when: 'beforeChildren',
+    },
+  },
+  closed: {
+    opacity: 0,
+    y: -15,
+    transition: {
+      duration: 0,
+      when: 'afterChildren',
+    },
+  },
+};
+
+const actionTextVariants = {
+  open: { scale: 1, y: 0, transition: { duration: 0.15 } },
+  closed: { scale: 0, y: -7, transition: { duration: 0.15 } },
+};
+
+const Option = ({ station, onClick }: { station: UserStation; onClick: () => void }) => {
+  return (
+    <motion.li variants={itemVariants} css={S.option} onClick={onClick}>
+      <motion.span variants={actionTextVariants}>{station.name}</motion.span>
+    </motion.li>
+  );
+};
+
+const HomeHeaderActions = () => {
+  const [openDialog, toggleDialog] = useReducer(open => !open, false);
+
+  const dialogRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(dialogRef, toggleDialog);
+
+  const { stations, setUserStations } = useUserStationStore(state => state);
+  const activatedStation = useMemo(() => stations[0], [stations]);
+
+  const handleStationClick = useCallback(
+    (clickedStation: UserStation) => () => {
+      if (!openDialog) return;
+      if (activatedStation.name === clickedStation.name) {
+        toggleDialog();
+        return;
+      }
+
+      from([clickedStation])
+        .pipe(
+          tap(() => toggleDialog()),
+          map(clicked => [clicked, ...stations.filter(station => station.name !== clicked.name)]),
+          tap(updatedStations => setUserStations(updatedStations)),
+        )
+        .subscribe();
+    },
+    [activatedStation.name, stations, setUserStations],
+  );
+
+  return (
+    <div css={S.container} ref={dialogRef}>
+      <button css={S.button} onClick={toggleDialog}>
+        <span>{activatedStation.name}</span>
+        <motion.span variants={iconVariants}>
+          <ChevronIcon />
+        </motion.span>
+      </button>
+      <motion.div
+        animate={openDialog ? 'open' : 'closed'}
+        css={{
+          position: 'relative',
+        }}
+      >
+        <motion.ul
+          initial={wrapperVariants.closed}
+          variants={wrapperVariants}
+          style={{
+            originY: 'top',
+          }}
+          css={S.menu}
+        >
+          {stations.map(station => (
+            <Option key={station.name} station={station} onClick={handleStationClick(station)} />
+          ))}
+        </motion.ul>
+      </motion.div>
+    </div>
+  );
+};
+
+export default HomeHeaderActions;