refactor - 프로젝트 초기 세팅 작업 #2

mark77234 · 2025-12-17T13:07:30Z

작업내용

설명

홈 화면을 두 단락으로 나눠서 첫 화면은 달력 페이지 한번 아래로 스크롤하면 오늘의 운세 페이지로 스크롤을 고정시켰습니다
가위 아이콘 드래그로 다음 일력으로 넘어갈 수 있습니다

스크린샷

simulator_screenshot_63AD8BB0-B297-4903-94F4-2CE1674FCE29

simulator_screenshot_F39FC3A9-F0EA-4A04-8640-97F721FD9BD1

Copilot

Pull request overview

This PR implements the initial project setup for a daily fortune calendar app ("하루 일력") with an interactive calendar interface, fortune display, and unique paper-tearing navigation using a draggable scissors icon.

Key Changes

Refactored from tab-based navigation to a single-screen fortune calendar app with onboarding flow
Integrated NativeWind (Tailwind CSS v3) for styling with proper configuration
Implemented interactive calendar page with animated scissors-drag navigation and dual-page scroll (calendar + fortune details)

Reviewed changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
frontend/package.json	Added AsyncStorage and vector icons dependencies; downgraded Tailwind to v3.4.19 for NativeWind compatibility
frontend/tailwind.config.js	Added NativeWind preset for React Native Tailwind support
frontend/metro.config.js	Integrated NativeWind with global CSS configuration
frontend/eslint.config.js	Added runtime and Node globals configuration for config files
frontend/src/types/fortune.ts	Defined TypeScript types for user settings and fortune data structure
frontend/src/services/geminiService.ts	Created placeholder service for fetching daily fortune data
frontend/src/constants/config.ts	Added safe environment variable access for React Native
frontend/src/components/UserInfoForm.tsx	Implemented user information form for initial setup
frontend/src/components/SettingsSheet.tsx	Created settings modal for updating user preferences
frontend/src/components/Onboarding.tsx	Added onboarding screen with app feature guide
frontend/src/components/CalendarPage.tsx	Built main calendar page with animated scissors navigation and fortune display
frontend/src/components/Button.tsx	Refactored to use Pressable instead of View for proper touch handling
frontend/app/index.tsx	Implemented main app logic with state management and AsyncStorage persistence
frontend/app/_layout.tsx	Updated layout to single-screen navigation structure
frontend/.github/workflows/lint-test.yml	Added CI workflow for linting on push and pull requests

Files not reviewed (1)

frontend/pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

frontend/app/index.tsx:2

Unused import Pressable.

import { ActivityIndicator, Alert, Pressable, View } from 'react-native';

frontend/app/index.tsx:13

Unused import Feather.

import { Feather } from '@expo/vector-icons';

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-17T13:17:09Z

frontend/app/index.tsx

+    await AsyncStorage.setItem(HAS_ONBOARDED_KEY, 'true');
+  };
+
+  const persistUserSettings = async (settings: UserSettings) => {
+    setUserSettings(settings);
+    await AsyncStorage.setItem(USER_SETTINGS_KEY, JSON.stringify(settings));


Error handling for AsyncStorage.setItem is missing. If persisting the onboarding state fails, the UI state and stored state will be out of sync. Consider wrapping the AsyncStorage call in a try-catch block and handling errors appropriately.

Suggested change

await AsyncStorage.setItem(HAS_ONBOARDED_KEY, 'true');

};

const persistUserSettings = async (settings: UserSettings) => {

setUserSettings(settings);

await AsyncStorage.setItem(USER_SETTINGS_KEY, JSON.stringify(settings));

try {

await AsyncStorage.setItem(HAS_ONBOARDED_KEY, 'true');

} catch (error) {

console.warn('Failed to persist onboarding state', error);

Alert.alert(

'저장에 실패했어요',

'온보딩 상태를 저장하지 못했습니다. 앱을 다시 시작하면 온보딩을 다시 진행해야 할 수 있어요.',

);

}

};

const persistUserSettings = async (settings: UserSettings) => {

setUserSettings(settings);

try {

await AsyncStorage.setItem(USER_SETTINGS_KEY, JSON.stringify(settings));

} catch (error) {

console.warn('Failed to persist user settings', error);

Alert.alert(

'설정을 저장하지 못했어요',

'다시 시도해 주세요. 문제가 계속되면 앱을 재시작해 보세요.',

);

}

Copilot · 2025-12-17T13:17:10Z

frontend/src/components/CalendarPage.tsx

+
+      <View
+        className="z-10 bg-white px-4"
+        style={{ paddingTop: insets.top + 8 }} // ✅ 노치 / 다이나믹 아일랜드 대응


The comment is in Korean and includes emojis. While this may be intentional for a Korean-language project, it's inconsistent with the inline comment style in other parts of the codebase. Consider using a consistent comment style throughout the project.

Suggested change

style={{ paddingTop: insets.top + 8 }} // ✅ 노치 / 다이나믹 아일랜드 대응

style={{ paddingTop: insets.top + 8 }} // Add extra top padding for notch / dynamic island

Copilot · 2025-12-17T13:17:10Z

frontend/src/components/UserInfoForm.tsx

+          <TextInput
+            value={form.birthdate}
+            onChangeText={(text) => update({ birthdate: text })}
+            placeholder="YYYY-MM-DD"
+            placeholderTextColor="#9ca3af"
+            className="rounded-xl bg-gray-100 px-3.5 py-3.5 text-base text-gray-900"
+          />


The birthdate input accepts free-form text without validation. Users could enter invalid dates like "2025-13-45" or malformed strings. Consider adding input validation, using a date picker component, or at least validating the format before allowing form submission.

Copilot · 2025-12-17T13:17:10Z

frontend/src/components/SettingsSheet.tsx

+              <Row label="생년월일" divider>
+                <TextInput
+                  value={form.birthdate}
+                  onChangeText={(text) => update({ birthdate: text })}
+                  placeholder="YYYY-MM-DD"
+                  placeholderTextColor="#d1d5db"
+                  className="min-w-[120] text-right text-[15px] text-gray-900"
+                />
+              </Row>


The birthdate input in settings accepts free-form text without validation. Users could enter invalid dates. This is the same issue as in UserInfoForm - consider adding input validation or using a date picker component.

Copilot · 2025-12-17T13:17:11Z

frontend/src/constants/config.ts

+type EnvRecord = Record<string, string | undefined>;
+
+const env: EnvRecord =
+  typeof process !== 'undefined' && process.env ? (process.env as EnvRecord) : {};


The environment variable check typeof process !== 'undefined' && process.env may not be sufficient in all React Native environments. Consider using a more robust environment configuration library like react-native-config or expo-constants for better cross-platform support.

Suggested change

type EnvRecord = Record<string, string | undefined>;

const env: EnvRecord =

typeof process !== 'undefined' && process.env ? (process.env as EnvRecord) : {};

import Config from 'react-native-config';

type EnvRecord = Record<string, string | undefined>;

const env: EnvRecord =

(Config as unknown as EnvRecord) ||

(typeof process !== 'undefined' && process.env ? (process.env as EnvRecord) : {});

Copilot · 2025-12-17T13:17:13Z

frontend/src/components/CalendarPage.tsx

+      >
+        {/* 상단 커스텀 헤더 */}
+        <View className="flex-row items-center justify-between mb-2">
+          {/* 왼쪽 더미 공간 (에러 방지) */}


The Korean comment should be in English or use a consistent commenting style across the codebase. The "에러 방지" (error prevention) comment isn't descriptive enough about what error it's preventing.

Suggested change

{/* 왼쪽 더미 공간 (에러 방지) */}

{/* Left spacer to keep header content aligned and prevent layout overlap issues */}

Copilot · 2025-12-17T13:17:13Z

frontend/src/components/UserInfoForm.tsx

+            <TextInput
+              value={form.notificationTime}
+              onChangeText={(text) => update({ notificationTime: text })}
+              placeholder="08:00"
+              placeholderTextColor="#9ca3af"
+              className="min-w-[80] text-right text-base text-gray-900"
+            />


The notification time input accepts free-form text without validation. Users could enter invalid time formats. Consider adding input validation to ensure the time is in the correct HH:mm format, or use a time picker component.

Copilot · 2025-12-17T13:17:13Z

frontend/src/components/SettingsSheet.tsx

+                  <TextInput
+                    value={form.notificationTime}
+                    onChangeText={(text) => update({ notificationTime: text })}
+                    placeholder="08:00"
+                    placeholderTextColor="#d1d5db"
+                    className="min-w-[120] text-right text-[15px] text-gray-900"
+                  />


The notification time input accepts free-form text without validation. Users could enter invalid time formats. Consider adding input validation to ensure the time is in the correct HH:mm format, or use a time picker component.

Copilot · 2025-12-17T13:17:14Z

frontend/src/components/CalendarPage.tsx

+      cutProgress.setValue(0);
+      scissorX.setValue(0);
+      scissorStartX.current = 0;
+      setTimeout(() => setIsTearing(false), 100);


Using setTimeout without cleanup could lead to memory leaks or state updates on unmounted components. If the component unmounts before the 100ms timeout completes, the setIsTearing(false) call will attempt to update state on an unmounted component. Consider using a ref to track mount status or cleanup the timeout in a useEffect return function.

Copilot · 2025-12-17T13:17:14Z

frontend/app/index.tsx

@@ -0,0 +1,151 @@
+import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { ActivityIndicator, Alert, Pressable, View } from 'react-native';


The unused import Pressable should be removed as it's not used anywhere in this file.

Suggested change

import { ActivityIndicator, Alert, Pressable, View } from 'react-native';

import { ActivityIndicator, Alert, View } from 'react-native';

qlqlrh · 2025-12-17T13:27:49Z

수고하셨습니다!! 생각한 그대로의 UI예요 최고최고 ~~ 🫵🏻👍🏻 !!

mark77234 added 8 commits December 14, 2025 22:33

feat: React 코드 마이그레이션

4b86476

feat: UI 업데이트

022ae12

chore: nativewind 설정

66da3a0

refactor: 프로젝트 전체 리팩토링

fb986c2

fix: 미사용 컴포넌트 제거

6b7373d

feat: 달력뜯는 기능 추가

f5cb15c

feat: 헤더 삭제 및 설정 추가

86733ff

feat: lint 검사 CI 추가

8bf9b72

mark77234 self-assigned this Dec 17, 2025

Copilot AI review requested due to automatic review settings December 17, 2025 13:07

mark77234 added the refactor 코드 리팩토링 작업 label Dec 17, 2025

mark77234 linked an issue Dec 17, 2025 that may be closed by this pull request

refactor - 프로젝트 구조 세팅 #1

Closed

2 tasks

Copilot started reviewing on behalf of mark77234 December 17, 2025 13:08 View session

mark77234 added 3 commits December 17, 2025 22:08

feat: lint 검사 CI 추가

cea8dae

fix: pnpm 설정 수정 및 불필요한 lint-test.yml 파일 삭제

f4f1ea8

refactor: lint-test.yml 파일 이름 변경 및 불필요한 주석 제거

bed94fc

mark77234 requested a review from qlqlrh December 17, 2025 13:14

Copilot AI reviewed Dec 17, 2025

View reviewed changes

qlqlrh approved these changes Dec 17, 2025

View reviewed changes

mark77234 merged commit 3d297ac into dev Dec 17, 2025
1 check passed

mark77234 deleted the refactor/1 branch December 17, 2025 13:32

-    await AsyncStorage.setItem(HAS_ONBOARDED_KEY, 'true');
-  };
-  const persistUserSettings = async (settings: UserSettings) => {
-    setUserSettings(settings);
-    await AsyncStorage.setItem(USER_SETTINGS_KEY, JSON.stringify(settings));
+    try {
+      await AsyncStorage.setItem(HAS_ONBOARDED_KEY, 'true');
+    } catch (error) {
+      console.warn('Failed to persist onboarding state', error);
+      Alert.alert(
+        '저장에 실패했어요',
+        '온보딩 상태를 저장하지 못했습니다. 앱을 다시 시작하면 온보딩을 다시 진행해야 할 수 있어요.',
+      );
+    }
+  };
+  const persistUserSettings = async (settings: UserSettings) => {
+    setUserSettings(settings);
+    try {
+      await AsyncStorage.setItem(USER_SETTINGS_KEY, JSON.stringify(settings));
+    } catch (error) {
+      console.warn('Failed to persist user settings', error);
+      Alert.alert(
+        '설정을 저장하지 못했어요',
+        '다시 시도해 주세요. 문제가 계속되면 앱을 재시작해 보세요.',
+      );
+    }

	style={{ paddingTop: insets.top + 8 }} // ✅ 노치 / 다이나믹 아일랜드 대응
	style={{ paddingTop: insets.top + 8 }} // Add extra top padding for notch / dynamic island

	{/* 왼쪽 더미 공간 (에러 방지) */}
	{/* Left spacer to keep header content aligned and prevent layout overlap issues */}

		@@ -0,0 +1,151 @@
		import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
		import { ActivityIndicator, Alert, Pressable, View } from 'react-native';

	import { ActivityIndicator, Alert, Pressable, View } from 'react-native';
	import { ActivityIndicator, Alert, View } from 'react-native';

refactor - 프로젝트 초기 세팅 작업 #2

refactor - 프로젝트 초기 세팅 작업 #2

Uh oh!

Conversation

mark77234 commented Dec 17, 2025

작업내용

설명

스크린샷

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

qlqlrh commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

qlqlrh commented Dec 17, 2025 •

edited

Loading